/* gam-identidad.css — tokens de marca GAM (blanco editorial)
   Fuente: extraccion directa del codigo real de design_handoff_panel_gam/App GAM.dc.html
   (no de los resumenes .md, que tenian varias cifras desactualizadas: gap de KPIs, tamanios de fuente,
   radios, colores de borde — ver docs/ARQUITECTURA.md para la nota de reconciliacion). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* Guinda (marca / acento unico) */
  --gam-guinda: #9D1C2E;
  --gam-guinda-dark: #6E0F1E;
  --gam-guinda-suave: #FBF1F2;
  --gam-guinda-linea: #E9CCD0;
  --gam-guinda-login: #A32135;      /* solo pantalla de login */
  --gam-guinda-login-hover: #7E1626;

  /* Azul Fuerza (solo IA / tabs activas / capas activas) */
  --gam-azul: #1B3A6B;
  --gam-azul-suave: #E5ECF5;
  --gam-azul-borde-activo: rgba(27, 58, 107, 0.25);

  --gam-dorado: #C8A55B;

  /* Semaforo PSEM -- 4 estados, identico en toda la app (KPIs, tabla, chips) */
  --gam-critico: #B1252B;
  --gam-critico-fondo: #F9E5E6;
  --gam-riesgo: #C17817;
  --gam-riesgo-fondo: #FAF0DF;
  --gam-estable: #2D7A3E;
  --gam-estable-fondo: #E8F3EA;
  --gam-neutro: #8A7F76;
  --gam-neutro-fondo: #F5F1EA;

  /* Escala separada del semaforo: riesgo TERRITORIAL en el mapa (4 pasos, no confundir con PSEM) */
  --gam-mapa-critico: #B1252B;
  --gam-mapa-alto: #D9623A;
  --gam-mapa-medio: #C17817;
  --gam-mapa-bajo: #2D7A3E;

  /* Neutros / superficies */
  --gam-fondo-app: #EDE9E3;
  --gam-fondo: #FAF8F4;
  --gam-superficie: #FFFFFF;
  --gam-tile-bg: #FBFAF8;
  --gam-borde: #E5DFD8;        /* borde de botones secundarios */
  --gam-borde-2: #EBE6DF;      /* divisor de filas/celdas KPI (el mas usado en el codigo real) */
  --gam-linea-suave: #F1EBE3;
  --gam-tinta: #1A1614;
  --gam-tinta-2: #453E3A;
  --gam-tinta-3: #8A7F76;
  --gam-tinta-muda: #A79C90;
  --gam-tinta-muy-muda: #B7ADA2;
  --gam-placeholder: #C8BFB4;
  --gam-vacia-borde: #D8CFC4;

  --gam-font-display: 'Fraunces', Georgia, serif;
  --gam-font-ui: 'Inter', sans-serif;
  --gam-font-mono: 'JetBrains Mono', monospace;
  --gam-font-login: 'Poppins', sans-serif;

  --gam-max-width: 1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gam-fondo-app) !important;
  color: var(--gam-tinta);
  font-family: var(--gam-font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .gam-font-display { font-family: var(--gam-font-display); color: var(--gam-tinta); margin: 0; }
.gam-mono { font-family: var(--gam-font-mono); }

a { color: inherit; }

/* Acciones de texto (sin caja) -- Metodologia / Exportar datos */
.gam-accion-texto {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: 500 13px var(--gam-font-ui); color: var(--gam-tinta);
}
.gam-accion-texto:hover { color: var(--gam-guinda); }
.gam-accion-texto.abierta { color: var(--gam-guinda); }

/* Generar informe -- texto enfatizado, subrayado */
.gam-accion-enfasis {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: 700 13px var(--gam-font-ui); color: var(--gam-guinda);
  text-decoration: underline; text-underline-offset: 4px;
}
.gam-accion-enfasis:hover { color: var(--gam-guinda-dark); }

/* Boton secundario (navegacion/utilidad) */
.gam-btn-secundario {
  appearance: none; background: none; border: 1px solid var(--gam-borde); border-radius: 8px;
  padding: 8px 15px; font: 600 13px var(--gam-font-ui); color: var(--gam-tinta); cursor: pointer;
}
.gam-btn-secundario:hover { background: #F5F1EA; }

/* Boton primario (solo CTA de descarga/registro) */
.gam-btn-primario {
  border: none; border-radius: 8px; padding: 12px; font: 700 13px var(--gam-font-ui);
  color: #fff; background: var(--gam-guinda); cursor: pointer;
}
.gam-btn-primario:hover { background: var(--gam-guinda-dark); }

/* Semaforo: chip con dot (KPI / tabla) */
.gam-chip-semaforo { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px var(--gam-font-mono); letter-spacing: 0.04em; }
.gam-chip-semaforo .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gam-chip-semaforo.critico, .gam-chip-semaforo.rojo { color: var(--gam-critico); }
.gam-chip-semaforo.critico .dot, .gam-chip-semaforo.rojo .dot { background: var(--gam-critico); }
.gam-chip-semaforo.riesgo, .gam-chip-semaforo.ambar { color: var(--gam-riesgo); }
.gam-chip-semaforo.riesgo .dot, .gam-chip-semaforo.ambar .dot { background: var(--gam-riesgo); }
.gam-chip-semaforo.estable, .gam-chip-semaforo.verde { color: var(--gam-estable); }
.gam-chip-semaforo.estable .dot, .gam-chip-semaforo.verde .dot { background: var(--gam-estable); }
.gam-chip-semaforo.neutro { color: var(--gam-neutro); }
.gam-chip-semaforo.neutro .dot { background: var(--gam-neutro); }

/* Chip IA -- obligatorio junto a todo dato derivado de analisis automatico (gobernanza P-2) */
.gam-chip-ia {
  font-family: Arial, sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 0 5px; border-radius: 3px; background: var(--gam-azul-suave); color: var(--gam-azul);
  border: 1px solid var(--gam-azul-borde-activo); display: inline-block; vertical-align: middle;
}
.gam-chip-ia.chip-en-tabla { font-size: 8px; padding: 0 4px; }

/* Chip prioridad (lista de alertas) -- circulo relleno con numero */
.gam-chip-prioridad {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font: 700 12px var(--gam-font-ui); flex: none;
}
.gam-chip-prioridad.p1 { background: var(--gam-critico); }
.gam-chip-prioridad.p2 { background: var(--gam-riesgo); }
.gam-chip-prioridad.p3 { background: var(--gam-neutro); }

/* Skeleton de carga */
@keyframes gam-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.gam-skeleton {
  border-radius: 6px; background: linear-gradient(90deg, #EFE9E1 25%, #F8F4ED 37%, #EFE9E1 63%);
  background-size: 400% 100%; animation: gam-shimmer 1.4s infinite;
}

/* Dateline honesto -- nunca "en vivo" con datos sinteticos (gobernanza) */
.gam-dateline {
  font: 700 10px var(--gam-font-mono); letter-spacing: 0.05em; color: var(--gam-tinta-3);
  text-transform: uppercase;
}

/* Breakpoints identicos al handoff (App GAM.dc.html real, no el resumen) */
@media (max-width: 1180px) {
  /* minmax(0,1fr), no un 1fr plano -- un track a secas conserva el min-width:auto implicito de sus
     hijos de grid y deja de contener contenido ancho (tablas, texto sin salto), causando overflow
     horizontal. Mismo gotcha ya documentado y corregido en la version anterior del repo. */
  .gam-2col, .gam-ficha2 { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 920px) {
  .gam-grid3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .gam-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .gam-headrow { flex-wrap: wrap !important; }
  .gam-actions { align-items: flex-start !important; }
  .gam-pad { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 620px) {
  .gam-grid3 { grid-template-columns: minmax(0,1fr) !important; }
  .gam-kpis { grid-template-columns: minmax(0,1fr) !important; }
  .gam-campos { grid-template-columns: minmax(0,1fr) !important; }
  .gam-pad { padding-left: 16px !important; padding-right: 16px !important; }
}