/* ============================================================
   RUOT · Local Tours — Design Tokens v3 (rediseño 06-sep-2026)
   REEMPLAZA a css/tokens.css. Mismos nombres de variable que v2
   (nada en js/*.js deja de funcionar); cambian VALORES y se añaden
   tokens nuevos (marcados NUEVO). Las secciones del Panel de
   Personalización (data-*) se conservan tal cual.
   ============================================================ */

:root {
  /* ===== COLOR (paleta v2 — SIN CAMBIOS) ===== */
  --c-petroleo:    #005461;
  --c-teal:        #018790;
  --c-ambar:       #FAB95B;
  --c-melocoton:   #FFA259;
  --c-fondo:       #F4F4F4;
  --c-blanco:      #FFFFFF;
  --c-exito:       #1A744E;   /* AA: 4,96:1 sobre --tinte-exito (antes #1C7C54 daba 4,46) */
  --c-aviso:       #8A5A00;
  --c-error:       #B3261E;

  /* ===== COLOR semántico ===== */
  --texto:         var(--c-petroleo);
  --texto-suave:   #335E68;
  --superficie:    var(--c-blanco);
  --superficie-alt:var(--c-fondo);
  --borde:         #C9D6D9;
  --borde-suave:   #DDE6E8;          /* NUEVO: borde de tarjeta (más ligero que --borde) */
  --separador:     #E4EBEC;          /* NUEVO: líneas internas de tarjeta */
  --tinte:         #E6EFF0;          /* NUEVO: fondo petróleo al 8% (chips neutros, iconos, activo) */
  --tinte-teal:    #E3F0F2;          /* NUEVO: fondo de avisos informativos */
  --tinte-exito:   #DFF3E7;
  --tinte-aviso:   #FCE8C8;
  --tinte-error:   #FBDFDB;
  --borde-fuerte:  var(--c-teal);
  --cta-primario:  var(--c-petroleo);
  --cta-primario-hover: #007486;     /* NUEVO: medido 5.47:1 sobre blanco */
  --cta-secundario:var(--c-ambar);
  --acento:        var(--c-ambar);
  --foco:          var(--c-teal);
  --deshabilitado: #7A9AA1;          /* NUEVO: botón sin acción posible (solo con aria-disabled) */

  /* ===== TIPOGRAFÍA — Atkinson Hyperlegible Next para TODO ===== */
  --font-display: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans Devanagari', sans-serif;
  --font-texto:   var(--font-display);
  /* Google Fonts: añadir peso 500 y 800 al <link> de index.html:
     family=Atkinson+Hyperlegible+Next:wght@400;500;600;700;800 */

  /* ===== TAMAÑOS ===== */
  --fs-base: 1.125rem;               /* 18px */
  --fs-small: 1rem;                  /* 16px */
  --fs-caption: 0.875rem;            /* 14px — solo metadatos */
  --fs-micro: 0.8125rem;             /* NUEVO 13px — solo chips/etiquetas, nunca texto corrido */
  --fs-titulo: 1.5rem;               /* 24px */
  --fs-h2: 1.75rem;                  /* NUEVO 28px — títulos de sección (Resultados, Salidas…) */
  --fs-h2-home: 2rem;                /* NUEVO 32px — secciones del inicio descubrimiento */
  --fs-h1: 2.75rem;                  /* NUEVO 44px — h1 de pantallas interiores */
  --fs-display: clamp(2.5rem, 5vw, 4rem);   /* 40–64px — hero del inicio (800) */
  --fs-fundador: 1.25rem;            /* NUEVO 20px — base del área fundador */
  --lh-texto: 1.6;
  --lh-titulo: 1.1;                  /* NUEVO */
  --ls-titulo: -0.02em;              /* NUEVO: tracking negativo en h1/display */

  /* ===== ESPACIADO (escala 4px) ===== */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 2.5rem;  /* NUEVO */
  --sp-8: 3rem;    --sp-9: 3.5rem;  /* NUEVO */     --sp-10: 4.5rem; /* NUEVO: separación entre secciones del inicio */

  /* ===== FORMA ===== */
  --radio-s: 0.625rem;               /* NUEVO 10px — botones, inputs pequeños, chips cuadrados */
  --radio: 0.75rem;                  /* 12px — botones grandes, inputs */
  --radio-m: 1rem;                   /* NUEVO 16px — tarjetas de tour */
  --radio-l: 1.25rem;                /* NUEVO 20px — buscador flotante, tarjeta de reserva */
  --radio-xl: 1.5rem;                /* NUEVO 24px — bandas del inicio, modal */
  --radio-pill: 999px;
  --tactil: 44px;
  --tactil-cta: 56px;                /* NUEVO: CTA principal de una pantalla */
  --ancho-max: 75rem;                /* NUEVO 1200px (antes 72rem) */
  --pad-lateral: 2rem;               /* NUEVO 32px en escritorio (antes 16px) */

  /* ===== MOVIMIENTO ===== */
  --trans: 180ms ease;

  /* ===== ELEVACIÓN ===== */
  --sombra-suave:  0 1px 2px rgba(0,49,58,.06), 0 4px 12px rgba(0,49,58,.08);
  --sombra-media:  0 6px 16px rgba(0,49,58,.12), 0 2px 6px rgba(0,49,58,.10);
  --sombra-hover:  0 10px 28px rgba(0,49,58,.14);            /* NUEVO: tarjeta al pasar */
  --sombra-flotante: 0 16px 40px rgba(0,49,58,.18);          /* NUEVO: buscador sobre el hero, dropdowns */
  --sombra-modal:  0 24px 64px rgba(0,49,58,.30);            /* NUEVO */
  --sombra-foco:   0 0 0 3px var(--c-fondo), 0 0 0 6px var(--foco);

  /* ===== HERO PETRÓLEO (dirección 2b) ===== */
  --hero-puntos: radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.6px);   /* NUEVO patrón */
  --hero-puntos-size: 22px 22px;
  --hero-halo: radial-gradient(circle, rgba(1,135,144,.7) 0%, rgba(1,135,144,0) 68%);  /* NUEVO halo teal */

  /* ===== PLACEHOLDER de imagen (hasta tener fotos) ===== */
  --placeholder-foto: repeating-linear-gradient(135deg, #CFDFE2 0 12px, #DCE8EA 12px 24px);  /* NUEVO */

  --energia-acento: var(--c-ambar);
}

/* ===== NIVELES DE ENERGÍA — sin cambios ===== */
:root[data-energia="chispa"]  { --energia-acento: #FFB37A; }  /* AA 4,9:1 como texto y como fondo (antes #FFA259 daba 4,33) */
:root[data-energia="pimienta"]{ --energia-acento: #FFB4AB; }  /* AA 5,1:1 como texto y como fondo (antes #B3261E daba 1,32 sobre petróleo) */

/* ===== PANEL: tamaño de letra — escala la RAÍZ de <html> (16px → 17.5px → 19px).
   Todos los tamaños en rem (tokens + estilos.css) escalan con ella: el control
   afecta a TODA la web (portada, tour, guía, preferencias, fundador, pie). ===== */
/* ===== PANEL: data-letra — regla CSS propia (endurecimiento 10-sep-2026) =====
   data-letra (normal|grande|extra) es el atributo semántico del control y
   data-fuente (a|a+|a++) la clave del perfil; el Panel los escribe SIEMPRE
   en pareja con el mismo nivel. Estas reglas dan a data-letra efecto directo
   por sí mismo (aunque data-fuente faltara o no tuviera regla). Van ANTES de
   las de data-fuente: con ambos presentes manda data-fuente, EXACTAMENTE
   igual que antes (no se rompe el funcionamiento actual). */
:root[data-letra="normal"] { font-size: 100%; }      /* 16px — refuerzo de data-fuente="a" */
:root[data-letra="grande"] { font-size: 109.375%; }  /* 17.5px — refuerzo de data-fuente="a+" */
:root[data-letra="extra"]  { font-size: 118.75%; }   /* 19px — refuerzo de data-fuente="a++" */

:root { font-size: 100%; }               /* 16px */
:root[data-fuente="a+"]  { font-size: 109.375%; }   /* 17.5px */
:root[data-fuente="a++"] { font-size: 118.75%; }    /* 19px */

/* ===== PANEL: contraste alto — sin cambios (+ bordes nuevos endurecidos) ===== */
:root[data-contraste="alto"] {
  --texto: #00313A; --superficie: #FFFFFF; --borde: #7A9AA1; --borde-suave: #7A9AA1; --separador: #A9BFC4;
}

/* ===== PANEL: modo oscuro — sin cambios (+ tokens nuevos re-mapeados) ===== */
:root[data-tema="oscuro"] {
  --c-fondo: #062A31; --superficie: #0B353D; --superficie-alt: #0B353D;
  --texto: #EAF2F3; --texto-suave: #C2D4D7; --borde: #1F5964; --borde-suave: #1F5964; --separador: #164B55;
  --tinte: #124650; --tinte-teal: #0F4A52;
  --cta-primario: var(--c-ambar); --cta-primario-hover: #F7AD3F; --cta-secundario: var(--c-teal);
  --acento: var(--c-ambar); --foco: var(--c-melocoton);
  --placeholder-foto: repeating-linear-gradient(135deg, #124650 0 12px, #0F4A52 12px 24px);
}

/* ===== PANEL: subrayar enlaces / resaltar foco / reducir movimiento ===== */
:root[data-subrayar-enlaces="true"] a { text-decoration: underline !important; }
/* Resaltar foco (P16): outline MUY visible en TODOS los interactivos —
   botones, enlaces, inputs, selects, textareas, chips, summary, [tabindex].
   Se listan explícitos (además de :focus-visible) para que ninguna sección
   quede fuera aunque un componente desactive el focus-visible. */
:root[data-resaltar-foco="true"] :focus-visible,
:root[data-resaltar-foco="true"] a:focus,
:root[data-resaltar-foco="true"] button:focus,
:root[data-resaltar-foco="true"] input:focus,
:root[data-resaltar-foco="true"] select:focus,
:root[data-resaltar-foco="true"] textarea:focus,
:root[data-resaltar-foco="true"] summary:focus,
:root[data-resaltar-foco="true"] [tabindex]:focus,
:root[data-resaltar-foco="true"] [role="button"]:focus,
:root[data-resaltar-foco="true"] [role="switch"]:focus,
:root[data-resaltar-foco="true"] .chip:focus {
  outline: 3px solid var(--foco) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 5px var(--foco) !important;
}
:root[data-reducir-movimiento="true"] *, :root[data-reducir-movimiento="true"] *::before, :root[data-reducir-movimiento="true"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* ===== PANEL: navegación simplificada (P16) =====
   Al activarse, el menú superior muestra solo lo esencial (Inicio, Tours,
   Soporte): los enlaces secundarios llevan data-nav-sec y el enlace de
   Soporte (.nav-solo-simplificado) solo aparece en este modo. El pie se
   reduce ocultando la columna de guías y los enlaces institucionales
   (data-pie-sec). display:none saca lo ocultado del árbol de accesibilidad
   y del orden de tabulación; todo sigue disponible al desactivar el modo. */
.nav-solo-simplificado { display: none; }
:root[data-navegacion-simplificada="true"] .nav-solo-simplificado { display: inline-flex; }
:root[data-navegacion-simplificada="true"] [data-nav-sec],
:root[data-navegacion-simplificada="true"] [data-pie-sec] { display: none !important; }

/* ===== PANEL: filtros de daltonismo (matrices Vienot/Brettel en index.html) =====
   Se aplican a los hijos de #app EXCEPTO el widget y el diálogo del propio Panel
   (position:fixed — un filter en un ancestro los rompería, P3 no-ruptura). El fondo
   claro de body (#F4F4F4) es neutro e INVARIANTE a las 3 matrices + grises (R=G=B);
   en tema oscuro (#062A31 no neutro) se compensa el token --c-fondo con el valor
   ya filtrado (calculado por matriz, verificado 10-sep-2026). */
:root[data-filtro-daltonismo="deuteranopia"] #app > :not(.widget-panel, .panel-accesibilidad) { filter: url(#filtro-deuteranopia); }
:root[data-filtro-daltonismo="protanopia"]   #app > :not(.widget-panel, .panel-accesibilidad) { filter: url(#filtro-protanopia); }
:root[data-filtro-daltonismo="tritanopia"]   #app > :not(.widget-panel, .panel-accesibilidad) { filter: url(#filtro-tritanopia); }
:root[data-filtro-daltonismo="grises"]       #app > :not(.widget-panel, .panel-accesibilidad) { filter: grayscale(1); }
:root[data-tema="oscuro"][data-filtro-daltonismo="deuteranopia"] { --c-fondo: #202031; --superficie-alt: #202031; }
:root[data-tema="oscuro"][data-filtro-daltonismo="protanopia"]   { --c-fondo: #262630; --superficie-alt: #262630; }
:root[data-tema="oscuro"][data-filtro-daltonismo="tritanopia"]   { --c-fondo: #042C2B; --superficie-alt: #042C2B; }
:root[data-tema="oscuro"][data-filtro-daltonismo="grises"]       { --c-fondo: #232323; --superficie-alt: #232323; }

/* ===== PANEL: modo oscuro — estados y énfasis sobre fondo oscuro (AA, calculado 10-sep-2026) =====
   Los tintes de exito/aviso/error NO se remapean (cajas claras autoconsistentes),
   pero el texto de ESTADO sobre la superficie oscura sí necesita variantes claras. */
:root[data-tema="oscuro"] .estado.completada { color: #7AD6A8; }          /* 7,6:1 */
:root[data-tema="oscuro"] .estado.pendiente  { color: #E8C06A; }          /* 7,7:1 */
:root[data-tema="oscuro"] .estado.cancelada  { color: #F2A099; }          /* 6,5:1 */
:root[data-tema="oscuro"] .campo .error-campo { color: #F2A099; }
:root[data-tema="oscuro"] .campo.invalido input { border-color: #F2A099; }
:root[data-tema="oscuro"] .tarjeta-tour .meta .acc-ok { color: #7AD6A8; }
:root[data-tema="oscuro"] .bloque-guion.cuentas .rotulo { color: #6CC5CE; }
:root[data-tema="oscuro"] .bloque-guion.detalle .rotulo { color: #E8C06A; }
:root[data-tema="oscuro"] .bloque-guion.accesibilidad .rotulo { color: #7AD6A8; }
:root[data-tema="oscuro"] .pasos-home h3 .n,
:root[data-tema="oscuro"] .pasos-home h2 .n { color: #6CC5CE; }
:root[data-tema="oscuro"] .fila-resumen.mejor { color: var(--c-petroleo); }  /* fila ámbar: texto petróleo también en oscuro (AA) */
:root[data-tema="oscuro"] input::placeholder,
:root[data-tema="oscuro"] textarea::placeholder { color: #8AAAB1; }       /* 5,3:1 sobre superficie oscura */