/* ============ Devibs Class — hoja de estilos ============ */
:root {
  /* Marca Devibs: rojo #FB4A4A sobre azul marino #100B36 */
  --marca-rojo: #fb4a4a;
  --marca-marino: #100b36;

  --fondo: #f2f4f8;
  --superficie: #ffffff;
  --superficie-2: #f6f8fb;   /* encabezados de tabla, campos suaves */
  --superficie-3: #eef2f7;   /* hover de filas */
  --borde: #dde3ec;
  --borde-fuerte: #c3ccda;
  --texto: #1e293b;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;

  --primario: #fb4a4a;
  --primario-oscuro: #dc2626;
  --primario-tinte: #fff0f0;
  --primario-suave: #ffe0e0;

  --lateral-de: #100b36;
  --lateral-a: #241a4d;
  --lateral-texto: #cbd0e8;
  --lateral-tenue: #8b8fb8;

  --verde: #16a34a;
  --verde-tinte: #dcfce7;
  --rojo: #dc2626;
  --rojo-tinte: #fee2e2;
  --rojo-fuerte: #b91c1c;
  --ambar: #d97706;
  --ambar-oscuro: #b45309;
  --ambar-tinte: #fef3c7;
  --azul: #0284c7;
  --azul-tinte: #e0f2fe;
  --morado: #7c3aed;
  --morado-tinte: #ede9fe;

  --sombra: 0 1px 3px rgba(15, 23, 42, .07), 0 6px 18px rgba(15, 23, 42, .05);
  --sombra-fuerte: 0 8px 24px rgba(15, 23, 42, .12);
  --radio: 14px;
}

/* ---------------- modo oscuro ---------------- */
[data-tema="oscuro"] {
  --fondo: #0d0a24;
  --superficie: #171334;
  --superficie-2: #1e1943;
  --superficie-3: #211c48;
  --borde: #2e2860;
  --borde-fuerte: #3d3676;
  --texto: #e6e8f5;
  --texto-suave: #a2a7c9;
  --texto-tenue: #7d82a8;

  --primario: #fb4a4a;
  --primario-oscuro: #ff6b6b;
  --primario-tinte: #2c1430;
  --primario-suave: #3a1a38;

  --lateral-de: #0a0720;
  --lateral-a: #16103a;
  --lateral-texto: #c3c8e6;
  --lateral-tenue: #7f84ad;

  --verde: #4ade80;
  --verde-tinte: #16351f;
  --rojo: #f87171;
  --rojo-tinte: #3a1620;
  --rojo-fuerte: #4d1d28;
  --ambar: #fbbf24;
  --ambar-oscuro: #fcd34d;
  --ambar-tinte: #3a2a12;
  --azul: #60a5fa;
  --azul-tinte: #142a45;
  --morado: #c084fc;
  --morado-tinte: #2c1a45;

  --sombra: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
  --sombra-fuerte: 0 8px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

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

/* «hidden» siempre oculta, aunque la clase (.boton, .tarjeta…) diga otro display */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  display: flex;
  min-height: 100vh;
  font-size: 15px;
}

/* ---------------- barra lateral ---------------- */
.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--lateral-de) 0%, var(--lateral-a) 100%);
  color: rgba(255, 255, 255, .14);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  padding: 6px 8px 18px;
}
.marca-logo {
  font-size: 30px;
  background: rgba(255, 255, 255, .12);
  border-radius: 12px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.marca strong { font-size: 20px; letter-spacing: .5px; display: block; }
.marca strong em { font-style: normal; color: var(--marca-rojo); }
.marca small { color: var(--lateral-tenue); font-size: 11.5px; }

.nav-seccion {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--lateral-tenue);
  padding: 14px 10px 6px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lateral-texto);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 500;
  transition: background .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.activo { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-icono { font-size: 16px; }
.nav-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-grupos { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-vacio { color: var(--lateral-tenue); font-size: 13px; padding: 8px 12px; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.boton-nuevo-grupo { margin-top: 14px; width: 100%; }

/* ---------------- contenido ---------------- */
.contenido {
  flex: 1;
  padding: 34px 42px 90px;
  max-width: 1200px;
  min-width: 0;
}

.encabezado-pagina, .barra-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
h2 { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.subtitulo { color: var(--texto-suave); margin-top: 3px; }

.encabezado-grupo {
  border-left: 5px solid var(--color-grupo, var(--primario));
  padding-left: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------------- selector de parcial ---------------- */
.selector-parcial {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: var(--sombra);
}
.etiqueta-parcial {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--texto-suave);
  margin-right: 2px;
}
.chip-parcial {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--texto-suave);
  transition: all .12s;
}
.chip-parcial:hover { background: var(--fondo); color: var(--texto); }
.chip-parcial.activo {
  background: var(--color-grupo, var(--primario));
  color: #fff;
}
.prom-parcial {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  margin-top: 2px;
}
.aviso-parciales { font-size: 10.5px; color: var(--texto-suave); margin-top: 3px; }

/* ---------------- cooperaciones y pagos ---------------- */
.barra-progreso {
  height: 8px;
  background: var(--fondo);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}
.barra-progreso-relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--verde), var(--verde));
  border-radius: 999px;
  transition: width .3s;
}
.dinero-linea { margin-top: 8px; font-size: 15px; }
.dinero-linea strong { font-size: 18px; }
.campo-dinero {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--texto-suave);
}
.campo-pago {
  font: inherit;
  font-weight: 600;
  width: 96px;
  padding: 7px 10px;
  text-align: center;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
  color: var(--texto);
}
.campo-pago:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.pildora-material {
  background: var(--verde-tinte);
  color: var(--verde);
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  border-radius: 10px;
  padding: 6px 12px;
}
.interruptor-entrega {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-suave);
  transition: all .12s;
}
.interruptor-entrega:has(input:checked) {
  border-color: var(--verde);
  background: var(--verde-tinte);
  color: var(--verde);
}
.interruptor-entrega input { accent-color: var(--verde); width: 16px; height: 16px; }
.campo-nota-pago {
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-width: 160px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
  color: var(--texto);
}
.campo-nota-pago:focus { outline: none; border-color: var(--primario); }

/* ---------------- alumnos en riesgo ---------------- */
.seccion-riesgo { padding: 20px 22px; margin-bottom: 18px; overflow-x: auto; }
.seccion-riesgo h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.borde-rojo { border-left: 5px solid var(--rojo); }
.borde-ambar { border-left: 5px solid var(--ambar); }
.borde-azul { border-left: 5px solid var(--azul); }
.tabla-riesgo { margin-top: 6px; }
.tabla-riesgo th { background: transparent; padding-top: 6px; padding-bottom: 6px; }
.tabla-riesgo th:first-child, .tabla-riesgo td:first-child { padding-left: 0; }
.sin-casos { padding: 6px 0 2px; }
.texto-ambar { color: var(--ambar); }

/* ---------------- horario del docente ---------------- */
.tabla-horario { table-layout: fixed; min-width: 1120px; }
.tabla-horario th { text-align: center; }
.celda-hora {
  width: 84px;
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
  background: var(--superficie-2);
  color: var(--texto-suave);
}
.hora-fin { display: block; font-weight: 500; font-size: 11px; }
.fila-receso td { background: var(--fondo); font-weight: 700; letter-spacing: 2px; }
.celda-clase { padding: 6px 7px; vertical-align: top; }
.celda-clase input {
  font: inherit;
  width: 100%;
  border: 1.5px solid transparent;
  background: var(--superficie-2);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--texto);
}
.celda-clase input:hover { border-color: var(--borde); }
.celda-clase input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primario);
}
.campo-materia {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  width: 100%;
  border: 1.5px solid transparent;
  background: var(--superficie-2);
  border-radius: 8px;
  padding: 5px 6px;
  margin-bottom: 4px;
  color: var(--texto);
}
.campo-materia:hover { border-color: var(--borde); }
.campo-materia:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primario);
}
.fila-clase { display: flex; gap: 4px; }
.fila-clase select, .fila-clase input {
  font: inherit;
  font-size: 11px;
  min-width: 0;
  flex: 1 1 0;
  border: 1.5px solid transparent;
  background: var(--superficie-2);
  border-radius: 8px;
  padding: 4px 5px;
  color: var(--texto-suave);
}
.fila-clase .campo-horas { flex: 0 0 42px; text-align: center; }
.fila-clase select:hover, .fila-clase input:hover { border-color: var(--borde); }
.fila-clase select:focus, .fila-clase input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primario);
  color: var(--texto);
}

/* ---------------- catálogos y franjas horarias ---------------- */
.titulo-catalogo { font-size: 14px; margin-bottom: 8px; }
.lista-catalogo { list-style: none; margin-bottom: 10px; max-height: 190px; overflow-y: auto; }
.lista-catalogo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.35;
}
.forma-catalogo { display: flex; gap: 6px; }
.forma-catalogo input { flex: 1; margin-top: 0 !important; }
.forma-catalogo button { flex: 0 0 44px; font-size: 18px; padding: 0; }
.ayuda-campo {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--texto-suave);
  margin-top: 5px;
}

/* pestañas */
.pestanas {
  display: flex;
  gap: 4px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 26px;
  box-shadow: var(--sombra);
  flex-wrap: wrap;
  width: fit-content;
}
.pestanas a {
  text-decoration: none;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all .15s;
  white-space: nowrap;
}
.pestanas a:hover { background: var(--fondo); color: var(--texto); }
.pestanas a.activa { background: var(--primario); color: #fff; box-shadow: 0 2px 6px rgba(99, 102, 241, .35); }

/* ---------------- tarjetas ---------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.seccion { padding: 22px 24px; margin-bottom: 20px; overflow: visible; }
.seccion h3 { font-size: 16px; margin-bottom: 12px; }

/* Todo lo que se apila directamente en la página lleva su separación:
   antes las tarjetas quedaban pegadas unas con otras. */
.contenido > .tarjeta,
.contenido > .fila-doble,
.contenido > .rejilla-grupos,
.contenido > .rejilla-actividades,
.contenido > .rejilla-reportes,
.contenido > .rejilla-desglose,
.contenido > table,
.contenido > .ayuda { margin-bottom: 20px; }
.contenido > .fila-doble { gap: 20px; }   /* las tarjetas quedan a la misma altura */
.contenido > *:last-child { margin-bottom: 0; }

.rejilla-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.tarjeta-grupo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  text-decoration: none;
  color: var(--texto);
  transition: transform .15s, box-shadow .15s;
}
.tarjeta-grupo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.tarjeta-banda { height: 6px; background: var(--color-grupo, var(--primario)); }
.tarjeta-cuerpo { padding: 18px 20px 16px; }
.tarjeta-cuerpo h2 { font-size: 17px; }
.tarjeta-datos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: center;
}
.tarjeta-datos strong { display: block; font-size: 17px; }
.tarjeta-datos span { font-size: 11.5px; color: var(--texto-suave); }
.tarjeta-pie {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  text-align: center;
}
.aviso-linea {
  background: var(--ambar-tinte);
  color: var(--ambar-oscuro);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
}

/* ---------------- tablas ---------------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--texto-suave);
  background: var(--superficie-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 11px 16px; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--superficie-3); }
.col-num { width: 44px; color: var(--texto-suave); text-align: center; }
.col-centro { text-align: center; }
.col-acciones { text-align: right; width: 110px; white-space: nowrap; }
.texto-fuerte { font-weight: 600; }
.texto-suave { color: var(--texto-suave); }
.texto-rojo { color: var(--rojo); }
.texto-verde { color: var(--verde); }

/* ---------------- botones ---------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.boton:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.boton-primario {
  background: linear-gradient(135deg, var(--primario), var(--primario-oscuro));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}
.boton-primario:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--primario), var(--primario-oscuro)); }
.boton-suave { background: var(--primario-tinte); border-color: transparent; color: var(--primario-oscuro); }
.boton-suave:hover { background: rgba(255, 255, 255, .14); }
.boton-peligro { background: var(--rojo-tinte); border-color: transparent; color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo-fuerte); }
.boton-grande { padding: 12px 22px; font-size: 15px; }
.boton-icono {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 5px 7px;
  border-radius: 8px;
  opacity: .55;
  transition: all .15s;
}
.boton-icono:hover { opacity: 1; background: var(--fondo); }
.en-linea { display: inline; }

/* ---------------- píldoras / insignias ---------------- */
.pildora {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.pildora-verde { background: var(--verde-tinte); color: var(--verde); }
.pildora-roja { background: var(--rojo-tinte); color: var(--rojo); }
.pildora-ambar { background: var(--ambar-tinte); color: var(--ambar); }
.pildora-azul { background: var(--azul-tinte); color: var(--azul); }
.pildora-final { font-size: 14px; padding: 5px 14px; }
.pildora-rubro { background: var(--primario-tinte); color: var(--primario-oscuro); }
.pildora-examen { background: var(--morado-tinte); color: var(--morado); }
.pildora-circulo { background: var(--rojo-tinte); color: var(--rojo); }
.pildora-estrella { background: var(--ambar-tinte); color: var(--ambar-oscuro); }

/* ---------------- puntos extra (estrellas) ---------------- */
.control-estrellas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.boton-estrella {
  font: inherit;
  font-weight: 700;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  transition: all .12s;
}
.boton-estrella:hover { border-color: var(--ambar); color: var(--ambar); background: var(--ambar-tinte); }
.cuenta-estrellas {
  min-width: 44px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--borde-fuerte);
}
.cuenta-estrellas.con-estrellas { color: var(--ambar-oscuro); }
.cuenta-estrellas.con-sanciones { color: var(--rojo); }
.boton-sancion:hover { border-color: var(--rojo); color: var(--rojo); background: var(--rojo-tinte); }
.boton-notas { padding: 6px 12px; font-size: 13px; }

/* ---------------- notas por alumno ---------------- */
.lista-notas {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nota-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
}
.nota-fecha {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 2px;
}
.nota-texto { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.nota-vacia { padding: 14px 4px; }
.opcion-estrella {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px !important;
  cursor: pointer;
  transition: all .12s;
}
.opcion-estrella.elegida { border-color: var(--ambar); background: var(--ambar-tinte); }
.opcion-estrella input[type="radio"] {
  width: auto !important;
  margin-top: 3px !important;
  accent-color: var(--ambar);
}
.opcion-detalle {
  font-weight: 500;
  color: var(--texto-suave);
  margin-top: 6px;
  line-height: 2;
}
.entrada-corta {
  font: inherit;
  font-weight: 700;
  width: 76px;
  padding: 5px 8px;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid var(--borde);
  margin: 0 4px;
}
.entrada-select { width: auto; text-align: left; font-weight: 600; }
.entrada-corta:focus { outline: none; border-color: var(--ambar); }
.bloque-sancion {
  border: 1.5px solid var(--borde);
  border-left: 4px solid var(--rojo);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 4px;
}
.entrada-sancion:focus { border-color: var(--rojo) !important; }
.insignia {
  background: var(--primario-tinte);
  color: var(--primario-oscuro);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

/* ---------------- asistencia ---------------- */
.barra-interna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
  flex-wrap: wrap;
}
.leyenda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.grupo-estados { display: inline-flex; gap: 5px; }
.boton-estado {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  width: 36px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  transition: all .12s;
}
.boton-estado:hover { border-color: var(--texto-tenue); }
.boton-estado-verde.activo { background: var(--verde); border-color: var(--verde); color: #fff; }
.boton-estado-roja.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton-estado-ambar.activo { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.boton-estado-azul.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.campo-fecha {
  font: inherit;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}

.barra-guardar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 0;
  margin-top: 10px;
  background: linear-gradient(transparent, var(--fondo) 30%);
}

/* ---------------- actividades ---------------- */
.rejilla-actividades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.tarjeta-actividad { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-actividad h3 { font-size: 16px; }
.actividad-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.titulo-rubro {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  margin: 24px 0 12px;
}
.titulo-rubro:first-of-type { margin-top: 0; }
.titulo-rubro .texto-suave { font-weight: 500; font-size: 13px; }
.selector-rubros { flex-wrap: wrap; }
.selector-rubros label { flex: 1 1 40%; }
.tarjeta-desplazable { overflow-x: auto; }
.actividad-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.campo-nota {
  font: inherit;
  font-weight: 600;
  width: 90px;
  padding: 7px 10px;
  text-align: center;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
}
.campo-nota:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.enlace-volver { color: var(--texto-suave); text-decoration: none; font-size: 13px; font-weight: 600; }
.enlace-volver:hover { color: var(--primario); }

/* ---------------- captura rápida (matriz) ---------------- */
.contenedor-matriz { overflow: auto; max-height: 66vh; }
.tabla-matriz { border-collapse: separate; border-spacing: 0; }
.tabla-matriz th, .tabla-matriz td { padding: 6px 8px; }
.tabla-matriz thead .fila-rubros-matriz th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 30px;
  font-size: 11.5px;
  text-align: center;
  background: var(--primario-tinte);
  color: var(--primario-oscuro);
  border-bottom: 1px solid var(--borde);
}
.tabla-matriz thead .grupo-rubro-examen { background: var(--morado-tinte); color: var(--morado); }
.tabla-matriz thead .fila-acts-matriz th {
  position: sticky;
  top: 42px;
  z-index: 3;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  text-align: center;
}
.celda-act { min-width: 76px; max-width: 110px; }
.act-nombre {
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.act-pts { display: block; font-weight: 500; font-size: 10px; color: var(--texto-suave); text-transform: none; letter-spacing: 0; }
.tabla-matriz .celda-alumno {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--superficie);
  min-width: 200px;
  max-width: 240px;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--borde);
}
.tabla-matriz thead .celda-esquina { z-index: 4; background: var(--superficie-2); }
.num-lista { color: var(--texto-suave); font-weight: 500; font-size: 12px; margin-right: 4px; }
.celda-input { text-align: center; }
.campo-matriz {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  width: 62px;
  padding: 6px 6px;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}
.campo-matriz:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.campo-corregido {
  border-color: var(--rojo) !important;
  background: var(--rojo-tinte) !important;
}
.tabla-matriz tbody tr:hover td { background: var(--superficie-3); }
.tabla-matriz tbody tr:hover .celda-alumno { background: var(--superficie-3); }

/* ---------------- estadísticas ---------------- */
.rejilla-estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.estadistica { padding: 16px 18px; text-align: center; }
.estadistica strong { font-size: 24px; display: block; }
.estadistica span { font-size: 12.5px; color: var(--texto-suave); }

/* ---------------- reportes ---------------- */
.rejilla-reportes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.tarjeta-reporte {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.tarjeta-reporte h3 { font-size: 17px; }
.tarjeta-reporte p { flex: 1; }
.reporte-icono { font-size: 34px; }
.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acciones-columna { flex-direction: column; align-items: flex-start; width: 100%; }

/* ---------------- rubros y ponderación ---------------- */
.encabezado-rubros, .fila-rubro {
  display: grid;
  grid-template-columns: 1fr 120px 80px 40px;
  gap: 12px;
  align-items: center;
}
.encabezado-rubros {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--texto-suave);
  font-weight: 700;
  padding: 0 2px 8px;
}
.fila-rubro {
  padding: 8px 2px;
  border-top: 1px solid var(--borde);
}
.celda-nombre { display: flex; align-items: center; gap: 10px; }
.celda-nombre .rubro-nombre {
  font: inherit;
  font-weight: 600;
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
}
.celda-nombre .rubro-nombre:focus { outline: none; border-color: var(--primario); }
.etiqueta-fija {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--fondo);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.interruptor-examen {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin: 0 !important;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  padding: 7px 10px;
  transition: all .12s;
}
.interruptor-examen:has(input:checked) {
  border-color: var(--morado);
  background: var(--morado-tinte);
}
.interruptor-examen input { accent-color: var(--morado); margin: 0; width: auto !important; }
.celda-examen { text-align: center; justify-self: center; }
#lista-rubros { margin-bottom: 14px; }
.campo-porcentaje { display: flex; align-items: center; gap: 6px; }
.campo-porcentaje input {
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
  text-align: center;
}
.campo-porcentaje input:focus { outline: none; border-color: var(--primario); }
.suma-pesos { margin-top: 14px; font-weight: 700; font-size: 15px; }
.suma-pesos.ok { color: var(--verde); }
.suma-pesos.error { color: var(--rojo); }
.zona-peligro { border-color: var(--rojo-fuerte); }
.zona-peligro h3 { color: var(--rojo); }

/* ---------------- formularios y diálogos ---------------- */
/* El reset global (* { margin: 0 }) anula el `margin: auto` con el que el
   navegador centra los <dialog>, por eso se posicionan explícitamente. */
.dialogo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  padding: 28px;
  width: min(440px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
}
.dialogo-ancho { width: min(560px, 92vw); }
#dialogo-bloques { width: min(640px, 94vw); }
.dialogo::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.dialogo h2 { margin-bottom: 16px; }
.dialogo label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; color: var(--texto); }
.dialogo input[type="text"], .dialogo input:not([type]), .dialogo input[type="number"],
.dialogo input[type="date"], .dialogo textarea, .dialogo select,
.forma-ajustes input:not([type="radio"]) {
  font: inherit;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}
.dialogo input:focus, .dialogo textarea:focus, .forma-ajustes input:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.dialogo textarea { resize: vertical; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.forma-ajustes label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.ayuda { color: var(--texto-suave); font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }

.selector-color { display: flex; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.selector-color input[type="radio"] {
  appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all .12s;
}
.selector-color input[type="radio"]:checked { border-color: var(--texto); transform: scale(1.12); }

.selector-tipo { display: flex; gap: 8px; margin-top: 8px; }
.selector-tipo input[type="radio"] { display: none; }
.selector-tipo label {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  margin: 0;
  transition: all .12s;
}
.selector-tipo input:checked + label {
  border-color: var(--primario);
  background: var(--primario-tinte);
  color: var(--primario-oscuro);
}

/* ---------------- estado vacío ---------------- */
.estado-vacio {
  text-align: center;
  padding: 70px 20px;
  background: var(--superficie);
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.estado-vacio-icono { font-size: 52px; }
.estado-vacio h2 { justify-content: center; }
.estado-vacio p { color: var(--texto-suave); line-height: 1.6; }
.estado-vacio .acciones { justify-content: center; margin-top: 8px; }

/* ---------------- toasts ---------------- */
.toasts {
  position: fixed;
  top: 20px; right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.toast {
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  animation: entrar-toast .25s ease;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.toast-ok { border-left: 4px solid var(--verde); }
.toast-error { border-left: 4px solid var(--rojo); }
@keyframes entrar-toast {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- responsive ---------------- */
/* ---------------- celular y tableta ---------------- */
/* La barra de arriba y el velo solo existen en pantallas chicas */
.barra-movil, .velo-menu { display: none; }

@media (max-width: 900px) {
  /* El menú se sale de la pantalla y entra deslizándose */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: min(285px, 84vw);
    padding: 18px 14px;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
  }
  .sidebar.abierto { transform: none; }

  .velo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    padding: 0;
    background: rgba(8, 6, 26, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .velo-menu.visible { opacity: 1; pointer-events: auto; }

  .barra-movil {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 10px 14px;
    background: linear-gradient(120deg, var(--lateral-de), var(--lateral-a));
    box-shadow: 0 2px 12px rgba(8, 6, 26, .25);
  }
  .boton-menu {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
  }
  .boton-menu:active { background: rgba(255, 255, 255, .2); }
  .boton-menu svg { width: 21px; height: 21px; }

  .marca-movil {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: #fff;
  }
  .marca-movil strong { font-size: 16px; letter-spacing: .2px; }
  .marca-movil strong em { font-style: normal; color: var(--marca-rojo); }
  .usuario-movil { text-decoration: none; flex: none; }

  .contenido { padding: 18px 14px 70px; }
  .fila-doble { grid-template-columns: 1fr; }

  /* Encabezados y botones dejan de pelearse por el ancho */
  .encabezado-pagina, .barra-acciones { align-items: flex-start; gap: 12px; }
  .encabezado-pagina > .boton, .barra-acciones > .boton,
  .encabezado-pagina > a.boton, .barra-acciones > a.boton { width: 100%; justify-content: center; }
  h1 { font-size: 21px; }
  h2 { font-size: 17px; }

  /* Las tablas anchas se arrastran de lado en vez de apretujarse */
  .tarjeta > .tabla, .seccion > .tabla { min-width: 560px; }
  .tarjeta:has(> .tabla), .seccion:has(> .tabla) { overflow-x: auto; }
  /* El nombre del alumno en un solo renglón: se lee de un vistazo */
  .tabla td.texto-fuerte, .tabla th:nth-child(2) { white-space: nowrap; }
  .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; }

  .rejilla-estadisticas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .estadistica { padding: 13px 12px; }
  .estadistica strong { font-size: 20px; }

  .ficha-cuenta { flex-direction: column; gap: 14px; padding: 18px; }
  .dialogo { width: min(460px, 94vw); padding: 20px 18px; }
}

@media (max-width: 560px) {
  .rejilla-estadisticas { grid-template-columns: 1fr 1fr; }
  .contenido { padding: 16px 12px 60px; }
  .tarjeta, .seccion { border-radius: 13px; }
}

/* ============================================================
   ANIMACIONES
   Entradas suaves, respuesta al tacto y transiciones de estado.
   Todo se desactiva si el sistema pide menos movimiento.
   ============================================================ */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer-suave {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes entrar-dialogo {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes latido {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes brinco {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes destello {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
  100% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
}
@keyframes deslizar-barra {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- entrada del contenido ---- */
.contenido > * {
  animation: aparecer .4s ease both;
}
.contenido > *:nth-child(2) { animation-delay: .04s; }
.contenido > *:nth-child(3) { animation-delay: .08s; }
.contenido > *:nth-child(4) { animation-delay: .12s; }
.contenido > *:nth-child(5) { animation-delay: .16s; }
.contenido > *:nth-child(n+6) { animation-delay: .2s; }

/* Las tarjetas de una rejilla entran escalonadas */
.rejilla-grupos > *, .rejilla-actividades > *, .rejilla-reportes > *,
.rejilla-estadisticas > * {
  animation: aparecer .45s ease both;
}
.rejilla-grupos > *:nth-child(2), .rejilla-actividades > *:nth-child(2),
.rejilla-reportes > *:nth-child(2), .rejilla-estadisticas > *:nth-child(2) { animation-delay: .06s; }
.rejilla-grupos > *:nth-child(3), .rejilla-actividades > *:nth-child(3),
.rejilla-reportes > *:nth-child(3), .rejilla-estadisticas > *:nth-child(3) { animation-delay: .12s; }
.rejilla-grupos > *:nth-child(4), .rejilla-actividades > *:nth-child(4),
.rejilla-reportes > *:nth-child(4), .rejilla-estadisticas > *:nth-child(4) { animation-delay: .18s; }
.rejilla-grupos > *:nth-child(n+5), .rejilla-actividades > *:nth-child(n+5),
.rejilla-reportes > *:nth-child(n+5) { animation-delay: .24s; }

.estado-vacio { animation: aparecer .5s ease both; }
.estado-vacio-icono {
  display: inline-block;
  animation: brinco .6s cubic-bezier(.34, 1.56, .64, 1) both .15s;
}

/* ---- barra lateral ---- */
.nav-item, .marca { transition: background .18s, transform .18s, color .18s; }
.nav-item:hover { transform: translateX(3px); }
.marca:hover .marca-logo { transform: rotate(-8deg) scale(1.05); }
.marca-logo { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.nav-grupos .nav-item .punto { transition: transform .18s; }
.nav-grupos .nav-item:hover .punto { transform: scale(1.35); }

/* ---- botones ---- */
.boton { transition: all .16s ease; }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0) scale(.97); }
.boton-primario:hover { box-shadow: 0 4px 14px rgba(99, 102, 241, .4); }
.boton:disabled { opacity: .6; cursor: progress; transform: none; }
.boton-icono:active { transform: scale(.88); }

/* Rueda de espera en el botón mientras guarda */
.boton.guardando { position: relative; color: transparent !important; }
.boton.guardando::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
.boton.guardado { animation: destello .7s ease-out; }

/* ---- pestañas ---- */
.pestanas a { position: relative; }
.pestanas a:not(.activa)::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--primario);
  transition: left .2s ease, right .2s ease;
}
.pestanas a:not(.activa):hover::after { left: 14px; right: 14px; }
.pestanas a.activa { animation: brinco .3s cubic-bezier(.34, 1.56, .64, 1); }

/* ---- tarjetas ---- */
.tarjeta-grupo:hover .tarjeta-banda { height: 9px; }
.tarjeta-banda { transition: height .2s ease; }
.estadistica { transition: transform .18s ease, box-shadow .18s ease; }
.estadistica:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }
.tarjeta-actividad, .tarjeta-reporte { transition: transform .18s ease, box-shadow .18s ease; }
.tarjeta-actividad:hover, .tarjeta-reporte:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
}

/* ---- tablas ---- */
.tabla tbody tr { transition: background .15s ease; }
.tabla tbody td { transition: background .15s ease; }

/* ---- diálogos ---- */
.dialogo[open] { animation: entrar-dialogo .22s cubic-bezier(.34, 1.4, .64, 1); }
.dialogo::backdrop { animation: aparecer-suave .2s ease; }

/* ---- avisos ---- */
.toast { transition: opacity .3s ease, transform .3s ease; }
.toast.saliendo { opacity: 0; transform: translateX(24px); }

/* ---- contadores (estrellas, sanciones, teléfonos) ---- */
.cuenta-estrellas { display: inline-block; transition: color .2s ease; }
.cuenta-estrellas.cambiando { animation: latido .35s cubic-bezier(.34, 1.56, .64, 1); }
.cambiando { display: inline-block; animation: latido .35s cubic-bezier(.34, 1.56, .64, 1); }
.boton-estrella { transition: all .14s ease; }
.boton-estrella:active { transform: scale(.85); }

/* ---- asistencia ---- */
.boton-estado { transition: all .14s cubic-bezier(.34, 1.4, .64, 1); }
.boton-estado:active { transform: scale(.88); }
.boton-estado.activo { animation: brinco .28s cubic-bezier(.34, 1.56, .64, 1); }

/* ---- píldoras de estado ---- */
.pildora { transition: background .2s ease, color .2s ease; }
.estado-pago.cambiando { animation: brinco .3s cubic-bezier(.34, 1.56, .64, 1); }

/* ---- barras de avance ---- */
.barra-progreso-relleno {
  transform-origin: left;
  animation: deslizar-barra .8s cubic-bezier(.22, 1, .36, 1) both .2s;
}

/* ---- campos ---- */
.campo-nota, .campo-matriz, .campo-pago, .campo-materia,
.fila-clase select, .fila-clase input, .campo-nota-pago {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.campo-matriz:focus, .campo-nota:focus, .campo-pago:focus { transform: scale(1.04); }
.campo-matriz, .campo-nota, .campo-pago { transition: all .14s ease; }

/* ---- filas de rubros y bloques ---- */
.fila-rubro, .fila-bloque, .nota-item, .lista-catalogo li {
  animation: aparecer .3s ease both;
}

/* ---- accesibilidad: menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:hover, .nav-item:hover, .estadistica:hover,
  .tarjeta-actividad:hover, .tarjeta-reporte:hover { transform: none; }
}

/* ---------------- escala del examen y semestral ---------------- */
.rubro-bloqueado { opacity: .45; cursor: not-allowed !important; }
.selector-tipo label small { font-weight: 500; color: var(--texto-suave); }
#bloque-escala-examen {
  border: 1.5px solid var(--morado);
  background: var(--morado-tinte);
  border-radius: 12px;
  padding: 12px 14px 8px;
  margin-bottom: 14px;
  animation: aparecer .25s ease;
}
.campo-semestral {
  font: inherit;
  font-weight: 600;
  width: 74px;
  padding: 6px 8px;
  text-align: center;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
  color: var(--texto);
  transition: all .14s ease;
}
.campo-semestral:focus {
  outline: none;
  border-color: var(--morado);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
  transform: scale(1.04);
}
.aporte-semestral { display: block; font-size: 10.5px; color: var(--texto-suave); margin-top: 3px; }

/* ---------------- buscador de alumnos ---------------- */
.caja-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  padding: 4px 10px 4px 12px;
  box-shadow: var(--sombra);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 460px;
}
.caja-buscador:focus-within {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .13);
}
.icono-buscador { font-size: 14px; opacity: .6; }
#buscador-alumnos {
  font: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--texto);
  padding: 7px 0;
}
#buscador-alumnos::-webkit-search-cancel-button { display: none; }
.cuenta-busqueda {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}
.estado-vacio-busqueda {
  padding: 22px 4px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 14px;
  animation: aparecer .25s ease;
}

/* ---------------- ajustes propios del modo oscuro ---------------- */
[data-tema="oscuro"] body { background: var(--fondo); }
[data-tema="oscuro"] .tabla th { background: var(--superficie-2); }
[data-tema="oscuro"] .tabla tbody tr:hover { background: var(--superficie-3); }
[data-tema="oscuro"] .barra-interna { background: var(--superficie-2); }
[data-tema="oscuro"] .celda-clase input,
[data-tema="oscuro"] .celda-clase select,
[data-tema="oscuro"] .campo-materia,
[data-tema="oscuro"] .fila-clase select,
[data-tema="oscuro"] .fila-clase input { background: var(--superficie-2); }
[data-tema="oscuro"] .campo-ponderacion,
[data-tema="oscuro"] .recuadro-datos { background: var(--superficie-2); }
[data-tema="oscuro"] .estado-vacio { background: var(--superficie); }
[data-tema="oscuro"] .celda-hora,
[data-tema="oscuro"] .tabla-matriz thead .fila-acts-matriz th { background: var(--superficie-2); }
[data-tema="oscuro"] .fila-receso td { background: var(--superficie-3); }
[data-tema="oscuro"] .dialogo { background: var(--superficie); color: var(--texto); }
[data-tema="oscuro"] .dialogo::backdrop { background: rgba(0, 0, 0, .62); }
[data-tema="oscuro"] .toast { background: var(--superficie); }
[data-tema="oscuro"] .opcion-estrella.elegida { background: var(--ambar-tinte); }
[data-tema="oscuro"] .interruptor-examen:has(input:checked) { background: var(--morado-tinte); }
[data-tema="oscuro"] .barra-guardar { background: linear-gradient(transparent, var(--fondo) 30%); }
/* Solo los botones neutros cambian de fondo; los de color conservan el suyo */
[data-tema="oscuro"] .boton:not(.boton-primario):not(.boton-suave):not(.boton-peligro) {
  background: var(--superficie-2);
}
[data-tema="oscuro"] .boton:not(.boton-primario):not(.boton-suave):not(.boton-peligro):hover {
  background: var(--superficie-3);
  border-color: var(--borde-fuerte);
}
[data-tema="oscuro"] .boton-primario,
[data-tema="oscuro"] .boton-primario:hover {
  background: linear-gradient(135deg, var(--primario), var(--primario-oscuro));
  color: #fff;
}
[data-tema="oscuro"] .boton-suave { background: var(--primario-tinte); color: var(--primario-oscuro); }
[data-tema="oscuro"] .boton-peligro { background: var(--rojo-tinte); color: var(--rojo); }
[data-tema="oscuro"] .marca-logo { background: rgba(255, 255, 255, .08); }
[data-tema="oscuro"] .lista-catalogo li { background: var(--superficie-2); }
[data-tema="oscuro"] .nota-item { background: var(--superficie-2); }
[data-tema="oscuro"] #bloque-escala-examen {
  background: var(--morado-tinte);
  border-color: var(--morado);
}
[data-tema="oscuro"] .bloque-sancion { background: var(--superficie-2); }

/* ---------------- interruptor de tema ---------------- */
.interruptor-tema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: var(--lateral-texto);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.interruptor-tema:hover { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.interruptor-tema:active { transform: scale(.97); }
.icono-tema { font-size: 15px; display: inline-block; transition: transform .3s ease; }
.interruptor-tema:hover .icono-tema { transform: rotate(25deg); }

/* ---------------- pie de página ---------------- */
.area-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.area-principal > .contenido { flex: 1; }

.pie {
  background: linear-gradient(180deg, var(--lateral-de) 0%, var(--lateral-a) 100%);
  color: var(--lateral-texto);
  padding: 38px 42px 20px;
  margin-top: auto;
}
.pie-cols {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 32px;
}
.pie-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pie-logo img {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  padding: 3px;
}
.pie-logo b { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.pie-logo b em { font-style: normal; color: var(--marca-rojo); }
.pie-marca p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lateral-tenue);
  max-width: 38ch;
}
.pie-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--lateral-tenue);
  margin-bottom: 12px;
}
.pie-col a {
  display: block;
  color: var(--lateral-texto);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 4px 0;
  transition: color .18s ease, padding-left .18s ease;
}
.pie-col a:hover { color: #fff; padding-left: 5px; }
.pie-atajo {
  display: block;
  font-size: 12.5px;
  color: var(--lateral-tenue);
  padding: 4px 0;
}
.pie-atajo kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--lateral-texto);
}
.pie-abajo {
  max-width: 1120px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lateral-tenue);
}
.pie-abajo .con-corazon { display: inline-flex; align-items: center; gap: 7px; }
.pie-abajo .con-corazon svg { color: var(--marca-rojo); }

@media (max-width: 900px) {
  .pie { padding: 30px 18px 16px; }
  .pie-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pie-marca { grid-column: 1 / -1; }
}

/* ---------------- formato oficial CECyTE ---------------- */
.campo-archivo {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 12px !important;
  cursor: pointer;
}
.campo-archivo::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
}
.lista-pasos { margin: 0 0 0 20px; color: var(--texto-suave); line-height: 1.9; font-size: 14px; }
.lista-pasos strong { color: var(--texto); }
.datos-plantilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.datos-plantilla > div {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
}
.datos-plantilla span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 3px;
}
.datos-plantilla strong { font-size: 13.5px; line-height: 1.4; }
.encabezado-mapeo, .fila-mapeo {
  display: grid;
  grid-template-columns: 1fr 90px 1.1fr;
  gap: 14px;
  align-items: center;
}
.encabezado-mapeo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--texto-suave);
  font-weight: 700;
  padding-bottom: 8px;
}
.fila-mapeo { padding: 10px 0; border-top: 1px solid var(--borde); }
.fila-mapeo strong { display: block; font-size: 14px; line-height: 1.35; }
.fila-mapeo .texto-suave { font-size: 11.5px; }
.fila-mapeo select {
  font: inherit;
  font-size: 13.5px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}
.fila-mapeo select:focus { outline: none; border-color: var(--primario); }
.fila-mapeo-examen {
  background: var(--morado-tinte);
  border-radius: 10px;
  padding: 12px;
  margin-top: 6px;
}
@media (max-width: 700px) {
  .encabezado-mapeo { display: none; }
  .fila-mapeo { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------- avisos de cambio de hora ---------------- */
.estado-avisos {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.punto-estado {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--texto-tenue);
}
.punto-estado.verde { background: var(--verde); box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.punto-estado.rojo { background: var(--rojo); box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); }
.punto-estado.gris { background: var(--texto-tenue); }
.acciones-avisos { margin-bottom: 16px; }
.forma-avisos .opcion-estrella { cursor: default; }
.forma-avisos input[type="checkbox"] {
  width: auto !important;
  margin-top: 3px !important;
  accent-color: var(--primario);
}

/* ---------------- pantallas de acceso ---------------- */
.pantalla-acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 18px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(251, 74, 74, .16), transparent 65%),
    linear-gradient(180deg, var(--lateral-de) 0%, var(--lateral-a) 100%);
  min-height: 100vh;
}
.caja-acceso {
  width: min(430px, 100%);
  background: var(--superficie);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  padding: 32px 30px 28px;
  animation: aparecer .4s ease both;
}
.acceso-marca {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--borde);
}
.acceso-marca img { flex: none; }
.acceso-marca strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--texto);
}
.acceso-marca strong em { font-style: normal; color: var(--marca-rojo); }
.acceso-marca small { color: var(--texto-suave); font-size: 12px; }
.caja-acceso h1 { font-size: 21px; margin-bottom: 6px; }
.acceso-texto { color: var(--texto-suave); font-size: 14px; line-height: 1.6; }
.forma-acceso { margin-top: 20px; }
.forma-acceso label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 15px;
  color: var(--texto);
}
.forma-acceso input {
  font: inherit;
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.forma-acceso input:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(251, 74, 74, .15);
}
.boton-ancho { width: 100%; margin-top: 6px; justify-content: center; }
.acceso-nota {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.6;
}
.acceso-pie { color: var(--lateral-tenue); font-size: 12px; font-weight: 600; }

/* ---------------- usuario en la barra lateral ---------------- */
.caja-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.usuario-enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--lateral-texto);
  padding: 7px 8px;
  border-radius: 10px;
  transition: background .15s;
}
.usuario-enlace:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.usuario-inicial {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--marca-rojo);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.usuario-nombre {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usuario-salir {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--lateral-tenue);
  text-decoration: none;
  border-radius: 9px;
  transition: color .15s, background .15s;
}
.usuario-salir svg { width: 18px; height: 18px; }
.usuario-salir:hover { color: var(--marca-rojo); background: rgba(255, 255, 255, .09); }

/* ---------------- mi cuenta ---------------- */
.bloque-plegable {
  margin-top: 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
}
.bloque-plegable summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--primario);
}
.forma-nueva-cuenta { margin-top: 14px; }
.forma-nueva-cuenta label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; }
.forma-nueva-cuenta input {
  font: inherit;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
}
.campo-token {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.campo-token code {
  flex: 1;
  min-width: 220px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  word-break: break-all;
  color: var(--texto);
}

/* ---------------- panel de docentes (renta) ---------------- */
.tabla-docentes { min-width: 780px; }
.tabla-docentes th { padding-top: 14px; padding-bottom: 14px; }
.tabla-docentes td { vertical-align: middle; padding-top: 15px; padding-bottom: 15px; }
/* El nombre del docente no se parte en tres renglones */
.tabla-docentes th:first-child, .tabla-docentes td:first-child { min-width: 250px; }
.tabla-docentes td:nth-child(4), .tabla-docentes td:nth-child(5) { white-space: nowrap; }
.renglon-docente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}
.nota-docente { margin-top: 5px; font-size: 13px; }


.fila-apagada { opacity: .55; }
.fila-apagada .texto-fuerte { text-decoration: line-through; }

.lista-ayuda {
  margin: 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: 13.5px;
  line-height: 1.75;
}
.lista-ayuda li + li { margin-top: 6px; }
.lista-ayuda strong { color: var(--texto); }

.linea-casilla {
  display: flex !important;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 14px;
  cursor: pointer;
}
.linea-casilla input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--primario);
  cursor: pointer;
}

.tarjeta-acceso { border-left: 4px solid var(--marca-rojo); }

/* ---------------- acceso vencido ---------------- */
.aviso-vencido { text-align: center; }
.aviso-vencido-icono {
  display: block;
  font-size: 46px;
  margin-bottom: 10px;
  animation: latido 2.4s ease-in-out infinite;
}
.aviso-vencido h1 { margin-bottom: 12px; }
.aviso-vencido p { color: var(--texto-suave); font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
.aviso-vencido strong { color: var(--texto); }
.contacto-renovacion {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
}
.aviso-vencido .boton { width: 100%; justify-content: center; }

/* ---------------- mi cuenta: ficha y campos ---------------- */
.boton-salir {
  border-color: var(--rojo-tinte);
  background: var(--rojo-tinte);
  color: var(--rojo);
  font-weight: 700;
}
.boton-salir:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.ficha-cuenta {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  border-left: 5px solid var(--marca-rojo);
}
.ficha-inicial {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--marca-rojo), var(--primario-oscuro));
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(251, 74, 74, .35);
}
.ficha-datos { min-width: 0; }
.ficha-datos h3 { font-size: 18px; margin-bottom: 8px; }
.ficha-pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.ficha-datos .ayuda { margin: 0; max-width: 70ch; }

/* Campos de formulario dentro de las tarjetas */
.forma-campos label,
.seccion form label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 14px;
}
.forma-campos input,
.seccion form label input {
  font: inherit;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.forma-campos input::placeholder,
.seccion form label input::placeholder { color: var(--texto-tenue); }
.forma-campos input:hover,
.seccion form label input:hover { border-color: var(--borde-fuerte); }
.forma-campos input:focus,
.seccion form label input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tinte);
}
.forma-campos .fila-doble { gap: 14px; }

/* Los desgloses de horas (materia / grupo / aula): caben dos o tres,
   y en el celular se acomodan uno debajo de otro. */
.rejilla-desglose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .rejilla-desglose { grid-template-columns: 1fr; gap: 14px; }
}

/* Indicaciones de una actividad: el titulo y el boton de editar en la misma linea */
.encabezado-descripcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.encabezado-descripcion h3 { margin: 0; }
.forma-campos textarea {
  font: inherit;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  resize: vertical;
  min-height: 84px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.forma-campos textarea:hover { border-color: var(--borde-fuerte); }
.forma-campos textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tinte);
}

/* ---------------- listas desplegables ----------------
   Los <select> nativos no se parecen en nada a los demás campos (en Windows
   salen cuadrados y pegados a su etiqueta), así que se visten igual que los
   <input> y se les pone su propia flechita. */
:root {
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-tema="oscuro"] {
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a2a7c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.forma-ajustes select,
.forma-campos select,
.seccion form label > select,
.dialogo label > select {
  font: inherit;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 34px 10px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--borde);
  background-color: var(--superficie-2);
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: var(--texto);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.forma-ajustes select:hover,
.forma-campos select:hover,
.seccion form label > select:hover,
.dialogo label > select:hover { border-color: var(--borde-fuerte); }
.forma-ajustes select:focus,
.forma-campos select:focus,
.seccion form label > select:focus,
.dialogo label > select:focus {
  outline: none;
  background-color: var(--superficie);
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tinte);
}

/* ---------------- horas de clase del plantel ---------------- */
.lista-franjas {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fila-bloque {
  display: grid;
  grid-template-columns: 36px 1fr auto 32px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  transition: border-color .15s, background .15s;
}
.fila-bloque:hover { border-color: var(--borde-fuerte); }
.fila-bloque.es-receso {
  background: var(--ambar-tinte);
  border-color: transparent;
}

/* El número de la hora, o la taza si es receso */
.franja-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primario-tinte);
  color: var(--primario-oscuro);
  font-weight: 800;
  font-size: 13px;
}
.es-receso .franja-num {
  background: rgba(255, 255, 255, .65);
  color: var(--ambar-oscuro);
  font-size: 16px;
}

.franja-horas {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.franja-horas input[type="time"] {
  font: inherit;
  font-size: 14px;
  margin-top: 0 !important;
  padding: 7px 10px;
  /* que quepa la hora completa con su reloj, sin encogerse */
  flex: 0 0 auto;
  width: 132px;
  min-width: 124px;
  border: 1.5px solid var(--borde);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
}
.franja-horas input[type="time"]:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tinte);
}
.franja-flecha { color: var(--texto-tenue); font-size: 13px; }
.franja-dura {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
  margin-left: 2px;
}
.franja-dura.franja-mal { color: var(--rojo); }

/* La marca de receso: una pastilla que se enciende */
.chip-receso {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 6px 10px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-receso:hover { border-color: var(--ambar); color: var(--ambar-oscuro); }
.chip-receso input { accent-color: var(--ambar); cursor: pointer; margin: 0; }
.es-receso .chip-receso {
  background: var(--ambar);
  border-color: var(--ambar);
  color: #fff;
}
.es-receso .chip-receso input { accent-color: #fff; }

.franja-quitar { color: var(--texto-tenue); }
.franja-quitar:hover { color: var(--rojo); background: var(--rojo-tinte); }

.pie-franjas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.resumen-franjas {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
}

@media (max-width: 560px) {
  .fila-bloque { grid-template-columns: 34px 1fr 32px; row-gap: 8px; padding: 10px; }
  .chip-receso { grid-column: 2; justify-self: start; }
  .franja-quitar { grid-row: 1; grid-column: 3; align-self: start; }
  /* En vertical las horas van una debajo de otra: sobra la flecha */
  .franja-flecha { display: none; }
  .franja-horas { flex-wrap: wrap; row-gap: 6px; }
  .franja-horas input[type="time"] { flex: 1 1 100%; width: auto; }
  .franja-dura { width: 100%; margin-left: 0; }
}

/* ---------------- confirmaciones (SweetAlert2) ----------------
   La librería trae su propio estilo; aquí se le ponen los colores, la
   tipografía y las esquinas de Devibs Class, y se respeta el modo oscuro
   porque todo sale de las mismas variables. */
.swal2-container { z-index: 9999; }
.swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .48); }
[data-tema="oscuro"] .swal2-container.swal2-backdrop-show { background: rgba(6, 4, 20, .62); }

.swal2-popup.swal-devibs {
  width: min(30rem, 92vw);
  padding: 26px 26px 22px;
  border-radius: 20px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
[data-tema="oscuro"] .swal2-popup.swal-devibs { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }

.swal-devibs .swal2-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--texto);
  padding: 0;
  margin-bottom: 6px;
}
.swal-devibs .swal2-html-container {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
  padding: 0;
}
.swal-devibs .swal2-actions {
  gap: 10px;
  margin-top: 22px;
  width: 100%;
  justify-content: flex-end;
}
.swal-devibs .swal2-actions .boton { margin: 0; }

/* Los iconos, con la paleta de la plataforma */
.swal-devibs .swal2-icon { width: 62px; height: 62px; margin: 2px auto 16px; border-width: 3px; }
.swal-devibs .swal2-icon .swal2-icon-content { font-size: 34px; }
.swal-devibs .swal2-icon.swal2-warning  { border-color: var(--ambar); color: var(--ambar); }
.swal-devibs .swal2-icon.swal2-question { border-color: var(--primario); color: var(--primario); }
.swal-devibs .swal2-icon.swal2-error    { border-color: var(--rojo); color: var(--rojo); }
.swal-devibs .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--rojo); }
.swal-devibs .swal2-icon.swal2-success  { border-color: var(--verde); color: var(--verde); }
.swal-devibs .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--verde); }
.swal-devibs .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--verde); }
.swal-devibs .swal2-icon.swal2-info     { border-color: var(--primario); color: var(--primario); }

/* Entrada y salida: un brinquito corto, nada aparatoso */
@keyframes swal-devibs-entra {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes swal-devibs-sale {
  to { opacity: 0; transform: translateY(6px) scale(.97); }
}
.swal-entra { animation: swal-devibs-entra .3s cubic-bezier(.2, .9, .3, 1.25); }
.swal-sale  { animation: swal-devibs-sale .16s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .swal-entra, .swal-sale { animation: none; }
}

/* ============ lo que ve el alumno con su liga ============ */
.pantalla-publica {
  /* el <body> de la app es flex por la barra lateral; aquí no hay barra */
  display: block;
  background: var(--fondo);
  min-height: 100vh;
  padding: 24px 14px 40px;
}
.caja-publica { max-width: 44rem; margin: 0 auto; }
.tarjeta-publica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .07);
}
.tarjeta-publica h1 { font-size: 24px; margin: 4px 0 2px; }
.etiqueta-grupo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
.etiqueta-grupo::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-grupo, var(--primario));
}
.titulo-pendientes { font-size: 17px; margin: 22px 0 12px; font-weight: 600; }
.titulo-pendientes strong { color: var(--rojo); }

.lista-pendientes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-pendientes li {
  border: 1.5px solid var(--borde);
  border-left: 4px solid var(--primario);
  border-radius: 14px;
  padding: 13px 15px;
  background: var(--superficie-2);
}
.lista-pendientes li.pendiente-ceros { border-left-color: var(--rojo); }
.lista-pendientes h3 { font-size: 15.5px; margin: 7px 0 0; }
.pendiente-arriba {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.pendiente-fecha { font-size: 12.5px; color: var(--texto-suave); font-weight: 600; }
.pendiente-descripcion {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.pendiente-aviso {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rojo);
}
.al-corriente { text-align: center; padding: 30px 10px 16px; }
.al-corriente span { font-size: 44px; display: block; }
.al-corriente h2 { font-size: 19px; margin: 10px 0 4px; }
.al-corriente p { color: var(--texto-suave); margin: 0; }
.nota-publica {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--texto-tenue);
  text-align: center;
}
.pie-publico {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* ============ hoja de ligas para imprimir ============ */
.hoja-ligas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.gafete {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: 14px;
  padding: 12px;
  background: var(--superficie);
  break-inside: avoid;
}
.gafete-qr {
  width: 92px; height: 92px; flex: none;
  background: #fff;            /* siempre blanco, aunque el tema sea oscuro */
  border-radius: 6px;
  overflow: hidden;
}
.gafete-qr svg { width: 100%; height: 100%; display: block; }
.gafete-datos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gafete-datos strong { font-size: 14px; line-height: 1.3; }
.gafete-liga {
  font-size: 10.5px;
  color: var(--texto-suave);
  word-break: break-all;
  line-height: 1.35;
}
.gafete .boton { margin-top: 5px; align-self: flex-start; font-size: 12px; padding: 5px 10px; }

@media print {
  .sin-imprimir, .barra-lateral, .barra-movil, .pie, .toast { display: none !important; }
  body, .contenido { background: #fff; padding: 0; margin: 0; }
  .hoja-ligas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gafete { border-color: #999; background: #fff; }
  .gafete-liga { color: #444; }
}

/* ============ círculo de estudio: ficha por alumno ============ */
.lista-circulo { display: grid; gap: 14px; }
.lista-circulo + .ayuda { margin-top: 16px; }
.pildora-rescate { white-space: nowrap; }
.ficha-circulo { padding: 16px 18px; }
.circulo-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.circulo-encabezado > div:first-child {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0;
}
.circulo-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 12.5px; font-weight: 700;
  flex: none;
}
.circulo-cifras { display: flex; gap: 7px; flex-wrap: wrap; }
.pendientes-alumno {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--borde);
  display: grid;
  gap: 8px;
}
.pendientes-alumno li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px;
}
.pendiente-nombre { font-weight: 600; }

/* ============ cooperaciones: quien pagó de más ============ */
.texto-azul { color: var(--azul); }
.aviso-devolver {
  border: 1.5px solid var(--azul);
  background: var(--azul-tinte);
  color: var(--texto);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
}
.aviso-devolver strong { color: var(--azul); }
.acciones-devolucion { margin-top: 6px; }
.acciones-devolucion:empty { display: none; }
.boton-chico { font-size: 12px; padding: 4px 10px; }
.nota-devuelto { font-size: 12px; }
.enlace-boton {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--primario);
  text-decoration: underline; cursor: pointer;
}

/* ============ copiar la evaluación de otro grupo ============ */
.vista-evaluacion {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-2);
  padding: 10px 14px;
  margin: 4px 0 14px;
}
.vista-rubro {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: 14px;
}
.vista-rubro:last-of-type { border-bottom: 0; }
.vista-pie { margin: 8px 0 0; font-size: 12.5px; }
.casilla-linea {
  display: flex !important; align-items: center; gap: 8px;
  font-weight: 600;
}
.casilla-linea input { width: auto; margin: 0; }
@keyframes fila-importada {
  from { background: var(--primario-tinte); }
  to   { background: transparent; }
}
.fila-importada { animation: fila-importada 1.4s ease; border-radius: 10px; }

/* ============ círculo de estudio: imagen y página pública ============ */
.dialogo-imagen { width: min(620px, 94vw); }
.marco-imagen {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 10px;
  max-height: 56vh;
  overflow: auto;
  margin-bottom: 10px;
}
.marco-imagen canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.liga-circulo { word-break: break-all; font-size: 12px; }

.aviso-circulo {
  background: var(--ambar-tinte);
  color: var(--texto);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  margin: 16px 0 14px;
}
.lista-circulo-publica { display: grid; gap: 10px; }
.alumno-circulo {
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-2);
  padding: 4px 14px;
}
.alumno-circulo summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
}
.alumno-circulo summary::-webkit-details-marker { display: none; }
.alumno-circulo summary strong { flex: 1; min-width: 10rem; }
.alumno-circulo[open] summary { border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.alumno-circulo .lista-pendientes { margin-bottom: 12px; }
.alumno-circulo .lista-pendientes li { background: var(--superficie); }
.sin-pendientes { margin: 0 0 12px; font-size: 13.5px; }

/* ============ círculo de estudio: la página del QR (cp = círculo público) ============ */
.cp { max-width: 40rem; margin: 0 auto; }

.cp-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 26px;
  padding: 26px 22px 22px;
  background: linear-gradient(145deg, #100b36 0%, var(--cp-color) 100%);   /* respaldo */
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--cp-color) 85%, #fff 15%) 0%, transparent 55%),
    linear-gradient(145deg, #100b36 0%, color-mix(in srgb, var(--cp-color) 70%, #100b36 30%) 100%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--cp-color) 28%, transparent);
}
.cp-hero::after {
  /* aros decorativos, como el «círculo» */
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  right: -80px; top: -90px;
  border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}
.cp-etiqueta {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
}
.cp-hero h1 {
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 16px 0 8px;
  color: #fff;
}
.cp-lead { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.cp-grupo {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
}
.cp-punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cp-color);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
  flex: none;
}
.cp-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.cp-cifras div {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 11px 12px;
}
.cp-cifras strong { display: block; font-size: 28px; font-weight: 800; line-height: 1.05; }
.cp-cifras span { display: block; font-size: 12px; margin-top: 3px; color: rgba(255, 255, 255, .8); line-height: 1.3; }

/* el examen: la oportunidad de subir */
.cp-examen {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border: 1.5px solid color-mix(in srgb, #8b5cf6 35%, var(--borde));
}
.cp-examen-icono {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 24px;
  background: rgba(139, 92, 246, .16);
}
.cp-examen strong { display: block; font-size: 16px; }
.cp-examen span { display: block; font-size: 13.5px; font-weight: 600; color: #8b5cf6; margin-top: 2px; }
.cp-examen p { margin: 6px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
.cp-examen-cerca { border-color: var(--ambar); }
.cp-examen-cerca .cp-examen-icono { background: var(--ambar-tinte); animation: cp-latido 2.2s ease-in-out infinite; }
.cp-examen-cerca span { color: var(--ambar); }
@keyframes cp-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* los tres pasos */
.cp-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0;
  margin: 14px 0 0;
}
.cp-pasos li {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 12px 8px;
}
.cp-pasos span {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  color: #fff;
  background: var(--cp-color);
}

/* buscador */
.cp-buscar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.cp-buscar:focus-within { border-color: var(--cp-color); }
.cp-buscar input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 16px;          /* 16px: el iPhone no hace zoom al escribir */
  padding: 14px 0;
  outline: none;
  min-width: 0;
}

/* cada alumno */
.cp-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cp-alumno details {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.cp-alumno details[open] {
  border-color: var(--borde-fuerte);
  border-color: color-mix(in srgb, var(--cp-color) 40%, var(--borde));
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.cp-alumno summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.cp-alumno summary::-webkit-details-marker { display: none; }
.cp-avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  color: hsl(var(--tono) 60% 32%);
  background: hsl(var(--tono) 80% 90%);
}
[data-tema="oscuro"] .cp-avatar { color: hsl(var(--tono) 85% 82%); background: hsl(var(--tono) 45% 24%); }
.cp-nombre { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.cp-nombre small { display: block; font-weight: 500; font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.cp-contador {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--rojo);
  flex: none;
}
.cp-contador-ok { background: var(--verde); }
.cp-flecha {
  width: 10px; height: 10px; flex: none;
  border-right: 2.5px solid var(--texto-tenue);
  border-bottom: 2.5px solid var(--texto-tenue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}
.cp-alumno details[open] .cp-flecha { transform: rotate(225deg) translateY(-2px); }

.cp-detalle { padding: 0 16px 16px; animation: cp-abrir .25s ease; }
@keyframes cp-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cp-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
  margin-bottom: 14px;
}
.cp-barra span {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--cp-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cp-color) 55%, #fff), var(--cp-color));
}
.cp-detalle h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin: 0 0 8px;
}
.cp-tareas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cp-tarea {
  display: flex; gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--superficie-2);
}
.cp-casilla {
  width: 20px; height: 20px; flex: none;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--borde-fuerte);
  background: var(--superficie);
}
.cp-tarea-cero .cp-casilla { border-color: var(--rojo); }
.cp-tarea > div { min-width: 0; flex: 1; }
.cp-tarea-arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cp-rubro {
  /* neutro: el rojo se reserva para lo vencido y lo que quedó en cero */
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.cp-fecha { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.cp-fecha-pasada { color: var(--rojo); }
.cp-tarea strong { display: block; font-size: 14.5px; margin-top: 5px; }
.cp-tarea p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }
.cp-tarea em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rojo);
}
.cp-al-dia {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--verde-tinte);
  color: var(--texto);
}
.cp-examen-mini {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texto-suave);
  background: rgba(139, 92, 246, .12);
}
.cp-examen-mini span { font-size: 18px; }
.cp-examen-mini strong { display: block; color: var(--texto); }
.cp-examen-mini-cero { background: var(--rojo-tinte); }

.cp-sin-resultados, .cp-fiesta {
  text-align: center;
  padding: 26px 16px;
  color: var(--texto-suave);
  font-size: 14.5px;
}
.cp-fiesta span { display: block; font-size: 52px; margin-bottom: 6px; }
.cp-pie {
  text-align: center;
  font-size: 12px;
  color: var(--texto-tenue);
  margin: 22px 0 0;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .cp-examen-cerca .cp-examen-icono, .cp-detalle { animation: none; }
}

/* La pista del atajo en los botones de guardar (no en celulares) */
[data-atajo-guardar]::after {
  content: 'Ctrl+S';
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .22);
  opacity: .9;
}
[data-mac] [data-atajo-guardar]::after { content: '⌘S'; }
@media (hover: none), (max-width: 700px) {
  [data-atajo-guardar]::after { display: none; }
}

/* Cambiar de grupo desde el encabezado */
.titulo-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cambia-grupo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cambia-grupo:hover { border-color: var(--primario); color: var(--primario); }
.cambia-grupo select {
  border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; padding: 5px 0; max-width: 11rem;
  appearance: none; -webkit-appearance: none;
}
.cambia-grupo select:focus { outline: none; }
.area-copiar {
  width: 100%; font: inherit; font-size: 13px;
  border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px;
  background: var(--superficie-2); color: var(--texto); resize: vertical;
}

/* Criterios del círculo de estudio (Ajustes) */
.criterio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.criterio.elegido { border-color: var(--primario); background: var(--primario-tinte); }
.criterio > input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.criterio strong { display: block; font-size: 14.5px; }
.criterio .opcion-detalle { margin-top: 6px; }

/* ============ equipos de un trabajo ============ */
.rejilla-reparto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 12px 0;
  max-height: 44vh;
  overflow-y: auto;
  padding: 2px;
}
.reparto-alumno {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie-2);
  font-size: 13.5px;
  font-weight: 600;
}
.reparto-alumno.sin-equipo { border-style: dashed; color: var(--texto-suave); }
.reparto-alumno > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reparto-alumno select {
  font: inherit; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: var(--texto);
  padding: 5px 8px; flex: none;
}
.tabla-equipos { min-width: 46rem; }
.desliza-tabla { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabla-equipos .celda-miembros {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px;
  min-width: 21rem;
}
.tabla-equipos .celda-miembros .pildora {
  white-space: nowrap; font-size: 11.5px; padding: 2px 8px;
}
.tabla-equipos td:first-child { white-space: nowrap; }
.campo-nota-equipo {
  font: inherit; font-weight: 700; text-align: center;
  width: 5.5rem; padding: 9px 8px;
  border: 1.5px solid var(--borde); border-radius: 11px;
  background: var(--superficie-2); color: var(--texto);
}
.campo-nota-equipo:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tinte); background: var(--superficie);
}
.titulo-individual { margin: 22px 0 4px; font-size: 15px; }

/* Cuantos trabajos llevas capturados de un rubro (Calificaciones) */
.avance-rubro {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ambar);
  white-space: nowrap;
  cursor: help;
}

/* ---------------- buscador de alumnos en todos los grupos ---------------- */
.buscador-global {
  position: relative;
  margin: 10px 0 4px;
}
.buscador-global .icono-buscador {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .75;
  pointer-events: none;
}
.buscador-global input {
  width: 100%;
  padding: 9px 10px 9px 31px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
}
.buscador-global input::placeholder { color: rgba(255, 255, 255, .5); }
.buscador-global input:focus {
  outline: none;
  border-color: var(--primario);
  background: rgba(255, 255, 255, .12);
}
.resultados-globales {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 13px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.resultado-global {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--texto);
  text-decoration: none;
  line-height: 1.3;
}
.resultado-global strong { display: block; font-size: 13.5px; }
.resultado-global:hover, .resultado-global.elegido { background: var(--superficie-2); }
.resultado-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--texto-suave);
}
.resultado-grupo .punto { width: 8px; height: 8px; }
.resultado-todos {
  margin-top: 4px;
  border-top: 1px solid var(--borde);
  padding-top: 9px;
  font-size: 12.5px;
  color: var(--primario);
  font-weight: 600;
}
.resultado-vacio {
  margin: 0;
  padding: 10px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* la pantalla de resultados */
.forma-buscar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.forma-buscar .caja-buscador { flex: 1; min-width: 220px; margin: 0; }
.nota-busqueda { margin-top: 10px; }

/* ---------------- ponerle la misma calificación a todos ---------------- */
.barra-a-todos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.barra-a-todos .entrada-corta { width: 78px; }
.ayuda-a-todos { font-size: 12.5px; }
.boton-columna {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 2px 4px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.boton-columna:hover {
  border-color: var(--primario);
  color: var(--primario);
}
.swal-ayuda { margin: 0 0 6px; font-size: 14px; color: var(--texto-suave); }
.swal-casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
}
.swal-casilla input { width: 17px; height: 17px; }

/* vaciar la lista de alumnos */
.raya-peligro {
  border: none;
  border-top: 1px solid var(--borde);
  margin: 18px 0 14px;
}
.liga-respaldo { color: var(--primario); font-weight: 600; }