/* ctxd-a11y-v1 · Carril L5 (accesibilidad + limpieza visual sin rediseño) · ctxplorer Perfect Day · 2-oct-2026
   Fichero NUEVO en static/chunks/ (immutable 1 año: un cambio = ctxd-a11y-v2.css). Lo enlaza el layout raíz (parche de L1).
   Base: A2-auditoria-ui-a11y.md (UI-03, 04, 07, 08, 10, 11, 14, 15) y A2-tokens.css. Nada de esto cambia texto ni HTML indexable.
   Reglas de convivencia:
   - Solo sube especificidad con :root delante (0,2,0) y usa !important SOLO contra estilos en línea (style="color:#e63946").
   - Los estilos en línea se seleccionan en sus dos formas: la del HTML del servidor (style="color:#e63946") y la que escribe
     React en el navegador tras una navegación de cliente (style="color: rgb(230, 57, 70)").
   - No toca layout, tamaños de letra ni la fuente (Libre Franklin). */

/* ============ 0. Tokens (los mismos de A2-tokens.css; si ctxd-v1.css ya los define, coinciden) ============ */
:root{
  --ctxd-accent:#dc2f3e;        /* relleno: blanco encima 4,65:1 */
  --ctxd-accent-hover:#bf2533;
  --ctxd-accent-text:#bf2533;   /* texto rojo pequeño sobre claro: 5,95:1 (blanco) / 5,5:1 (#f5f5f6) */
  --ctxd-logo:#dc2f3e;          /* logo (18-24 px, 800): 4,65:1 */
  --ctxd-ok-text:#15803d;       /* verde en texto: 5,0:1 */
  --ctxd-teal:#1f7a6f;          /* sustituye a #2a9d8f (3,3:1): blanco encima 5,3:1, en texto 5,3:1 */
  --ctxd-warn-text:#b45309;     /* ámbar en texto: 5,0:1 */
  --ctxd-r-ctl:8px; --ctxd-r-card:12px; --ctxd-r-sheet:16px;
  --ctxd-e1:0 1px 2px #18181b14,0 2px 8px #18181b0f;
  --ctxd-e2:0 12px 32px #18181b2e;
  --ctxd-hit:44px;
}
:root.dark{
  --ctxd-accent-text:#ff6b75;   /* 6,4-7,2:1 sobre #09090b/#111113/#18181b (#e63946 daba 4,25 y #dc2f3e 4,05) */
  --ctxd-logo:#ff6b75;
  --ctxd-ok-text:#4ade80;
  --ctxd-warn-text:#fbbf24;
  --ctxd-e1:0 1px 2px #0006,0 2px 8px #0000004d;
  --ctxd-e2:0 12px 32px #000a;
}

/* ============ 1. Saltar al contenido + destino (UI-07) ============ */
.ctxd-skip{position:fixed;left:12px;top:-100px;z-index:1000;padding:12px 16px;min-height:var(--ctxd-hit);display:inline-flex;align-items:center;
  border-radius:var(--ctxd-r-ctl);background:var(--fg,#18181b);color:var(--bg,#fff);font-size:14px;font-weight:700;text-decoration:none;
  box-shadow:var(--ctxd-e2)}
.ctxd-skip:focus,.ctxd-skip:focus-visible{top:12px;outline:2px solid var(--ctxd-accent);outline-offset:2px}
main#main:focus{outline:none}

/* Pie: <h4> → <h2> (parche L5-03). Mismo aspecto que c-ux daba a footer h4 */
footer[role="contentinfo"] h2.font-semibold.mb-3{font-size:13px;letter-spacing:0;text-transform:none;color:var(--fg)}

/* ============ 2. Un solo rojo (UI-03 / UI-04) ============ */
/* logo de la cabecera y del menú móvil */
:root nav[aria-label="Navegación principal"]>div>a:first-child,
:root #ctxd-menu-movil a.text-lg.font-extrabold{color:var(--ctxd-logo)}
/* literales de Tailwind */
:root .text-\[\#e63946\],:root .text-\[\#dc2f3e\]{color:var(--ctxd-accent-text)}
:root .bg-\[\#e63946\],:root .bg-\[\#dc2f3e\]{background-color:var(--ctxd-accent)}
:root .hover\:bg-\[\#c62d3a\]:hover,:root .hover\:bg-\[\#d32836\]:hover{background-color:var(--ctxd-accent-hover)}
/* color en línea */
:root [style^="color:#e63946"],:root [style*=";color:#e63946"],
:root [style^="color: rgb(230, 57, 70)"],:root [style*="; color: rgb(230, 57, 70)"],
:root [style^="color:#dc2f3e"],:root [style*=";color:#dc2f3e"],
:root [style^="color: rgb(220, 47, 62)"],:root [style*="; color: rgb(220, 47, 62)"]{color:var(--ctxd-accent-text)!important}
/* relleno en línea (texto blanco encima: #e63946 daba 4,0:1) */
:root [style^="background:#e63946"],:root [style*=";background:#e63946"],
:root [style^="background: rgb(230, 57, 70)"],:root [style*="; background: rgb(230, 57, 70)"],
:root [style^="background-color:#e63946"],:root [style*=";background-color:#e63946"],
:root [style^="background-color: rgb(230, 57, 70)"],:root [style*="; background-color: rgb(230, 57, 70)"]{background-color:var(--ctxd-accent)!important}
/* modo oscuro: rojos en texto que vienen de variables propias (restaurantes rx, «Ver todo →» del país, pie) */
:root.dark .rxc-p,:root.dark .rx-kick,:root.dark .rx-zona h2 a,:root.dark .rxf-src a,:root.dark .rxf-dl a,:root.dark .rxf-fu a,
:root.dark .rxf dd a,:root.dark .rx-crumb a:hover,:root.dark .A-pais-vertodo,:root.dark a.text-sm.text-\[\#e63946\].hover\:underline:hover{color:var(--ctxd-accent-text)}

/* ============ 3. Verdes y ámbar que no llegan a AA (UI-04 / UI-14) ============ */
:root:not(.dark) [style^="color:#1faa55"],:root:not(.dark) [style*=";color:#1faa55"],
:root:not(.dark) [style^="color: rgb(31, 170, 85)"],:root:not(.dark) [style*="; color: rgb(31, 170, 85)"],
:root:not(.dark) [style^="color:#22c55e"],:root:not(.dark) [style*=";color:#22c55e"],
:root:not(.dark) [style^="color: rgb(34, 197, 94)"],:root:not(.dark) [style*="; color: rgb(34, 197, 94)"]{color:var(--ctxd-ok-text)!important}
:root:not(.dark) .text-green-500,:root:not(.dark) .text-\[\#22c55e\],:root:not(.dark) .text-\[\#1faa55\]{color:var(--ctxd-ok-text)}
:root:not(.dark) [style^="color:#2a9d8f"],:root:not(.dark) [style*=";color:#2a9d8f"],
:root:not(.dark) [style^="color: rgb(42, 157, 143)"],:root:not(.dark) [style*="; color: rgb(42, 157, 143)"]{color:var(--ctxd-teal)!important}
:root [style^="background:#2a9d8f"],:root [style*=";background:#2a9d8f"],
:root [style^="background: rgb(42, 157, 143)"],:root [style*="; background: rgb(42, 157, 143)"],:root .bg-\[\#2a9d8f\]{background-color:var(--ctxd-teal)!important}
:root:not(.dark) .text-amber-500{color:var(--ctxd-warn-text)}

/* ============ 4. Toques y asistente (UI-08) ============ */
.ctxd-atras{min-height:var(--ctxd-hit);min-width:var(--ctxd-hit);padding-inline:4px 8px}
nav[aria-label="Navegación principal"] button[aria-controls="ctxd-menu-movil"]{min-width:var(--ctxd-hit);min-height:var(--ctxd-hit);justify-content:center}
.ctxd-gratis{display:inline-block;font-size:12px;font-weight:800;line-height:1;padding:5px 8px;border-radius:var(--ctxd-r-ctl);
  background:var(--ctxd-accent);color:#fff;letter-spacing:0;vertical-align:middle}

/* ============ 5. Sin resplandor rojo, sin cristal, radios de token (UI-10) ============ */
/* sombras coloreadas de Tailwind (shadow-[#e63946]/10…/40, también en :hover) → sombra neutra */
:root [class*="shadow-[#e63946]"],:root [class*="shadow-[#dc2f3e]"]{--tw-shadow-color:#18181b1f!important}
:root .dark [class*="shadow-[#e63946]"],:root.dark [class*="shadow-[#e63946]"]{--tw-shadow-color:#0000004d!important}
/* resplandor en línea (box-shadow con rgba(230,57,70,…)) */
:root [style*="box-shadow"][style*="230,57,70"],:root [style*="box-shadow"][style*="230, 57, 70"]{box-shadow:var(--ctxd-e1)!important}
/* píldoras de texto (chips, botones con padding horizontal) → radio de control. Avatares, puntos e iconos redondos sin px- no cambian */
:root a[class*="rounded-full"][class*=" px-"],:root a[class^="px-"][class*="rounded-full"],
:root button[class*="rounded-full"][class*=" px-"],:root button[class^="px-"][class*="rounded-full"],
:root span[class*="rounded-full"][class*=" px-"],:root span[class^="px-"][class*="rounded-full"],
:root div[class*="rounded-full"][class*=" px-"]{border-radius:var(--ctxd-r-ctl)}
/* chips del héroe de ciudad: sin mayúsculas espaciadas */
:root [class*="rounded-full"][class*="uppercase"][class*="tracking-wider"]{text-transform:none;letter-spacing:0}
/* cristal en botones de icono sobre foto: fondo sólido semitransparente, sin blur */
:root button.backdrop-blur-md.rounded-full,:root button.backdrop-blur-sm.rounded-full{-webkit-backdrop-filter:none;backdrop-filter:none}
/* radios fuera de escala en botones/tarjetas propias */
:root .rxc{border-radius:var(--ctxd-r-card)}

/* ============ 6. Imágenes (JEV-007) ============ */
/* Medido en las 10 plantillas: TODAS las <img> sin width/height son next/image «fill» dentro de un contenedor con
   aspect-[4/3]/aspect-video/alto fijo (no hay CLS). Las únicas <img> crudas son avatares redondos: se les fija 1:1. */
:root img.rounded-full.object-cover:not([width]){aspect-ratio:1/1}

/* ============ 7. Movimiento reducido (UI-15) ============ */
@media (prefers-reduced-motion:reduce){
  :root [class*="animate-"]{animation:none!important}
  :root .ctxd-skip{transition:none}
}
@media (forced-colors:active){
  .ctxd-skip,.ctxd-gratis{border:1px solid CanvasText}
}

/* Enlaces rojos dentro de un párrafo (aviso de cookies «Más info»): subrayados, para no depender solo del color
   (axe link-in-text-block: el rojo de texto frente al gris del párrafo no llega a 3:1) */
:root p a.text-\[\#e63946\].hover\:underline{text-decoration:underline;text-underline-offset:2px}
