/* Estilos compartidos. Misma paleta que la app de diagnóstico (slate + índigo/violeta), sin dependencias externas. */
:root {
  --bg: #f8fafc; --card: #fff; --ink: #1e293b; --muted: #64748b; --line: #e2e8f0; --head: #0f172a;
  --acc: #4f46e5; --acc2: #7c3aed; --accSuave: #eef2ff; --ok: #059669; --okSuave: #ecfdf5;
  --warn: #d97706; --warnSuave: #fffbeb; --bad: #dc2626; --badSuave: #fef2f2; --gris: #cbd5e1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
h2 + p { margin-top: .5rem; }
.muted { color: var(--muted); } .peque { font-size: .8rem; } .centro { text-align: center; }

/* Encabezado fijo con barra de progreso */
.top { position: sticky; top: 0; z-index: 20; background: var(--head); color: #fff; }
.top .dentro { max-width: 760px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: .75rem; }
.top.ancho .dentro { max-width: 1200px; }
.logo { width: 2.4rem; height: 2.4rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.2rem;
  background: linear-gradient(45deg, var(--acc), #8b5cf6); flex: none; }
.top .titulo { font-weight: 700; font-size: .95rem; } .top .sub { font-size: .75rem; color: #94a3b8; }
.puesto { margin-left: auto; text-align: right; line-height: 1.1; }
.puesto b { font-size: 1.6rem; display: block; } .puesto span { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.progreso { height: 6px; background: #1e293b; } .progreso > div { height: 100%; width: 0; transition: width .3s;
  background: linear-gradient(90deg, #6366f1, #8b5cf6); }

main { max-width: 760px; margin: 0 auto; padding: 1rem; }
main.ancho { max-width: 1200px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.kicker { font-size: .72rem; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }

/* Botones y campos */
button { font: inherit; cursor: pointer; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: .65rem 1.1rem; border-radius: .75rem; font-weight: 600; font-size: .9rem; }
.btn:hover:not(:disabled) { background: #f1f5f9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.primario:hover:not(:disabled) { background: #4338ca; }
.btn.alerta { background: var(--badSuave); border-color: #fecaca; color: #b91c1c; }
.btn.chico { padding: .3rem .7rem; font-size: .78rem; border-radius: .5rem; }
.btn.grande { padding: .9rem 1.4rem; font-size: 1rem; }
.fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.fila.sep { justify-content: space-between; }
input[type=text], input[type=number], input[type=password], textarea, select {
  font: inherit; width: 100%; padding: .65rem .8rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; color: var(--ink); }
input:focus, textarea:focus, select:focus, .btn:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 1px; border-color: var(--acc); }
textarea { min-height: 5rem; resize: vertical; }
label { display: block; font-size: .85rem; font-weight: 600; margin: .75rem 0 .3rem; }

/* Avisos */
.aviso { border-radius: .75rem; padding: .75rem 1rem; margin: .75rem 0; font-size: .92rem; border: 1px solid transparent; }
.aviso.info { background: var(--accSuave); border-color: #c7d2fe; }
.aviso.ok { background: var(--okSuave); border-color: #a7f3d0; }
.aviso.warn { background: var(--warnSuave); border-color: #fde68a; }
.aviso.mal { background: var(--badSuave); border-color: #fecaca; }
.banner { position: sticky; top: 0; z-index: 30; background: var(--warn); color: #fff; text-align: center; padding: .4rem; font-size: .85rem; font-weight: 600; }

/* Pasos */
.prompt { position: relative; background: #f1f5f9; border: 1px solid var(--line); border-radius: .75rem; padding: .8rem 1rem; margin: .5rem 0 .9rem;
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .85rem; }
.prompt .btn { display: block; margin: 0 0 .5rem auto; }
.veras { background: var(--okSuave); border: 1px solid #a7f3d0; border-radius: .75rem; padding: .7rem 1rem; margin: 1rem 0; }
.veras b { color: var(--ok); }
.opciones { display: grid; gap: .5rem; margin: .5rem 0; }
.opcion { text-align: left; width: 100%; border: 1px solid var(--line); background: #fff; border-radius: .75rem; padding: .7rem .9rem; font-size: .9rem; }
.opcion:hover { border-color: #818cf8; background: #f8fafc; }
.opcion.sel { border-color: var(--acc); background: var(--accSuave); font-weight: 600; }
.listado { margin: .5rem 0 0; padding-left: 1.2rem; } .listado li { margin: .3rem 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; font-size: .92rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--acc); }
details > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--acc); }

/* Panel docente */
.contadores { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; font-weight: 600; }
.chip.rojo { background: var(--badSuave); border-color: #fecaca; color: #b91c1c; }
.chip.verde { background: var(--okSuave); border-color: #a7f3d0; color: #047857; }
.chip.azul { background: var(--accSuave); border-color: #c7d2fe; color: #4338ca; }
.tabla-scroll { overflow-x: auto; }
table.matriz { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .8rem; }
.matriz th { font-weight: 600; color: var(--muted); padding: .2rem .3rem; text-align: center; white-space: nowrap; }
.matriz th.alum, .matriz td.alum { text-align: left; min-width: 9.5rem; }
.matriz td { height: 2rem; min-width: 2.2rem; border-radius: .4rem; text-align: center; background: #f1f5f9; }
.matriz td.alum { background: none; font-weight: 600; white-space: nowrap; }
.matriz td.hecho { background: #d1fae5; color: #047857; }
.matriz td.aqui { background: #c7d2fe; color: #3730a3; font-weight: 700; }
.matriz td.atascado { background: #fecaca; color: #b91c1c; font-weight: 700; }
.matriz td.atendido { background: #fde68a; color: #92400e; font-weight: 700; }
.matriz td.esperando { background: #bfdbfe; color: #1e40af; font-weight: 700; }
.matriz td.terminado { background: #86efac; color: #14532d; font-weight: 700; }
.matriz td.lento { outline: 2px solid var(--warn); outline-offset: -2px; }
.matriz tr.dormido td:not(.alum) { opacity: .45; }
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gris); margin-right: .35rem; }
.punto.on { background: #22c55e; }
.tiempo { color: var(--muted); font-weight: 500; font-size: .72rem; margin-left: .3rem; }
.ayuda-item { border: 1px solid #fecaca; background: var(--badSuave); border-radius: .85rem; padding: .85rem 1rem; margin: .6rem 0; }
.ayuda-item.atendido { border-color: #fde68a; background: var(--warnSuave); opacity: .85; }
.ayuda-item .como { background: #fff; border: 1px dashed #cbd5e1; border-radius: .6rem; padding: .5rem .7rem; margin: .5rem 0; font-size: .86rem; }
.ayuda-item .nota { white-space: pre-wrap; word-break: break-word; }
.parpadeo { animation: parpadeo 1s ease-in-out 3; }
@keyframes parpadeo { 50% { background: #fecaca; } }
.rojo { color: var(--bad); font-weight: 700; }
.rejilla { display: grid; gap: 1rem; } @media (min-width: 900px) { .rejilla.dos { grid-template-columns: 1.6fr 1fr; align-items: start; } }
table.puestos { width: 100%; border-collapse: collapse; font-size: .85rem; } .puestos td, .puestos th { padding: .3rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.puestos input { padding: .3rem .5rem; border-radius: .5rem; }

/* ===== Plantillas enriquecidas: introducción, teoría y panel de registro ===== */
.herramientas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.callout { border-radius: .75rem; padding: .7rem 1rem; margin: .75rem 0; font-size: .92rem; background: var(--accSuave); border: 1px solid #c7d2fe; }
.callout b { color: var(--acc); }
.producto { background: linear-gradient(135deg, var(--accSuave), #f5f3ff); border: 1px solid #c7d2fe; border-radius: .85rem; padding: .8rem 1rem; margin: 1rem 0; }
.seccion-titulo { font-size: .95rem; font-weight: 800; margin: 1.3rem 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.lista-simple { margin: 0; padding-left: 1.2rem; } .lista-simple li { margin: .35rem 0; }
details.concepto { border: 1px solid var(--line); border-radius: .75rem; margin: .45rem 0; background: #fff; }
details.concepto > summary { padding: .65rem .9rem; color: var(--ink); font-weight: 700; list-style: none; }
details.concepto > summary::-webkit-details-marker { display: none; }
details.concepto > summary::before { content: '▸'; display: inline-block; width: 1.1rem; color: var(--acc); }
details.concepto[open] > summary::before { content: '▾'; }
details.concepto .cuerpo { padding: 0 .9rem .8rem 2rem; font-size: .92rem; }
.ejemplo { background: #f8fafc; border-left: 3px solid var(--acc); border-radius: .4rem; padding: .45rem .7rem; margin-top: .5rem; color: #475569; }
.ruta { counter-reset: paso; list-style: none; margin: 0; padding: 0; }
.ruta li { counter-increment: paso; display: flex; gap: .6rem; align-items: baseline; margin: .3rem 0; font-size: .92rem; }
.ruta li::before { content: counter(paso); flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accSuave); color: var(--acc); font-weight: 700; font-size: .78rem; display: grid; place-items: center; }

.registro { border: 2px solid #c7d2fe; border-radius: 1rem; padding: 1rem; margin: 1rem 0; background: linear-gradient(180deg, #fafaff, #fff); }
.registro > .cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem; margin-bottom: .2rem; }
.registro h3 { font-size: 1rem; }
.registro .opcional { font-size: .72rem; font-weight: 700; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: .1rem .6rem; }
.campo { margin: .9rem 0; }
.campo > label, .campo > .etiqueta { display: block; margin: 0 0 .3rem; font-weight: 600; font-size: .88rem; }
.campo .ayuda { font-size: .78rem; color: var(--muted); margin: .15rem 0 .3rem; }
.campo textarea { min-height: 4.5rem; font-size: .88rem; }
.fichas { display: flex; flex-wrap: wrap; gap: .45rem; }
.ficha { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: .45rem .9rem; font-size: .86rem; font-weight: 600; color: var(--ink); }
.ficha:hover { border-color: #818cf8; }
.ficha.sel { background: var(--acc); border-color: var(--acc); color: #fff; }
.ficha.verde.sel { background: var(--ok); border-color: var(--ok); } .ficha.ambar.sel { background: var(--warn); border-color: var(--warn); } .ficha.rojo.sel { background: var(--bad); border-color: var(--bad); }
.casillas { display: grid; gap: .3rem; }
.casillas label { display: flex; gap: .55rem; align-items: center; font-weight: 400; margin: 0; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; cursor: pointer; }
.casillas label:has(input:checked) { border-color: var(--acc); background: var(--accSuave); }
.casillas input { width: 1.1rem; height: 1.1rem; accent-color: var(--acc); }
.guardado { font-size: .78rem; color: var(--muted); min-height: 1.1rem; }
.guardado.ok { color: var(--ok); } .guardado.mal { color: var(--warn); font-weight: 600; }
.privado { font-size: .78rem; color: #92400e; background: var(--warnSuave); border-radius: .5rem; padding: .3rem .6rem; margin: .4rem 0 0; }

/* Mis respuestas / respuestas en el panel del docente */
.resp-valor { white-space: pre-wrap; word-break: break-word; background: #f8fafc; border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .7rem; font-size: .88rem; }
.resp-campo { margin: .5rem 0; } .resp-campo .et { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.resp-paso { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.pestanas { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.pestana { border: 1px solid var(--line); background: #fff; border-radius: .6rem .6rem 0 0; padding: .5rem 1rem; font-weight: 700; font-size: .88rem; }
.pestana.sel { background: var(--acc); border-color: var(--acc); color: #fff; }
.tarjetas { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta { border: 1px solid var(--line); border-radius: .85rem; padding: .7rem .9rem; background: #fff; }
.tarjeta.vacia { background: #f8fafc; color: var(--muted); }
.tarjeta .quien { display: flex; justify-content: space-between; gap: .4rem; font-weight: 700; margin-bottom: .3rem; }
.insignia { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; }
.insignia.verde { background: #d1fae5; color: #047857; } .insignia.ambar { background: #fde68a; color: #92400e; } .insignia.rojo { background: #fecaca; color: #b91c1c; }
.pista { font-size: .78rem; background: var(--warnSuave); border: 1px dashed #fcd34d; border-radius: .5rem; padding: .35rem .6rem; margin: .4rem 0; }
.referencia { font-size: .8rem; background: #f0fdf4; border: 1px dashed #86efac; border-radius: .5rem; padding: .4rem .6rem; margin: .5rem 0; white-space: pre-wrap; }
.matriz td .marca { font-size: .65rem; margin-left: .1rem; vertical-align: super; }
.matriz td.reg-si { box-shadow: inset 0 -3px 0 #059669; } .matriz td.reg-mas { box-shadow: inset 0 -3px 0 #d97706; } .matriz td.reg-no { box-shadow: inset 0 -3px 0 #dc2626; } .matriz td.reg-n { box-shadow: inset 0 -3px 0 #94a3b8; }
.matriz th.clic, .matriz td.alum.clic { cursor: pointer; } .matriz th.clic:hover, .matriz td.alum.clic:hover { color: var(--acc); text-decoration: underline; }

/* ===== Modo historia: tarjetas a pantalla completa ===== */
body.modo-historia { overflow: hidden; }
body.modo-historia > header.top, body.modo-historia > main { display: none; }
body.modo-historia .banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }
.historia { position: fixed; inset: 0; z-index: 60; height: 100vh; height: 100dvh; display: flex; flex-direction: column; color: var(--ink); overflow: hidden;
  background: radial-gradient(60rem 40rem at 8% -10%, #e0e7ff 0, transparent 60%), radial-gradient(50rem 40rem at 105% 110%, #ede9fe 0, transparent 55%), #f8fafc; }
.h-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; animation: flota 16s ease-in-out infinite alternate; }
.h-blob.a { width: 22rem; height: 22rem; background: #a5b4fc; top: -6rem; right: -5rem; }
.h-blob.b { width: 18rem; height: 18rem; background: #c4b5fd; bottom: 4rem; left: -6rem; animation-delay: -6s; }
@keyframes flota { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2.5rem, 2rem) scale(1.18); } }

.h-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem .5rem; }
.h-titulo { font-weight: 800; font-size: .85rem; color: var(--acc); white-space: nowrap; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
.h-puntos { display: flex; gap: .3rem; flex: 1; justify-content: center; align-items: center; min-width: 0; flex-wrap: wrap; }
.h-punto { width: .55rem; height: .55rem; border-radius: 99px; background: #cbd5e1; transition: width .35s, background .35s, transform .35s; }
.h-punto.hecho { background: var(--acc); }
.h-punto.actual { width: 1.7rem; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.h-contador { font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 3.2rem; text-align: center; }
.h-lado { display: flex; align-items: center; gap: .5rem; }
.h-puesto { font-weight: 800; font-size: .8rem; background: var(--accSuave); color: var(--acc); border-radius: 99px; padding: .2rem .7rem; white-space: nowrap; }
.h-icono-btn { border: 1px solid var(--line); background: #fff; border-radius: 99px; width: 2.3rem; height: 2.3rem; font-size: 1.05rem; }
.h-barra { position: relative; z-index: 2; height: 5px; background: #e2e8f0; margin: 0 1rem; border-radius: 99px; overflow: hidden; }
.h-barra > div { height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); border-radius: 99px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }

.h-escenario { position: relative; flex: 1; overflow: hidden; z-index: 1; }
.h-tarjeta { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
.h-cuerpo { margin: auto; width: min(100%, 900px); padding: 1.5rem 1.4rem 2rem; }
.h-tarjeta.grad { background: linear-gradient(150deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%); color: #fff; }
.h-icono { font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1; margin-bottom: .6rem; display: inline-block; animation: rebota 2.6s ease-in-out infinite; }
@keyframes rebota { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.5rem) rotate(-4deg); } }
.h-kicker { font-size: clamp(.8rem, 2vw, 1rem); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--acc); margin-bottom: .5rem; }
.grad .h-kicker { color: #c7d2fe; }
.h-cuerpo h1 { font-size: clamp(2.1rem, 6.8vw, 4.2rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; outline: none; }
.h-cuerpo p, .h-cuerpo .h-texto { font-size: clamp(1.15rem, 2.9vw, 1.75rem); line-height: 1.45; margin: 0 0 1rem; }
.h-lista { list-style: none; margin: 0; padding: 0; }
.h-lista li { font-size: clamp(1.15rem, 2.9vw, 1.7rem); line-height: 1.4; padding: .7rem 1rem .7rem 3rem; margin: .6rem 0; background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; position: relative; box-shadow: 0 6px 20px rgb(79 70 229 / .07); }
.h-lista li::before { content: '✓'; position: absolute; left: 1rem; top: .65rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accSuave); color: var(--acc); font-weight: 800; font-size: .95rem; display: grid; place-items: center; }
.h-ejemplo { font-size: clamp(1rem, 2.4vw, 1.4rem); background: #fff; border-left: 5px solid var(--acc2); border-radius: .3rem 1rem 1rem .3rem; padding: .9rem 1.1rem; color: #475569; margin: 0 0 1.2rem; box-shadow: 0 6px 20px rgb(79 70 229 / .07); }
.h-producto { font-size: clamp(1rem, 2.4vw, 1.4rem); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .35); border-radius: 1.1rem; padding: .9rem 1.2rem; margin: 1.2rem 0 0; }
.h-callout { font-size: clamp(1rem, 2.3vw, 1.35rem); background: var(--accSuave); border: 1px solid #c7d2fe; border-radius: 1rem; padding: .8rem 1.1rem; margin: 0 0 1.1rem; }
.h-veras { font-size: clamp(1rem, 2.3vw, 1.3rem); background: var(--okSuave); border: 1px solid #a7f3d0; border-radius: 1rem; padding: .8rem 1.1rem; margin: 0 0 1.1rem; }

.h-check { background: #fff; border: 2px solid #c7d2fe; border-radius: 1.4rem; padding: 1.1rem 1.2rem; margin-top: 1.2rem; box-shadow: 0 10px 30px rgb(79 70 229 / .12); }
.h-check .h-q { font-weight: 800; font-size: clamp(1.1rem, 2.7vw, 1.6rem); margin: 0 0 .8rem; }
.h-check .h-etiqueta { font-size: .78rem; font-weight: 800; color: var(--acc2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
.h-op { display: block; width: 100%; text-align: left; padding: .85rem 1.1rem; margin: .5rem 0; border-radius: 1rem; border: 2px solid #c7d2fe; background: #fff; font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 600; color: var(--ink); transition: transform .15s, border-color .2s, background .2s; }
.h-op:hover:not(:disabled) { transform: translateX(4px); border-color: var(--acc); }
.h-op.ok { border-color: var(--ok); background: var(--okSuave); animation: salto .5s; } .h-op.mal { border-color: var(--bad); background: var(--badSuave); animation: sacude .4s; }
.h-op:disabled { cursor: default; }
@keyframes salto { 40% { transform: scale(1.04); } } @keyframes sacude { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.h-feedback { margin-top: .7rem; font-size: clamp(1rem, 2.3vw, 1.25rem); border-radius: .9rem; padding: .75rem 1rem; animation: sube .4s ease both; }
.h-feedback.ok { background: var(--okSuave); border: 1px solid #a7f3d0; } .h-feedback.mal { background: var(--warnSuave); border: 1px solid #fde68a; }

.h-resumen { list-style: none; margin: 1rem 0 0; padding: 0; }
.h-resumen li { display: flex; gap: .7rem; align-items: baseline; font-size: clamp(1.05rem, 2.5vw, 1.45rem); padding: .45rem 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
.h-resumen .tag { margin-left: auto; font-size: .78rem; font-weight: 800; background: rgb(255 255 255 / .2); border-radius: 99px; padding: .1rem .7rem; white-space: nowrap; }

.h-pie { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(248 250 252 / .97) 70%, rgb(248 250 252 / 0)); }
.h-pie .btn { font-size: clamp(1.05rem, 2.5vw, 1.35rem); padding: .85rem 1.6rem; border-radius: 1rem; }
.h-pie .btn.primario { min-width: min(100%, 15rem); box-shadow: 0 10px 24px rgb(79 70 229 / .35); font-weight: 800; }
.h-pie .btn.primario:not(:disabled) { animation: late 2.4s ease-in-out infinite; }
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.h-pie .aviso { width: min(100%, 900px); margin: 0; }
.h-pie .fila.sep { width: min(100%, 900px); margin-top: 0 !important; justify-content: space-between; }

/* Entradas y salidas de las tarjetas */
.h-tarjeta.entra-der { animation: entraDer .5s cubic-bezier(.2, .8, .2, 1) both; } .h-tarjeta.entra-izq { animation: entraIzq .5s cubic-bezier(.2, .8, .2, 1) both; }
.h-tarjeta.sale-izq { animation: saleIzq .4s ease-in both; pointer-events: none; } .h-tarjeta.sale-der { animation: saleDer .4s ease-in both; pointer-events: none; }
.h-tarjeta.entra-fade { animation: aparece .45s ease both; } .h-tarjeta.sale-fade { animation: desaparece .25s ease both; pointer-events: none; }
@keyframes entraDer { from { opacity: 0; transform: translateX(14%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes entraIzq { from { opacity: 0; transform: translateX(-14%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes saleIzq { to { opacity: 0; transform: translateX(-14%) scale(.94); } } @keyframes saleDer { to { opacity: 0; transform: translateX(14%) scale(.94); } }
@keyframes aparece { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } @keyframes desaparece { to { opacity: 0; } }
.h-aparece > * { opacity: 0; animation: sube .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 180ms); }
@keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.h-lista li { opacity: 0; animation: sube .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--j, 0) * 170ms + 450ms); }
.h-confeti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.h-tarjeta.ajustada { overflow: hidden; }   /* el contenido se reduce para caber: no hay desplazamiento */
.h-tarjeta.compacta .h-icono { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .2rem; }
.h-tarjeta.compacta .h-cuerpo > h1 { font-size: clamp(1.7rem, 5vw, 2.8rem); }
.h-check { margin-top: .4rem; }
.h-check h1.h-q { font-size: clamp(1.45rem, 4.4vw, 2.5rem); line-height: 1.18; font-weight: 800; margin: 0 0 1rem; letter-spacing: -.01em; }
.historia .prompt { font-size: clamp(.9rem, 2.1vw, 1.1rem); }
.historia .registro { background: #fff; }
.historia .registro, .historia .aviso { text-align: left; }

@media (max-width: 560px) {
  .h-titulo { display: none; } .h-cuerpo { padding: 1rem 1rem 1.6rem; } .h-pie .btn { padding: .8rem 1.1rem; }
  .h-top { gap: .5rem; padding: .6rem .7rem .4rem; } .h-puntos { flex-wrap: nowrap; gap: .18rem; }
  .h-punto { width: .36rem; height: .36rem; flex: none; } .h-punto.actual { width: 1rem; }
  .h-contador { min-width: 0; } .h-puesto { padding: .15rem .5rem; }
  .h-pie { flex-wrap: nowrap; } .h-pie .btn.primario { min-width: 0; flex: 1; }
}
@media (max-height: 520px) {   /* celular horizontal o ventana baja: más compacto para que no haga falta reducir tanto */
  .h-icono { display: none; }
  .h-cuerpo { padding: .5rem 1.2rem .8rem; }
  .h-cuerpo h1, .h-tarjeta.compacta .h-cuerpo > h1, .h-check h1.h-q { font-size: clamp(1.3rem, 6vh, 2rem); margin-bottom: .5rem; }
  .h-cuerpo p, .h-cuerpo .h-texto, .h-lista li { font-size: clamp(.95rem, 4vh, 1.2rem); margin-bottom: .5rem; }
  .h-top { padding: .35rem .8rem .2rem; } .h-pie { padding: .4rem 1rem calc(.4rem + env(safe-area-inset-bottom)); }
  .h-pie .btn { padding: .5rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .h-blob, .h-icono, .h-pie .btn.primario:not(:disabled) { animation: none !important; }
  .h-tarjeta, .h-aparece > *, .h-lista li, .h-op, .h-feedback { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .h-barra > div, .h-punto { transition: none; }
}
.h-hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 72%; overflow-y: auto; background: #fff; border-radius: 1.2rem 1.2rem 0 0; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgb(15 23 42 / .22); animation: subeHoja .28s ease both; }
.h-hoja:empty { display: none; }
.h-hoja .aviso { margin: 0 auto; width: min(100%, 900px); }
@keyframes subeHoja { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .h-hoja { animation: none; } }
/* Énfasis dentro del texto de las tarjetas: **frase** en actividades.js */
.clave { font-weight: 800; color: #312e81; background: linear-gradient(transparent 60%, rgb(253 224 71 / .6) 60%); border-radius: .15em; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.h-lista li { color: #475569; }
/* «Dónde estamos»: celdas 2×2 */
.h-celdas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.1rem); margin-top: .6rem; }
.h-celda { --tono: #4f46e5; --fondo: #eef2ff; position: relative; overflow: hidden; background: linear-gradient(155deg, #fff 35%, var(--fondo)); border: 1px solid var(--line); border-top: 6px solid var(--tono); border-radius: 1.3rem; padding: clamp(.8rem, 2vw, 1.3rem); box-shadow: 0 10px 28px rgb(15 23 42 / .08); opacity: 0; animation: sube .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--j, 0) * 170ms + 450ms); }
.h-celda::after { content: ''; position: absolute; right: -2.2rem; bottom: -2.2rem; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: var(--tono); opacity: .09; }
.h-celda.c1 { --tono: #d97706; --fondo: #fffbeb; } .h-celda.c2 { --tono: #059669; --fondo: #ecfdf5; } .h-celda.c3 { --tono: #9333ea; --fondo: #faf5ff; }
.h-celda-ico { width: clamp(2.4rem, 5vw, 3.2rem); height: clamp(2.4rem, 5vw, 3.2rem); border-radius: 1rem; background: var(--tono); display: grid; place-items: center; font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .55rem; box-shadow: 0 8px 18px rgb(15 23 42 / .18); }
.h-celda h2 { margin: 0 0 .3rem; font-size: clamp(1.05rem, 2.5vw, 1.55rem); line-height: 1.15; font-weight: 800; color: #1e293b; }
.h-cuerpo .h-celda p { margin: 0; font-size: clamp(.9rem, 1.9vw, 1.2rem); line-height: 1.4; color: #475569; }
@media (max-height: 520px) { .h-celda-ico { display: none; } .h-celda { padding: .5rem .8rem; } }
@media (prefers-reduced-motion: reduce) { .h-celda { animation-duration: .01ms !important; animation-delay: 0ms !important; opacity: 1; } }
/* Pantallas básicas (puesto, espera, Mis respuestas) con el mismo estilo que las tarjetas */
input.h-campo { display: block; width: min(100%, 15rem); margin: .4rem 0 0; text-align: center; font-family: inherit; font-weight: 800; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.1; letter-spacing: .25em; padding: .4rem .6rem .4rem 1rem; border-radius: 1.2rem; border: 3px solid #c7d2fe; background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgb(79 70 229 / .12); outline: none; }
input.h-campo:focus { border-color: var(--acc); box-shadow: 0 0 0 5px rgb(99 102 241 / .22); }
.historia.aux .h-tarjeta.grad .h-icono { filter: drop-shadow(0 8px 14px rgb(0 0 0 / .25)); }
.h-grupo { --tono: #4f46e5; margin: 1.1rem 0 0; padding: .9rem 1rem 1rem; border-radius: 1.3rem; background: #fff; border: 1px solid var(--line); border-left: 7px solid var(--tono); box-shadow: 0 10px 28px rgb(15 23 42 / .07); }
.h-grupo.t1 { --tono: #d97706; } .h-grupo.t2 { --tono: #059669; } .h-grupo.t3 { --tono: #9333ea; }
.h-cuerpo .h-grupo h2 { margin: 0 0 .5rem; font-size: clamp(1.15rem, 2.8vw, 1.6rem); font-weight: 800; color: var(--tono); }
.h-resp { padding: .6rem 0; border-top: 1px dashed var(--line); font-size: clamp(.95rem, 2.2vw, 1.15rem); }
.h-resp-t { font-weight: 800; margin-bottom: .2rem; } .h-resp-t span { font-weight: 500; font-size: .8em; color: var(--muted); }
.h-resp .et { font-size: .8em; font-weight: 700; color: var(--muted); margin-top: .35rem; }
.h-resp .resp-valor { background: var(--accSuave); border-radius: .7rem; padding: .45rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== Biblioteca de cursos ===== */
body.bib { background: radial-gradient(60rem 40rem at 8% -10%, #e0e7ff 0, transparent 60%), radial-gradient(50rem 40rem at 105% 10%, #ede9fe 0, transparent 55%), #f8fafc; background-attachment: fixed; min-height: 100vh; }
.bib-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem 1rem; background: rgb(248 250 252 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bib-marca { display: flex; align-items: center; gap: .45rem; color: var(--acc); text-decoration: none; font-size: 1.05rem; }
.bib-migas { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); overflow: hidden; white-space: nowrap; }
.bib-migas a { color: var(--acc); text-decoration: none; font-weight: 600; } .bib-migas span[aria-current] { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.bib-acceso { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bib-wrap { max-width: 1040px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.bib-chip { display: inline-block; font-size: .78rem; font-weight: 800; padding: .2rem .7rem; border-radius: 99px; background: var(--accSuave); color: var(--acc); }
.bib-chip.doc { background: #fef3c7; color: #92400e; }
.bib-hero { padding: 1.4rem 0 .6rem; animation: sube .5s ease both; }
.bib-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 .6rem; }
.bib-hero p { font-size: clamp(1.02rem, 2.2vw, 1.25rem); color: #475569; max-width: 52rem; margin: 0 0 .7rem; } .bib-hero p.sub { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 700; color: var(--acc); }
.bib-hero.grad { padding: clamp(1.2rem, 4vw, 2.2rem); border-radius: 1.6rem; background: linear-gradient(150deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%); color: #fff; box-shadow: 0 18px 44px rgb(79 70 229 / .28); }
.bib-hero.grad p, .bib-hero.grad p.sub { color: #e0e7ff; } .bib-hero.grad .h-kicker { color: #c7d2fe; } .bib-hero.grad .bib-chip { background: rgb(255 255 255 / .18); color: #fff; }
.bib-ico { font-size: 2.2rem; line-height: 1; } .bib-ico.grande { font-size: clamp(2.8rem, 9vw, 4.2rem); margin-bottom: .3rem; animation: rebota 2.6s ease-in-out infinite; }
.bib-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.bib-sec { margin: 1.8rem 0 .7rem; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; }

.bib-celdas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.bib-celda { --tono: #4f46e5; --fondo: #eef2ff; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink);
  background: linear-gradient(155deg, #fff 35%, var(--fondo)); border: 1px solid var(--line); border-top: 6px solid var(--tono); border-radius: 1.3rem; box-shadow: 0 10px 28px rgb(15 23 42 / .08);
  opacity: 0; animation: sube .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--j, 0) * 90ms + 100ms); transition: transform .2s, box-shadow .2s; }
.bib-celda::after { content: ''; position: absolute; right: -2.2rem; bottom: -2.2rem; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: var(--tono); opacity: .09; }
.bib-celda:hover, .bib-celda:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgb(15 23 42 / .14); }
.bib-celda.t1 { --tono: #d97706; --fondo: #fffbeb; } .bib-celda.t2 { --tono: #059669; --fondo: #ecfdf5; } .bib-celda.t3 { --tono: #9333ea; --fondo: #faf5ff; }
.bib-celda .bib-ico { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--tono); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 18px rgb(15 23 42 / .18); }
.bib-ins { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tono); }
.bib-celda h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; font-weight: 800; } .bib-celda p { margin: 0; color: #475569; font-size: .95rem; }
.bib-pie { margin-top: auto; padding-top: .4rem; font-size: .82rem; color: var(--muted); font-weight: 600; }

.bib-lista { display: flex; flex-direction: column; gap: .55rem; }
.bib-mat { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); text-decoration: none; box-shadow: 0 4px 14px rgb(15 23 42 / .05); transition: transform .15s, border-color .15s; }
a.bib-mat:hover, a.bib-mat:focus-visible { transform: translateX(4px); border-color: var(--acc); }
.bib-mat-ico { font-size: 1.6rem; } .bib-mat-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .bib-mat-txt small { color: var(--muted); font-weight: 500; }
.bib-flecha { color: var(--acc); font-weight: 800; } .bib-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.bib-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgb(15 23 42 / .45); } .bib-modal[hidden] { display: none; } .bib-modal .card { width: min(100%, 26rem); }

.bib-barra { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; }
.bib-barra-t { display: flex; flex-direction: column; flex: 1; min-width: 10rem; } .bib-barra-t small { color: var(--muted); }
.bib-lector { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (min-width: 960px) { .bib-lector { grid-template-columns: 15rem minmax(0, 1fr); } .bib-toc { position: sticky; top: 4.2rem; max-height: calc(100vh - 5rem); overflow-y: auto; } }
.bib-toc { display: flex; flex-direction: column; gap: .15rem; padding: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; font-size: .85rem; }
.bib-toc b { margin-bottom: .3rem; } .bib-toc a { color: #475569; text-decoration: none; padding: .2rem .4rem; border-radius: .5rem; } .bib-toc a:hover { background: var(--accSuave); color: var(--acc); } .bib-toc a.n3 { padding-left: 1.2rem; font-size: .92em; }

.md { background: #fff; border: 1px solid var(--line); border-radius: 1.2rem; padding: clamp(1rem, 3vw, 2rem); line-height: 1.6; overflow-wrap: anywhere; }
.md h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .8rem; } .md h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 1.8rem 0 .6rem; color: var(--acc); padding-bottom: .25rem; border-bottom: 2px solid var(--accSuave); }
.md h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; } .md h4, .md h5 { margin: 1.1rem 0 .3rem; }
.md p { margin: .5rem 0; } .md ul, .md ol { padding-left: 1.4rem; margin: .5rem 0; } .md li { margin: .2rem 0; } .md hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.md blockquote { margin: .8rem 0; padding: .6rem 1rem; border-left: 5px solid var(--acc2); background: var(--accSuave); border-radius: .3rem .8rem .8rem .3rem; } .md blockquote p { margin: .25rem 0; }
.md code { background: #f1f5f9; padding: .1rem .35rem; border-radius: .35rem; font-size: .9em; }
.md-codigo { position: relative; margin: .8rem 0; } .md-codigo .btn { position: absolute; top: .5rem; right: .5rem; }
.md-codigo pre { margin: 0; padding: 1rem; padding-top: 2.6rem; background: #0f172a; color: #e2e8f0; border-radius: .9rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; } .md-codigo pre code { background: none; color: inherit; padding: 0; }
.md-tabla { overflow-x: auto; margin: .8rem 0; border: 1px solid var(--line); border-radius: .8rem; background: #fff; } .md-tabla table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.md-tabla th { background: #1e293b; color: #fff; text-align: left; padding: .5rem .7rem; white-space: nowrap; } .md-tabla td { padding: .45rem .7rem; border-top: 1px solid var(--line); vertical-align: top; } .md-tabla tr:nth-child(even) td { background: #f8fafc; }
.md-tareas { list-style: none; padding-left: .3rem; } .md-caja { margin-right: .4rem; color: var(--acc); }

.dia-visor { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.dia-caja { position: relative; width: 100%; overflow: hidden; border-radius: 1rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 40px rgb(15 23 42 / .14); outline: none; }
.dia-caja:focus-visible { box-shadow: 0 0 0 4px rgb(99 102 241 / .35); } .dia-caja:fullscreen { display: grid; place-items: center; background: #0f172a; border-radius: 0; }
.dia-escena { width: 960px; height: 540px; transform-origin: 0 0; } .dia-caja:fullscreen .dia-escena { transform-origin: center; }
.dia { width: 960px; height: 540px; box-sizing: border-box; padding: 40px 56px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; font-size: 26px; line-height: 1.35; background: #fff; color: #0f172a; animation: aparece .3s ease both; }
.dia h1 { font-size: 1.6em; margin: 0 0 .3em; color: #1e293b; } .dia h2 { font-size: 1.3em; margin: 0 0 .4em; color: #4338ca; border: 0; padding: 0; } .dia h3 { font-size: 1.08em; margin: .4em 0 .2em; }
.dia p, .dia ul, .dia ol { margin: .3em 0; } .dia ul, .dia ol { padding-left: 1.2em; } .dia li { margin: .15em 0; } .dia table { font-size: .78em; width: 100%; } .dia .md-tabla { margin: .4em 0; } .dia th { padding: .25em .5em; } .dia td { padding: .2em .5em; }
.dia code { font-size: .85em; } .dia .md-codigo .btn { display: none; } .dia .md-codigo pre { padding-top: 1rem; font-size: .8em; }
.dia.lead { text-align: center; align-items: center; background: linear-gradient(150deg, #312e81, #4f46e5 55%, #7c3aed); color: #fff; } .dia.lead h1, .dia.lead h2, .dia.lead h3 { color: #fff; } .dia.lead p, .dia.lead li { color: #e0e7ff; }
.dia-ctl { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center; } .dia-cuenta { font-weight: 800; color: var(--muted); min-width: 4rem; text-align: center; }
@media print { .bib-top, .bib-barra, .bib-toc, .bib-modal { display: none !important; } .md { border: 0; padding: 0; } body.bib { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .bib-celda, .bib-hero, .dia { animation: none; opacity: 1; } .bib-ico.grande { animation: none; } }

/* ===== Inicio y entrada de alumnos ===== */
.inicio-hero { margin-top: .5rem; } .inicio-hero h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); }
.inicio-pie { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 2.4rem; font-size: .85rem; color: var(--muted); text-align: center; } .inicio-pie a { color: var(--muted); }
.bib-entrada { margin-top: 1.2rem; padding: 1.2rem 1.4rem; background: #fff; border: 2px solid #c7d2fe; border-radius: 1.3rem; box-shadow: 0 10px 28px rgb(79 70 229 / .1); }
.bib-entrada h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
input.h-campo.corto { width: min(100%, 14rem); font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; padding: .5rem .8rem; margin: 0; }
.bib-celda.estatica { cursor: default; opacity: 1; } .bib-celda.estatica:hover { transform: none; box-shadow: 0 10px 28px rgb(15 23 42 / .08); }
.codigo-curso { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: .18em; padding: .2rem 1rem; background: var(--accSuave); color: var(--acc); border-radius: .9rem; border: 2px dashed #a5b4fc; }
.inicio-hero .btn.primario { background: #fff; color: var(--acc); border-color: #fff; font-weight: 800; }