/* APEGA · Plataforma: hoja compartida por Plataforma.html y las plantillas sueltas.
   Fondos por aprobar, personajes de Secundaria (data-curso="sec"), propuestas apgx- y navegación pr- de la Plataforma. Solo tokens. */
/* ===== Propuestas (apgx-) · piezas nuevas para docente, cuidador y administrador. Solo tokens. Pendientes de aprobación (nacen en wip/). ===== */
.apgx-svg{inline-size:var(--icon-size);block-size:var(--icon-size);flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* MenuRol: menú principal del rol bajo el Encabezado (adultos, computador) */
.apgx-menu{background:var(--surface-card);box-shadow:var(--shadow-rest)}

.apgx-menu__in{display:flex;flex-wrap:wrap;gap:0 var(--space-2);max-inline-size:var(--content-max-wide);margin-inline:auto;padding-inline:var(--pad-x)}

.apgx-menu a{display:inline-flex;align-items:center;min-block-size:var(--touch-kids);padding-inline:var(--space-3);border-block-end:var(--space-1) solid transparent;color:var(--on-card-muted);font:var(--fw-label) var(--fs-body)/var(--lh-label) var(--font-brand);text-decoration:none}

.apgx-menu a:hover{color:var(--on-card-heading)}

.apgx-menu a[aria-current="page"]{color:var(--on-card-heading);font-weight:var(--weight-heavy);border-block-end-color:var(--action)}

/* Encabezado de adulto: herramientas a la derecha */
.apgx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}

.apgx-user{display:flex;align-items:center;gap:var(--space-3);color:var(--on-cosmos-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}

.apgx-user small{display:block;color:var(--on-cosmos-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}

/* Tabla de datos */
.apgx-tablebox{overflow-x:auto;margin-inline:calc(var(--space-6) * -1);padding-inline:var(--space-6)}

.apgx-table{inline-size:100%;border-collapse:collapse;font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand);color:var(--on-card-body)}

.apgx-table th{padding:var(--space-3);text-align:start;color:var(--on-card-muted);font:var(--fw-overline) var(--fs-overline)/var(--lh-overline) var(--font-brand);letter-spacing:var(--ls-overline);text-transform:uppercase;border-block-end:var(--border-control) solid var(--line-subtle);white-space:nowrap}

.apgx-table td{padding:var(--space-3);border-block-end:1px solid var(--line-subtle);vertical-align:middle}

.apgx-table tr.is-attention td{background:var(--surface-current)}

.apgx-cellrow{display:flex;align-items:center;gap:var(--space-2)}

.apgx-muted{color:var(--on-card-muted)}

.apgx-link{color:var(--on-card-action);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);text-decoration:underline;text-underline-offset:var(--space-1);display:inline-flex;align-items:center;min-block-size:var(--touch-min)}

/* Indicador */
.apgx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gut)}

.apgx-kpi{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);border-radius:var(--card-radius);background:var(--surface-card);box-shadow:var(--shadow-rest)}

.apgx-kpi__num{margin:0;color:var(--on-card-heading);font:var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-brand)}

.apgx-kpi__lbl{margin:0;color:var(--on-card-body);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}

.apgx-kpi__note{margin:0;color:var(--on-card-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}

/* Código de clase */
.apgx-code{display:inline-flex;align-items:center;min-block-size:var(--touch-min);padding-inline:var(--space-4);border-radius:var(--radius-tag);background:var(--surface-sunken);color:var(--on-sunken-heading);font:var(--weight-heavy) var(--fs-subtitle)/1 var(--font-mono);letter-spacing:.08em}

/* Interruptor de estación */
.apgx-stations{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}

.apgx-station{display:grid;place-items:center;inline-size:var(--touch-kids);block-size:var(--touch-kids);border-radius:var(--radius-action);font:var(--weight-heavy) var(--fs-label)/1 var(--font-brand)}

.apgx-station--done{background:var(--state-done);color:var(--on-green-heading)}

.apgx-station--on{background:var(--tone);color:var(--on-tone);box-shadow:var(--state-current)}

.apgx-station--off{background:var(--surface-sunken);color:var(--on-sunken-muted);border:var(--border-control) dashed var(--line-control)}

.apgx-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:0;padding:0;list-style:none;color:var(--on-card-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}

.apgx-legend li{display:flex;align-items:center;gap:var(--space-2)}

.apgx-dot{inline-size:var(--space-4);block-size:var(--space-4);border-radius:var(--radius-action)}

/* Campo de formulario */
.apgx-field{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}

.apgx-field label{color:var(--on-card-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}

.apgx-input{box-sizing:border-box;min-block-size:var(--touch-min);padding:var(--space-2) var(--space-4);border:var(--border-control) solid var(--line-control);border-radius:var(--radius-tag);background:var(--surface-card);color:var(--on-card-body);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand)}

textarea.apgx-input{min-block-size:calc(var(--space-24) * 1.5);resize:vertical}

.apgx-hint{margin:0;color:var(--on-card-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}

.apgx-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4)}

.apgx-filters .apgx-field{flex:1 1 180px}

/* Lista de elementos */
.apgx-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}

.apgx-list>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding-block:var(--space-3);border-block-end:1px solid var(--line-subtle)}

.apgx-list>li:last-child{border-block-end:0}

.apgx-list p{margin:0}

.apgx-tile{display:grid;place-items:center;inline-size:var(--touch-min);block-size:var(--touch-min);border-radius:var(--radius-tag);background:var(--tone,var(--surface-sunken));color:var(--on-tone,var(--on-sunken-heading))}

.apgx-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}

.apgx-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}

.apgx-state{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--fw-label) var(--fs-caption)/var(--lh-caption) var(--font-brand)}

.apgx-state--ok{color:var(--on-card-success)}

.apgx-state--warn{color:var(--on-card-danger)}

.apgx-state--muted{color:var(--on-card-muted)}

/* Mensaje */
.apgx-msg{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-surface);background:var(--surface-card);box-shadow:var(--shadow-rest)}

.apgx-msg--new{box-shadow:var(--shadow-rest),var(--state-current)}

.apgx-msg p{margin:0}

/* ===== Cuidador en celular ===== */
.apgx-phone-host{min-height:100vh;background:var(--bg-primary)}
.apgx-phone{box-sizing:border-box;display:flex;flex-direction:column;min-block-size:100vh;background:var(--bg-primary);color:var(--text-body);font-family:var(--font-brand)}

.apgx-phead{flex:none;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3) max(var(--pad-x),calc((100% - var(--apgx-col)) / 2)) var(--space-6);background:var(--surface-cosmos)}

.apgx-phead .apg-logo{block-size:40px;margin:0;min-inline-size:0}

.apgx-phead__title{margin:0;color:var(--on-cosmos-heading)}

.apgx-phead__over{margin:0;color:var(--on-cosmos-muted)}

.apgx-child{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--touch-min);padding:0 var(--space-4) 0 var(--space-1);border:var(--border-control) solid var(--on-cosmos-muted);border-radius:var(--radius-action);background:transparent;color:var(--on-cosmos-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}

.apgx-child .apg-avatar{inline-size:36px;block-size:36px;font-size:var(--fs-label)}

.apgx-pbody{flex:1 1 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-4);inline-size:100%;max-inline-size:calc(var(--apgx-col) + 2 * var(--pad-x));margin-inline:auto;padding:var(--space-6) var(--pad-x) var(--space-12)}

.apgx-pbody>*{margin:0}

.apgx-tabbar{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:var(--space-2) max(var(--space-2),calc((100% - var(--apgx-col)) / 2)) var(--space-3);list-style:none;background:var(--surface-cosmos)}

.apgx-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-block-size:var(--touch-kids);border-radius:var(--radius-tag);color:var(--on-cosmos-muted);font:var(--fw-label) var(--fs-caption)/var(--lh-caption) var(--font-brand);text-decoration:none}

.apgx-tabbar a[aria-current="page"]{color:var(--on-cosmos-heading)}

.apgx-tabbar a[aria-current="page"] .apgx-svg{color:var(--highlight)}

.apgx-steps{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding-inline-start:var(--space-6);color:var(--on-card-body);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand)}

.apgx-scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-1);margin:0;padding:0;list-style:none}

.apgx-scale button{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-1) 0;border:var(--border-control) solid transparent;border-radius:var(--radius-tag);background:transparent;color:var(--on-card-body);font:var(--fw-caption) 11px/1.2 var(--font-brand);cursor:pointer}

.apgx-scale button[aria-pressed="true"]{border-color:var(--on-card-heading);background:var(--surface-current);font-weight:var(--weight-bold)}

.apgx-scale .apg-planeta{inline-size:40px;block-size:40px}

.apgx-scale-swatch{inline-size:40px;block-size:40px;border-radius:var(--radius-action);background:var(--tone)}


/* Plataforma · piezas propias (pr-). Solo tokens del sistema. */
html,body{margin:0;background:var(--bg-primary)}
#pr-app{min-height:100vh}
.pr-cosmos{min-height:100vh;background:var(--bg-cosmos);color:var(--on-cosmos-body);display:flex;justify-content:center;padding:var(--space-12) var(--space-6);box-sizing:border-box}
.pr-light{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:var(--space-12) var(--space-6);box-sizing:border-box;background:var(--bg-primary)}
.pr-login{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);inline-size:min(100%,960px);text-align:center}
.pr-login--narrow{inline-size:min(100%,640px)}
.pr-logo{transform:scale(1.4);margin-block-end:var(--space-4)}
.pr-over{margin:0;color:var(--on-cosmos-muted)}
.pr-h1{margin:0;color:var(--on-cosmos-heading)}
.pr-h2{margin:0;color:var(--on-cosmos-heading)}
.pr-ink{margin:0;color:var(--text-heading)}
.pr-muted{margin:0;color:var(--text-muted)}
.pr-cosmos .pr-muted{color:var(--on-cosmos-muted)}
.pr-error{margin:0;color:var(--on-card-danger)}
.pr-cosmos .pr-error{color:var(--on-cosmos-heading);background:var(--danger);padding:var(--space-2) var(--space-4);border-radius:var(--radius-tag)}
.pr-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);inline-size:100%}
.pr-choice{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-6);border-radius:var(--radius-container);background:var(--surface-card);color:var(--on-card-body);text-decoration:none;box-shadow:var(--shadow-rest);transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out)}
.pr-choice:hover{transform:translateY(var(--state-hover-lift));box-shadow:var(--shadow-hover)}
.pr-choice:focus-visible{outline:var(--focus-width) solid var(--focus-color-cosmos);outline-offset:var(--focus-offset)}
.pr-choice .apg-title{color:var(--on-card-heading)}
.pr-choice__ill{inline-size:160px;block-size:160px;background:center/contain no-repeat}
.pr-choice__ill--astro{background-image:url(assets/personajes/astro-saludando.png)}
.pr-choice__ill--adultos{background-image:url(assets/personajes/adultos/docente.png)}
.pr-link-dark{color:var(--on-cosmos-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-link-dark:focus-visible{outline:var(--focus-width) solid var(--focus-color-cosmos);outline-offset:var(--focus-offset)}
.pr-toprow{display:flex;justify-content:space-between;align-items:center;inline-size:100%}
.pr-step{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);inline-size:100%;padding:var(--space-8) var(--space-6);border-radius:var(--radius-container);background:var(--surface-cosmos-raised);box-sizing:border-box}
.pr-code{inline-size:min(100%,360px);box-sizing:border-box;text-align:center;text-transform:uppercase;letter-spacing:.12em;font:var(--weight-heavy) var(--fs-title)/1.2 var(--font-brand);padding:var(--space-4);border:2px solid var(--line-control);border-radius:var(--radius-surface);background:var(--surface-card);color:var(--on-card-heading)}
.pr-code:focus-visible{outline:var(--focus-width) solid var(--focus-color-cosmos);outline-offset:var(--focus-offset)}
.pr-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.pr-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-surface);border:2px solid var(--on-cosmos-muted);background:transparent;color:var(--on-cosmos-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);cursor:pointer}
.pr-chip small{font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand);color:var(--on-cosmos-muted)}
.pr-chip:hover,.pr-chip[aria-pressed="true"]{background:var(--highlight);border-color:var(--highlight);color:var(--on-yellow-heading)}
.pr-chip:hover small,.pr-chip[aria-pressed="true"] small{color:var(--on-yellow-body)}
.pr-chip:focus-visible{outline:var(--focus-width) solid var(--focus-color-cosmos);outline-offset:var(--focus-offset)}
.pr-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);inline-size:100%}
.pr-name{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-surface);border:0;background:var(--surface-card);color:var(--on-card-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);cursor:pointer;min-block-size:var(--touch-kids)}
.pr-name:hover{box-shadow:var(--shadow-hover)}
.pr-name:focus-visible{outline:var(--focus-width) solid var(--focus-color-cosmos);outline-offset:var(--focus-offset)}
a[aria-disabled="true"]{opacity:var(--state-disabled-opacity);pointer-events:none}
.pr-card{display:flex;flex-direction:column;gap:var(--space-4);inline-size:min(100%,480px)}
.pr-hr{border:0;border-block-start:1px solid var(--line-subtle);margin:0;inline-size:100%}
.pr-accounts{display:flex;flex-direction:column;gap:var(--space-2)}
.pr-account{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line-subtle);border-radius:var(--radius-surface);background:var(--surface-card);text-align:start;cursor:pointer;font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand);color:var(--on-card-body)}
.pr-account:hover{border-color:var(--line-control);background:var(--surface-sunken)}
.pr-account:focus-visible{outline:var(--focus-width) solid var(--focus-color-light);outline-offset:var(--focus-offset)}
.pr-account b{display:block;color:var(--on-card-heading)}
.pr-account small{color:var(--on-card-muted)}
.pr-toast{position:fixed;inset-block-end:var(--space-4);inset-inline-end:var(--space-4);z-index:51;padding:var(--space-3) var(--space-4);border-radius:var(--radius-surface);background:var(--surface-cosmos);color:var(--on-cosmos-heading);box-shadow:var(--shadow-overlay);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-step[hidden],.pr-error[hidden],.pr-toast[hidden],.pr-cuenta[hidden]{display:none!important}
.pr-cosmos .pr-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.pr-week__day{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border-radius:var(--radius-surface);background:var(--surface-sunken);color:var(--on-sunken-body)}
.pr-week__day b{color:var(--on-sunken-heading);font:var(--fw-subtitle) var(--fs-subtitle)/var(--lh-subtitle) var(--font-brand)}
.pr-week__day .apg-overline{color:var(--on-sunken-muted)}
.pr-week__day--class{background:var(--surface-current);color:var(--on-current-body)}
.pr-week__day--class b{color:var(--on-current-heading)}
.pr-week__day--class .apg-overline{color:var(--on-current-muted)}
.pr-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.pr-form__wide{grid-column:1/-1}
.pr-flabel{font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);color:var(--on-card-heading)}
.pr-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.pr-steps__item{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-surface);background:var(--surface-card);box-shadow:var(--shadow-rest);color:var(--on-card-body)}
.pr-steps__item>div{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}
.pr-steps__item b{color:var(--on-card-heading)}
.pr-steps__n{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:var(--radius-action);background:var(--surface-sunken);color:var(--on-sunken-heading);font:var(--weight-heavy) var(--fs-label)/1 var(--font-brand)}
.pr-steps__item--done .pr-steps__n{background:var(--state-done);color:var(--on-green-heading)}
.pr-steps__item--current{background:var(--surface-current);color:var(--on-current-body)}
.pr-steps__item--current .pr-steps__n{background:var(--highlight);color:var(--on-yellow-heading)}
.pr-drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4);border:2px dashed var(--line-control);border-radius:var(--radius-surface);background:var(--surface-sunken);color:var(--on-sunken-body);text-align:center;cursor:pointer;font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-drop small{color:var(--on-sunken-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}
.pr-drop:focus-visible{outline:var(--focus-width) solid var(--focus-color-light);outline-offset:var(--focus-offset)}
.pr-swatches{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.pr-swatch{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--on-card-body);font:var(--fw-label) var(--fs-caption)/var(--lh-caption) var(--font-brand)}
.pr-swatch i{inline-size:28px;block-size:28px;border-radius:var(--radius-action);background:var(--sw);box-shadow:inset 0 0 0 1px var(--line-subtle)}
.pr-card__body{display:flex;flex-direction:column;gap:var(--space-4)}
.pr-card__body[hidden]{display:none}
.pr-kid{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);margin-block-end:var(--space-3);border-radius:var(--radius-surface);background:var(--surface-card);box-shadow:var(--shadow-rest);color:var(--on-card-body);text-decoration:none}
.pr-kid>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.pr-kid b{color:var(--on-card-heading);font:var(--fw-subtitle) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-kid small{color:var(--on-card-muted)}
.pr-kid[aria-current="true"]{box-shadow:0 0 0 3px var(--action)}
.pr-kid:focus-visible{outline:var(--focus-width) solid var(--focus-color-light);outline-offset:var(--focus-offset)}
.pr-chat{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-4);padding:0;list-style:none}
.pr-chat__msg{max-inline-size:80%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-container);background:var(--surface-sunken);color:var(--on-sunken-body)}
.pr-chat__msg p{margin:var(--space-1) 0 0}
.pr-chat__msg .apg-overline{color:var(--on-sunken-muted)}
.pr-chat__msg--yo{align-self:flex-end;background:var(--action);color:var(--on-action-body)}
.pr-chat__msg--yo .apg-overline{color:var(--on-action-body)}


.pr-withmenu{display:flex;flex-direction:column;min-height:100vh}
.pr-withmenu>#root{display:contents}
.pr-withmenu>.apgx-menu{order:1}
.pr-withmenu>#root>*{order:2}
.pr-withmenu>#root>header{order:0}

/* Secundaria (12 a 13 años): mismo contenido, set de personajes adolescente del manual. «rabia» no existe en el set de 12 a 13 y conserva la ilustración actual. */
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-agachada-pensando"]{background-image:url("assets/personajes/secundaria/lucia-pensando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-amor"]{background-image:url("assets/personajes/secundaria/lucia-amor.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-ansiedad"]{background-image:url("assets/personajes/secundaria/lucia-ansiedad.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-astronauta"]{background-image:url("assets/personajes/secundaria/lucia-de-pie.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-bandera"]{background-image:url("assets/personajes/secundaria/lucia-victoria.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-celebrando"]{background-image:url("assets/personajes/secundaria/lucia-celebrando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-de-pie"]{background-image:url("assets/personajes/secundaria/lucia-de-pie.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-felicidad"]{background-image:url("assets/personajes/secundaria/lucia-celebrando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-flotando"]{background-image:url("assets/personajes/secundaria/lucia-caminando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-leyendo"]{background-image:url("assets/personajes/secundaria/lucia-sentada.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-mano-arriba"]{background-image:url("assets/personajes/secundaria/lucia-saludando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-miedo"]{background-image:url("assets/personajes/secundaria/lucia-miedo.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-pensando"]{background-image:url("assets/personajes/secundaria/lucia-pensando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-saludando"]{background-image:url("assets/personajes/secundaria/lucia-saludando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="lucia-tristeza"]{background-image:url("assets/personajes/secundaria/lucia-tristeza.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-agachado-pensando"]{background-image:url("assets/personajes/secundaria/santiago-pensando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-amor"]{background-image:url("assets/personajes/secundaria/santiago-amor.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-ansiedad-alterna"]{background-image:url("assets/personajes/secundaria/santiago-ansiedad.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-ansiedad"]{background-image:url("assets/personajes/secundaria/santiago-ansiedad.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-astronauta"]{background-image:url("assets/personajes/secundaria/santiago-de-pie.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-bandera"]{background-image:url("assets/personajes/secundaria/santiago-victoria.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-celebrando"]{background-image:url("assets/personajes/secundaria/santiago-celebrando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-de-pie"]{background-image:url("assets/personajes/secundaria/santiago-de-pie.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-felicidad"]{background-image:url("assets/personajes/secundaria/santiago-celebrando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-flotando"]{background-image:url("assets/personajes/secundaria/santiago-caminando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-mano-arriba"]{background-image:url("assets/personajes/secundaria/santiago-saludando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-miedo"]{background-image:url("assets/personajes/secundaria/santiago-miedo.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-pensando"]{background-image:url("assets/personajes/secundaria/santiago-pensando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-presentando"]{background-image:url("assets/personajes/secundaria/santiago-presentando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-saludando"]{background-image:url("assets/personajes/secundaria/santiago-saludando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-telescopio"]{background-image:url("assets/personajes/secundaria/santiago-pensando.png")}
#pr-app[data-curso="sec"] .apg-personaje[data-name="santiago-tristeza"]{background-image:url("assets/personajes/secundaria/santiago-tristeza.png")}

/* Fondos del sistema (Ilustración · Fondos): cielo azul y planeta verde oficiales; atardecer, lluvia de meteoros y desierto dorado del curso, por aprobar. Texto encima: scrim cosmos-950 55 % + white. */
.apg-encabezado--bg-cielo,.apg-fondo--cielo,.pr-cosmos--cielo{background:linear-gradient(var(--scrim-illustration),var(--scrim-illustration)),url("assets/fondos/fondo-cielo-azul.png") center/cover}
.apg-encabezado--bg-planeta,.apg-fondo--planeta,.pr-cosmos--planeta{background:linear-gradient(var(--scrim-illustration),var(--scrim-illustration)),url("assets/fondos/fondo-planeta-verde.png") center/cover}
.apg-encabezado--bg-atardecer,.apg-fondo--atardecer,.pr-cosmos--atardecer{background:linear-gradient(var(--scrim-illustration),var(--scrim-illustration)),url("assets/fondos/fondo-atardecer.png") center/cover}
.apg-encabezado--bg-meteoros,.apg-fondo--meteoros,.pr-cosmos--meteoros{background:linear-gradient(var(--scrim-illustration),var(--scrim-illustration)),url("assets/fondos/fondo-lluvia-meteoros.png") center/cover}
.apg-encabezado--bg-desierto,.apg-fondo--desierto,.pr-cosmos--desierto{background:linear-gradient(var(--scrim-illustration),var(--scrim-illustration)),url("assets/fondos/fondo-desierto-dorado.png") center/cover}

/* ===== Plataforma · pulido (nov 2026) ===== */
:root{--apgx-col:640px}
.apgx-screen{min-block-size:100vh;background:var(--bg-primary)}
.apgx-pcard{padding:var(--space-4);gap:var(--space-3)}
.apgx-dias4{grid-template-columns:repeat(4,minmax(0,1fr))}
.apgx-mchev{display:inline-flex;color:var(--on-cosmos-muted)}
.apgx-table th[scope="row"]{text-transform:none;letter-spacing:normal;font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);color:var(--on-card-heading)}
.apgx-hint--xs{font-size:var(--fs-overline)}
.apgx-hint--body{color:var(--on-card-body);font-size:var(--fs-label);font-weight:var(--fw-body)}
.apgx-tile__txt{font:var(--weight-heavy) var(--fs-label)/1 var(--font-brand)}
.apgx-tile__txt--xs{font-size:var(--fs-overline)}
.apgx-input--tall{min-block-size:calc(var(--space-24) * 2)}
.apgx-code--sm{min-block-size:var(--space-8);padding-inline:var(--space-2);font-size:var(--fs-label)}
.apgx-avatar-sm{inline-size:36px;block-size:36px;font-size:var(--fs-label)}
.apgx-field--wide{flex:0 1 420px}
.apgx-field--grow{flex:2 1 280px}
.apgx-dot--done{background:var(--state-done)}
.apgx-dot--on{background:var(--mission-nebulosa);box-shadow:var(--state-current)}
.apgx-dot--off{box-sizing:border-box;background:var(--surface-sunken);border:var(--border-control) dashed var(--line-control)}
.apgx-u-m0{margin:0}
.apgx-u-ink{color:var(--text-heading)}
.apgx-u-muted{color:var(--text-muted)}
.apgx-u-push{margin-block-start:auto}
.apgx-u-end{justify-content:flex-end}
.apgx-u-center{text-align:center}
.apgx-u-gap1{gap:var(--space-1)}
.apgx-u-gap2{gap:var(--space-2)}
.apgx-u-gap3{gap:var(--space-3)}
.apgx-u-gap4{gap:var(--space-4)}
.apgx-u-maxnone{max-inline-size:none}
.apgx-u-block{box-sizing:border-box;inline-size:100%;justify-content:center}
.apgx-u-col1,.apgx-u-col2{display:flex;flex-direction:column;gap:var(--space-1);min-inline-size:0}
.apgx-u-col2{gap:var(--space-2)}
.apgx-u-ccol{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center}
.apgx-u-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.apgx-u-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--gut)}
.apgx-u-auto-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:var(--space-4)}
.apgx-u-icon-muted{display:inline-flex;color:var(--on-card-muted)}
.apgx-u-label-sm{font-size:var(--fs-caption)}
.apgx-u-wcol{min-inline-size:180px}
.apgx-u-tight{padding-inline:var(--space-3)}
.apgx-u-48{inline-size:var(--touch-min);block-size:var(--touch-min)}

/* Ninguna columna de la retícula se estira por su contenido (tablas anchas hacen scroll dentro de su caja). */
.apg-grid>*,.apg-stack>*,.apgx-tablebox{min-inline-size:0}
.apgx-tablebox{position:relative;max-inline-size:calc(100% + 2 * var(--space-6))}
/* Descargables: el botón baja de línea antes que salirse de la tarjeta. */
.apg-descargable{flex-wrap:wrap;min-inline-size:0}
.apg-descargable>div{flex:1 1 140px;min-inline-size:0;overflow-wrap:anywhere}

/* Cuenta del estudiante (desde el avatar del Encabezado) */
.pr-cuenta{position:absolute;inset-block-start:calc(var(--top) + var(--space-2));inset-inline-end:var(--pad-x);z-index:60;display:flex;flex-direction:column;gap:var(--space-3);inline-size:min(320px,calc(100vw - 2 * var(--pad-x)));box-sizing:border-box;padding:var(--space-4);border-radius:var(--radius-surface);background:var(--surface-card);box-shadow:var(--shadow-overlay)}
.pr-cuenta__who{display:flex;flex-direction:column;gap:var(--space-1);margin:0;color:var(--on-card-heading);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-cuenta__who small{color:var(--on-card-muted);font:var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-brand)}
.pr-cuenta .apg-boton{justify-content:center}

/* Menú del rol: una sola fila; en pantallas angostas se desliza en horizontal. */
.apgx-menu__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.apgx-menu__in::-webkit-scrollbar{display:none}
.apgx-menu a{flex:none;white-space:nowrap}
/* Cuidador: el menú inferior queda fijo mientras se desplaza la página; los 4 días caben en una fila. */
.apgx-phone>nav{position:sticky;inset-block-end:0;z-index:5}
.apgx-phone .apg-dias{grid-template-columns:repeat(4,minmax(0,1fr))}
.apgx-phone .apg-dias__dia{padding-inline:var(--space-1);white-space:nowrap}
/* Tablas: nombres y etiquetas en una línea; la caja hace scroll si no caben. */
.apgx-table th[scope="row"],.apgx-table td:first-child,.apgx-table .apg-chip{white-space:nowrap}
/* Mis insignias: dónde se gana cada pieza */
.pr-piezas{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pr-piezas li{display:flex;flex-direction:column;gap:var(--space-1);padding-block:var(--space-2);border-block-end:1px solid var(--line-subtle);color:var(--on-card-body);font:var(--fw-body) var(--fs-body-kids)/var(--lh-body) var(--font-brand)}
.pr-piezas li:last-child{border-block-end:0}
.pr-piezas b{color:var(--on-card-heading);font-weight:var(--weight-heavy)}

/* Encabezado del estudiante sobre ilustración: el velo cosmos-950 al 55 % cubre solo la zona del texto (logo, título y meta;
   en móvil, todo el ancho) y se aclara hacia la derecha, donde están Escuchar, el avatar y el personaje. Cada fondo se encuadra
   en su parte característica (horizonte, planeta, meteoros). */
.apg-encabezado[class*="apg-encabezado--bg-"]:not(.apg-encabezado--bg-nebulosa){--apgx-velo:linear-gradient(90deg,var(--scrim-illustration) 0,var(--scrim-illustration) max(48%,600px),var(--scrim-illustration-soft) 100%)}
.apg-encabezado--bg-cielo{background:var(--apgx-velo),url("assets/fondos/fondo-cielo-azul.png") center 45%/cover}
.apg-encabezado--bg-planeta{background:var(--apgx-velo),url("assets/fondos/fondo-planeta-verde.png") center 78%/cover}
.apg-encabezado--bg-atardecer{background:var(--apgx-velo),url("assets/fondos/fondo-atardecer.png") center 62%/cover}
.apg-encabezado--bg-meteoros{background:var(--apgx-velo),url("assets/fondos/fondo-lluvia-meteoros.png") center 25%/cover}
.apg-encabezado--bg-desierto{background:var(--apgx-velo),url("assets/fondos/fondo-desierto-dorado.png") center 55%/cover}

/* Ingreso de adultos y recuperar contraseña: formulario + panel de roles (en móvil el panel baja). */
.pr-auth{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));min-block-size:100vh;background:var(--bg-primary)}
.pr-auth__main{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-6) var(--pad-x) var(--space-12);background:var(--surface-card)}
.pr-auth__top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.pr-auth__back{display:inline-flex;align-items:center;gap:var(--space-1);min-block-size:var(--touch-min);color:var(--on-card-action);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);text-decoration:none}
.pr-auth__back:hover{text-decoration:underline}
.pr-auth__form{display:flex;flex-direction:column;gap:var(--space-4);inline-size:min(100%,420px);margin-inline:auto;margin-block:auto}
.pr-auth__fields{display:flex;flex-direction:column;gap:var(--space-4)}
.pr-auth__labelrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2)}
.pr-auth__labelrow .apgx-link{min-block-size:0;font-size:var(--fs-caption)}
.pr-auth__pass{position:relative;display:flex}
.pr-auth__pass .apgx-input{flex:1;min-inline-size:0;padding-inline-end:calc(var(--space-16) + var(--space-4))}
.pr-auth__eye{position:absolute;inset-block:var(--space-1);inset-inline-end:var(--space-1);padding-inline:var(--space-3);border:0;border-radius:var(--radius-tag);background:transparent;color:var(--on-card-action);font:var(--fw-label) var(--fs-caption)/1 var(--font-brand);cursor:pointer}
.pr-auth__eye:hover{background:var(--surface-sunken)}
.pr-auth__eye:focus-visible{outline:var(--focus-width) solid var(--focus-color-light);outline-offset:0}
.apgx-input[aria-invalid="true"]{border-color:var(--danger)}
.pr-auth__err{margin:0;color:var(--on-card-danger);font:var(--fw-label) var(--fs-caption)/var(--lh-caption) var(--font-brand)}
.pr-auth__err[hidden],.pr-auth__alert[hidden]{display:none}
.pr-auth__alert{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-tag);background:var(--surface-current);color:var(--on-current-body);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand)}
.pr-auth__demo{border-block-start:1px solid var(--line-subtle);padding-block-start:var(--space-4)}
.pr-auth__demo summary{display:flex;align-items:center;min-block-size:var(--touch-min);color:var(--on-card-action);font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-brand);cursor:pointer}
.pr-auth__demo[open] summary{margin-block-end:var(--space-2)}
.pr-auth__help{display:flex;flex-direction:column;gap:var(--space-2)}
.pr-auth__help .apgx-link{min-block-size:0}
.pr-auth__panel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:var(--space-12) var(--pad-x) var(--space-24);background:var(--bg-cosmos);color:var(--on-cosmos-body)}
.pr-auth__panel>*{max-inline-size:480px}
.pr-auth__roles{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-2) 0 0;padding:0;list-style:none}
.pr-auth__roles li{display:flex;align-items:flex-start;gap:var(--space-3);color:var(--on-cosmos-body);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand)}
.pr-auth__roles b{display:block;color:var(--on-cosmos-heading);font-weight:var(--weight-heavy)}
.pr-auth__people{position:absolute;inset-block-end:0;inset-inline-end:var(--space-6);display:flex;align-items:flex-end;gap:var(--space-2);inline-size:min(46%,260px)}
.pr-auth__people .apg-personaje{flex:1}
.pr-auth .pr-card__body[hidden]{display:none}
.pr-auth__check{display:flex;align-items:center;gap:var(--space-3);min-block-size:var(--touch-min);color:var(--on-card-body);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-brand);cursor:pointer}
.pr-auth__check input{inline-size:var(--icon-size);block-size:var(--icon-size);margin:0;accent-color:var(--action)}
.pr-auth__people{inline-size:min(50%,320px)}