/* app.css — portal de alumnas y panel de Evangelina. Mobile-first, misma dirección A. */

body.portal, body.admin { min-height: 100svh; }
h1, h2, h3 { text-transform: uppercase; font-weight: 600; }
p { color: var(--texto-suave); }
.etiqueta { margin: 0 0 .4rem; }
.chico { font-size: var(--t-small); margin: 0; }
.cargando { padding: 4rem var(--s-borde); text-align: center; }

.link { background: none; border: 0; padding: .4rem 0; font: 500 .875rem var(--f-texto); color: var(--texto); cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: .25em; }
.link:hover { text-decoration-color: var(--acento); }

/* ── formularios ── */
.campo { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.campo > span:first-child { font: 500 .6875rem var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea, #q {
  width: 100%; background: var(--fondo-alt); color: var(--texto); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  padding: .85rem .9rem; font: 400 1rem/1.5 var(--f-texto); transition: border-color var(--dur-rapida); }
.campo textarea { resize: vertical; min-height: 5rem; font-size: .9375rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus, #q:focus { outline: none; border-color: var(--acento); }
.campo input[type=date] { color-scheme: dark; }
.campo__clave { position: relative; display: block; }
.campo__clave input { padding-right: 5rem; }
.ver { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--texto-suave); font: 500 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: .6rem; cursor: pointer; }
.error { color: oklch(78% .16 25); font-size: var(--t-small); margin: 0 0 1rem; }
.check-l { display: flex; gap: .6rem; align-items: center; font-size: .9375rem; margin-bottom: 1.6rem; }
.check-l input { accent-color: oklch(70% .235 350); width: 1.1rem; height: 1.1rem; }

/* ── login ── */
.login { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 1.5rem var(--s-borde); max-width: 30rem; margin-inline: auto; }
.login__caja { align-self: center; padding: 2rem 0; }
.login__tit { font-size: clamp(2.6rem, 11vw, 3.8rem); line-height: .92; letter-spacing: -.02em; margin: 0 0 .8rem; }
.login__sub { margin: 0 0 2rem; }
.login .btn { width: 100%; margin-top: .4rem; }
.demo-hint { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.login__pie { font-size: var(--t-small); text-align: center; margin: 0; }

/* ── cabecera común ── */
.top { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--s-borde); height: 4rem; border-bottom: 1px solid var(--linea); }
.top__izq, .top__der { display: flex; align-items: center; gap: 1rem; }

.tag { display: inline-block; font: 500 .625rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .35rem .5rem; border: 1px solid var(--linea-fuerte); color: var(--texto-suave); align-self: start; }
.tag--ya { border-color: var(--acento); color: var(--texto); }
.tag--off { opacity: .6; }

/* ── portal ── */
.vista { max-width: 40rem; margin-inline: auto; padding: 2rem var(--s-borde) 7rem; }
.saludo { font-size: clamp(2.8rem, 12vw, 4.6rem); line-height: .9; letter-spacing: -.025em; margin: 0 0 1.6rem; }
.h-card { font-size: 1.7rem; line-height: 1; letter-spacing: -.01em; margin: 0 0 .8rem; }
.tarjeta { border: 1px solid var(--linea-fuerte); padding: 1.3rem; margin-bottom: 1rem; background: var(--fondo); }
.tarjeta--linea { border-color: var(--linea); background: transparent; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta .btn { margin-top: .6rem; }
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fila .etiqueta { margin: 0; }
.grande { font: 600 1.4rem/1 var(--f-display); text-transform: uppercase; }
.prog { color: var(--texto); }
.prox { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; margin: .5rem 0 .8rem; }
.prox p { margin: 0; color: var(--texto); }
.hora { font: 700 2.6rem/.85 var(--f-display); letter-spacing: -.01em; color: var(--acento); }
.cardio { color: var(--texto); margin: 0; }

.ejs { list-style: none; margin: .8rem 0 .4rem; padding: 0; }
.ej { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--linea); color: var(--texto); padding: .9rem 0; font: 400 .9375rem/1.35 var(--f-texto); cursor: pointer; }
.ejs li:last-child .ej { border-bottom: 1px solid var(--linea); }
.ej b { font: 500 .8125rem var(--f-mono); color: var(--texto-suave); white-space: nowrap; }
.ej[aria-pressed=true] span { opacity: .45; text-decoration: line-through; text-decoration-color: var(--acento); }
.check { width: 1.15rem; height: 1.15rem; border: 1px solid var(--linea-fuerte); display: block; transition: background var(--dur-rapida); }
.check.ok { background: var(--acento); border-color: var(--acento); }
.ej:active .check { transform: scale(.9); }

.chips { display: flex; gap: .4rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: .2rem; }
.chip { flex: 1 0 auto; min-width: 3.2rem; padding: .75rem .6rem; background: none; border: 1px solid var(--linea-fuerte); color: var(--texto-suave); font: 600 1.05rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.chip.hoy { color: var(--texto); }
.chip.on { background: var(--acento); border-color: var(--acento); color: oklch(15% .02 350); }

.linea-tiempo { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--linea); }
.linea-tiempo li:last-child { border-bottom: 1px solid var(--linea); }
.linea-tiempo .hora { font-size: 2.1rem; color: var(--texto); opacity: .5; }
.linea-tiempo p { margin: 0; color: var(--texto); font-size: .9688rem; }
.linea-tiempo li.ahora .hora { color: var(--acento); opacity: 1; }
.puntos { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--texto-suave); }
.puntos li { margin-bottom: .35rem; padding-left: .2rem; }
.puntos li::marker { color: var(--acento); }
.puntos a { color: var(--texto); }

.acordeon details { border-top: 1px solid var(--linea-fuerte); }
.acordeon details:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.acordeon summary { list-style: none; cursor: pointer; padding: 1.15rem 2.6rem 1.15rem 0; font: 600 1.35rem/1.1 var(--f-display); text-transform: uppercase; position: relative; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; position: absolute; right: .1rem; top: .95rem; font: 400 1.6rem/1 var(--f-mono); color: var(--acento); transition: transform var(--dur-media) var(--ease-suave); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon__cuerpo { padding-bottom: 1.2rem; }
.acordeon__cuerpo .q { color: var(--texto); font-weight: 700; margin: 1rem 0 .2rem; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr);
  background: oklch(15% .018 350 / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linea-fuerte); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { background: none; border: 0; color: var(--texto-suave); padding: 1.05rem .4rem; font: 500 .6875rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; position: relative; }
.tabs button.on { color: var(--texto); }
.tabs button.on::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 2px; background: var(--acento); }
@media (min-width: 760px) {
  .tabs { position: fixed; top: .75rem; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: 28rem; border: 1px solid var(--linea); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabs button.on::before { top: auto; bottom: -1px; }
  .vista { padding-bottom: 4rem; padding-top: 3rem; }
}

/* ── panel ── */
.panel { display: grid; grid-template-columns: 1fr; gap: 0; max-width: var(--ancho-amplio); margin-inline: auto; }
.panel__lista { padding: 1.4rem var(--s-borde); border-bottom: 1px solid var(--linea); }
.panel__acc { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.panel__acc #q { flex: 1; min-width: 0; padding: .7rem .8rem; }
.panel__acc .btn { white-space: nowrap; }
.lista-alu { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 22rem; overflow: auto; }
.alu { width: 100%; text-align: left; display: grid; gap: .2rem; padding: .9rem 1rem; background: none; border: 1px solid var(--linea); color: var(--texto); cursor: pointer; font: inherit; transition: border-color var(--dur-rapida); }
.alu b { font: 600 1.25rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.alu:hover { border-color: var(--linea-fuerte); }
.alu.on { border-color: var(--acento); }
.alu .tag { margin-top: .4rem; }
.vacio { padding: 1rem 0; }
.panel__ed { padding: 1.6rem var(--s-borde) 6rem; }
.vacio-ed { padding: 4rem 0; }
.ed__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
.ed__cab .h-card { margin: 0; font-size: 2.4rem; }
.ed__tit { display: flex; justify-content: space-between; align-items: baseline; margin: 2.2rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--linea-fuerte); }
.ed__tit .etiqueta { margin: 0; color: var(--texto); }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.ed__pie { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; margin-top: 1rem; background: oklch(15% .018 350 / .94); border-top: 1px solid var(--linea-fuerte); }
.ed__pie .etiqueta { margin: 0; }
@media (min-width: 900px) {
  .panel { grid-template-columns: 21rem 1fr; min-height: calc(100svh - 4rem); }
  .panel__lista { border-bottom: 0; border-right: 1px solid var(--linea); position: sticky; top: 0; align-self: start; height: calc(100svh - 4rem); overflow: auto; }
  .lista-alu { max-height: none; }
  .panel__ed { padding: 2.4rem 3rem 6rem; max-width: 52rem; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grande-2 { grid-column: 1 / -1; }
}

dialog { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea-fuerte); padding: 1.8rem; width: min(34rem, calc(100vw - 1.5rem));
  margin: auto; max-height: calc(100dvh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
dialog[open] { display: block; }
@media (max-height: 800px) {
  dialog { padding: 1.2rem 1.4rem; }
  dialog .campo { margin-bottom: .75rem; gap: .3rem; }
  dialog .campo input, dialog .campo select { padding: .65rem .8rem; }
  dialog .h-card { font-size: 1.5rem; margin-bottom: .5rem; }
  .dlg__acc { margin-top: .8rem; }
}
.btn--peligro { color: oklch(78% .14 25); border-color: oklch(78% .14 25 / .4); }
.btn--peligro:hover { border-color: oklch(78% .14 25); background: oklch(78% .14 25 / .08); }
.ed__acc { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
dialog::backdrop { background: oklch(8% .02 350 / .78); }
.dlg__acc { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
.creds { white-space: pre-wrap; word-break: break-word; font: 400 .8125rem/1.6 var(--f-mono); background: var(--fondo-alt); border: 1px solid var(--linea); padding: 1rem; color: var(--texto); margin: 1rem 0 0; }

#toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 1rem); background: var(--texto); color: oklch(15% .02 350); padding: .8rem 1.2rem; font: 500 .875rem var(--f-texto); opacity: 0; pointer-events: none; z-index: 100; transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }