/* ═══════════════════════════════════════════════════════
   Cenacor Lite — Design System (tema Clásico)
   ═══════════════════════════════════════════════════════ */

:root {
  --sidebar-w:  248px;
  --topbar-h:   60px;

  --brand:        #3b82f6;
  --brand-hover:  #2563eb;
  --brand-light:  #eff6ff;
  --brand-mid:    #93c5fd;

  --sb-bg:        #111827;
  --sb-border:    rgba(255,255,255,.07);
  --sb-text:      #9ca3af;
  --sb-text-hover:#f9fafb;
  --sb-active-bg: rgba(59,130,246,.16);
  --sb-active-bar:#60a5fa;

  --page-bg:      #f3f4f6;
  --card:         #ffffff;
  --topbar-bg:    #ffffff;
  --topbar-border:#e5e7eb;

  --tx-1: #111827;
  --tx-2: #374151;
  --tx-3: #6b7280;
  --tx-4: #9ca3af;

  --border:       #e5e7eb;
  --border-focus: #3b82f6;

  --green:    #16a34a; --green-bg:  #dcfce7;
  --red:      #dc2626; --red-bg:    #fee2e2;
  --amber:    #d97706; --amber-bg:  #fef3c7;
  --blue:     #2563eb; --blue-bg:   #dbeafe;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-md: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

  --transition: .15s ease;
}

/* ── Tema: Clásico Oscuro ───────────────────────────────── */
[data-tema="oscuro"] {
  --sb-bg:        #1a1a1a;
  --sb-border:    rgba(255,255,255,.06);
  --sb-text:      #a0a0a0;
  --sb-text-hover:#f0f0f0;
  --sb-active-bg: rgba(79,70,229,.18);
  --sb-active-bar:#6366f1;

  --page-bg:      #121212;
  --card:         #1e1e1e;

  --tx-1: #f0f0f0;
  --tx-2: #d0d0d0;
  --tx-3: #a0a0a0;
  --tx-4: #6b6b6b;

  --border:       #2e2e2e;

  --topbar-bg:    #1a1a1a;
  --topbar-border:#2e2e2e;
  --topbar-color: #f0f0f0;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);
}
[data-tema="oscuro"] body    { background: var(--page-bg); color: var(--tx-1); }
[data-tema="oscuro"] .topbar-title { color: var(--topbar-color); }

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-1);
  background: var(--page-bg);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ═══════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════ */
.app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 200;
  border-right: 1px solid var(--sb-border);
  transition: transform .25s ease;
}

.sb-brand {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sb-brand-logo {
  width: 38px; height: 38px;
  background: var(--brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.sb-brand-name {
  font-size: .9rem;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: -.01em;
}
.sb-brand-sub {
  font-size: .65rem;
  color: var(--sb-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.sb-section-label {
  padding: 1.1rem 1.25rem .35rem;
  font-size: .6rem;
  font-weight: 700;
  color: #4b5563;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .575rem 1.25rem;
  margin: 1px .75rem;
  border-radius: var(--radius-sm);
  color: var(--sb-text);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .7; transition: opacity var(--transition); }
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--sb-text-hover); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: var(--sb-active-bg);
  color: var(--brand-mid);
}
.nav-item.active svg { opacity: 1; }

.sb-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sb-border);
}
.sb-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}
.sb-avatar {
  width: 32px; height: 32px;
  background: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.sb-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-role {
  font-size: .7rem;
  color: var(--sb-text);
}

.btn-logout {
  width: 100%;
  padding: .5rem .75rem;
  background: transparent;
  border: 1px solid #374151;
  border-radius: var(--radius-sm);
  color: #9ca3af;
  font-size: .8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  margin-bottom: .75rem;
}
.btn-logout:hover {
  background: rgba(239,68,68,.1);
  border-color: #ef4444;
  color: #ef4444;
}

.theme-selector {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.theme-btn {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: 15px;
  transition: background var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-btn:hover { background: rgba(255,255,255,.14); border-color: var(--sb-active-bar); }

/* ── Layout main ──────────────────────────────────────── */
.layout-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Backward compat */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar, .header {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

.topbar-title, .header h1 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx-1);
  flex: 1;
}

.topbar-right, .user-info {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  background: var(--brand-light);
  border-radius: 20px;
}
.user-chip-avatar {
  width: 26px; height: 26px;
  background: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
}
.user-chip-name, #userName {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand);
}

/* ── Page ─────────────────────────────────────────────── */
.page, .content {
  flex: 1;
  padding: 1.75rem;
  overflow-y: auto;
}

/* ── Vista container ──────────────────────────────────── */
.vista-container {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.vista-container h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tx-1);
  margin-bottom: 1rem;
}
.vista-content { color: var(--tx-3); }

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ── Welcome / Dashboard ────────────────────────────────── */
.welcome-header {
  margin-bottom: 1.5rem;
}
.welcome-greeting {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tx-1);
  letter-spacing: -.02em;
}
.welcome-subtitle {
  font-size: .875rem;
  color: var(--tx-3);
  margin-top: .25rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-xs);
}
.stat-card-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--tx-4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}
.stat-card-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tx-1);
  letter-spacing: -.02em;
}
.stat-card-meta {
  font-size: .75rem;
  color: var(--tx-4);
  margin-top: .25rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Nav group — submenús del sidebar Clásico ─────────── */
.nav-group { margin: 1px .75rem; }

.nav-group-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .575rem .75rem .575rem 1.25rem;
  border-radius: var(--radius-sm);
  color: var(--sb-text);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition);
}
.nav-group-header .nav-ico {
  width: 17px; height: 17px; flex-shrink: 0;
  opacity: .7; transition: opacity var(--transition);
}
.nav-group-header:hover { background: rgba(255,255,255,.06); color: var(--sb-text-hover); }
.nav-group-header:hover .nav-ico { opacity: 1; }
.nav-group-header .nav-lbl { flex: 1; }
.nav-group-header .nav-arrow {
  width: 14px; height: 14px; flex-shrink: 0; opacity: .4;
  transition: transform .22s ease, opacity var(--transition);
}
.nav-group.open .nav-group-header { color: var(--sb-text-hover); }
.nav-group.open .nav-group-header .nav-ico { opacity: 1; }
.nav-group.open .nav-group-header .nav-arrow { transform: rotate(180deg); opacity: .7; }
.nav-group.has-active .nav-group-header { color: var(--brand-mid); }
.nav-group.has-active .nav-group-header .nav-ico { opacity: 1; }
.nav-group.has-active .nav-group-header .nav-arrow { opacity: .8; }

.nav-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-group.open .nav-sub { max-height: 250px; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .75rem .42rem 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--sb-text);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-sub-item::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .4; flex-shrink: 0;
}
.nav-sub-item:hover { background: rgba(255,255,255,.06); color: var(--sb-text-hover); }
.nav-sub-item:hover::before { opacity: .7; }
.nav-sub-item.active { color: var(--brand-mid); background: var(--sb-active-bg); }
.nav-sub-item.active::before { opacity: 1; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Responsive ────────────────────────────────────────── */

/* Botón hamburguesa — oculto por defecto en desktop */
.btn-hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--tx-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 20px;
  flex-shrink: 0;
}
.btn-hamburguesa:hover {
  background: var(--brand-light);
  color: var(--brand);
}

/* ── RESPONSIVE MÓVIL (<768px) ────────────────── */
@media (max-width: 768px) {

  /* Sidebar off-canvas */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 300;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }

  /* Overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 299;
  }
  .sidebar-backdrop.visible {
    display: block;
  }

  /* Main sin margen izquierdo */
  .layout-main,
  .main-content {
    margin-left: 0 !important;
  }

  /* Topbar: mostrar botón hamburguesa */
  .btn-hamburguesa {
    display: flex !important;
  }

  /* Padding reducido en páginas */
  .page,
  .content {
    padding: 1rem;
  }

  /* Tarjeta PC: ajustar posición */
  .tarjeta-pc {
    bottom: 16px;
    left: auto;
    right: 16px;
    padding: 10px 14px;
    max-width: calc(100vw - 32px);
  }

  /* Tablas: scroll horizontal */
  .tabla-wrapper,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modales: full width en móvil */
  .modal-box,
  .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto;
  }
}

/* ── RESPONSIVE TABLET (769px - 1024px) ─────── */
@media (min-width: 769px) and (max-width: 1024px) {

  :root {
    --sidebar-w: 200px;
  }

  .page,
  .content {
    padding: 1.25rem;
  }
}

/* ── Card sub-componentes (header / title / body) ─────── */
.card-header { padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.card-title { font-size: .825rem; font-weight: 600; color: var(--tx-1); }
.card-body { padding: .875rem 1rem; }

/* ── Tabs (página de configuración) ────────────────────── */
.cont-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.cont-tab { padding:10px 20px; border:none; background:transparent; cursor:pointer; font-size:13px; color:var(--tx-2); border-bottom:2px solid transparent; transition:all 0.15s; }
.cont-tab:hover { color:var(--tx-1); }
.cont-tab.activa { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }

/* ── Tema: Verde ────────────────────────────────────────── */
[data-tema="verde"] {
  --brand:        #22a066;
  --brand-hover:  #1a8a56;
  --brand-light:  #e6f7f0;
  --brand-mid:    #5de8a8;
  --border-focus: #22a066;

  --sb-bg:        #0d1b2a;
  --sb-active-bg: rgba(34,160,102,.18);
  --sb-active-bar:#22a066;

  --page-bg:      #f4f6f8;

  --topbar-bg:    #0d1b2a;
  --topbar-border:rgba(255,255,255,.08);
  --topbar-color: #f1f5f9;
}

/* ── Tema: Verde Oscuro ─────────────────────────────────── */
[data-tema="verde-oscuro"] {
  --brand:        #22a066;
  --brand-hover:  #1a8a56;
  --brand-light:  rgba(34,160,102,.18);
  --brand-mid:    #5de8a8;
  --border-focus: #22a066;

  --sb-bg:        #0d1b2a;
  --sb-active-bg: rgba(34,160,102,.18);
  --sb-active-bar:#22a066;

  --page-bg:      #0a0f0d;
  --card:         #111a15;

  --tx-1: #f0f0f0;
  --tx-2: #c8dace;
  --tx-3: #8a9e92;
  --tx-4: #5a7060;

  --border:       #1e3028;

  --topbar-bg:    #0d1b2a;
  --topbar-border:rgba(255,255,255,.08);
  --topbar-color: #f1f5f9;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 15px rgba(0,0,0,.6), 0 4px 6px rgba(0,0,0,.4);
}
[data-tema="verde-oscuro"] body { background: var(--page-bg); color: var(--tx-1); }
[data-tema="verde-oscuro"] .topbar-title { color: var(--topbar-color); }

/* ═══════════════════════════════════════════════════════
   LAYOUT VERDE (Tema 2)
   ═══════════════════════════════════════════════════════ */

/* Topbar: fija ancho completo sobre todo */
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 200;
  box-shadow: 0 2px 16px rgba(13,27,42,.45);
  gap: 0;
}

/* Layout-main: empuja el contenido bajo la topbar fija */
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .layout-main {
  padding-top: var(--topbar-h);
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* Sidebar Tema 1: oculto en verde */
:is([data-tema="verde"],[data-tema="verde-oscuro"]) #sidebar { display: none !important; }

/* Elementos del Tema 1 en topbar: ocultos en verde */
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .topbar-title  { display: none !important; }
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .topbar-right  { display: none !important; }

/* ── Sidebar verde (sidebar-v) ────────────────────────── */
.sidebar-v { display: none; }

:is([data-tema="verde"],[data-tema="verde-oscuro"]) .sidebar-v {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--topbar-h);
  left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: #0d1b2a;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.07) transparent;
}
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .sidebar-v::-webkit-scrollbar { width: 3px; }
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .sidebar-v::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08); border-radius: 3px;
}

/* Collapsed: sidebar desliza fuera */
:is([data-tema="verde"],[data-tema="verde-oscuro"]) body.sbv-collapsed .sidebar-v {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}
:is([data-tema="verde"],[data-tema="verde-oscuro"]) body.sbv-collapsed .layout-main { margin-left: 0; }
:is([data-tema="verde"],[data-tema="verde-oscuro"]) body.sbv-collapsed .v-brand { width: 0; padding: 0; border-right: none; }

/* ── Sidebar verde: nav ───────────────────────────────── */
.sbv-nav { padding: .75rem 0 1.5rem; flex: 1; }
.sbv-section { padding: 0 .625rem; margin-bottom: .25rem; }
.sbv-label {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.28);
  padding: 1rem .5rem .375rem;
}
.sbv-item { border-radius: 7px; overflow: hidden; margin-bottom: 1px; }
.sbv-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .55rem .75rem; cursor: pointer;
  border-radius: 7px; transition: background .12s; user-select: none;
}
.sbv-row:hover { background: rgba(255,255,255,.07); }
.sbv-item.active > .sbv-row { background: rgba(34,160,102,.18); }
.sbv-ico {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(255,255,255,.55); transition: color .12s;
}
.sbv-row:hover .sbv-ico,
.sbv-item.active > .sbv-row .sbv-ico { color: #5de8a8; }
.sbv-lbl {
  flex: 1; font-size: .8125rem; font-weight: 500;
  color: rgba(255,255,255,.6); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color .12s;
}
.sbv-row:hover .sbv-lbl { color: #fff; }
.sbv-item.active > .sbv-row .sbv-lbl { color: #5de8a8; font-weight: 600; }

/* ── Topbar verde: elementos ──────────────────────────── */
.v-brand, .v-topbar-center, .v-topbar-right { display: none; }

:is([data-tema="verde"],[data-tema="verde-oscuro"]) .v-brand         { display: flex; }
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .v-topbar-center  { display: flex; }
:is([data-tema="verde"],[data-tema="verde-oscuro"]) .v-topbar-right   { display: flex; }

.v-brand {
  align-items: center; gap: .625rem;
  padding: 0 1rem; width: var(--sidebar-w); height: 100%;
  flex-shrink: 0; border-right: 1px solid rgba(255,255,255,.08);
  overflow: hidden; transition: width .25s ease;
}
.v-brand-icon {
  width: 30px; height: 30px;
  background: var(--brand); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 800; font-size: 12px; color: #fff;
  letter-spacing: -.01em;
}
.v-brand-text { overflow: hidden; }
.v-brand-name { font-size: .875rem; font-weight: 700; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.v-brand-sub  { font-size: .6rem; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* ── NOTIFICACIÓN COLA DE IMPRESIÓN ─────── */
#cola-notificacion {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  z-index: 400;
  display: none;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
  max-width: 340px;
}
#cola-notificacion.visible {
  display: flex;
}
#cola-notificacion .notif-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
#cola-notificacion .notif-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
#cola-notificacion .notif-item {
  font-size: 12px;
  color: var(--tx-2);
  padding: 6px 10px;
  background: var(--brand-light);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#cola-notificacion .notif-item button {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#cola-notificacion .notif-item.impreso {
  border-color: var(--green) !important;
  background: rgba(56,161,105,.08) !important;
  opacity: .85;
}
#cola-notificacion .notif-item.impreso button {
  background: var(--green);
  cursor: default;
}

.v-topbar-center {
  align-items: center; gap: .75rem; flex: 1; padding: 0 1rem; min-width: 0;
}
.v-toggle-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.65); flex-shrink: 0;
  transition: background .15s, color .15s;
}
.v-toggle-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.v-breadcrumb { display: flex; align-items: center; gap: .375rem; font-size: .78125rem; overflow: hidden; }
.v-bc-section { color: rgba(255,255,255,.38); white-space: nowrap; }
.v-bc-sep     { color: rgba(255,255,255,.2); font-size: .7rem; }
.v-bc-page    { color: rgba(255,255,255,.85); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v-topbar-right { align-items: center; gap: .625rem; padding: 0 1rem; flex-shrink: 0; }
.v-date {
  font-size: .6875rem; color: rgba(255,255,255,.35); white-space: nowrap;
  padding-right: .75rem; border-right: 1px solid rgba(255,255,255,.1);
}
.v-user-chip {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  padding: .25rem .625rem .25rem .3rem; border-radius: 20px;
}
.v-avatar {
  width: 24px; height: 24px; background: var(--brand); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.v-user-name { font-size: .78125rem; color: rgba(255,255,255,.8); font-weight: 500; white-space: nowrap; }
.v-btn-out {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); padding: .3125rem .875rem;
  border-radius: 7px; font-size: .75rem; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: background .15s, color .15s;
}
.v-btn-out:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── Submenu sidebar verde — Tema 2 ───────────────────── */
.sbv-group { overflow: visible; }

.sbv-arrow {
  width: 13px; height: 13px; flex-shrink: 0;
  color: rgba(255,255,255,.28);
  transition: transform .22s ease;
  margin-left: auto;
}
.sbv-item.open > .sbv-row .sbv-arrow { transform: rotate(180deg); }
.sbv-item.has-active > .sbv-row .sbv-ico { color: #5de8a8; }
.sbv-item.has-active > .sbv-row .sbv-lbl { color: #5de8a8; font-weight: 600; }
.sbv-item.has-active > .sbv-row .sbv-arrow { color: rgba(93,232,168,.5); }

.sbv-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.sbv-item.open .sbv-sub { max-height: 250px; }

.sbv-sub-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .75rem .4rem 2.625rem;
  border-radius: 6px;
  margin: 1px 0;
  color: rgba(255,255,255,.45);
  font-size: .78125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sbv-sub-item::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .4; flex-shrink: 0;
}
.sbv-sub-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.sbv-sub-item:hover::before { opacity: .7; }
.sbv-sub-item.active { color: #5de8a8; }
.sbv-sub-item.active::before { opacity: 1; }

/* Catálogo de cuentas — niveles */
.cuenta-nivel-1 { background: #1A237E; color: white; }
.cuenta-nivel-2 { background: #C5CAE9; color: #1a1a1a; }
.cuenta-nivel-3 { background: #E8EAF6; color: #1a1a1a; }

[data-tema="oscuro"] .cuenta-nivel-2 { background: #3949AB; color: #f0f0f0; }
[data-tema="oscuro"] .cuenta-nivel-3 { background: #283593; color: #f0f0f0; }

[data-tema="verde-oscuro"] .cuenta-nivel-2 { background: #2E7D32; color: #f0f0f0; }
[data-tema="verde-oscuro"] .cuenta-nivel-3 { background: #1B5E20; color: #f0f0f0; }

/* ── Topbar tema clásico: mismo color que el sidebar ── */
html[data-tema="default"] .topbar {
  background: var(--sb-bg);
  border-bottom-color: var(--sb-border);
}
html[data-tema="default"] .topbar-title {
  color: #f9fafb;
}
html[data-tema="default"] .topbar-right,
html[data-tema="default"] .user-info {
  color: var(--sb-text);
}