/* Pizarra de aula: estilos comunes de las páginas de la plataforma (portada, compra, acceso) */

/* Pizarra de aula: marco de madera, tablero verde y letra de tiza; un color de tiza por sección.
   Portada → herramientas (laboratorio y cuadro) → prácticas → panel del profesor. */
:root{
  --wood:#9c6b3a; --board:#24443b; --board2:#2b4f45; --board-edge:rgba(0,0,0,.28);
  --chalk:#f4f2e8; --chalk-soft:#d6e5db; --chalk-text:#e3ece6; --chalk-dim:rgba(244,242,232,.5); --chalk-line:rgba(244,242,232,.22);
  --yellow:#f6d55c; --yellow-hi:#f9e183; --on-yellow:#1b352e; --pink:#f4a3a8; --blue:#8fd3ea; --green:#a9dca0; --orange:#f7b267;
  --bar:#1b352e; --bar-ink:#f4f2e8; --bar-line:#122620; --paper:#fbfaf4; --paper-ink:#1d2a26; --paper-line:#d9dccf;
  --bad:#ff8f87; --ok:#a9dca0;
  --f-chalk:'Caveat Brush','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  --f-hand:'Patrick Hand','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wood:#7b5430;--board:#1e3a33;--board2:#244539;--bar:#152a25;--bar-line:#0d1c18;}}
:root[data-theme="dark"]{--wood:#7b5430;--board:#1e3a33;--board2:#244539;--bar:#152a25;--bar-line:#0d1c18;}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{height:100%;margin:0;background:var(--wood);color:var(--chalk);font:400 19px/1.32 var(--f-hand);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- tablero (portada, prácticas, panel) ---------- */
.home{min-height:100%;display:flex;padding-block:18px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));background:var(--wood)}
.board{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:22px;background:var(--board);border-radius:6px;box-shadow:inset 0 0 0 3px var(--board-edge);padding:26px clamp(16px,4vw,52px) 22px}
.mast{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;width:100%;max-width:1120px}
.formula{flex:1 1 150px;font:400 40px/1 var(--f-chalk);color:var(--chalk-dim);transform:rotate(-7deg);white-space:nowrap}
.center{flex:2 1 420px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.logo{height:60px;width:auto;background:#fff;padding:8px 14px;box-sizing:content-box;border-radius:3px;transform:rotate(-2.5deg);box-shadow:4px 5px 0 rgba(0,0,0,.28)}
h1{margin:6px 0 0;font:400 clamp(42px,5.6vw,68px)/1 var(--f-chalk);text-wrap:balance}
h2{margin:0;font:400 36px/1.05 var(--f-chalk);text-wrap:balance}
h3{margin:0;font:400 27px/1.08 var(--f-chalk)}
.underline{display:block;width:400px;max-width:100%;height:14px;fill:none;stroke:var(--yellow);stroke-width:3.5;stroke-linecap:round}
.lead{margin:0;font-size:22px;line-height:1.2;color:var(--chalk-soft)}
.sketch{flex:1 1 150px;display:flex;justify-content:flex-end}
.sketch svg{width:150px;height:90px;fill:none;stroke:var(--chalk-dim);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.role{display:inline-flex;align-items:center;gap:8px;border:2px dashed var(--chalk-line);border-radius:999px;padding:3px 14px;font-size:18px;color:var(--chalk-soft)}
.role b{font-weight:400;color:var(--yellow)}

.tile{--c:var(--chalk);appearance:none;text-align:left;color:var(--chalk);background:rgba(255,255,255,.04);border:3px solid var(--c);display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 24px 26px;transition:transform .12s ease,background-color .12s ease;-webkit-tap-highlight-color:transparent}
.tile svg{flex:none;width:54px;height:54px;fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tile .txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.tile .name{font:400 33px/1.05 var(--f-chalk);color:var(--c)}
.tile .what{font-size:19px;line-height:1.3;color:var(--chalk-text)}
.tile:hover{background:color-mix(in srgb,var(--c) 15%,transparent);transform:translateY(-3px)}
.t-lab{--c:var(--blue);border-radius:225px 18px 255px 18px/18px 255px 18px 225px}
.t-cua{--c:var(--pink);border-radius:18px 225px 18px 255px/255px 18px 225px 18px}
.t-pra{--c:var(--yellow);border-radius:18px 255px 18px 225px/225px 18px 255px 18px}
.t-pro{--c:var(--green);border-radius:255px 18px 225px 18px/18px 225px 18px 255px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px;width:100%;max-width:1120px}
.copy{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;width:100%;max-width:1120px;margin-top:auto;font-size:17px;color:var(--chalk-soft);text-align:center}
.sticks{display:flex;align-items:center;gap:8px}.sticks i{display:block;height:10px;border-radius:3px}

/* ---------- listas sobre la pizarra ---------- */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;max-width:1120px}
.top .sp{flex:1}
.chalkbtn{border:2px solid var(--chalk-line);background:transparent;color:var(--chalk);border-radius:999px;padding:6px 16px;font:400 19px/1.1 var(--f-hand);display:inline-flex;align-items:center;gap:7px}
.chalkbtn:hover{border-color:var(--chalk);background:rgba(255,255,255,.06)}
.chalkbtn.y{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.chalkbtn.y:hover{background:var(--yellow-hi)}
.chalkbtn.sm{padding:3px 12px;font-size:17px}
.chalkbtn.del{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
.chalkbtn:disabled{opacity:.45;cursor:default}
.sec{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:14px}
.sec>header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:2px dashed var(--chalk-line);padding-bottom:6px}
.sec>header p{margin:0;color:var(--chalk-soft);font-size:18px;flex:1 1 320px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:9px;border:2px solid var(--chalk-line);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.03);min-width:0}
.card h3{font-size:26px}
.card p{margin:0;color:var(--chalk-text);font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:0 10px;font-size:16px;border:1.5px solid var(--chalk-line);color:var(--chalk-soft);white-space:nowrap}
.chip.lab{border-color:var(--blue);color:var(--blue)}
.chip.cua{border-color:var(--pink);color:var(--pink)}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.y{border-color:var(--yellow);color:var(--yellow)}
.chip.off{border-style:dashed}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.empty{border:2px dashed var(--chalk-line);border-radius:14px;padding:18px 20px;color:var(--chalk-soft);font-size:18px}
.note{color:var(--chalk-soft);font-size:17px;margin:0}
.confirm{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--bad)}

/* ---------- panel del profesor ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:18px}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1.5px dashed var(--chalk-line);vertical-align:middle}
.tbl th{font-weight:400;color:var(--chalk-soft)}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.wrapx{overflow-x:auto;width:100%}

/* ---------- herramienta abierta ---------- */
.stage{height:100%;display:flex;flex-direction:column;background:var(--board)}
.appbar{flex:none;display:flex;align-items:center;gap:10px;min-height:48px;padding-block:6px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--bar-line);flex-wrap:wrap}
.homebtn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 16px 4px 11px;border:0;border-radius:999px;background:var(--yellow);color:var(--on-yellow);font:400 20px/1 var(--f-hand)}
.homebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.homebtn:hover{background:var(--yellow-hi)}
.barlogo{width:auto;height:28px;background:#fff;border-radius:6px;padding:2px 5px;flex:none}
.bartitle{font:400 22px/1.1 var(--f-hand);min-width:0;flex:1 1 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-acts{display:flex;gap:6px;flex-wrap:wrap}
.body{flex:1;min-height:0;display:flex;position:relative}
.frames{flex:1;min-width:0;position:relative;background:var(--board)}
.frames iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
.loading{position:absolute;inset:0;display:grid;place-items:center;font:400 30px var(--f-chalk);color:var(--chalk-soft)}
.ficha{flex:none;width:min(380px,100%);background:var(--paper);color:var(--paper-ink);border-left:1px solid var(--paper-line);overflow-y:auto;padding:18px 18px 28px;display:flex;flex-direction:column;gap:12px;font:400 18px/1.35 var(--f-hand)}
.ficha h2{font:400 31px/1.05 var(--f-chalk);color:var(--paper-ink)}
.ficha h4{margin:6px 0 0;font:400 22px/1.1 var(--f-chalk);color:#2d6b57}
.ficha p,.ficha ul,.ficha ol{margin:0}
.ficha ul,.ficha ol{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.ficha .eyebrow{font-size:16px;color:#5d6b64}
.ficha .box{border:2px dashed var(--paper-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ficha .box.mark{border-style:solid;border-color:#2d6b57;background:#eef6ef}
.ficha .box.warn{border-color:#c8811f;background:#fff4e2}
.ficha label{display:flex;flex-direction:column;gap:4px;font-size:17px;color:#45524c}
.ficha input,.ficha textarea{border:1.5px solid var(--paper-line);border-radius:10px;padding:7px 10px;background:#fff;color:var(--paper-ink);font:400 18px/1.3 var(--f-hand)}
.ficha textarea{min-height:90px;resize:vertical}
.ficha .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pbtn{border:2px solid #2d6b57;background:#2d6b57;color:#fff;border-radius:999px;padding:5px 15px;font:400 19px/1.1 var(--f-hand)}
.pbtn:hover{background:#245a49}
.pbtn.gh{background:transparent;color:#2d6b57}
.pbtn.gh:hover{background:#e4f0e7}
.pbtn:disabled{opacity:.5;cursor:default}
.chk{display:flex!important;flex-direction:row!important;gap:9px;align-items:flex-start;color:var(--paper-ink)!important}
.chk input{width:20px;height:20px;margin-top:3px;accent-color:#2d6b57}
@media (max-width:820px){
 .formula,.sketch{display:none}
 .ficha{position:absolute;right:0;top:0;bottom:0;z-index:5;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
 .tile{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
 .tile svg{width:46px;height:46px}
 .tile .name{font-size:29px}
}

/* ---------- diálogo de práctica ---------- */
dialog{border:0;border-radius:16px;padding:0;background:var(--paper);color:var(--paper-ink);width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(8,18,14,.55)}
dialog form{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;font:400 18px/1.3 var(--f-hand)}
dialog h2{color:var(--paper-ink);font-size:32px}
dialog label{display:flex;flex-direction:column;gap:4px;color:#45524c;font-size:17px}
dialog input,dialog select,dialog textarea{border:1.5px solid var(--paper-line);border-radius:10px;padding:7px 10px;background:#fff;color:var(--paper-ink);font:400 18px/1.3 var(--f-hand)}
dialog textarea{min-height:80px;resize:vertical}
dialog .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.two{grid-template-columns:1fr}}

/* ---------- entrar, alta, mi centro (hojas de papel sobre la pizarra) ---------- */
.papel{width:100%;max-width:560px;background:var(--paper);color:var(--paper-ink);border-radius:16px;padding:22px clamp(16px,4vw,26px);display:flex;flex-direction:column;gap:13px;box-shadow:5px 7px 0 rgba(0,0,0,.28);font:400 18px/1.3 var(--f-hand)}
.papel.ancho{max-width:1120px}
.papel h2{color:var(--paper-ink);font-size:34px}
.papel h3{color:#2d6b57;font-size:25px}
.papel p{margin:0}
.papel .sub{color:#5d6b64;font-size:17px}
.papel label{display:flex;flex-direction:column;gap:4px;color:#45524c;font-size:17px}
.papel input,.papel select,.papel textarea{border:1.5px solid var(--paper-line);border-radius:10px;padding:8px 11px;background:#fff;color:var(--paper-ink);font:400 19px/1.3 var(--f-hand);min-width:0}
.papel textarea{min-height:110px;resize:vertical}
.papel .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.papel .msg{border-radius:10px;padding:8px 12px;font-size:17px}
.papel .msg.ok{background:#eef6ef;border:1.5px solid #2d6b57;color:#1f4d3e}
.papel .msg.err{background:#fff0ee;border:1.5px solid #c0473b;color:#8f2a20}
.papel a{color:#2d6b57}
.papel .lnk{border:0;background:none;padding:0;color:#2d6b57;text-decoration:underline;font:inherit}
.papel .tbl th,.papel .tbl td{border-bottom-color:var(--paper-line)}
.papel .tbl th{color:#5d6b64}
.papel .tbl td{color:var(--paper-ink)}
.papel .tbl input{padding:3px 8px;font-size:17px;width:100%}
.papel .pbtn.del{background:transparent;border-color:#c0473b;color:#a33a2f}
.codigo{font:400 34px/1 var(--f-hand)!important;letter-spacing:10px;text-align:center;width:100%;max-width:260px}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.plan{position:relative;border:2px solid var(--paper-line);border-radius:12px;padding:10px 12px;display:flex!important;flex-direction:column;gap:2px!important;cursor:pointer;color:var(--paper-ink)!important}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan b{font:400 24px/1.05 var(--f-chalk);color:#2d6b57}
.plan:has(input:checked){border-color:#2d6b57;background:#eef6ef;box-shadow:inset 0 0 0 1px #2d6b57}
.plan:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:2px}
.estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px}
.estado div{border:1.5px dashed var(--paper-line);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column}
.estado span{font-size:15px;color:#5d6b64}
.estado b{font:400 24px/1.1 var(--f-chalk);color:var(--paper-ink)}
.salir{border:0;background:none;color:var(--chalk-soft);text-decoration:underline;font:inherit;padding:0}
.t-cen{--c:var(--orange);border-radius:225px 18px 255px 18px/18px 255px 18px 225px}
.t-sup{--c:var(--chalk-soft);border-radius:18px 225px 18px 255px/255px 18px 225px 18px}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--paper);color:var(--paper-ink);padding:9px 16px;border-radius:12px;font:400 19px var(--f-hand);z-index:90;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}