/* Heyconi · Taller, segunda pasada (Paso 10.4b, F1b). Tokens de la app, en claro y en oscuro. Una app sobria (Notion, Claude, Apple como referentes), sin papel ni letra de máquina como identidad. Del guion Tinta toma pocas cosas y con función: sus dos tintas (--nota: ayuda, recomendado, foco · --pend: pendiente), la rayita fina bajo lo recomendado, la raya lateral de sus notas en los "¿Por qué?", el filete de su sinopsis junto a "Cómo lo enfocamos" y el punto del logo. =Tinta: copia exacta de app/entregable.py (CSS :root y la sombra de .pagina); test_interfaz.test_direccion_taller compara. Tema: html[data-tema="claro"|"oscuro"]. Lo fija un script mínimo en el de index.html antes de pintar (la primera vez sigue a prefers-color-scheme; después, lo que la persona eligió con el botón, guardado en este navegador). El guion para grabar se ve siempre como hoja clara (su iframe declara color-scheme: light). Contraste WCAG 2 (texto AA pide 4,5:1; límites de control, 1.4.11, 3:1). test_interfaz lo recalcula desde este archivo. Claro: tinta/superficie 16,18 · tinta/papel 18,26 · tinta/superficie-2 14,79 · tinta-2/superficie 5,05 · tinta-2/papel 5,70 · tinta-2/superficie-2 4,61 · nota/superficie 5,64 · nota/papel 6,37 · nota/nota-suave 5,42 · nota/superficie-2 5,16 · pend/superficie 4,85 · pend/papel 5,48 · sobre-tinta/tinta 18,26 · sobre-tinta/tinta-hover 14,35 · alerta/alerta-suave 7,02 · borde-control/superficie 3,41 · borde-control/papel 3,85 · borde-control/superficie-2 3,12. Prohibido: texto --pend sobre --superficie-2 (4,43). Oscuro (base del plan: superficie #1A1917, tinta #EDEBE6, tinta-2 #A9A49A, nota #5FB8B0, pend #E58A62, borde-control #7A756B; el resto, derivado): tinta/superficie 14,75 · tinta/papel 13,80 · tinta/superficie-2 12,88 · tinta-2/superficie 7,08 · tinta-2/papel 6,63 · tinta-2/superficie-2 6,18 · nota/superficie 7,50 · nota/papel 7,02 · nota/nota-suave 5,84 · nota/superficie-2 6,55 · pend/superficie 6,81 · pend/papel 6,37 · pend/superficie-2 5,95 · sobre-tinta/tinta 14,75 · sobre-tinta/tinta-hover 11,75 · alerta/alerta-suave 7,50 · borde-control/superficie 3,84 · borde-control/papel 3,59 · borde-control/superficie-2 3,35. Decorativo, sin mínimo: --regla (separadores) y --tinta-hecha. */ :root{ color-scheme:light; --superficie:#F3F1EC; --superficie-2:#EAE7E0; --papel:#FFFFFF; --tinta:#151515; --tinta-2:#6B665E; --nota:#0F6A6C; --pend:#B4461D; /* =Tinta */ --regla:#DEDAD2; --borde-control:#87817A; --nota-suave:#E4EFEE; --alerta:#8A2E1F; --alerta-suave:#F7E7E2; --sobre-tinta:#FFFFFF; --tinta-hover:#2B2A27; --tinta-hecha:#97948E; --foco:var(--nota); --velo:rgba(21,21,21,.32); /* fondo detrás de una hoja (S7) */ --f-app:"Bricolage Grotesque","Avenir Next","Helvetica Neue",Arial,sans-serif; --f-nota:"Iowan Old Style","Hoefler Text",Georgia,serif; /* =Tinta */ --t-meta:15px; --t-cuerpo:17px; --t-campo:19px; --t-lead:20px; --t-titulo:24px; --t-portada:34px; --lh-cuerpo:1.5; --lh-titulo:1.2; --w-texto:430; --w-enfasis:600; --w-titulo:720; --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --r-control:8px; --r-panel:10px; --r-pastilla:999px; --linea:1px solid var(--regla); --linea-control:1px solid var(--borde-control); --elev-hoja:0 1px 6px rgba(0,0,0,.18); /* =Tinta */ --elev-flota:0 1px 2px rgba(21,21,21,.06),0 8px 24px rgba(21,21,21,.10); --anillo:2px solid var(--foco); --anillo-sep:2px; --d-press:90ms; --d-rapido:120ms; --d-cierra:140ms; --d-error:160ms; --d-medio:180ms; --d-entra:200ms; --d-entrada:220ms; --d-giro:1000ms; --c-salida:cubic-bezier(.2,0,0,1); --c-entrada:cubic-bezier(.4,0,1,1); --c-pluma:cubic-bezier(.45,0,.2,1); --lateral:232px; --ancho-lectura:680px; --alto-barra:61px; /* barra del celular: 44 del botón + 2 × 8 + 1 de línea */ } html[data-tema="oscuro"]{ color-scheme:dark; --superficie:#1A1917; --superficie-2:#262521; --papel:#211F1C; --tinta:#EDEBE6; --tinta-2:#A9A49A; --nota:#5FB8B0; --pend:#E58A62; --regla:#34312C; --borde-control:#7A756B; --nota-suave:#173230; --alerta:#F0A38F; --alerta-suave:#3A1E17; --sobre-tinta:#1A1917; --tinta-hover:#D6D3CC; --tinta-hecha:#5C5850; --velo:rgba(0,0,0,.55); --elev-flota:0 1px 2px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.40); } @media (prefers-reduced-motion:reduce){ :root{--d-press:0ms;--d-rapido:0ms;--d-cierra:0ms;--d-error:0ms;--d-medio:0ms;--d-entra:0ms;--d-entrada:0ms} } body{background:var(--superficie);color:var(--tinta); font:var(--w-texto) var(--t-cuerpo)/var(--lh-cuerpo) var(--f-app);font-optical-sizing:auto} :focus-visible{outline:var(--anillo);outline-offset:var(--anillo-sep)} /* Plegables animados solo donde el navegador los soporta; en el resto abren al instante y no recortan nada */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} details::details-content{block-size:0;overflow:clip;overflow-clip-margin:6px; transition:block-size var(--d-cierra) var(--c-entrada),content-visibility var(--d-cierra) allow-discrete} details[open]::details-content{block-size:auto;transition-duration:var(--d-medio);transition-timing-function:var(--c-salida)} } summary::after{content:"";display:inline-block;flex:none;width:6px;height:6px;margin-left:var(--e-2); border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg); transition:transform var(--d-medio) var(--c-salida)} details[open]>summary::after{transform:translateY(1px) rotate(225deg)}