/* ============================================================
   GECONOT · base.css
   Variables de tema, reset y tipografía.
   Reutilizado por TODOS los paneles (admin_root → cliente).
   Mobile-first. Pensado para envolver luego con Capacitor.
   ============================================================ */

:root {
  /* Paleta corporativa: ÁMBAR + neutros que lo complementan.
     El amarillo es muy claro (luminancia alta), así que NO admite texto blanco
     encima: #ffc107 con blanco da 1.7:1, ilegible. Por eso existe
     `--sobre-primario`: el color que va SIEMPRE encima del primario. Al cambiar
     de color corporativo hay que revisar ese par, no solo el tono. */
  --color-primario: #ffc107;
  --color-primario-fuerte: #d39e00;   /* hover y bordes: el mismo tono, más oscuro */
  --color-primario-tenue: #fff8e1;    /* fondos suaves (chips, avatares) */
  --gradiente-primario: linear-gradient(135deg, #ffce3a 0%, #e0a800 100%);
  --sobre-primario: #1f2430;          /* 9.5:1 sobre el ámbar: legible de sobra */
  --color-primario-texto: #8a6100;    /* el ámbar NO vale como texto sobre blanco (1.6:1);
                                         este tono mantiene la identidad con 5.5:1 */

  /* Semánticos atenuados (uso sobrio, no decorativo).
     El peligro deja de ser el mismo color que el primario, que era una
     ambigüedad heredada: hasta ahora un botón principal y uno destructivo
     compartían tono y solo se distinguían por el contexto. */
  --color-exito: #2f9e6b;
  --color-peligro: #c1272d;
  --color-aviso: #b45309;             /* naranja oscuro: no se confunde con el ámbar primario */
  --color-info: #3f5d8a;

  /* Sidebar oscuro neutro (carbón). Sobre él, el ámbar rinde muy bien: 8.6:1 */
  --sidebar-fondo: #1d2129;
  --sidebar-fondo-2: #161a21;
  --sidebar-texto: rgba(255, 255, 255, 0.66);
  --sidebar-texto-activo: #ffffff;

  /* Superficies neutras */
  --fondo-app: #f4f5f7;
  --fondo-contenedor: #ffffff;
  --fondo-card: #ffffff;
  --borde-suave: #e6e8ec;
  --texto-principal: #1f2430;
  --texto-secundario: #6b7280;
  --texto-tenue: #9aa1ad;

  /* Sombras discretas y radios moderados (formal) */
  --sombra-card: 0 2px 10px rgba(20, 24, 40, 0.05);
  --sombra-flotante: 0 16px 44px rgba(20, 24, 40, 0.16);
  --radio: 14px;
  --radio-sm: 10px;
  --radio-xs: 8px;

  /* Medidas de layout */
  --ancho-sidebar: 250px;
  --ancho-sidebar-colapsado: 74px;
  --alto-topbar: 68px;

  --transicion: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo-app);
  color: var(--texto-principal);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Utilidades mínimas en español */
.texto-secundario { color: var(--texto-secundario); }
.texto-tenue { color: var(--texto-tenue); }
.oculto { display: none !important; }
.solo-lectura-aviso {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  font-style: italic;
}
.aviso-plan {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  background: rgba(47, 158, 107, 0.12);
  color: #1f7a52;
  border: 1px solid rgba(47, 158, 107, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.aviso-plan:empty { display: none; }