:root{
  --bg:#f4efe6; --panel:#fffdf8; --ink:#1f2a33; --muted:#6b7177; --line:#e2d9c8;
  --accent:#b33a2b; --accent-ink:#fff; --top:#1f2a33; --side:#fffdf8;
  --aviso-bg:#fff3cd; --aviso-ink:#5c4400; --aviso-line:#f0d58a;
  --s-disponible:#2f8f5b; --s-ocupada:#2f5f9e; --s-sucia:#c0392b; --s-limpieza:#d29a12;
  --s-revisar:#7b4fb0; --s-mantencion:#d86a1c; --s-bloqueada:#7a7f85;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08);
}
html[data-tema="noche"]{ --bg:#14181c; --panel:#1d2329; --ink:#e9e4da; --muted:#9aa3ab; --line:#2e363e; --accent:#d9543f; --shadow:none; --top:#0e1215; --side:#181d22;
  --aviso-bg:#3a3015; --aviso-ink:#f2dc9b; --aviso-line:#5c4a1a;
  --s-disponible:#3fae73; --s-ocupada:#4f86d1; --s-sucia:#e0574a; --s-limpieza:#e6b23a; --s-revisar:#9d77d4; --s-mantencion:#ee8a3f; --s-bloqueada:#8d939a; }
@media (prefers-color-scheme: dark){
  html[data-tema="auto"]{ --bg:#14181c; --panel:#1d2329; --ink:#e9e4da; --muted:#9aa3ab; --line:#2e363e; --accent:#d9543f; --shadow:none; --top:#0e1215; --side:#181d22;
    --aviso-bg:#3a3015; --aviso-ink:#f2dc9b; --aviso-line:#5c4a1a;
    --s-disponible:#3fae73; --s-ocupada:#4f86d1; --s-sucia:#e0574a; --s-limpieza:#e6b23a; --s-revisar:#9d77d4; --s-mantencion:#ee8a3f; --s-bloqueada:#8d939a; }
}
html[data-tema="contraste"]{ --bg:#000; --panel:#000; --ink:#fff; --muted:#e0e0e0; --line:#fff; --accent:#ffd400; --accent-ink:#000; --shadow:none; --top:#000; --side:#000;
  --aviso-bg:#000; --aviso-ink:#ffd400; --aviso-line:#ffd400;
  --s-disponible:#00d26a; --s-ocupada:#3aa0ff; --s-sucia:#ff4d4d; --s-limpieza:#ffd400; --s-revisar:#d58cff; --s-mantencion:#ff9a1f; --s-bloqueada:#bdbdbd; }
html[data-tema="contraste"] .tag{color:#000}
/* Daltónico: paleta Okabe-Ito, distinguible con deuteranopía/protanopía */
html[data-tema="daltonico"]{ --accent:#0072b2;
  --s-disponible:#009e73; --s-ocupada:#0072b2; --s-sucia:#d55e00; --s-limpieza:#e69f00; --s-revisar:#cc79a7; --s-mantencion:#8c6d00; --s-bloqueada:#6b6b6b; }
html.grande{font-size:19px} html.grande body{zoom:1.12}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 22px;width:min(340px,100%);text-align:center;box-shadow:var(--shadow)}
.marca{font-size:40px;font-weight:700;color:var(--accent);letter-spacing:2px}
.marca span{display:block;font-size:18px;color:var(--ink);letter-spacing:4px;text-transform:uppercase}
.sub{color:var(--muted);margin:4px 0 18px}
.pin-display{font-size:34px;letter-spacing:12px;margin:6px 0 14px;min-height:44px}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.teclado button{height:62px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-size:24px}
.teclado button:active{transform:scale(.97)}
.teclado .ok{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.err{color:var(--s-sucia);min-height:1.4em}

/* Header + tabs */
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:var(--top);color:#f4efe6;height:54px}
.top-izq{display:flex;align-items:center;gap:10px;min-width:0}
.logo{color:#e8735f;font-weight:700;font-size:20px}
.hotel{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-der{display:flex;align-items:center;gap:10px}
.reloj{font-variant-numeric:tabular-nums;opacity:.8;font-size:14px}
.chip-user{background:rgba(255,255,255,.12);border:0;border-radius:999px;padding:6px 12px;color:#f4efe6;font-size:14px;white-space:nowrap}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;background:var(--side);border-bottom:1px solid var(--line);position:sticky;top:54px;z-index:4;scrollbar-width:none}
.tabs .ico{display:inline-block;width:1.4em;text-align:center;margin-right:4px}
.tabs button{border:0;background:none;padding:8px 14px;border-radius:999px;white-space:nowrap;color:var(--muted);font-weight:600;position:relative}
.tabs button.on{background:var(--ink);color:var(--bg)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;line-height:20px;margin-left:6px;text-align:center}
main{padding:14px 16px 80px;max-width:1200px;margin:0 auto}
.aviso{margin:10px 16px 0;padding:12px 14px;border-radius:var(--radius);background:var(--aviso-bg);color:var(--aviso-ink);border:1px solid var(--aviso-line);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}


/* Genéricos */
h2{font-size:20px;margin:6px 0 12px}
h3{font-size:16px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.entre{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.small{font-size:13px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 14px;font-weight:600;min-height:42px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--s-disponible);border-color:var(--s-disponible);color:#fff}
.btn.warn{background:var(--s-mantencion);border-color:var(--s-mantencion);color:#fff}
.btn.blue{background:var(--s-ocupada);border-color:var(--s-ocupada);color:#fff}
.btn.big{min-height:54px;font-size:17px;padding:12px 18px;flex:1}
.btn:disabled{opacity:.5}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-height:44px}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:22px;height:22px;min-height:0;vertical-align:middle}
.check{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink);font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase}
.tabla-scroll{overflow-x:auto}

/* Estados */
.e-disponible{--c:var(--s-disponible)} .e-ocupada{--c:var(--s-ocupada)} .e-sucia{--c:var(--s-sucia)}
.e-limpieza{--c:var(--s-limpieza)} .e-revisar{--c:var(--s-revisar)} .e-mantencion{--c:var(--s-mantencion)} .e-bloqueada{--c:var(--s-bloqueada)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--c,var(--muted));color:#fff}

/* Tablero */
.habs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hab{border:0;text-align:left;background:var(--panel);border-radius:var(--radius);padding:12px;border-left:7px solid var(--c);box-shadow:var(--shadow);outline:1px solid var(--line);min-height:112px;display:flex;flex-direction:column;gap:4px}
.hab .num{font-size:24px;font-weight:800;line-height:1}
.hab .tipo{font-size:12px;color:var(--muted)}
.hab .est{font-size:13px;font-weight:700;color:var(--c)}
.hab .det{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hab .flags{margin-top:auto;display:flex;gap:4px;flex-wrap:wrap}
.flag{font-size:11px;padding:1px 6px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.flag.rojo{background:var(--s-sucia);color:#fff;border-color:transparent}
.piso-tit{grid-column:1/-1;margin:8px 0 0;font-weight:700;color:var(--muted)}

/* Limpieza */
.tarea{display:flex;flex-direction:column;gap:10px;background:var(--panel);border-radius:var(--radius);padding:14px;border-left:8px solid var(--c);outline:1px solid var(--line);margin-bottom:10px}
.tarea .cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tarea .num{font-size:28px;font-weight:800}
.nota{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:15px}

/* Bitácora */
.ent{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;border-left:6px solid var(--line)}
.ent.alta{border-left-color:var(--s-sucia)} .ent.media{border-left-color:var(--s-limpieza)} .ent.baja{border-left-color:var(--s-bloqueada)}
.ent.resuelto{opacity:.65}
.ent .meta{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ent .txt{margin:6px 0;white-space:pre-wrap;font-size:16px}
.ent.nueva{box-shadow:0 0 0 2px var(--accent)}
.tipo-b{font-weight:700;color:var(--ink)}

/* Rol */
.rol td,.rol th{text-align:center;padding:6px 4px}
.rol td:first-child,.rol th:first-child{text-align:left;white-space:nowrap}
.celda{width:100%;min-width:44px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-weight:800}
.celda.M{background:#fde9b6;color:#5a4300} .celda.T{background:#cfe3fb;color:#123e6b} .celda.N{background:#2c2f4a;color:#fff} .celda.L{background:transparent;color:var(--muted)}
.hoy-col{background:rgba(179,58,43,.08)}

/* Resumen */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.kpi .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.kpi .l{font-size:13px;color:var(--muted)}
.barra{display:flex;height:22px;border-radius:8px;overflow:hidden;background:var(--bg);margin:8px 0}
.barra span{background:var(--c)}
.mini{display:flex;align-items:flex-end;gap:4px;height:110px;padding-top:8px}
.mini div{flex:1;background:var(--s-ocupada);border-radius:4px 4px 0 0;position:relative;min-height:2px}
.mini-l{display:flex;gap:4px;font-size:10px;color:var(--muted)} .mini-l span{flex:1;text-align:center}

/* Imprimir */
.impr{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.impr .panel p{margin:4px 0 12px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal-card{background:var(--panel);width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px 24px}
@media (min-width:700px){.modal{align-items:center}.modal-card{border-radius:18px}}
.modal-card .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.modal-card h2{margin-top:0}
.cerrar{float:right;border:0;background:none;font-size:26px;line-height:1;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#1f2a33;color:#fff;padding:10px 16px;border-radius:10px;z-index:30;max-width:90vw}
.toast.mal{background:var(--s-sucia)}
.hist{font-size:13px;color:var(--muted);margin:0;padding-left:18px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}.habs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reloj{display:none}.hotel{max-width:28vw}.top{padding:10px 12px}.chip-user{padding:6px 9px;font-size:13px}}

/* Escritorio: menú lateral como programa */
@media (min-width:1000px){
  .tabs{position:fixed;top:54px;left:0;bottom:0;width:220px;flex-direction:column;overflow-y:auto;padding:14px 10px;border-bottom:0;border-right:1px solid var(--line);gap:2px}
  .tabs button{border-radius:10px;padding:11px 12px;text-align:left;font-size:15px;display:flex;align-items:center}
  .tabs button .badge{margin-left:auto}
  .tabs button:hover:not(.on){background:var(--bg)}
  .tabs .sep{height:1px;background:var(--line);margin:8px 6px}
  main,#aviso,#franja{margin-left:236px!important}
  main{max-width:none;padding:18px 28px 60px}
  #aviso,#franja{margin-right:28px}
}
.tabs .sep{flex:none}
@media (max-width:999px){.tabs .sep{display:none}}
.login-card .ver{color:var(--muted);font-size:12px;margin-top:10px}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.opciones button{border:2px solid var(--line);background:var(--panel);border-radius:10px;padding:10px;font-weight:600}
.opciones button.on{border-color:var(--accent)}
.vacio{text-align:center;padding:28px 16px;color:var(--muted)}
a.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}

/* Planificación */
.nav-per{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.per-tit{font-size:17px;min-width:220px;text-align:center}
.finde{background:rgba(0,0,0,.035)}
.rol.mes td,.rol.mes th{padding:3px 1px}
.rol.mes .celda{min-width:26px;width:26px;height:30px;font-size:12px;padding:0}
.proy{display:grid;grid-template-columns:repeat(12,minmax(54px,1fr));gap:6px;margin:8px 0 12px;overflow-x:auto}
.proy-m{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px}
.proy-m.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.proy-b{width:18px;height:46px;background:var(--bg);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}
.proy-b span{width:100%;background:var(--s-ocupada)}
table.cal{border-collapse:separate;border-spacing:0 3px;font-size:12px}
table.cal th,table.cal td{padding:0;border:0;text-align:center}
table.cal th{min-width:26px;font-weight:600;color:var(--muted);font-size:11px}
table.cal .c-hab{position:sticky;left:0;background:var(--panel);text-align:left;padding:0 8px 0 2px;white-space:nowrap;z-index:1;min-width:110px;color:var(--ink);font-size:13px}
table.cal td{height:30px}
.c-vac{border-left:1px solid var(--line)!important;cursor:pointer}
.c-vac:hover{background:rgba(179,58,43,.12)}
.c-est{color:#fff;font-weight:700;cursor:pointer;text-align:left!important;overflow:hidden;white-space:nowrap;border-left:2px solid var(--panel)!important}
.c-est span{padding:0 6px;display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.c-ini{border-radius:12px 0 0 12px}
.c-act{background:var(--s-ocupada)} .c-res{background:var(--s-revisar)} .c-cer{background:var(--s-bloqueada);opacity:.7}
.dot.c-act,.dot.c-res,.dot.c-cer{display:inline-block}
.c-tot{font-size:11px;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- 0.4.5: Lumi, arte y tutorial ---------- */
.chochin-login{width:96px;height:auto;margin:-6px auto 2px;display:block;filter:drop-shadow(0 0 14px rgba(255,170,80,.55));animation:flotar 4s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.btn-practicar{display:block;margin-top:14px;padding:12px;border-radius:12px;border:1px dashed var(--accent);color:var(--accent);text-decoration:none;font-weight:700}
.btn-practicar:hover{background:var(--bg)}
.practica-tag{background:#fde9c8;color:#6b3d00;border-radius:10px;padding:8px 10px;font-size:13px;margin:0 0 12px}
.logo-img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,170,80,.5))}
.logo{letter-spacing:.5px}
.franja{margin:10px 16px 0;padding:8px 12px;border-radius:var(--radius);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);font-size:14px}
.franja img{width:34px;height:auto}
.franja>span:first-of-type{flex:1;min-width:200px}
.franja.practica{background:linear-gradient(90deg,#2a1f3d,#3d2a2a);color:#ffe9c7;border-color:#5a3d2e}
.franja.practica .btn:not(.pri){background:transparent;color:#ffe9c7;border-color:#8a6a55}
.franja.vencida{background:var(--aviso-bg);color:var(--aviso-ink);border-color:var(--aviso-line)}
.prueba-modal{text-align:center}.prueba-modal img{width:110px}
.prueba-modal p{text-align:left}
img.puerta{width:30px;height:auto;flex:none}
.hab{position:relative}
.hab img.puerta{position:absolute;top:8px;right:8px;width:34px;opacity:.95}
.chip img.puerta{width:16px;margin-right:2px;vertical-align:-3px}
.tarea .cab img.puerta{width:30px;align-self:center}

/* Tutorial: Lumi acompaña sin tapar la pantalla */
#tut{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:flex-end;gap:6px;max-width:min(470px,calc(100vw - 32px));pointer-events:none}
#tut .globo{pointer-events:auto;background:#fffaf0;color:#2b2118;border:3px solid #3b2a20;border-radius:18px;padding:14px 16px 12px;box-shadow:0 8px 28px rgba(0,0,0,.28);position:relative;font-size:15px;line-height:1.45;flex:1;min-width:0}
#tut .globo:after{content:"";position:absolute;right:-13px;bottom:28px;border:10px solid transparent;border-left-color:#3b2a20}
#tut .globo b{color:#9b2c1f}
#tut .globo .tit{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8a6a55;margin-bottom:4px;display:flex;justify-content:space-between;gap:6px}
#tut .globo .bot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
#tut .globo .btn{min-height:36px;padding:6px 12px;color:#2b2118;background:#fff;border-color:#d8c8b4}
#tut .globo .btn.pri{background:#b33a2b;border-color:#b33a2b;color:#fff}
#tut .globo .pista{font-size:13px;color:#7a5d48;margin-top:6px}
#tut .chochin{width:112px;height:auto;flex:none;filter:drop-shadow(0 0 16px rgba(255,170,80,.6));animation:flotar 4s ease-in-out infinite;pointer-events:auto;cursor:pointer}
#tut.min .globo{display:none}
#tut.min .chochin{width:72px}
#tut .rama{height:14px;border-radius:999px;background:#ead9c4;margin:8px 0 2px;overflow:hidden;position:relative}
#tut .rama i{display:block;height:100%;background:linear-gradient(90deg,#f5a3b5,#e0607e);border-radius:999px;transition:width .5s}
#tut .rama span{position:absolute;inset:0;font-size:10px;line-height:14px;text-align:center;color:#5a2b35;font-weight:700}
#tutAnillo{position:fixed;z-index:59;pointer-events:none;border:4px solid #ffb347;border-radius:14px;box-shadow:0 0 0 4px rgba(255,179,71,.35),0 0 22px 6px rgba(255,150,60,.55);transition:all .25s;animation:latir 1.3s ease-in-out infinite}
@keyframes latir{0%,100%{box-shadow:0 0 0 4px rgba(255,179,71,.35),0 0 18px 4px rgba(255,150,60,.45)}50%{box-shadow:0 0 0 9px rgba(255,179,71,.15),0 0 30px 10px rgba(255,150,60,.65)}}
#tutAnillo .flecha{position:absolute;width:44px;left:50%;top:-48px;transform:translateX(-50%) rotate(90deg);animation:apuntar 1s ease-in-out infinite}
@keyframes apuntar{0%,100%{margin-top:0}50%{margin-top:-8px}}
.tut-fondo{position:fixed;inset:0;z-index:70;background:#14100f url(tut/fondo_recepcion_noche.webp) center/cover no-repeat;display:grid;place-items:center;padding:16px;overflow:auto}
.tut-fondo:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,8,20,.35),rgba(10,8,20,.75))}
.tut-menu{position:relative;width:min(760px,100%);color:#fff3e0}
.tut-menu .cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.tut-menu .cab img{width:110px;filter:drop-shadow(0 0 18px rgba(255,170,80,.7));animation:flotar 4s ease-in-out infinite}
.tut-menu h1{margin:0;font-size:28px}
.tut-menu p{margin:4px 0 0;color:#f2dcc0}
.misiones{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mision{background:rgba(255,250,240,.95);color:#2b2118;border-radius:16px;padding:14px;border:3px solid #3b2a20;display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;cursor:pointer;transition:transform .15s}
.mision:hover{transform:translateY(-3px)}
.mision h3{margin:0;font-size:18px;color:#2b2118;text-transform:none;letter-spacing:0}
.mision .muted{color:#7a5d48;font-size:13px}
.mision .pie{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.mision img.logro{width:54px}
.mision.hecha{border-color:#2f8f5b}
.mision.hecha .ok{color:#2f8f5b;font-weight:700}
.logros{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.logros img{width:62px;transition:filter .3s}
.logros img.no{filter:grayscale(1) brightness(.6);opacity:.55}
.tut-menu .pie-menu{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tut-menu .pie-menu .btn{background:rgba(255,250,240,.12);color:#fff3e0;border-color:rgba(255,240,220,.4)}
.tut-final{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(10,8,20,.6);padding:16px}
.tut-final .carta{background:#fffaf0;color:#2b2118;border:4px solid #3b2a20;border-radius:22px;padding:22px;text-align:center;width:min(420px,100%);position:relative;animation:aparecer .4s ease-out}
@keyframes aparecer{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.tut-final .sello{position:absolute;right:-18px;top:-26px;width:110px;transform:rotate(12deg);animation:sellar .5s .35s ease-out both}
.tut-final .sello img{width:100%;display:block}.tut-final .sello span{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:900;color:#b33a2b}
@keyframes sellar{from{transform:scale(2.2) rotate(30deg);opacity:0}to{transform:rotate(12deg);opacity:1}}
.tut-final .logro{width:140px;margin:4px auto}
.tut-final .chochin{width:120px}
@media (max-width:640px){
  #tut{right:8px;left:8px;bottom:8px;max-width:none}
  #tut .chochin{width:76px}
  #tut .globo{font-size:14px;padding:12px}
}
@media (prefers-reduced-motion:reduce){.chochin-login,#tut .chochin,#tutAnillo,#tutAnillo .flecha,.tut-menu .cab img{animation:none}}
.franja .btn{min-height:34px;padding:5px 12px;font-size:14px}
@media (max-width:560px){
  .logo{display:none}
  .franja{font-size:13px;padding:6px 10px;gap:6px}
  .franja.practica>span:first-of-type{min-width:0}
  .franja.practica .txt-largo{display:none}
  .franja .fila{gap:6px}
  #tut .globo .pista{display:none}
}
.hab .num,.hab .tipo{margin-right:36px}
.btn-musica{min-width:44px}.btn-musica.on{box-shadow:0 0 0 2px #ffb347}
.guia-papel summary{cursor:pointer;list-style:none;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.guia-papel summary::-webkit-details-marker{display:none}
.guia-papel summary:before{content:"▸";transition:transform .2s}
.guia-papel[open] summary:before{transform:rotate(90deg)}
.guia-ciclo{display:flex;gap:12px;align-items:center;margin:12px 0}
.guia-ciclo img{width:70px;border-radius:12px}
.guia-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.guia-cols h3{margin:4px 0}
.guia-cols ol{margin:6px 0;padding-left:20px;line-height:1.5}
.guia-cols code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 4px}
.hoja-mano{margin:8px 0 2px;padding:10px 12px;background:#fffef6 repeating-linear-gradient(#fffef6 0 21px,#cfe0ef 21px 22px);border:1px solid #d8c8b4;border-radius:6px;font-family:"Segoe Print","Comic Sans MS","Bradley Hand",cursive;font-size:14px;line-height:22px;color:#1d3d7a;transform:rotate(-.6deg)}
.hoja-mano .firma{font-style:italic;font-size:17px}
@media (max-width:900px){.logo{display:none}}.reloj{white-space:nowrap}
.bloqueo{max-width:560px;margin:30px auto;text-align:center}
.bloqueo img{width:150px;filter:drop-shadow(0 0 16px rgba(255,170,80,.4))}
.bloqueo p{text-align:left;line-height:1.5}
body.con-bloqueo main{margin-left:auto!important}
body.con-bloqueo .tabs{display:none}

.equipo-pend h3{margin:6px 0}
.codigo-equipo{font-size:40px;font-weight:800;letter-spacing:6px;margin:12px 0;color:var(--accent);font-variant-numeric:tabular-nums}
#segPanel label.check{align-items:flex-start;gap:8px;display:flex;margin:6px 0}
#segPanel table td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
#segPanel input[type=radio],#segPanel input[type=checkbox]{width:auto;min-height:auto;flex:none;margin-top:4px}
.equipo-pend img{width:80px}