/* Solo Cienes · «Pizarra y cuaderno» (plan/estilo.html). layout.php loads it after every other sheet:
   it re-points the tokens of base.css and adds the shared pieces (board, pencil, notebook, footer). */
:root{
  /* paper + ink */
  --bg:#FAF8F2;--surface:#FFFFFF;--ink:#18211D;--muted:#55605A;--line:#E3E0D6;--ctl:#7A847E;
  /* bolígrafo azul: the one action color (6.15:1 on white) */
  --accent:#2557D6;--accent-strong:#1C45AD;--accent-edge:#163A92;--accent-soft:#EAF0FD;--accent-ink:#FFFFFF;
  /* pizarra */
  --board:#17372C;--board-2:#1F4537;--board-line:#3A5E50;--chalk:#F2EFE6;--chalk-2:#B9C7BE;
  /* lápiz */
  --pencil:#F4B73A;--pencil-strong:#E0A21F;--pencil-edge:#B9850F;--pencil-soft:#FDF0CC;--pencil-ink:#5E4300;
  /* cuaderno (decoration only, never behind running text) */
  --rule:#D3E0EE;--margin:#EBA5AC;--grid:#E6ECF3;
  /* the grade mark (logo only) */
  --mark:#C8102E;
  /* the student's bubble = a sticky note */
  --student:#FDF0CC;--student-ink:#18211D;
  /* subject covers (monogram tiles; always next to the subject name) */
  --s-mat:#2557D6;--s-cie:#1E6B45;--s-fis:#6B3FC4;--s-qui:#B4470C;--s-bio:#0E6F6F;--s-esp:#A3266F;
  --r-control:12px;--r-card:16px;--r-bubble:16px;
}
body{background:var(--bg);color:var(--ink)}
::selection{background:var(--pencil-soft)}
a{color:var(--accent);text-underline-offset:3px}

/* ---- type: bigger, tighter display ---- */
.h1{font:700 39px/1.15 var(--font);letter-spacing:-.02em}
.h2{font:700 20px/1.3 var(--font)}
.d1{font:700 61px/1.05 var(--font);letter-spacing:-.03em}
.d2{font:700 49px/1.1 var(--font);letter-spacing:-.025em}
.d3{font:700 31px/1.2 var(--font);letter-spacing:-.015em}
.kick{display:flex;align-items:center;gap:8px;font:600 12px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kick .kn{font-variant-numeric:tabular-nums;color:var(--ink)}
/* highlighter behind a word (lápiz amarillo). Ink on #F4B73A = 9.2:1 */
.hl{background:linear-gradient(transparent 58%,var(--pencil) 58%,var(--pencil) 92%,transparent 92%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:600px){.h1{font-size:31px}.d1{font-size:39px}.d2{font-size:31px}.d3{font-size:24px}}

/* ---- buttons: tactile 3 px bottom edge (one physical edge = one signal, LAW §4 / library 26) ---- */
.btn{border-radius:var(--r-control);transition:transform .08s,box-shadow .08s,background .12s}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--accent-edge)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-edge)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--ctl);box-shadow:0 3px 0 var(--line)}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-secondary:active{transform:translateY(3px);box-shadow:none}
.btn-pencil{background:var(--pencil);color:var(--ink);box-shadow:0 3px 0 var(--pencil-edge)}
.btn-pencil:hover{background:var(--pencil-strong)}
.btn-pencil:active{transform:translateY(3px);box-shadow:none}
.btn-pencil:focus-visible,.on-board .btn:focus-visible,.on-board a:focus-visible{outline:2px solid var(--pencil);outline-offset:3px}
.btn-chalk{background:transparent;color:var(--chalk);border-color:var(--chalk-2)}
.btn-chalk:hover{background:var(--board-2);border-color:var(--chalk)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--line);color:var(--muted);border-color:transparent;box-shadow:none;transform:none}
.btn-lg{min-height:52px;padding:0 24px;font-size:17px}
.btn-block{width:100%}

/* ---- fields ---- */
.field{border-radius:var(--r-control);border-color:var(--ctl);background:var(--surface)}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---- tags: pills; status tags carry an icon, category tags do not ---- */
.tag-neutral{background:var(--info-soft);color:var(--info-ink)}
.tag-pencil{background:var(--pencil-soft);color:var(--pencil-ink)}
.tag-board{background:var(--board);color:var(--chalk)}

/* ---- brand: the «Solo 100» lockup is one svg (templates/partials/logo.php); its size stays base.css's ---- */
.brand{color:var(--ink)}

/* ---- app bars: paper white, one hairline ---- */
.authbar,.appbar{background:var(--surface);border-bottom:1px solid var(--line)}
.authbar{justify-content:space-between;gap:16px}
.authbar .btn{min-height:44px}

/* ---- notebook + chalkboard materials ---- */
.ruled{background-color:var(--surface);background-image:linear-gradient(90deg,transparent 47px,var(--margin) 47px,var(--margin) 49px,transparent 49px),repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px)}
.gridp{background-color:var(--surface);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.on-board{background:var(--board);color:var(--chalk)}
.on-board .muted,.on-board .lead{color:var(--chalk-2)}
.on-board .kick{color:var(--chalk-2)}.on-board .kick .kn{color:var(--chalk)}
.on-board :is(p,li,span) > a:not(.btn):not(.tlink){color:var(--pencil)}
.on-board .tlink{color:var(--chalk)}
.mk-check{width:24px;height:24px;color:var(--ok-ink)}
.mk-under{display:block;width:100%;height:14px;color:var(--pencil)}
.mk-arrow{width:48px;height:30px;color:var(--accent)}
.mk-pencil{width:200px;height:26px}

/* ---- subject monograms = notebook covers ---- */
.mono{background:var(--accent-soft);color:var(--accent)}
.mono.c-mat,.cov.c-mat{background:var(--s-mat);color:#FFFFFF}
.mono.c-cie,.cov.c-cie{background:var(--s-cie);color:#FFFFFF}
.mono.c-fis,.cov.c-fis{background:var(--s-fis);color:#FFFFFF}
.mono.c-qui,.cov.c-qui{background:var(--s-qui);color:#FFFFFF}
.mono.c-bio,.cov.c-bio{background:var(--s-bio);color:#FFFFFF}
.mono.c-esp,.cov.c-esp{background:var(--s-esp);color:#FFFFFF}

/* ---- public footer: the chalkboard ---- */
.sfoot2{background:var(--board);color:var(--chalk);padding:48px 24px 32px}
.sf-in{max-width:1152px;margin:0 auto}
.sf-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px;padding-bottom:32px;border-bottom:1px solid var(--board-line)}
.sf-brand{display:grid;gap:16px;max-width:420px}
.sf-brand p{color:var(--chalk-2)}
.tile{display:inline-flex;align-items:center;justify-self:start;background:var(--bg);border-radius:var(--r-control);padding:8px 16px 8px 12px}
.sf-links{display:flex;flex-wrap:wrap;gap:0 24px;align-content:flex-start;max-width:520px}
.sf-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--chalk);font-weight:600;text-decoration:none}
.sf-links a:hover{color:var(--pencil);text-decoration:underline}
.sf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;color:var(--chalk-2);font-size:13.5px}
@media (max-width:600px){.sfoot2{padding:40px 16px 24px}.sf-links{gap:0 16px}}

/* ---- numbered steps: pencil-yellow coins ---- */
.coin{flex:none;width:32px;height:32px;border-radius:999px;background:var(--pencil);color:var(--ink);display:grid;place-items:center;font:700 13.5px/1 var(--font)}

/* ---- dark mode = "modo pizarra" (prefers-color-scheme): paper becomes the board ---- */
.dark{--bg:#14302A;--surface:#1B3D31;--ink:#F2EFE6;--muted:#B9C7BE;--line:#2F5244;--ctl:#8FA89B;
  --accent:#F4B73A;--accent-strong:#E0A21F;--accent-edge:#B9850F;--accent-soft:#29493C;--accent-ink:#18211D;
  --student:#2B4A3E;--student-ink:#F2EFE6;--pencil-soft:#3B4A2A;--pencil-ink:#F6D58A;--grid:#22473A;--rule:#2A4C3F;
  --ok-ink:#86D9AC;--ok-soft:#1F4A37;--warn-ink:#F6D58A;--warn-soft:#3B4A2A;--danger-ink:#FFA59A;--danger-soft:#4A2B2A;--info-soft:#22473A;--info-ink:#D7E2DA;
  background:var(--bg);color:var(--ink)}
.dark .brand .wm{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* ---- spacing helpers: the CSP (style-src 'self') allows no style="" attributes ---- */
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mw-480{max-width:480px}.js-start{justify-self:start}.p-0{padding:0}
.t-danger{color:var(--danger-ink);font-weight:600}

/* ---- plans: pieces shared by several screens (the picker, the meter, the bar) ---- */
.pick{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.pick legend{font-weight:600;margin-bottom:8px;padding:0}
.pick-o{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:64px;padding:12px 16px;border:1px solid var(--ctl);border-radius:var(--r-control);background:var(--surface);cursor:pointer}
.pick-o input{width:24px;height:24px;margin:0;accent-color:var(--accent);grid-row:1/3}
.pick-o .pn{font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pick-o .pd{grid-column:2;color:var(--muted);font-size:16px}
.pick-o .pp{grid-column:3;grid-row:1/3;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pick-o .pp small{display:block;font-weight:400;font-size:13.5px;color:var(--muted)}
@media (max-width:400px){.pick-o .pp{grid-column:2;grid-row:3;text-align:left}.pick-o .pp small{display:inline;margin-left:4px}}
.pick-o:hover{border-color:var(--accent);background:var(--accent-soft)}
.pick-o:has(input:checked){border:2px solid var(--accent);padding:11px 15px;background:var(--accent-soft)}
.pick-o:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pick-o:has(input:disabled){border-style:dashed;cursor:not-allowed;color:var(--muted)}
.pick.is-error .pick-o{border-color:var(--danger-ink)}
.pick-inst{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;color:var(--muted)}
.pick-inst a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.field[aria-invalid=true]{border:2px solid var(--danger-ink)}
.uso{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:16px}
.uso .uso-t b{font-variant-numeric:tabular-nums}
.uso .uso-d{color:var(--muted);font-size:13.5px}
.uso .uso-up{display:inline-flex;align-items:center;min-height:44px;font-weight:600;margin-left:auto}
.uso.is-warn .uso-t b{color:var(--warn-ink)}
@media (max-width:600px){.uso .uso-up{margin-left:0}}
/* span.bar only: the usage report's svg.bar (admin.css) keeps its own look */
.bar:not(svg){display:inline-block;position:relative;width:96px;height:8px;margin:0;border-radius:999px;background:var(--line);overflow:hidden;flex:none;vertical-align:middle}
.bar:not(svg) i{position:absolute;inset:0 auto 0 0;height:auto;border-radius:999px;background:var(--ok-ink)}
.bar.is-warn i{background:var(--warn-ink)}
.bar.is-full i{background:var(--danger-ink)}
.bar.wide:not(svg){display:block;width:100%;max-width:320px;height:12px}
/* bar fill without style="" (CSP style-src 'self'): the server rounds the % used to steps of 5 → class v0…v100 */
.bar i.v0{width:0%}.bar i.v5{width:5%}.bar i.v10{width:10%}.bar i.v15{width:15%}.bar i.v20{width:20%}.bar i.v25{width:25%}.bar i.v30{width:30%}.bar i.v35{width:35%}.bar i.v40{width:40%}.bar i.v45{width:45%}.bar i.v50{width:50%}.bar i.v55{width:55%}.bar i.v60{width:60%}.bar i.v65{width:65%}.bar i.v70{width:70%}.bar i.v75{width:75%}.bar i.v80{width:80%}.bar i.v85{width:85%}.bar i.v90{width:90%}.bar i.v95{width:95%}.bar i.v100{width:100%}