/* ==========================================================================
   SCEUP — Sistema de Control Escolar UNIPOL
   Identidad visual institucional: Universidad de la Policía de la CDMX
   ========================================================================== */

:root {
  /* Paleta institucional */
  --up-navy: #003561;
  --up-navy-dark: #00243F;
  --up-navy-deep: #001B30;
  --up-gray: #747679;
  --up-gray-light: #F0F0F0;
  --up-blue-tint: #D6E4EE;
  --up-blue-tint-2: #EDF3F8;
  --up-white: #FFFFFF;

  /* Semánticos */
  --up-success: #1E7A47;
  --up-success-bg: #E6F4EC;
  --up-warning: #8A6100;
  --up-warning-bg: #FDF3DA;
  --up-danger: #A6271C;
  --up-danger-bg: #FBEAE8;
  --up-info: #1B4F72;
  --up-info-bg: #E3EFF8;

  /* Superficies y texto */
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --border: #E2E6EA;
  --border-strong: #CFD6DD;
  --text: #1F2429;
  --text-soft: #5B6570;

  /* Escala */
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 27, 48, .06);
  --shadow: 0 1px 3px rgba(0, 27, 48, .08), 0 1px 2px rgba(0, 27, 48, .04);
  --shadow-md: 0 4px 12px rgba(0, 27, 48, .10);
  --shadow-lg: 0 18px 48px rgba(0, 27, 48, .16);
  --sidebar-w: 250px;
  --ring: 0 0 0 3px rgba(0, 53, 97, .18);

  /* Acento de interacción — antes vivía como un hex suelto (#6FA8DC) repetido
     en cada regla de "activo" del menú; ahora es un solo valor con nombre. */
  --up-accent: #6FA8DC;

  /* Foco visible sobre superficies oscuras (barra lateral): el anillo de foco
     por defecto es azul marino, invisible sobre el propio azul marino de la
     barra. Este token da un anillo claro para esos casos. */
  --ring-on-dark: 0 0 0 2px var(--up-navy-dark), 0 0 0 4px #fff;

  /* Escala de espaciado — 4/8/12/16/24/32/48/64, para que el ritmo entre
     bloques (barra lateral, tarjetas, formularios) sea consistente. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Duración estándar de transición de micro-interacciones */
  --dur: .16s;

  /* Escala de desempeño 1–4, para gráficos y chips que la referencian */
  --nivel-4: var(--up-success);
  --nivel-3: var(--up-navy);
  --nivel-2: var(--up-warning);
  --nivel-1: var(--up-danger);

  /* Acento de "próximo a vencer": más saturado que --up-warning (pensado
     para texto sobre fondo claro), para usarse como color sólido en bordes
     y gráficos. */
  --up-warning-accent: #D9A62B;

  /* Un color por situación del expediente, para que la tarjeta KPI y los
     gráficos de los tableros compartan la misma fuente de verdad. */
  --sit-aspirante: #D9A62B;
  --sit-cadete: #4A87C6;
  --sit-egresado: #2E9E5B;
  --sit-formacion-continua: #2E86AB;
  --sit-superior: #6B4EA8;
  --sit-instructor: #5C6BC0;
  --sit-suspendido: #C0554A;
  --sit-baja: #9AA3AB;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--up-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sobre la barra lateral (fondo azul marino) un anillo azul marino queda
   invisible — aquí se sustituye por un anillo claro con contraste real. */
.sidebar :focus-visible {
  outline: none;
  box-shadow: var(--ring-on-dark);
  border-radius: var(--radius-sm);
}

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--up-navy) 0%, var(--up-navy-dark) 100%);
  color: var(--up-white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Marca — se usa el logotipo en blanco sobre el azul institucional */
.sidebar .brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar .brand img {
  display: block;
  width: 100%;
  max-width: 178px;
  height: auto;
}
.sidebar .brand-text {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.sidebar .brand-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  margin-bottom: 2px;
}

.sidebar nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .82);
  padding: 10px 12px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .14s ease, color .14s ease;
}
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.sidebar nav a.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--up-accent);
}
.sidebar nav a.active svg { opacity: 1; }

/* Grupos de navegación colapsables — <details>/<summary>, sin JavaScript.
   Un grupo arranca abierto si la página activa vive dentro de él (ver la
   condición 'open' en base.html); si no, arranca cerrado para que el menú
   no crezca sin control al agregar módulos relacionados. */
.nav-group { margin-bottom: 2px; }
.nav-group summary {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .82);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  list-style: none;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-group summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-group summary span { flex: 1; }
.nav-group summary .chevron { width: 14px; height: 14px; opacity: .6; transition: transform .16s ease; }
.nav-group[open] > summary .chevron { transform: rotate(90deg); }
.nav-group[open] > summary { background: rgba(255, 255, 255, .06); }

.nav-sub { padding: 2px 0 6px 15px; border-left: 1px solid rgba(255, 255, 255, .14); margin: 0 0 4px 26px; }
.nav-sub a {
  display: block;
  color: rgba(255, 255, 255, .78);
  padding: 8px 12px;
  margin-bottom: 1px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .14s ease, color .14s ease;
}
.nav-sub a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.nav-sub a.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--up-accent);
}

.sidebar .user-box {
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .12);
}
.sidebar .user-box .user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.sidebar .user-box .role-tag {
  display: inline-block;
  margin-top: 5px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.sidebar .user-box .user-links { display: flex; gap: 14px; margin-top: 11px; }
.sidebar .user-box .user-links a {
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  transition: color .14s ease;
}
.sidebar .user-box .user-links a:hover { color: #fff; text-decoration: none; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  font-size: 20px;
  margin: 0;
  color: var(--up-navy);
  font-weight: 700;
  letter-spacing: -.01em;
}
.topbar .subtitle { color: var(--text-soft); font-size: 12.5px; margin-top: 3px; }
.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.content { padding: 24px 28px 40px; flex: 1; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  border: 1px solid var(--border);
  min-width: 0;
}
.card + .card { margin-top: 18px; }

/* ---------- KPIs ---------- */
.kpi-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-navy-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  margin-bottom: 14px;
}
.kpi-hero .kpi-value { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.kpi-hero .kpi-label { font-size: 13px; color: rgba(255, 255, 255, .82); margin-top: 4px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.kpi-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--up-blue-tint);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card .kpi-value { font-size: 25px; font-weight: 700; color: var(--up-navy); line-height: 1.1; }
.kpi-card .kpi-label { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.35; }
.kpi-card.is-zero { opacity: .62; }

/* Acento por situación del expediente */
.kpi-card[data-situacion="Aspirante"] { border-left-color: var(--sit-aspirante); }
.kpi-card[data-situacion="Cadete"] { border-left-color: var(--sit-cadete); }
.kpi-card[data-situacion="Egresado activo"] { border-left-color: var(--sit-egresado); }
.kpi-card[data-situacion="Activo en formación continua"] { border-left-color: var(--sit-formacion-continua); }
.kpi-card[data-situacion="Alumno de educación superior"] { border-left-color: var(--sit-superior); }
.kpi-card[data-situacion="Instructor"] { border-left-color: var(--sit-instructor); }
.kpi-card[data-situacion="Suspendido"] { border-left-color: var(--sit-suspendido); }
.kpi-card[data-situacion="Baja"] { border-left-color: var(--sit-baja); }

.grid-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
/* Variante para dos bloques de peso similar (dashboard, reportes) */
.grid-2.grid-2--par { grid-template-columns: 1fr 1.05fr; }
/* Sin esto, el ancho mínimo de las tablas estira la columna y desborda la
   página en pantallas angostas (min-width:auto por defecto en grid). */
.grid-2 > * { min-width: 0; }
@media (max-width: 1100px) { .grid-2, .grid-2.grid-2--par { grid-template-columns: 1fr; } }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }

.paginacion {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
  background: var(--up-blue-tint-2);
  color: var(--up-navy);
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--up-blue-tint);
  white-space: nowrap;
}
table.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr { transition: background .12s ease; }
table.data-table tbody tr:hover td { background: var(--up-blue-tint-2); }
table.data-table td.acciones { text-align: right; white-space: nowrap; }

/* Tabla de dato/valor (ficha del expediente, mi cuenta) — sin cabecera */
table.data-kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-kv td { padding: 9px 0; border-bottom: 1px solid var(--border); }
table.data-kv tr:last-child td { border-bottom: none; }
table.data-kv td:first-child {
  color: var(--text-soft);
  font-size: 12.5px;
  width: 38%;
  padding-right: 14px;
}
table.data-kv td:last-child { font-weight: 500; }

.folio { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.mono { font-family: "Consolas", "SF Mono", Menlo, monospace; font-size: 12.5px; letter-spacing: .01em; }

/* ---------- Distintivos de estatus ---------- */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
/* Núcleo — situación institucional del expediente */
.status-Aspirante { background: var(--up-warning-bg); color: var(--up-warning); }
.status-Cadete { background: var(--up-blue-tint); color: var(--up-navy); }
.status-Egresado-activo { background: var(--up-success-bg); color: var(--up-success); }
.status-Activo-en-formación-continua { background: var(--up-info-bg); color: var(--up-info); }
.status-Alumno-de-educación-superior { background: #EDE7F8; color: #4C3689; }
.status-Suspendido { background: var(--up-danger-bg); color: var(--up-danger); }
.status-Baja { background: #E8EAEC; color: #4E555B; }

/* Núcleo — estatus de la trayectoria académica */
.status-En-curso { background: var(--up-info-bg); color: var(--up-info); }
.status-Concluida { background: var(--up-success-bg); color: var(--up-success); }
.status-Interrumpida { background: var(--up-warning-bg); color: var(--up-warning); }

/* Evaluación (módulos posteriores) */
.status-Vigente { background: var(--up-success-bg); color: var(--up-success); }
.status-Vencido { background: var(--up-danger-bg); color: var(--up-danger); }
.status-Revocado { background: #E8EAEC; color: #4E555B; }
.status-Competente { background: var(--up-success-bg); color: var(--up-success); }
.status-Aún-no-competente { background: var(--up-warning-bg); color: var(--up-warning); }
.status-Pendiente { background: var(--up-warning-bg); color: var(--up-warning); }

/* Distintivos genéricos (cuentas, roles) */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--up-success-bg); color: var(--up-success); }
.badge-off { background: #E8EAEC; color: #4E555B; }
.badge-role { background: var(--up-blue-tint); color: var(--up-navy); }

/* ---------- Miniatura de fotografía ---------- */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  background: var(--up-gray-light);
  flex-shrink: 0;
}
.avatar-lg {
  width: 118px; height: 118px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border-strong);
  background: var(--up-gray-light);
  flex-shrink: 0;
}
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--up-gray);
  font-size: 11.5px;
  text-align: center;
  border-style: dashed;
}
.celda-persona { display: flex; align-items: center; gap: 11px; }

/* ---------- Formularios ---------- */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--up-navy);
  margin: 0 0 5px;
}
.form-grid > div > label:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: var(--up-gray); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--up-navy);
  box-shadow: var(--ring);
}
input:disabled, input[readonly] { background: var(--up-gray-light); color: var(--text-soft); cursor: not-allowed; }
input[type="checkbox"] { width: auto; accent-color: var(--up-navy); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

.field-hint { color: var(--text-soft); font-size: 12px; margin: 5px 0 0; line-height: 1.4; }

.form-section {
  color: var(--up-navy);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-section:first-child { margin-top: 0; }

.form-actions {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Campo de archivo con estilo institucional */
input[type="file"] {
  padding: 8px 11px;
  font-size: 13px;
  cursor: pointer;
  background: var(--up-blue-tint-2);
  border: 1px dashed var(--border-strong);
}
input[type="file"]:hover { border-color: var(--up-navy); background: var(--up-blue-tint); }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 13px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--up-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--up-navy-dark); }

.filtros { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { flex: 1; min-width: 200px; }
.filtros .campo-corto { flex: 0 0 210px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease,
              box-shadow .14s ease, transform .14s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  box-shadow: none;
  transform: none;
}
.btn-primary { background: var(--up-navy); color: #fff; }
.btn-primary:hover { background: var(--up-navy-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--up-gray); }
.btn-secondary { background: var(--surface); color: var(--up-navy); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--up-blue-tint-2); border-color: var(--up-navy); }
.btn-secondary:disabled { background: var(--surface); color: var(--text-soft); border-color: var(--border); }
.btn-danger { background: var(--surface); color: var(--up-danger); border-color: #E6B8B3; }
.btn-danger:hover { background: var(--up-danger-bg); border-color: var(--up-danger); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

/* ---------- Avisos ---------- */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13.5px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.flash-success { background: var(--up-success-bg); color: #145631; border-color: var(--up-success); }
.flash-error { background: var(--up-danger-bg); color: #862017; border-color: var(--up-danger); }
.flash-info { background: var(--up-info-bg); color: var(--up-info); border-color: var(--up-info); }

/* ---------- Varios ---------- */
.section-title {
  color: var(--up-navy);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.muted { color: var(--text-soft); font-size: 12.5px; }

.empty-state {
  text-align: center;
  padding: 38px 20px;
  color: var(--text-soft);
  font-size: 13.5px;
}

details.bloque { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
details.bloque > summary {
  cursor: pointer;
  color: var(--up-navy);
  font-weight: 600;
  font-size: 13.5px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::before { content: "+"; font-size: 16px; line-height: 1; }
details.bloque[open] > summary::before { content: "−"; }
details.bloque > summary:hover { text-decoration: underline; }

/* ---------- Inicio de sesión ----------
   Panel partido: identidad institucional a la izquierda (mismo azul marino
   de la barra lateral, para que el primer momento del sistema y el resto
   de la experiencia se sientan como un mismo producto) y el formulario en
   una superficie clara a la derecha. En mobile se apila: la franja de marca
   se condensa arriba y el formulario ocupa el resto. */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--up-navy-deep);
}
.login-shell {
  display: flex;
  width: 100%;
  max-width: 940px;
  margin: auto;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.login-brand {
  flex: 1 1 46%;
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(160deg, var(--up-navy) 0%, var(--up-navy-deep) 100%);
  color: #fff;
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
.login-brand img { height: 56px; width: auto; }
.login-brand h1 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: var(--space-2) 0 0;
}
.login-brand p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  max-width: 34ch;
  margin: 0;
}
.login-brand .login-tag {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.login-card {
  flex: 1 1 54%;
  background: var(--surface);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-card .login-form-head { margin-bottom: var(--space-5); }
.login-card h2 { color: var(--up-navy); font-size: 19px; margin: 0 0 4px; }
.login-card p.muted { margin: 0; }
.login-card form { max-width: 340px; width: 100%; }
.login-card .btn { width: 100%; margin-top: var(--space-4); }

/* ==========================================================================
   Cliente móvil — mismo backend y mismas vistas, disposición adaptada
   ========================================================================== */
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }

  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar .brand { padding: 12px 16px 10px; display: flex; align-items: center; gap: 12px; }
  .sidebar .brand img { max-width: 116px; }
  .sidebar .brand-text { margin-top: 0; font-size: 9.5px; }
  .sidebar .brand-text strong { font-size: 12px; margin-bottom: 0; }

  .sidebar nav { display: flex; flex-direction: row; overflow-x: auto; padding: 0 8px; gap: 4px; -webkit-overflow-scrolling: touch; }
  .sidebar nav a { flex: 0 0 auto; white-space: nowrap; padding: 11px 12px; margin: 6px 0; box-shadow: none; }
  .sidebar nav a.active { box-shadow: inset 0 -3px 0 var(--up-accent); }

  /* Los grupos se vuelven un desplegable flotante en vez de empujar la
     barra horizontal hacia abajo. */
  .nav-group { flex: 0 0 auto; position: relative; margin: 6px 0; }
  .nav-group summary { padding: 11px 12px; white-space: nowrap; }
  .nav-group[open] > summary { box-shadow: inset 0 -3px 0 var(--up-accent); }
  .nav-sub {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 30;
    background: var(--up-navy-dark);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 6px; margin: 4px 0 0; min-width: 210px;
  }
  .nav-group[open] > .nav-sub { display: block; }
  .nav-sub a { white-space: nowrap; }

  .sidebar .user-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; flex-wrap: wrap; }
  .sidebar .user-box .role-tag { margin-top: 0; }
  .sidebar .user-box .user-links { margin-top: 0; }

  .topbar { padding: 12px 16px; flex-wrap: wrap; position: static; }
  .topbar h1 { font-size: 17px; }
  .topbar-actions { width: 100%; }
  .topbar-actions .btn { flex: 1; }

  .content { padding: 14px 16px 32px; }
  .card { padding: 16px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }

  .kpi-hero { padding: 16px 18px; }
  .kpi-hero .kpi-value { font-size: 32px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .filtros .campo, .filtros .campo-corto { flex: 1 1 100%; }
  .form-actions .btn { flex: 1; }
  table.data-kv td:first-child { width: 40%; }

  .login-wrap { padding: 0; align-items: flex-start; }
  .login-shell { flex-direction: column; max-width: none; width: 100%; min-height: 100vh; border-radius: 0; box-shadow: none; }
  .login-brand { flex: 0 0 auto; padding: var(--space-6) var(--space-5) var(--space-5); gap: var(--space-3); }
  .login-brand img { height: 44px; }
  .login-brand h1 { font-size: 19px; }
  .login-brand p { display: none; }
  .login-brand .login-tag { display: none; }
  .login-card { flex: 1 1 auto; justify-content: flex-start; padding: var(--space-6) var(--space-5); }
  .login-card form { max-width: none; }
}

/* ==========================================================================
   SCEUP 2.0 — componentes nuevos
   ========================================================================== */

/* ---------- Buscador global de la barra superior ---------- */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 280px;
}
.buscador svg {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-soft);
  pointer-events: none;
}
.buscador input {
  padding-left: 34px;
  font-size: 13.5px;
  background: var(--up-blue-tint-2);
  border-color: var(--border);
}
.buscador input:focus { background: var(--surface); }

/* ---------- Unidad administrativa del usuario en la barra lateral ---------- */
.sidebar .user-box .user-unidad {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
}

/* ---------- KPI principal partido (padrón: con y sin expediente) ---------- */
.kpi-hero-split {
  display: flex;
  gap: 26px;
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.kpi-split-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.kpi-split-label { font-size: 11.5px; color: rgba(255, 255, 255, .78); margin-top: 2px; }

/* Las tarjetas KPI son enlaces a la lista filtrada */
a.kpi-card { display: block; color: inherit; text-decoration: none; }
a.kpi-card:hover { text-decoration: none; }

/* ---------- Ficha: fotografía junto a los datos ---------- */
.ficha-identidad { display: flex; gap: 20px; align-items: flex-start; }
.ficha-identidad > table { flex: 1; min-width: 0; }

/* ---------- Trayectorias en curso dentro de una celda de tabla ---------- */
.linea-trayectoria {
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 1px 0;
}

/* ---------- Línea de tiempo del historial de situación ---------- */
ol.linea-tiempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--border);
}
ol.linea-tiempo li {
  position: relative;
  padding: 0 0 18px 4px;
}
ol.linea-tiempo li:last-child { padding-bottom: 0; }
ol.linea-tiempo li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  border: 2px solid var(--surface);
}
ol.linea-tiempo li.vigente::before { background: var(--up-navy); }
.lt-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-fechas { font-size: 12.5px; color: var(--text-soft); margin-top: 5px; }

/* ---------- Árbol del organigrama ---------- */
ul.arbol-unidades, ul.arbol-unidades ul { list-style: none; margin: 0; padding: 0; }
ul.arbol-unidades ul { margin-left: 22px; padding-left: 16px; border-left: 1px dashed var(--border-strong); }
ul.arbol-unidades li { margin: 4px 0; }

.unidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  flex-wrap: wrap;
}
.unidad:hover { border-color: var(--up-navy); }
.unidad[data-nivel="46"] { background: var(--up-navy); color: #fff; border-color: var(--up-navy); }
.unidad[data-nivel="46"] .muted { color: rgba(255, 255, 255, .7); }
.unidad[data-nivel="39"] { background: var(--up-blue-tint); border-color: var(--up-blue-tint); }
.unidad[data-nivel="29"] { background: var(--up-blue-tint-2); }

.unidad-nivel {
  display: inline-block;
  min-width: 26px;
  padding: 1px 6px;
  margin-right: 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 53, 97, .10);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.unidad[data-nivel="46"] .unidad-nivel { background: rgba(255, 255, 255, .18); }
.unidad-nombre { font-weight: 600; font-size: 13.5px; }
.unidad-nombre.inactiva { text-decoration: line-through; opacity: .6; }
.unidad-acciones { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 768px) {
  .buscador { min-width: 0; width: 100%; }
  .kpi-hero-split { padding-left: 0; padding-top: 14px; border-left: none; border-top: 1px solid rgba(255, 255, 255, .22); }
  .ficha-identidad { flex-direction: column; }
  .ficha-identidad > table { width: 100%; }
  ul.arbol-unidades ul { margin-left: 8px; padding-left: 10px; }
}


/* ==========================================================================
   Reclutamiento y Selección
   ========================================================================== */

/* ---------- Estatus del módulo ---------- */
.status-Borrador { background: var(--up-gray-light); color: #4E555B; }
.status-Abierta { background: var(--up-success-bg); color: var(--up-success); }
.status-Cerrada { background: #E8EAEC; color: #4E555B; }
.status-Cancelada { background: var(--up-danger-bg); color: var(--up-danger); }

.status-En-proceso { background: var(--up-info-bg); color: var(--up-info); }
.status-Aceptado { background: var(--up-success-bg); color: var(--up-success); }
.status-Rechazado { background: var(--up-danger-bg); color: var(--up-danger); }
.status-Baja-del-proceso { background: #E8EAEC; color: #4E555B; }

.status-Aprobado { background: var(--up-success-bg); color: var(--up-success); }
.status-No-aprobado { background: var(--up-danger-bg); color: var(--up-danger); }
.status-No-presentado { background: #E8EAEC; color: #4E555B; }

.status-Pendiente { background: var(--up-warning-bg); color: var(--up-warning); }
.status-Entregado { background: var(--up-blue-tint); color: var(--up-navy); }
.status-Validado { background: var(--up-success-bg); color: var(--up-success); }

/* Generaciones y grupos */
.status-Planeada, .status-Planeado { background: var(--up-warning-bg); color: var(--up-warning); }
.status-Concluido { background: var(--up-success-bg); color: var(--up-success); }
.status-Inscrito { background: var(--up-blue-tint); color: var(--up-navy); }

/* ---------- Configuración de etapas en el formulario ---------- */
.etapas-config { display: grid; gap: 10px; }
.etapa-opcion {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--up-blue-tint-2);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}
.etapa-opcion:hover { border-color: var(--up-navy); }
.etapa-opcion input { margin-top: 2px; }
.etapa-opcion > span { display: flex; flex-direction: column; gap: 2px; }
.etapa-opcion strong { color: var(--up-navy); font-size: 13.5px; }

/* ---------- Línea del proceso de selección ---------- */
ol.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
ol.proceso li {
  flex: 1 1 0;
  min-width: 148px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  background: var(--surface);
}
ol.proceso .paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--up-gray-light);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 7px;
}
ol.proceso .paso-nombre { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
ol.proceso .paso-detalle { display: block; font-size: 11.5px; color: var(--text-soft); margin-top: 3px; }

ol.proceso li.hecho { border-top-color: var(--up-success); background: var(--up-success-bg); }
ol.proceso li.hecho .paso-num { background: var(--up-success); color: #fff; }
ol.proceso li.actual { border-top-color: var(--up-navy); box-shadow: var(--shadow-md); }
ol.proceso li.actual .paso-num { background: var(--up-navy); color: #fff; }
ol.proceso li.fallido { border-top-color: var(--up-danger); background: var(--up-danger-bg); }
ol.proceso li.fallido .paso-num { background: var(--up-danger); color: #fff; }
ol.proceso li.pendiente { opacity: .72; }

/* ---------- Barra de avance ---------- */
.barra-avance {
  width: 92px;
  height: 6px;
  border-radius: 3px;
  background: var(--up-gray-light);
  overflow: hidden;
}
.barra-avance span { display: block; height: 100%; background: var(--up-navy); border-radius: 3px; }

/* ---------- Embudo de la convocatoria ---------- */
ul.embudo { list-style: none; margin: 0; padding: 0; }
ul.embudo li { padding: 9px 0; border-bottom: 1px solid var(--border); }
ul.embudo li:last-child { border-bottom: none; }
ul.embudo li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}
ul.embudo li > a:hover { text-decoration: none; color: var(--up-navy); }
.embudo-etapa { font-size: 13.5px; font-weight: 500; }
.embudo-total {
  min-width: 32px;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--up-blue-tint);
  color: var(--up-navy);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

/* Tarjeta que remata una acción importante (alta como cadete) */
.card.destacada { border-left: 4px solid var(--up-navy); }

@media (max-width: 768px) {
  ol.proceso { flex-direction: column; }
  ol.proceso li { min-width: 0; }
}


/* ==========================================================================
   Evaluación docente
   ========================================================================== */

/* Colores por nivel de desempeño (escala 1-4 del SED) */
.resultado-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--up-gray-light);
  color: #4E555B;
}
.resultado-chip.nivel-4 { background: var(--up-success-bg); color: var(--up-success); }
.resultado-chip.nivel-3 { background: var(--up-blue-tint); color: var(--up-navy); }
.resultado-chip.nivel-2 { background: var(--up-warning-bg); color: var(--up-warning); }
.resultado-chip.nivel-1 { background: var(--up-danger-bg); color: var(--up-danger); }

.resultados-linea { display: flex; flex-wrap: wrap; gap: 5px; }

.kpi-card.nivel-4 { border-left-color: var(--up-success); }
.kpi-card.nivel-3 { border-left-color: #4A87C6; }
.kpi-card.nivel-2 { border-left-color: #D9A62B; }
.kpi-card.nivel-1 { border-left-color: var(--up-danger); }

.nivel-texto-4 { color: var(--up-success); }
.nivel-texto-3 { color: var(--up-navy); }
.nivel-texto-2 { color: var(--up-warning); }
.nivel-texto-1 { color: var(--up-danger); }

.status-Borrador { background: var(--up-warning-bg); color: var(--up-warning); }
.status-Concluida { background: var(--up-success-bg); color: var(--up-success); }

tr.fila-inactiva td { opacity: .58; }

/* ---------- Captura de criterios ---------- */
.criterios { display: grid; gap: 10px; }
.criterio {
  display: grid;
  grid-template-columns: 1.35fr 190px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--up-blue-tint-2);
}
.criterio:hover { border-color: var(--border-strong); }
.criterio-texto strong { color: var(--up-navy); font-size: 13.5px; }
.criterio-escala select { font-size: 13px; }
.criterio-comentario input { font-size: 13px; }

@media (max-width: 900px) {
  .criterio { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Captura por conteo (opinión del alumnado) ---------- */
.criterio.criterio--conteo { grid-template-columns: 1.1fr 260px 1fr; }
.conteo-opciones { display: flex; flex-direction: column; gap: 4px; }
.conteo-opcion { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conteo-opcion label { font-size: 12px; color: var(--text-soft); }
.conteo-opcion input[type="number"] {
  width: 64px; padding: 3px 6px; font-size: 12px; text-align: right;
}
.conteo-resultado { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .criterio.criterio--conteo { grid-template-columns: 1fr; }
}

/* ---------- Hoja del reporte ---------- */
.hoja-reporte { max-width: 980px; margin: 0 auto; }
.reporte-encabezado {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--up-navy);
}
.reporte-encabezado img { height: 58px; width: auto; }
.reporte-encabezado h2 {
  margin: 0;
  color: var(--up-navy);
  font-size: 17px;
  letter-spacing: .04em;
}

.bloque-instrumento {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--up-navy);
  border-radius: var(--radius-sm);
}
.bloque-instrumento.resumen { background: var(--up-blue-tint-2); }
.bi-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 700;
  color: var(--up-navy);
  font-size: 14.5px;
  margin-bottom: 12px;
}
.bi-resultado { display: flex; gap: 34px; flex-wrap: wrap; }
.bi-valor { font-size: 30px; font-weight: 700; line-height: 1; color: var(--up-navy); }
.bi-nivel { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--text); }
.bi-comentarios { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.bi-comentarios p { margin: 5px 0; font-size: 13px; }

.escala-referencia { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }

@media print {
  .sidebar, .topbar, .no-imprimir, .flash { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border: none; }
  .hoja-reporte { max-width: none; }
  .bloque-instrumento { break-inside: avoid; }
  @page { size: letter; margin: 12mm; }
}

/* ---------- Reporte docente: frente y vuelta ---------- */
.hoja { padding: 4px 2px; }
.hoja-frente { break-after: page; page-break-after: always; }

.resumen-encabezado {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 22px;
  align-items: center;
  margin: 18px 0 22px;
}
.medidor-bloque { text-align: center; }
.medidor { width: 100%; height: auto; max-width: 240px; }
.medidor-pista { stroke: var(--up-gray-light); }
.medidor text.medidor-cifra { font-size: 34px; font-weight: 800; }
.medidor text.medidor-nivel { font-size: 12px; font-weight: 700; fill: var(--text-soft); }

.grafico-barras { width: 100%; height: auto; }
.gb-etiqueta { font-size: 11px; font-weight: 700; fill: var(--up-navy); }
.gb-pista { fill: var(--up-gray-light); }
.gb-valor { font-size: 12px; font-weight: 700; }
.gb-tick { stroke: var(--border-strong); stroke-width: 1; }
.gb-tick-num { font-size: 9px; fill: var(--text-soft); text-anchor: middle; }

.dona-bloque {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.dona-svg { flex: 0 0 auto; }
.grafico-dona { width: 130px; height: 130px; display: block; }
.dona-info { flex: 1; min-width: 0; }
.dona-leyenda { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11.5px; }
.dona-item { display: flex; align-items: center; white-space: nowrap; }
.dona-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; flex-shrink: 0;
}

.chart-bloque { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }

/* ---------- Gráficas genéricas de tablero (barras y dona) ---------- */
.grafico-barras-h { width: 100%; height: auto; display: block; }
.grafico-barras-h .gbh-etiqueta { font-size: 12px; font-weight: 600; fill: var(--text); }
.grafico-barras-h .gbh-pista { fill: var(--up-gray-light); }
.grafico-barras-h .gbh-valor { font-size: 12px; font-weight: 700; }
.grafico-barras-h .gbh-barra {
  animation: gbh-crecer .5s cubic-bezier(.25, .1, .25, 1) both;
  transition: opacity .15s ease;
}
@keyframes gbh-crecer { from { width: 0; } to { width: var(--gbh-w); } }
.grafico-barras-h a.gbh-fila { cursor: pointer; }
.grafico-barras-h a.gbh-fila:hover .gbh-barra,
.grafico-barras-h a.gbh-fila:focus-visible .gbh-barra { opacity: .78; }
.grafico-barras-h a.gbh-fila:hover .gbh-etiqueta,
.grafico-barras-h a.gbh-fila:focus-visible .gbh-etiqueta { fill: var(--up-navy); }
.grafico-barras-apiladas .gba-segmento:hover { opacity: .82; }

.grafico-dona-generica { width: 100%; height: auto; max-width: 150px; display: block; }
.grafico-dona-generica .gd-rebanada {
  transition: opacity .15s ease, transform .15s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.grafico-dona-generica .gd-rebanada:hover { opacity: .85; transform: scale(1.03); }
.grafico-dona-generica .gd-total { font-size: 24px; font-weight: 800; fill: var(--up-navy); }
.grafico-dona-generica .gd-total-label { font-size: 10px; fill: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  .grafico-barras-h .gbh-barra { animation: none; width: var(--gbh-w); }
  .grafico-dona-generica .gd-rebanada:hover { transform: none; }
}

/* ---------- Captura por instrumento, en la ficha del docente ---------- */
.instrumentos-captura { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.instrumentos-captura-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--up-blue-tint-2);
}
.instrumentos-captura-fila .ic-clave {
  font-weight: 700; color: var(--up-navy); font-size: 12px; min-width: 62px;
}
.instrumentos-captura-fila .muted { flex: 1; font-size: 12px; }
.instrumentos-captura-fila .btn-sm { flex-shrink: 0; }

.ficha-compacta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 20px;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.ficha-compacta div { padding: 3px 0; border-bottom: 1px dotted var(--border); }
.ficha-compacta b { color: var(--up-navy); }

.tabla-compacta.data-table { font-size: 12px; }
.tabla-compacta.data-table th, .tabla-compacta.data-table td { padding: 5px 8px; }

.comentarios-compactos { margin-top: 14px; }
.comentarios-compactos h4 {
  margin: 14px 0 6px; color: var(--up-navy); font-size: 13px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.comentarios-compactos p { margin: 3px 0; font-size: 11.5px; }

.escala-referencia.compacta table { font-size: 11px; }
.escala-referencia.compacta td { padding: 4px 8px; }


/* Resultado ponderado del docente */
.resultado-global {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--up-navy);
  border-radius: var(--radius-sm);
  background: var(--up-blue-tint-2);
}
.rg-valor { font-size: 30px; font-weight: 700; line-height: 1; }
.rg-nivel { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }


/* ==========================================================================
   Competencias básicas
   ========================================================================== */

/* Semáforo de vigencia */
.vigencia-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vigencia-Vigente { background: var(--up-success-bg); color: var(--up-success); }
.vigencia-Próximo-a-vencer { background: var(--up-warning-bg); color: var(--up-warning); }
.vigencia-Vencido { background: var(--up-danger-bg); color: var(--up-danger); }
.vigencia-pill.bloqueado { background: var(--up-danger-bg); color: var(--up-danger); }
.vigencia-pill.listo { background: var(--up-blue-tint); color: var(--up-navy); }

a.kpi-card.vigencia-Vigente { border-left-color: var(--up-success); }
a.kpi-card.vigencia-Próximo-a-vencer { border-left-color: var(--up-warning-accent); }
a.kpi-card.vigencia-Vencido { border-left-color: var(--up-danger); }

/* Asistencia */
.asistencia-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.asistencia-Asistió { background: var(--up-success-bg); color: var(--up-success); }
.asistencia-Falta { background: var(--up-danger-bg); color: var(--up-danger); }
.asistencia-Pendiente { background: var(--up-gray-light); color: #4E555B; }

/* Estatus de la jornada */
.status-Programada { background: var(--up-blue-tint); color: var(--up-navy); }

/* ---------- Planes de trabajo de instructores ---------- */
.status-Programado { background: var(--up-blue-tint); color: var(--up-navy); }
.status-Cancelado { background: var(--up-danger-bg); color: var(--up-danger); }
.badge-warn { background: var(--up-warning-bg); color: var(--up-warning); }

.matriz-plan th { text-align: center; }
.matriz-plan .celda-sesion { vertical-align: top; min-width: 150px; font-size: 12.5px; }
.matriz-plan .celda-sesion .materia { font-weight: 600; color: var(--up-navy); }
.matriz-plan .celda-sesion .instr { margin-top: 2px; }
.matriz-plan .celda-sesion .instr.suplente { color: var(--up-warning); }
.matriz-plan .celda-sesion .instr.falta,
.hoja-plan .falta { color: var(--up-danger); font-weight: 600; }
.matriz-plan .celda-sesion.sin-instructor { background: var(--up-danger-bg); }

.hoja-plan .hoja-encabezado { margin-bottom: 14px; }
.hoja-plan .matriz-impresa .celda-sesion { min-width: 0; }
.hoja-plan .firma { display: flex; gap: 40px; margin: 26px 0 8px; font-size: 13px; }
.hoja-plan .pie-hoja { margin-top: 24px; font-size: 11px; text-align: center; }
.hoja-plan .hoja-instructor { break-after: page; page-break-after: always; }
.hoja-plan .hoja-instructor:last-of-type { break-after: auto; page-break-after: auto; }
.hoja-plan .bloque-hoja { break-inside: avoid; }

@media print {
  .hoja-plan { padding: 0; }
  .hoja-plan .data-table { font-size: 11px; }
  .hoja-plan .data-table th, .hoja-plan .data-table td { padding: 4px 6px; }
  .hoja-plan .matriz-impresa { width: 100%; }
}

/* ---------- CRM: tablero de aspirantes, línea de tiempo y estados ---------- */
.crm-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .crm-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .crm-tablero { grid-template-columns: 1fr; } }
.crm-col { background: var(--up-blue-tint-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.crm-col-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.crm-tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; font-size: 13px; }
ol.crm-linea { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
ol.crm-linea li { position: relative; padding: 0 0 16px 14px; }
ol.crm-linea li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--up-navy); }
.crm-linea-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.status-Hecho, .status-Registrado { background: var(--up-success-bg); color: var(--up-success); }
.status-Interesado { background: var(--up-info-bg); color: var(--up-info); }
.status-Orientado { background: var(--up-blue-tint); color: var(--up-navy); }
.status-Descartado { background: #E8EAEC; color: #4E555B; }