/* «Colores para daltónicos» (petición del dueño, 19-10-2026). Se activa con
   <html data-daltonico="true">, que pone la cabecera (components/_preferencias_cabeza.html) con la
   preferencia guardada (cookie cole_daltonico / localStorage). Paleta de Okabe e Ito: el verde de
   «bien» pasa a AZUL y el rojo de «mal» a BERMELLÓN, que se distinguen con protanopia,
   deuteranopia y tritanopia; los estados llevan además su icono o su texto.
   Contrastes medidos (WCAG AA 4,5): ver la docstring de apps/accessibility/tests/test_daltonico.py. */

/* ---------- Tokens de día ---------- */
:root[data-daltonico="true"]{
  --dl-ok:#0072B2; --dl-ok-ink:#005A8C; --dl-ok-soft:#DCEBF5;
  --dl-bad:#D55E00; --dl-bad-solid:#B24A00; --dl-bad-ink:#9A3D00; --dl-bad-soft:#F7E2D3;
  --dl-warn:#E69F00; --dl-warn-ink:#7A5300; --dl-warn-soft:#FBEFC9;
  /* Escritorio clásico (variables.css): botones de peligro, chapas y barras de progreso */
  --cole-success:#0072B2; --cole-success-light:#DCEBF5;
  --cole-error:#B24A00; --cole-error-light:#F7E2D3;
  --cole-warning:#E69F00; --cole-warning-light:#FBEFC9;
  /* Partida del quiz, tarjetas de estudio y carnet */
  --qz-ok:#0072B2; --qz-ok-solid:#0072B2; --qz-bad:#D55E00; --qz-bad-solid:#B24A00;
  --ok-ink:#005A8C; --bad-ink:#9A3D00;
}
/* ---------- Tokens de noche ---------- */
:root[data-daltonico="true"][data-theme="dark"]{
  --dl-ok-ink:#7CC3EE; --dl-bad-ink:#F4A46A; --dl-warn-ink:#F0E442;
  --dl-ok-soft:#10314A; --dl-bad-soft:#3D2210; --dl-warn-soft:#33300C;
  --ok-ink:#7CC3EE; --bad-ink:#F4A46A;
}
@media (prefers-color-scheme:dark){:root[data-daltonico="true"]:not([data-theme="light"]){
  --dl-ok-ink:#7CC3EE; --dl-bad-ink:#F4A46A; --dl-warn-ink:#F0E442;
  --dl-ok-soft:#10314A; --dl-bad-soft:#3D2210; --dl-warn-soft:#33300C;
  --ok-ink:#7CC3EE; --bad-ink:#F4A46A;
}}

/* Intranet 2026 («Hoy») y panel de administración: sus estados usan --ok / --bad / --warn */
[data-daltonico="true"] .hoy, [data-daltonico="true"] .p26-body, [data-daltonico="true"] .ct-wrap{
  --ok:var(--dl-ok-ink); --bad:var(--dl-bad-ink); --warn:var(--dl-warn-ink); --mal:var(--dl-bad-ink);
  --ok-soft:var(--dl-ok-soft); --bad-soft:var(--dl-bad-soft); --warn-soft:var(--dl-warn-soft);
}
[data-daltonico="true"][data-theme="dark"] .hoy, [data-daltonico="true"][data-theme="dark"] .p26-body,
[data-daltonico="true"][data-theme="dark"] .ct-wrap{
  --ok:var(--dl-ok-ink); --bad:var(--dl-bad-ink); --warn:var(--dl-warn-ink); --mal:var(--dl-bad-ink);
  --ok-soft:var(--dl-ok-soft); --bad-soft:var(--dl-bad-soft); --warn-soft:var(--dl-warn-soft);
}

/* Chapas y botones de peligro del escritorio clásico (texto legible de día y de noche) */
[data-daltonico="true"] .cole-badge-success{background:var(--dl-ok-soft); color:var(--dl-ok-ink)}
[data-daltonico="true"] .cole-badge-danger{background:var(--dl-bad-soft); color:var(--dl-bad-ink)}
[data-daltonico="true"] .cole-badge-warning{background:var(--dl-warn-soft); color:var(--dl-warn-ink)}
[data-daltonico="true"] .cole-btn-danger{background:var(--dl-bad-solid); border-color:var(--dl-bad-solid); color:#fff}
[data-daltonico="true"] .tp-pendiente{border-style:dashed}

/* Colores escritos a mano en plantillas antiguas (style="color:#22c55e", "#ef4444"...) */
[data-daltonico="true"] [style*="background:#22c55e" i], [data-daltonico="true"] [style*="background: #22c55e" i],
[data-daltonico="true"] [style*="background:#16a34a" i], [data-daltonico="true"] [style*="background:#10b981" i]{background:var(--dl-ok)!important; color:#fff!important}
[data-daltonico="true"] [style*="background:#ef4444" i], [data-daltonico="true"] [style*="background: #ef4444" i],
[data-daltonico="true"] [style*="background:#dc2626" i]{background:var(--dl-bad-solid)!important; color:#fff!important}
[data-daltonico="true"] [style^="color:#22c55e" i], [data-daltonico="true"] [style*=";color:#22c55e" i], [data-daltonico="true"] [style*=" color:#22c55e" i],
[data-daltonico="true"] [style^="color:#16a34a" i], [data-daltonico="true"] [style*=";color:#16a34a" i],
[data-daltonico="true"] [style^="color:#10b981" i], [data-daltonico="true"] [style*=";color:#10b981" i]{color:var(--dl-ok-ink)!important}
[data-daltonico="true"] [style^="color:#ef4444" i], [data-daltonico="true"] [style*=";color:#ef4444" i], [data-daltonico="true"] [style*=" color:#ef4444" i],
[data-daltonico="true"] [style^="color:#dc2626" i], [data-daltonico="true"] [style*=";color:#dc2626" i]{color:var(--dl-bad-ink)!important}
[data-daltonico="true"] [style*="border-color:#22c55e" i]{border-color:var(--dl-ok)!important}
[data-daltonico="true"] [style*="border-color:#ef4444" i]{border-color:var(--dl-bad)!important}

/* Prueba «Nivel 0» de la portada del quiz: 4 respuestas que se distinguen con los 3 daltonismos
   (ΔE mínimo 20,7 con las simulaciones de Machado 2009) y su forma de siempre. */
[data-daltonico="true"] .mq-op:nth-child(1){background:#0072B2; color:#fff}
[data-daltonico="true"] .mq-op:nth-child(2){background:#F0E442; color:#13202B}
[data-daltonico="true"] .mq-op:nth-child(3){background:#56B4E9; color:#13202B}
[data-daltonico="true"] .mq-op:nth-child(4){background:#CC79A7; color:#13202B}
[data-daltonico="true"] .mq-op svg{fill:currentColor}
[data-daltonico="true"] .mq-ops .mq-op.ok{background:#0072B2; color:#fff; outline-color:var(--dl-ok-ink)}
[data-daltonico="true"] .mq-op.mal{filter:none; background:var(--dl-bad-soft); color:var(--dl-bad-ink); border-style:dashed}

/* El interruptor «Colores para daltónicos» (components/_pref_daltonico.html) */
.pref-switch{display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; cursor:pointer}
.pref-switch__txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.pref-switch__txt b{font-size:.95rem; color:var(--ink, var(--cole-text-primary, #13202B))}
.pref-switch__txt small{font-size:.82rem; color:var(--ink-2, var(--cole-text-secondary, #3C4C5A))}
.pref-switch input{appearance:none; -webkit-appearance:none; flex:none; width:52px; height:30px; margin:0; border-radius:999px; cursor:pointer;
  background:var(--qz-off, #94a3b8); border:2px solid var(--ink-2, #3C4C5A); position:relative; transition:background-color .15s}
.pref-switch input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s}
.pref-switch input:checked{background:#0072B2; border-color:#0072B2}
.pref-switch input:checked::after{transform:translateX(22px)}
.pref-switch input:focus-visible{outline:3px solid var(--focus, #2B55C9); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pref-switch input, .pref-switch input::after{transition:none}}

/* Panel «Accesibilidad» de la cabecera pública (core/portada/_cabecera.html) */
.acc-wrap{position:relative; flex:none}
.acc-panel{position:absolute; top:calc(100% + 12px); right:-60px; z-index:60; width:min(320px, calc(100vw - 32px)); padding:16px;
  background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:18px; box-shadow:0 10px 30px var(--shadow)}
.acc-panel[hidden]{display:none}
.acc-panel__titulo{font-weight:700; margin:0 0 12px}

/* Botón único «Tu cuenta» de la cabecera pública (core/portada/_cabecera.html): entrar o crear
   cuenta desde un solo sitio, como en AnunciosVarios. Va fuera del menú plegable: se ve siempre. */
.cuenta-wrap{position:relative; flex:none}
.top-cuenta{display:inline-flex}
.cuenta-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:3px; border-radius:999px;
  border:2px solid var(--line); background:var(--card); color:var(--ink); font:inherit; cursor:pointer; text-decoration:none; flex:none}
.cuenta-btn:focus-visible, .cuenta-op:focus-visible{outline:3px solid var(--focus, #2B55C9); outline-offset:2px}
.cuenta-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--btn-verde, #3D7A64); color:#fff; flex:none}
.cuenta-tx{display:none; text-align:left; font-weight:700; font-size:.9rem; line-height:1.15; padding-right:12px; white-space:nowrap}
.cuenta-tx small{display:block; font-weight:500; font-size:.74rem; color:var(--ink-2)}
@media (min-width:1100px){.cuenta-tx{display:block}}
@media (hover:hover){.cuenta-btn:hover{border-color:var(--btn-verde, #3D7A64)}}
.cuenta-panel{position:absolute; top:calc(100% + 12px); right:0; z-index:60; width:min(18rem, calc(100vw - 32px)); padding:12px; display:grid; gap:8px;
  background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:18px; box-shadow:0 10px 30px var(--shadow)}
.cuenta-panel[hidden]{display:none}
.cuenta-tit{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-2); margin:2px 8px 4px}
.cuenta-op{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 12px; border-radius:14px; border:2px solid var(--line);
  color:var(--ink); text-decoration:none; font-weight:700}
.cuenta-op small{display:block; font-weight:500; font-size:.8rem; color:var(--ink-2)}
.cuenta-op > svg{color:var(--btn-verde, #3D7A64); flex:none}
@media (hover:hover){.cuenta-op:hover{background:var(--wall-2)}}
.p26 a.cuenta-op--alta, .cuenta-op--alta{background:var(--btn-verde, #3D7A64); border-color:var(--btn-verde, #3D7A64); color:#fff}
.cuenta-op--alta small, .cuenta-op--alta > svg{color:#fff}
@media (max-width:480px){.top .wrap{gap:8px}}
@media (max-width:380px){.top .brand{font-size:1.15rem; gap:8px}.top .brand .logo{width:32px; height:32px}}
/* Con el menú plegado el panel se ancla al borde derecho de la barra (no al botón), para no salirse por la izquierda */
@media (max-width:900px){.cuenta-wrap{position:static}.cuenta-panel{right:0}}
/* Móviles muy estrechos: solo el logo, sin el nombre (el enlace ya lleva su nombre para el lector de pantalla) */
@media (max-width:370px){.top .brand{font-size:0; gap:0}}