/* ═══════════════════════════════════════════
       LAYOUT SHELL
    ═══════════════════════════════════════════ */
    #app {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* ═══════════════════════════════════════════
       SIDEBAR
    ═══════════════════════════════════════════ */
    /* La navegación es un CAMPO, no una superficie: acero macizo con
       el texto reversado. No lleva filete de separación porque el
       propio salto de valor contra el papel ya dibuja el borde. */
    #sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      background: var(--color-field);
      color: var(--color-on-field);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      transition: width var(--transition), transform var(--transition);
      position: relative;
      z-index: 30;
    }

    .sidebar-logo {
      padding: 20px;
      border-bottom: 1px solid var(--color-field-border);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
      flex-shrink: 0;
    }

    /* Placa blanca con la marca dentro: sobre el acero, el logo
       necesita su propio fondo de papel para no perder el trazo. */
    .logo-icon {
      width: 28px; height: 28px;
      border-radius: var(--radius-xs);
      background: var(--color-bg);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      padding: 2px;
    }
    .logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .logo-icon svg { width: 17px; height: 17px; fill: var(--color-field); }

    .logo-lockup { display: flex; align-items: center; gap: 9px; min-width: 0; }

    .logo-text { overflow: hidden; }
    .logo-text strong {
      font-family: var(--font-heading);
      font-size: 18px; font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--color-on-field);
      white-space: nowrap;
    }

    /* La barra de acento separa la marca del rótulo de producto. */
    .sidebar-rule {
      height: 2px;
      background: rgb(var(--p-steel-400-rgb));
      flex-shrink: 0;
    }
    .sidebar-producto {
      font-family: var(--font-heading);
      font-size: 10px; font-weight: 500;
      letter-spacing: .24em; text-transform: uppercase;
      color: var(--color-on-field-3);
      white-space: nowrap;
    }

    /* nav sections */
    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .nav-section-label {
      font-family: var(--font-heading);
      font-size: 9.5px;
      font-weight: 500;
      letter-spacing: var(--track-kicker);
      text-transform: uppercase;
      color: var(--color-on-field-3);
      padding: 20px 9px 8px;
    }
    .sidebar-nav > .nav-section-label:first-child { padding-top: 0; }

    /* El activo se marca con un filete blanco a la izquierda y un
       teñido mínimo del campo: sin píldora ni relleno de marca, que
       en un wireframe leerían como un botón. */
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 9px 10px 11px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--color-on-field-2);
      font-size: 13.5px;
      font-weight: 400;
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
      overflow: hidden;
      border-left: 2px solid transparent;
      user-select: none;
    }
    .nav-item:hover {
      background: var(--color-field-hover);
      color: var(--color-on-field);
    }
    /* El ítem activo lleva el amarillo del logo en el filete y el icono: es el
       punto de la interfaz que más se mira, y sobre el campo negro el amarillo
       se lee a 11:1. El texto sigue en blanco —el amarillo en letra pequeña
       cansa—, así que el color marca SIN cargar la lectura. */
    .nav-item.active {
      background: var(--color-field-active);
      color: var(--color-on-field);
      border-left-color: var(--color-brand-fill);
      padding-left: 9px;
    }
    .nav-item.active .nav-icon { color: var(--color-brand-fill); opacity: 1; }

    /* roles: items hidden depending on role */
    .nav-item[data-role="admin"] { /* shown only for admin */ }

    /* Iconografía Lucide a trazo 1.5 en toda la navegación. */
    .nav-icon {
      width: 16px; height: 16px;
      flex-shrink: 0;
      opacity: 1;
      stroke-width: 1.5;
    }
    .nav-label { flex: 1; }

    .nav-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: var(--radius-xs);
      background: transparent;
      border: 1px solid var(--color-field-border);
      color: var(--color-on-field);
      flex-shrink: 0;
    }

    /* sidebar footer */
    .sidebar-footer {
      border-top: 1px solid var(--color-field-border);
      padding: 14px 20px;
      flex-shrink: 0;
    }

    .user-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: opacity var(--transition);
    }
    .user-card:hover { background: transparent; opacity: .78; }

    /* Iniciales en una caja cuadrada de filete, no un disco de color. */
    .user-avatar {
      width: 30px; height: 30px;
      border-radius: var(--radius-sm);
      background: transparent;
      border: 1px solid rgb(var(--p-white-rgb) / .4);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-size: 11px; font-weight: 600;
      color: var(--color-on-field);
      flex-shrink: 0;
    }

    .user-info { overflow: hidden; flex: 1; }
    .user-name {
      font-size: 12.5px; font-weight: 400;
      color: var(--color-on-field);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .user-role {
      font-family: var(--font-heading);
      font-size: 9.5px; font-weight: 500;
      letter-spacing: var(--track-label); text-transform: uppercase;
      color: var(--color-on-field-3);
    }

    /* Objetivo táctil de 44 px: el icono sigue midiendo lo mismo, la
       caja que lo rodea es la que crece (antes era de 23 px). */
    .logout-btn {
      background: none;
      border: none;
      color: var(--color-on-field-3);
      cursor: pointer;
      width: 44px; height: 44px;
      margin: -7px -14px -7px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
      transition: color var(--transition), background var(--transition);
    }
    .logout-btn:hover { color: var(--color-on-field); background: var(--color-field-hover); }

    /* ═══════════════════════════════════════════
       MAIN CONTENT AREA
    ═══════════════════════════════════════════ */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      min-width: 0;
    }

    /* topbar */
    #topbar {
      height: var(--topbar-h);
      border-bottom: 1px solid var(--border);
      background: var(--color-surface-overlay);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      flex-shrink: 0;
      gap: 18px;
    }

    .topbar-left {
      display: flex; align-items: center; gap: 12px;
      min-width: 0;
    }

    .page-title {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .page-breadcrumb {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text2);
      display: flex; align-items: center; gap: 6px;
    }
    .page-breadcrumb span { color: var(--text3); }

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

    /* page content wrapper */
    #page-content {
      flex: 1;
      overflow-y: auto;
      padding: 26px 28px;
    }

    /* ═══════════════════════════════════════════
       VIEWS (pages)
    ═══════════════════════════════════════════ */
    .view { display: none; animation: fadeIn .22s ease; }
    .view.active { display: block; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

 
/* ── Contenedor general ── */
.gc-view-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  max-width: 1400px;
}
 
/* ── Header (búsqueda + botón nuevo) ── */
.gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
 
/* ── Grid de charts ── */
.gc-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
 
.gc-chart-card {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--relieve);
  padding: 16px 18px;
}

.gc-chart-title {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
}
 
/* ── Card de stats (sin gráfico) ── */
.gc-chart-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 
.gc-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.gc-stat-row:last-child { border-bottom: none; }
.gc-stat-row .badge { min-width: 32px; text-align: center; }
 
/* ── Fila expandida ── */
.gc-row-expanded > td:first-child .gc-expand-btn {
  background: var(--color-brand-dim);
}
 
.gc-detail-row > td {
  padding: 0 !important;
  border-top: none !important;
}
 
.gc-detail-wrap {
  background: var(--color-inset-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--color-brand);
  animation: gc-slide-down .15s ease;
}
 
@keyframes gc-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ── Badge purple (integraciones) ── */
.badge.purple {
  background: var(--color-accent-purple-dim);
  color: var(--color-accent-purple);
  border: 1px solid rgb(var(--p-purple-rgb) / .3);
}
 
/* ── Responsive ── */
@media (max-width: 768px) {
  .gc-view-container { padding: 12px; }
  .gc-charts-grid { grid-template-columns: 1fr; }
  .gc-header { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════
   Densidad de la interfaz
   Antes se generaba desde js/app/09-configuracion.js inyectando un <style>
   por variante. Como clases sobre <html>, la especificidad ya supera a la
   regla base de .card-body, así que el !important que hacía falta allí
   sobra aquí.
   ═══════════════════════════════════════════ */
html.densidad-compact { --row-pad: 6px 12px; --card-pad: 12px; }
html.densidad-compact .card-body { padding: 12px; }
html.densidad-compact td,
html.densidad-compact th { padding: 6px 12px; }

html.densidad-normal { --row-pad: 10px 16px; --card-pad: 16px; }

html.densidad-relaxed { --row-pad: 14px 20px; --card-pad: 20px; }
html.densidad-relaxed .card-body { padding: 20px; }
html.densidad-relaxed td,
html.densidad-relaxed th { padding: 14px 20px; }

    /* ── Logotipo ──
       El logo es apaisado (320×134) y VECTORIAL, así que se le da el ancho y
       la altura se calcula sola: nunca se recorta ni se deforma. Sustituye al
       PNG cuadrado anterior, que además estaba corrupto —truncado, sin IEND— y
       por eso el navegador lo pintaba a medias. */
    .logo-lockup .marca {
      width: 100%;
      max-width: 150px;
      height: auto;
      display: block;
      flex: 0 1 auto;
      min-width: 0;
    }

    /* Vacío por defecto: el nombre ya está dentro del logotipo. Sólo aparece si
       alguien renombra la plataforma desde Configuración. */
    .logo-text strong:empty { display: none; }