/* Design system homologado desde boostapp (Mantine → CSS plano).
   Tokens fuente: src/app/globals.css y LayoutMantine.tsx del CRM. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin.woff2") format("woff2");
}

:root {
  --primario: #6366f1;
  --primario-fuerte: #4f46e5;
  --secundario: #8b5cf6;
  --gradiente-boost: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --texto: #15144b;
  --texto-secundario: #54656f;
  --texto-tenue: #9898ae;
  --fondo: #f8f6fb;
  --fondo-tarjeta: #ffffff;
  --fondo-input: #f0f2f5;
  --fondo-hover: rgba(99, 102, 241, 0.06);
  --borde-tarjeta: #eeecf2;
  --borde-cartilla: #d4d0e0;
  --borde-input: #dddde5;
  --sombra-tarjeta: 0 1px 4px rgba(100, 80, 160, 0.05);
  --ok: #2b8a3e; --ok-bg: #ebfbee;
  --warn: #d9480f; --warn-bg: #fff4e6;
  --error: #c92a2a; --error-bg: #fff5f5;
  --info: #1971c2; --info-bg: #e7f5ff;
  --neutro: #495057; --neutro-bg: #f1f3f5;
  --indigo-suave: #eef2ff; --indigo-oscuro: #3730a3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
  font-size: 15px;
}

/* ── Barra superior ─────────────────────────────────────────── */

header {
  background: var(--fondo-tarjeta);
  border-bottom: 1px solid var(--borde-tarjeta);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca { display: flex; align-items: center; gap: 9px; }
.marca:hover { text-decoration: none; }
.marca img { height: 26px; width: auto; display: block; }
.sufijo-campus {
  background: var(--indigo-suave);
  color: var(--primario-fuerte);
  border-radius: 32px;
  padding: 2px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cartilla-usuario {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-cartilla);
  border-radius: 16px;
  padding: 5px 8px 5px 14px;
  box-shadow: 0 1px 4px rgba(100, 80, 160, 0.04);
  font-size: 0.82rem;
  color: var(--texto-secundario);
}
.cartilla-usuario .usuario { font-weight: 600; color: var(--texto); margin-right: 6px; }
.cartilla-usuario form { display: contents; }  /* el botón participa del flex del nav */
.cartilla-usuario a,
.cartilla-usuario button {
  color: var(--texto-secundario);
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.cartilla-usuario button {
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}
.cartilla-usuario a:hover,
.cartilla-usuario button:hover {
  color: var(--primario-fuerte);
  background: var(--fondo-hover);
  text-decoration: none;
}

/* ── Contenido ──────────────────────────────────────────────── */

main { max-width: 1040px; margin: 0 auto; padding: 28px 24px 56px; }
h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.2rem 0 1.1rem; }
h2 { font-size: 1rem; font-weight: 700; margin: 1.8rem 0 0.7rem; }

.tarjeta {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-tarjeta);
}

a { color: var(--primario-fuerte); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.meta { color: var(--texto-secundario); font-size: 0.85rem; font-weight: 400; }
.meta strong { color: var(--texto); }

/* ── Tablas ─────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.55rem 0.65rem; }
th {
  color: var(--texto-tenue);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--borde-tarjeta);
}
td { border-bottom: 1px solid #f3f1f7; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: var(--fondo); box-shadow: inset 3px 0 0 var(--secundario); }

/* ── Badges y flashes ───────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 32px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.sin-carga { background: var(--neutro-bg); color: var(--neutro); }
.badge.pendiente { background: var(--warn-bg); color: var(--warn); }
.badge.enviada { background: var(--info-bg); color: var(--info); }
.badge.aceptada, .badge.procesada { background: var(--ok-bg); color: var(--ok); }
.badge.rechazada { background: var(--error-bg); color: var(--error); }
/* Estados del periodo, 3 colores distintos: carga=azul, activo=verde, cerrado=gris. */
.badge.periodo-carga { background: var(--info-bg); color: var(--info); }
.badge.periodo-activo { background: var(--ok-bg); color: var(--ok); }
.badge.periodo-cerrado { background: var(--neutro-bg); color: var(--neutro); }
/* Estados del despliegue de flow por canal: construccion=azul, activo=verde, retirado=gris. */
.badge.despliegue-construccion { background: var(--info-bg); color: var(--info); }
.badge.despliegue-activo { background: var(--ok-bg); color: var(--ok); }
.badge.despliegue-retirado { background: var(--neutro-bg); color: var(--neutro); }

/* Editor de flows por periodo: grilla alineada por columnas (canal, flow, nodo, estado). */
.flows-periodo {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 11rem 6.5rem;
  gap: 0.5rem 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
}
.flows-periodo + .flows-periodo { border-top: 1px solid var(--borde-tarjeta); }
.flows-periodo .titulo { grid-column: 1 / -1; font-weight: 600; color: var(--texto); }
.flows-periodo label { margin: 0; }
.flows-periodo select,
.flows-periodo input[type="text"],
.flows-periodo input[type="number"] { width: 100%; max-width: none; margin: 0; }
.flows-periodo .acciones { grid-column: 1 / -1; margin-top: 0.2rem; }

.flash {
  padding: 0.65rem 1rem;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
}
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.flash.error { background: var(--error-bg); color: var(--error); }
.flash.info { background: var(--info-bg); color: var(--info); }

.banner-bloqueada {
  background: var(--indigo-suave);
  color: var(--indigo-oscuro);
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Título de una sección no disponible (bloqueada en el paso a paso o que no aplica): gris tenue. */
h2.inactivo { color: var(--texto-tenue); }

/* ── Secciones colapsables (acordeón de la vista de carga) ─────── */
.seccion { margin: 1.4rem 0; }
.seccion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.seccion > summary::-webkit-details-marker { display: none; }
.seccion > summary::before {
  content: "▸";
  color: var(--texto-tenue);
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.seccion[open] > summary::before { transform: rotate(90deg); }
.seccion > summary h2 { margin: 0.3rem 0; }
.seccion > summary:hover h2 { color: var(--primario-fuerte); }

/* Sección no disponible: bloqueada en el paso a paso (candado) o que no aplica al
   código (gris). No expande; muestra el motivo bajo el título. */
.seccion.no-disponible { opacity: 0.7; }
.seccion.no-disponible .seccion-cab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.seccion.no-disponible h2 { margin: 0.3rem 0; }
.candado { font-size: 0.9em; }
.seccion-motivo { margin: 0.1rem 0 0 1.6rem; }

/* ── Formularios ────────────────────────────────────────────── */

form.inline { display: inline; }
label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-secundario);
  margin: 0.7rem 0 0.3rem;
}
input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select {
  width: 100%;
  max-width: 420px;
  padding: 0.55rem 0.75rem;
  background: var(--fondo-input);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--texto);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--primario);
  background: var(--fondo-tarjeta);
}
select { cursor: pointer; }
/* El input[type=file] nativo muestra "Choose File"/"No file chosen" en el
   idioma del navegador, no de la página, y ese texto no se puede sobreescribir
   por CSS. Se oculta visualmente (accesible: sigue enfocable y participa de la
   validación required) y se reemplaza por un <label for> con el texto en
   español, que abre el selector nativo al hacer click. */
.input-archivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
input[type="checkbox"] { accent-color: var(--primario); }

/* Fila horizontal de controles: los campos se dimensionan a su contenido
   (anula el width:100% pensado para formularios verticales). */
.campos-linea { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.5rem 0; }
.campos-linea label { margin: 0; }
.campos-linea input, .campos-linea select { width: auto; max-width: 320px; }

button, label.boton-archivo {
  display: inline-block;
  background: var(--gradiente-boost);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
button:hover, label.boton-archivo:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); transform: translateY(-1px); }
button.secundario, label.boton-archivo.secundario {
  background: var(--fondo-tarjeta); color: var(--texto); border: 1px solid var(--borde-input);
}
button.secundario:hover, label.boton-archivo.secundario:hover {
  border-color: var(--primario);
  color: var(--primario-fuerte);
  box-shadow: 0 2px 8px rgba(100, 80, 160, 0.12);
}
button.peligro {
  background: var(--fondo-tarjeta);
  color: var(--error);
  border: 1px solid #ffc9c9;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
}
button.peligro:hover { background: var(--error-bg); box-shadow: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover { box-shadow: none; transform: none; }
.acciones { margin-top: 0.9rem; }

/* ── Login ──────────────────────────────────────────────────── */

body.pagina-login {
  background: linear-gradient(180deg, #ffffff 0%, #f3f1f9 100%);
  min-height: 100vh;
}
.pagina-login main {
  max-width: 400px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.6rem; }
.login-logo img { width: 180px; height: auto; }
.pagina-login h1 { font-size: 1.05rem; text-align: center; margin-bottom: 0.4rem; }
.login-sub { text-align: center; margin-bottom: 1.4rem; }
.pagina-login input { max-width: none; }
.boton-bloque { width: 100%; padding: 0.7rem; font-size: 0.9rem; }
.login-pie { text-align: center; margin-top: 2.2rem; font-size: 0.75rem; color: var(--texto-tenue); }

@media (max-width: 720px) {
  main { padding: 20px 14px 40px; }
  header { padding: 10px 14px; }
  .tarjeta { padding: 1rem; overflow-x: auto; }
}

.tarjeta::-webkit-scrollbar { height: 6px; }
.tarjeta::-webkit-scrollbar-thumb { background: var(--borde-cartilla); border-radius: 3px; }

/* ── Cronograma: línea de tiempo del semestre ───────────────── */

.crono { padding: 1.5rem 1.6rem 0.6rem; }

.crono-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--borde-tarjeta);
  margin-bottom: 0.4rem;
}
.crono-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--primario-fuerte);
}
.crono-titulo { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.crono-cifras { display: flex; gap: 2rem; margin: 0; }
.crono-cifras div { display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.crono-cifras dt {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-tenue);
}
.crono-cifras dd { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.crono-semanas { margin: 0.5rem 0 0; }
.crono-semana { border-top: 1px solid var(--borde-tarjeta); }
.crono-semana:last-child { border-bottom: 1px solid var(--borde-tarjeta); }

/* Encabezado colapsable de cada semana */
.crono-cab {
  display: grid;
  grid-template-columns: 54px 1fr 18px;
  column-gap: 1.1rem;
  align-items: center;
  padding: 0.85rem 0.6rem;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
  transition: background 0.12s ease;
}
.crono-cab::-webkit-details-marker { display: none; }
.crono-cab:hover { background: var(--fondo-hover); }
.crono-semana[open] > .crono-cab { background: var(--fondo); }

.crono-rail { text-align: left; }
.crono-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.crono-fechas {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

.crono-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--texto);
}
.crono-semana[open] .crono-preview { color: var(--texto-tenue); }

.crono-chevron {
  justify-self: end;
  color: var(--primario);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}
.crono-semana[open] .crono-chevron { transform: rotate(90deg); }

.crono-cuerpo { padding: 0.2rem 0.6rem 1.6rem calc(54px + 1.1rem + 0.6rem); }

.crono-recursos {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.12rem 0.55rem;
  border-radius: 6px;
  background: var(--fondo-input);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--texto-secundario);
}
.crono-clase + .crono-clase { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--borde-tarjeta); }
.crono-clase-nom {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primario-fuerte);
}
.crono-hora { margin-top: 0.6rem; }
.crono-hora:first-of-type { margin-top: 0; }
.crono-hora-nom {
  display: inline-block;
  margin-bottom: 0.15rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--secundario);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-secundario);
}
.crono-texto { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--texto); }
.crono-vacio { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--texto-tenue); }

.crono-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.crono-chip { padding: 0.22rem 0.65rem; border-radius: 32px; font-size: 0.72rem; font-weight: 600; }
.crono-chip-eval { background: var(--warn-bg); color: var(--warn); }

.crono-actividad { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: var(--info-bg); border-radius: 10px; }
.crono-actividad-nom {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--info);
}
.crono-actividad .crono-texto { font-size: 0.85rem; color: var(--texto-secundario); }

.crono-notas { margin-top: 0.9rem; }
.crono-notas summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--texto-secundario);
  user-select: none;
}
.crono-notas summary::-webkit-details-marker { display: none; }
.crono-notas summary::before {
  content: "▸";
  color: var(--primario);
  transition: transform 0.15s ease;
}
.crono-notas[open] summary::before { transform: rotate(90deg); }
.crono-notas-n {
  padding: 0.05rem 0.45rem;
  border-radius: 10px;
  background: var(--fondo-input);
  color: var(--texto-tenue);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.crono-notas ul { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.crono-notas li {
  position: relative;
  margin: 0.3rem 0;
  padding-left: 1.3rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--texto-secundario);
}
.crono-notas li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--borde-cartilla);
  border-radius: 50%;
}

@media (max-width: 720px) {
  .crono { padding: 1.1rem 1.1rem 0.4rem; }
  .crono-cab { grid-template-columns: 40px 1fr 16px; column-gap: 0.8rem; padding: 0.75rem 0.4rem; }
  .crono-num { font-size: 1.15rem; }
  .crono-cuerpo { padding-left: calc(40px + 0.8rem + 0.4rem); }
  .crono-titulo { font-size: 1.25rem; }
  .crono-cifras { gap: 1.3rem; }
  .crono-cifras dd { font-size: 1.4rem; }
}

/* ── Subida de material (arrastrar-y-soltar + progreso) ─────── */

.reglas-material {
  background: var(--indigo-suave);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-top: 0.6rem;
}
.reglas-titulo {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--indigo-oscuro);
}
.reglas-material ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.28rem;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.reglas-material strong { color: var(--texto); font-weight: 600; }

.subida { margin-top: 0.9rem; }
.subida.js .sin-js { display: none; }

.dropzone {
  border: 2px dashed var(--borde-cartilla);
  border-radius: 12px;
  padding: 1.6rem 1rem;
  text-align: center;
  background: var(--fondo-input);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.arrastrando { border-color: var(--primario); background: var(--fondo-hover); }
.dropzone-titulo { margin: 0 0 0.3rem; font-weight: 500; }
.enlace-archivo {
  color: var(--primario-fuerte);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.enlace-archivo:hover { color: var(--secundario); }

.cola-subida { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.item-subida {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.item-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.item-nombre {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-estado { flex: none; font-size: 0.75rem; color: var(--texto-secundario); }
.item-estado.ok { color: var(--ok); font-weight: 600; }
.item-estado.error { color: var(--error); font-weight: 600; }

.barra-progreso {
  margin-top: 0.4rem;
  height: 6px;
  border-radius: 3px;
  background: var(--fondo-input);
  overflow: hidden;
}
.barra-progreso > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gradiente-boost);
  transition: width 0.2s ease;
}
.item-subida.ok .barra-progreso > i { background: var(--ok); }
.item-subida.error .barra-progreso > i { background: var(--error); }
.item-subida.procesando .barra-progreso > i {
  background: linear-gradient(90deg, var(--primario) 25%, var(--secundario) 50%, var(--primario) 75%);
  background-size: 200% 100%;
  animation: barra-procesando 1s linear infinite;
}
@keyframes barra-procesando {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crono-cab,
  .crono-chevron,
  .crono-notas summary::before,
  .seccion > summary::before,
  button,
  label.boton-archivo { transition: none; }
  .barra-progreso > i { transition: none; }
  .item-subida.procesando .barra-progreso > i { animation: none; }
}