:root { color-scheme: light dark; --fondo:#f6f1e7; --tinta:#2a2118; --borde:#c9b88f; --acento:#8b2c1e;--foco:#0b57d0; --suave:#e9dfc6; --ok:#2f6b3a; }
@media (prefers-color-scheme: dark) { :root { --fondo:#1c1813; --tinta:#eadfc7; --borde:#4a3f2c; --acento:#ff9d8a;--foco:#8ab4ff; --suave:#2a241b; --ok:#7bc58a; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--fondo); color:var(--tinta); }
header { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline; padding:.75rem 1rem; border-bottom:2px solid var(--borde); }
h1 { margin:0; font-size:1.3rem; } h1 small { font-weight:400; opacity:.7; font-size:.7em; }
h2 { font-size:1.15rem; margin:.5rem 0; } h3 { font-size:1rem; margin:1rem 0 .4rem; }
main { padding:1rem; max-width:1100px; margin:0 auto; }
.dos { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; } @media (max-width:760px){ .dos{grid-template-columns:1fr;} }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.6rem; }
.tarjeta { background:var(--suave); border:1px solid var(--borde); border-radius:6px; padding:.7rem .9rem; }
.plaza { text-align:left; border:1px solid var(--borde); background:var(--suave); color:inherit; border-radius:6px; padding:.6rem; cursor:pointer; }
.plaza:disabled { opacity:.55; cursor:not-allowed; }
button { font:inherit; padding:.4rem .8rem; border:1px solid var(--acento); background:var(--acento); color:#fff; border-radius:5px; cursor:pointer; }
button.sec { background:transparent; color:var(--acento); }
button:disabled { opacity:.5; cursor:not-allowed; }
input, select { font:inherit; padding:.3rem .4rem; border:1px solid var(--borde); border-radius:4px; background:var(--fondo); color:var(--tinta); max-width:100%; }
label { display:block; margin:.35rem 0; }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { text-align:left; padding:.25rem .4rem; border-bottom:1px solid var(--borde); }
.nota { font-size:.85rem; opacity:.8; }
.fila { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; margin:.3rem 0; }
.ok { color:var(--ok); font-weight:600; } .mal { color:var(--acento); font-weight:600; }
#avisos { list-style:none; padding:0; margin:0; font-size:.9rem; max-height:11rem; overflow:auto; } #avisos li { padding:.15rem 0; border-bottom:1px dotted var(--borde); }
[hidden] { display:none !important; }
.oculto { position:absolute; left:-9999px; }

.saltar { position:absolute; left:-999px; top:0; background:var(--acento); color:#fff; padding:.5rem 1rem; z-index:10; } .saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--foco); outline-offset:2px; }
@media (prefers-color-scheme: dark) { button { color:#1c1813; } button.sec { color:var(--acento); } }
button, input, select, textarea, summary { min-height:2.5rem; }
@media (max-width:760px){ button, input, select, textarea, summary { min-height:2.75rem; } body{font-size:17px;} header{padding:.6rem .8rem;} main{padding:.75rem;} }
textarea { font:inherit; width:100%; min-height:4rem; padding:.3rem .4rem; border:1px solid var(--borde); border-radius:4px; background:var(--fondo); color:var(--tinta); }
.orden { margin:.4rem 0; border:1px solid var(--borde); border-radius:6px; padding:.2rem .7rem; background:var(--suave); }
.orden summary { cursor:pointer; font-weight:600; } .orden .ayuda { font-size:.8rem; opacity:.85; display:block; }
#diario { padding-left:1.1rem; font-size:.9rem; }
table { display:block; overflow-x:auto; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }