/* F5 (Hito E1, 2026-10-05): «Marino» v1.1 aplicado a mano en este archivo generado. En el repo no hay generador
   (src/generados/ se copia de 09_IDENTIDAD_VISUAL_TUENDO); la fuente es 10_MARCA_VIGENTE/15_ENTREGA_FRONTEND/tokens/
   marino-v1.1.css, con MARINO_DECISION.md y auditoria-marino-v1.1.json (34 pares, 0 fallos). Cambia: la rampa
   --tu-marino-*, la marca madre (#182346) y los campos por sistema, --tu-texto-sobre-marca (blanco en claro) y el tema
   oscuro (acción, enlace, foco, etiqueta, decoración y marcas). Al regenerar en la fuente, estos valores ya vienen. */
:root{
  /* familias */
  --tu-font-sans:'Inter Variable','Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --tu-font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  /* paleta cruda */
  --tu-violeta-50:#F3F0FF;
  --tu-violeta-100:#E7E1FF;
  --tu-violeta-200:#CFC4FF;
  --tu-violeta-300:#AE9BFB;
  --tu-violeta-400:#8B70F4;
  --tu-violeta-500:#6E4BE8;
  --tu-violeta-600:#5B33DE;
  --tu-violeta-700:#4A26B8;
  --tu-violeta-800:#3B1F91;
  --tu-violeta-900:#2C1770;
  --tu-coral-50:#FFF4F0;
  --tu-coral-100:#FFE3D9;
  --tu-coral-200:#FFC5B2;
  --tu-coral-300:#FF9E80;
  --tu-coral-400:#FF7852;
  --tu-coral-500:#F45B31;
  --tu-coral-600:#D8431C;
  --tu-coral-700:#AF3315;
  --tu-coral-800:#8A2812;
  --tu-coral-900:#6B2010;
  --tu-tinta-0:#FFFFFF;
  --tu-tinta-25:#FBFBFD;
  --tu-tinta-50:#F5F6F9;
  --tu-tinta-100:#EDEEF3;
  --tu-tinta-200:#DDE0E8;
  --tu-tinta-300:#C2C7D4;
  --tu-tinta-400:#98A0B3;
  --tu-tinta-500:#6E7793;
  --tu-tinta-600:#525B75;
  --tu-tinta-700:#3D4459;
  --tu-tinta-800:#262B3A;
  --tu-tinta-900:#151824;
  --tu-tinta-950:#0B0D14;
  --tu-jade-50:#ECFBF6;
  --tu-jade-100:#CFF4E8;
  --tu-jade-300:#6FD9BC;
  --tu-jade-500:#12A47F;
  --tu-jade-600:#0C7E61;
  --tu-jade-700:#0B6B53;
  --tu-jade-900:#06382C;
  --tu-ambar-50:#FFF8EB;
  --tu-ambar-100:#FDECC8;
  --tu-ambar-300:#F3C35C;
  --tu-ambar-500:#C98A0A;
  --tu-ambar-600:#8C6203;
  --tu-ambar-700:#855700;
  --tu-ambar-900:#4A3100;
  --tu-rubi-50:#FEF2F2;
  --tu-rubi-100:#FDE0E0;
  --tu-rubi-300:#F49A9A;
  --tu-rubi-500:#D63636;
  --tu-rubi-600:#B92626;
  --tu-rubi-700:#961D1D;
  --tu-rubi-900:#571010;
  --tu-fucsia-50:#FFF0F6;
  --tu-fucsia-100:#FFDCEA;
  --tu-fucsia-300:#F58CB8;
  --tu-fucsia-500:#D6216F;
  --tu-fucsia-600:#B8145C;
  --tu-fucsia-700:#930F49;
  --tu-fucsia-900:#530827;
  --tu-azul-50:#EFF6FF;
  --tu-azul-100:#DBEAFE;
  --tu-azul-300:#8FBEFB;
  --tu-azul-500:#2A72D9;
  --tu-azul-600:#1D5DBC;
  --tu-azul-700:#174A96;
  --tu-azul-900:#0D2B57;
  /* escala tipografica */
  --tu-txt-display-xl-size:44px; --tu-txt-display-xl-lh:50px; --tu-txt-display-xl-w:800; --tu-txt-display-xl-ls:-0.03em;
  --tu-txt-display-l-size:34px; --tu-txt-display-l-lh:40px; --tu-txt-display-l-w:700; --tu-txt-display-l-ls:-0.026em;
  --tu-txt-titulo-l-size:26px; --tu-txt-titulo-l-lh:32px; --tu-txt-titulo-l-w:700; --tu-txt-titulo-l-ls:-0.02em;
  --tu-txt-titulo-m-size:20px; --tu-txt-titulo-m-lh:26px; --tu-txt-titulo-m-w:650; --tu-txt-titulo-m-ls:-0.016em;
  --tu-txt-titulo-s-size:17px; --tu-txt-titulo-s-lh:24px; --tu-txt-titulo-s-w:600; --tu-txt-titulo-s-ls:-0.011em;
  --tu-txt-cuerpo-l-size:16px; --tu-txt-cuerpo-l-lh:24px; --tu-txt-cuerpo-l-w:400; --tu-txt-cuerpo-l-ls:-0.006em;
  --tu-txt-cuerpo-m-size:14px; --tu-txt-cuerpo-m-lh:20px; --tu-txt-cuerpo-m-w:400; --tu-txt-cuerpo-m-ls:-0.003em;
  --tu-txt-cuerpo-s-size:13px; --tu-txt-cuerpo-s-lh:18px; --tu-txt-cuerpo-s-w:400; --tu-txt-cuerpo-s-ls:0.0em;
  --tu-txt-etiqueta-size:12px; --tu-txt-etiqueta-lh:16px; --tu-txt-etiqueta-w:600; --tu-txt-etiqueta-ls:0.01em;
  --tu-txt-micro-size:11px; --tu-txt-micro-lh:14px; --tu-txt-micro-w:600; --tu-txt-micro-ls:0.03em;
  --tu-txt-dato-xl-size:40px; --tu-txt-dato-xl-lh:44px; --tu-txt-dato-xl-w:700; --tu-txt-dato-xl-ls:-0.02em;
  --tu-txt-dato-l-size:24px; --tu-txt-dato-l-lh:30px; --tu-txt-dato-l-w:650; --tu-txt-dato-l-ls:-0.012em;
  --tu-txt-dato-m-size:15px; --tu-txt-dato-m-lh:20px; --tu-txt-dato-m-w:550; --tu-txt-dato-m-ls:-0.002em;
  --tu-radio-none:0px;
  --tu-radio-xs:4px;
  --tu-radio-sm:6px;
  --tu-radio-md:10px;
  --tu-radio-lg:14px;
  --tu-radio-xl:20px;
  --tu-radio-2xl:28px;
  --tu-radio-full:9999px;
  --tu-space-0:0px;
  --tu-space-1:2px;
  --tu-space-2:4px;
  --tu-space-3:8px;
  --tu-space-4:12px;
  --tu-space-5:16px;
  --tu-space-6:20px;
  --tu-space-7:24px;
  --tu-space-8:32px;
  --tu-space-9:40px;
  --tu-space-10:48px;
  --tu-space-11:64px;
  --tu-space-12:80px;
  --tu-shadow-sm:0 1px 2px 0 rgba(11,13,20,.06), 0 1px 3px 0 rgba(11,13,20,.08);
  --tu-shadow-md:0 2px 4px -1px rgba(11,13,20,.06), 0 8px 16px -4px rgba(11,13,20,.10);
  --tu-shadow-lg:0 4px 8px -2px rgba(11,13,20,.06), 0 16px 32px -8px rgba(11,13,20,.14);
  --tu-shadow-foco:0 0 0 3px rgba(61,83,135,.35);
  /* motion semantico (O5-T006 SS6: valores de partida documentados, no un numero universal —
     se miden/ajustan por superficie y dispositivo antes de certificar un theme). */
  --tu-duracion-instantanea:80ms;
  --tu-duracion-rapida:120ms;
  --tu-duracion-base:200ms;
  --tu-duracion-lenta:320ms;
  --tu-easing-estandar:cubic-bezier(0.2,0,0,1);
  --tu-easing-salida:cubic-bezier(0,0,0.2,1);
  --tu-easing-entrada:cubic-bezier(0.4,0,1,1);
  --tu-touch-min-pos:56px;
  --tu-touch-min-movil:48px;
  --tu-touch-min-escritorio:32px;
  --tu-touch-min-wcag:44px;
  /* Marino v1.1: la rampa completa (950 = acción hover en claro y campo de Platform; 800 = acción, marca madre y
     Admin; 500 = enlace y foco en claro; 300 = acción y foco en oscuro; 200 = enlace en oscuro; 50 = acción suave). */
  --tu-marino-950:#0E0D15;
  --tu-marino-900:#121A33;
  --tu-marino-800:#182346;
  --tu-marino-700:#22305C;
  --tu-marino-600:#2E4273;
  --tu-marino-500:#3D5387;
  --tu-marino-400:#5B74A8;
  --tu-marino-300:#8EA2D6;
  --tu-marino-200:#B6C3E6;
  --tu-marino-100:#D9E0F3;
  --tu-marino-50:#EEF0F7;
  /* Marino v1.1: marca madre = el mismo marino de la acción; campos por sistema (Store deja el fucsia por el malva). */
  --tu-marca-madre:#182346;
  --tu-marca-platform:#0E0D15;
  --tu-marca-admin:#182346;
  --tu-marca-pos:#A8452F;
  --tu-marca-store:#7A4A6E;
  --tu-marca-ops:#2A6B57;
  /* Lote 47 (A-052, D-079, bloque 0455): fotos de producto. Fondo neutro del marco mientras carga y detrás de
     «Mostrar completa»; velo de «Agotado»; píldora sobre la foto (contador y avisos); fondo del visor. Iguales en
     los dos temas: la foto no cambia de color con el tema. */
  --tu-foto-fondo:#F2F2F0;
  /* Texto sobre el fondo neutro (sin foto, error): fijo, porque el fondo no cambia con el tema (4,7:1). */
  --tu-foto-texto:#636C87;
  --tu-foto-velo:rgba(255,255,255,.55);
  --tu-foto-pildora:rgba(21,24,36,.7);
  --tu-foto-visor:#0E0D15;
}

/* ---- tema claro (por defecto) ---- */
:root, [data-tema='claro']{
  /* EV-007 (2026-10-02): acción, enlace y foco pasan de violeta a la línea «Marino» v1.0 (tema claro).
     Los valores anteriores quedan en 09_IDENTIDAD_VISUAL_TUENDO/09_HISTORICO_VISUAL/2026-10-02_linea_violeta/.
     El tema oscuro pasa a Marino en EV-010 (bloque 0253) y se cierra con Marino v1.1 (F5). */
  --tu-fondo-base:#FFFFFF;
  --tu-fondo-sutil:#FBFBFD;
  --tu-fondo-hundido:#F5F6F9;
  --tu-fondo-superficie:#FFFFFF;
  --tu-fondo-superficie-alt:#F5F6F9;
  --tu-fondo-inverso:#151824;
  --tu-borde-sutil:#EDEEF3;
  --tu-borde-base:#DDE0E8;
  --tu-borde-fuerte:#6E7793;
  --tu-texto-fuerte:#151824;
  --tu-texto-base:#262B3A;
  --tu-texto-suave:#525B75;
  /* FA2A.2 (WCAG 1.4.3): #6E7793 daba 4,44:1 sobre blanco y 4,11:1 sobre fondo hundido; #636C87 da 5,22 y 4,83. */
  --tu-texto-tenue:#636C87;
  --tu-texto-inverso:#FFFFFF;
  --tu-texto-enlace:#3D5387;
  --tu-accion-base:#182346;
  --tu-accion-hover:#0E0D15;
  --tu-accion-activo:#0E0D15;
  --tu-accion-suave:#EEF0F7;
  --tu-accion-texto:#FFFFFF;
  --tu-estado-exito:#0C7E61;
  --tu-estado-exito-suave:#ECFBF6;
  --tu-estado-aviso:#8C6203;
  --tu-estado-aviso-suave:#FFF8EB;
  --tu-estado-error:#B92626;
  --tu-estado-error-suave:#FEF2F2;
  --tu-estado-info:#1D5DBC;
  --tu-estado-info-suave:#EFF6FF;
  --tu-foco-anillo:#3D5387;
  /* Línea visual «Marino» v1.0 (EV-007, 2026-10-02): tonos nuevos sin token previo. */
  --tu-etiqueta-fondo:#F4EFF3;
  --tu-etiqueta-texto:#6B4E66;
  --tu-decoracion-lavanda:#7C83AD;
  --tu-decoracion-malva:#BFA9BA;
  /* Marino v1.1 (addendum): el malva no llega a 4,5:1 sobre POS, Ops y Store; el texto sobre la marca pasa a blanco
     (5,90 a 19,32:1 en los seis campos). El malva queda como decoración. */
  --tu-texto-sobre-marca:#FFFFFF;
  --tu-marca-madre:#182346;
  --tu-marca-platform:#0E0D15;
  --tu-marca-admin:#182346;
  --tu-marca-pos:#A8452F;
  --tu-marca-store:#7A4A6E;
  --tu-marca-ops:#2A6B57;
}

/* ---- tema oscuro ---- */
[data-tema='oscuro']{
  /* EV-010 (2026-10-02): línea «Marino» oscura (diseño front3-uix-P007). Lo violeta anterior queda en
     09_IDENTIDAD_VISUAL_TUENDO/09_HISTORICO_VISUAL/2026-10-02_tema_oscuro_violeta_antes_de_marino/.
     Marino v1.1 (F5, 2026-10-05): la acción pasa a clara (#8EA2D6) con texto oscuro (#0B0D14) — blanco sobre #8EA2D6
     daría 1,9:1 —; enlace #B6C3E6, foco #8EA2D6 y los campos de marca oscuros. El bloque de prefers-color-scheme lleva
     los mismos valores. */
  --tu-fondo-base:#0B0D14;
  --tu-fondo-sutil:#151824;
  --tu-fondo-hundido:#070911;
  --tu-fondo-superficie:#151824;
  --tu-fondo-superficie-alt:#1C2030;
  --tu-fondo-inverso:#FFFFFF;
  --tu-borde-sutil:#2A2F3D;
  --tu-borde-base:#262B3A;
  --tu-borde-fuerte:#6E7793;
  --tu-texto-fuerte:#F5F6F9;
  --tu-texto-base:#EDEEF3;
  --tu-texto-suave:#DDE0E8;
  --tu-texto-tenue:#98A0B3;
  --tu-texto-inverso:#0B0D14;
  --tu-texto-enlace:#B6C3E6;
  --tu-accion-base:#8EA2D6;
  --tu-accion-hover:#B6C3E6;
  --tu-accion-activo:#D9E0F3;
  --tu-accion-suave:#19203A;
  --tu-accion-texto:#0B0D14;
  --tu-estado-exito:#6FD9BC;
  --tu-estado-exito-suave:#12352B;
  --tu-estado-aviso:#F3C35C;
  --tu-estado-aviso-suave:#3A2A0A;
  --tu-estado-error:#F49A9A;
  --tu-estado-error-suave:#331313;
  --tu-estado-info:#8FBEFB;
  --tu-estado-info-suave:#0F2340;
  --tu-foco-anillo:#8EA2D6;
  --tu-marca-madre:#8EA2D6;
  --tu-marca-platform:#C9CBD6;
  --tu-marca-admin:#8EA2D6;
  --tu-marca-pos:#E8926F;
  --tu-marca-store:#D3A3C4;
  --tu-marca-ops:#6FC3A5;
  --tu-etiqueta-fondo:#2B2330;
  --tu-etiqueta-texto:#D8C3D2;
  --tu-decoracion-lavanda:#9AA2C9;
  --tu-decoracion-malva:#C8B4C3;
  --tu-texto-sobre-marca:#0B0D14;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema='claro']){
  --tu-fondo-base:#0B0D14;
  --tu-fondo-sutil:#151824;
  --tu-fondo-hundido:#070911;
  --tu-fondo-superficie:#151824;
  --tu-fondo-superficie-alt:#1C2030;
  --tu-fondo-inverso:#FFFFFF;
  --tu-borde-sutil:#2A2F3D;
  --tu-borde-base:#262B3A;
  --tu-borde-fuerte:#6E7793;
  --tu-texto-fuerte:#F5F6F9;
  --tu-texto-base:#EDEEF3;
  --tu-texto-suave:#DDE0E8;
  --tu-texto-tenue:#98A0B3;
  --tu-texto-inverso:#0B0D14;
  --tu-texto-enlace:#B6C3E6;
  --tu-accion-base:#8EA2D6;
  --tu-accion-hover:#B6C3E6;
  --tu-accion-activo:#D9E0F3;
  --tu-accion-suave:#19203A;
  --tu-accion-texto:#0B0D14;
  --tu-estado-exito:#6FD9BC;
  --tu-estado-exito-suave:#12352B;
  --tu-estado-aviso:#F3C35C;
  --tu-estado-aviso-suave:#3A2A0A;
  --tu-estado-error:#F49A9A;
  --tu-estado-error-suave:#331313;
  --tu-estado-info:#8FBEFB;
  --tu-estado-info-suave:#0F2340;
  --tu-foco-anillo:#8EA2D6;
  --tu-marca-madre:#8EA2D6;
  --tu-marca-platform:#C9CBD6;
  --tu-marca-admin:#8EA2D6;
  --tu-marca-pos:#E8926F;
  --tu-marca-store:#D3A3C4;
  --tu-marca-ops:#6FC3A5;
  --tu-etiqueta-fondo:#2B2330;
  --tu-etiqueta-texto:#D8C3D2;
  --tu-decoracion-lavanda:#9AA2C9;
  --tu-decoracion-malva:#C8B4C3;
  --tu-texto-sobre-marca:#0B0D14;
}
}

/* ---- base ---- */
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--tu-font-sans); background:var(--tu-fondo-base); color:var(--tu-texto-base);
      font-size:var(--tu-txt-cuerpo-m-size); line-height:var(--tu-txt-cuerpo-m-lh);
      letter-spacing:var(--tu-txt-cuerpo-m-ls);
      font-feature-settings:'cv05' 1,'ss03' 1; }
/* cifras tabulares obligatorias en toda tabla, total, precio o dato numerico */
.tu-dato, table, input[inputmode='numeric']{ font-variant-numeric: tabular-nums; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--tu-foco-anillo); outline-offset:2px; }
/* entrada de <dialog> (O5-T006 SS6: transicion breve y con proposito, no decorativa —
   confirma que el elemento aparecio en respuesta a la accion; nunca se anula la regla de
   prefers-reduced-motion de abajo). */
@keyframes tu-dialogo-entrada{ from{ opacity:0; transform:scale(.98) translateY(4px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes tu-dialogo-fondo-entrada{ from{ opacity:0; } to{ opacity:1; } }
dialog[open]{ animation:tu-dialogo-entrada var(--tu-duracion-base) var(--tu-easing-salida); }
dialog[open]::backdrop{ animation:tu-dialogo-fondo-entrada var(--tu-duracion-base) var(--tu-easing-salida); }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }