/**
 * SISTEMA VISUAL - GRUPO FC · ASESORES EN SEGUROS
 * Central design tokens, accessible typography, button hierarchies & density rules
 */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/SourceSerif4-SemiBold.ttf') format('truetype');
}

:root {
  /* Paleta Central */
  --fc-tinta: #0F2A44;
  --fc-primario: #1D4E89;
  --fc-primario-oscuro: #163D6B;
  --fc-acento: #E8A33D;
  --fc-ok: #1E7B4F;
  --fc-ok-bg: #E6F4EC;
  --fc-warn: #9A4A06;
  --fc-warn-bg: #FDF1E2;
  --fc-danger: #B42318;
  --fc-danger-bg: #FDECEA;
  --fc-whatsapp: #075E54; /* Contraste AA verificado con blanco (#25D366 falla) */
  --fc-texto-2: #5B6573;
  --fc-borde: #D5DAE1;
  --fc-fondo: #F6F7F9;
  --fc-superficie: #FFFFFF;
  --fc-radio: 10px;

  /* Font Families */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala Tipográfica Oficial */
  --fc-fs-card-title-mob: 24px;
  --fc-fs-card-title-desk: 28px;
  --fc-fs-section-title-mob: 20px;
  --fc-fs-section-title-desk: 24px;
  --fc-fs-body: 16px;
  --fc-fs-button: 16px;
  --fc-fs-helper: 14px;
  --fc-fs-legal-mob: 13px;
}

/* ==========================================================================
   Tipografía Global (IBM Plex Sans 400, 600, 700 - Sin 300)
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  color: var(--fc-tinta);
  background-color: var(--fc-fondo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Eliminar peso 300 en todo el sitio */
* {
  font-weight: revert;
}
.font-light, [style*="font-weight: 300"], [style*="font-weight:300"] {
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

/* Clase para títulos grandes con Source Serif 4 (600) */
.font-serif-heading,
.font-serif-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Clases canónicas de escala tipográfica */
.fc-card-title {
  font-size: var(--fc-fs-card-title-mob);
  font-weight: 600;
  line-height: 1.25;
}
@media (min-width: 640px) {
  .fc-card-title {
    font-size: var(--fc-fs-card-title-desk);
  }
}

.fc-section-title {
  font-size: var(--fc-fs-section-title-mob);
  font-weight: 600;
  line-height: 1.3;
}
@media (min-width: 640px) {
  .fc-section-title {
    font-size: var(--fc-fs-section-title-desk);
  }
}

.fc-body-text {
  font-size: var(--fc-fs-body);
  font-weight: 400;
  line-height: 1.5;
}

.fc-btn-text {
  font-size: var(--fc-fs-button);
  font-weight: 600;
}

.fc-helper-text {
  font-size: var(--fc-fs-helper);
  font-weight: 400;
  color: var(--fc-texto-2);
}

.fc-legal-text {
  font-size: var(--fc-fs-legal-mob);
  font-weight: 400;
  color: var(--fc-texto-2);
}

:where(h1, h2, h3, h4, h5, h6):not([class*="text-"]) {
  color: var(--fc-tinta);
}

/* ==========================================================================
   Variante de Sección Oscura (.section-dark)
   Contraste WCAG 2.1 AA mínimo 4.5:1 (3:1 para títulos >= 24px)
   ========================================================================== */
.section-dark,
[data-theme="dark"],
.bg-dark-block {
  color: #FFFFFF;
}

.section-dark :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.section-dark .font-heading:not([class*="text-"]) {
  color: #FFFFFF;
}

.section-dark p:not([class*="text-"]) {
  color: #CBD5E1;
}

/* Reglas automáticas para bloques con fondos oscuros */
.bg-\[\#0B111E\] :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-\[\#0D2A68\] :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-\[\#0A1E44\] :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-\[\#16324F\] :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-\[\#071329\] :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-slate-900 :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]),
.bg-slate-950 :where(h1, h2, h3, h4, h5, h6):not([class*="text-"]) {
  color: #FFFFFF;
}

/* Respeta títulos explícitos en blanco */
h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white,
.font-heading.text-white {
  color: #FFFFFF !important;
}

/* Rótulos de etapas o índices numéricos: mínimo 12px y #5B6573 */
.fc-rotulo {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fc-texto-2) !important; /* #5B6573 */
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.25;
}

/* Helper para longitud óptima de lectura (máximo 65 caracteres) */
.max-w-\[65ch\], .fc-reading-width {
  max-width: 65ch !important;
}

/* Separadores en borde oscurecido visible */
.fc-separador {
  color: #94A3B8 !important; /* Borde oscurecido con contraste visible */
  margin: 0 0.5rem;
  font-weight: normal;
}

/* Monospace para importes, pólizas y valores tabulares */
.font-mono, .tabular-nums, .font-amount, [data-amount] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Texto sobre acento SIEMPRE tinta, nunca blanco */
.bg-acento, [data-accent="true"], .badge-acento, [style*="--fc-acento"] {
  background-color: var(--fc-acento) !important;
  color: var(--fc-tinta) !important;
}

/* ==========================================================================
   Accesibilidad & Foco Visible (WCAG 2.1 AA)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--fc-primario) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fc-primario) !important;
  outline-offset: 2px !important;
}

/* Evitar auto-zoom molesto en iOS Safari: mínimo 16px en inputs solo en móviles */
@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px;
  }
}

@media (min-width: 640px) {
  .mia-pas input, .mia-pas select, .mia-pas textarea {
    font-size: 14px;
  }
}

/* ==========================================================================
   Densidad Visual
   ========================================================================== */

/* 1. Portal Asegurado & Sitio Público (.mia-asegurado) */
.mia-asegurado {
  font-size: 16px;
  line-height: 1.5;
}

.mia-asegurado .btn-large,
.mia-asegurado a.btn-action {
  min-height: 48px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Touch targets para móviles: mínimo 48x48 */
.touch-target {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 2. Panel PAS Productores (.mia-pas) */
.mia-pas {
  font-size: 14px;
  line-height: 1.45;
}

.mia-pas table {
  font-size: 13px;
}

.mia-pas button,
.mia-pas .btn,
.mia-pas a.btn-action {
  min-height: 40px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
}

/* ==========================================================================
   Jerarquía de Botones
   ========================================================================== */
.btn-fc-primario {
  background-color: var(--fc-primario);
  color: #FFFFFF !important;
  border: 1px solid transparent;
  border-radius: var(--fc-radio);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.btn-fc-primario:hover {
  background-color: var(--fc-primario-oscuro);
  color: #FFFFFF !important;
}

.btn-fc-secundario {
  background-color: var(--fc-superficie);
  color: var(--fc-tinta) !important;
  border: 1px solid var(--fc-borde);
  border-radius: var(--fc-radio);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.btn-fc-secundario:hover {
  background-color: var(--fc-fondo);
  border-color: #BAC2CC;
}

.btn-fc-texto {
  background: transparent;
  border: none;
  color: var(--fc-primario) !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
}
.btn-fc-texto:hover {
  text-decoration: underline;
  color: var(--fc-primario-oscuro) !important;
}

.btn-fc-danger, .btn-fc-asistencia {
  background-color: var(--fc-danger);
  color: #FFFFFF !important;
  border: 1px solid transparent;
  border-radius: var(--fc-radio);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.btn-fc-danger:hover, .btn-fc-asistencia:hover {
  background-color: #991B1B;
  color: #FFFFFF !important;
}

.btn-fc-whatsapp {
  background-color: var(--fc-whatsapp);
  color: #FFFFFF !important;
  border: 1px solid transparent;
  border-radius: var(--fc-radio);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.btn-fc-whatsapp:hover {
  background-color: #05433C;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Estados y Badges (Icono + Palabra SIEMPRE)
   ========================================================================== */
.badge-fc-ok {
  background-color: var(--fc-ok-bg);
  color: var(--fc-ok);
  border: 1px solid #C3E6D3;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.badge-fc-warn {
  background-color: var(--fc-warn-bg);
  color: var(--fc-warn);
  border: 1px solid #F6D6AE;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.badge-fc-danger {
  background-color: var(--fc-danger-bg);
  color: var(--fc-danger);
  border: 1px solid #F8C3BF;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Grilla canónica de accesos rápidos del Hero (Mobile 2x2 | Desktop 4 en fila) */
.grid-acciones-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .grid-acciones-hero {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.875rem;
  }
}

/* ==========================================================================
   Panel PAS: Densidad de escritorio (14px texto, 13px tablas, min 12px)
   ========================================================================== */
.pas-panel, .pas-layout, body:has(#pasSidebar) {
  font-size: 14px;
}

.pas-panel table, .pas-layout table, body:has(#pasSidebar) table {
  font-size: 13px;
}

/* Ningún texto por debajo de 12px */
.pas-panel .text-\[10px\], .pas-panel .text-\[11px\], .pas-panel .text-\[9px\],
body:has(#pasSidebar) .text-\[10px\], body:has(#pasSidebar) .text-\[11px\], body:has(#pasSidebar) .text-\[9px\],
.text-\[9px\], .text-\[10px\], .text-\[11px\] {
  font-size: 12px !important;
}

@media (min-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:inline { display: inline !important; }
  .sm\:block { display: block !important; }
  .sm\:flex { display: flex !important; }
}