/* App del colegio (/app/): pensada para celular, se ve centrada en el computador */
:root {
  --primario: #3b0d18;
  --secundario: #7a1f35;
  --acento: #e0b45c;
  --fondo: #f7f3ea;
  --papel: #ffffff;
  --tinta: #1d2433;
  --suave: #5b6272;
  --linea: #e7e1d4;
  --radio: 16px;
  --sombra: 0 6px 20px rgba(29, 36, 51, .07);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ev-evento: var(--secundario);
  --ev-reunion: #2f6db3;
  --ev-acto: #c27d0e;
  --ev-evaluacion: #7a4bc4;
  --ev-feriado: #2e8b57;
  --ev-vacaciones: #2e8b57;
  --tabs: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: 16px/1.5 var(--sans); color: var(--tinta); background: var(--fondo);
  padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
button, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  background: var(--primario); color: #fff;
}
.barra__logo { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.barra__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.barra__texto strong { font-family: var(--serif); font-size: 1.05rem; }
.barra__texto span { font-size: .8rem; color: var(--acento); font-weight: 600; letter-spacing: .02em; }
.barra__red { margin-left: auto; font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.15); padding: .25rem .6rem; border-radius: 999px; }

.contenido { max-width: 600px; margin: 0 auto; padding: 1rem; }
.vista { display: grid; gap: .9rem; }
.subtitulo { font-family: var(--serif); font-size: 1.15rem; color: var(--primario); margin-top: .6rem; }
.mes { font-family: var(--serif); font-size: 1.1rem; color: var(--primario); margin: .6rem 0 -.2rem; }
.vacio { color: var(--suave); text-align: center; padding: 1.5rem 1rem; list-style: none; }
.pie-nota { font-size: .78rem; color: var(--suave); text-align: center; }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.tarjeta p { color: var(--suave); font-size: .92rem; margin-top: .2rem; }
.tarjeta ol { margin: .5rem 0 .2rem; padding-left: 1.2rem; font-size: .92rem; }
.tarjeta ol li { margin: .2rem 0; }
.instalar { border-color: var(--acento); }
.acciones { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
.btn { border: 0; border-radius: 999px; padding: .7rem 1.2rem; font-weight: 600; background: var(--primario); color: #fff; cursor: pointer; }
.btn-texto { border: 0; background: none; padding: .6rem 0; font-weight: 600; color: var(--secundario); cursor: pointer; text-align: left; }

/* Aviso */
.sin-aviso { display: flex; gap: .9rem; align-items: center; }
.sin-aviso__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #e5f4ea; color: #2e8b57; font-weight: 700; font-size: 1.2rem; }
.alerta { border-radius: var(--radio); padding: 1.15rem 1.2rem 1.25rem; color: #fff; background: #b3261e; box-shadow: 0 12px 30px rgba(179, 38, 30, .3); display: grid; gap: .45rem; }
.alerta--importante { background: #f2b627; color: #2a1d00; box-shadow: 0 12px 30px rgba(242, 182, 39, .3); }
.alerta--info { background: #1f5fa8; box-shadow: 0 12px 30px rgba(31, 95, 168, .3); }
.alerta__nivel { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.2); }
.alerta--importante .alerta__nivel { background: rgba(0,0,0,.1); }
.alerta__titulo { font-family: var(--serif); font-size: 1.4rem; }
.alerta__texto { font-size: 1.02rem; white-space: pre-line; }
.alerta__link { color: inherit; font-weight: 700; text-underline-offset: 3px; }

/* Eventos */
.eventos { display: grid; gap: .65rem; }
.evento { --c: var(--ev-evento); display: flex; gap: .85rem; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: 14px; padding: .8rem .9rem; }
.evento--reunion { --c: var(--ev-reunion); }
.evento--acto { --c: var(--ev-acto); }
.evento--evaluacion { --c: var(--ev-evaluacion); }
.evento--feriado { --c: var(--ev-feriado); }
.evento--vacaciones { --c: var(--ev-vacaciones); }
.evento__fecha { flex: none; width: 48px; height: 52px; border-radius: 10px; background: var(--fondo); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.evento__fecha span { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--primario); }
.evento__fecha small { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-top: .2rem; }
.evento__info { min-width: 0; }
.evento__tipo { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.evento__tipo b { color: var(--tinta); }
.evento h3 { font-family: var(--serif); font-size: 1.02rem; color: var(--primario); margin: .1rem 0; }
.evento__meta { font-size: .85rem; color: var(--suave); }
.evento__meta::first-letter { text-transform: uppercase; }
.evento__desc { font-size: .88rem; margin-top: .3rem; }
.evento__link { display: inline-block; margin-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--secundario); }

/* Horarios */
.selector { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--suave); }
.selector select { appearance: none; width: 100%; padding: .8rem 2.4rem .8rem 1rem; font-size: 1rem; font-weight: 600; color: var(--tinta); border: 1px solid var(--linea); border-radius: 12px; background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b6272' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .7rem center / 22px; }
.dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: .3rem; }
.dia { border: 0; background: none; padding: .55rem 0; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--suave); cursor: pointer; }
.dia.is-active { background: var(--primario); color: #fff; }
.bloques { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bloque { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .7rem; align-items: stretch; }
.bloque__hora { display: flex; flex-direction: column; justify-content: center; font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bloque__hora small { font-weight: 500; color: var(--suave); font-size: .75rem; }
.bloque__caja { background: var(--c); color: var(--t); border-radius: 12px; padding: .65rem .8rem; display: grid; gap: .05rem; min-height: 52px; align-content: center; }
.bloque__caja strong { font-size: .95rem; }
.bloque__caja span, .bloque__caja em { font-size: .78rem; opacity: .85; font-style: normal; }
.bloque__caja em { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; }
.bloque__split { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.bloque--pausa { color: var(--suave); font-size: .85rem; }
.bloque--pausa > span:last-child { border: 1px dashed var(--linea); border-radius: 10px; padding: .35rem .8rem; text-align: center; }
.bloque--pausa .bloque__hora { font-weight: 500; font-size: .8rem; }
.es-ahora .bloque__caja { outline: 3px solid var(--acento); outline-offset: 2px; }
.bloque__ahora { position: absolute; top: -.45rem; right: .4rem; background: var(--acento); color: var(--primario); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 999px; }

/* Pestañas inferiores */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--papel); border-top: 1px solid var(--linea); box-shadow: 0 -4px 20px rgba(29, 36, 51, .06);
}
.tab { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; font-size: .75rem; font-weight: 600; color: var(--suave); cursor: pointer; }
.tab svg { width: 24px; height: 24px; fill: currentColor; }
.tab.is-active { color: var(--primario); }
.tab.is-active svg { background: color-mix(in srgb, var(--acento) 35%, transparent); border-radius: 999px; width: 52px; padding: 2px 14px; height: 28px; }
.tab__punto { position: absolute; top: 9px; left: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: #d93025; border: 2px solid var(--papel); }

@media (min-width: 700px) {
  .tabs { left: 50%; right: auto; width: 600px; transform: translateX(-50%); border: 1px solid var(--linea); border-bottom: 0; border-radius: 18px 18px 0 0; }
}

/* Notificaciones */
.notif--ok { border-color: #9fd3b2; background: #f2faf5; }
.notif__error { color: #b3261e !important; font-weight: 600; }

/* Inspectoría */
.insp { display: grid; gap: .9rem; }
.insp h2 { font-family: var(--serif); font-size: 1.15rem; color: var(--primario); }
.campo { display: grid; gap: .3rem; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--suave); }
.campo input, .campo textarea { width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; font-weight: 400; color: var(--tinta); padding: .75rem .9rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo textarea:focus { outline: 3px solid color-mix(in srgb, var(--acento) 60%, transparent); border-color: var(--acento); }
.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.niveles label { position: relative; display: grid; place-items: center; text-align: center; padding: .75rem .3rem; border-radius: 12px; border: 2px solid var(--linea); background: var(--papel); font-weight: 700; font-size: .9rem; color: var(--tinta); cursor: pointer; }
.niveles input { position: absolute; opacity: 0; pointer-events: none; }
.niveles label:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--papel)); }
.niveles input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.niveles small { font-weight: 500; font-size: .72rem; color: var(--suave); }
.plantillas { display: flex; flex-wrap: wrap; gap: .4rem; }
.plantillas button { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: .45rem .8rem; font-size: .85rem; font-weight: 600; color: var(--secundario); cursor: pointer; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.casilla input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; accent-color: var(--primario); flex: none; }
.btn--grande { width: 100%; padding: 1rem; font-size: 1.05rem; }
.btn--peligro { background: #b3261e; }
.btn--suave { background: var(--papel); color: var(--primario); border: 2px solid var(--primario); }
.insp__msg { border-radius: 12px; padding: .8rem 1rem; font-weight: 600; font-size: .95rem; }
.insp__msg--ok { background: #e5f4ea; color: #1d6b3f; }
.insp__msg--error { background: #fdecea; color: #b3261e; }
.insp__estado { display: grid; gap: .3rem; }
.insp__estado .alerta { box-shadow: none; }
.insp__pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.notif__ok { color: #1d6b3f !important; font-weight: 600; }
.suscribir { margin-bottom: 1rem; }
.suscribir p { margin: .3rem 0 0; }
.suscribir .btn { text-decoration: none; display: inline-block; }

/* «Mi curso» */
.mc { display: grid; gap: .8rem; }
.mc h2 { font-family: var(--serif); color: var(--primario); font-size: 1.25rem; }
.mc p { color: var(--suave); }
.mc__opciones { display: grid; gap: .6rem; margin-top: .3rem; }
.mc__codigo { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-weight: 700; }
.mc__vista { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--radio); background: #fff4e0; border: 2px solid #e0a43c; font-size: .9rem; }
.mc__quien { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.mc__quien small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.mc__quien strong { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--primario); }
.mc__quien span { display: block; font-size: .85rem; color: var(--suave); }
.mc__autor { font-size: .78rem; color: var(--suave); margin-top: .3rem; }
.mc__borrar { color: #b3261e; }
#vista-micurso > div > .btn--grande { margin-bottom: 1rem; }
#vista-micurso .selector { margin-bottom: 1rem; }
.campo select { width: 100%; font: inherit; font-size: 1.05rem; font-weight: 400; color: var(--tinta); padding: .75rem .9rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }

/* «Mi curso» → Pruebas para imprimir (profesores) */
.mc__pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: .3rem; margin-bottom: 1rem; }
.mc__pestanas button { border: 0; background: none; padding: .6rem .4rem; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--suave); cursor: pointer; }
.mc__pestanas button[aria-selected="true"] { background: var(--primario); color: #fff; }
.mc__motivo { font-size: .88rem; margin-top: .4rem; padding: .55rem .7rem; border-radius: 10px; background: #fdecea; color: #7a1a14 !important; white-space: pre-line; }
.mc__ojo { color: #8a5a00 !important; font-weight: 600; font-size: .9rem; }
.campo input[type="file"] { font-size: .9rem; padding: .6rem; }

/* «Mi curso» → apoderados */
.mc__codigo--letras { letter-spacing: .15em; text-transform: uppercase; font-size: 1.3rem; }
.mc__hijos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.mc__hijos button { display: grid; line-height: 1.2; }
.mc__hijos small { font-size: .72rem; font-weight: 500; opacity: .85; }

/* Mi curso, profesor: inicio con sus dos tareas como botones grandes y el avance de cada envío */
.mc-acciones { display: grid; gap: .65rem; margin-bottom: 1.3rem; }
.mc-accion { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.05rem; border: 0; border-radius: 18px; background: var(--primario); color: #fff; text-align: left; box-shadow: var(--sombra); cursor: pointer; }
.mc-accion--suave { background: var(--papel); color: var(--primario); border: 1px solid var(--linea); }
.mc-accion svg { width: 2.4rem; height: 2.4rem; flex: none; padding: .45rem; border-radius: 12px; fill: currentColor; background: rgba(255, 255, 255, .14); }
.mc-accion--suave svg { background: color-mix(in srgb, var(--acento) 25%, var(--papel)); }
.mc-accion strong { display: block; font-size: 1.08rem; line-height: 1.25; }
.mc-accion small { display: block; margin-top: .15rem; font-size: .85rem; opacity: .85; }
.mc-titulo { font-family: var(--serif); font-size: 1.15rem; color: var(--primario); margin: .4rem 0 .6rem; }
.mc-envio { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: .85rem .95rem; margin-bottom: .6rem; }
.mc-envio h3 { font-size: 1rem; margin: .1rem 0 0; color: var(--tinta); }
.mc-envio p { margin: .15rem 0 0; font-size: .86rem; color: var(--suave); }
.mc-envio__estado { font-size: .85rem; font-weight: 700; color: #8a5a00; }
.mc-envio--devuelta .mc-envio__estado { color: #b3261e; }
.mc-envio--aprobada .mc-envio__estado, .mc-envio--impresa .mc-envio__estado { color: #1d6b3f; }
.mc-envio .acciones { margin-top: .4rem; }
.mc-avance { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin: .6rem 0 .2rem; }
.mc-avance i { height: 6px; border-radius: 9px; background: var(--linea); }
.mc-avance .on { background: #2e8b57; }
.mc-avance .ahora { background: var(--acento); }
.mc-avance .mal { background: #c0392b; }
.mc-avance__txt { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .7rem; color: var(--suave); }
.mc-avance__txt span:nth-child(2), .mc-avance__txt span:nth-child(3) { text-align: center; }
.mc-avance__txt span:last-child { text-align: right; }
.btn--chico { padding: .55rem 1.05rem; font-size: .92rem; }

/* Enviar prueba o guía: pasos, archivo y preguntas que se responden con un toque */
.mc-pasos { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 600; color: var(--suave); }
.mc-pasos li { display: flex; align-items: center; gap: .35rem; }
.mc-pasos b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--linea); color: var(--tinta); font-size: .75rem; }
.mc-pasos .on { color: var(--primario); }
.mc-pasos .on b { background: var(--primario); color: #fff; }
.mc-pasos .listo b { background: #2e8b57; color: #fff; }
.mc-zona { position: relative; display: grid; justify-items: center; gap: .4rem; padding: 1.6rem 1rem 1.1rem; border: 2px dashed var(--acento); border-radius: 18px; background: color-mix(in srgb, var(--acento) 12%, var(--papel)); color: var(--primario); text-align: center; cursor: pointer; }
.mc-zona svg { width: 3rem; height: 3rem; fill: currentColor; }
.mc-zona strong { font-size: 1.12rem; }
.mc-zona small { color: var(--suave); font-size: .86rem; }
.mc-zona .btn { margin-top: .5rem; pointer-events: none; }
.mc-zona.encima { background: color-mix(in srgb, var(--acento) 30%, var(--papel)); }
.mc-zona:focus-within, .mc-archivo__cambiar:focus-within { outline: 3px solid color-mix(in srgb, var(--acento) 70%, transparent); outline-offset: 2px; }
.mc-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mc-archivo { display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 14px; background: color-mix(in srgb, #2e8b57 9%, var(--papel)); border: 1px solid color-mix(in srgb, #2e8b57 35%, var(--linea)); }
.mc-archivo--antes { background: var(--papel); border-color: var(--linea); }
.mc-archivo svg { width: 2rem; height: 2rem; flex: none; fill: #2e8b57; }
.mc-archivo--antes svg { fill: var(--secundario); }
.mc-archivo div { flex: 1; min-width: 0; }
.mc-archivo strong { display: block; font-size: .95rem; color: var(--tinta); overflow-wrap: anywhere; }
.mc-archivo small { color: var(--suave); font-size: .82rem; }
.mc-archivo button, .mc-archivo__cambiar { position: relative; flex: none; border: 0; background: none; padding: .4rem 0; font-weight: 600; font-size: .92rem; color: var(--secundario); cursor: pointer; }
.mc-grupo { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.mc-pregunta { padding: 0; margin-top: .3rem; font-size: 1rem; font-weight: 700; color: var(--tinta); }
.mc-pregunta small { display: block; font-size: .8rem; font-weight: 400; color: var(--suave); }
.mc .mc-sub { font-size: .85rem; }
.mc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.mc-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.mc-chip { border: 2px solid var(--linea); border-radius: 999px; padding: .55rem .95rem; background: var(--papel); font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--tinta); cursor: pointer; }
.mc-seg .mc-chip { border-radius: 14px; padding: .8rem; font-size: 1.02rem; }
.mc-chip.on { border-color: var(--primario); background: var(--primario); color: #fff; }
.mc-chip--mas { border-style: dashed; color: var(--suave); }
.mc-chip--mas.on { border-style: solid; }
.mc-chip small { display: block; font-size: .75rem; font-weight: 500; opacity: .85; }
.mc-chip--fecha { min-width: 4.4rem; padding: .45rem .7rem; border-radius: 14px; text-align: center; }
.mc-accion:focus-visible, .mc-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 70%, transparent); outline-offset: 2px; }
.mc-resumen { display: grid; gap: .4rem; padding: .85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--acento) 16%, var(--papel)); border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--linea)); }
.mc .mc-resumen p { color: var(--tinta); font-size: .95rem; }
.mc-resumen strong { color: var(--primario); }

/* Envío listo: confirmación y lo que sigue */
.mc-ok { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.mc-ok__circulo { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #2e8b57; }
.mc-ok__circulo svg { width: 2.5rem; height: 2.5rem; fill: #fff; }
.mc-linea { display: grid; margin: .4rem 0; padding: 0; list-style: none; }
.mc-linea li { position: relative; display: grid; grid-template-columns: 1.8rem 1fr; gap: .65rem; padding-bottom: .75rem; }
.mc-linea li::before { content: ""; position: absolute; left: .85rem; top: 1.8rem; bottom: 0; width: 2px; background: var(--linea); }
.mc-linea li:last-child::before { display: none; }
.mc-linea b { position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--linea); color: var(--suave); font-size: .8rem; }
.mc-linea .on b { background: #2e8b57; color: #fff; }
.mc-linea .ahora b { background: var(--acento); color: var(--primario); }
.mc-linea strong { display: block; color: var(--tinta); }
.mc-linea small { font-size: .85rem; color: var(--suave); }

/* Inicio: las clases del día del curso guardado en el celular */
.hoy { display: grid; gap: .2rem; margin-bottom: 1rem; padding: 1rem 1.1rem .6rem; border-radius: 18px; background: var(--primario); color: #fff; box-shadow: var(--sombra); }
.hoy small { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acento); }
.hoy h2 { margin: .1rem 0 .4rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: #fff; }
.hoy ol { display: grid; margin: 0; padding: 0; list-style: none; }
.hoy li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.hoy li span { flex: none; min-width: 6.2rem; font-size: .85rem; opacity: .8; font-variant-numeric: tabular-nums; }
.hoy li strong { flex: 1; min-width: 0; font-size: .98rem; }
.hoy li em { flex: none; padding: .1rem .55rem; border-radius: 999px; background: var(--acento); color: var(--primario); font-size: .7rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.hoy li.es-ahora strong { color: var(--acento); }
.hoy .btn-texto { justify-self: start; color: var(--acento); }
.hoy-elegir { margin-bottom: 1rem; }
#sinAviso:not(:empty), #inicioCurso:not(:empty) { margin-bottom: 1rem; }
.mc-invita .acciones { margin-top: .3rem; }

/* Mi curso, profesor: activar avisos de sus pruebas y dirección para el computador */
.mc-atajo { margin: -.1rem 0 0; text-align: left; }
.mc-notif { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.mc-notif div { flex: 1 1 14rem; min-width: 0; }
/* Casilla «Avisar a los celulares del curso» al publicar una fecha */
.mc-avisar { display: flex; gap: .65rem; align-items: flex-start; margin: .9rem 0 .2rem; font-weight: 600; cursor: pointer; }
.mc-avisar input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; flex: none; accent-color: var(--primario); }
.mc-avisar small { display: block; font-weight: 400; color: var(--suave); font-size: .85rem; }

/* Inicio: últimas 3 noticias (se deslizan de lado) y «Más noticias», que abre el sitio aparte */
.noticias-app { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .1rem .1rem .5rem; margin: 0 -.1rem; scrollbar-width: none; }
.noticias-app::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .noticias-app { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; } }
.nota { display: flex; flex-direction: column; scroll-snap-align: start; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; }
.nota__img { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--primario) 85%, #000); }
.nota__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nota--flyer .nota__img { background: color-mix(in srgb, var(--primario) 8%, var(--fondo)); }
.nota--flyer .nota__img img { object-fit: contain; }
.nota__txt { display: grid; gap: .2rem; padding: .7rem .85rem .85rem; }
.nota__txt small { color: var(--suave); font-size: .8rem; }
.nota__txt strong { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noticias-app__mas { display: block; text-align: center; text-decoration: none; margin: .4rem 0 .8rem; }

/* Campana de notificaciones arriba a la derecha */
.barra__campana { position: relative; margin-left: auto; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.barra__red:not([hidden]) + .barra__campana { margin-left: 0; }
.barra__campana svg { width: 23px; height: 23px; fill: currentColor; }
.barra__campana:disabled { opacity: .6; }
.barra__campana:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.barra__campana-punto { position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--primario); display: none; }
/* Sin activar: punto dorado que late para invitar a tocarla */
.barra__campana--inactiva .barra__campana-punto { display: block; background: var(--acento); animation: latido 1.6s ease-in-out infinite; }
/* Activadas: campana verde con su check */
.barra__campana--activa { background: #1e8e3e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.barra__campana--activa .barra__campana-punto { display: block; background: #fff; }
/* Bloqueadas o sin soporte: campana apagada */
.barra__campana--bloqueada, .barra__campana--nosoporta { color: rgba(255,255,255,.55); }
.barra__campana--bloqueada::after, .barra__campana--nosoporta::after { content: ""; position: absolute; width: 26px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .barra__campana--inactiva .barra__campana-punto { animation: none; } }
/* El detalle se abre bajo la campana */
.notif--flotante { position: fixed; z-index: 20; top: calc(4.2rem + env(safe-area-inset-top)); right: .75rem; width: min(22rem, calc(100vw - 1.5rem)); margin: 0; }
.notif__cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.notif__cerrar { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--suave); cursor: pointer; padding: 0 .2rem; }
/* Mensaje de Inspectoría al apoderado */
.mc-insp { display: grid; gap: .35rem; margin: 0 0 .75rem; border-left: 4px solid #b3261e; }
.mc-insp small { color: var(--suave); font-size: .8rem; }
.mc-insp small b { color: #b3261e; }
.mc-insp strong { color: var(--tinta); font-size: 1rem; }
.mc-insp p { margin: 0; white-space: pre-wrap; color: var(--tinta); }
.mc-insp__firma { font-size: .85rem; color: var(--suave); }
.mc-insp.is-nuevo { background: color-mix(in srgb, #b3261e 6%, var(--papel)); }