/* ==========================================================================
   fs-puente.css · Puente Tailwind → tokens (FASE 1 del rediseño, 2026-11-08)
   GENERADO por docs/diseno/herramientas/generar_fs_puente.php desde
   assets/tailwind.css: NO editar a mano (regenerar si se recompila Tailwind).
   Repite cada regla de color/tipografía de Tailwind con el MISMO selector,
   apuntando a los roles de assets/fuerza-tokens.css, para que el tema
   oscuro (<html data-tema="oscuro">) funcione sin recompilar Tailwind.
   Se carga DESPUÉS de tailwind.css. Apagarlo = quitar su <link> en app_head().
   Se retira en la fase 8 (Tailwind se recompila con colores var()).
   ========================================================================== */
:root{--fsp-cont-baja:var(--c-neutro-100);--fsp-cont:#F0EEE8;--fsp-cont-alta:var(--c-neutro-200);--fsp-cont-max:var(--c-neutro-300);--fsp-cont-dim:var(--c-neutro-400);--fsp-outline:var(--c-neutro-500);--fsp-sobre-error-suave:#8F1B12;--fsp-sobre-alerta-suave:#6B3F00;--fsp-sobre-info-suave:#174C99}
:root[data-tema="oscuro"]{--fsp-cont-baja:var(--c-noche-700);--fsp-cont:#1F2925;--fsp-cont-alta:var(--c-noche-600);--fsp-cont-max:var(--c-noche-500);--fsp-cont-dim:#3E504A;--fsp-outline:#7F948A;--fsp-sobre-error-suave:#FFB4A9;--fsp-sobre-alerta-suave:#FFD98A;--fsp-sobre-info-suave:#B5CEFF}
*, ::before, ::after{--tw-ring-color:color-mix(in srgb, var(--c-foco) 50%, transparent)}
::backdrop{--tw-ring-color:color-mix(in srgb, var(--c-foco) 50%, transparent)}
*, ::before, ::after{border-color:var(--c-borde)}
html, :host{font-family:var(--font-ui)}
input::-moz-placeholder, textarea::-moz-placeholder{color:var(--c-texto-3)}
input::placeholder, textarea::placeholder{color:var(--c-texto-3)}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{background-color:var(--c-superficie);border-color:var(--c-borde-input)}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{--tw-ring-color:var(--c-foco);border-color:var(--c-foco)}
input::-moz-placeholder, textarea::-moz-placeholder{color:var(--c-texto-3)}
input::placeholder,textarea::placeholder{color:var(--c-texto-3)}
[type='checkbox'],[type='radio']{color:var(--c-foco);background-color:var(--c-superficie);border-color:var(--c-borde-input)}
[type='checkbox']:focus,[type='radio']:focus{--tw-ring-color:var(--c-foco)}
.divide-outline-variant > :not([hidden]) ~ :not([hidden]){border-color:var(--c-borde)}
.\!border-error{border-color:var(--c-error) !important}
.\!border-error\/30{border-color:color-mix(in srgb, var(--c-error) 30%, transparent) !important}
.border-error\/15{border-color:color-mix(in srgb, var(--c-error) 15%, transparent)}
.border-error\/20{border-color:color-mix(in srgb, var(--c-error) 20%, transparent)}
.border-outline{border-color:var(--fsp-outline)}
.border-outline-variant{border-color:var(--c-borde)}
.border-primary{border-color:var(--c-accion)}
.border-primary\/10{border-color:color-mix(in srgb, var(--c-accion) 10%, transparent)}
.border-primary\/15{border-color:color-mix(in srgb, var(--c-accion) 15%, transparent)}
.border-primary\/25{border-color:color-mix(in srgb, var(--c-accion) 25%, transparent)}
.border-surface-container-lowest{border-color:var(--c-superficie)}
.border-warning\/15{border-color:color-mix(in srgb, var(--c-alerta) 15%, transparent)}
.border-warning\/20{border-color:color-mix(in srgb, var(--c-alerta) 20%, transparent)}
.bg-\[rgba\(16\2c 24\2c 32\2c \.34\)\]{background-color:color-mix(in srgb, var(--c-texto) 34%, transparent)}
.bg-background{background-color:var(--c-fondo)}
.bg-brand{background-color:var(--c-brand)}
.bg-error{background-color:var(--c-error)}
.bg-error-container{background-color:var(--c-error-suave)}
.bg-error-container\/50{background-color:color-mix(in srgb, var(--c-error-suave) 50%, transparent)}
.bg-outline{background-color:var(--fsp-outline)}
.bg-outline-variant{background-color:var(--c-borde)}
.bg-primary{background-color:var(--c-accion)}
.bg-primary-container{background-color:var(--c-accion-suave)}
.bg-secondary-container{background-color:var(--c-accion-suave)}
.bg-secondary-container\/30{background-color:color-mix(in srgb, var(--c-accion-suave) 30%, transparent)}
.bg-surface{background-color:var(--c-fondo)}
.bg-surface-container-high{background-color:var(--fsp-cont-alta)}
.bg-surface-container-highest{background-color:var(--fsp-cont-max)}
.bg-surface-container-low{background-color:var(--fsp-cont-baja)}
.bg-surface-container-low\/60{background-color:color-mix(in srgb, var(--fsp-cont-baja) 60%, transparent)}
.bg-surface-container-lowest{background-color:var(--c-superficie)}
.bg-warning{background-color:var(--c-alerta)}
.bg-warning-container{background-color:var(--c-alerta-suave)}
.bg-warning-container\/60{background-color:color-mix(in srgb, var(--c-alerta-suave) 60%, transparent)}
.bg-white{background-color:var(--c-superficie)}
.font-body-md{font-family:var(--font-ui)}
.font-display{font-family:var(--font-ui)}
.font-headline-lg{font-family:var(--font-ui)}
.font-headline-md{font-family:var(--font-ui)}
.\!text-primary{color:var(--c-accion) !important}
.text-error{color:var(--c-error)}
.text-on-background{color:var(--c-texto)}
.text-on-error{color:var(--c-sobre-error)}
.text-on-error-container{color:var(--fsp-sobre-error-suave)}
.text-on-error-container\/90{color:color-mix(in srgb, var(--fsp-sobre-error-suave) 90%, transparent)}
.text-on-primary{color:var(--c-sobre-accion)}
.text-on-primary-container{color:var(--c-sobre-accion-suave)}
.text-on-secondary-container{color:var(--c-sobre-accion-suave)}
.text-on-surface{color:var(--c-texto)}
.text-on-surface-variant{color:var(--c-texto-2)}
.text-on-surface-variant\/80{color:color-mix(in srgb, var(--c-texto-2) 80%, transparent)}
.text-on-warning-container{color:var(--fsp-sobre-alerta-suave)}
.text-outline{color:var(--fsp-outline)}
.text-primary{color:var(--c-accion)}
.text-warning{color:var(--c-alerta)}
.accent-\[\#008048\]{accent-color:var(--c-accion)}
.placeholder\:text-on-surface-variant::-moz-placeholder{color:var(--c-texto-2)}
.placeholder\:text-on-surface-variant::placeholder{color:var(--c-texto-2)}
.hover\:border-\[\#cbd5e1\]:hover{border-color:var(--c-borde-fuerte)}
.hover\:border-primary\/20:hover{border-color:color-mix(in srgb, var(--c-accion) 20%, transparent)}
.hover\:border-primary\/40:hover{border-color:color-mix(in srgb, var(--c-accion) 40%, transparent)}
.hover\:border-surface-dim:hover{border-color:var(--fsp-cont-dim)}
.hover\:bg-error-container:hover{background-color:var(--c-error-suave)}
.hover\:bg-primary-container:hover{background-color:var(--c-accion-suave)}
.hover\:bg-primary-hover:hover{background-color:var(--c-accion-hover)}
.hover\:bg-secondary-container:hover{background-color:var(--c-accion-suave)}
.hover\:bg-surface-container-high:hover{background-color:var(--fsp-cont-alta)}
.hover\:bg-surface-container-low:hover{background-color:var(--fsp-cont-baja)}
.hover\:text-error:hover{color:var(--c-error)}
.hover\:text-on-surface:hover{color:var(--c-texto)}
.hover\:text-primary:hover{color:var(--c-accion)}
.hover\:text-primary-hover:hover{color:var(--c-accion-hover)}
.focus\:border-primary:focus{border-color:var(--c-accion)}
.focus\:ring-primary\/15:focus{--tw-ring-color:color-mix(in srgb, var(--c-accion) 15%, transparent)}
.focus\:ring-primary\/30:focus{--tw-ring-color:color-mix(in srgb, var(--c-accion) 30%, transparent)}
.focus-visible\:bg-surface-container-low:focus-visible{background-color:var(--fsp-cont-baja)}
.focus-visible\:ring-error:focus-visible{--tw-ring-color:var(--c-error)}
.focus-visible\:ring-warning:focus-visible{--tw-ring-color:var(--c-alerta)}
.has-\[\:checked\]\:border-primary\/40:has(:checked){border-color:color-mix(in srgb, var(--c-accion) 40%, transparent)}
.has-\[\:checked\]\:bg-secondary-container\/50:has(:checked){background-color:color-mix(in srgb, var(--c-accion-suave) 50%, transparent)}
.aria-expanded\:border-outline[aria-expanded="true"]{border-color:var(--fsp-outline)}
.aria-expanded\:bg-surface-container-low[aria-expanded="true"]{background-color:var(--fsp-cont-baja)}
@media (min-width: 768px){
.md\:border-outline-variant{border-color:var(--c-borde)}
.md\:font-headline-lg{font-family:var(--font-ui)}
}
:root[data-tema="oscuro"] :is(.bg-warning,.bg-error,.bg-primary,.bg-info,.bg-brand).text-white{color:#0D1211}
