/* =====================================================================
   TOKENS — única fuente de verdad de color, espaciado y tipografía
   =====================================================================
   Se carga ANTES que style.css y costos.css en popup.html: los dos
   consumen estas variables y ninguno declara ya su propia paleta.

   De dónde salen los colores
   --------------------------
   Están muestreados de los flujos de contenido del PDF corporativo
   (Greenwish_Actualizacion_Tifon_Dolphin_09Ago.pdf), por frecuencia de
   uso real en el documento — no estimados de una captura. Antes de esto
   convivían cinco colores de marca distintos: #2e7d32 en el título,
   #4CAF50 en la pestaña activa, #008CBA y #1976d2 en dos botones, y el
   #274F37 que solo usaba la Pestaña de Costos.

   Contraste (verificado contra WCAG AA, sobre --gw-fondo)
   -------------------------------------------------------
     --gw-verde     11.38:1   ✓      --gw-texto     13.96:1   ✓
     --gw-verde-medio 4.88:1  ✓      --gw-texto-2    8.66:1   ✓
     --gw-magenta    4.14:1  solo texto grande y filetes
     --gw-texto-3    7.05:1   ✓      --gw-tenue      4.40:1  ≥14px
     --gw-borde      2.85:1  NUNCA como texto: solo bordes

   Dos avisos que ahorran un bug:
   · El magenta puro con texto BLANCO encima da 4.46:1, a un pelo de AA.
     Para relleno sólido con texto blanco usa --gw-magenta-solido (4.89:1).
     La diferencia no se aprecia a ojo.
   · --gw-borde es un gris verdoso pensado para líneas. Como color de
     texto no llega ni a 3:1.
   ===================================================================== */

:root {
  /* ---- Marca ---- */
  --gw-verde: #0F3D26;
  --gw-verde-medio: #2A7A50;
  --gw-verde-claro: #1E5638;      /* hover de superficies verdes */
  --gw-magenta: #E8175D;          /* filetes, bordes, acentos */
  --gw-magenta-solido: #DC1658;   /* relleno con texto blanco encima */

  /* ---- Texto: rampa de neutros verdosos del propio PDF ---- */
  --gw-texto: #1A2A22;            /* principal — no negro puro, cansa menos */
  --gw-texto-2: #3C4A43;          /* secundario */
  --gw-texto-3: #4A574F;          /* etiquetas y terciario */
  --gw-tenue: #6A766F;            /* auxiliar, a partir de 14px */

  /* ---- Superficies y líneas ---- */
  --gw-fondo: #F5F7F6;            /* fondo de panel — no blanco puro */
  --gw-superficie: #ECF0EE;       /* tinte suave (verde al 4%) */
  --gw-verde-tenue: #E7F1EA;      /* fondo de acento verde */
  --gw-blanco: #FFFFFF;           /* tarjetas */
  --gw-borde: #C9D2CD;            /* línea por defecto */
  --gw-borde-fuerte: #8A968F;     /* divisor marcado */

  /* ---- Estado. Llevan siempre color Y texto, nunca color solo ---- */
  --gw-exito: #0F3D26;      --gw-exito-fondo: #E7F1EA;   --gw-exito-borde: #9DC4AC;
  --gw-peligro: #9E0E3F;    --gw-peligro-fondo: #F4E5EA; --gw-peligro-borde: #E79BB4;
  --gw-aviso: #6E5800;      --gw-aviso-fondo: #F7F2DE;   --gw-aviso-borde: #D6C77A;
  --gw-alerta: #8A4806;     --gw-alerta-fondo: #FAEFE2;  --gw-alerta-borde: #E0B98E;
  --gw-naranja: #C2660A;

  /* ---- Espaciado: escala de 4 ---- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;

  /* ---- Radios ---- */
  --r-s: 4px;
  --r-m: 6px;
  --r-pill: 999px;

  /* ---- Sombras: discretas, el panel es estrecho ---- */
  --sombra-1: 0 1px 2px rgba(15, 61, 38, .06);
  --sombra-2: 0 2px 6px rgba(15, 61, 38, .10);
  --sombra-flotante: 0 -2px 8px rgba(15, 61, 38, .08);

  /* ---- Tipografía ---- */
  --tipo: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --tipo-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* Escala. Antes convivían 9/10/11/12/13/15/18 sin sistema. */
  --t-micro: 11px;   /* etiquetas en versalitas */
  --t-s: 12px;       /* cuerpo denso: campos, tablas */
  --t-m: 14px;       /* cuerpo */
  --t-l: 16px;       /* títulos de tarjeta */
  --t-xl: 20px;      /* cabecera */

  /* ---- Movimiento ---- */
  --trans: 150ms ease;
}

/* Icono SVG en línea. Hereda color y se alinea con la base del texto: sin el
   `vertical-align` queda montado sobre la línea y descuadra el botón. */
.gw-ico {
  display: inline-block;
  vertical-align: -.18em;
  margin-right: .4em;
  flex: none;
}
/* Cuando va solo, sin texto al lado, no necesita el margen. */
.gw-ico:only-child { margin-right: 0; }

/* Un cambio de estado instantáneo se lee como un parpadeo; 150 ms bastan para
   que se perciba como respuesta sin llegar a hacer esperar. */
button, input, select, textarea,
.tab-btn, .accordion-header, .calc-tarjeta-cab, .calc-bloque-nombre,
.calc-btn-primario, .calc-btn-secundario, .calc-btn-neutro, .calc-btn-mini {
  transition: background-color var(--trans), border-color var(--trans),
              color var(--trans), box-shadow var(--trans);
}

/* Anillo de foco visible en todo lo que reciba el foco. Antes no había ninguno:
   navegando con Tab no se veía dónde estaba el cursor. */
:focus-visible {
  outline: 2px solid var(--gw-verde);
  outline-offset: 2px;
}

/* Apertura de los acordeones.
   Se anima la ENTRADA con un keyframe en lugar de transicionar la altura: el
   contenido se muestra con `display:none` → `block`, y `display` no es animable.
   Sacarlo de ahí exigiría envolver cada cuerpo en un contenedor con
   `grid-template-rows: 0fr → 1fr`, y hay decenas de sitios que consultan
   `.accordion-content.active` o `.calc-tarjeta-cuerpo.abierto` directamente.
   El cierre no se anima —el nodo desaparece—, que es el comportamiento habitual. */
@keyframes gw-desplegar {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.accordion-content.active,
.calc-tarjeta-cuerpo.abierto,
.calc-bloque:not(.colapsado) > .calc-bloque-cuerpo {
  animation: gw-desplegar 180ms ease-out;
}

/* Hay quien tiene el sistema configurado para reducir el movimiento — mareo,
   vértigo, sensibilidad vestibular. Se respeta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}