/* ══════════════════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO — Plataforma del Despacho
   ──────────────────────────────────────────────────────────────────────────
   Un solo lugar donde viven los colores, los tamaños de letra, el espaciado,
   los radios y la sombra. Si el despacho quiere cambiar un color o agrandar
   la letra, se cambia AQUÍ y cambia en todo el sistema.

   Está documentado en NOTAS_ADMIN.md → "Sistema de diseño (tokens)".
   Se carga desde app/templates/base.html, antes de los estilos de la página.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR · Marca navy ──────────────────────────────────────────────────
     Estructura (sidebar, encabezados), cifras importantes y botón secundario.
     Es la misma escala `brand` que ya usaba Tailwind: no cambió ningún hex. */
  --navy-50:  #F2F6FA;
  --navy-100: #E1EAF3;
  --navy-200: #C3D5E6;
  --navy-300: #9DBBD4;
  --navy-400: #6E97BC;
  --navy-500: #4C79A3;
  --navy-600: #406080;
  --navy-700: #34506B;
  --navy-800: #2A4157;
  --navy-900: #1F3244;

  /* ── COLOR · Acento dorado ───────────────────────────────────────────────
     RESERVADO. Solo dos usos permitidos:
       1) el botón de acción primaria (.btn-primario)
       2) la serie "Pagado" de las gráficas y la barra de cobranza
     Nunca como adorno (badges de rol, viñetas, fondos de tarjeta). */
  --oro-400: #C9A45C;
  --oro-500: #B08A3F;
  --oro-600: #8F6F32;

  /* ── COLOR · Grises (5 tonos) ────────────────────────────────────────────
     Nada de negro puro ni bordes al 100% de opacidad. */
  --gris-50:  #F8FAFC;  /* fondo de fila / zona hover           */
  --gris-100: #F1F5F9;  /* fondo de encabezado de tabla         */
  --gris-200: #E2E8F0;  /* bordes suaves                        */
  --gris-400: #94A3B8;  /* metadatos, notas al pie              */
  --gris-600: #475569;  /* texto secundario                     */
  --gris-800: #1E293B;  /* texto principal (no es negro puro)   */

  /* ── COLOR · Escala de ESTADO ────────────────────────────────────────────
     OJO: esto NO es el semáforo. El semáforo (Rojo/Azul/Verde) vive en
     datos/configuracion.json y no se toca ni se mezcla con esto.
     Esta escala solo se usa en: badges de impago/morosidad y badge de ESTATUS.
       rojo  = urgente / vencido / moroso
       ámbar = pendiente
       verde = activo / al corriente */
  --estado-urgente-fondo:   #FEF2F2;
  --estado-urgente-texto:   #B91C1C;
  --estado-urgente-borde:   #FECACA;
  --estado-pendiente-fondo: #FFFBEB;
  --estado-pendiente-texto: #B45309;
  --estado-pendiente-borde: #FDE68A;
  --estado-ok-fondo:        #ECFDF5;
  --estado-ok-texto:        #047857;
  --estado-ok-borde:        #A7F3D0;
  --estado-neutro-fondo:    #F1F5F9;
  --estado-neutro-texto:    #475569;
  --estado-neutro-borde:    #E2E8F0;

  /* ── TIPOGRAFÍA · 6 tamaños, ni uno más ──────────────────────────────────
     36 / 28 / 20 / 16 / 14 / 12 px. Se usan con las clases .t-* de abajo. */
  --texto-pagina:  2.25rem;  /* 36px — título de página ("Dashboard")        */
  --texto-hero:    1.75rem;  /* 28px — cifra hero de un KPI destacado        */
  --texto-seccion: 1.25rem;  /* 20px — título de tarjeta / sección           */
  --texto-cuerpo:  1rem;     /* 16px — cuerpo de tabla                       */
  --texto-label:   0.875rem; /* 14px — labels y texto secundario             */
  --texto-meta:    0.75rem;  /* 12px — metadatos, timestamps, notas al pie   */

  /* Dos pesos en TODA la interfaz: uno para títulos/cifras, uno para cuerpo. */
  --peso-fuerte: 700;
  --peso-normal: 400;

  /* ── ESPACIADO · grid base de 8px ────────────────────────────────────────
     Todo padding, gap y margin sale de aquí. El único sub-paso permitido es
     --esp-05 (4px), para el alto de los badges. Nada de 13px ni 22px. */
  --esp-05: 4px;
  --esp-1:  8px;
  --esp-2:  16px;
  --esp-3:  24px;
  --esp-4:  32px;
  --esp-5:  40px;
  --esp-6:  48px;

  /* ── RADIOS · dos valores ────────────────────────────────────────────────
     8px en botones/badges/campos · 12px en tarjetas contenedoras.
     (La píldora de filtro sigue siendo redonda: es su forma, no un radio.) */
  --radio-boton:   8px;
  --radio-tarjeta: 12px;
  --radio-pildora: 9999px;

  /* ── SOMBRA · una sola, suave ────────────────────────────────────────────
     Nada de shadow-lg genérico. La variante -hover solo la usan las tarjetas
     que ya tenían microinteracción de hover. */
  --sombra-tarjeta:       0 1px 3px rgba(31, 50, 68, 0.08);
  --sombra-tarjeta-hover: 0 10px 24px -8px rgba(31, 50, 68, 0.22);

  /* ── MOVIMIENTO · una sola curva para toda la interfaz ───────────────────
     Misma curva que ya usaban las barras del dashboard (cubic-bezier .22 1
     .36 1): entra rápido y se asienta suave, sin rebote. Se aplica también
     como curva por default de Tailwind (ver tailwind.config en base.html)
     para que hover/click/menú/tarjetas se sientan como una sola cosa. */
  --ease-fluido: cubic-bezier(.22, 1, .36, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA — clases de uso
   ══════════════════════════════════════════════════════════════════════════ */
.t-pagina  { font-size: var(--texto-pagina);  font-weight: var(--peso-fuerte); line-height: 1.15; letter-spacing: -0.02em; }
.t-hero    { font-size: var(--texto-hero);    font-weight: var(--peso-fuerte); line-height: 1.1;  letter-spacing: -0.02em; }
.t-seccion { font-size: var(--texto-seccion); font-weight: var(--peso-fuerte); line-height: 1.3;  letter-spacing: -0.015em; }
.t-cuerpo  { font-size: var(--texto-cuerpo);  font-weight: var(--peso-normal); line-height: 1.5; }
.t-label   { font-size: var(--texto-label);   font-weight: var(--peso-normal); line-height: 1.45; }
.t-meta    { font-size: var(--texto-meta);    font-weight: var(--peso-normal); line-height: 1.4; }
/* Variantes en negrita del mismo tamaño (cifras dentro de tabla, encabezados
   de columna). No agregan tamaños nuevos: solo cambian el peso. */
.t-cuerpo-fuerte { font-size: var(--texto-cuerpo); font-weight: var(--peso-fuerte); line-height: 1.5; }
.t-label-fuerte  { font-size: var(--texto-label);  font-weight: var(--peso-fuerte); line-height: 1.45; }
.t-meta-fuerte   { font-size: var(--texto-meta);   font-weight: var(--peso-fuerte); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA DE BOTONES — uno primario, uno secundario. No hay un tercero.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-primario,
.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 42px;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-boton);
  border: 1px solid transparent;
  font-size: var(--texto-label);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--ease-fluido), border-color .15s var(--ease-fluido),
              color .15s var(--ease-fluido), box-shadow .15s var(--ease-fluido), transform .15s var(--ease-fluido);
}

/* PRIMARIO — dorado sólido. Es el único uso decorativo del dorado permitido.
   Una sola acción primaria por pantalla: "Ver alertas", "Buscar", "Guardar". */
.btn-primario {
  background: var(--oro-400);
  border-color: var(--oro-400);
  color: #fff;
  box-shadow: var(--sombra-tarjeta);
}
.btn-primario:hover  { background: var(--oro-500); border-color: var(--oro-500); box-shadow: var(--sombra-tarjeta-hover); transform: translateY(-1px); }
.btn-primario:active { transform: translateY(0) scale(0.98); background: var(--oro-600); border-color: var(--oro-600); }

/* SECUNDARIO — outline navy. Todo lo demás. */
.btn-secundario {
  background: #fff;
  border-color: var(--navy-200);
  color: var(--navy-700);
}
.btn-secundario:hover  { background: var(--navy-50); border-color: var(--navy-400); color: var(--navy-800); transform: translateY(-1px); }
.btn-secundario:active { transform: translateY(0) scale(0.98); background: var(--navy-100); }

/* Variante compacta (cabeceras de tarjeta: "Ver todos"). Mismo sistema,
   solo baja el alto de toque a 32px; no es un tercer estilo. */
.btn-compacto { min-height: 32px; padding: var(--esp-05) var(--esp-2); font-size: var(--texto-meta); }

/* Destructivo: es el botón secundario en rojo de la escala de estado.
   Se usa solo para "Eliminar". */
.btn-secundario.es-peligro { color: var(--estado-urgente-texto); border-color: var(--estado-urgente-borde); }
.btn-secundario.es-peligro:hover { background: var(--estado-urgente-fondo); border-color: var(--estado-urgente-texto); color: var(--estado-urgente-texto); }

/* Foco visible con teclado (accesibilidad) — mismo anillo en todo el sistema. */
.btn-primario:focus-visible,
.btn-secundario:focus-visible {
  outline: 2px solid var(--navy-700);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES DE ESTADO — impago/morosidad y ESTATUS del SAT.
   NUNCA para el semáforo: ese tiene sus propios colores y no se toca.
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-05);
  width: fit-content;
  padding: var(--esp-05) var(--esp-1);
  border-radius: var(--radio-boton);
  border: 1px solid transparent;
  font-size: var(--texto-meta);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-urgente   { background: var(--estado-urgente-fondo);   color: var(--estado-urgente-texto);   border-color: var(--estado-urgente-borde); }
.badge-pendiente { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente-texto); border-color: var(--estado-pendiente-borde); }
.badge-ok        { background: var(--estado-ok-fondo);        color: var(--estado-ok-texto);        border-color: var(--estado-ok-borde); }
.badge-neutro    { background: var(--estado-neutro-fondo);    color: var(--estado-neutro-texto);    border-color: var(--estado-neutro-borde); }