/* =========================================================
   Expo Eval — Editorial dark theme
   ========================================================= */

:root {
  --bg:         #0c0c0f;
  --bg-elev:   #131318;
  --bg-card:   #18181f;
  --border:    #23232c;
  --border-strong: #2e2c3a;
  --ink:       #e3e5f5;
  --ink-dim:   #9a99b8;
  --ink-mute:  #70738a;
  --accent:    #5b9cf6;
  --accent-soft: #5b9cf622;
  --danger:    #d94c4c;
  --ok:        #6fb45c;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Reemplaza el anillo amarillo del navegador por un glow azul propio */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Evita el fondo amarillo de autocompletado de Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-image: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------- Layout ------- */
.app-shell { max-width: 720px; margin: 0 auto; padding: 16px 18px 80px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 22px;
  max-width: 720px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.topbar .user {
  font-size: 13px;
  color: var(--ink-dim);
  text-align: right;
  line-height: 1.2;
}
.topbar .user strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.nav-pills {
  display: flex;
  gap: 6px;
  padding: 12px 18px 0;
  max-width: 720px;
  margin: 0 auto;
  overflow-x: auto;
}
.nav-pills a {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  white-space: nowrap;
}
.nav-pills a.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 600;
}

/* ------- Tipografía ------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: 30px; line-height: 1.1; }
h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
h2 { font-size: 22px; margin-bottom: 10px; }
h3 { font-size: 17px; font-family: var(--font-body); font-weight: 600; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 8px;
}

/* ------- Cards ------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.card .meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ------- Lista de materias / proyectos ------- */
.list-item {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.list-item:hover, .list-item:focus {
  border-color: var(--accent);
  text-decoration: none;
}
.list-item:active { transform: scale(0.99); }
.list-item .title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.list-item .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.list-item .pill {
  font-size: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
  white-space: nowrap;
}
.list-item .submeta {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 4px;
}

/* ------- Formularios ------- */
label { font-size: 13px; color: var(--ink-dim); display: block; margin-bottom: 6px; font-weight: 500; }

input[type=text], input[type=number], input[type=password], input[type=email],
input[type=tel], textarea, select {
  width: 100%;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;     /* 16px evita el zoom de iOS */
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}
textarea { resize: vertical; min-height: 80px; }

.form-row { margin-bottom: 14px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #06122e;
  border: none;
  border-radius: var(--r);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  letter-spacing: 0.01em;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn.block { display: block; width: 100%; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  font-size: 13px;
  padding: 8px 12px;
}

.hint {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 6px 0 0;
}

/* ------- Panel plegable (creación masiva) ------- */
details.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
details.panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after {
  content: "+";
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
}
details.panel[open] > summary { color: var(--ink); }
details.panel[open] > summary::after { content: "–"; }
details.panel .panel-body { padding: 2px 18px 18px; }

details.sub { margin-bottom: 14px; }
details.sub > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  list-style: none;
}
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::before { content: "+ "; }
details.sub[open] > summary::before { content: "– "; }

/* ------- Chips de estudiantes ------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 13px;
  font-size: 14px;
  line-height: 1.2;
}
.chip.assigned { color: var(--ink-dim); border-color: var(--border); }
.chip .x {
  background: none;
  border: none;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 999px;
}
.chip .x:hover { color: var(--danger); }

/* ------- Selector de integrantes ------- */
.picker-actions {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; margin: 0; }
.pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pick span {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.pick span:hover { border-color: var(--accent); }
.pick input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #06122e;
  font-weight: 600;
}
.pick input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* =========================================================
   Registro de expositores
   ========================================================= */
.pub-angosto { max-width: 640px; }
.pub-hero-corto { padding: 40px 0 10px; border-bottom: none; }
.pub-hero-corto h1 { font-size: clamp(30px, 6.5vw, 44px); }

.pub-nav a.pub-destacado {
  color: var(--accent);
  border: 1px solid var(--accent);
}

.opcional { color: var(--ink-mute); font-weight: 400; }

.fila-integrante {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .fila-integrante { grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
}

.codigo-grande {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 48px);
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 20px 0 0;
}

/* ------- Llamado desde la landing ------- */
.cta-registro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.cta-registro h2 { margin: 0 0 8px; }
.cta-botones { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cta-botones .btn { text-decoration: none; white-space: nowrap; }
.cta-botones .btn:hover { text-decoration: none; }
.link-consulta { font-size: 12.5px; color: var(--ink-mute); }

.aviso-nota {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid #4a3a18;
  background: #2b2312;
  border-radius: var(--r);
  color: #ffc861;
  font-size: 13px;
  line-height: 1.55;
}

/* =========================================================
   Guía de montaje para expositores
   ========================================================= */
.pub-medio { max-width: 780px; }

.alert-guia {
  border: 1px solid var(--border-strong);
  border-left: 3px solid #ffc861;
  border-radius: var(--r);
  background: var(--bg-card);
  padding: 14px 16px;
  margin: 18px 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.alert-guia strong { color: #ffc861; }

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.indice a {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-dim);
}
.indice a:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }

.bloque-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.bloque-sala {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--sala, var(--accent));
}
.bloque-sala .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sala, var(--accent));
}

.requisitos { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: req; }
.requisito {
  counter-increment: req;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px 18px 58px;
  margin-bottom: 12px;
}
.requisito::before {
  content: counter(req);
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--sala, var(--accent));
  opacity: 0.8;
}
.requisito.grave { border-color: #5a2424; background: #26161a; }
.requisito.grave::before { color: var(--danger); }

.req-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.req-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.req-etiqueta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  border: 1px solid;
}
.req-etiqueta.obl    { color: var(--ink-dim); border-color: var(--border-strong); background: var(--bg-elev); }
.req-etiqueta.opt    { color: var(--ok); border-color: #2e4823; background: #1d2d18; }
.req-etiqueta.alerta { color: var(--danger); border-color: #5a2424; background: #3a1a1a; }

.req-desc { font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; margin: 8px 0 0; }
.req-lista { margin: 10px 0 0; padding-left: 18px; }
.req-lista li { font-size: 14px; color: var(--ink); padding: 3px 0; }
.req-lista li::marker { color: var(--ink-mute); }

.req-ejemplo {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--ink);
}
.req-ejemplo span { word-break: break-word; }

.req-nota { font-size: 13px; color: var(--ink-mute); margin: 12px 0 0; line-height: 1.55; }
.req-no {
  font-size: 13.5px;
  color: #f4a8a8;
  margin: 12px 0 0;
  line-height: 1.55;
}
.req-no::before { content: "✕ "; font-weight: 700; }

.montaje.extras li { font-size: 13px; padding: 6px 13px; }

.filosofia {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  background: var(--bg-card);
}
.filosofia p:last-child {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* ------- Lista de estudiantes registrados (vista del docente) ------- */
.registrados {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.registrados li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.registrados li:first-child { border-top: none; }
.registrados li:nth-child(even) { background: var(--bg-elev); }
.reg-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.reg-nombre { font-size: 14.5px; color: var(--ink); }
.reg-correo { font-size: 12.5px; color: var(--ink-mute); }
.reg-proyecto {
  font-size: 12.5px;
  color: var(--ink-dim);
  font-style: italic;
  text-align: right;
}

/* ------- Solicitudes (vista del docente y del estudiante) ------- */
.solicitud {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.sol-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sol-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.estado {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  border: 1px solid;
}
.estado.pend { color: #ffc861; border-color: #4a3a18; background: #2b2312; }
.estado.ok   { color: var(--ok); border-color: #2e4823; background: #1d2d18; }
.estado.no   { color: var(--danger); border-color: #5a2424; background: #3a1a1a; }

.sol-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 4px 0 0;
}
.sol-meta strong { color: var(--ink-dim); letter-spacing: 0.1em; }
.sol-desc {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 12px 0 0;
}
.sol-equipo { list-style: none; padding: 0; margin: 14px 0 0; }
.sol-equipo li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.sol-equipo li em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.sol-contacto {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 12px 0 0;
}
.sol-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sol-acciones details.sub { margin: 0; }
.sol-nota { font-size: 13.5px; margin: 16px 0 0; line-height: 1.55; }
.sol-nota.ok { color: var(--ok); }
.sol-nota.no { color: #f4a8a8; }
.sol-nota.pend { color: var(--ink-mute); font-style: italic; }
.sol-revisada { padding: 12px 0; border-top: 1px solid var(--border); }
.sol-revisada:first-child { border-top: none; padding-top: 0; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.list-item .pill.alerta {
  background: #2b2312;
  color: #ffc861;
}

/* =========================================================
   Certificado a pantalla completa
   =========================================================
   Tres reglas mandan aquí y explican todo lo demás:

   1. TODOS LOS CERTIFICADOS OCUPAN LO MISMO. La hoja tiene
      proporción fija de A4 apaisado y las filas del cuerpo tienen
      altura fija, se llenen o no. Un certificado sin compañeros de
      equipo deja el renglón vacío en vez de encogerse: si dos
      certificados del mismo evento no se superponen exactamente al
      imprimirlos, algo está mal.

   2. NADA HACE WRAP. Ni un nombre largo, ni un título de proyecto,
      ni una lista de seis compañeros. Lo que no cabe se encoge con
      la hoja y, en el peor caso, se corta con puntos suspensivos.
      Un renglón que se parte en dos desplaza todo lo de abajo y
      rompe la regla 1.

   3. CADA EVENTO SE VE COMO ÉL. La estructura es la misma para los
      cinco, pero la tipografía, el papel, el filo y el color salen
      de la identidad de cada uno: la Expo es editorial, el torneo
      lleva las esquinas cortadas, la jam es de consola, el festival
      es de cartel y una salida es papel de verdad.

   Todo el tamaño va en cqw —porcentaje del ancho de la hoja— y no
   en px ni en vw: así la hoja entera escala como un bloque, en
   pantalla grande, en un celular y en el PDF, sin que ninguna pieza
   se salga de su sitio.
   ========================================================= */
.cert-pantalla {
  /* La medalla: la pone el premio y le gana al color del evento. */
  --medalla: var(--accent);
  --brillo: #5b9cf622;

  /* El papel y su tinta. */
  --fondo: var(--bg);
  --hoja: var(--bg-card);
  --hoja-ink: var(--ink);
  --hoja-dim: var(--ink-dim);
  --hoja-mute: var(--ink-mute);
  --hoja-borde: var(--border-strong);
  --hoja-filo: var(--border);

  /* Las tres letras: la del nombre, la de los rótulos y la del texto. */
  --hoja-nombre: var(--font-display);
  --hoja-rotulo: var(--font-body);
  --hoja-body: var(--font-body);
  --nombre-peso: 500;
  --nombre-caja: none;
  --nombre-espacio: -0.025em;

  --hoja-radio: var(--r-lg);
  --hoja-sombra: 0 24px 70px #00000066;
  /* El anillo interior grueso, para el que lo quiera. Va de sombra y no de
     borde por lo mismo que el filo de arriba: un borde cambia la caja. */
  --hoja-marco: inset 0 0 0 0 transparent;
  --hoja-filo-alto: 0.5cqw;
  --hoja-filo-color: var(--medalla);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 18px 40px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--brillo), transparent 60%),
    var(--fondo);
}

.cert-pantalla.oro    { --medalla: #ffc861; --brillo: #ffc86126; }
.cert-pantalla.plata  { --medalla: #cfd6e6; --brillo: #cfd6e622; }
.cert-pantalla.bronce { --medalla: #e0955c; --brillo: #e0955c22; }
.cert-pantalla.part   { --medalla: var(--accent); --brillo: #5b9cf61f; }

/* ---------- La hoja ---------- */
/* aspect-ratio + container-type es lo que hace cumplir la regla 1: la
   caja mide siempre lo mismo en proporción, y todo lo de adentro se
   mide contra ella con cqw. */
.cert {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 297 / 210;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  color: var(--hoja-ink);
  font-family: var(--hoja-body);
  /* 1 px en los cuatro lados y el MISMO para todos los eventos. El filo de
     color de arriba se pinta de fondo, no de borde: un borde entra en la
     caja, así que cuando cada evento tenía el suyo —6 px la Expo, 7 el
     torneo, 0 el festival— el contenido arrancaba a distinta altura en cada
     uno. Peor todavía: un borde lateral más grueso encoge el cuadro de
     consulta y con él el valor del cqw, o sea que TODO cambiaba de tamaño.
     De fondo no ocupa nada y los cinco miden igual. */
  border: 1px solid var(--hoja-borde);
  border-radius: var(--hoja-radio);
  background-color: var(--hoja);
  background-image: linear-gradient(var(--hoja-filo-color), var(--hoja-filo-color));
  background-size: 100% var(--hoja-filo-alto);
  background-repeat: no-repeat;
  background-position: top left;
  box-shadow: var(--hoja-marco), var(--hoja-sombra);
}

/* El filete interior. Va en porcentaje y no en cqw porque el propio
   contenedor no puede medirse contra sí mismo; los dos valores están
   compensados por la proporción de la hoja para que el margen se vea
   igual de ancho arriba que a los lados. */
.cert::after {
  content: "";
  position: absolute;
  inset: 1.7% 1.2%;
  border: 1px solid var(--hoja-filo);
  border-radius: calc(var(--hoja-radio) - 6px);
  pointer-events: none;
}

/* La hoja es el contenedor; el contenido va en una capa aparte para
   poder medir sus márgenes en cqw. */
/* Las tres bandas van a altura FIJA, no auto: con `auto`, la cabecera la
   medía la tipografía de cada evento —Anton, Space Mono y Fraunces no
   tienen la misma caja— y el cuerpo arrancaba hasta 7 px más arriba en
   unos que en otros. La hoja medía lo mismo, pero por dentro no coincidían.
   Con las bandas fijas, dos certificados de eventos distintos se
   superponen exactos. */
.cert-hoja {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 5.2cqw 1fr 11.5cqw;
  padding: 4.6cqw 5.6cqw 3.6cqw;
}

/* ---------- Cabecera ---------- */
.cert-top { text-align: center; min-width: 0; }
.cert-top p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cert-institucion {
  font-family: var(--hoja-nombre);
  font-size: 2.1cqw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hoja-ink);
  margin: 0;
}
.cert-programa {
  font-family: var(--hoja-rotulo);
  font-size: 1.15cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hoja-mute);
  margin: 0.7cqw 0 0;
}

/* ---------- Cuerpo ---------- */
/* Ocho renglones de altura fija, siempre los ocho. El align-content
   centrado reparte la holgura igual en todos los certificados, así que
   dos hojas distintas caen exactamente en el mismo sitio. */
.cert-cuerpo {
  display: grid;
  grid-template-rows: 7.2cqw 2.4cqw 2cqw 6.6cqw 2.2cqw 4cqw 2cqw 2.6cqw;
  align-content: center;
  justify-items: center;
  gap: 1.4cqw 0;
  text-align: center;
  min-width: 0;
}

/* La regla 2, en una sola declaración para todo el cuerpo. */
.cert-cuerpo > * {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

.cert-sello {
  width: 7.2cqw;
  height: 7.2cqw;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 0.22cqw solid var(--medalla);
  box-shadow: 0 0 0 0.55cqw var(--brillo);
  color: var(--medalla);
  font-family: var(--hoja-nombre);
  font-size: 3.2cqw;
  line-height: 1;
  overflow: visible;
}

.cert-puesto {
  font-family: var(--hoja-rotulo);
  font-size: 1.5cqw;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--medalla);
}
.cert-otorga {
  font-family: var(--hoja-nombre);
  font-size: 1.5cqw;
  font-style: italic;
  color: var(--hoja-mute);
}
.cert-nombre {
  font-family: var(--hoja-nombre);
  font-size: 5cqw;
  font-weight: var(--nombre-peso);
  text-transform: var(--nombre-caja);
  letter-spacing: var(--nombre-espacio);
  line-height: 1.15;
  color: var(--hoja-ink);
}
.cert-motivo {
  font-size: 1.65cqw;
  color: var(--hoja-dim);
}
.cert-obra {
  font-family: var(--hoja-nombre);
  font-size: 2.9cqw;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hoja-ink);
}
.cert-donde {
  font-family: var(--hoja-rotulo);
  font-size: 1.25cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--medalla);
}
.cert-equipo {
  font-size: 1.4cqw;
  color: var(--hoja-mute);
}
.cert-equipo span {
  font-size: 1.05cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 0.7cqw;
}

/* ---------- Pie ---------- */
.cert-pie {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  align-self: end;
  gap: 0 3cqw;
  padding-top: 2cqw;
  border-top: 1px solid var(--hoja-filo);
}
.cert-pie > * { min-width: 0; }
.cert-pie strong,
.cert-pie em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-firma { height: 6.4cqw; display: flex; flex-direction: column; justify-content: flex-end; }
.cert-linea {
  display: block;
  width: 22cqw;
  max-width: 100%;
  height: 1px;
  background: var(--hoja-borde);
  margin-bottom: 0.9cqw;
}
.cert-firma strong {
  font-family: var(--hoja-nombre);
  font-size: 1.75cqw;
  font-weight: 500;
  color: var(--hoja-ink);
}
.cert-firma em,
.cert-fecha em {
  font-style: normal;
  font-size: 1.2cqw;
  color: var(--hoja-mute);
  margin-top: 0.2cqw;
}
.cert-fecha { text-align: right; }
.cert-fecha strong {
  font-size: 1.4cqw;
  font-weight: 500;
  color: var(--hoja-dim);
}
.cert-fecha em { letter-spacing: 0.1em; }

/* El QR, pegado al filo derecho. Ya no lleva ni fondo ni relleno del CSS:
   el papelito y su margen vienen dentro del propio SVG, teñidos del color
   del evento, así que el cuadro es una sola pieza y no un recorte blanco
   pegado encima. El filo lo cose a la hoja. */
.cert-qr { text-align: right; }
.cert-qr svg {
  display: block;
  margin-left: auto;
  width: 9.4cqw;
  height: 9.4cqw;
  border: 1px solid var(--hoja-filo);
  border-radius: 0.8cqw;
  /* El fondo del QR es un <rect> de esquinas cuadradas: sin esto asoma
     por fuera del radio y el borde redondeado se ve mal cosido. */
  overflow: hidden;
}

/* =========================================================
   La identidad de cada evento
   =========================================================
   Cambia el papel, la letra y el filo. NUNCA cambia la
   estructura ni las alturas: eso es lo que mantiene la regla 1.
   Los colores salen de la hoja de cada evento (vc.css, jam.css,
   music.css, salidas.css) y están copiados aquí porque el
   certificado se sirve siempre con styles.css —head.ejs
   REEMPLAZA la hoja entera cuando se le pasa una, así que cargar
   vc.css se llevaría por delante todo este bloque—.
   ========================================================= */

/* --- Expo Multimedia: editorial. Es el que ya estaba. --- */
.cert-pantalla.evento-expo { --hoja-nombre: "Fraunces", "Times New Roman", serif; }

/* --- Virtual Champions: condensada, mayúsculas y las esquinas
       cortadas en diagonal, que son la firma visual del torneo. --- */
.cert-pantalla.evento-virtual-champions {
  --fondo: #0a0b0e;
  --hoja: #14161d;
  --hoja-ink: #eef0f6;
  --hoja-dim: #9aa0b4;
  --hoja-mute: #666d80;
  --hoja-borde: #333846;
  --hoja-filo: #22252f;
  --hoja-nombre: "Archivo", "Arial Narrow", sans-serif;
  --hoja-rotulo: "Archivo", "Arial Narrow", sans-serif;
  --nombre-peso: 700;
  --nombre-caja: uppercase;
  --nombre-espacio: 0.005em;
  --hoja-radio: 0px;
  --hoja-filo-alto: 0.55cqw;
}
.cert-pantalla.evento-virtual-champions.part { --medalla: #ff4655; --brillo: #ff46551f; }
.cert-pantalla.evento-virtual-champions .cert {
  clip-path: polygon(1.9% 0, 100% 0, 100% 97.3%, 98.1% 100%, 0 100%, 0 2.7%);
}
.cert-pantalla.evento-virtual-champions .cert-nombre,
.cert-pantalla.evento-virtual-champions .cert-institucion,
.cert-pantalla.evento-virtual-champions .cert-obra,
.cert-pantalla.evento-virtual-champions .cert-firma strong {
  font-variation-settings: "wdth" 75;
}
.cert-pantalla.evento-virtual-champions .cert-obra { text-transform: uppercase; }

/* --- Jam de Altura: consola de 8 bits.
       Space Mono en todo, y NO Press Start 2P, que era la primera idea:
       esa tipografía no trae ni la Ñ ni las vocales acentuadas, así que
       "LOS ALTUREÑOS" salía como "LOS ALTUREñOS" y "PROGRAMACIÓN" como
       "PROGRAMACIóN" —el navegador cambia de letra a mitad de palabra
       para el glifo que falta—. En un certificado con nombres propios
       eso no es un detalle. Lo de 8 bits se sostiene igual con el sello
       cuadrado, el marco duro y la sombra sin difuminar. --- */
.cert-pantalla.evento-jam-de-altura {
  --fondo: #10091f;
  --hoja: #1a1030;
  --hoja-ink: #f0ecff;
  --hoja-dim: #b3a8d6;
  --hoja-mute: #7d74a0;
  --hoja-borde: #3b2f5e;
  --hoja-filo: #2b2148;
  --hoja-nombre: "Space Mono", "SFMono-Regular", monospace;
  --hoja-rotulo: "Space Mono", "SFMono-Regular", monospace;
  --hoja-body: "Space Mono", "SFMono-Regular", monospace;
  --nombre-peso: 700;
  --nombre-espacio: -0.03em;
  --hoja-radio: 0px;
  --hoja-sombra: 1.2cqw 1.2cqw 0 0 #00000066;
  /* El marco gordo de consola, por dentro y sin tocar la caja. */
  --hoja-marco: inset 0 0 0 0.3cqw var(--hoja-borde);
  --hoja-filo-alto: 0.55cqw;
}
.cert-pantalla.evento-jam-de-altura.part { --medalla: #7cf74a; --brillo: #7cf74a1f; }
.cert-pantalla.evento-jam-de-altura .cert::after { border-radius: 0; }
.cert-pantalla.evento-jam-de-altura .cert-sello { border-radius: 0; }
/* La monoespaciada traza más ancho que las otras cuatro: el tracking de
   los rótulos se recorta un poco para que "Mejor apartado artístico"
   siga entrando en su renglón. */
.cert-pantalla.evento-jam-de-altura .cert-puesto { letter-spacing: 0.26em; text-indent: 0.26em; }
.cert-pantalla.evento-jam-de-altura .cert-donde { letter-spacing: 0.13em; }
.cert-pantalla.evento-jam-de-altura .cert-otorga { font-style: normal; }

/* --- Multimedia Music Fest: cartel. Anton en mayúsculas y la
       franja de magenta a naranja del degradado de la casa. --- */
.cert-pantalla.evento-music-fest {
  --fondo: #0a0710;
  --hoja: #1b152a;
  --hoja-ink: #f7f3ff;
  --hoja-dim: #b9aed2;
  --hoja-mute: #7d7391;
  --hoja-borde: #483d66;
  --hoja-filo: #2e2740;
  --hoja-nombre: "Anton", "Archivo", sans-serif;
  --hoja-rotulo: "Archivo", sans-serif;
  --nombre-peso: 400;
  --nombre-caja: uppercase;
  --nombre-espacio: 0.01em;
  --hoja-radio: 0.6cqw;
  --hoja-filo-alto: 0.6cqw;
}
.cert-pantalla.evento-music-fest.part { --medalla: #ff2d78; --brillo: #ff2d781f; }
/* Aquí el filo de arriba no es plano: es el degradado de la casa. */
.cert-pantalla.evento-music-fest .cert {
  background-image: linear-gradient(90deg, #ff2d78, #ff8a3d);
}
.cert-pantalla.evento-music-fest .cert-obra,
.cert-pantalla.evento-music-fest .cert-institucion { text-transform: uppercase; }
.cert-pantalla.evento-music-fest .cert-otorga { font-family: var(--hoja-rotulo); font-style: italic; }

/* --- Salidas pedagógicas: papel de verdad. Es el único claro, y
       tiene que serlo: una constancia de asistencia se imprime y se
       entrega en la mano, no se comparte en una historia. --- */
.cert-pantalla.evento-salidas {
  --fondo: #efe9dc;
  --hoja: #fffdf8;
  --hoja-ink: #201d16;
  --hoja-dim: #56503f;
  --hoja-mute: #8a8271;
  --hoja-borde: #c3b79e;
  --hoja-filo: #ddd4c2;
  --hoja-nombre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hoja-rotulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --nombre-peso: 600;
  --nombre-espacio: -0.015em;
  --hoja-radio: 0.4cqw;
  --hoja-sombra: 0 1.4cqw 3cqw #201d1622;
}
.cert-pantalla.evento-salidas { --medalla: #1f6b4a; --brillo: #1f6b4a1a; }
.cert-pantalla.evento-salidas .cert-verificado,
.cert-pantalla.evento-salidas .cert-volver { color: #56503f; }

/* Los botones y el texto de fuera de la hoja NO heredan nada de esto:
   viven en styles.css, que es un tema oscuro, así que su tinta clara
   sobre este papel no se veía. Es el único evento con la página clara y
   por eso es el único que tiene que repintarlos. */
.cert-pantalla.evento-salidas .btn {
  background: #1f6b4a;
  color: #fffdf8;
}
.cert-pantalla.evento-salidas .btn.ghost {
  background: transparent;
  color: #201d16;
  border-color: #c3b79e;
}
.cert-pantalla.evento-salidas .btn.ghost:hover { background: #efe9dc; }

/* ---------- Lo de fuera de la hoja ---------- */
.cert-acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cert-acciones .btn { min-width: 150px; }
.cert-volver { font-size: 13px; color: var(--ink-mute); padding: 0 8px; white-space: nowrap; }
.cert-verificado {
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

/* En pantalla angosta la hoja se encoge entera —no se reacomoda—, así
   que lo único que sobra son los botones, que sí pueden apilarse
   porque no son parte del certificado. */
@media (max-width: 560px) {
  .cert-pantalla { padding: 16px 12px 32px; }
  .cert-acciones { flex-wrap: wrap; }
}

/* Guardar como PDF: solo el certificado, sobre blanco, en UNA página.
   La proporción es la misma que en pantalla, así que lo que se ve es lo
   que se imprime. */
@media print {
  @page { size: landscape; margin: 8mm; }
  html, body { height: auto; margin: 0; background: #fff; }
  .cert-acciones, .cert-verificado { display: none; }
  .cert-pantalla {
    display: block;
    min-height: 0;
    height: auto;
    padding: 0;
    background: #fff;
  }

  /* En papel manda el papel: todos los eventos se imprimen claros.
     El torneo, la jam y el festival tienen la hoja oscura en pantalla, y
     eso en una impresora son cuatro caras de tóner por certificado —y en
     una fotocopiadora del campus, una hoja negra que además se corre—.
     La identidad no se pierde: el filo, la medalla, el color del sello y
     la tipografía de cada evento siguen ahí. Lo que se va es el fondo.

     El [class] está para pesar lo mismo que las reglas de evento
     —.cert-pantalla.evento-x, que definen estos mismos tokens— y ganarles
     por orden de aparición. Sin él, una @media no cambia nada: las
     consultas de medios no suman especificidad, así que .cert-pantalla a
     secas perdía contra ellas y solo se aclaraban la Expo (que no toca el
     papel) y las salidas (que ya eran claras). Sirve para cualquier
     evento que se agregue después, sin tener que acordarse de esto. */
  .cert-pantalla[class] {
    --hoja: #fff;
    --hoja-ink: #111;
    --hoja-dim: #333;
    --hoja-mute: #666;
    --hoja-borde: #bbb;
    --hoja-filo: #ddd;
    /* Transparente y no `none`: la sombra va en una lista junto al marco
       interior, y `none` no es válido dentro de una lista de sombras. */
    --hoja-sombra: 0 0 0 0 transparent;
  }

  /* La clave de que quepa en una página: la hoja se mide por el ancho
     disponible O por lo que dé el alto de la página, lo que sea menor.
     Dimensionarla solo por ancho —que es lo que hace width:100%— la
     dejaba 6 mm más alta que el papel y eso son dos páginas: una con el
     certificado y otra con su última franja.

     Sirve igual en A4 que en Carta, que son apaisados de proporción
     distinta, porque nunca se fija el alto a mano. */
  .cert {
    width: min(100%, calc(98vh * 1.4143));
    max-width: none;
    height: auto;
    margin: 0 auto;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Que el color del evento llegue al papel: el filo, la medalla y la
     franja del festival son la identidad, no decoración de pantalla. */
  .cert, .cert-hoja, .cert-sello, .cert-puesto, .cert-donde, .cert-qr svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ------- Semestres ------- */
.periodo-actual {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 11px;
  margin: 10px 0 0;
}
.periodo-actual.pasado { color: #ffc861; border-color: #4a3a18; background: #2b2312; }

.punto-activo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ok);
  margin-left: 6px;
  vertical-align: middle;
}
.filtro.activo .punto-activo { background: var(--ok); }

.aviso-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  border: 1px solid #4a3a18;
  background: #2b2312;
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #ffc861;
}
.aviso-periodo strong { color: #ffd98a; }
.aviso-periodo .btn { white-space: nowrap; }

.pick-linea {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-dim);
  cursor: pointer;
  margin: 0;
}
.pick-linea input { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }

/* ------- Podio y lista de certificados (vista del docente) ------- */
.podio { list-style: none; padding: 0; margin: 0; }
.podio li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-mute);
  border-radius: var(--r);
  margin-bottom: 8px;
}
.podio .podio-1 { border-left-color: #ffc861; }
.podio li.podio-1 { border-left-color: #ffc861; }
.podio li.podio-2 { border-left-color: #cfd6e6; }
.podio li.podio-3 { border-left-color: #e0955c; }
.podio-puesto {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-dim);
  min-width: 30px;
}
.podio-titulo { flex: 1; font-size: 15px; color: var(--ink); }
.podio-nota {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.lista-cert { list-style: none; padding: 0; margin: 0; }
.lista-cert li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.lista-cert li:first-child { border-top: none; }
.cert-medalla {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink-mute);
}
.cert-medalla.oro    { background: #ffc861; }
.cert-medalla.plata  { background: #cfd6e6; }
.cert-medalla.bronce { background: #e0955c; }
.cert-medalla.part   { background: var(--border-strong); color: var(--ink-dim); }
.cert-quien { flex: 1; min-width: 0; }
.cert-quien strong { display: block; font-size: 14px; font-weight: 500; }
.cert-quien em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cert-link {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
}

/* ------- Login ------- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
}
.login-card .logo {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.login-card .logo em { font-style: italic; color: var(--accent); font-weight: 400; }
.login-card .tag {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 26px;
}

/* ------- Rúbrica de calificación ------- */
.crit-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.crit-row .crit-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}
.score-buttons {
  display: flex;
  gap: 6px;
}
.score-btn {
  flex: 1;
  padding: 14px 0;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.score-btn:hover { border-color: var(--accent); }
.score-btn.selected {
  background: var(--accent);
  color: #1a1206;
  border-color: var(--accent);
}

/* ------- Tablero / ranking ------- */
.rank-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
}
.rank-item .pos {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.rank-item.top1 .pos { color: var(--accent); }
.rank-item .title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
}
.rank-item .submeta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.rank-item .score {
  text-align: right;
}
.rank-item .score .big {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.rank-item .score .small {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rank-item .score .no-data {
  color: var(--ink-mute);
  font-style: italic;
  font-size: 14px;
}

.tablero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 600;
}
.live-dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ok);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ------- Alerts ------- */
.alert {
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}
.alert.err { background: #3a1a1a; color: #f4a8a8; border: 1px solid #5a2424; }
.alert.ok  { background: #1d2d18; color: #b6e0a4; border: 1px solid #2e4823; }

/* ------- Detalles ------- */
details.criterio-detail {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-dim);
}
details.criterio-detail summary {
  cursor: pointer;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
details.criterio-detail .crit-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding-top: 8px;
}

/* ------- Acciones secundarias ------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 24px 0 12px;
}
.section-head h2 { margin: 0; }
.section-head .count {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--ink-mute);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  font-style: italic;
  font-family: var(--font-display);
}

.integrantes-list {
  font-size: 14px;
  color: var(--ink-dim);
  white-space: pre-wrap;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 8px 0 18px;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.back-link::before { content: "← "; }

/* ------- Rúbrica individual ------- */
.member-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px 10px;
  margin-bottom: 14px;
  background: var(--bg-elev);
}
.member-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.member-name::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ------- Resumen individual (promedio todos los jueces) ------- */
.resumen-ind-grid {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 13px;
}
.resumen-ind-head,
.resumen-ind-row {
  display: grid;
  /* nombre + N criterios IND + promedio + jueces */
  grid-template-columns: 1fr repeat(3, 90px) 80px 52px;
  gap: 0;
  align-items: center;
}
.resumen-ind-head {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.resumen-ind-head > div,
.resumen-ind-row  > div {
  padding: 10px 12px;
}
.resumen-ind-row {
  border-bottom: 1px solid var(--border);
}
.resumen-ind-row:last-child { border-bottom: none; }
.resumen-ind-row:nth-child(even) { background: var(--bg-elev); }
.resumen-nombre {
  font-weight: 500;
  color: var(--ink);
}
.resumen-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.resumen-val.mute { color: var(--ink-mute); }
.resumen-total {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
.resumen-total.mute { color: var(--ink-mute); }

/* =========================================================
   Landing pública de la Expo Multimedia
   ========================================================= */

/* Acentos por categoría — mismos colores que el tablero del plan */
.cat-code     { --sala: #9a8bff; }
.cat-story    { --sala: #ff8a66; }
.cat-realtime { --sala: #4cdfb6; }
.cat-design   { --sala: #ffc861; }

.pub-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.pub-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.pub-brand em { font-style: italic; font-weight: 400; color: var(--accent); }
.pub-brand:hover { text-decoration: none; }
.pub-nav {
  display: flex;
  gap: 4px;
  /* margin-left:auto y no justify-content:flex-end: al desbordar, un flex
     alineado al final se corta por la izquierda y queda inalcanzable. */
  margin-left: auto;
  min-width: 0;          /* deja que el nav se encoja en vez de ensanchar la página */
  overflow-x: auto;
  scrollbar-width: none;
}
.pub-nav::-webkit-scrollbar { display: none; }
.pub-nav a {
  font-size: 13px;
  color: var(--ink-dim);
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.pub-nav a:hover { color: var(--ink); background: var(--bg-elev); text-decoration: none; }
.pub-nav a.pub-panel {
  color: var(--accent);
  border: 1px solid var(--border-strong);
}

.pub { max-width: 940px; margin: 0 auto; padding: 0 22px 40px; }

/* ------- Hero ------- */
.pub-hero { padding: 56px 0 44px; border-bottom: 1px solid var(--border); }
.pub-hero h1 {
  font-size: clamp(38px, 9vw, 68px);
  line-height: 1.02;
  margin: 6px 0 0;
}
.pub-hero .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 18px 0 0;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 30px 0 0;
}
.hero-meta span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 3px;
}
.hero-meta strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-cta { text-decoration: none; }
.hero-cta:hover { text-decoration: none; }

/* ------- Secciones ------- */
.pub-sec { padding: 46px 0 8px; scroll-margin-top: 70px; }
.pub-sec h2 { font-size: clamp(24px, 5vw, 32px); margin: 0 0 10px; }
.pub-sec .sec-lead {
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 62ch;
  margin: 0 0 26px;
}

/* ------- Salas ------- */
.salas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 14px;
}
.sala {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--sala, var(--accent));
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  scroll-margin-top: 70px;
}
.sala-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sala-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--sala, var(--accent));
  opacity: 0.85;
}
.cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}
.cat-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sala, var(--accent));
}
.sala h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.sala-lema {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sala, var(--accent));
  font-size: 15px;
  margin: 2px 0 12px;
}
.sala-desc { font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; margin: 0 0 14px; }
.montaje {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 14px;
}
.montaje li {
  font-size: 12px;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 11px;
}
.sala-horario {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin: 0 0 10px;
}
.sala-horario strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--sala, var(--ink));
  font-variant-numeric: tabular-nums;
}
.sala-horario .ext {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

.sala-pie {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.entregas { list-style: none; padding: 0; margin: 10px 0 0; }
.entregas li {
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.entregas .asig { display: block; color: var(--ink); font-weight: 500; }
.entregas .asig em {
  font-style: normal;
  color: var(--ink-mute);
  font-size: 11px;
  margin-left: 4px;
}
.entregas .ent { display: block; color: var(--ink-dim); margin-top: 2px; }
.sala details.sub > summary { color: var(--sala, var(--accent)); }

/* ------- Itinerario ------- */
.jornada {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.jornada span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 3px;
}
.jornada strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.jornada .por-confirmar strong { color: #ffc861; }
.jornada .estado-tent {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-dim);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.filtro {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.filtro:hover {
  color: var(--ink);
  border-color: var(--sala, var(--accent));
  text-decoration: none;
}
.filtro.activo {
  background: var(--sala, var(--ink));
  border-color: var(--sala, var(--ink));
  color: var(--bg);
  font-weight: 600;
}

.timeline { list-style: none; padding: 0; margin: 0; }
.franja {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.franja[hidden] { display: none; }
.franja-hora {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.franja-items { display: grid; gap: 16px; }

.acto {
  border-left: 3px solid var(--sala, var(--border-strong));
  padding-left: 15px;
}
.acto[hidden] { display: none; }
.acto.general { border-left-style: dashed; }
.acto-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  margin: 0;
}
.acto-tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sala, var(--ink-dim));
}
.acto-lugar { font-size: 12px; color: var(--ink-dim); }
.acto-rango {
  font-size: 12px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.acto h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 5px 0 0;
}
.acto-desc {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 6px 0 0;
}
.acto-aviso {
  font-size: 12px;
  font-style: italic;
  color: #ffc861;
  margin: 8px 0 0;
}

/* ------- Rúbrica pública ------- */
.rubrica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}
.rubrica-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.rubrica-col h4 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.rubrica-col ul { list-style: none; padding: 0; margin: 0; }
.rubrica-col li {
  font-size: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
}
.rubrica-col li:first-child { border-top: none; }

/* ------- Patrocinadores -------
   Una rejilla de logos ajenos, que es el contenido más impredecible de la
   página: cada marca llega con su proporción, su color de fondo y su tamaño.
   Por eso el logo no manda sobre la tarjeta —la tarjeta le da una caja fija y
   él se acomoda dentro con object-fit—. Así una marca con un logo enorme no
   deja de vecina a otra con uno diminuto.

   La caja lleva su propio fondo claro: los logotipos se diseñan para papel
   blanco y muchos vienen con su plato de color o en negro sobre transparente,
   que sobre el fondo casi negro de esta página desaparecería. */
/* auto-FILL y no auto-fit, que es lo que usan las otras rejillas de la hoja.
   La diferencia solo se nota cuando hay pocas marcas, que es justo el caso de
   una sección que empieza con una: auto-fit colapsa las columnas vacías y
   estira la única tarjeta a los novecientos píxeles del contenedor, con el
   logo perdido en el medio. auto-fill las conserva y la tarjeta mantiene su
   tamaño, esté sola o acompañada. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 14px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

a.logo:hover { border-color: var(--border-strong); text-decoration: none; }

.logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
  padding: 8px 10px;
  background: #f4f4f7;
  border-radius: var(--r);
}

.logo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.logo-nombre {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}

.logo-tipo {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------- Plano interactivo del lugar ------- */
.plano-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.plano {
  position: relative;
  width: 100%;
  background-color: var(--bg-elev);
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size:
    calc(100% / var(--cols, 12)) calc(100% / var(--filas, 10)),
    calc(100% / var(--cols, 12)) calc(100% / var(--filas, 10));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.espacio {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  transition: filter .14s, box-shadow .14s, border-color .14s;
}
.espacio:hover { filter: brightness(1.35); }
.espacio.sel { box-shadow: 0 0 0 2px var(--sala, var(--accent)) inset; }

.espacio.tipo-sala {
  background: var(--bg-card);
  background: color-mix(in srgb, var(--sala) 13%, var(--bg-card));
  border-color: var(--sala);
  color: var(--ink);
}
/* El rótulo tiene que caber dentro del rectángulo, y el nombre más largo
   —"Tras Bambalinas"— manda: a 18px se salía de su espacio en el plano. */
.espacio.tipo-sala .espacio-nombre {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.7vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sala);
}
.espacio.tipo-pasillo {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.espacio.tipo-acceso {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.espacio.tipo-servicio { background: var(--bg-elev); }
/* Espacios angostos y altos: la etiqueta va en vertical para que quepa */
.espacio.vert .espacio-nombre { writing-mode: vertical-rl; text-orientation: mixed; }

.plano-lado {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plano-detalle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  min-height: 150px;
  scroll-margin-top: 70px;
}
.det-vacio {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 15px;
  margin: 0;
}
.det-tipo {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin: 0;
}
.detalle h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.det-lema {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--sala, var(--accent));
  margin: 2px 0 0;
}
.det-horario {
  font-size: 13px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
}
.det-desc {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 10px 0 0;
}
.detalle .montaje { margin: 12px 0 0; }
.det-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--sala, var(--accent));
}

.plano-leyenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.plano-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.plano-leyenda .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sala, var(--ink-mute));
}
.plano-leyenda .leyenda-otros .dot {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
}

/* ------- Pie público ------- */
/* El pie, pegado abajo cuando la página es corta —un aviso de dos líneas, una
   consulta sin resultados— y empujado por el contenido cuando es larga. El
   :has() lo ata a las páginas que SÍ llevan pie: el certificado se centra solo
   en la pantalla y los paneles no tienen pie, y ninguno de los dos tiene por
   qué volverse una columna flexible por esto.

   El dvh va después del vh a propósito: en el móvil descuenta la barra del
   navegador, y el navegador que no lo entienda se queda con el vh de arriba. */
body:has(> .pub-foot) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* min-width: 0 y no el 'auto' de fábrica: el body es una columna flex, y un
   hijo flex se niega por defecto a encogerse por debajo de su contenido, así
   que basta un elemento ancho adentro para que estire la página entera y
   aparezca scroll horizontal. Con esto, lo que no cabe desborda su propia caja
   pero no arrastra al resto. */
body:has(> .pub-foot) > main { flex: 1 0 auto; min-width: 0; width: 100%; }

/* El pie. El marcado sale de views/partials/pie.ejs y es el mismo en las
   cuatro hojas del sitio; lo único que cambia es cómo lo viste cada una. */
.pub-foot-in {
  max-width: 940px;
  margin: 40px auto 0;
  padding: 20px 22px 34px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pub-foot strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  display: block;
}
.pub-foot span { font-size: 12px; color: var(--ink-mute); }
/* Los dos enlaces del pie —el índice del programa y el acceso de docentes—
   en fila, y envolviendo antes que salirse: en un teléfono caben uno debajo
   del otro, que es mejor que encogerlos hasta que no se lean. */
.pub-foot .der { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.foot-acceso {
  font-size: 12px;
  color: var(--ink-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
}
.foot-acceso:hover { color: var(--ink-dim); border-color: var(--border-strong); text-decoration: none; }

@media (max-width: 760px) {
  .plano-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .franja { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .franja-hora { font-size: 16px; }
  .acto { padding-left: 12px; }
  .acto-rango { margin-left: 0; }
  .pub-top { padding: 12px 16px; }
  .pub-brand { font-size: 17px; }
  .pub-nav a { padding: 7px 9px; font-size: 12.5px; }
  .pub { padding: 0 16px 32px; }
  .pub-hero { padding: 40px 0 34px; }
  .pub-foot-in { padding: 20px 16px 30px; margin-top: 28px; }
  .sala { padding: 16px 17px 18px; }
}

.logout-btn {
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  margin-top: 2px;
}
.logout-btn:hover { color: var(--danger); }

/* ---------------------------------------------------------------------
   EL CAMPO DE CORREO DE LOS LOGINS
   El dominio va escrito al lado del campo y no se teclea: en estas puertas
   el correo es siempre el de la universidad, así que pedir veinte
   caracteres iguales para todo el mundo es pedir por pedir. Quien pegue el
   correo entero entra igual; lo resuelve conDominio() en lib/correos.js.

   Va con dos cajas pegadas y no con un ::after dentro del input, que no
   existe: el input es un elemento de reemplazo y no admite pseudos.
   --------------------------------------------------------------------- */
.correo { display: flex; align-items: stretch; min-width: 0; }
.correo input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--r) 0 0 var(--r);
  border-right: 0;
}
.correo .dominio {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-elev);
  color: var(--ink-mute);
  font-size: 13.5px;
  white-space: nowrap;
}

/* El input enfocado pinta su borde; el sufijo tiene que acompañarlo o el
   campo se ve partido en dos por la mitad. */
.correo:focus-within input, .correo:focus-within .dominio { border-color: var(--accent); }