/*
 * ══════════════════════════════════════════════════════════════════════
 * ERP-LAYOUT.CSS v2 — COOPAC Quinuapata
 * ══════════════════════════════════════════════════════════════════════
 */

/* ── LAYOUT ─────────────────────────────────────────────────────────── */
.erp-layout { display:flex; height:100vh; overflow:hidden; }

/* ══ SIDEBAR ═══════════════════════════════════════════════════════════ */
.erp-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex; flex-direction: column;
    flex-shrink: 0; position: relative;
    z-index: var(--z-sidebar); overflow: hidden;
    transition: width .26s cubic-bezier(.4,0,.2,1);
    box-shadow: 2px 0 16px rgba(0,0,0,.15);
}
.erp-sidebar.collapsed { width: var(--sidebar-collapsed); }

/* Hover-expand en modo colapsado */
.erp-sidebar.collapsed.hovered { width: var(--sidebar-w); }
.erp-sidebar.collapsed.hovered .sidebar-brand-text,
.erp-sidebar.collapsed.hovered .nav-section-label,
.erp-sidebar.collapsed.hovered .nav-item-text,
.erp-sidebar.collapsed.hovered .nav-item-badge,
.erp-sidebar.collapsed.hovered .sb-user-info,
.erp-sidebar.collapsed.hovered .sb-active-dot { opacity:1; max-width:160px; transform:translateX(0); }
.erp-sidebar.collapsed.hovered .sidebar-brand { justify-content:flex-start; gap:.75rem; padding:1rem .875rem; }
.erp-sidebar.collapsed.hovered .nav-item { justify-content:flex-start; gap:.5rem; padding:.4375rem .5rem; }
.erp-sidebar.collapsed.hovered .sb-user-card { justify-content:flex-start; gap:.625rem; padding:.5rem .625rem; }
.erp-sidebar.collapsed.hovered .nav-section-label { max-height:20px; opacity:1; }
.erp-sidebar.collapsed.hovered .nav-section::before { display:none; }

/* ── Brand ── */
.sidebar-brand {
    display:flex; align-items:center; gap:.75rem;
    padding: 1rem .875rem;
    border-bottom: 1px solid var(--sidebar-border);
    text-decoration:none; flex-shrink:0; overflow:hidden;
    transition: padding .26s, gap .26s, justify-content .26s;
}
.erp-sidebar.collapsed:not(.hovered) .sidebar-brand {
    justify-content:center; padding:1rem .5rem; gap:0;
}
.sidebar-brand-icon {
    width:36px; height:36px;
    background: transparent;
    border-radius: 0;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-brand-icon img { width:100%; height:100%; object-fit:contain; }
.sidebar-brand:hover .sidebar-brand-icon { transform:scale(1.08); }
.sidebar-brand-text {
    overflow:hidden;
    transition: opacity .18s, max-width .26s, transform .18s;
    max-width:160px;
}
.erp-sidebar.collapsed:not(.hovered) .sidebar-brand-text {
    opacity:0; max-width:0; transform:translateX(-6px);
}
.sidebar-brand-name {
    font-size:.875rem; font-weight:700; color:#fff;
    white-space:nowrap; line-height:1.2; letter-spacing:-.01em;
}
.sidebar-brand-sub {
    font-size:.5625rem; color:var(--sidebar-section-color);
    text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}

/* ── Nav ── */
.sidebar-nav {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:.625rem .5rem;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.07) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }

/* ── Sidebar footer ── */
.sidebar-footer {
    padding:.5rem .625rem .625rem;
    border-top:1px solid var(--sidebar-border);
    flex-shrink:0;
}

/* ── Backward compat: .nav-item para módulos no migrados ── */
.nav-item {
    display:flex; align-items:center; gap:.5rem;
    padding:.4375rem .5rem;
    color:var(--sidebar-text);
    border-radius:var(--r-md); margin-bottom:1px;
    font-size:.8125rem; font-weight:400;
    white-space:nowrap; text-decoration:none; cursor:pointer;
    border:1px solid transparent; position:relative;
    transition: background .14s, color .14s, transform .14s;
    overflow:hidden;
}
.nav-item:hover { background:var(--sidebar-icon-hover); color:var(--sidebar-text-hover); transform:translateX(2px); }
.nav-item.active { background:var(--sidebar-active-bg); color:var(--sidebar-active-text); font-weight:500; }
.nav-item.active::before {
    content:''; position:absolute; left:0; top:18%; bottom:18%;
    width:3px; border-radius:0 3px 3px 0; background:var(--sidebar-active-border);
}
.erp-sidebar.collapsed:not(.hovered) .nav-item { justify-content:center; gap:0; padding:.4375rem; }
.nav-item.danger { color:rgba(239,68,68,.7); }
.nav-item.danger:hover { background:rgba(239,68,68,.1); color:#fca5a5; transform:none; }
.nav-item-icon {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    background:var(--sidebar-icon-bg); border-radius:var(--r-sm); font-size:.75rem; flex-shrink:0;
    transition: background .14s, transform .18s;
}
.nav-item.active .nav-item-icon { background:rgba(255,255,255,.14); transform:scale(1.06); }
.nav-item-text {
    flex:1; overflow:hidden; max-width:140px;
    transition: opacity .18s, max-width .26s, transform .18s; font-size:.8125rem;
}
.erp-sidebar.collapsed:not(.hovered) .nav-item-text { opacity:0; max-width:0; transform:translateX(-4px); }

/* ══ MAIN ═══════════════════════════════════════════════════════════════ */
.erp-main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* ══ TOPBAR v2 ══════════════════════════════════════════════════════════ */
.erp-topbar {
    height:var(--topbar-h);
    background:var(--topbar-bg);
    border-bottom:1px solid var(--topbar-border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.25rem;
    flex-shrink:0; gap:.875rem;
    box-shadow:var(--shadow-xs);
    z-index:var(--z-topbar); position:relative;
}

.topbar-left {
    display:flex; align-items:center;
    gap:.75rem; min-width:0; flex:1;
}
.topbar-mobile-btn {
    display:none; width:34px; height:34px;
    background:var(--surface3); border:none;
    border-radius:var(--r-md); color:var(--text-soft);
    cursor:pointer; align-items:center; justify-content:center;
    font-size:.875rem; transition:var(--t); flex-shrink:0;
}
.topbar-mobile-btn:hover { background:var(--border); color:var(--text); }

.topbar-sep { width:1px; height:18px; background:var(--topbar-surface, var(--border)); flex-shrink:0; }

.topbar-page-info { min-width:0; }
.topbar-breadcrumb {
    font-size:.625rem; color:var(--topbar-text-muted, var(--text-muted));
    display:flex; align-items:center; gap:.275rem; margin-bottom:.1rem;
}
.topbar-breadcrumb a { color:var(--topbar-text-muted, var(--text-muted)); text-decoration:none; transition:color .14s; }
.topbar-breadcrumb a:hover { color:var(--topbar-text, var(--primary-mid)); opacity:.8; }
.topbar-breadcrumb .sep { font-size:.45rem; opacity:.45; }
.topbar-breadcrumb .current { color:var(--topbar-text-muted, var(--text-soft)); font-weight:500; }
.topbar-title {
    font-size:.9375rem; font-weight:700; color:var(--topbar-text, var(--text));
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    letter-spacing:-.02em; line-height:1.2;
}

/* Botón icono topbar */
.topbar-icon-btn {
    width:34px; height:34px;
    border-radius:var(--r-md);
    border:1px solid var(--topbar-surface, var(--border));
    background:var(--topbar-surface, var(--surface2));
    color:var(--topbar-text-muted, var(--text-muted)); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:.8125rem; position:relative;
    transition: all .15s;
    text-decoration:none;
}
.topbar-icon-btn:hover {
    color:var(--topbar-text, var(--primary-mid));
    border-color:var(--topbar-surface-hover, var(--primary-mid));
    background:var(--topbar-surface-hover, var(--primary-light));
    transform:translateY(-1px);
}
.topbar-icon-btn .notif-badge {
    position:absolute; top:5px; right:5px;
    width:7px; height:7px; border-radius:50%;
    background:var(--danger);
    border:1.5px solid var(--topbar-bg);
}

.topbar-right {
    display:flex; align-items:center; gap:.5rem; flex-shrink:0;
}

/* Usuario topbar */
.topbar-user {
    display:flex; align-items:center; gap:.5rem;
    padding:.3rem .5rem .3rem .375rem;
    border-radius:var(--r-md); cursor:pointer;
    border:1px solid transparent;
    transition: background .14s, border-color .14s;
}
.topbar-user:hover { background:var(--topbar-surface-hover, var(--surface3)); border-color:var(--topbar-surface, var(--border)); }
.topbar-user-info { text-align:right; }
.topbar-user-name {
    font-size:.8125rem; font-weight:600; color:var(--topbar-text, var(--text));
    display:block; white-space:nowrap; letter-spacing:-.01em; line-height:1.2;
}
.topbar-user-role {
    font-size:.625rem; color:var(--topbar-text-muted, var(--text-muted)); display:block; white-space:nowrap;
}
.topbar-user-avatar {
    width:32px; height:32px; border-radius:var(--r-md);
    background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:.8125rem; font-weight:700; flex-shrink:0;
    transition:transform .2s cubic-bezier(.34,1.4,.64,1);
}
.topbar-user:hover .topbar-user-avatar { transform:scale(1.08); }

/* ══ CONTENT ════════════════════════════════════════════════════════════ */
.erp-content {
    flex:1; overflow-y:auto; overflow-x:hidden; padding:1.5rem 2rem;
}
.erp-content::-webkit-scrollbar { width:5px; }
.erp-content::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.erp-content::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* iframe */
.erp-frame { flex:1; position:relative; }
.erp-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* ── Overlay mobile ── */
.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(15,23,42,.5);
    z-index:calc(var(--z-sidebar) - 1);
    backdrop-filter:blur(2px);
}
.sidebar-overlay.active { display:block; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .erp-content { padding:1.25rem 1.5rem; }
}
@media (max-width:768px) {
    .erp-sidebar {
        position:fixed; top:0;
        left:calc(-1 * var(--sidebar-w));
        height:100vh; z-index:var(--z-sidebar);
        transition:left .25s cubic-bezier(.4,0,.2,1);
    }
    .erp-sidebar.mobile-open { left:0; }
    .erp-sidebar.collapsed { width:var(--sidebar-w); left:calc(-1 * var(--sidebar-w)); }
    .sidebar-toggle-btn { display:none; }
    .topbar-mobile-btn { display:flex; }
    .topbar-sep { display:none; }
    .erp-content { padding:1rem; }
    .topbar-user-info { display:none; }
    .erp-topbar { padding:0 .875rem; }
}
@media (max-width:480px) {
    .form-grid,.form-grid-3,.form-grid-4 { grid-template-columns:1fr; }
    .page-header { flex-direction:column; }
    .page-actions { width:100%; }
    .page-actions .btn { flex:1; justify-content:center; }
}