/* Sistema de diseño del portal.
 *
 * Los valores vienen del preset de Relume con que se diseñó la identidad
 * (node_modules/@relume_io/relume-tailwind) y de las clases utilitarias
 * del portal del aspirante. No inventar colores: la paleta es cerrada, y
 * agregarle tonos sueltos es como se desdibuja una identidad visual.
 */

:root {
  /* Escala neutral de Relume (colors.neutral) */
  --blanco: #ffffff;
  --neutral-lightest: #eeeeee;
  --neutral-lighter: #cccccc;
  --neutral-light: #aaaaaa;
  --neutral: #666666;
  --neutral-dark: #444444;
  --neutral-darker: #222222;
  --neutral-darkest: #111111;

  /* Colores de estado (paleta estándar de Tailwind) */
  --rojo-50: #fef2f2;
  --rojo-100: #fee2e2;
  --rojo-200: #fecaca;
  --rojo-500: #ef4444;
  --rojo-600: #dc2626;
  --rojo-700: #b91c1c;
  --verde-50: #f0fdf4;
  --verde-100: #dcfce7;
  --verde-600: #16a34a;
  --verde-800: #166534;
  --azul-50: #eff6ff;
  --azul-100: #dbeafe;
  --azul-200: #bfdbfe;
  --azul-500: #3b82f6;
  --azul-700: #1d4ed8;
  --azul-800: #1e40af;

  /* Sombras del preset Relume (boxShadow.small/medium/xlarge) */
  --sombra-small: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
  --sombra-medium: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
  --sombra-xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);

  /* El cuerpo va con la sans del sistema; Oswald y
     Montserrat solo aparecen en la identidad del navbar (NavbarLog). */
  --fuente-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fuente-oswald: 'Oswald', var(--fuente-sans);
  --fuente-montserrat: 'Montserrat', var(--fuente-sans);

  --alto-navbar: 73px; /* min-h-18 (4.5rem) + borde */
}

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

body {
  font-family: var(--fuente-sans);
  background: var(--neutral-lightest); /* bg-neutral-lightest */
  color: var(--neutral-darkest);
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.5;
}

a { color: inherit; }
svg.icono { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.oculto { display: none !important; }
/* Oculta visualmente sin sacar del flujo de foco (inputs de archivo) */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Navbar ============ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--alto-navbar);
  background: var(--blanco);
  border-bottom: 1px solid var(--neutral-lighter);
  box-shadow: var(--sombra-small);
  padding: 0 5%;
}
.navbar .logo img { height: 2rem; width: auto; display: block; transition: opacity 0.2s; }
.navbar .logo:hover img { opacity: 0.8; }

.navbar .hamburguesa {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  background: none; border: none; cursor: pointer;
}
.navbar .hamburguesa span {
  display: block;
  width: 1.5rem; height: 2px;
  margin: 3px 0;
  background: var(--neutral-darkest);
}

/* Identidad del usuario (avatar + nombre Oswald + correo Montserrat) */
.perfil { position: relative; }
.perfil-boton {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: none; border: none; border-radius: 0.5rem;
  cursor: pointer; font-family: inherit;
  transition: background-color 0.2s;
}
.perfil-boton:hover { background: var(--neutral-lightest); }
.avatar {
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  border: 2px solid var(--neutral-lighter);
  background: var(--neutral-lighter);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: var(--neutral-darkest);
}
.perfil-nombre {
  font-family: var(--fuente-oswald);
  font-size: 0.875rem; font-weight: 600;
  color: var(--neutral-darkest);
  text-align: left;
}
.perfil-correo {
  font-family: var(--fuente-montserrat);
  font-size: 0.75rem; color: var(--neutral);
  text-align: left;
}
.perfil-flecha { width: 1rem; height: 1rem; color: var(--neutral-darkest); transition: transform 0.2s; }
.perfil.abierto .perfil-flecha { transform: rotate(180deg); }

.perfil-menu {
  display: none;
  position: absolute;
  top: 100%; right: 0;
  margin-top: 0.25rem;
  width: 14rem;
  background: var(--blanco);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  box-shadow: var(--sombra-xlarge);
  padding: 0.5rem 0;
  z-index: 9999;
}
.perfil.abierto .perfil-menu { display: block; }
.perfil-menu .cabecera { padding: 0.5rem 1rem; border-bottom: 1px solid var(--neutral-lighter); }
.perfil-menu a, .perfil-menu button {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 1rem;
  font-family: var(--fuente-oswald);
  font-size: 0.875rem;
  color: var(--neutral-darkest);
  background: none; border: none; cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.perfil-menu a:hover { background: var(--neutral-lightest); }
.perfil-menu .cerrar-sesion { color: var(--neutral); border-top: 1px solid var(--neutral-lighter); margin-top: 0.5rem; padding-top: 0.75rem; }
.perfil-menu .cerrar-sesion:hover { background: var(--neutral-darkest); color: var(--blanco); }

/* ============ Sidebar del aspirante ============ */
.sidebar {
  position: fixed;
  top: var(--alto-navbar); bottom: 0; left: 0;
  width: 16rem; /* w-64 */
  background: var(--blanco);
  border-right: 1px solid var(--neutral-lighter);
  box-shadow: var(--sombra-medium);
  display: flex; flex-direction: column;
  z-index: 30;
  transition: width 0.3s;
}
.sidebar-cabecera {
  padding: 1rem;
  border-bottom: 1px solid var(--neutral-lighter);
  min-height: var(--alto-navbar);
  display: flex; align-items: center;
  flex-shrink: 0;
}
.sidebar-cabecera .titulo { font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: var(--neutral-darkest); }

.buscador-menu { padding: 1rem; flex-shrink: 0; position: relative; }
.buscador-menu svg {
  position: absolute; left: 1.75rem; top: 50%;
  transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--neutral);
  pointer-events: none;
}
.buscador-menu input {
  width: 100%;
  background: var(--neutral-lightest);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  font-size: 0.875rem; font-family: inherit;
  color: var(--neutral-darkest);
}
.buscador-menu input:focus { outline: none; border-color: var(--neutral-darkest); }

.menu { flex: 1; overflow-y: auto; }
.menu .item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--neutral-darkest);
  text-decoration: none;
  font-size: 1rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background-color 0.15s;
}
.menu .item:hover { background: var(--neutral-lightest); }
.menu .item.activo {
  background: var(--neutral-lightest);
  border-right: 4px solid var(--neutral-darkest);
  font-weight: 500;
}
.menu .item svg { width: 1.25rem; height: 1.25rem; color: var(--neutral-darkest); }
.menu .item.bloqueado { opacity: 0.6; cursor: not-allowed; }
.menu .item .candado { width: 0.75rem; height: 0.75rem; color: var(--neutral); margin-left: auto; }
.menu .inicio { margin-bottom: 1rem; }
.menu-categoria {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.875rem; font-weight: 600;
  color: var(--neutral-darkest);
}
.menu-categoria svg { width: 1rem; height: 1rem; }
.menu-sub { margin-left: 1rem; border-left: 2px solid var(--neutral-lighter); }
.menu-sub .item { padding: 0.5rem 1rem; font-size: 0.875rem; }
.menu-vacio { padding: 2rem 1rem; text-align: center; color: var(--neutral); font-size: 0.875rem; }
.menu-vacio svg { width: 2rem; height: 2rem; margin: 0 auto 0.5rem; opacity: 0.5; display: block; }

.sidebar-pie { border-top: 1px solid var(--neutral-lighter); padding: 1rem; flex-shrink: 0; }
.boton-colapsar {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: none; border: none; cursor: pointer;
  color: var(--neutral); font-size: 0.875rem; font-family: inherit;
  transition: color 0.15s;
}
.boton-colapsar:hover { color: var(--neutral-darkest); }

/* Sidebar colapsada (w-16, solo iconos) */
.sidebar.colapsada { width: 4rem; }
.sidebar.colapsada .sidebar-cabecera .titulo,
.sidebar.colapsada .buscador-menu,
.sidebar.colapsada .texto-item,
.sidebar.colapsada .menu-categoria svg,
.sidebar.colapsada .candado { display: none; }
.sidebar.colapsada .menu-categoria {
  justify-content: center;
  background: var(--neutral-lightest);
  margin: 0 0.5rem;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.75rem;
}
.sidebar.colapsada .menu-sub { margin-left: 0; border-left: none; }
.sidebar.colapsada .menu .item { justify-content: center; }
.sidebar.colapsada .boton-colapsar .texto-colapsar { display: none; }

/* Área de contenido con sidebar */
.contenido-portal {
  margin-left: 16rem;
  padding: calc(var(--alto-navbar) + 1.5rem) 1.5rem 1.5rem; /* pt-[97px] p-6 */
  min-height: 100vh;
  transition: margin-left 0.3s;
}
body.sidebar-colapsada .contenido-portal { margin-left: 4rem; }

/* Drawer móvil */
.overlay-menu {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}
body.menu-abierto .overlay-menu { display: block; }
.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 20rem; /* w-80 */
  background: var(--blanco);
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-xlarge);
  padding-top: var(--alto-navbar);
}
body.menu-abierto .drawer { transform: translateX(0); }
.drawer-cabecera {
  padding: 1rem;
  border-bottom: 1px solid var(--neutral-lighter);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.drawer-cabecera .titulo { font-size: 1.25rem; font-weight: 700; color: var(--neutral-darkest); }
.drawer-cabecera .cerrar {
  padding: 0.5rem;
  background: none; border: none; cursor: pointer;
  color: var(--neutral);
}
.drawer-cabecera .cerrar:hover { color: var(--neutral-darkest); }
.drawer .menu { flex: 1; overflow-y: auto; }
.drawer-pie {
  border-top: 1px solid var(--neutral-lighter);
  padding: 1rem;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.drawer-pie .boton, .drawer-pie .boton-secundario { width: 100%; }

/* En móvil/tablet: sin sidebar, con hamburguesa (solo en páginas con menú) */
@media (max-width: 1023px) {
  .navbar.con-menu .hamburguesa { display: flex; }
  .navbar.con-menu .logo { display: none; }
  .sidebar { display: none; }
  .contenido-portal { margin-left: 0; padding: calc(var(--alto-navbar) + 1rem) 1rem 1rem; }
  body.sidebar-colapsada .contenido-portal { margin-left: 0; }
  .perfil-flecha { display: none; }
  .perfil-menu { display: none !important; }
  .perfil-boton { pointer-events: none; }
}
@media (min-width: 1024px) {
  .drawer, .overlay-menu { display: none !important; }
}

/* ============ Layout público ============ */
.contenedor-publico {
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
  padding: calc(var(--alto-navbar) + 2rem) 1rem 2rem; /* container px-4 py-8 */
}
.encabezado-pagina { margin-bottom: 1.5rem; }
.titulo-pagina {
  font-size: 1.75rem; line-height: 1.4; /* text-3xl del preset */
  font-weight: 700;
  color: var(--neutral-darkest);
  margin-bottom: 0.5rem;
}
.sub-pagina { color: var(--neutral); }

/* Contenedores de sección del portal (p-6 max-w-*xl mx-auto) */
.contenedor-seccion { max-width: 56rem; margin: 0 auto; padding: 1.5rem; }
.contenedor-seccion.amplio { max-width: 64rem; } /* max-w-5xl (progreso) */

/* ============ Tarjetas ============ */
/* Formulario público: bg-white rounded-lg p-6 */
.tarjeta-form {
  background: var(--blanco);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
/* Secciones del portal: bg-white rounded-xl border border-neutral-lighter p-8 */
.tarjeta {
  background: var(--blanco);
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-lighter);
  padding: 2rem;
}
.tarjeta + .tarjeta, .tarjeta + .tarjeta-form { margin-top: 1.5rem; }
.tarjeta.centrada { display: flex; flex-direction: column; align-items: center; text-align: center; }

.titulo-tarjeta {
  font-size: 1.75rem; line-height: 1.4;
  font-weight: 700;
  color: var(--neutral-darkest);
  margin-bottom: 0.5rem;
}
.titulo-tarjeta.mediano { font-size: 1.5rem; margin-bottom: 1rem; } /* text-2xl */
.texto-tarjeta { color: var(--neutral); max-width: 32rem; }

/* Círculos de icono de las secciones del aspirante */
.circulo-icono {
  width: 4rem; height: 4rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.circulo-icono svg { width: 2rem; height: 2rem; }
.circulo-icono.grande { width: 5rem; height: 5rem; }
.circulo-icono.grande svg { width: 2.5rem; height: 2.5rem; }
.circulo-icono.azul { background: var(--azul-50); color: var(--azul-500); }
.circulo-icono.verde { background: var(--verde-50); color: var(--verde-600); }
.circulo-icono.verde-claro { background: var(--verde-100); color: var(--verde-600); }
.circulo-icono.neutro { background: var(--neutral-lightest); color: var(--neutral); }
.circulo-icono.rojo { background: transparent; color: var(--rojo-500); }

/* ============ Botones ============ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  background: var(--neutral-darkest);
  color: var(--blanco);
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem; font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.boton:hover {
  background: var(--neutral-darker);
  transform: scale(1.05);
  box-shadow: var(--sombra-medium);
}
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.boton.ancho-total { width: 100%; }
.boton.compacto { padding: 0.5rem 1rem; font-size: 0.875rem; }

.boton-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--blanco);
  color: var(--neutral-darkest);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  font-size: 1rem; font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.boton-secundario:hover { background: var(--neutral-lightest); }
.boton-secundario.compacto { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* Botón azul de descarga */
.boton-descarga {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; max-width: 28rem;
  padding: 0.75rem 1.5rem;
  background: var(--azul-50);
  color: var(--azul-700);
  border: 1px solid var(--azul-200);
  border-radius: 0.5rem;
  font-size: 1rem; font-weight: 500; font-family: inherit;
  text-decoration: none;
  transition: all 0.2s;
}
.boton-descarga:hover { background: var(--azul-100); color: var(--azul-800); }

/* ============ Formularios ============ */
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="password"],
.formulario input[type="tel"],
.formulario input[type="number"],
.formulario input[type="date"],
.formulario input[type="datetime-local"],
.formulario input[type="time"],
.formulario input[type="url"],
.formulario select,
.formulario textarea {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  font-size: 0.875rem; line-height: 1.5; /* text-sm */
  font-family: inherit;
  color: var(--neutral-darkest);
}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--neutral-darkest);
}
.formulario input:disabled,
.formulario select:disabled,
.formulario input[readonly] {
  background: var(--neutral-lightest);
  opacity: 0.7;
  cursor: not-allowed;
}
.formulario textarea { resize: none; }

.campo label {
  display: block;
  font-size: 0.875rem; line-height: 1.5;
  font-weight: 500;
  color: var(--neutral-darkest);
  margin-bottom: 0.5rem;
}
.campo .ayuda { font-size: 0.75rem; line-height: 1.5; color: var(--neutral); margin-top: 0.25rem; }
.campo .ayuda a { color: var(--neutral-darkest); font-weight: 500; text-decoration: underline; }
.campo .ayuda a:hover { color: var(--neutral-darker); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--rojo-500); }
ul.errorlist {
  list-style: none;
  margin: 0.25rem 0 0; padding: 0;
  font-size: 0.75rem; line-height: 1.5;
  color: var(--rojo-600);
}
/* Aviso del registro personal: lo pinta portal.js bajo el CURP o el correo al
   salir del campo, como adelanto de lo que dirá el servidor al enviar. Se ve
   como un error de campo porque eso es lo que va a ser, pero no bloquea nada. */
.campo .aviso-registro {
  font-size: 0.75rem; line-height: 1.5;
  margin: 0.25rem 0 0;
  color: var(--rojo-600);
}
.monoespaciada { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; text-transform: uppercase; }

/* Grids de campos (grid gap-4) */
.fila { margin-bottom: 1rem; }
.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .col-2 { grid-column: span 2; }
}

/* Secciones del formulario (pt-4 border-t + título uppercase) */
.seccion-form {
  border-top: 1px solid var(--neutral-lighter);
  padding-top: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.titulo-seccion {
  font-size: 1rem; line-height: 1.5;
  font-weight: 700;
  color: var(--neutral-darkest);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
.subtitulo-seccion {
  font-size: 0.875rem; line-height: 1.5;
  font-weight: 600;
  color: var(--neutral-darkest);
  border-bottom: 1px solid var(--neutral-lighter);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Pie del formulario con botones */
.pie-formulario {
  display: flex; gap: 0.75rem; justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--neutral-lighter);
  margin-top: 1.5rem;
}

/* Tooltip
   El disparador es un <button>: antes el globo se abría solo con :hover y en el
   teléfono no hay hover, así que el icono no se podía abrir. Ahora responde
   también al toque y al tabulador, sin una línea de JavaScript. */
.etiqueta-con-tooltip { display: flex; align-items: center; gap: 0.375rem; }
.tooltip { position: relative; display: inline-flex; vertical-align: middle; }

.disparador-tooltip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 0 0 0.125rem;
  border: 0;
  background: none;
  color: var(--neutral);
  cursor: help;
  line-height: 0;
  border-radius: 999px;
}
.disparador-tooltip svg { width: 1rem; height: 1rem; }
.disparador-tooltip:hover { color: var(--neutral-darkest); }
.disparador-tooltip:focus-visible {
  outline: 2px solid var(--neutral-darkest);
  outline-offset: 2px;
}

.tooltip .texto-tooltip {
  display: none;
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  width: 16rem;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: 0.5rem 0.625rem;
  background: var(--neutral-darkest);
  color: var(--blanco);
  font-size: 0.75rem; font-weight: 400;
  line-height: 1.45;
  text-transform: none; letter-spacing: normal;
  border-radius: 0.5rem;
  box-shadow: var(--sombra-medium);
  text-align: left;
  z-index: 50;
}
/* La flechita hacia el icono: sin ella el globo flota sin decir de quién es. */
.tooltip .texto-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -0.3rem;
  border: 0.3rem solid transparent;
  border-top-color: var(--neutral-darkest);
}
.tooltip:hover .texto-tooltip,
.tooltip:focus-within .texto-tooltip { display: block; }

/* Pegado al borde izquierdo, un globo centrado se sale de la pantalla. En
   móvil se ancla a la izquierda del icono, que siempre cabe. */
@media (max-width: 480px) {
  .tooltip .texto-tooltip {
    left: 0;
    transform: none;
  }
  .tooltip .texto-tooltip::after { left: 0.75rem; }
}

/* Subida de archivos (botón "Subir archivo") */
.subir-archivo { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.subir-archivo .control {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  background: var(--neutral-lightest);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 400;
  color: var(--neutral-darkest);
  cursor: pointer;
  transition: background-color 0.15s;
  margin-bottom: 0;
}
.subir-archivo .control:hover { background: var(--neutral-lighter); }
.subir-archivo .control svg { width: 1rem; height: 1rem; }
.subir-archivo .ayuda { margin: 0; font-size: 0.75rem; color: var(--neutral); }
.subir-archivo .nombre-archivo {
  display: none;
  align-items: center; gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neutral-darkest);
}
.subir-archivo .nombre-archivo svg { width: 1.25rem; height: 1.25rem; color: var(--neutral); }
.subir-archivo.con-archivo .nombre-archivo { display: inline-flex; }
.subir-archivo.con-archivo .ayuda { display: none; }

/* Zona de arrastre */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--neutral-lighter);
  border-radius: 0.75rem;
  background: var(--neutral-lightest);
  padding: 2rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dropzone:hover { border-color: var(--neutral); }
.dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone svg { width: 2.5rem; height: 2.5rem; color: var(--neutral); margin-bottom: 0.75rem; }
.dropzone .principal { color: var(--neutral-dark); font-weight: 500; margin-bottom: 0.25rem; }
.dropzone .secundario { color: var(--neutral); font-size: 0.75rem; }

/* ============ Avisos (cajas de estado) ============ */
.aviso {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem; line-height: 1.5;
  text-align: left;
  margin-bottom: 1rem;
}
.aviso svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }
.aviso.error { background: var(--rojo-50); border: 1px solid var(--rojo-500); color: var(--rojo-600); }
.aviso.error svg { color: var(--rojo-500); }
.aviso.ok { background: var(--verde-50); border: 1px solid var(--verde-100); color: var(--verde-800); }
.aviso.ok svg { color: var(--verde-600); }
.aviso.info { background: var(--azul-50); border: 1px solid var(--azul-100); color: var(--azul-800); }
.aviso.info svg { color: var(--azul-500); }
.aviso ul.errorlist { font-size: inherit; color: inherit; margin: 0; }
/* `display: flex` gana sobre el `hidden` del elemento; sin esto el resumen de
   errores del formulario de postulación se vería desde el primer momento. */
.aviso[hidden] { display: none; }

/* ============ Stepper de progreso ============ */
.stepper { position: relative; }
.stepper-linea {
  display: none;
  position: absolute;
  top: 2rem; left: 2.5rem; right: 2.5rem;
  height: 0.25rem;
  background: var(--neutral-lighter);
  border-radius: 9999px;
}
@media (min-width: 768px) { .stepper-linea { display: block; } }
.stepper-linea .relleno {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--neutral-darkest);
  border-radius: 9999px;
  transition: width 1s ease-out;
}
.stepper-pasos { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .stepper-pasos { grid-template-columns: repeat(4, 1fr); } }
.paso {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.paso .circulo {
  width: 4rem; height: 4rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  background: var(--neutral-lightest);
  color: var(--neutral);
  transition: all 0.3s;
}
.paso .circulo svg { width: 1.5rem; height: 1.5rem; }
.paso.completado .circulo { background: var(--neutral-darkest); color: var(--blanco); }
.paso.completado .circulo svg { width: 2rem; height: 2rem; }
.paso.actual .circulo {
  background: var(--blanco);
  border: 2px solid var(--neutral-darkest);
  color: var(--neutral-darkest);
  transform: scale(1.1);
  box-shadow: var(--sombra-medium);
}
.paso .titulo-paso { font-size: 1.25rem; line-height: 1.5; font-weight: 400; color: var(--neutral); margin-bottom: 0.5rem; }
.paso.completado .titulo-paso, .paso.actual .titulo-paso { color: var(--neutral-darkest); }
.paso.actual .titulo-paso { font-weight: 700; }
.paso .descripcion-paso { font-size: 0.875rem; color: var(--neutral-light); }
.paso.completado .descripcion-paso, .paso.actual .descripcion-paso { color: var(--neutral-dark); }
.insignia-actual {
  margin-top: 0.75rem;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--neutral-darkest);
  color: var(--blanco);
  font-size: 0.75rem; font-weight: 600;
  border-radius: 9999px;
  animation: pulso 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Caja de rechazo */
.caja-rechazo {
  background: var(--rojo-50);
  border: 1px solid var(--rojo-200);
  border-radius: 0.75rem;
  padding: 2rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.caja-rechazo svg { width: 4rem; height: 4rem; color: var(--rojo-500); margin-bottom: 1rem; }
.caja-rechazo .titulo { font-size: 1.5rem; line-height: 1.4; font-weight: 700; color: var(--rojo-700); margin-bottom: 0.5rem; }
.caja-rechazo p { color: var(--rojo-600); max-width: 28rem; }

/* Caja de detalles de la entrevista */
.caja-detalle {
  width: 100%; max-width: 28rem; /* max-w-md */
  background: var(--neutral-lightest);
  border: 1px solid var(--neutral-lighter);
  border-radius: 1rem; /* rounded-2xl */
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}
.caja-detalle .etiqueta {
  display: block;
  font-size: 0.875rem; font-weight: 600;
  color: var(--neutral);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.caja-detalle .valor { font-size: 1.25rem; color: var(--neutral-darkest); text-transform: capitalize; }
.caja-detalle > div + div { margin-top: 1.5rem; }

/* Filas de documentos (datos finales) */
.doc {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.doc + .doc { border-top: 1px solid var(--neutral-lighter); }
.doc .info { flex: 1; min-width: 220px; }
.doc .nombre { font-size: 0.875rem; font-weight: 500; color: var(--neutral-darkest); }
.doc .estado-doc {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: var(--neutral);
  margin-top: 0.25rem;
}
.doc .estado-doc svg { width: 0.875rem; height: 0.875rem; }
.doc .estado-doc.ok { color: var(--verde-600); }
.doc form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* Tarjeta de éxito */
.tarjeta-exito {
  background: var(--blanco);
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem;
  max-width: 28rem; /* max-w-md */
  margin: 2rem auto;
  text-align: center;
}
.tarjeta-exito .circulo-icono { margin-left: auto; margin-right: auto; margin-bottom: 1rem; }
.tarjeta-exito h1 {
  font-size: 1.5rem; line-height: 1.4;
  font-weight: 700;
  color: var(--neutral-darkest);
  margin-bottom: 0.75rem;
}
.tarjeta-exito .mensaje { color: var(--neutral-darkest); margin-bottom: 0.5rem; }
.tarjeta-exito .destacado { font-weight: 600; font-size: 1.25rem; color: var(--neutral-darkest); margin-bottom: 1rem; }
.tarjeta-exito .detalle { font-size: 0.875rem; color: var(--neutral); }

footer.pie-portal {
  text-align: center;
  color: var(--neutral);
  font-size: 0.875rem;
  padding: 2rem 1rem;
}

/* ============ Revisión de la documentación ============ */
.doc .estado-doc.mal { color: var(--rojo-600); }

/* El motivo del rechazo va pegado al documento que lo causó: buscarlo en otra
   parte de la página sería exactamente lo que el aspirante no debe hacer. */
.doc .motivo-rechazo {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--rojo-50);
  border-left: 3px solid var(--rojo-500);
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rojo-700);
}

/* Cierre de la carga: es una decisión con consecuencia (bloquea la edición),
   así que se separa de la lista de documentos en su propia tarjeta. */
.cierre-documentacion {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cierre-documentacion .titulo-tarjeta { margin-bottom: 0.35rem; }
.cierre-documentacion .texto-tarjeta { margin-bottom: 0; max-width: 34rem; }
.cierre-documentacion form { flex: none; text-align: right; }
.cierre-documentacion .ayuda { margin-top: 0.5rem; }
.cierre-documentacion button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============ Fichas de datos (compartidas con el panel) ============ */
/* Vivían en panel.css, pero el resumen "Lo que has enviado" del portal usa lo
   mismo. El panel carga portal.css antes que el suyo, así que aquí las ven los
   dos y no hay una copia por hoja. */
.titulo-seccion-exp {
  font-size: 0.875rem; font-weight: 700;
  color: var(--neutral-darkest);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--neutral-lightest);
}

.datos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.datos-grid > div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.datos-grid .etiqueta {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--neutral);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.datos-grid .valor { font-size: 0.9375rem; color: var(--neutral-darkest); word-break: break-word; }
@media (min-width: 768px) {
  .datos-grid .ancho-2 { grid-column: span 2; }
  .datos-grid .ancho-3 { grid-column: span 3; }
}


/* ============ Calendario de las fases del proceso ============ */
.calendario-fases { display: flex; flex-direction: column; gap: 0.25rem; }
.fase-fecha {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--neutral-lightest);
}
.fase-fecha:first-child { border-top: none; }
.fase-fecha .punto {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: var(--neutral-lighter);
  flex: none;
}
.fase-fecha.cumplida .punto { background: var(--verde-600); }
.fase-fecha.actual .punto { background: var(--neutral-darkest); }
.fase-fecha .detalle { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.fase-fecha .nombre { font-size: 0.875rem; color: var(--neutral-dark); }
.fase-fecha.actual .nombre { font-weight: 600; color: var(--neutral-darkest); }
.fase-fecha .rango { font-size: 0.8125rem; color: var(--neutral); }

/* ============ Resumen de lo entregado ============ */
.lista-entregados { display: flex; flex-direction: column; gap: 0.5rem; }
.entregado {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border: 1px solid var(--neutral-lighter);
  border-left: 3px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.entregado.validado { border-left-color: var(--verde-600); }
.entregado.rechazado { border-left-color: var(--rojo-500); background: var(--rojo-50); }
.entregado .punto {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: #f59e0b;
  margin-top: 0.4rem;
  flex: none;
}
.entregado.validado .punto { background: var(--verde-600); }
.entregado.rechazado .punto { background: var(--rojo-500); }
.entregado .detalle { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.entregado .nombre { font-size: 0.875rem; font-weight: 500; color: var(--neutral-darkest); }
.entregado .meta { font-size: 0.75rem; color: var(--neutral); }
.entregado .motivo {
  margin-top: 0.35rem;
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--rojo-700);
}
.entregado .abrir {
  flex: none;
  padding: 0.3rem 0.7rem;
  background: var(--verde-50);
  color: var(--verde-800);
  border: 1px solid var(--verde-100);
  border-radius: 0.375rem;
  font-size: 0.75rem; text-decoration: none;
  white-space: nowrap;
}
.entregado .abrir:hover { background: var(--verde-100); }

/* Palomita del menú lateral en una etapa ya concluida */
.menu .item .palomita-menu {
  width: 0.875rem; height: 0.875rem;
  margin-left: auto;
  color: var(--verde-600);
  flex: none;
}

/* ============ Declaraciones del bachillerato ============ */
.declaraciones form { display: flex; flex-direction: column; gap: .875rem; align-items: flex-start; }
.declaraciones .declaracion {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
}
.declaraciones .declaracion input[type="checkbox"] {
  width: 1rem; height: 1rem;
  margin-top: .15rem;
  flex: none;
  accent-color: var(--neutral-darkest);
  cursor: pointer;
}
.declaraciones .declaracion strong { display: block; font-weight: 500; color: var(--neutral-darkest); }
.declaraciones .declaracion small { color: var(--neutral); font-size: 0.8125rem; }

.doc .nombre .opcional {
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--neutral-lightest);
  color: var(--neutral);
  font-size: 0.6875rem;
  font-weight: 400;
}
.doc .ayuda-doc { font-size: 0.75rem; color: var(--neutral); margin-top: .15rem; }

/* Descarga del formato que la institución entrega ya rellenado: va dentro de
   la fila del documento, antes del control para subirlo firmado. */
.doc .descargar-formato {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neutral-darkest);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-lighter);
  padding-bottom: .1rem;
}
.doc .descargar-formato:hover { border-bottom-color: var(--neutral-darkest); }
.doc .descargar-formato svg { width: 1rem; height: 1rem; flex: none; }

/* ===== Portada pública (contenido/portada.html) =====
   La raíz del sitio vivía en el frontend anterior; esta es la cara pública.
   Se apoya en las piezas que ya existen aquí (.tarjeta, .boton, .grid-3) y solo
   añade el encabezado y el ancho de página. */
.portada {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.portada-hero {
  text-align: center;
  padding: 2.5rem 0 3rem;
}

.portada-hero h1 {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--neutral-darkest);
  margin: 0 0 1rem;
}

.portada-hero > p {
  max-width: 38rem;
  margin: 0 auto 1.75rem;
  color: var(--neutral);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.portada-nota {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  color: var(--neutral);
}

/* La convocatoria cerrada no es un error, pero tampoco puede leerse como una
   nota al pie: es la respuesta a lo que el visitante vino a hacer. */
.portada-cerrada {
  background: var(--neutral-lightest);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--neutral-darkest);
}

.portada-puntos { margin-top: 1.5rem; align-items: stretch; }
.portada-puntos .tarjeta { margin-top: 0; height: 100%; }
.portada-puntos .titulo-tarjeta { font-size: 1.125rem; }
.portada-puntos .texto-tarjeta { font-size: 0.9375rem; }

@media (min-width: 768px) {
  .portada-hero h1 { font-size: 2.75rem; }
}

/* ============ Pantallas de entrada (login, contraseña) ============ */
/* Vivían en panel.css cuando el único login era el del panel. Ahora también
   las usan la entrada del estudiante y las pantallas públicas de contraseña,
   así que están donde las tres las alcanzan. */
/* ============ Login ============ */
body.pantalla-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--neutral-lightest);
}
.caja-login { width: 100%; max-width: 26rem; }
.tarjeta-login {
  background: var(--blanco);
  border: 1px solid var(--neutral-lighter);
  border-radius: 0.75rem;
  box-shadow: var(--sombra-medium);
  padding: 2rem;
  text-align: center;
}
.tarjeta-login form { text-align: left; }
.logo-login { height: 3rem; width: auto; margin: 0 auto 1.25rem; display: block; }
.tarjeta-login h1 {
  font-size: 1.5rem; line-height: 1.4; font-weight: 700;
  color: var(--neutral-darkest);
  margin-bottom: 0.35rem;
}
.sub-login { font-size: 0.875rem; color: var(--neutral); margin-bottom: 1.5rem; }
.pie-login { text-align: center; font-size: 0.75rem; color: var(--neutral); margin-top: 1.5rem; }

/* ============ Historial de semestres anteriores ============ */
/* Lo entregado en semestres pasados va plegado: si se mezclara con lo del
   semestre en curso, no se distinguiría lo que falta ahora de lo que ya se
   cumplió hace un año. Vivía en panel.css cuando esto solo lo veía control
   escolar; ahora el estudiante lo ve también en su portal. */
.historial-semestres {
  margin-top: 1rem;
  border-top: 1px solid var(--neutral-lighter);
  padding-top: 0.75rem;
}
.historial-semestres summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--neutral);
}
.historial-semestres summary:hover { color: var(--neutral-darkest); }
.renglon-historial {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--neutral-dark);
}
.renglon-historial + .renglon-historial { border-top: 1px dashed var(--neutral-lighter); }