/* =====================================================================
   Portal Interno INSTA — hoja de estilo
   ---------------------------------------------------------------------
   Tema claro, texto grande y contrastes altos: el portal lo usa gente
   que lleva años en el instituto y lo consulta a media conversación,
   muchas veces desde el teléfono. Se prefiere una línea de más antes que
   una letra más chica.

   La geometría sale del logo: una placa con radio grande en la esquina
   superior izquierda e inferior derecha, y casi recto en las otras dos.
   El amarillo se usa solo como marcador sobre el dato importante.
   ===================================================================== */

:root {
  /* --- marca (muestreada del logo oficial) --- */
  --azul: #4275b7;
  --azul-profundo: #30517e;
  --azul-panel: #9dc2e8;
  --azul-niebla: #e7effa;
  --azul-humo: #f3f7fc;
  --marca: #efef07;

  /* --- texto y superficies (contraste alto sobre papel) --- */
  --carbon: #14181d;   /* 15.6:1 sobre papel */
  --tinta: #16283f;    /* títulos */
  --gris: #45535f;     /* 8.4:1  · texto secundario */
  --gris-claro: #66737f; /* 5.4:1 · etiquetas pequeñas */
  --papel: #fafbfc;
  --papel-hueco: #ffffff;
  --linea: #cfdce9;
  --linea-suave: #e5edf5;

  /* --- estado --- */
  --alerta: #b32222;   /* 6.5:1 */
  --atencion: #a95c00; /* 4.9:1 */
  --bien: #0c7350;     /* 5.1:1 */

  /* --- tipografía --- */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'SF Mono', 'Roboto Mono', ui-monospace, monospace;

  /* --- forma --- */
  --radio-placa: 20px 4px 20px 4px;
  --radio-chico: 10px 2px 10px 2px;
  --radio-pill: 999px;

  --sombra: 0 1px 2px rgba(22, 40, 63, .07), 0 8px 24px -14px rgba(22, 40, 63, .2);
  --sombra-alta: 0 2px 6px rgba(22, 40, 63, .1), 0 22px 50px -20px rgba(22, 40, 63, .3);

  --ancho: 1120px;
  --barra: 282px;
  --toque: 44px; /* alto mínimo de cualquier cosa que se pueda tocar */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: var(--azul-profundo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul); }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--marca); color: #14181d; }

/* ---------------------------------------------------------------------
   Rótulo
   --------------------------------------------------------------------- */

.rotulo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  min-height: var(--toque); /* es un enlace: tiene que poder tocarse */
}
.rotulo img { width: 48px; height: auto; flex: none; border-radius: var(--radio-chico); }
.rotulo__texto { display: flex; flex-direction: column; line-height: 1.2; }
.rotulo__nombre { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--tinta); }
.rotulo__sub { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }

/* ---------------------------------------------------------------------
   Etiquetas y datos
   --------------------------------------------------------------------- */

/* 14 px y en gris oscuro: en mayúsculas y con tracking, cualquier cosa más
   chica se vuelve difícil de leer, y en teléfono esta etiqueta es lo único
   que nombra el valor de cada celda. */
.ceja {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris);
}
.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Marcador amarillo: el único uso del amarillo sobre texto. La banda se
   queda por debajo de la línea base para no comerse los descendentes de la
   g, la j o la p en texto blanco sobre el azul. */
.marcado > * {
  padding: 0 .1em;
  background-image: linear-gradient(to top, rgba(239, 239, 7, .92) 12%, transparent 12%);
  background-size: 100% .34em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------------
   Entrada · Magic Login
   --------------------------------------------------------------------- */

.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }

.entrada__lienzo {
  background: var(--azul-profundo); color: #eef4fb;
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  position: relative; overflow: hidden;
}
.entrada__lienzo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% -12%, rgba(157, 194, 232, .26), transparent 60%),
    radial-gradient(90% 70% at 8% 108%, rgba(239, 239, 7, .06), transparent 62%);
  pointer-events: none;
}
.entrada__lienzo > * { position: relative; }
.entrada__lienzo .rotulo__nombre { color: #fff; }
.entrada__lienzo .rotulo__sub { color: rgba(238, 244, 251, .88); }

.entrada__promesa { max-width: 33rem; }
.entrada__promesa h1 { font-size: clamp(30px, 4.2vw, 48px); color: #fff; }
.entrada__promesa h1 em { font-style: normal; color: var(--marca); }
.entrada__promesa p { margin-top: 18px; color: rgba(238, 244, 251, .85); font-size: 17px; max-width: 30rem; }

.entrada__hechos { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.entrada__hecho { display: flex; flex-direction: column; }
.entrada__hecho b { font-family: var(--mono); font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.entrada__hecho span { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: rgba(238, 244, 251, .88); }

.entrada__acceso { padding: 44px; display: flex; flex-direction: column; justify-content: center; background: var(--papel-hueco); }
.acceso { width: 100%; max-width: 460px; margin-inline: auto; }
.acceso > .ceja { display: block; margin-bottom: 8px; }
.acceso h2 { font-size: 29px; color: var(--tinta); }
.acceso__nota { margin-top: 10px; color: var(--gris); }

.acceso__roles { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta-rol {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; min-height: var(--toque);
  background: var(--papel-hueco);
  border: 2px solid var(--linea);
  border-left: 5px solid var(--rol, var(--azul));
  border-radius: var(--radio-chico);
  font: inherit; color: inherit;
  transition: border-color .16s, box-shadow .16s;
}
.tarjeta-rol:hover:not(:disabled) { border-color: var(--azul); box-shadow: var(--sombra); }
.tarjeta-rol:disabled { opacity: .6; cursor: progress; }
.tarjeta-rol__txt { min-width: 0; }
.tarjeta-rol__txt b { display: block; font-size: 17px; color: var(--tinta); font-weight: 600; }
.tarjeta-rol__txt span { display: block; font-size: 14.5px; color: var(--gris); line-height: 1.45; }

.ficha {
  width: 44px; height: 44px; border-radius: var(--radio-chico); flex: none;
  display: grid; place-items: center;
  background: var(--azul-niebla); color: var(--azul-profundo);
  border: 2px solid var(--azul-panel);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
}
.ficha--chica { width: 36px; height: 36px; font-size: 13px; }

.separador {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 18px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--gris-claro);
}
.separador::before, .separador::after { content: ''; height: 1px; background: var(--linea); flex: 1; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo__ayuda { font-size: 15.5px; color: var(--gris); }
label { font-size: 16px; font-weight: 600; color: var(--tinta); }

.campo-casilla {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  min-height: var(--toque); padding: 8px 12px;
  border: 2px solid var(--linea); border-radius: var(--radio-chico);
}
.campo-casilla:hover { border-color: var(--azul); background: var(--azul-humo); }
.campo-casilla:has(input:checked) { border-color: var(--azul); background: var(--azul-niebla); }
.campo-casilla input {
  width: 26px; height: 26px; min-height: auto; flex: none;
  accent-color: var(--azul-profundo); margin: 0;
}
.campo-casilla span { font-weight: 600; }

input[type=email], input[type=text], input[type=search], input[type=url], input[type=number], select, textarea {
  font: inherit; font-size: 17px;
  padding: 11px 13px; min-height: var(--toque);
  border: 2px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--papel-hueco); color: var(--carbon);
  width: 100%;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--gris-claro); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(66, 117, 183, .22);
}
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--alerta); }

.boton {
  font: inherit; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; min-height: var(--toque); cursor: pointer;
  border-radius: var(--radio-chico);
  border: 2px solid var(--azul-profundo);
  background: var(--azul-profundo); color: #fff;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.boton:hover:not(:disabled) { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton svg { width: 19px; height: 19px; flex: none; }
.boton--fantasma { background: transparent; color: var(--azul-profundo); border-color: var(--linea); }
.boton--fantasma:hover:not(:disabled) { background: var(--azul-niebla); color: var(--azul-profundo); border-color: var(--azul); }
.boton--peligro { background: transparent; color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.boton--peligro:hover:not(:disabled) { background: color-mix(in srgb, var(--alerta) 10%, transparent); color: var(--alerta); border-color: var(--alerta); }
.boton--chico { font-size: 14.5px; padding: 7px 13px; min-height: 38px; }
.boton--bloque { width: 100%; }

.aviso {
  padding: 13px 16px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--gris-claro);
  background: var(--azul-humo);
  font-size: 16px; color: var(--carbon);
}
.aviso--error { border-left-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 8%, transparent); }
.aviso--ok { border-left-color: var(--bien); background: color-mix(in srgb, var(--bien) 9%, transparent); }
.aviso--atencion { border-left-color: var(--atencion); background: color-mix(in srgb, var(--atencion) 9%, transparent); }
.aviso--nota { border-left-color: var(--azul-panel); }
.aviso + .aviso { margin-top: 10px; }

.enlace-magico code {
  display: block; margin-top: 8px; padding: 10px 12px;
  font-family: var(--mono); font-size: 13px; word-break: break-all;
  background: var(--azul-niebla); border-radius: var(--radio-chico); color: var(--azul-profundo);
}

.pie-demo { margin-top: 26px; font-size: 14.5px; color: var(--gris); }

@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada__lienzo { padding: 28px 22px 32px; }
  .entrada__acceso { padding: 30px 22px 46px; }
}

/* ---------------------------------------------------------------------
   Estructura del portal
   --------------------------------------------------------------------- */

.portal { display: grid; grid-template-columns: var(--barra) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.barra {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--papel-hueco);
  border-right: 1px solid var(--linea);
  padding: 18px 14px 14px;
  overflow-y: auto;
}
.barra__cabeza { padding: 0 6px 16px; border-bottom: 1px solid var(--linea-suave); }
.barra__nav { flex: 1; padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.barra__grupo { margin: 16px 0 5px; padding: 0 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; min-height: var(--toque);
  border-radius: var(--radio-chico);
  border: 2px solid transparent;
  background: none; font: inherit; font-size: 16px; color: var(--gris);
  cursor: pointer; text-align: left; width: 100%;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--azul-humo); color: var(--tinta); }
.nav-item[aria-current='page'] {
  background: var(--azul-niebla); color: var(--azul-profundo); font-weight: 700;
  border-color: var(--azul-panel);
}
.nav-item svg { width: 21px; height: 21px; flex: none; stroke-width: 1.7; }

.barra__pie { border-top: 1px solid var(--linea-suave); padding-top: 12px; }
.usuario { display: grid; grid-template-columns: 44px 1fr; gap: 11px; align-items: center; padding: 0 6px 10px; }
.usuario__txt { min-width: 0; }
.usuario__txt b { display: block; font-size: 15.5px; color: var(--tinta); font-weight: 600; }
/* El color del rol iría por debajo del contraste mínimo como texto, así que
   va en un punto al lado y el nombre del rol en gris legible. */
.usuario__txt span { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--gris); }
.usuario__txt span::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--rol, var(--azul-profundo));
}

.tope {
  display: none;
  position: sticky; top: 0; z-index: 40;
  align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--papel-hueco);
  border-bottom: 1px solid var(--linea);
}
.tope__menu {
  width: var(--toque); height: var(--toque); display: grid; place-items: center;
  border: 2px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--papel-hueco); cursor: pointer; color: var(--tinta);
}
.tope__menu svg { width: 22px; height: 22px; }
.tope .ficha { margin-left: auto; }

.lienzo { min-width: 0; padding: 30px 34px 80px; }
.lienzo__interno { max-width: var(--ancho); margin-inline: auto; }

.cabecera-seccion { margin-bottom: 24px; }
.cabecera-seccion h1 { font-size: clamp(27px, 3vw, 36px); color: var(--tinta); margin-top: 5px; }
.cabecera-seccion p { color: var(--gris); margin-top: 8px; max-width: 62ch; }
.cabecera-seccion__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 1040px) {
  .portal { grid-template-columns: 1fr; }
  .tope { display: flex; }
  .barra {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(310px, 86vw);
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .barra[data-abierta='1'] { transform: none; }
  .velo { position: fixed; inset: 0; z-index: 50; background: rgba(22, 40, 63, .45); border: 0; }
  .lienzo { padding: 20px 18px 70px; }
}
@media (max-width: 520px) { .lienzo { padding: 16px 14px 64px; } }

/* ---------------------------------------------------------------------
   La placa
   --------------------------------------------------------------------- */

.placa {
  background: var(--papel-hueco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-placa);
  padding: 20px 22px;
  min-width: 0;
}
.placa--acento { border-left: 5px solid var(--acento, var(--azul)); }
.placa__ceja { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.placa h3 { font-size: 21px; color: var(--tinta); }
.placa h4 { font-size: 18px; color: var(--tinta); }

/* La placa de respuesta: lo más importante de cada pantalla. */
.respuesta {
  background: var(--azul-profundo); color: #eef4fb;
  border-radius: var(--radio-placa);
  padding: 24px 26px;
  display: grid; gap: 16px;
}
.respuesta .ceja { color: rgba(238, 244, 251, .72); }
.respuesta h2 { color: #fff; font-size: clamp(21px, 2.4vw, 28px); max-width: 46ch; }
.respuesta p { color: rgba(238, 244, 251, .88); max-width: 66ch; }
.respuesta__fila { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.respuesta__cifra { display: flex; flex-direction: column; gap: 3px; }
.respuesta__cifra b { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 36px); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.respuesta__cifra span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(238, 244, 251, .7); }
.respuesta__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.respuesta .boton { border-color: rgba(238, 244, 251, .45); background: transparent; color: #fff; }
.respuesta .boton:hover:not(:disabled) { background: rgba(238, 244, 251, .16); border-color: #fff; color: #fff; }
.respuesta .boton--marca { background: var(--marca); border-color: var(--marca); color: #14181d; }
.respuesta .boton--marca:hover:not(:disabled) { background: #f7f735; border-color: #f7f735; color: #14181d; }

/* ---------------------------------------------------------------------
   Rejillas
   --------------------------------------------------------------------- */

.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
/* Las fichas de programa llevan nombres largos y filas de horario con la hora
   a la derecha: a menos de 430 px se parten en tres renglones y se leen mal. */
.rejilla--fichas { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.rejilla > *, .pila > * { min-width: 0; }
.rejilla--arriba { align-items: start; }
.pila { display: grid; gap: 16px; }
.pila--ancha { gap: 24px; }

/* ---------------------------------------------------------------------
   Insignias
   --------------------------------------------------------------------- */

/* Dos clases de insignia, y la diferencia es de contraste, no de gusto:
   - Etiqueta (por omisión): el tono puede ser un color claro del catálogo
     (el verde pálido de una maestría), así que el texto va en tinta y el
     color solo tiñe el fondo y el borde. Así nunca queda ilegible.
   - Estado (--fuerte): el tono es uno de los semánticos, que sí tienen
     contraste suficiente, y ahí el color del texto es la información. */
.insignia {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--tono, var(--gris)) 16%, #fff);
  color: var(--carbon);
  border: 1px solid color-mix(in srgb, var(--tono, var(--gris)) 50%, #fff);
  white-space: nowrap;
}
.insignia--fuerte {
  color: var(--tono, var(--gris));
  background: color-mix(in srgb, var(--tono, var(--gris)) 11%, #fff);
  border-color: color-mix(in srgb, var(--tono, var(--gris)) 38%, #fff);
}
.insignia__punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--tono, var(--gris));
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------------------------------------------------------------------
   Tablas: en escritorio son tabla, abajo de 780 px se apilan
   --------------------------------------------------------------------- */

.envoltura-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th {
  text-align: left; padding: 10px 14px;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gris);
  border-bottom: 2px solid var(--linea);
  white-space: nowrap; background: var(--azul-humo);
}
.tabla td { padding: 13px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--azul-humo); }
.tabla__num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla__acciones { white-space: nowrap; text-align: right; }

@media (max-width: 780px) {
  .tabla--apila thead { display: none; }
  .tabla--apila tbody tr {
    display: grid; gap: 4px; padding: 15px 0;
    border-bottom: 1px solid var(--linea);
  }
  .tabla--apila tbody tr:hover { background: none; }
  .tabla--apila td { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 3px 0; border: 0; }
  /* En teléfono esta etiqueta es el único encabezado que ve la persona, así
     que va al mismo tamaño y contraste que el resto del texto. */
  .tabla--apila td::before {
    content: attr(data-col);
    font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--gris);
  }
  .tabla--apila td:empty { display: none; }
  .tabla__num, .tabla__acciones { text-align: left; }
}

/* ---------------------------------------------------------------------
   Oferta educativa: la ficha de programa
   --------------------------------------------------------------------- */

.vista-alterna { display: inline-flex; border: 2px solid var(--linea); border-radius: var(--radio-chico); overflow: hidden; }
.vista-alterna button {
  font: inherit; font-size: 15.5px; font-weight: 600;
  padding: 9px 18px; min-height: 42px; cursor: pointer;
  border: 0; background: var(--papel-hueco); color: var(--gris);
  display: inline-flex; align-items: center; gap: 8px;
}
.vista-alterna button + button { border-left: 2px solid var(--linea); }
.vista-alterna button:hover { background: var(--azul-humo); color: var(--tinta); }
.vista-alterna button[aria-pressed='true'] { background: var(--azul-profundo); color: #fff; }
.vista-alterna svg { width: 18px; height: 18px; }

.programa { border-left: 5px solid var(--acento); display: grid; gap: 14px; }
.programa__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.programa h3 { font-size: 21px; max-width: 26ch; }

.precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.precio b { font-family: var(--mono); font-size: 30px; color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.1; }
.precio s { font-family: var(--mono); font-size: 17px; color: var(--gris-claro); }
.precio small { font-size: 14.5px; color: var(--gris); }

.detalles { display: grid; gap: 0; }
.detalle { display: grid; grid-template-columns: 34% 1fr; gap: 14px; padding: 9px 0; align-items: baseline; }
.detalle:not(:last-child) { border-bottom: 1px solid var(--linea-suave); }
.detalle > dt { font-size: 15px; font-weight: 600; color: var(--gris); }
.detalle > dd { margin: 0; font-size: 16.5px; color: var(--carbon); }
@media (max-width: 560px) { .detalle { grid-template-columns: 1fr; gap: 2px; } }

.horario { display: flex; align-items: center; gap: 11px; padding: 9px 0; flex-wrap: wrap; }
.horario:not(:last-child) { border-bottom: 1px solid var(--linea-suave); }
.horario__punto { width: 12px; height: 12px; border-radius: 3px 0 3px 0; flex: none; }
.horario b { color: var(--tinta); font-weight: 600; }
.horario__hora { margin-left: auto; font-family: var(--mono); font-size: 16px; color: var(--carbon); white-space: nowrap; }

/* ---------------------------------------------------------------------
   Links de clases
   --------------------------------------------------------------------- */

.clase-enlace {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  padding: 8px 14px; min-height: 40px;
  border-radius: var(--radio-chico);
  background: var(--bien); color: #fff;
  border: 2px solid var(--bien);
}
.clase-enlace:hover { background: #0a6144; border-color: #0a6144; color: #fff; }
.clase-enlace svg { width: 17px; height: 17px; }
.clase-inactiva { opacity: .55; }

/* La materia es lo que se busca con la vista, así que se lleva el ancho;
   la hora nunca se parte en varias líneas. */
.tabla--clases { min-width: 880px; }
.tabla--clases th:nth-child(1), .tabla--clases td:nth-child(1) { width: 27%; }
.tabla--clases th:nth-child(2), .tabla--clases td:nth-child(2) { width: 14%; }
.tabla--clases th:nth-child(3), .tabla--clases td:nth-child(3) { width: 16%; }
.tabla--clases th:nth-child(4), .tabla--clases td:nth-child(4) { width: 15%; }
.tabla--clases td:nth-child(5) { white-space: nowrap; }
.tabla--clases td:nth-child(2) { white-space: nowrap; }

@media (max-width: 780px) {
  .tabla--clases { min-width: 0; }
  .tabla--clases th, .tabla--clases td { width: auto !important; }
  .tabla--clases td:nth-child(5) { white-space: normal; }
}

/* ---------------------------------------------------------------------
   Filtros y acordeón
   --------------------------------------------------------------------- */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filtro {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 8px 16px; min-height: 40px; cursor: pointer;
  border: 2px solid var(--linea); border-radius: var(--radio-pill);
  background: var(--papel-hueco); color: var(--gris);
}
.filtro:hover { border-color: var(--azul); color: var(--tinta); }
.filtro[aria-pressed='true'] { background: var(--azul-profundo); border-color: var(--azul-profundo); color: #fff; }

details.acordeon { border-bottom: 1px solid var(--linea-suave); }
details.acordeon:last-child { border-bottom: 0; }
details.acordeon > summary {
  cursor: pointer; padding: 15px 0; list-style: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 600; color: var(--tinta); min-height: var(--toque);
}
details.acordeon > summary::-webkit-details-marker { display: none; }
details.acordeon > summary::after {
  content: '+'; margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 22px; color: var(--azul-profundo); line-height: 1;
}
details.acordeon[open] > summary::after { content: '–'; }
details.acordeon > summary:hover { color: var(--azul-profundo); }
.acordeon__cuerpo { padding: 0 0 18px; color: var(--carbon); max-width: 78ch; }

/* Lo que se escribe en una caja de texto se muestra con sus renglones. Sin
   esto, una respuesta con viñetas en líneas separadas salía en un solo
   párrafo corrido y se perdía el trabajo de quien la redactó. */
.respeta-renglones { white-space: pre-wrap; }

/* Plegable solo en teléfono: en escritorio el contenido va abierto y el
   resumen desaparece, así que la tarjeta se ve completa. En pantalla chica
   se cierra para que la sección no se convierta en un scroll infinito.
   El atributo open lo pone el JS según el ancho al pintar. */
details.plegable > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; min-height: var(--toque);
  font-size: 16px; font-weight: 600; color: var(--azul-profundo);
  border-top: 1px solid var(--linea-suave);
}
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: '+'; margin-left: auto; font-family: var(--mono); font-size: 22px; line-height: 1; }
details.plegable[open] > summary::after { content: '–'; }
details.plegable > summary:hover { color: var(--azul); }
details.plegable > .plegable__cuerpo { display: grid; gap: 14px; }
@media (min-width: 781px) { details.plegable > summary { display: none; } }

.mensaje-listo {
  font-size: 16px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  padding: 15px 17px; border-radius: var(--radio-chico);
  background: var(--azul-humo); border: 1px solid var(--linea-suave);
  color: var(--carbon);
}

/* ---------------------------------------------------------------------
   Matriz de permisos
   --------------------------------------------------------------------- */

.matriz { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
/* position:relative para que cualquier hijo absoluto quede recortado por
   el contenedor con scroll y no estire la página. */
.matriz th, .matriz td { padding: 11px 12px; border-bottom: 1px solid var(--linea-suave); text-align: left; position: relative; }
.matriz th { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--gris); border-bottom: 2px solid var(--linea); background: var(--azul-humo); }
.matriz td:not(:first-child), .matriz th:not(:first-child) { text-align: center; width: 118px; }
.marca-si { color: var(--bien); font-size: 19px; font-weight: 700; }
.marca-no { color: var(--gris-claro); font-size: 19px; }

/* ---------------------------------------------------------------------
   Ventana de edición
   --------------------------------------------------------------------- */

dialog.editor {
  padding: 0; border: 0; max-width: 640px; width: calc(100% - 28px);
  border-radius: var(--radio-placa);
  background: var(--papel-hueco); color: var(--carbon);
  box-shadow: var(--sombra-alta);
}
dialog.editor::backdrop { background: rgba(22, 40, 63, .52); }
.editor__cabeza {
  padding: 20px 24px 14px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: flex-start; gap: 14px;
}
.editor__cabeza h2 { font-size: 23px; color: var(--tinta); }
.editor__cabeza p { font-size: 15px; color: var(--gris); margin-top: 4px; }
.editor__cerrar {
  margin-left: auto; flex: none;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 2px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--papel-hueco); color: var(--gris); cursor: pointer; font-size: 20px; line-height: 1;
}
.editor__cerrar:hover { border-color: var(--azul); color: var(--tinta); }
.editor__cuerpo { padding: 20px 24px; display: grid; gap: 18px; overflow-y: auto; }
.editor__pie {
  padding: 16px 24px 20px; border-top: 1px solid var(--linea);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.editor__pie .boton--peligro { margin-right: auto; }
.editor__error { padding: 14px 24px 0; }
.editor__par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* La ventana se estructura como una columna: cabeza y pie fijos, y el
   formulario ocupa lo que queda y rueda. Con una altura máxima fija en el
   cuerpo, en un teléfono se veía media forma y no había manera de saber que
   faltaba lo demás. */
dialog.editor > form { display: flex; flex-direction: column; max-height: 100%; }
dialog.editor { max-height: calc(100dvh - 32px); }
dialog.editor .editor__cuerpo { flex: 1; min-height: 0; }

@media (max-width: 560px) {
  .editor__par { grid-template-columns: 1fr; }
  dialog.editor {
    width: 100%; max-width: none;
    max-height: 92dvh;
    margin: auto auto 0; /* hoja pegada al borde inferior, como en el móvil */
    border-radius: 20px 20px 0 0;
  }
  .editor__cabeza, .editor__cuerpo, .editor__pie, .editor__error { padding-inline: 18px; }
  .editor__pie { position: sticky; bottom: 0; background: var(--papel-hueco); }
  .editor__pie .boton { flex: 1 1 46%; }
  .editor__pie .boton--peligro { flex-basis: 100%; margin-right: 0; order: 3; }
}

/* Un pie de tarjeta con las acciones de edición. */
.acciones-edicion {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding-top: 14px; margin-top: 2px; border-top: 1px dashed var(--linea);
}
.acciones-edicion .ceja { margin-right: auto; }

/* ---------------------------------------------------------------------
   Estados vacíos y de carga
   --------------------------------------------------------------------- */

.vacio {
  padding: 44px 24px; text-align: center;
  border: 2px dashed var(--linea); border-radius: var(--radio-placa);
  color: var(--gris);
}
.vacio h3 { font-size: 20px; color: var(--tinta); margin-bottom: 8px; }
.vacio p { max-width: 46ch; margin-inline: auto; }

.cargando { display: grid; gap: 14px; }
.hueso {
  height: 86px; border-radius: var(--radio-placa);
  background: linear-gradient(100deg, var(--linea-suave) 30%, var(--azul-humo) 50%, var(--linea-suave) 70%);
  background-size: 220% 100%;
  animation: barrido 1.3s linear infinite;
}
@keyframes barrido { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ---------------------------------------------------------------------
   Aviso flotante
   --------------------------------------------------------------------- */

.brindis {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; max-width: calc(100% - 32px);
  background: var(--tinta); color: #fff;
  border-radius: var(--radio-chico);
  font-size: 16px; box-shadow: var(--sombra-alta);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.brindis[data-visible='1'] { opacity: 1; transform: translate(-50%, 0); }
.brindis__marca { width: 18px; height: 4px; background: var(--marca); border-radius: 1px; flex: none; }

/* ---------------------------------------------------------------------
   Entrada en escena
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .aparece { animation: sube .32s cubic-bezier(.22, .7, .3, 1) backwards; }
  @keyframes sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------------- */

.prosa { max-width: 76ch; }
.nowrap { white-space: nowrap; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila--sep { justify-content: space-between; }
/* Botones que van juntos en una celda estrecha: no se parten en dos renglones. */
.fila--junta { flex-wrap: nowrap; gap: 7px; }
.crece { flex: 1; min-width: 0; }
.tenue { color: var(--gris); }
.mini { font-size: 15px; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Texto solo para lectores de pantalla. Sin position:absolute a propósito:
   dentro de una tabla con scroll horizontal, un absoluto sin ancestro
   posicionado se cuelga del bloque inicial, se escapa del contenedor y
   estira la página entera. Esta versión se queda en el flujo. */
.solo-lectores {
  display: inline-block;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* Una pista que solo tiene sentido cuando la tabla se desliza. */
.solo-movil { display: none; }
@media (max-width: 780px) { .solo-movil { display: block; } }
.tira-demo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 12px; border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--marca) 32%, transparent);
  color: #4a4300; border: 1px solid color-mix(in srgb, var(--marca) 60%, transparent);
}

@media print {
  .barra, .tope, .cabecera-seccion__acciones, .brindis, .acciones-edicion, .vista-alterna { display: none !important; }
  .portal { grid-template-columns: 1fr; }
  .placa, .respuesta { break-inside: avoid; box-shadow: none; }
  .respuesta { background: #fff; color: #000; border: 2px solid #000; }
  .respuesta h2, .respuesta__cifra b, .respuesta p, .respuesta .ceja { color: #000; }
  details.acordeon > summary::after { display: none; }
  .acordeon__cuerpo { display: block !important; }
}