/* RegisTec · interfaz inspirada en el lenguaje visual de Apple: claridad, aire y foco. */
:root {
  --fondo: #f5f5f7;
  --superficie: #ffffff;
  --texto: #1d1d1f;
  --secundario: #6e6e73;
  --terciario: #86868b;
  --linea: #d2d2d7;
  --linea-suave: #e8e8ed;
  --azul: #1d3a9e;
  --marino: #14287a;
  --acento: #f26a21;
  --acento-suave: #fff1e8;
  --azul-hover: #14287a;
  --azul-suave: #eaeefa;
  --verde: #248a3d;
  --verde-suave: #e3f5e8;
  --naranja: #c93400;
  --naranja-suave: #fff2e5;
  --rojo: #d70015;
  --rojo-suave: #fdecee;
  --morado: #8944ab;
  --radio: 18px;
  --radio-sm: 12px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta: 0 12px 40px rgba(0,0,0,.12);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lateral: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--texto);
  font-size: 15px; line-height: 1.47; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; font-weight: 600; }
h1 { font-size: 34px; line-height: 1.12; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0; }
small, .sec { color: var(--secundario); }
.ter { color: var(--terciario); }
hr { border: 0; border-top: 1px solid var(--linea-suave); margin: 20px 0; }
[x-cloak], .oculto { display: none !important; }

/* ---------- Estructura ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); padding: 20px 12px;
  background: rgba(245,245,247,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--linea-suave); display: flex; flex-direction: column; gap: 4px; z-index: 30; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 19px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca-logo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, #2a4bbd, #14287a);
}
.nav-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--terciario); padding: 14px 12px 6px; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--texto); font-weight: 500; font-size: 14px;
}
.nav-item:hover { background: rgba(0,0,0,.05); text-decoration: none; }
.nav-item.activo { background: var(--marino); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.lateral-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 8px; }
.usuario-chip-menu { margin: 12px 0 4px; padding: 10px; border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, #e5e5ea, #d1d1d6); color: #3a3a3c; flex: none;
}
.contenido { margin-left: var(--lateral); flex: 1; min-width: 0; padding: 36px 44px 64px; max-width: 1320px; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.encabezado p { margin-top: 6px; color: var(--secundario); font-size: 17px; }
.menu-movil { display: none; }

@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--sombra-alta); }
  .lateral.abierto { transform: none; }
  .contenido { margin-left: 0; padding: 72px 18px 48px; }
  .menu-movil {
    display: flex; position: fixed; top: 0; left: 0; right: 0; height: 56px; align-items: center; gap: 12px; padding: 0 16px; z-index: 25;
    background: rgba(245,245,247,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--linea-suave);
  }
  h1 { font-size: 28px; }
}

/* ---------- Tarjetas y rejillas ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; }
.tarjeta + .tarjeta { margin-top: 20px; }
.rejilla > .tarjeta + .tarjeta, .rejilla > .clase + .clase { margin-top: 0; }
.tarjeta-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rejilla { display: grid; gap: 20px; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rejilla-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1100px) { .rejilla-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .rejilla-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } }
.fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pila > * + * { margin-top: 16px; }
.mt { margin-top: 20px; } .mt-s { margin-top: 10px; } .mb { margin-bottom: 20px; }

.metrica { padding: 22px 24px; }
.metrica .valor { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
.metrica .etiqueta { color: var(--secundario); font-size: 14px; font-weight: 500; }

.clase {
  display: block; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 22px; color: var(--texto);
  transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden;
}
.clase:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); text-decoration: none; }
.clase .franja { position: absolute; inset: 0 auto 0 0; width: 5px; }
.clase .grado { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.clase .acciones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: inherit;
  font-weight: 500; font-size: 15px; padding: 9px 18px; border-radius: 980px; background: var(--azul); color: #fff;
  transition: background .15s ease, transform .1s ease, opacity .15s; white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: var(--azul-hover); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sec { background: rgba(0,0,0,.06); color: var(--texto); }
.btn-sec:hover { background: rgba(0,0,0,.1); }
.btn-borde { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.btn-borde:hover { background: var(--azul-suave); }
.btn-peligro { background: var(--rojo-suave); color: var(--rojo); }
.btn-peligro:hover { background: #fbd9dd; }
.btn-texto { background: none; color: var(--azul); padding: 6px 8px; }
.btn-texto:hover { background: var(--azul-suave); }
.btn-s { font-size: 13px; padding: 6px 13px; }
.btn-l { font-size: 17px; padding: 12px 26px; }
.btn-bloque { width: 100%; }

/* ---------- Formularios ---------- */
label { display: block; font-size: 13px; font-weight: 500; color: var(--secundario); margin-bottom: 6px; }
.campo + .campo { margin-top: 14px; }
.rejilla > .campo + .campo { margin-top: 0; }
.control, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=tel], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 10px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%2386868b' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(29,58,158,.15); }
.error { color: var(--rojo); font-size: 13px; margin-top: 6px; }
.ayuda { color: var(--terciario); font-size: 13px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); font-weight: 400; margin: 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--azul); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: 17px; margin-bottom: 14px; }

/* Interruptor estilo iOS */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #e9e9ea; border-radius: 26px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + span { background: #34c759; }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px rgba(29,58,158,.25); }

/* Control segmentado */
.segmentado { display: inline-flex; background: rgba(118,118,128,.12); border-radius: 10px; padding: 2px; gap: 2px; }
.segmentado a, .segmentado button {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; padding: 6px 16px; border-radius: 8px; color: var(--texto); cursor: pointer;
}
.segmentado a:hover { text-decoration: none; }
.segmentado .activo { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabla th { text-align: left; font-weight: 600; font-size: 12px; color: var(--secundario); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--linea-suave); background: var(--superficie); position: sticky; top: 0; z-index: 1; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #fafafc; }
.tabla .num { text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: rgba(0,0,0,.06); color: var(--secundario); white-space: nowrap; }
.insignia.azul { background: var(--azul-suave); color: var(--azul); }
.insignia.verde { background: var(--verde-suave); color: var(--verde); }
.insignia.naranja { background: var(--naranja-suave); color: var(--naranja); }
.insignia.rojo { background: var(--rojo-suave); color: var(--rojo); }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--terciario); }
.punto.verde { background: #34c759; } .punto.rojo { background: #ff3b30; }

/* ---------- Avisos ---------- */
.aviso { border-radius: var(--radio-sm); padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.aviso.info { background: var(--azul-suave); color: #0040a0; }
.aviso.ok { background: var(--verde-suave); color: #1b6b30; }
.aviso.alerta { background: var(--naranja-suave); color: #9a3412; }
.aviso.mal { background: var(--rojo-suave); color: #a1000f; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(29,29,31,.92); color: #fff;
  padding: 12px 22px; border-radius: 980px; font-size: 14px; font-weight: 500; z-index: 100; box-shadow: var(--sombra-alta);
  backdrop-filter: blur(10px); animation: entrar .35s ease, salir .35s ease 4s forwards; max-width: calc(100% - 32px); text-align: center;
}
@keyframes entrar { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes salir { to { opacity: 0; transform: translate(-50%, 12px); visibility: hidden; } }

/* ---------- Invitados ---------- */
.invitado { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background:
  radial-gradient(1200px 600px at 10% -10%, #dbeafe 0%, transparent 60%),
  radial-gradient(900px 500px at 110% 110%, #ede9fe 0%, transparent 60%), var(--fondo); }
.invitado .tarjeta { width: 100%; max-width: 440px; padding: 36px; border-radius: 24px; }
.invitado .tarjeta.ancha { max-width: 620px; }
.invitado h1 { font-size: 28px; text-align: center; }
.invitado .subtitulo { text-align: center; color: var(--secundario); margin: 8px 0 26px; }
.icono-grande { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 30px; color: #fff; background: linear-gradient(135deg, #2a4bbd, #14287a); }

/* ---------- Portada ---------- */
.portada { text-align: center; padding: 96px 20px 48px; }
.portada h1 { font-size: 64px; line-height: 1.05; letter-spacing: -.04em; max-width: 880px; margin: 0 auto; }
.portada .degradado { background: linear-gradient(90deg, #14287a, #2a4bbd 45%, #f26a21); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada p { font-size: 22px; color: var(--secundario); max-width: 680px; margin: 22px auto 34px; }
.barra-superior { position: sticky; top: 0; z-index: 20; background: rgba(245,245,247,.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linea-suave); }
.barra-superior .interior { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }
.caracteristicas { max-width: 1100px; margin: 0 auto; padding: 0 20px 96px; }
.caracteristica .icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; }
@media (max-width: 700px) { .portada h1 { font-size: 40px; } .portada p { font-size: 18px; } }

/* =========================================================
   MODO ENFOQUE: registrar asistencia y calificaciones sin distracciones
   ========================================================= */
.enfoque { background: var(--superficie); min-height: 100vh; }
.enfoque-barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea-suave); flex-wrap: wrap;
}
.enfoque-barra .titulo { font-weight: 600; font-size: 17px; }
.enfoque-barra .titulo small { display: block; font-weight: 400; font-size: 13px; }
.enfoque-barra .espacio { flex: 1; }
.estado-guardado { font-size: 13px; color: var(--terciario); display: inline-flex; align-items: center; gap: 6px; min-width: 120px; justify-content: flex-end; }
.estado-guardado.guardando { color: var(--azul); }
.estado-guardado.error { color: var(--rojo); }
.enfoque-cuerpo { max-width: 1400px; margin: 0 auto; padding: 24px; }
.btn-volver { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-size: 15px; }

/* Asistencia */
.lista-asistencia { max-width: 820px; margin: 0 auto; }
.alumno { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--linea-suave); }
.alumno .n { width: 28px; text-align: right; color: var(--terciario); font-variant-numeric: tabular-nums; font-size: 14px; }
.alumno .nombre { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; }
.alumno .nombre small { display: block; font-weight: 400; font-size: 12px; }
.marcas { display: flex; gap: 6px; }
.marca-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 0; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  background: #f2f2f7; color: var(--secundario); transition: transform .08s, background .15s, color .15s;
}
.marca-btn:active { transform: scale(.92); }
.marca-btn.sel[data-v=P] { background: #34c759; color: #fff; }
.marca-btn.sel[data-v=A] { background: #ff3b30; color: #fff; }
.marca-btn.sel[data-v=T] { background: #ff9f0a; color: #fff; }
.marca-btn.sel[data-v=E] { background: #0a84ff; color: #fff; }
.marca-btn.sel[data-v=R] { background: #8e8e93; color: #fff; }
@media (max-width: 600px) { .marca-btn { width: 36px; height: 36px; font-size: 13px; } .alumno { flex-wrap: wrap; } .marcas { width: 100%; justify-content: flex-end; } }

/* Cuadrícula de calificaciones */
.cuadricula-envoltura { overflow: auto; border: 1px solid var(--linea-suave); border-radius: var(--radio); max-height: calc(100vh - 170px); }
table.cuadricula { border-collapse: separate; border-spacing: 0; font-size: 14px; width: 100%; }
.cuadricula th, .cuadricula td { border-bottom: 1px solid var(--linea-suave); border-right: 1px solid var(--linea-suave); padding: 0; text-align: center; }
.cuadricula thead th { background: #fbfbfd; position: sticky; top: 0; z-index: 2; font-size: 12px; font-weight: 600; color: var(--secundario); padding: 8px 6px; }
.cuadricula thead tr:nth-child(2) th { top: 35px; }
.cuadricula .col-nombre { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 0 14px; min-width: 240px; font-weight: 500; white-space: nowrap; }
.cuadricula thead .col-nombre { z-index: 3; background: #fbfbfd; }
.cuadricula .col-n { position: sticky; left: 0; }
.cuadricula input.nota {
  width: 58px; height: 40px; border: 0; border-radius: 0; text-align: center; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  background: transparent; padding: 0; box-shadow: none;
}
.cuadricula input.nota:focus { background: var(--azul-suave); box-shadow: inset 0 0 0 2px var(--azul); }
.cuadricula input.nota.baja { color: var(--rojo); font-weight: 600; }
.cuadricula input.nota.rp { background: #fbfbfd; color: var(--morado); }
.cuadricula input.nota.invalida { background: var(--rojo-suave); }
.cuadricula .calc { padding: 0 10px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; color: var(--secundario); }
.cuadricula .calc.cf { color: var(--texto); font-size: 16px; }
.cuadricula .calc.baja { color: var(--rojo); }
.cuadricula tbody tr:hover td, .cuadricula tbody tr:hover .col-nombre { background: #fafafc; }
.cuadricula tbody tr.activa td, .cuadricula tbody tr.activa .col-nombre { background: #f3f5fc; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--secundario); margin-top: 14px; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f2f2f7; border: 1px solid var(--linea-suave); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.competencia-info { font-size: 13px; color: var(--secundario); max-width: 900px; }

/* Código de licencia */
.codigo-licencia { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.token-caja { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #1d1d1f; color: #f5f5f7; padding: 14px 16px; border-radius: 12px; word-break: break-all; }

.vacio { text-align: center; padding: 48px 20px; color: var(--secundario); }
.vacio .icono { font-size: 44px; margin-bottom: 10px; }
.paginacion nav { margin-top: 16px; }
.paginacion ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 16px 0 0; }
.paginacion li a, .paginacion li span { display: inline-block; padding: 6px 14px; border-radius: 980px; background: rgba(0,0,0,.06); color: var(--texto); font-size: 14px; }
.paginacion li.disabled span { opacity: .4; }
details summary { cursor: pointer; font-weight: 500; }
.paginacion li.actual span { background: transparent; color: var(--texto-2, #6e6e73); }

/* Dueño viendo un centro */
.supervision { margin: 10px 4px 6px; padding: 12px; border-radius: 14px; background: rgba(29,58,158,.08); display: grid; gap: 4px; }
.supervision small { color: var(--secundario); font-size: 12px; }
.supervision strong { font-size: 14px; line-height: 1.3; }
.supervision .fila-acciones { display: flex; gap: 6px; margin-top: 6px; }
.supervision form { margin: 0; }

/* ---------- Panel del dueño ---------- */
.buscador { position: relative; margin: 0 4px 12px; }
.buscador svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--terciario); }
.buscador input { width: 100%; padding: 8px 10px 8px 32px; border-radius: 10px; border: 0; background: rgba(0,0,0,.06); font: inherit; font-size: 14px; }
.buscador input:focus { outline: 2px solid var(--azul); background: var(--superficie); }
.aviso.ok, .aviso.info, .aviso.alerta { align-items: flex-start; }
.anuncio .btn-texto { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; font-size: 14px; padding: 0 4px; }
.aviso.rojo { background: var(--rojo-suave); color: #8a0010; }
.aviso.naranja { background: var(--naranja-suave); color: #9a3412; }

.metrica .detalle { color: var(--secundario); font-size: 13px; margin-top: 6px; }
.metrica .detalle b { color: var(--texto); font-weight: 600; }
.metrica a.detalle { display: block; }

/* Gráfico de barras (una serie, sin dependencias) */
.grafico { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; align-items: end; height: 150px; padding-top: 18px; border-bottom: 1px solid var(--linea-suave); }
.grafico .barra-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.grafico .barra { width: 100%; max-width: 26px; background: var(--azul); border-radius: 4px 4px 0 0; min-height: 0; }
.grafico .barra.cero { background: transparent; }
.grafico .barra-col:hover .barra { background: #0058b0; }
.grafico .valor-barra { font-size: 11px; color: var(--secundario); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.grafico .tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--texto); color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; }
.grafico .barra-col:hover .tip, .grafico .barra-col:focus .tip { opacity: 1; }
.grafico-ejes { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; font-size: 11px; color: var(--terciario); text-align: center; margin-top: 6px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lista-atencion { list-style: none; margin: 0; padding: 0; }
.lista-atencion li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-suave); font-size: 14px; }
.lista-atencion li:first-child { border-top: 0; }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pestanas a { padding: 6px 14px; border-radius: 980px; background: rgba(0,0,0,.05); color: var(--texto); font-size: 14px; text-decoration: none; }
.pestanas a.activa { background: var(--texto); color: #fff; }
.pestanas a .insignia { margin-left: 4px; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 14px; margin: 0; }
.dl dt { color: var(--secundario); }
.dl dd { margin: 0; word-break: break-word; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
.codigos-recuperacion div { background: var(--fondo); padding: 8px 12px; border-radius: 10px; text-align: center; }
.secreto { font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: .08em; background: var(--fondo); padding: 12px 14px; border-radius: 12px; word-break: break-all; }
.cambios-json { font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: pre-wrap; background: var(--fondo); padding: 10px; border-radius: 10px; max-height: 260px; overflow: auto; margin-top: 6px; }
@media (max-width: 700px) { .dl { grid-template-columns: 1fr; } .dl dt { margin-top: 6px; } }

/* Restaurar respaldo: botón que despliega la confirmación */
details.restaurar { position: relative; }
details.restaurar > summary { list-style: none; }
details.restaurar > summary::-webkit-details-marker { display: none; }

/* Marca: nombre bicolor (azul marino + naranja), trazo azul, eslogan en cursiva y autor */
.marca-icono { width: 42px; height: 42px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca-nombre { font-family: "Montserrat", "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.marca-regis { background: linear-gradient(180deg, #1d3a9e, #14287a); -webkit-background-clip: text; background-clip: text; color: #14287a; -webkit-text-fill-color: transparent; }
.marca-tec { background: linear-gradient(90deg, #f7a21b, #f26a21); -webkit-background-clip: text; background-clip: text; color: #f26a21; -webkit-text-fill-color: transparent; }
.marca-trazo { width: 100%; max-width: 110px; height: 5px; margin-top: 1px; }
.marca-eslogan { font-size: 10.5px; font-weight: 600; font-style: italic; color: #14287a; margin-top: 2px; }
.marca-autor { font-size: 10px; font-weight: 600; color: #f26a21; margin-top: 2px; letter-spacing: .02em; }
.marca:hover .marca-icono { transform: rotate(-4deg); transition: transform .2s; }
.lateral .marca { align-items: flex-start; gap: 8px; } .lateral .marca-icono { width: 36px; height: 36px; margin-top: 2px; } .lateral .marca-nombre { font-size: 20px; } .lateral .marca-eslogan { font-size: 10px; white-space: normal; }

/* Especificaciones curriculares */
.esp-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.esp-cabecera > p { max-width: 720px; margin: 0; }
.esp-marca { margin-left: 4px; font-size: 10px; }
.esp-marca.ok { color: var(--verde); font-weight: 700; }
.esp-rejilla > .tarjeta { margin-top: 0; }
.esp-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.esp-panel { position: sticky; top: 16px; max-height: calc(100vh - 120px); overflow: auto; }
.esp-pie { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.esp-estado { margin-left: auto; font-size: 13px; color: #b26a00; }
.fila-especificacion { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 6px 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--linea-suave); }
.fila-especificacion + .fila-especificacion { margin-top: 10px; }
.fila-especificacion.activa { border-color: var(--azul); background: rgba(29,58,158,.04); }
.fila-especificacion .campo { margin: 0; }
.fila-especificacion input { width: 100%; }
.fila-especificacion textarea { min-height: 96px; }
.esp-fila-cabeza { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.esp-mini { font-size: 12px; font-weight: 500; padding: 0; margin-left: 6px; }
.esp-ce { border-top: 1px solid var(--linea-suave); padding: 10px 0; }
.esp-ce:first-of-type { margin-top: 10px; }
.esp-ce summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 14px; list-style: none; }
.esp-ce summary::-webkit-details-marker { display: none; }
.esp-ce summary::before { content: '▸'; color: var(--terciario); margin-right: 4px; }
.esp-ce[open] summary::before { content: '▾'; }
.esp-ce summary > span:first-child { flex: 1; }
.esp-cuenta { font-size: 12px; font-weight: 600; color: var(--azul); }
.esp-ce-texto { font-size: 13px; margin: 6px 0 4px; color: var(--secundario); }
.esp-usar-ce { font-size: 12px; padding: 0; }
.chip-il { display: inline-block; margin: 4px 4px 0 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linea, #d2d2d7); background: #fff; font: 600 12px/1.4 inherit; color: var(--texto); cursor: pointer; }
.chip-il:hover { border-color: var(--azul); color: var(--azul); }
.chip-il.en-fila { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip-il.en-fila::before { content: '✓ '; }
.chip-il.usado { border-style: dashed; color: var(--secundario); }
.esp-lectura .tabla td { vertical-align: top; }
.esp-linea { margin: 0 0 6px; font-size: 14px; }
.esp-linea:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .fila-especificacion, .esp-rejilla { grid-template-columns: 1fr; } .esp-panel { position: static; max-height: none; } }

/* Tablero de avance */
.avance { height: 6px; background: var(--linea-suave); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.avance-barra { display: block; height: 6px; border-radius: 3px; background: var(--terciario); }
.avance-barra.bien { background: var(--verde); }
.avance-barra.medio { background: #e8a33d; }
.avance-barra.bajo { background: var(--rojo); }
.tabla-avance small { color: var(--secundario); font-size: 12px; white-space: nowrap; }

/* ---------- Portal de familias ---------- */
.familia { max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.familia .tarjeta { margin: 0; }
.familia-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.familia-cabeza .marca { padding: 4px 0; }
.familia-asistencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.familia-asistencia div { background: var(--fondo); border-radius: var(--radio-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.familia-asistencia strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.familia-asistencia span { color: var(--secundario); font-size: 13px; }
.tabla td.baja { color: var(--rojo); font-weight: 600; }

/* ---------- Marca: acentos naranja ---------- */
.insignia.acento { background: var(--acento-suave); color: #b8460c; }
.btn-acento { background: var(--acento); color: #fff; }
.btn-acento:hover { background: #d9581a; }
.encabezado h1::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: var(--acento); margin-top: 10px; }
.segmentado .activo { color: var(--marino); }

/* ---------- Pantallas pequeñas: tablas y cuadrículas ---------- */
.tabla-envoltura { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabla-fija td:first-child, .tabla-fija th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.tabla-fija thead th:first-child { z-index: 2; }
@media (max-width: 700px) {
  .tarjeta { padding: 16px; border-radius: 14px; }
  .encabezado { margin-bottom: 18px; }
  .encabezado p { font-size: 15px; }
  .encabezado > .fila, .encabezado > .btn { width: 100%; }
  .tabla th, .tabla td { padding: 10px 10px; }
  .tabla td { font-size: 14px; }
  .tabla-envoltura { margin: 0 -16px; border-radius: 0; padding: 0 16px; }
  .cuadricula-envoltura { max-height: calc(100vh - 130px); }
  .cuadricula .col-nombre { min-width: 150px; max-width: 170px; padding: 0 8px; white-space: normal; font-size: 13px; line-height: 1.25; box-shadow: 1px 0 0 var(--linea-suave); }
  .cuadricula input.nota { width: 46px; }
  .segmentado { overflow-x: auto; flex-wrap: nowrap !important; max-width: 100%; }
  .segmentado a { flex: none; }
  .familia h1 { font-size: 24px !important; }
}
.familia > * { min-width: 0; }
.tabla-fija td:first-child { min-width: 150px; }
@media (max-width: 700px) { .familia-cabeza .marca-eslogan { display: none; } .tabla-fija td:first-child { min-width: 130px; } }

/* ---------- Compra de licencias ---------- */
.compra { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.compra > * { min-width: 0; }
.compra .tarjeta + .tarjeta { margin-top: 0; }
.compra-intro { text-align: center; max-width: 640px; margin: 12px auto 0; }
.compra-intro p { color: var(--secundario); font-size: 17px; margin-top: 10px; }
.compra-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 18px; padding-top: 18px; align-items: stretch; }

/* Tarjeta base */
.compra-plan { position: relative; background: #fff; border: 1.5px solid #e8e8f0; border-radius: 24px; padding: 32px 24px 26px;
  display: flex; flex-direction: column; gap: 0;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
.compra-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -10px rgba(0,0,0,.14); }

/* Plan gratis */
.compra-plan.prueba { background: var(--fondo); border: 1.5px dashed var(--acento); }

/* Plan destacado — invertido */
.compra-plan.destacado { background: var(--marino); border-color: var(--marino); color: #fff;
  box-shadow: 0 20px 50px -10px rgba(14,28,78,.4); }
.compra-plan.destacado:hover { box-shadow: 0 28px 60px -8px rgba(14,28,78,.5); transform: translateY(-6px); }

/* Plan activo */
.compra-plan.activo { box-shadow: 0 0 0 3px rgba(29,58,158,.2), 0 10px 30px -8px rgba(14,28,78,.2); border-color: var(--marino); }

/* Título */
.compra-plan h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.compra-plan.destacado h3 { color: #fff; }

/* Badge */
.compra-insignia { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--marino); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 14px; border-radius: 980px;
  letter-spacing: .04em; text-transform: uppercase; }
.compra-plan.prueba .compra-insignia { background: var(--acento); }
.compra-plan.destacado .compra-insignia { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); color: #fff; }

/* Precio */
.compra-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 20px; }
.compra-precio s { color: var(--terciario); font-size: 15px; font-weight: 600; }
.compra-precio strong { font-size: 34px; color: var(--marino); letter-spacing: -.03em; font-weight: 800; }
.compra-plan.destacado .compra-precio strong { color: #fff; }
.compra-precio span { color: var(--secundario); font-size: 13px; }
.compra-plan.destacado .compra-precio span { color: rgba(255,255,255,.65); }
.compra-mensual { color: var(--secundario); font-size: 13px; margin-top: 7px; }
.compra-plan.destacado .compra-mensual { color: rgba(255,255,255,.65); }

/* Descripción */
.compra-desc { font-size: 14px; margin-top: 6px; color: var(--secundario); }
.compra-plan.destacado .compra-desc { color: rgba(255,255,255,.7); }

/* Puntos */
.compra-puntos { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 9px; font-size: 14px; flex: 1; align-content: start; }
.compra-puntos li { padding-left: 22px; position: relative; color: var(--secundario); }
.compra-puntos li::before { content: "✓"; position: absolute; left: 0; color: var(--marino); font-weight: 700; font-size: 13px; top: 1px; }
.compra-plan.destacado .compra-puntos li { color: rgba(255,255,255,.8); }
.compra-plan.destacado .compra-puntos li::before { color: #93c5fd; }

/* Ahorro */
.compra-ahorro { align-self: flex-start; background: var(--acento-suave); color: #b4470c; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-top: 7px; }
.compra-plan.destacado .compra-ahorro { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }

/* Botón */
.compra-plan .btn { margin-top: auto; }
.compra-plan.destacado .btn:not(.btn-borde) { background: rgba(255,255,255,.95); color: var(--marino); }
.compra-plan.destacado .btn:not(.btn-borde):hover { background: #fff; text-decoration: none; }
.compra-plan.destacado .btn.btn-borde { background: transparent; color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.compra-plan.destacado .btn.btn-borde:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.compra-promo { text-align: center; font-size: 15px; color: var(--secundario); }
.compra-total { text-align: right; display: flex; flex-direction: column; }
.compra-total strong { font-size: 28px; color: var(--marino); }
.compra-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.compra-metodo { border: 1px solid var(--linea-suave); border-radius: var(--radio-sm); padding: 18px; }
.compra-cuentas { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--fondo); border-radius: 10px; padding: 12px; margin: 10px 0 0; }
.compra-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.compra-pasos div { display: flex; gap: 12px; align-items: flex-start; color: var(--secundario); font-size: 14px; }
.compra-pasos b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; }
.compra-ahorro { align-self: flex-start; background: var(--acento-suave); color: #b4470c; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.compra-nota { text-align: center; color: var(--secundario); font-size: 14px; margin-top: 14px; }
.l-precios .compra-planes { max-width: 1100px; margin: 0 auto; text-align: left; }
.l-precios .compra-promo { margin-bottom: 8px; }
.compra-volver { margin: -6px 0 10px -10px; }

/* ── Modal de compra ───────────────────────────────────────────────── */
.compra-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 900; align-items: center; justify-content: center; padding: 16px; }
.compra-overlay.abierto { display: flex; }
.compra-modal { background: var(--superficie); border-radius: 24px; width: 100%; max-width: 860px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.compra-modal-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--linea-suave); flex-shrink: 0; }
.compra-modal-cabeza h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.compra-modal-cerrar { background: none; border: none; cursor: pointer; padding: 6px; color: var(--secundario); border-radius: 50%; line-height: 1; font-size: 20px; transition: background .15s; }
.compra-modal-cerrar:hover { background: var(--fondo); }
.compra-modal-cuerpo { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; flex: 1; min-height: 0; }
.compra-modal-resumen { background: var(--fondo); padding: 24px 20px; border-right: 1px solid var(--linea-suave); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.compra-modal-resumen h3 { font-size: 16px; font-weight: 800; }
.compra-modal-resumen .precio-grande { font-size: 28px; font-weight: 900; color: var(--marino); letter-spacing: -.02em; line-height: 1; }
.compra-modal-resumen .precio-tachado { font-size: 14px; color: var(--terciario); text-decoration: line-through; }
.compra-modal-resumen .duracion { font-size: 13px; color: var(--secundario); }
.compra-modal-resumen ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.compra-modal-resumen li { padding-left: 20px; position: relative; }
.compra-modal-resumen li::before { content: "✓"; position: absolute; left: 2px; color: var(--marino); font-weight: 700; }
.compra-modal-form { overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; }
.compra-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.compra-tab { flex: 1; padding: 10px; border: 2px solid var(--linea-suave); border-radius: var(--radio-sm); background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--secundario); transition: all .15s; text-align: center; }
.compra-tab.activo { border-color: var(--marino); color: var(--marino); background: rgba(29,58,158,.06); }
.compra-panel { display: none; }
.compra-panel.activo { display: block; }
.compra-cuenta-ficha { background: var(--fondo); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.compra-cuenta-ficha + .compra-cuenta-ficha { margin-top: 8px; }
.compra-campo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 680px) {
  .compra-modal-cuerpo { grid-template-columns: 1fr; }
  .compra-modal-resumen { border-right: none; border-bottom: 1px solid var(--linea-suave); padding: 16px; }
  .compra-modal-resumen .precio-grande { font-size: 22px; }
  .compra-campo-row { grid-template-columns: 1fr; }
}
.compra-plan-btn { width: 100%; margin-top: auto; }

/* =========================================================
   Tec · asistente de RegisTec
   ========================================================= */
.tec { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tec-boton {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 18px 8px 8px; border-radius: 980px; background: var(--marino); color: #fff; box-shadow: var(--sombra-alta);
  transition: transform .15s ease, background .15s ease;
}
.tec-boton:hover { background: var(--azul); transform: translateY(-1px); }
.tec.abierto .tec-boton { display: none; }
.tec-logo {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 6px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--acento), #d4520f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.tec-panel {
  width: 390px; max-width: calc(100vw - 32px); height: min(620px, calc(100vh - 48px)); display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden; border: 1px solid var(--linea-suave);
}
.tec-panel[hidden] { display: none; }
.tec-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: var(--marino); color: #fff; }
.tec-cabecera .btn-texto { color: #fff; }
.tec-cabecera .btn-texto:hover { background: rgba(255,255,255,.12); }
.tec-titulo { flex: 1; min-width: 0; line-height: 1.2; }
.tec-titulo small { display: block; color: rgba(255,255,255,.72); font-size: 12px; }
.tec-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo); }
.tec-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tec-assistant { align-self: flex-start; background: var(--superficie); color: var(--texto); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tec-user { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.tec-escribiendo { color: var(--terciario); font-style: italic; }
.tec-error { background: var(--rojo-suave); color: #a1000f; }
.tec-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; background: var(--fondo); }
.tec-sugerencias[hidden] { display: none; }
.tec-sugerencia {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--azul); font: inherit; font-size: 12.5px; padding: 6px 11px;
  border-radius: 980px; cursor: pointer; text-align: left;
}
.tec-sugerencia:hover { background: var(--azul-suave); border-color: var(--azul-suave); }
.tec-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 12px 6px; border-top: 1px solid var(--linea-suave); background: var(--superficie); }
.tec-form textarea { flex: 1; resize: none; min-height: 38px; max-height: 140px; font-size: 14px; padding: 8px 12px; border-radius: 12px; }
.tec-nota { font-size: 11.5px; color: var(--terciario); padding: 0 14px 10px; background: var(--superficie); }
@media (max-width: 700px) {
  .tec { right: 12px; bottom: 12px; }
  .tec-boton span:last-child { display: none; }
  .tec-boton { padding: 8px; }
  .tec-panel { width: calc(100vw - 24px); height: calc(100vh - 88px); }
}
@media print { .tec { display: none; } }
@keyframes tecPulso {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 0 rgba(242,106,33,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 8px rgba(242,106,33,.35); }
}
.tec-boton .tec-logo { animation: tecPulso 2.4s ease-in-out infinite; }

/* =========================================================
   Panel de la plataforma · componentes rediseñados
   ========================================================= */
/* Pestañas con contador (estados de licencia, pagos/webhooks) */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); margin-bottom: 20px; }
.pestana {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--secundario);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--texto); text-decoration: none; }
.pestana.activo { color: var(--marino); border-bottom-color: var(--acento); font-weight: 600; }
.pestana .cuenta { font-size: 12px; font-weight: 600; background: rgba(0,0,0,.06); color: var(--secundario); padding: 1px 8px; border-radius: 980px; }
.pestana.activo .cuenta { background: var(--azul-suave); color: var(--azul); }

/* Aviso destacado con acción */
.aviso-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aviso.atencion { background: var(--acento-suave); color: #8a3a0c; border: 1px solid #fbd5bd; }

/* Accesos rápidos del tablero */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.acceso {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio-sm); background: var(--superficie);
  box-shadow: var(--sombra); color: var(--texto); font-weight: 500; font-size: 14px; transition: transform .15s ease, box-shadow .15s ease;
}
.acceso-form { display: contents; }
button.acceso { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.acceso:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); text-decoration: none; }
.acceso .icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); flex: none; }
.acceso .icono svg { width: 18px; height: 18px; }
.acceso.acento .icono { background: var(--acento-suave); color: var(--acento); }
.acceso small { display: block; font-weight: 400; font-size: 12px; }

/* Línea de tiempo de actividad */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); font-size: 14px; }
.linea-tiempo li:last-child { border-bottom: 0; }
.linea-tiempo .punto { margin-top: 7px; flex: none; }
.punto.azul { background: var(--azul); } .punto.naranja { background: var(--acento); }

/* Tarjetas de planes */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.plan-card { position: relative; display: flex; flex-direction: column; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; border: 2px solid transparent; }
.plan-card--destacado { border-color: var(--acento); }
.plan-card--inactivo { opacity: .62; }
.plan-insignia { position: absolute; top: -11px; left: 20px; background: var(--acento); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 980px; }
.plan-precio { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.precio-grande { font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--marino); }
.precio-tachado { color: var(--terciario); font-size: 15px; }
.plan-duracion { color: var(--secundario); font-size: 14px; }
.plan-puntos { list-style: none; padding: 0; margin: 14px 0 0; font-size: 14px; flex: 1; }
.plan-puntos li { padding: 4px 0 4px 22px; position: relative; }
.plan-puntos li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.plan-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.plan-acciones { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.plan-nuevo { display: grid; place-items: center; text-align: center; border: 2px dashed var(--linea); box-shadow: none; background: transparent; color: var(--azul); min-height: 220px; font-weight: 500; }
.plan-nuevo:hover { background: var(--azul-suave); text-decoration: none; }

/* Ficha de detalle (clave: valor) */
.detalle-lista { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.detalle-lista dt { color: var(--secundario); }
.detalle-lista dd { margin: 0; overflow-wrap: anywhere; }
.comprobante-visor { width: 100%; min-height: 460px; border: 1px solid var(--linea-suave); border-radius: var(--radio-sm); background: var(--fondo); }
.comprobante-img { max-width: 100%; border-radius: var(--radio-sm); border: 1px solid var(--linea-suave); }
.monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { padding: 12px 14px; border-top: 2px solid var(--linea); font-weight: 600; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin: 0; min-width: 160px; }
.filtros .campo.ancho { flex: 1; min-width: 220px; }

/* Nombre y precio de la tarjeta de plan llevan a editarlo */
.plan-enlace { display: block; color: inherit; border-radius: 8px; }
.plan-enlace, .plan-enlace:hover, .plan-enlace:hover * { text-decoration: none; }
.plan-enlace:hover h3, .plan-enlace:focus-visible h3 { color: var(--acento); }
.plan-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
/* Botón con aspecto de enlace (p. ej. «ir a transferencia» dentro del modal de compra) */
.btn-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); font-weight: 600; text-decoration: underline; cursor: pointer; }
.btn-enlace:hover { color: var(--acento); }
/* El texto guía del cupón no va en mayúsculas aunque lo escrito sí */
.compra-modal-form input::placeholder { text-transform: none; }

/* ── Tarjetas de precio (rediseño) ─────────────────────────────────── */
.compra-plan { padding: 30px 24px 22px; }
.compra-plan.destacado { background: linear-gradient(160deg, var(--azul) 0%, var(--marino) 70%); }
@media (min-width: 900px) { .compra-plan.destacado { transform: translateY(-8px); } .compra-plan.destacado:hover { transform: translateY(-12px); } }
.compra-plan.destacado .compra-insignia { background: var(--acento); border: 0; color: #fff; box-shadow: 0 6px 16px -4px rgba(242,106,33,.6); }
.compra-plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compra-duracion { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--fondo); color: var(--marino); }
.compra-plan.prueba .compra-duracion { background: #fff; color: var(--acento); }
.compra-plan.destacado .compra-duracion { background: rgba(255,255,255,.14); color: #fff; }
.compra-precio { align-items: flex-end; margin-top: 18px; }
.compra-monto { display: inline-flex; align-items: flex-start; color: var(--marino); line-height: 1; }
.compra-monto small { font-size: 18px; font-weight: 700; margin: 6px 3px 0 0; color: inherit; }
.compra-monto strong { font-size: 48px; }
.compra-precio .compra-pago-unico { font-size: 13px; padding-bottom: 6px; }
.compra-plan.destacado .compra-monto { color: #fff; }
.compra-plan.prueba .compra-monto { color: var(--acento); }
.compra-separador { border: 0; border-top: 1px solid var(--linea-suave, #ececf2); margin: 18px 0 0; }
.compra-plan.destacado .compra-separador { border-top-color: rgba(255,255,255,.16); }
.compra-plan.prueba .compra-separador { border-top: 1px dashed rgba(242,106,33,.35); }
.compra-puntos { margin: 16px 0 22px; }
.compra-plan .compra-plan-accion { margin-top: auto; }
.compra-plan:not(.destacado) .compra-plan-accion:not(.btn-borde) { background: var(--acento); }
.compra-plan:not(.destacado) .compra-plan-accion:not(.btn-borde):hover { filter: brightness(.95); text-decoration: none; }
.compra-plan-accion span { display: inline-block; transition: transform .2s; }
.compra-plan-accion:hover span { transform: translateX(4px); }
.compra-medios { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 5px; margin-top: 12px; font-size: 11.5px; white-space: nowrap; color: var(--secundario); }
.compra-plan.destacado .compra-medios { color: rgba(255,255,255,.7); }
.compra-medios .medio { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid #e3e3ea; color: var(--texto); font-weight: 600; }
.compra-plan.prueba .compra-medios .medio, .compra-plan.destacado .compra-medios .medio { border-color: transparent; }
.medio-paypal { font-style: italic; font-weight: 800 !important; letter-spacing: -.01em; }
.medio-paypal b { color: #003087; } .medio-paypal i { color: #009cde; }
.compra-confianza { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; color: var(--secundario); font-size: 14px; }
.l-precios .antetitulo { color: var(--acento); }
.tec-cabecera .btn-texto { border: 0; box-shadow: none; }

/* Contador en el menú (p. ej. transferencias por revisar) */
.nav-cuenta { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: #fff;
  font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.nav-item.activo .nav-cuenta { background: #fff; color: var(--acento); }

/* ── Políticas públicas (términos, privacidad, reembolsos) ─────────── */
.p-politica { background: var(--fondo); }
.politica-pagina { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.politica-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.politica-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.politica-nav a { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--secundario); background: var(--superficie); border: 1px solid var(--linea-suave); }
.politica-nav a:hover { text-decoration: none; color: var(--marino); border-color: var(--marino); }
.politica-nav a.activo { background: var(--marino); color: #fff; border-color: var(--marino); }
.politica { padding: 36px 40px; line-height: 1.65; font-size: 15.5px; }
.politica h1 { font-size: clamp(26px, 4vw, 34px); color: var(--marino); letter-spacing: -.02em; }
.politica-meta { color: var(--secundario); font-size: 13.5px; margin: 6px 0 24px; padding-bottom: 18px; border-bottom: 3px solid var(--acento); display: inline-block; }
.politica h2 { font-size: 19px; color: var(--marino); margin: 26px 0 8px; }
.politica h3 { font-size: 16px; margin: 18px 0 6px; }
.politica p { margin: 0 0 12px; color: var(--texto); }
.politica ul { margin: 0 0 14px; padding-left: 22px; }
.politica li { margin: 5px 0; }
.politica li::marker { color: var(--acento); }
.politica-previa { border: 1px solid var(--linea); border-radius: 12px; padding: 20px 24px; max-height: 560px; overflow: auto; background: var(--superficie); }
.politica-pie { text-align: center; margin-top: 22px; font-size: 14px; }
@media (max-width: 600px) { .politica { padding: 24px 18px; } }
/* Porcentaje de descuento junto al precio tachado */
.compra-precio .compra-descuento { align-self: center; font-size: 12px; font-weight: 800; color: #fff; background: #1a7f37; padding: 2px 8px; border-radius: 999px; }
.compra-plan.destacado .compra-precio .compra-descuento { background: var(--acento); }
.compra-plan.destacado .compra-precio s { color: rgba(255,255,255,.6); }

/* Tarjetas de planes compactas */
.compra-planes { gap: 20px 14px; padding-top: 14px; }
.compra-plan { padding: 22px 18px 16px; border-radius: 20px; }
.compra-plan h3 { font-size: 18px; }
.compra-precio { margin-top: 12px; gap: 2px 8px; }
.compra-monto strong { font-size: 38px; }
.compra-monto small { font-size: 15px; margin-top: 4px; }
.compra-precio .compra-pago-unico { padding-bottom: 4px; }
.compra-mensual { margin-top: 4px; }
.compra-ahorro { margin-top: 6px; font-size: 12px; padding: 2px 9px; }
.compra-puntos { margin: 12px 0 14px; gap: 5px; font-size: 13.5px; border-top: 1px solid var(--linea-suave, #ececf2); padding-top: 12px; }
.compra-plan.destacado .compra-puntos { border-top-color: rgba(255,255,255,.16); }
.compra-plan.prueba .compra-puntos { border-top: 1px dashed rgba(242,106,33,.35); }
.compra-plan .compra-plan-accion { font-size: 15px; padding: 10px 16px; margin-top: 0; }
.compra-espacio { flex: 1; min-height: 14px; }
.compra-antes { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.compra-medios { margin-top: 8px; }
.compra-incluye { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin: 18px auto 0; max-width: 1100px;
  padding: 12px 18px; border-radius: 14px; background: var(--fondo); font-size: 14px; color: var(--secundario); }
.compra-incluye strong { color: var(--marino); }
.compra-incluye span::before { content: "✓ "; color: var(--marino); font-weight: 700; }
.compra-confianza { margin-top: 16px; }

/* Panel de dirección: bloque «Hoy» */
.hoy-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .hoy-rejilla { grid-template-columns: 1fr; } }
.hoy-item { display: flex; flex-direction: column; gap: 8px; }
.hoy-item .etiqueta { font-size: 13px; color: var(--secundario); font-weight: 600; }
.hoy-item .valor { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hoy-item .valor small { font-size: 15px; font-weight: 600; color: var(--secundario); }
.hoy-item .valor-s { font-size: 18px; font-weight: 700; }
.hoy-item .sec { font-size: 14px; }
.hoy-alerta { box-shadow: inset 0 0 0 2px var(--acento); }
.hoy-alerta .valor { color: var(--acento); }
.barra-progreso { height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; border-radius: inherit; background: var(--azul); }
.hoy-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.hoy-lista li { padding-left: 14px; position: relative; }
.hoy-lista li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.ok-texto { color: #1a7f37; font-size: 14px; font-weight: 600; }
.enlace-mas { font-size: 14px; font-weight: 600; margin-top: auto; }

/* Asistencia: barra de resumen (avance, totales y acciones) */
.asis-intro { max-width: 820px; margin: 0 auto 14px; font-size: 14px; }
.asis-resumen { position: sticky; top: 76px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); font-size: 13px; color: var(--secundario); }
.asis-avance { display: grid; gap: 7px; min-width: 0; }
.asis-contador { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.asis-contador b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; }
.asis-barra { height: 5px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.asis-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--azul); transition: width .25s ease; }
.asis-resumen.completo .asis-barra span { background: #34c759; }
.asis-resumen.completo .asis-contador b { color: #1a7f37; }
.asis-filtros { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.asis-herramientas { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linea-suave); align-self: stretch; }
.asis-buscar { position: relative; display: flex; align-items: center; margin: 0; }
.asis-buscar svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--terciario); pointer-events: none; }
.asis-buscar input { width: 190px; height: 34px; padding: 0 10px 0 32px; font-size: 13.5px; border-radius: 10px; }
.asis-vistas { flex: none; }
.asis-vistas button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--secundario); }
.asis-vistas button svg { width: 16px; height: 16px; }
.asis-vistas button[aria-pressed=true] { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.asis-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: opacity .15s, background .15s; padding: 4px 9px 4px 4px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--secundario); cursor: pointer; }
.asis-chip:hover { background: var(--fondo); }
.asis-chip[aria-pressed=true] { background: var(--azul-suave); color: var(--marino); opacity: 1; box-shadow: inset 0 0 0 1px #c9d3f2; }
.asis-chip-pend b { background: var(--linea); color: var(--secundario); }
.asis-chip b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 11px; }
.asis-chip i { font-style: normal; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.asis-chip.cero:not([aria-pressed=true]) { opacity: .4; }
.asis-chip[data-v=P] b { background: #34c759; } .asis-chip[data-v=A] b { background: #ff3b30; } .asis-chip[data-v=T] b { background: #ff9f0a; }
.asis-chip[data-v=E] b { background: #0a84ff; } .asis-chip[data-v=R] b { background: #8e8e93; }
.asis-acciones { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 4px; }
.asis-avance { grid-column: 1; grid-row: 1; }
.asis-acciones .btn:disabled { opacity: .45; cursor: default; }
.asis-todos:disabled { background: var(--fondo); color: var(--secundario); opacity: 1 !important; }
.asis-quitar { color: var(--secundario); }
.asis-quitar:not(:disabled):hover { color: var(--rojo); background: var(--rojo-suave); }
.asis-teclado { text-align: center; margin-top: 20px; font-size: 12.5px; color: var(--terciario); }

/* Filas: limpias; solo se anota lo que requiere atención */
.lista-asistencia .alumno { gap: 14px; padding: 9px 10px; border-bottom: 1px solid var(--linea-suave); transition: background .12s; }
.lista-asistencia .alumno:last-of-type { border-bottom: 0; }
.lista-asistencia .alumno:hover { background: rgba(255,255,255,.7); }
.lista-asistencia .alumno:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; background: var(--superficie); }
.lista-asistencia .alumno .nombre { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.nombre-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alumno-nota { display: flex; flex-wrap: wrap; gap: 4px; }
.alumno-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--fondo); color: var(--secundario); font-size: 11.5px; font-weight: 600; }
.alumno-tag.rojo { background: var(--rojo-suave); color: #a1000f; }
.lista-asistencia .marcas { gap: 4px; }
.lista-asistencia .marca-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; background: transparent; color: var(--terciario); box-shadow: inset 0 0 0 1px var(--linea-suave); }
.lista-asistencia .marca-btn:hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); }
.lista-asistencia .alumno.marcado .marca-btn:not(.sel) { color: #c7c7cc; box-shadow: none; }
.lista-asistencia .alumno.marcado .marca-btn:not(.sel):hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); }
.lista-asistencia .marca-btn.sel { box-shadow: none; }

@media (max-width: 600px) {
  /* La barra del modo enfoque deja de ser fija en móvil; el resumen queda fijo arriba. */
  .enfoque-barra { position: static; padding: 10px 16px; gap: 8px 10px; }
  .enfoque-cuerpo { padding: 12px 14px 90px; }
  .asis-resumen { top: 0; padding: 12px; gap: 10px; border-radius: 14px; }
  .asis-contador b { font-size: 19px; }
  .asis-chip-txt { display: none; }
  .asis-filtros { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; gap: 2px; padding-top: 10px; }
  .asis-chip { padding: 3px 5px 3px 3px; }
  .asis-herramientas { grid-column: 1 / -1; grid-row: 4; padding-top: 0; border-top: 0; }
  .asis-buscar { flex: 1; }
  .asis-buscar input { width: 100%; }
  .asis-acciones { grid-column: 1 / -1; grid-row: 2; }
  .asis-acciones .asis-todos { flex: 1; justify-content: center; }
  /* Fila compacta: nombre y botones en la misma línea. */
  .alumno, .lista-asistencia .alumno { flex-wrap: nowrap; gap: 8px; padding: 8px 4px; }
  .lista-asistencia .alumno .nombre { font-size: 14px; line-height: 1.25; }
  .nombre-txt { white-space: normal; }
  .lista-asistencia .marca-btn { width: 33px; height: 38px; font-size: 13px; }
  .alumno .n { width: 18px; font-size: 12px; }
  .alumno .nombre { font-size: 14px; line-height: 1.25; }
  .alumno .nombre small { font-size: 11px; }
  .marcas { width: auto; gap: 4px; }
  .marca-btn { width: 33px; height: 40px; font-size: 13px; }
  .solo-escritorio { display: none !important; }
}
@media (max-width: 340px) { .alumno { flex-wrap: wrap; } .marcas { width: 100%; justify-content: flex-end; } }

/* Calificaciones en el celular: una competencia a la vez */
.ver-columnas, .solo-movil { display: none; }
@media (max-width: 700px) {
  .ver-columnas { display: flex; margin-bottom: 10px; width: 100%; }
  .ver-columnas button { flex: 1; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 4px; border-radius: 8px; color: var(--secundario); cursor: pointer; }
  .ver-columnas button.activo { background: #fff; color: var(--marino); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  .solo-movil { display: inline; }
  .solo-escritorio { display: none !important; }
  .cuadricula .col-oculta { display: none; }
  .cuadricula .col-nombre { min-width: 0; white-space: normal; padding: 6px 10px; font-size: 13.5px; line-height: 1.25; }
  .cuadricula input.nota { width: 100%; min-width: 56px; height: 44px; font-size: 16px; }
  .cuadricula-envoltura { max-height: none; }
}

/* Panel del docente: clases agrupadas por sección */
.seccion-clases { padding: 16px 18px; }
.seccion-clases-cabeza h2 { font-size: 20px; }
.clases-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.clase-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.franja-punto { width: 10px; height: 10px; border-radius: 50%; }
.clase-fila-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.clase-fila-nombre strong { font-size: 15px; font-weight: 600; }
.clase-fila-acciones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 700px) {
  .clase-fila { grid-template-columns: auto minmax(0, 1fr); }
  .clase-fila-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Tablas que en el celular se ven como tarjetas */
@media (max-width: 700px) {
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody { display: block; }
  .tabla-tarjetas tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px 12px 44px; border-bottom: 1px solid var(--linea-suave); }
  .tabla-tarjetas td { padding: 0; border: 0; }
  .tabla-tarjetas td.tt-num { position: absolute; left: 14px; top: 15px; font-size: 12px; }
  .tabla-tarjetas td.tt-titulo { order: 2; flex: 1 1 0; min-width: 0; font-size: 15px; }
  .tabla-tarjetas td.tt-estado { order: 3; }
  .tabla-tarjetas td[data-label] { order: 4; font-size: 12.5px; color: var(--secundario); }
  .tabla-tarjetas td[data-label]::before { content: attr(data-label) " "; color: var(--terciario); }
  .tabla-tarjetas td.tt-accion { order: 5; margin-left: auto; }
  .tabla-tarjetas tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
}

/* El botón flotante de Tec no tapa el final del contenido */
@media (max-width: 900px) {
  .contenido { padding-bottom: 104px; }
  .enfoque-cuerpo { padding-bottom: 104px; }
}

/* ---------- Barra de progreso de documentos (Excel en el navegador y documentos en cola) ---------- */
.progreso-doc { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.progreso-doc[hidden] { display: none; }
.progreso-barra { height: 8px; border-radius: 980px; background: var(--linea-suave); overflow: hidden; }
.progreso-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--azul); transition: width .35s ease; }
.progreso-doc.listo .progreso-barra span { background: var(--verde); }
.progreso-doc.en-cola .progreso-barra span { width: 30% !important; opacity: .45; animation: progreso-cola 1.4s ease-in-out infinite; }
.progreso-doc small { color: var(--secundario); font-size: 12px; font-variant-numeric: tabular-nums; }
@keyframes progreso-cola { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .progreso-barra span, .progreso-doc.en-cola .progreso-barra span { transition: none; animation: none; } }
/* El Excel se arma en el mismo hilo del navegador: sin transición, la barra refleja el % al instante. */
[data-excel-progreso] .progreso-barra span { transition: none; }

/* ---------- Identidad del centro (arriba de todas las vistas del usuario) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.centro-banda {
  display: flex; align-items: center; gap: 14px;
  margin: -6px 0 24px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--linea-suave); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.centro-sello {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #2f6fe4, var(--azul-hover)); color: #fff;
  font-weight: 700; font-size: 16px; letter-spacing: .5px;
}
.centro-sello img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.centro-datos { flex: 1; min-width: 0; }
.centro-nombre { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.centro-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 5px 0 0; padding: 0; list-style: none; }
.centro-chips li { padding: 2px 9px; border-radius: 980px; background: var(--fondo); color: var(--secundario); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.centro-chips li:first-child { background: var(--azul-suave); color: var(--azul); font-weight: 600; }
.centro-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; letter-spacing: .3px; }
.centro-licencia {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 980px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.centro-licencia .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.centro-licencia.verde { background: var(--verde-suave); color: var(--verde); }
.centro-licencia.naranja { background: #fff4e5; color: #b25000; }
.centro-licencia.rojo { background: #ffebee; color: #c4001a; }
a.centro-licencia:hover { border-color: currentColor; }
a.centro-licencia:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 2px; }
@media (max-width: 900px) {
  .centro-extra { display: none; }
}
@media (max-width: 640px) {
  .centro-banda { flex-wrap: wrap; gap: 10px 12px; padding: 10px 12px; margin: 0 0 16px; border-radius: 14px; }
  .centro-sello { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; }
  .centro-nombre { font-size: 15px; white-space: normal; }
  .centro-licencia { font-size: 12px; padding: 4px 10px; margin-left: 50px; }
  .centro-datos { flex-basis: calc(100% - 52px); }
}
.centro-compacta { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; margin-right: 8px; }
.centro-compacta .centro-sello { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.centro-compacta-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.centro-compacta-texto strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.centro-compacta-texto small { font-size: 11.5px; color: var(--secundario); }
@media (max-width: 1100px) { .centro-compacta { display: none; } }

/* ---------- Subtítulos de página: una línea clara + pistas con ícono ---------- */
.encabezado p { max-width: 62ch; margin-top: 12px; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.pistas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pistas li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px;
  border-radius: 980px; background: var(--superficie); border: 1px solid var(--linea-suave);
  color: var(--texto); font-size: 13px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.pistas li svg { flex: none; width: 15px; height: 15px; color: var(--azul); }
@media (max-width: 700px) {
  .encabezado p { font-size: 15px; margin-top: 10px; }
  .pistas { gap: 6px; margin-top: 10px; }
  .pistas li { font-size: 12.5px; padding: 5px 10px 5px 9px; }
}

/* ---------- Cuadro de honor ---------- */
.honor-rejilla { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; align-items: start; }
.honor-h2 { font-size: 18px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.honor-ayuda { font-size: 14px; margin: 4px 0 16px; }
.honor-criterios { position: sticky; top: 20px; }
.honor-umbrales { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.honor-umbrales .campo { margin-bottom: 8px; }
.honor-umbrales > .campo + .campo { margin-top: 0; }
.con-sufijo { position: relative; }
.con-sufijo input { width: 100%; padding-right: 34px; font-variant-numeric: tabular-nums; font-weight: 600; }
.con-sufijo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--secundario); pointer-events: none; }
.honor-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--linea); flex: none; }
.honor-punto.oro { background: #d4a017; }
.honor-punto.azul { background: var(--azul); }
.honor-escala { margin: 4px 0 18px; }
.honor-escala-barra { position: relative; height: 10px; border-radius: 980px; background: var(--linea-suave); overflow: hidden; }
.honor-escala-barra .tramo { position: absolute; top: 0; bottom: 0; }
.honor-escala-barra .tramo.destacado { background: color-mix(in srgb, var(--azul) 70%, #fff); }
.honor-escala-barra .tramo.meritorio { background: linear-gradient(90deg, #e9b730, #c98b0c); }
.honor-escala-marcas { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.honor-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 14px; border: 1px solid var(--linea-suave); border-radius: 12px; cursor: pointer; }
.honor-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--azul); }
.honor-check span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.honor-check small { color: var(--secundario); font-size: 12.5px; }
.honor-aplicar { width: 100%; justify-content: center; margin-top: 8px; }
.honor-nota { font-size: 12.5px; text-align: center; margin-top: 10px; }
.honor-resumen-cabeza { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.honor-meta { font-size: 13px; }
.honor-criterios-usados { font-size: 13px; color: var(--secundario); text-align: right; max-width: 340px; }
.honor-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.honor-metrica { padding: 12px 14px; border-radius: 12px; background: var(--fondo); display: flex; flex-direction: column; gap: 2px; }
.honor-metrica span { font-size: 12.5px; color: var(--secundario); }
.honor-metrica strong { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.honor-metrica.oro { background: #fdf6e3; }
.honor-metrica.oro strong { color: #9a6a00; }
.honor-metrica.azul { background: var(--azul-suave); }
.honor-metrica.azul strong { color: var(--azul); }
.honor-podio { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.honor-lugar { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--linea-suave); background: var(--superficie); min-width: 0; }
.honor-lugar.oro { background: linear-gradient(160deg, #fff8e1, #fff); border-color: #f0d68a; }
.honor-lugar.plata { background: linear-gradient(160deg, #f3f4f7, #fff); border-color: #d5d8de; }
.honor-lugar.bronce { background: linear-gradient(160deg, #fbefe6, #fff); border-color: #e8c4a6; }
.honor-puesto { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; font-size: 14px; color: #fff; background: var(--secundario); }
.honor-lugar.oro .honor-puesto { background: linear-gradient(135deg, #f2c94c, #c98b0c); }
.honor-lugar.plata .honor-puesto { background: linear-gradient(135deg, #c9ccd3, #8e939c); }
.honor-lugar.bronce .honor-puesto { background: linear-gradient(135deg, #e3a87a, #a8642f); }
.honor-nombre { font-weight: 650; font-size: 15px; line-height: 1.3; margin-top: 6px; }
.honor-seccion { font-size: 12.5px; color: var(--secundario); }
.honor-indice { font-size: 30px; font-weight: 750; letter-spacing: -.8px; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 6px; }
.honor-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.honor-seccion-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); }
.honor-seccion-nombre { font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--superficie); }
.honor-seccion-estudiante { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.honor-seccion-indice { font-weight: 700; font-variant-numeric: tabular-nums; }
.honor-filtro { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.honor-filtro a { flex: none; white-space: nowrap; }
.honor-listas { min-width: 0; }
.honor-lista { min-width: 0; }
.honor-tabla td.nombre { white-space: nowrap; }
@media (max-width: 1500px) { .honor-listas { grid-template-columns: 1fr; } }
.honor-tabla td.num, .honor-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.honor-actual td { background: var(--azul-suave); }
@media (max-width: 1100px) {
  .honor-rejilla { grid-template-columns: 1fr; }
  .honor-criterios { position: static; }
}
@media (max-width: 700px) {
  .honor-metricas { grid-template-columns: repeat(2, 1fr); }
  .honor-podio { grid-template-columns: 1fr; }
  .honor-lugar { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .honor-puesto { grid-row: 1 / 3; }
  .honor-nombre { margin-top: 0; }
  .honor-seccion { grid-column: 2; }
  .honor-indice { grid-row: 1 / 3; grid-column: 3; padding-top: 0; font-size: 24px; }
  .honor-criterios-usados { text-align: left; }
}

/* ---------- Observaciones del boletín ---------- */
@media (max-width: 700px) {
  .obs-lista { grid-template-columns: 1fr; }
  .obs-barra { position: static; }
  .obs-guardar { padding: 10px 64px 10px 12px; }
  .obs-guardar .sec { display: none; }
  .obs-guardar .btn { width: 100%; }
  .obs-barra .segmentado { width: 100%; }
  .obs-barra .segmentado a { flex: 1; text-align: center; }
  .obs-largo { display: none; }
  .obs-corto { display: inline; }
  .obs-avance { width: 100%; }
}

/* ---------- Panel de la dirección ---------- */
.panel-cabeza { margin-bottom: 18px; }
.panel-accesos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.panel-accesos a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.panel-accesos a:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); text-decoration: none; }
.panel-accesos svg { width: 17px; height: 17px; color: var(--azul); flex: none; }

.panel-metricas { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 16px; }
.panel-metricas > .tarjeta + .tarjeta { margin-top: 0; }
.panel-metricas .metrica { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.panel-metricas .valor small { font-size: 16px; font-weight: 600; color: var(--secundario); letter-spacing: 0; }
.panel-metricas .valor-s { font-size: 20px; font-weight: 700; margin-top: 8px; }
.panel-asistencia { background: linear-gradient(135deg, var(--azul) 0%, var(--marino) 100%); color: #fff; }
.panel-asistencia .etiqueta, .panel-asistencia .detalle, .panel-asistencia .valor small { color: rgba(255,255,255,.78); }
.panel-asistencia .detalle b { color: #fff; }
.tendencia { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0; background: rgba(255,255,255,.16); }
.tendencia.sube { color: #b9f6c8; }
.tendencia.baja { color: #ffd0c2; }

.panel-bloque { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-bloque h2 { font-size: 19px; letter-spacing: -.01em; }
.panel-bloque-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-bloque-cabeza .sec { font-size: 13.5px; margin-top: 3px; }
.panel-bloque-cabeza .insignia { flex: none; }
.panel-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel-dos > .tarjeta + .tarjeta { margin-top: 0; }
.panel-final { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.panel-subtitulo { margin: 34px 0 12px; flex-wrap: wrap; gap: 8px; }
.panel-subtitulo h2 { font-size: 22px; }

/* Estudiantes en riesgo */
.riesgo-lista { list-style: none; margin: 0; padding: 0; }
.riesgo-item { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: 8px 16px; padding: 11px 0; border-top: 1px solid var(--linea-suave); }
.riesgo-quien { display: flex; flex-direction: column; min-width: 0; }
.riesgo-quien strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riesgo-quien .ter { font-size: 12.5px; }
.riesgo-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-riesgo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip-riesgo small { font-weight: 500; opacity: .8; }
.chip-riesgo.rojo { background: var(--rojo-suave); color: #a1000f; }
.chip-riesgo.naranja { background: var(--naranja-suave); color: #9a3412; }
.chip-riesgo.azul { background: var(--azul-suave); color: var(--marino); }
.riesgo-acciones { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.riesgo-sin-tel { font-size: 12.5px; }
.riesgo-mas summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--azul); padding: 10px 0 2px; border-top: 1px solid var(--linea-suave); }

/* Pendientes por docente */
.docentes-lista { list-style: none; margin: 0; padding: 0; }
.docentes-lista li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea-suave); }
.docentes-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.docentes-quien strong { font-size: 14px; }
.docentes-quien .ter { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docentes-n { flex: none; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center; background: var(--acento-suave); color: #b8460c; font-size: 13px; font-weight: 700; }
.docentes-lista form { margin: 0; flex: none; }

/* Gráficas */
.grafica { margin: 4px 0 0; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-rejilla { stroke: var(--linea-suave); stroke-width: 1; }
.g-eje { font-size: 11px; fill: var(--terciario); font-variant-numeric: tabular-nums; }
.g-linea { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-marca { fill: var(--azul); stroke: var(--superficie); stroke-width: 2; }
.g-blanco { fill: transparent; }
.g-punto:hover .g-marca { r: 6px; }
.g-valor { font-size: 13px; font-weight: 700; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 5px; stroke-linejoin: round; }
.ver-datos { margin-top: 6px; }
.ver-datos summary { cursor: pointer; font-size: 13px; color: var(--secundario); }
.tabla-mini { margin-top: 6px; font-size: 13px; }
.tabla-mini th, .tabla-mini td { padding: 6px 10px; }
.tabla-mini .num { text-align: right; font-variant-numeric: tabular-nums; }

.barras { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.barras li { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(70px, 1.3fr) 58px; align-items: center; gap: 10px; }
.barras-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-pista { position: relative; height: 12px; border-radius: 4px; background: var(--fondo); }
.barras-pista::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--minima); width: 2px; border-radius: 1px; background: var(--texto); opacity: .45; }
.barras-valor { display: block; height: 100%; border-radius: 4px; background: var(--azul); }
.barras-valor.bajo { background: var(--acento); }
.barras-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras-aviso { display: block; font-size: 10.5px; font-weight: 600; color: #b8460c; }

/* Secciones */
.leyenda-estado { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--secundario); }
.leyenda-estado > span { display: inline-flex; align-items: center; gap: 6px; }
.secciones-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.secciones-panel > .tarjeta + .tarjeta { margin-top: 0; }
.sec-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; color: var(--texto); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.sec-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); text-decoration: none; }
.sec-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sec-nombre { font-size: 24px; font-weight: 750; letter-spacing: -.03em; }
.sec-estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fondo); white-space: nowrap; }
.sec-estado.verde { background: var(--verde-suave); color: var(--verde); }
.sec-estado.naranja { background: var(--acento-suave); color: #b8460c; }
.sec-estado.rojo { background: var(--rojo-suave); color: #a1000f; }
.sec-titular { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--secundario); }
.sec-titular span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sec-titular span:last-child { flex: none; }
.sec-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sec-datos > div { background: var(--fondo); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.sec-datos dt { font-size: 11px; color: var(--secundario); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-datos dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sec-avance { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 12.5px; color: var(--secundario); }
.sec-avance span:nth-child(2) { font-weight: 700; color: var(--texto); }
.sec-avance .barra-progreso { grid-column: 1 / -1; height: 6px; }
.sec-alertas { font-size: 12.5px; font-weight: 600; color: #a1000f; background: var(--rojo-suave); border-radius: 8px; padding: 6px 10px; }

/* Movimientos y cuenta */
.movimientos { list-style: none; margin: 0; padding: 0; }
.movimientos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea-suave); font-size: 14px; }
.mov-icono { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); }
.mov-icono svg { width: 16px; height: 16px; }
.movimientos time { font-size: 12.5px; white-space: nowrap; }
.cuenta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cuenta-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); }
.cuenta-lista li > svg { width: 18px; height: 18px; color: var(--secundario); }
.cuenta-lista li > span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.cuenta-lista li .ter { font-size: 12.5px; }
.cuenta-lista li.alerta { background: var(--acento-suave); box-shadow: inset 0 0 0 1px #fbd5bd; }
.cuenta-lista li.alerta > svg { color: var(--acento); }

@media (max-width: 1180px) {
  .panel-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riesgo-item { grid-template-columns: minmax(0, 1fr) auto; }
  .riesgo-motivos { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .panel-dos, .panel-final { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .panel-metricas { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-metricas .panel-asistencia { grid-column: 1 / -1; }
  .panel-metricas .metrica { padding: 14px 12px; }
  .panel-metricas .metrica .etiqueta { font-size: 12px; line-height: 1.25; min-height: 30px; }
  .panel-metricas .metrica:not(.panel-asistencia) .valor { font-size: 24px; }
  .panel-metricas .metrica:not(.panel-asistencia) .valor small { font-size: 12px; }
  .panel-metricas .metrica:not(.panel-asistencia) .detalle { display: none; }
  .panel-accesos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .panel-accesos a { flex: none; }
  .riesgo-item { grid-template-columns: 1fr; }
  .riesgo-acciones { justify-content: flex-start; }
  .barras li { grid-template-columns: minmax(0, 1fr) 64px; }
  .barras-pista { grid-column: 1 / -1; grid-row: 2; }
  .panel-bloque-cabeza { flex-direction: column; }
  .g-eje { font-size: 19px; }
  .g-valor { font-size: 22px; }
  .g-linea { stroke-width: 3; }
}

/* Asistencia: vista en cuadrícula compacta */
.lista-asistencia.vista-cuadricula { max-width: 1120px; }
.vista-cuadricula .alumnos { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.lista-asistencia.vista-cuadricula .alumno { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px 10px 10px 12px;
  border: 0; border-radius: 12px; background: var(--superficie); box-shadow: inset 3px 0 0 var(--linea), 0 1px 2px rgba(0,0,0,.05); }
.lista-asistencia.vista-cuadricula .alumno:hover { background: var(--superficie); box-shadow: inset 3px 0 0 var(--linea), 0 4px 14px rgba(0,0,0,.08); }
.lista-asistencia.vista-cuadricula .alumno[hidden] { display: none; }
.vista-cuadricula .alumno .n { width: auto; min-width: 20px; text-align: left; font-size: 12px; padding-top: 1px; }
.vista-cuadricula .alumno .nombre { font-size: 13.5px; line-height: 1.3; min-height: 35px; }
.vista-cuadricula .nombre-txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vista-cuadricula .alumno-tag { font-size: 10.5px; padding: 0 6px; }
.vista-cuadricula .marcas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.lista-asistencia.vista-cuadricula .marca-btn { width: auto; height: 28px; border-radius: 7px; font-size: 12px; }
.vista-cuadricula .alumno[data-estado=P] { box-shadow: inset 3px 0 0 #34c759, 0 1px 2px rgba(0,0,0,.05); }
.vista-cuadricula .alumno[data-estado=A] { box-shadow: inset 3px 0 0 #ff3b30, 0 1px 2px rgba(0,0,0,.05); background: #fff7f7; }
.vista-cuadricula .alumno[data-estado=T] { box-shadow: inset 3px 0 0 #ff9f0a, 0 1px 2px rgba(0,0,0,.05); background: #fffaf2; }
.vista-cuadricula .alumno[data-estado=E] { box-shadow: inset 3px 0 0 #0a84ff, 0 1px 2px rgba(0,0,0,.05); background: #f5f9ff; }
.vista-cuadricula .alumno[data-estado=R] { box-shadow: inset 3px 0 0 #8e8e93, 0 1px 2px rgba(0,0,0,.05); background: #f7f7f8; }
.lista-asistencia .alumno[hidden] { display: none; }
.asis-sin-resultados { text-align: center; color: var(--secundario); font-size: 14px; padding: 28px 0; }
@media (max-width: 600px) {
  .vista-cuadricula .alumnos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lista-asistencia.vista-cuadricula .alumno { padding: 9px 8px 8px 10px; gap: 6px; }
  .lista-asistencia.vista-cuadricula .marca-btn { height: 32px; font-size: 12px; }
  .vista-cuadricula .marcas { gap: 2px; }
}

/* Asistencia en pantalla fija: la barra y el resumen no se mueven; solo se desplaza la lista. */
.asis-listo { display: none; font-weight: 650; color: #1a7f37; margin-left: 4px; }
.asis-resumen.completo .asis-listo { display: inline; }
.asis-resumen.completo .asis-contador > span:not(.asis-listo) { display: none; }
.lista-asistencia .alumno .nombre, .lista-asistencia .alumno .n { cursor: default; }
.lista-asistencia .alumno:not(.marcado) .nombre, .lista-asistencia .alumno:not(.marcado) .n { cursor: pointer; }
.enfoque-fijo { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.enfoque-fijo .enfoque-barra { flex: none; position: relative; }
.enfoque-fijo .enfoque-cuerpo { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px 24px 0; }
.enfoque-fijo .asis-intro { flex: none; margin-bottom: 10px; }
.enfoque-fijo .lista-asistencia { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.enfoque-fijo .asis-resumen { position: relative; top: auto; flex: none; margin-bottom: 0; }
.enfoque-fijo .asis-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 10px -8px 0; padding: 2px 8px 28px; scroll-padding: 8px; }
.asis-quitar { gap: 4px; }
.enfoque-fijo .asis-teclado { margin: 18px 0 0; }
@media (max-width: 600px) {
  .asis-txt-largo { display: none; }
  .enfoque-fijo .enfoque-barra { flex-wrap: wrap; padding: 8px 12px; gap: 2px 8px; }
  .enfoque-fijo .enfoque-barra .btn-volver { font-size: 0; padding: 6px 2px; }
  .enfoque-fijo .enfoque-barra .titulo { flex: 1; min-width: 0; font-size: 15px; line-height: 1.25; }
  .enfoque-fijo .enfoque-barra .titulo, .enfoque-fijo .enfoque-barra .titulo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .enfoque-fijo .enfoque-barra .titulo small { font-size: 12px; }
  .enfoque-fijo .enfoque-barra .espacio, .enfoque-fijo .enfoque-barra .centro-compacta { display: none; }
  .enfoque-fijo .enfoque-barra form input[type=date] { height: 34px; padding: 0 8px; font-size: 13px; max-width: 132px; }
  .enfoque-fijo .estado-guardado { order: 9; flex-basis: 100%; min-width: 0; justify-content: flex-start; font-size: 11px; padding-left: 30px; }
  .enfoque-fijo .enfoque-cuerpo { padding: 8px 10px 0; }
  .enfoque-fijo .asis-resumen { padding: 10px 12px; gap: 8px 10px; }
  .enfoque-fijo .asis-acciones { grid-column: 2; grid-row: 1; }
  .enfoque-fijo .asis-acciones .asis-todos { flex: none; }
  .enfoque-fijo .asis-filtros { grid-row: 2; padding-top: 8px; }
  .enfoque-fijo .asis-herramientas { grid-row: 3; }
  .enfoque-fijo .asis-buscar input { height: 32px; }
  .enfoque-fijo .asis-scroll { margin: 8px -10px 0; padding: 2px 10px 24px; }
}

/* ---------- Diseño del boletín (Ajustes) ---------- */
.disenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.contenedor > .disenos .tarjeta + .tarjeta, .disenos > .tarjeta + .tarjeta { margin-top: 0; }
.diseno { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.diseno.en-uso { box-shadow: 0 0 0 2px var(--azul), var(--sombra); }
.diseno-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.diseno-info h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.diseno-info p { font-size: 14px; flex: 1; }
.diseno-acciones { margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.diseno-acciones form { margin: 0; }
.diseno-activo { font-size: 14px; font-weight: 600; color: var(--verde); }
/* Miniatura: una hoja con los rasgos de cada diseño. */
.bmini { --p: #1d3a9e; --p2: #14287a; --suave: #f5f5f7; --k: #f5f5f7; --borde: transparent; --r: 3px;
  background: linear-gradient(180deg, #eef0f5, #e4e7ee); padding: 20px 34px 0; height: 200px; overflow: hidden; }
.bm-hoja { background: #fff; height: 100%; border-radius: 4px 4px 0 0; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 0 14px; box-sizing: border-box; }
.bm-franja { height: 5px; background: var(--p); margin: 0 -14px 10px; border-radius: 4px 4px 0 0; }
.bm-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bm-logo { width: 20px; height: 20px; border-radius: 5px; background: var(--p); flex: none; }
.bm-lineas { display: grid; gap: 3px; flex: 1; }
.bm-lineas i, .bm-lineas b { display: block; height: 3px; border-radius: 2px; background: #c7c7cc; width: 45%; }
.bm-lineas b { height: 6px; background: var(--p); width: 75%; }
.bm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 9px; }
.bm-kpis i { height: 16px; background: var(--k); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--borde); }
.bm-tabla { display: grid; gap: 0; }
.bm-tabla span { height: 9px; border-bottom: 1px solid #ececf0; }
.bm-tabla span:nth-child(odd):not(.bm-th) { background: var(--suave); }
.bm-tabla .bm-th { height: 10px; background: var(--p); border: 0; border-radius: 1px; }
.bm-firmas { display: flex; justify-content: space-around; margin-top: 16px; }
.bm-firmas i { width: 30%; height: 1px; background: #8e8e93; }
.bmini-clasico { --p: #1b2a4a; --suave: #f7f6f2; --k: #fff; --borde: #1b2a4a; --r: 0; }
.bmini-clasico .bm-hoja { outline: 3px double #1b2a4a; outline-offset: -7px; padding: 10px 18px 0; }
.bmini-clasico .bm-franja { display: none; }
.bmini-clasico .bm-cab { flex-direction: column; gap: 4px; }
.bmini-clasico .bm-logo { border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #1b2a4a; }
.bmini-clasico .bm-lineas { justify-items: center; width: 100%; }
.bmini-clasico .bm-lineas b { background: #7a1f2b; width: 55%; }
.bmini-clasico .bm-tabla span { border: 1px solid #c3c6cc; border-top: 0; }
.bmini-sencillo { --p: #000; --suave: #fff; --k: #fff; --borde: #000; --r: 0; }
.bmini-sencillo .bm-franja { height: 0; border-top: 1.5px solid #000; border-radius: 0; }
.bmini-sencillo .bm-logo { background: #fff; box-shadow: inset 0 0 0 1.5px #000; border-radius: 0; }
.bmini-sencillo .bm-tabla .bm-th { background: #fff; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; }
.bmini-colorido { --p: #0f9d8a; --suave: #f5fbfa; --r: 6px; }
.bmini-colorido .bm-franja { height: 6px; background: linear-gradient(90deg, #0f9d8a 25%, #ffb300 25% 50%, #ff6b4a 50% 75%, #7c4dff 75%); }
.bmini-colorido .bm-logo { background: #ff6b4a; border-radius: 50%; }
.bmini-colorido .bm-kpis i:nth-child(1) { background: #e8f7f4; } .bmini-colorido .bm-kpis i:nth-child(2) { background: #fff1ec; }
.bmini-colorido .bm-kpis i:nth-child(3) { background: #f1ecff; } .bmini-colorido .bm-kpis i:nth-child(4) { background: #fff6dc; }
.bmini-elegante { --p: #0e4d3c; --suave: #f6f8f7; --k: #fff; --r: 0; }
.bmini-elegante .bm-franja { height: 2px; border-top: 5px solid #0e4d3c; background: #b08d3c; border-radius: 0; }
.bmini-elegante .bm-logo { border-radius: 0; box-shadow: 0 0 0 1.5px #b08d3c; }
.bmini-elegante .bm-lineas i:first-child { background: #b08d3c; }
.bmini-elegante .bm-lineas b { height: 4px; }
.bmini-elegante .bm-kpis i { box-shadow: inset 0 2px 0 #0e4d3c, inset 0 0 0 1px #eceef0; }
@media (max-width: 600px) { .disenos { grid-template-columns: 1fr; } .bmini { height: 170px; padding: 16px 40px 0; } }
.asis-acciones .btn { gap: 5px; }

/* ---------- Elegir clase (asistencia y calificaciones) ---------- */
.elegir-hoy { display: flex; align-items: center; gap: 24px; padding: 18px 22px; margin-bottom: 18px; }
.elegir-hoy-fecha { display: flex; align-items: center; gap: 12px; flex: none; padding-right: 24px; border-right: 1px solid var(--linea-suave); }
.elegir-hoy-fecha strong { display: block; font-size: 15px; }
.elegir-hoy-fecha small { color: var(--secundario); font-size: 13px; }
.elegir-hoy-dia { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--azul-suave); color: var(--marino); font-size: 21px; font-weight: 750; }
.elegir-hoy-avance { flex: 1; min-width: 0; display: grid; gap: 8px; }
.elegir-hoy-texto { font-size: 15px; }
.elegir-hoy-texto strong { font-size: 17px; }
.elegir-hoy.completo .elegir-hoy-texto strong { color: var(--verde); }
.elegir-hoy.completo .barra-progreso span { background: var(--verde); }
.elegir-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.contenedor .elegir-secciones > .tarjeta + .tarjeta, .elegir-secciones > .tarjeta + .tarjeta { margin-top: 0; }
.elegir-grupo { padding: 0; overflow: hidden; }
.elegir-grupo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea-suave); }
.elegir-grupo-cab h2 { font-size: 17px; margin: 0; }
.elegir-grupo-cab small { display: block; font-size: 13px; margin-top: 1px; }
.elegir-sello { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--marino); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.05; text-align: center; flex: none; }
.elegir-sello b { display: block; font-size: 17px; font-weight: 750; }
.elegir-lista { list-style: none; margin: 0; padding: 4px 0; }
.elegir-lista li + li { border-top: 1px solid var(--linea-suave); }
.elegir-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 12px 18px; color: inherit; transition: background .12s; }
.elegir-fila:hover { background: var(--fondo); text-decoration: none; }
.elegir-fila:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.elegir-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color); }
.elegir-nombre { display: grid; gap: 2px; min-width: 0; }
.elegir-nombre strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elegir-nombre small { font-size: 12.5px; }
.elegir-conteo { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--secundario); }
.elegir-conteo .c-A { color: #c4001a; font-weight: 600; } .elegir-conteo .c-T { color: #b25000; font-weight: 600; }
.elegir-ir { font-size: 14px; font-weight: 600; color: var(--azul); white-space: nowrap; }
.elegir-fila.tomada .elegir-ir { color: var(--secundario); font-weight: 500; }
@media (max-width: 600px) {
  .elegir-hoy { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .elegir-hoy-fecha { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--linea-suave); }
  .elegir-secciones { grid-template-columns: 1fr; }
  .elegir-fila { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 16px; }
  .elegir-fila .insignia { display: none; }
}

/* ---------- Tarjeta del usuario en el menú ---------- */
.usuario-chip-menu { gap: 11px; padding: 10px 12px; border: 1px solid var(--linea-suave); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.avatar-marca { width: 38px; height: 38px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--marino), var(--azul)); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3.5px #d6dcf3; }
.usuario-datos { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.usuario-datos strong { font-size: 14px; font-weight: 650; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.usuario-rol { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .02em; background: var(--azul-suave); color: var(--marino); }
.usuario-rol.rol-director { background: #fff1e6; color: #b8460c; }
.usuario-rol.rol-docente { background: #e6f6ee; color: #146c3c; }
.usuario-rol.rol-secretaria { background: #f1ecff; color: #5b34d6; }
.usuario-rol.rol-orientador { background: #e3f4fb; color: #0b6a8a; }

/* ---------- Asistencia: diseño profesional ---------- */
/* Barra: cambiar de día con flechas, fecha y estado del guardado. */
.fecha-nav { display: flex; align-items: center; gap: 4px; }
.fecha-nav form { margin: 0; }
.fecha-nav input[type=date] { height: 36px; padding: 0 10px; font-size: 14px; width: auto; border-radius: 10px; }
.fecha-paso { display: grid; place-items: center; width: 34px; height: 36px; border-radius: 10px; color: var(--secundario); }
.fecha-paso svg { width: 16px; height: 16px; }
a.fecha-paso:hover { background: var(--fondo); color: var(--texto); text-decoration: none; }
span.fecha-paso { opacity: .3; }
.fecha-sig svg { transform: scaleX(-1); }
.fecha-hoy { margin-left: 4px; padding: 6px 12px; border-radius: 999px; background: var(--azul-suave); color: var(--marino); font-size: 13px; font-weight: 600; }
.fecha-hoy:hover { text-decoration: none; background: #dfe5f8; }
.enfoque-fijo .estado-guardado { padding: 6px 12px; border-radius: 999px; background: var(--fondo); min-width: 0; font-size: 12.5px; }
.enfoque-fijo .estado-guardado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.enfoque-fijo .estado-guardado.guardando::before { background: var(--azul); }
.enfoque-fijo .estado-guardado.error::before { background: var(--rojo); }

/* Resumen: anillo de avance, contadores por estado (también filtran) y herramientas. */
.asis-resumen { border: 1px solid var(--linea-suave); box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 14px 18px; }
.asis-avance { display: flex; align-items: center; gap: 12px; }
.asis-anillo { --c: var(--azul); width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--pct, 0) * 1%), var(--fondo) 0); transition: background .3s; }
.asis-anillo span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--superficie); font-size: 11px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.asis-resumen.completo .asis-anillo { --c: #34c759; }
.asis-contador { display: grid; gap: 2px; white-space: normal; }
.asis-contador b { font-size: 20px; }
.asis-contador small { font-size: 12.5px; color: var(--terciario); }
.asis-filtros { gap: 6px; }
.asis-chip { display: grid; grid-template-columns: auto auto; grid-template-areas: "b n" "b l"; align-items: center; column-gap: 8px; row-gap: 0;
  padding: 6px 12px 6px 7px; border-radius: 10px; border: 1px solid var(--linea-suave); background: var(--superficie); text-align: left; }
.asis-chip b { grid-area: b; width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; }
.asis-chip i { grid-area: n; font-size: 15px; line-height: 1.1; }
.asis-chip .asis-chip-txt { grid-area: l; font-size: 11.5px; color: var(--terciario); line-height: 1.2; }
.asis-chip:hover { background: var(--fondo); }
.asis-chip[aria-pressed=true] { background: var(--azul-suave); border-color: #b9c5ee; box-shadow: none; }
.asis-chip.cero:not([aria-pressed=true]) { opacity: .55; }
.asis-chip.cero:not([aria-pressed=true]) b { filter: grayscale(.6); }

/* Tarjetas: número en círculo con el color de la marca y botones P·A·T·E·R unidos. */
.lista-asistencia.vista-cuadricula .alumno { border: 1px solid var(--linea-suave); box-shadow: 0 1px 2px rgba(0,0,0,.04); background: var(--superficie); padding: 11px 11px 10px; gap: 9px; }
.lista-asistencia.vista-cuadricula .alumno:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.vista-cuadricula .alumno[data-estado=P], .vista-cuadricula .alumno[data-estado=A], .vista-cuadricula .alumno[data-estado=T],
.vista-cuadricula .alumno[data-estado=E], .vista-cuadricula .alumno[data-estado=R] { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.vista-cuadricula .alumno[data-estado=P] { background: var(--superficie); border-color: #cdebd6; }
.vista-cuadricula .alumno[data-estado=A] { background: #fffafa; border-color: #ffd0cc; }
.vista-cuadricula .alumno[data-estado=T] { background: #fffcf6; border-color: #ffe0b2; }
.vista-cuadricula .alumno[data-estado=E] { background: #f8fbff; border-color: #c7dfff; }
.vista-cuadricula .alumno[data-estado=R] { background: #fafafa; border-color: #dcdce0; }
.lista-asistencia .alumno .n { display: inline-grid; place-items: center; width: 26px; min-width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: var(--fondo); color: var(--secundario); font-size: 11.5px; font-weight: 650; text-align: center; transition: background .15s, color .15s; }
.lista-asistencia .alumno[data-estado=P] .n { background: #34c759; color: #fff; }
.lista-asistencia .alumno[data-estado=A] .n { background: #ff3b30; color: #fff; }
.lista-asistencia .alumno[data-estado=T] .n { background: #ff9f0a; color: #fff; }
.lista-asistencia .alumno[data-estado=E] .n { background: #0a84ff; color: #fff; }
.lista-asistencia .alumno[data-estado=R] .n { background: #8e8e93; color: #fff; }
.vista-cuadricula .alumno .nombre { padding-top: 3px; font-weight: 550; }
.lista-asistencia .marcas { display: flex; gap: 0; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; background: var(--superficie); }
.vista-cuadricula .marcas { display: grid; gap: 0; }
.lista-asistencia .marca-btn, .lista-asistencia.vista-cuadricula .marca-btn { border-radius: 0; box-shadow: none; background: transparent; color: var(--secundario); font-weight: 600; }
.lista-asistencia .marca-btn + .marca-btn { border-left: 1px solid var(--linea-suave); }
.lista-asistencia .marca-btn:hover { background: var(--fondo); color: var(--texto); box-shadow: none; }
.lista-asistencia .alumno.marcado .marca-btn:not(.sel) { color: #b4b4ba; }
.lista-asistencia .alumno.marcado .marca-btn:not(.sel):hover { box-shadow: none; }
.lista-asistencia .marca-btn.sel[data-v=P] { background: #34c759; color: #fff; }
.lista-asistencia .marca-btn.sel[data-v=A] { background: #ff3b30; color: #fff; }
.lista-asistencia .marca-btn.sel[data-v=T] { background: #ff9f0a; color: #fff; }
.lista-asistencia .marca-btn.sel[data-v=E] { background: #0a84ff; color: #fff; }
.lista-asistencia .marca-btn.sel[data-v=R] { background: #8e8e93; color: #fff; }
.lista-asistencia.vista-lista .alumnos { background: var(--superficie); border: 1px solid var(--linea-suave); border-radius: 14px; overflow: hidden; }
.lista-asistencia.vista-lista .alumno { padding: 8px 14px; }
.lista-asistencia.vista-lista .marca-btn { width: 40px; height: 34px; }
@media (max-width: 600px) {
  .enfoque-fijo .fecha-nav { gap: 0; }
  .enfoque-fijo .fecha-paso { width: 28px; height: 34px; }
  .enfoque-fijo .fecha-hoy { display: none; }
  .enfoque-fijo .estado-guardado { padding: 0 0 0 30px; background: none; }
  .enfoque-fijo .estado-guardado::before { width: 6px; height: 6px; }
  .asis-anillo { width: 38px; height: 38px; } .asis-anillo span { width: 30px; height: 30px; font-size: 10px; }
  .asis-contador small { display: none; }
  .asis-contador b { font-size: 18px; }
  .asis-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .asis-chip { grid-template-columns: 1fr; grid-template-areas: "b" "n"; justify-items: center; padding: 5px 2px; row-gap: 3px; }
  .asis-chip b { width: 20px; height: 20px; font-size: 10.5px; }
  .asis-chip i { font-size: 13px; }
  .lista-asistencia.vista-lista .alumno { padding: 8px 10px; }
  .lista-asistencia.vista-lista .marca-btn { width: 32px; height: 36px; }
}


/* ---------- Reportes ---------- */
.rep-barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px; margin-bottom: 18px; }
.rep-secciones { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.rep-secciones .segmentado { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.rep-secciones .segmentado a { white-space: nowrap; }
.rep-etiqueta { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--terciario); flex: none; }
.rep-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13.5px; color: var(--secundario); }
.rep-datos strong { color: var(--texto); }
.rep-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.rep-principal { display: grid; gap: 16px; }
.contenedor .rep-principal > .tarjeta + .tarjeta, .rep-principal > .tarjeta + .tarjeta, .rep-lateral > .tarjeta + .tarjeta { margin-top: 0; }
.rep-grupo { padding: 0; overflow: hidden; }
.rep-grupo-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid var(--linea-suave); background: var(--fondo); }
.rep-grupo-cab h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--secundario); margin: 0; }
.rep-grupo-cab .ter { font-size: 13px; }
.rep-asignatura { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--secundario); }
.rep-asignatura select { height: 34px; padding: 0 30px 0 10px; font-size: 14px; min-width: 200px; width: auto; }
.rep-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 20px; margin: 0; }
.rep-doc + .rep-doc { border-top: 1px solid var(--linea-suave); }
.rep-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--azul-suave); color: var(--marino); }
.rep-icono svg { width: 19px; height: 19px; }
.rep-info { min-width: 0; }
.rep-info h3 { font-size: 15px; margin: 0; }
.rep-info p { margin: 2px 0 0; font-size: 13px; color: var(--secundario); line-height: 1.4; }
.rep-boletin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.rep-boletin select { height: 34px; font-size: 14px; width: auto; max-width: 100%; padding: 0 30px 0 10px; }
.rep-enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.rep-acciones { display: flex; align-items: center; gap: 6px; }
.rep-acciones .btn svg { width: 15px; height: 15px; }
.rep-imprimir { padding-left: 10px; padding-right: 10px; }
.rep-estado { grid-column: 2 / -1; }
.rep-estado:has(> [hidden] + [hidden]) { display: none; }
.rep-lateral { display: grid; gap: 16px; position: sticky; top: 20px; }
.rep-panel { padding: 18px 20px; }
.rep-panel h2 { font-size: 16px; margin: 0; }
.rep-panel > p.ter { font-size: 13px; margin: 4px 0 0; line-height: 1.45; }
.rep-panel .btn svg { width: 15px; height: 15px; }
.rep-vacio { font-size: 13.5px; color: var(--terciario); margin: 14px 0 2px; }
.rep-recientes { list-style: none; margin: 10px 0 0; padding: 0; }
.rep-recientes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.rep-reciente-info { display: grid; min-width: 0; }
.rep-reciente-info strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-reciente-info small { font-size: 12px; color: var(--terciario); }
.rep-reciente-estado { display: flex; align-items: center; gap: 6px; flex: none; }
.rep-reciente-estado .progreso-doc { min-width: 110px; }
.rep-bajar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--azul); }
.rep-bajar:hover { background: var(--azul-suave); }
.rep-bajar svg { width: 16px; height: 16px; }
.rep-nota { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; margin: 0 4px; }
.rep-nota svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
@media (max-width: 1180px) { .rep-cuerpo { grid-template-columns: 1fr; } .rep-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } }
@media (max-width: 600px) {
  .rep-barra { padding: 10px 12px; }
  .rep-etiqueta { display: none; }
  .rep-grupo-cab, .rep-doc { padding-left: 14px; padding-right: 14px; }
  .rep-asignatura { width: 100%; } .rep-asignatura select { flex: 1; min-width: 0; }
  .rep-doc { grid-template-columns: auto minmax(0, 1fr); }
  .rep-acciones { grid-column: 1 / -1; padding-left: 52px; }
  .rep-estado { grid-column: 1 / -1; }
  .rep-boletin select { width: 100%; }
}

/* ---------- Panel del docente: mis secciones como titular ---------- */
.titular-cab { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.titular-cab h2 { font-size: 19px; margin: 0; }
.titular-cab p { font-size: 14px; margin-top: 3px; }
.titular-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.titular-secciones > .tarjeta + .tarjeta { margin-top: 0; }
.titular-sec { display: grid; gap: 14px; padding: 18px; }
.titular-sec-cab { display: flex; align-items: center; gap: 12px; }
.titular-sec-cab h3 { font-size: 17px; margin: 0; }
.titular-sec-cab small { font-size: 13px; }
.titular-estado { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 7px; border-radius: 12px; background: var(--fondo); font-size: 13.5px; color: var(--texto); }
.titular-estado li { display: flex; align-items: center; gap: 8px; }
.titular-estado li span { width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; flex: none; }
.titular-estado li.ok span { background: #34c759; }
.titular-estado li.alerta { color: #a1000f; font-weight: 600; }
.titular-estado li.alerta span { background: #ff3b30; }
.titular-diaria { width: 100%; justify-content: center; }
.titular-diaria svg { width: 16px; height: 16px; }
.titular-links { display: grid; border-top: 1px solid var(--linea-suave); margin: 0 -18px -18px; }
.titular-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 18px; font-size: 14px; color: var(--texto); }
.titular-links a + a { border-top: 1px solid var(--linea-suave); }
.titular-links a:hover { background: var(--fondo); text-decoration: none; color: var(--azul); }
.titular-links svg { width: 17px; height: 17px; color: var(--secundario); }
.titular-links i { font-style: normal; font-size: 18px; color: var(--terciario); }
@media (max-width: 600px) { .titular-secciones { grid-template-columns: 1fr; } }

/* ---------- Mi registro (docente): avance, reportes, estudiantes ---------- */
.mr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mr-kpi { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-suave); box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; overflow: hidden; }
.mr-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--linea); }
.mr-kpi.verde::before { background: #34c759; } .mr-kpi.naranja::before { background: #ff9f0a; } .mr-kpi.rojo::before { background: #ff3b30; }
.mr-kpi > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--terciario); }
.mr-kpi strong { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.mr-kpi strong small { font-size: 14px; font-weight: 500; color: var(--secundario); }
.mr-kpi > small { font-size: 12.5px; color: var(--secundario); }
.mr-faltas { margin-bottom: 16px; }
.mr-faltas h2 { font-size: 17px; margin: 0 0 4px; }
.mr-faltas ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mr-faltas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.mr-faltas li strong { display: block; font-size: 14.5px; font-weight: 600; }
.mr-faltas li small { font-size: 12.5px; color: var(--secundario); }
.mr-falta-punto { width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; }
.mr-clases { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.contenedor .mr-clases > .tarjeta + .tarjeta, .mr-clases > .tarjeta + .tarjeta, .mr-elegir > .tarjeta + .tarjeta { margin-top: 0; }
.mr-clase { padding: 0; overflow: hidden; }
.mr-clase header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea-suave); }
.mr-clase header h3 { font-size: 15.5px; margin: 0; }
.mr-clase header small { font-size: 12.5px; }
.mr-fila { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 18px 0; }
.mr-etq { font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.mr-valor { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mr-nota { margin: 4px 18px 0 140px; font-size: 12px; color: var(--terciario); }
.mr-barra { height: 7px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.mr-barra span { display: block; height: 100%; border-radius: inherit; background: var(--azul); }
.mr-barra.verde span { background: #34c759; } .mr-barra.naranja span { background: #ff9f0a; } .mr-barra.rojo span { background: #ff3b30; }
.mr-periodos { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.mr-p { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 4px 7px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--secundario); background: var(--fondo); }
.mr-p b { font-size: 12px; color: var(--texto); font-variant-numeric: tabular-nums; }
.mr-p.verde { background: #e8f7ed; } .mr-p.verde b { color: #1a7f37; }
.mr-p.naranja { background: #fff4e5; } .mr-p.naranja b { color: #b25000; }
.mr-p.rojo { background: #ffeceb; } .mr-p.rojo b { color: #c4001a; }
.mr-p.actual { box-shadow: inset 0 0 0 1.5px var(--azul); }
.mr-clase footer { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; padding: 11px 18px; border-top: 1px solid var(--linea-suave); background: var(--fondo); font-size: 13px; }
.rep-grupo-cab h2 .elegir-punto { display: inline-block; vertical-align: middle; margin-right: 4px; }
.mr-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mr-elegir-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: inherit; transition: transform .15s, box-shadow .15s; }
.mr-elegir-item:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.mr-elegir-texto { flex: 1; display: grid; }
.mr-elegir-texto strong { font-size: 16px; }
.mr-elegir-texto small { font-size: 13px; color: var(--secundario); }
.mr-elegir-ir { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--azul); }
.mr-elegir-ir svg { width: 16px; height: 16px; }
.mr-estudiantes { padding: 0; overflow: hidden; }
.mr-est-cab, .mr-est { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) 100px; align-items: center; gap: 12px; padding: 11px 18px; }
.mr-est-cab { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--terciario); background: var(--fondo); border-bottom: 1px solid var(--linea-suave); }
.mr-estudiantes ul { list-style: none; margin: 0; padding: 0; }
.mr-est + .mr-est { border-top: 1px solid var(--linea-suave); }
.mr-est.riesgo { background: #fffafa; }
.mr-est-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fondo); font-size: 12px; font-weight: 650; color: var(--secundario); }
.mr-est.riesgo .mr-est-n { background: #ffe2e0; color: #c4001a; }
.mr-est-nombre { display: grid; gap: 4px; min-width: 0; }
.mr-est-nombre strong { font-size: 14.5px; font-weight: 600; }
.mr-est-nombre .riesgo-motivos { display: flex; flex-wrap: wrap; gap: 4px; }
.mr-est-asis { display: grid; gap: 4px; font-size: 12.5px; color: var(--secundario); }
.mr-est-asis b { color: var(--texto); }
.mr-est-fam { display: grid; min-width: 0; }
.mr-est-fam strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-est-fam small { font-size: 12px; color: var(--secundario); }
.mr-est-acc { text-align: right; }
@media (max-width: 1000px) { .mr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mr-est-cab { display: none; }
  .mr-est { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "n nombre acc" ". asis asis" ". fam fam"; gap: 6px 10px; padding: 12px 14px; }
  .mr-est-n { grid-area: n; } .mr-est-nombre { grid-area: nombre; } .mr-est-asis { grid-area: asis; } .mr-est-fam { grid-area: fam; } .mr-est-acc { grid-area: acc; }
}
@media (max-width: 600px) {
  .mr-kpis { gap: 8px; } .mr-kpi { padding: 12px; } .mr-kpi strong { font-size: 20px; }
  .mr-clases { grid-template-columns: 1fr; }
  .mr-fila { grid-template-columns: 92px minmax(0, 1fr) auto; padding: 10px 14px 0; }
  .mr-nota { margin-left: 116px; }
  .mr-faltas li { grid-template-columns: auto minmax(0, 1fr); }
  .mr-faltas li .btn { grid-column: 2; justify-self: start; }
}
.mr-p.futuro { background: transparent; box-shadow: inset 0 0 0 1px var(--linea-suave); color: var(--terciario); }
.mr-p.futuro b { color: var(--terciario); }

/* Calificaciones: pantalla fija con barra de avance, filtros y pie compacto */
.enfoque-fijo .cal-pantalla { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.cal-barra { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); }
.cal-fila1, .cal-fila2 { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.cal-fila2 { padding-top: 10px; border-top: 1px solid var(--linea-suave); }
.cal-periodos { display: flex; gap: 4px; padding: 3px; background: var(--fondo); border-radius: 12px; }
.cal-periodos a { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 8px; min-width: 84px; padding: 6px 10px; border-radius: 9px; color: var(--secundario); text-decoration: none; font-size: 13px; }
.cal-periodos a:hover { background: rgba(255,255,255,.6); }
.cal-periodos a.activo { background: #fff; color: var(--marino); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cal-p-nombre { font-weight: 700; white-space: nowrap; }
.cal-p-nombre span { font-size: 11px; }
.cal-periodos small { justify-self: end; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--terciario); }
.cal-p-barra { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.cal-p-barra i { display: block; height: 100%; border-radius: inherit; background: var(--azul); }
.cal-periodos a.completo .cal-p-barra i { background: #34c759; }
.cal-enlaces { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.cal-enlaces a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--marino); text-decoration: none; }
.cal-enlaces a:hover { background: var(--azul-suave); }
.cal-enlaces svg { width: 15px; height: 15px; }
.cal-aviso { margin: 0; padding: 8px 12px; font-size: 13px; }
.cal-avance { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cal-avance .asis-contador { display: grid; gap: 1px; font-size: 13px; color: var(--secundario); }
.cal-avance .asis-contador small { font-size: 12px; }
.cal-avance .asis-contador small b { font-size: 12.5px; font-weight: 700; color: var(--texto); }
.cal-avance .asis-contador small b.baja { color: var(--rojo); }
.cal-barra.completo .asis-anillo { --c: #34c759; }
.cal-barra.completo [data-cal-llenas] { color: #1a7f37; }
.cal-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--secundario); cursor: pointer; white-space: nowrap; }
.cal-chip:hover { background: var(--fondo); }
.cal-chip i { font-style: normal; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--fondo); color: var(--texto); font-variant-numeric: tabular-nums; }
.cal-chip.rojo i { background: var(--rojo-suave); color: var(--rojo); }
.cal-chip.morado i { background: #f2ecfb; color: var(--morado); }
.cal-chip.cero:not([aria-pressed=true]) { opacity: .45; }
.cal-chip[aria-pressed=true] { background: var(--azul-suave); color: var(--marino); box-shadow: inset 0 0 0 1px #c9d3f2; }
.cal-buscar { margin-left: auto; }
.enfoque-fijo .cal-pantalla .cuadricula-envoltura { flex: 1; min-height: 0; max-height: none; background: var(--superficie); overscroll-behavior: contain; }
.cal-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--fondo); font-size: 11.5px; font-weight: 700; color: var(--secundario); font-variant-numeric: tabular-nums; vertical-align: middle; }
.cal-nombre { vertical-align: middle; }
.cuadricula td.falta-rp { box-shadow: inset 0 0 0 2px #d9c8f3; background: #faf6ff; }
.cuadricula td.falta-rp input.nota.rp { background: transparent; }
.cuadricula td.falta-rp input.nota.rp::placeholder { color: var(--morado); }
.cal-sin-resultados { flex: none; text-align: center; padding: 14px; margin: 0; font-size: 14px; color: var(--secundario); }
.cal-pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 2px 12px; font-size: 12.5px; color: var(--secundario); }
.cal-leyenda { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.cal-leyenda > span:not(.solo-movil) { display: inline-flex; align-items: center; gap: 6px; }
.cal-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.cal-muestra.baja { background: var(--rojo-suave); box-shadow: inset 0 0 0 1.5px var(--rojo); }
.cal-muestra.rp { background: #f2ecfb; box-shadow: inset 0 0 0 1.5px var(--morado); }
.cal-muestra.falta { background: #faf6ff; box-shadow: inset 0 0 0 2px #d9c8f3; }
.cal-mas { display: flex; gap: 6px; }
.cal-pop { position: relative; }
.cal-pop summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--linea); background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; }
.cal-pop summary::-webkit-details-marker { display: none; }
.cal-pop summary svg { width: 15px; height: 15px; color: var(--secundario); }
.cal-pop[open] summary { background: var(--azul-suave); border-color: #c9d3f2; color: var(--marino); }
.cal-pop-panel { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: min(520px, calc(100vw - 32px)); max-height: 55vh; overflow: auto;
  padding: 14px 16px; background: var(--superficie); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px var(--linea-suave); font-size: 13px; color: var(--secundario); }
.cal-pop-panel h3 { margin: 0; font-size: 14px; color: var(--texto); }
@media (max-width: 760px) {
  .cal-barra { padding: 10px; gap: 8px; border-radius: 14px; margin-bottom: 8px; }
  .cal-periodos { width: 100%; }
  .cal-periodos a { flex: 1; min-width: 0; padding: 5px 7px; }
  .cal-enlaces { margin-left: 0; width: 100%; }
  .cal-enlaces a { padding: 5px 8px; font-size: 12.5px; }
  .cal-fila2 { gap: 8px; }
  .cal-avance { width: 100%; }
  .cal-filtros { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cal-chip { padding: 4px 8px; font-size: 12.5px; }
  .cal-buscar { margin-left: 0; width: 100%; }
  .cal-buscar input { width: 100%; }
  .cal-barra .ver-columnas { margin-bottom: 0; }
  .cal-n { min-width: 20px; height: 20px; margin-right: 6px; font-size: 10.5px; }
  .cal-pie { padding: 8px 0 10px; }
  .cal-leyenda { display: none; }
  .cal-pie { justify-content: flex-end; }
  .cal-periodos small { display: none; }
  .cal-avance .asis-contador { white-space: normal; }
  .cal-pop-panel { right: -2px; }
}

/* Ajustes → Períodos y cierre */
.per-linea { padding: 20px 24px; }
.per-linea-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.per-linea-cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.per-linea-cab .sec { margin: 4px 0 0; font-size: 14px; }
.per-resumen { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; color: var(--secundario); }
.per-resumen b { font-size: 18px; color: var(--texto); margin-right: 3px; font-variant-numeric: tabular-nums; }
.per-hoy-txt b { color: var(--azul); }
.per-pista { position: relative; height: 40px; margin: 34px 0 6px; border-radius: 10px; background: var(--fondo); }
.per-tramo { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; border-radius: 8px; background: #dfe5f6; color: var(--marino);
  font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--superficie); overflow: hidden; }
.per-tramo.e-en_curso { background: var(--azul); color: #fff; }
.per-tramo.e-terminado { background: var(--naranja-suave); color: var(--naranja); }
.per-tramo.e-por_cerrar { background: var(--rojo-suave); color: var(--rojo); }
.per-tramo.e-cerrado { background: #e4e4e8; color: var(--secundario); }
.per-limite { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--naranja); }
.per-hoy { position: absolute; top: -26px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--texto); z-index: 2; }
.per-hoy span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--texto); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.per-escala { display: flex; justify-content: space-between; font-size: 12px; color: var(--terciario); }
.per-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-top: 20px; }
.per-tarjetas .tarjeta + .tarjeta { margin-top: 0; }
.per-tarjeta { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid transparent; }
.per-tarjeta.es-hoy { border-color: #c9d3f2; box-shadow: var(--sombra), 0 0 0 3px var(--azul-suave); }
.per-tarjeta.e-cerrado { background: #fafafb; }
.per-tarjeta header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.per-tarjeta header .insignia { justify-self: end; }
.per-tarjeta header .per-titulo { grid-column: 1 / -1; grid-row: 2; }
.per-num { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--azul-suave); color: var(--marino); font-size: 13px; font-weight: 800; padding: 0; }
.per-tarjeta.e-cerrado .per-num { background: #ececf0; color: var(--secundario); }
.per-titulo { flex: 1; min-width: 0; display: grid; }
.per-titulo h3 { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.per-titulo .sec { font-size: 13px; }
.per-datos { display: grid; gap: 8px; margin: 0; font-size: 13.5px; }
.per-datos div { display: grid; gap: 1px; }
.per-datos dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--terciario); }
.per-datos dd { margin: 0; color: var(--texto); }
.per-faltan { white-space: nowrap; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--fondo); color: var(--secundario); font-weight: 600; font-size: 11.5px; }
.per-faltan.urgente { background: var(--rojo-suave); color: var(--rojo); }
.per-avance { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.per-avance-cab { display: flex; justify-content: space-between; font-size: 13px; color: var(--secundario); }
.per-avance-cab b { color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-progreso span.ok { background: #34c759; }
.per-pend { margin: 0; font-size: 12.5px; }
.per-accion { margin-top: auto; }
.per-accion .btn { width: 100%; justify-content: center; }
.per-editar .tarjeta-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.per-errores { margin: 0; padding-left: 18px; }
.per-anio { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.per-anio label, .per-fila label { min-width: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--secundario); margin: 0; }
.per-anio label { width: 190px; }
.per-filas { display: grid; gap: 8px; }
.per-fila { display: grid; grid-template-columns: 36px minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(0, .9fr) 64px; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--fondo); }
.per-fila label > span { display: none; }
.per-fila-cab { background: none; padding-block: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--terciario); }
.per-fila .control { background: var(--superficie); width: 100%; min-width: 0; box-sizing: border-box; padding-inline: 10px; }
.per-anio .control { width: 100%; box-sizing: border-box; }
.per-fila .control.invalido { box-shadow: 0 0 0 2px var(--rojo); }
.per-fila .check.per-auto { display: flex; font-weight: 500; color: var(--texto); }
.per-fila .check.per-auto span { display: inline; }
.per-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; }
.per-pie .sec { margin: 0; max-width: 70ch; font-size: 13px; }
@media (max-width: 1100px) {
  .per-fila-cab { display: none; }
  .per-fila { grid-template-columns: 1fr 1fr; padding: 12px; }
  .per-fila > .per-num { grid-column: 1 / -1; }
  .per-fila label > span { display: inline; }
  .per-fila label:first-of-type, .per-fila .per-auto { grid-column: 1 / -1; }
  .per-anio label { flex: 1; width: auto; min-width: 0; }
  .per-anio { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .per-linea { padding: 16px; }
  .per-tramo span { font-size: 10.5px; }
}

/* Calificaciones: fecha límite del período */
.cal-limite { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--fondo); font-size: 12.5px; color: var(--secundario); white-space: nowrap; }
.cal-limite b { color: var(--texto); }
.cal-limite.urgente { background: var(--rojo-suave); color: var(--rojo); }
.cal-limite.urgente b { color: var(--rojo); }
.cal-limite svg { width: 14px; height: 14px; }

/* Períodos: «Ahora», pendientes por docente y calendario plegable */
.per-ahora { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-suave); }
.per-ahora-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); }
.per-ahora-item > div { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.per-ahora-item .sec { font-size: 13px; }
.per-ahora-item.alerta { background: var(--rojo-suave); }
.per-ahora-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-weight: 800; }
.per-ahora-ico svg { width: 17px; height: 17px; }
.per-ahora-ico.azul { background: var(--azul-suave); color: var(--azul); }
.per-ahora-ico.naranja { background: var(--naranja-suave); color: var(--naranja); }
.per-ahora-ico.rojo { background: var(--rojo); color: #fff; }
.per-futuro { border-top: 1px dashed var(--linea); }
.per-futuro .sec { margin: 0; font-size: 13px; }
.per-pendientes summary { cursor: pointer; font-size: 12.5px; color: var(--secundario); list-style: none; display: flex; align-items: center; gap: 6px; }
.per-pendientes summary::-webkit-details-marker { display: none; }
.per-pendientes summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.per-pendientes[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.per-pendientes summary:hover { color: var(--marino); }
.per-pendientes ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; font-size: 12.5px; }
.per-pendientes li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--fondo); }
.per-doc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.per-doc-pct { flex: none; color: var(--secundario); font-variant-numeric: tabular-nums; }
.per-pendientes form { margin-top: 8px; }
.per-pendientes form .btn { width: 100%; justify-content: center; }
.per-avisados { margin: 8px 0 0; font-size: 12px; }
details.per-editar > summary { list-style: none; cursor: pointer; margin: 0; }
details.per-editar > summary::-webkit-details-marker { display: none; }
details.per-editar[open] > summary { margin-bottom: 16px; }
.per-editar-titulo { display: flex; align-items: center; gap: 12px; }
.per-editar-titulo > svg { width: 20px; height: 20px; color: var(--secundario); flex: none; }
.per-editar-titulo > span { display: grid; gap: 2px; }
.per-editar-titulo small { font-size: 13px; font-weight: 400; }
.per-editar-flecha { width: 9px; height: 9px; border-right: 2px solid var(--secundario); border-bottom: 2px solid var(--secundario); transform: rotate(45deg); transition: transform .15s; margin-right: 6px; }
details.per-editar[open] .per-editar-flecha { transform: rotate(-135deg); }
.per-sugerir { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px; background: var(--azul-suave); }
.per-sugerir .sec { margin: 0; font-size: 13px; }
.per-dias { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
@media (max-width: 1100px) {
  .per-dias { grid-column: 1 / -1; text-align: left; font-weight: 600; font-size: 12.5px; color: var(--secundario); }
  .per-dias::after { content: " días de clase"; font-weight: 400; }
}
@media (max-width: 600px) {
  .per-ahora-item { flex-wrap: wrap; }
  .per-ahora-item form { width: 100%; }
  .per-ahora-item form .btn { width: 100%; justify-content: center; }
}
.per-tarjeta > *, .per-avance > *, .per-pendientes ul, .per-pendientes li { min-width: 0; }
.per-avance { grid-template-columns: minmax(0, 1fr); }
.per-pendientes li { align-items: baseline; }
.per-pendientes li { display: grid; gap: 1px; padding: 6px 9px; }
.per-doc { white-space: normal; font-weight: 500; }
.per-doc-pct { font-size: 11.5px; }

/* =========================================================
   Asistencia · diseño con color de la marca (lista diaria y lista por clase)
   ========================================================= */
.asis-intro { display: flex; align-items: center; gap: 10px; max-width: 1120px; padding: 10px 14px; border-radius: 12px;
  background: var(--azul-suave); color: var(--marino); font-size: 13.5px; border: 1px solid #d5ddf5; }
.asis-intro::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul); color: #fff; font: 700 12px/1 Georgia, serif; }

/* Banda de resumen: degradado institucional, avance en blanco y contadores como fichas. */
.lista-asistencia .asis-resumen { position: relative; overflow: hidden; border: 0; border-radius: 18px; padding: 16px 20px;
  background: linear-gradient(120deg, var(--marino) 0%, var(--azul) 60%, #2a5fd0 100%); color: #fff;
  box-shadow: 0 10px 30px -12px rgba(20,40,122,.55); }
.lista-asistencia .asis-resumen::after { content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  border: 22px solid rgba(247,162,27,.22); pointer-events: none; }
.lista-asistencia .asis-resumen > * { position: relative; z-index: 1; }
.lista-asistencia .asis-anillo { --c: #f7a21b; width: 54px; height: 54px; background: conic-gradient(var(--c) calc(var(--pct, 0) * 1%), rgba(255,255,255,.18) 0); }
.lista-asistencia .asis-anillo span { width: 42px; height: 42px; background: var(--marino); color: #fff; font-size: 12px; }
.lista-asistencia .asis-resumen.completo .asis-anillo { --c: #4cd964; }
.lista-asistencia .asis-contador b { color: #fff; font-size: 24px; }
.lista-asistencia .asis-contador span { color: #fff; font-weight: 600; font-size: 14px; }
.lista-asistencia .asis-contador small { color: #fff; opacity: .92; font-size: 13px; }
.lista-asistencia .asis-resumen.completo .asis-contador b, .lista-asistencia .asis-listo { color: #8ef0a5; }
.lista-asistencia .asis-todos { background: #f7a21b; color: #1d1d1f; font-weight: 700; box-shadow: 0 4px 12px -4px rgba(247,162,27,.7); }
.lista-asistencia .asis-todos:hover { background: #ffb43d; }
.lista-asistencia .asis-todos:disabled { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.lista-asistencia .asis-quitar { color: #fff; font-weight: 600; }
.lista-asistencia .asis-quitar:not(:disabled):hover { background: rgba(255,255,255,.14); color: #fff; }
.lista-asistencia .asis-filtros, .lista-asistencia .asis-herramientas { border-top-color: rgba(255,255,255,.16); }
.lista-asistencia .asis-filtros { gap: 6px; }
.lista-asistencia .asis-chip { padding: 5px 12px 5px 5px; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; font-size: 13.5px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.lista-asistencia .asis-chip:hover { background: rgba(255,255,255,.18); }
.lista-asistencia .asis-chip i { color: #fff; font-size: 15px; font-weight: 800; }
.lista-asistencia .asis-chip b { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.lista-asistencia .asis-chip b { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
.lista-asistencia .asis-chip-pend b { background: #fff; color: var(--marino); }
.lista-asistencia .asis-chip[aria-pressed=true] { background: #fff; color: var(--marino); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); }
.lista-asistencia .asis-chip[aria-pressed=true] i { color: var(--marino); }
.lista-asistencia .asis-chip.cero:not([aria-pressed=true]) { opacity: .8; }
.lista-asistencia .asis-buscar input { background: rgba(255,255,255,.95); border-color: transparent; }
.lista-asistencia .asis-vistas { background: rgba(255,255,255,.14); }
.lista-asistencia .asis-vistas button { color: #fff; }
.lista-asistencia .asis-vistas button[aria-pressed=true] { background: #fff; color: var(--azul); }

/* Número de orden como insignia de color (8 tonos que se repiten). */
.lista-asistencia .alumno .n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; text-align: center;
  font-size: 12.5px; font-weight: 750; color: var(--c-n, var(--azul)); background: var(--c-f, var(--azul-suave)); }
.lista-asistencia .alumno:nth-child(8n+1) { --c-n: #1d3a9e; --c-f: #e6ecfb; }
.lista-asistencia .alumno:nth-child(8n+2) { --c-n: #c2410c; --c-f: #fff0e5; }
.lista-asistencia .alumno:nth-child(8n+3) { --c-n: #047857; --c-f: #e3f6ee; }
.lista-asistencia .alumno:nth-child(8n+4) { --c-n: #7c3aed; --c-f: #f1eafe; }
.lista-asistencia .alumno:nth-child(8n+5) { --c-n: #0369a1; --c-f: #e3f2fb; }
.lista-asistencia .alumno:nth-child(8n+6) { --c-n: #be185d; --c-f: #fde9f2; }
.lista-asistencia .alumno:nth-child(8n+7) { --c-n: #a16207; --c-f: #fdf4dc; }
.lista-asistencia .alumno:nth-child(8n+8) { --c-n: #0f766e; --c-f: #e0f4f2; }
.vista-cuadricula .alumno .n { width: 28px; height: 28px; padding-top: 0; font-size: 12px; }

/* Tarjetas de estudiante: borde de color por estado y botones teñidos. */
.lista-asistencia.vista-cuadricula .alumno { border-radius: 14px; padding: 12px; gap: 10px; border: 1px solid var(--linea-suave);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
.lista-asistencia.vista-cuadricula .alumno:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(20,40,122,.35); border-color: #c9d3f2; }
.lista-asistencia.vista-cuadricula .alumno[data-estado=P] { border-color: #a7e3b5; background: linear-gradient(180deg, #f1fbf3, #fff 70%); box-shadow: inset 4px 0 0 #34c759; }
.lista-asistencia.vista-cuadricula .alumno[data-estado=A] { border-color: #f6b4ae; background: linear-gradient(180deg, #fff1f0, #fff 70%); box-shadow: inset 4px 0 0 #ff3b30; }
.lista-asistencia.vista-cuadricula .alumno[data-estado=T] { border-color: #fbd59a; background: linear-gradient(180deg, #fff7ea, #fff 70%); box-shadow: inset 4px 0 0 #ff9f0a; }
.lista-asistencia.vista-cuadricula .alumno[data-estado=E] { border-color: #a9cdfb; background: linear-gradient(180deg, #eef5ff, #fff 70%); box-shadow: inset 4px 0 0 #0a84ff; }
.lista-asistencia.vista-cuadricula .alumno[data-estado=R] { border-color: #d1d1d6; background: linear-gradient(180deg, #f4f4f6, #fff 70%); box-shadow: inset 4px 0 0 #8e8e93; }
.vista-cuadricula .alumno .nombre { font-weight: 600; color: var(--texto); }
.lista-asistencia .marca-btn { font-weight: 750; transition: background .12s, color .12s, transform .08s; }
.lista-asistencia .marca-btn[data-v=P] { color: #1f8f3a; background: #eefaf1; }
.lista-asistencia .marca-btn[data-v=A] { color: #d70015; background: #fff0ef; }
.lista-asistencia .marca-btn[data-v=T] { color: #b25e00; background: #fff6e8; }
.lista-asistencia .marca-btn[data-v=E] { color: #0a62c9; background: #edf4ff; }
.lista-asistencia .marca-btn[data-v=R] { color: #6e6e73; background: #f2f2f4; }
.lista-asistencia .marca-btn:hover { filter: brightness(.96); box-shadow: inset 0 0 0 1px currentColor; }
.lista-asistencia .alumno.marcado .marca-btn:not(.sel) { background: transparent; color: #b8b8bf; }
.lista-asistencia .marca-btn.sel { box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); }
.lista-asistencia.vista-lista .alumnos { border-radius: 16px; box-shadow: var(--sombra); }
.lista-asistencia.vista-lista .alumno[data-estado=P] { box-shadow: inset 4px 0 0 #34c759; }
.lista-asistencia.vista-lista .alumno[data-estado=A] { box-shadow: inset 4px 0 0 #ff3b30; background: #fff8f7; }
.lista-asistencia.vista-lista .alumno[data-estado=T] { box-shadow: inset 4px 0 0 #ff9f0a; background: #fffaf2; }
.lista-asistencia.vista-lista .alumno[data-estado=E] { box-shadow: inset 4px 0 0 #0a84ff; background: #f6f9ff; }
.lista-asistencia.vista-lista .alumno[data-estado=R] { box-shadow: inset 4px 0 0 #8e8e93; }
.asis-teclado .kbd { background: #fff; border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--marino); font-weight: 700; }
@media (max-width: 600px) {
  .lista-asistencia .asis-resumen { padding: 12px; border-radius: 14px; }
  .lista-asistencia .asis-resumen::after { width: 160px; height: 160px; right: -50px; top: -70px; border-width: 14px; }
  .lista-asistencia .asis-anillo { width: 40px; height: 40px; } .lista-asistencia .asis-anillo span { width: 31px; height: 31px; font-size: 10px; }
  .lista-asistencia .asis-chip { padding: 5px 2px; }
  .lista-asistencia .alumno .n { width: 24px; height: 24px; font-size: 11px; border-radius: 8px; }
  .asis-intro { display: none; }
}

/* =========================================================
   Encabezado con color (hero) reutilizable y Observaciones del boletín
   ========================================================= */
.hero-pagina { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 20px; color: rgba(255,255,255,.88);
  background: linear-gradient(120deg, var(--marino) 0%, var(--azul) 55%, #2f6fe4 100%); box-shadow: 0 14px 34px -16px rgba(20,40,122,.6); }
.hero-pagina::after { content: ""; position: absolute; right: -70px; top: -110px; width: 300px; height: 300px; border-radius: 50%; border: 26px solid rgba(247,162,27,.22); pointer-events: none; }
.hero-pagina > * { position: relative; z-index: 1; }
.hero-texto { flex: 1 1 380px; min-width: 0; }
.hero-pagina h1 { color: #fff; font-size: 28px; font-weight: 700; margin: 6px 0 4px; }
.hero-pagina p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); max-width: 640px; }
.hero-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(247,162,27,.2);
  color: #ffd08a; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.hero-etiqueta svg { width: 14px; height: 14px; }
.hero-avance { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hero-anillo { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(#f7a21b calc(var(--pct, 0) * 1%), rgba(255,255,255,.18) 0); }
.hero-anillo span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--marino); color: #fff; font-size: 12.5px; font-weight: 750; }
.hero-cifra { display: block; color: rgba(255,255,255,.85); font-size: 14px; }
.hero-cifra strong { color: #fff; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.hero-avance small { display: block; color: rgba(255,255,255,.65); font-size: 12px; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stat { min-width: 108px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hero-stat strong { display: block; color: #fff; font-size: 24px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: 12px; color: rgba(255,255,255,.75); }
.hero-stat.alerta strong { color: #ffb4ab; }
.hero-stat.bien strong { color: #8ef0a5; }

.obs-barra { position: sticky; top: 12px; z-index: 6; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px;
  border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linea-suave); box-shadow: var(--sombra); }
.obs-barra .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.obs-barra .segmentado a { flex: none; white-space: nowrap; }
.obs-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.obs-filtro { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--secundario); padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.obs-filtro i { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--fondo); color: var(--texto); font-size: 12px; }
.obs-filtro:hover { background: var(--fondo); }
.obs-filtro[aria-pressed=true] { background: var(--azul-suave); color: var(--marino); }
.obs-filtro[aria-pressed=true] i { background: var(--azul); color: #fff; }
.obs-buscar { margin-left: auto; }
.obs-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.obs-item { display: grid; gap: 10px; align-content: start; padding: 14px 16px 12px; border-radius: 16px; background: var(--superficie);
  border: 1px solid var(--linea-suave); box-shadow: inset 4px 0 0 #f7a21b, 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, border-color .15s; }
.obs-item[data-estado=escrita] { box-shadow: inset 4px 0 0 #34c759, 0 1px 2px rgba(0,0,0,.04); }
.obs-item:focus-within { border-color: #b9c6ef; box-shadow: inset 4px 0 0 var(--azul), 0 10px 24px -14px rgba(20,40,122,.45); }
.obs-item[hidden] { display: none; }
.obs-corto { display: none; }
.obs-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.obs-numero { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 750;
  background: var(--azul-suave); color: var(--azul); font-variant-numeric: tabular-nums; }
.obs-nombre { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; margin: 0; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-estado span { display: none; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.obs-item[data-estado=escrita] .obs-estado-si { display: inline-block; background: var(--verde-suave); color: var(--verde); }
.obs-item[data-estado=pendiente] .obs-estado-no { display: inline-block; background: #fff4e0; color: #b25e00; }
.obs-item textarea { width: 100%; min-height: 78px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; background: #fafafc; border-radius: 12px; }
.obs-item textarea:focus { background: #fff; }
.obs-pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.obs-anterior { font-size: 12.5px; color: var(--secundario); min-width: 0; }
.obs-anterior summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.obs-anterior p { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--linea); background: var(--fondo); border-radius: 0 8px 8px 0; line-height: 1.45; }
.obs-contador { flex: none; font-size: 11.5px; color: var(--terciario); font-variant-numeric: tabular-nums; }
.obs-contador.cerca { color: var(--naranja); font-weight: 700; }
.obs-guardar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  padding: 12px 200px 12px 18px; border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--linea-suave); box-shadow: 0 -6px 24px -12px rgba(0,0,0,.25); }
.obs-guardar .obs-pendiente { color: #b25e00; font-weight: 600; }
@media (max-width: 700px) {
  .hero-pagina { padding: 18px; border-radius: 16px; }
  .hero-pagina h1 { font-size: 22px; }
  .obs-lista { grid-template-columns: 1fr; }
  .obs-buscar { margin-left: 0; width: 100%; } .obs-buscar input { width: 100%; }
  .obs-largo { display: none; } .obs-corto { display: inline; }
  .obs-guardar { padding: 10px 12px; }
}

/* Mis estudiantes: tarjetas con avatar, asistencia y contacto de la familia. */
.est-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.est-tarjeta { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 16px; background: var(--superficie);
  border: 1px solid var(--linea-suave); box-shadow: inset 4px 0 0 #34c759, 0 1px 2px rgba(0,0,0,.04); transition: transform .12s, box-shadow .15s; }
.est-tarjeta:hover { transform: translateY(-1px); box-shadow: inset 4px 0 0 #34c759, 0 10px 24px -14px rgba(20,40,122,.4); }
.est-tarjeta.riesgo { background: linear-gradient(180deg, #fff5f4, #fff 60%); border-color: #f6c5c0; box-shadow: inset 4px 0 0 #ff3b30, 0 1px 2px rgba(0,0,0,.04); }
.est-tarjeta[hidden] { display: none; }
.est-cabeza { display: flex; align-items: center; gap: 12px; min-width: 0; }
.est-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 750; color: #fff;
  background: linear-gradient(135deg, var(--azul), #2f6fe4); box-shadow: 0 4px 10px -4px rgba(29,58,158,.6); }
.est-tarjeta:nth-child(6n+2) .est-avatar { background: linear-gradient(135deg, #f26a21, #f7a21b); box-shadow: 0 4px 10px -4px rgba(242,106,33,.6); }
.est-tarjeta:nth-child(6n+3) .est-avatar { background: linear-gradient(135deg, #047857, #34c759); box-shadow: 0 4px 10px -4px rgba(4,120,87,.5); }
.est-tarjeta:nth-child(6n+4) .est-avatar { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 4px 10px -4px rgba(124,58,237,.5); }
.est-tarjeta:nth-child(6n+5) .est-avatar { background: linear-gradient(135deg, #0369a1, #38bdf8); box-shadow: 0 4px 10px -4px rgba(3,105,161,.5); }
.est-tarjeta:nth-child(6n+6) .est-avatar { background: linear-gradient(135deg, #be185d, #f472b6); box-shadow: 0 4px 10px -4px rgba(190,24,93,.5); }
.est-nombre { flex: 1; min-width: 0; display: grid; }
.est-nombre strong { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-nombre small { font-size: 12px; color: var(--terciario); }
.est-alerta { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11.5px; font-weight: 700; }
.est-tarjeta .riesgo-motivos { display: flex; flex-wrap: wrap; gap: 5px; }
.est-dato { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--linea-suave); font-size: 13.5px; }
.est-dato small { font-size: 12.5px; color: var(--secundario); }
.est-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terciario); }
.est-asis { display: flex; align-items: center; gap: 10px; }
.est-asis .mr-barra { flex: 1; margin: 0; }
.est-asis b { font-size: 15px; color: var(--verde); font-variant-numeric: tabular-nums; }
.est-asis b.bajo { color: var(--rojo); }
.est-familia strong { font-size: 14px; font-weight: 600; }
.est-tel { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 10px; background: var(--azul-suave); color: var(--marino); font-weight: 600; font-size: 13px; }
.est-tel:hover { text-decoration: none; background: #dce4f8; }
@media (max-width: 700px) { .est-lista { grid-template-columns: 1fr; } .hero-stat { flex: 1 1 calc(50% - 10px); min-width: 0; } }

/* =========================================================
   Modo enfoque: barra superior con identidad y texto más legible
   ========================================================= */
.enfoque { --secundario: #3c3c43; --terciario: #5b5b63; }
.enfoque-barra { padding: 12px 24px 12px; gap: 12px 16px; background: rgba(255,255,255,.96); border-bottom: 1px solid #dfe4f3;
  box-shadow: 0 6px 20px -16px rgba(20,40,122,.5); }
.enfoque-barra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--marino), var(--azul) 45%, #2f6fe4 70%, #f7a21b 100%); }
.enfoque-barra .btn-volver { padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--azul-suave); color: var(--marino); font-size: 14px; font-weight: 650; }
.enfoque-barra .btn-volver:hover { background: #dbe3f8; text-decoration: none; }
.enfoque-icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--azul), #2f6fe4); box-shadow: 0 6px 14px -6px rgba(29,58,158,.7); }
.enfoque-icono svg { width: 22px; height: 22px; }
.enfoque-barra .titulo { font-size: 19px; font-weight: 750; color: var(--marino); letter-spacing: -.02em; line-height: 1.2; }
.enfoque-barra .titulo small { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #fff4e5;
  color: #9a3d00; font-size: 12.5px; font-weight: 650; letter-spacing: 0; }
.enfoque-barra .centro-compacta { padding: 5px 12px 5px 5px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--linea-suave); }
.enfoque-barra .centro-compacta-texto strong { color: var(--texto); }
.enfoque-barra .centro-compacta-texto small { color: var(--secundario); }
.enfoque-barra .estado-guardado { min-width: 0; padding: 6px 12px; border-radius: 999px; background: var(--verde-suave); color: #1a6b32; font-weight: 650; font-size: 12.5px; }
.enfoque-barra .estado-guardado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.25); }
.enfoque-barra .estado-guardado.guardando { background: var(--azul-suave); color: var(--marino); }
.enfoque-barra .estado-guardado.guardando::before { background: var(--azul); box-shadow: 0 0 0 3px rgba(29,58,158,.2); }
.enfoque-barra .estado-guardado.error { background: var(--rojo-suave); color: var(--rojo); }
.enfoque-barra .estado-guardado.error::before { background: var(--rojo); box-shadow: none; }
.enfoque-barra .fecha-nav { padding: 3px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--linea-suave); }
.enfoque-barra .fecha-nav input[type=date] { border-color: transparent; font-weight: 650; color: var(--marino); }
.enfoque-barra .fecha-paso { color: var(--marino); }

/* Calificaciones: cifras y etiquetas con más contraste. */
.cuadricula thead th { color: var(--texto); font-weight: 700; }
.cuadricula .calc { color: #1d1d1f; font-weight: 700; }
.cuadricula .calc.cf { color: var(--marino); font-size: 16.5px; font-weight: 800; }
.cuadricula .calc.baja, .cuadricula .calc.cf.baja { color: var(--rojo); }
.cal-periodos a { color: var(--texto); font-weight: 600; }
.cal-periodos small { color: var(--marino); font-weight: 700; }
.cal-chip { color: var(--texto); font-weight: 600; }
.cal-n { background: var(--azul-suave); color: var(--marino); }
.cal-nombre { color: var(--texto); font-weight: 600; }
.cal-avance .asis-contador { color: var(--texto); }
@media (max-width: 600px) {
  .enfoque-icono { display: none; }
  .enfoque-barra .titulo { font-size: 15.5px; }
  .enfoque-barra .titulo small { font-size: 11.5px; padding: 1px 8px; }
  .enfoque-barra .btn-volver { background: none; padding: 6px 2px; }
}
.lista-asistencia .asis-guardar { background: #fff; color: var(--marino); font-weight: 750; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.lista-asistencia .asis-guardar:hover { background: #eef2fd; }
.lista-asistencia .asis-guardar.hecho { background: #34c759; color: #fff; }
.lista-asistencia .asis-guardar:disabled { opacity: .7; cursor: progress; }
/* Banda azul de asistencia: todo el texto en blanco y sin atenuar. */
.lista-asistencia .asis-chip .asis-chip-txt { color: #fff; font-size: 12px; font-weight: 600; }
.lista-asistencia .asis-chip[aria-pressed=true] .asis-chip-txt { color: var(--marino); }
.lista-asistencia .asis-chip.cero:not([aria-pressed=true]) { opacity: 1; }
.lista-asistencia .asis-acciones .asis-quitar:disabled { opacity: 1; color: rgba(255,255,255,.72); cursor: default; }
.lista-asistencia .asis-resumen::after { right: -110px; top: -130px; width: 240px; height: 240px; border-width: 18px; border-color: rgba(247,162,27,.16); }
.lista-asistencia .asis-chip { padding: 4px 10px 4px 4px; gap: 6px; }
.lista-asistencia .asis-chip[data-v=P] b { background: #2fd158; } .lista-asistencia .asis-chip[data-v=A] b { background: #ff453a; }
.lista-asistencia .asis-chip[data-v=T] b { background: #ff9f0a; } .lista-asistencia .asis-chip[data-v=E] b { background: #0a84ff; }
.lista-asistencia .asis-chip[data-v=R] b { background: #98989f; }
.lista-asistencia .asis-chip b { opacity: 1; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
@media (min-width: 1000px) {
  .enfoque-barra { flex-wrap: nowrap; }
  .enfoque-barra .titulo { flex: 1 1 auto; min-width: 0; }
  .enfoque-barra .titulo small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
  .enfoque-barra .espacio { display: none; }
  .enfoque-barra .estado-guardado { white-space: nowrap; flex: none; }
}
.lista-asistencia .asis-chip.cero:not([aria-pressed=true]) b { filter: none; }
.cal-chip.cero:not([aria-pressed=true]) { opacity: .7; }
.enfoque-barra .centro-compacta { max-width: 300px; }
.enfoque-barra .centro-compacta-texto small { white-space: nowrap; }
.hero-pagina p { color: #fff; opacity: .95; }
.hero-avance small, .hero-stat span { color: #fff; opacity: .9; }
.hero-cifra { color: #fff; }

/* Evaluaciones finales: plazo (docente) y etapas (dirección) */
.ev-plazo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--fondo); border: 1px solid var(--linea-suave); }
.ev-plazo > div { display: grid; gap: 1px; }
.ev-plazo strong { font-size: 14.5px; }
.ev-plazo span { font-size: 13.5px; color: var(--secundario); }
.ev-plazo-icono { font-size: 20px; }
.ev-plazo.ev-abierta { background: var(--verde-suave); border-color: #b7e4c4; } .ev-plazo.ev-abierta strong { color: var(--verde); }
.ev-plazo.ev-programada { background: var(--azul-suave); border-color: #c9d3f2; } .ev-plazo.ev-programada strong { color: var(--marino); }
.ev-plazo.ev-cerrada, .ev-plazo.ev-sin_fechas { background: #fff4e5; border-color: #f5d3a8; } .ev-plazo.ev-cerrada strong, .ev-plazo.ev-sin_fechas strong { color: #9a3d00; }
.ev-quienes { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--texto); }
.ev-tabla .ev-col-nota { background: #eef2fd; color: var(--marino); }
.ev-tabla .ev-parte { color: var(--secundario); font-weight: 600; }
.ev-tabla .col-nombre { text-align: left; padding: 6px 12px; white-space: nowrap; }
.nav-abierta { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--verde-suave); color: var(--verde); font-size: 10.5px; font-weight: 700; }
.ev-anios { background: rgba(255,255,255,.14); }
.ev-anios a { color: #fff; }
.ev-anios a.activo { color: var(--marino); }
.ev-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ev-etapas > .tarjeta + .tarjeta { margin-top: 0; }
.ev-etapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; border-top: 4px solid var(--linea); }
.ev-etapa.ev-abierta { border-top-color: #34c759; } .ev-etapa.ev-programada { border-top-color: var(--azul); } .ev-etapa.ev-sin_fechas { border-top-color: #f7a21b; }
.ev-etapa-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.ev-etapa-cab h2 { font-size: 17px; }
.ev-etapa-cab small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; }
.ev-paso { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--azul), #2f6fe4); color: #fff; font-weight: 800; }
.ev-formula { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--azul-suave); color: var(--marino); font-size: 13px; font-weight: 600; }
.ev-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ev-fechas .campo { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--secundario); display: grid; gap: 4px; }
.ev-estado-txt { margin: 0; font-size: 13px; color: var(--texto); }
.ev-avance { display: grid; gap: 6px; font-size: 13px; }
.ev-acciones { display: flex; gap: 8px; }
@media (max-width: 1000px) { .ev-etapas { grid-template-columns: 1fr; } }
.btn-guardar-ahora { flex: none; gap: 6px; font-weight: 700; box-shadow: 0 4px 12px -5px rgba(29,58,158,.6); }
.btn-guardar-ahora.hecho, .asis-guardar.hecho { background: #34c759 !important; color: #fff !important; }
.btn-guardar-ahora:disabled { opacity: .7; cursor: progress; }
.cuadricula .calc.prom-periodo { min-width: 62px; color: #475569; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; background: #f8fafc; }
.cuadricula .calc.prom-periodo.pc-actual { color: var(--marino); font-size: 16.5px; font-weight: 800; background: #eaf0ff; box-shadow: inset 2px 0 0 #c7d4fb, inset -2px 0 0 #c7d4fb; }
.cuadricula .calc.prom-periodo.baja { color: #dc2626; }
.cuadricula thead th.pc-cab { background: #eef2ff; color: var(--marino); }
.cuadricula thead th.pc-col { min-width: 62px; }
.cuadricula thead th.pc-actual { background: var(--marino); color: #fff; }
.ev-etapa > * { min-width: 0; }
.ev-fechas input { width: 100%; min-width: 0; padding-left: 8px; padding-right: 6px; }
/* Períodos y cierre: fechas editables dentro de cada tarjeta (misma estructura que Evaluaciones finales) */
.per-tarjetas { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.per-tarjeta > * { min-width: 0; }
.per-tarjeta { border-top: 4px solid var(--linea); }
.per-tarjeta.e-en_curso, .per-tarjeta.es-hoy { border-top-color: #2563eb; }
.per-tarjeta.e-terminado { border-top-color: #f59e0b; }
.per-tarjeta.e-cerrado { border-top-color: #94a3b8; }
.per-tarjeta.e-por_cerrar { border-top-color: #dc2626; }
.per-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 12px; background: #f6f8fd; }
.per-campos .campo { margin: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.per-campos input[type=date], .per-campos input[type=text] { width: 100%; min-width: 0; padding-left: 8px; padding-right: 6px; }
.per-campo-nombre { grid-column: 1 / -1; }
.per-campos-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.per-campos-pie .per-auto { font-size: 13px; }
.per-dias-chip { font-size: 12.5px; color: var(--secundario); background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 3px 10px; }
.per-dias-chip b { color: var(--marino); font-variant-numeric: tabular-nums; }
.per-linea-cab { flex-wrap: wrap; gap: 12px; }
.per-anio-campos { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.per-anio-campos .campo { margin: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.per-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.per-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.per-campos .campo > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 900px) { .per-tarjetas { grid-template-columns: minmax(0, 1fr); } .per-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.per-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* ===== Períodos y cierre: tarjetas compactas con color por estado ===== */
.pc-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pc-tarjeta { --c1: #64748b; --c2: #94a3b8; --suave: #f1f5f9; --tinta: #334155;
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px 20px; min-width: 0;
  background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.06); overflow: hidden; }
.pc-tarjeta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.pc-tarjeta.e-en_curso { --c1: #2563eb; --c2: #7c3aed; --suave: #eef2ff; --tinta: #1e40af; }
.pc-tarjeta.e-terminado { --c1: #f59e0b; --c2: #f97316; --suave: #fff7ed; --tinta: #9a3412; }
.pc-tarjeta.e-por_cerrar { --c1: #ef4444; --c2: #e11d48; --suave: #fef2f2; --tinta: #b91c1c; }
.pc-tarjeta.e-proximo { --c1: #06b6d4; --c2: #0ea5e9; --suave: #ecfeff; --tinta: #0e7490; }
.pc-tarjeta.e-cerrado { --c1: #10b981; --c2: #059669; --suave: #ecfdf5; --tinta: #047857; }
.pc-tarjeta.es-hoy { box-shadow: 0 0 0 2px #c7d2fe, 0 10px 26px rgba(37,99,235,.16); }
.pc-cab { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; }
.pc-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 4px 10px color-mix(in srgb, var(--c1) 35%, transparent); }
.pc-titulo { display: grid; min-width: 0; }
.pc-nombre { border: 1px solid transparent; background: transparent; padding: 1px 6px; margin-left: -6px; border-radius: 8px;
  font: inherit; font-size: 16px; font-weight: 800; color: #0f172a; width: 100%; min-width: 0; }
.pc-nombre:hover { border-color: #e2e8f0; }
.pc-nombre:focus { outline: none; border-color: var(--c1); background: #fff; box-shadow: 0 0 0 3px var(--suave); }
.pc-rango { font-size: 12.5px; color: #64748b; }
.pc-estado { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--c1), var(--c2)); }
.pc-fechas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; border-radius: 12px; background: var(--suave); }
.pc-fechas label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta); min-width: 0; }
.pc-fechas input { width: 100%; min-width: 0; height: 34px; padding: 0 6px 0 8px; border: 1px solid #dbe2ee; border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #0f172a; }
.pc-fechas input:focus { outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 18%, transparent); }
.pc-fechas input.invalido { border-color: #ef4444; }
.pc-limite input { border-color: color-mix(in srgb, var(--c1) 45%, #dbe2ee); }
.pc-dias { align-self: center; justify-self: end; text-align: center; font-size: 11px; color: var(--tinta); line-height: 1.1; padding-top: 12px; }
.pc-dias b { display: block; font-size: 18px; font-weight: 800; color: var(--c1); font-variant-numeric: tabular-nums; }
.pc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569; }
.pc-chip.per-faltan { background: #fef3c7; color: #92400e; }
.pc-chip.per-faltan.urgente { background: #fee2e2; color: #b91c1c; }
.pc-switch { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #f1f5f9; color: #475569; cursor: pointer; }
.pc-switch input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--c1); }
.pc-switch:has(input:checked) { background: var(--suave); color: var(--tinta); }
.pc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; border-top: 1px dashed #e2e8f0; margin-top: auto; }
.pc-avance { flex: 1 1 200px; min-width: 0; display: grid; gap: 5px; }
.pc-avance-cab { display: flex; justify-content: space-between; font-size: 12.5px; color: #64748b; }
.pc-avance-cab b { color: var(--tinta); font-size: 14px; }
.pc-barra { height: 7px; border-radius: 999px; background: #e9eef6; overflow: hidden; }
.pc-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.pc-barra span.ok { background: linear-gradient(90deg, #10b981, #22c55e); }
.pc-ok { margin: 0; font-size: 12.5px; font-weight: 700; color: #059669; }
.pc-futuro { margin: 0; flex: 1; font-size: 13px; font-weight: 600; color: var(--tinta); }
.pc-pie .per-pendientes summary { font-size: 12.5px; }
.pc-accion { margin-left: auto; }
.pc-btn { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 3px 8px color-mix(in srgb, var(--c1) 30%, transparent); }
.pc-btn:hover { filter: brightness(1.07); }
.pc-btn.reabrir { background: #fff; color: var(--tinta); border: 1px solid color-mix(in srgb, var(--c1) 40%, #e2e8f0); box-shadow: none; }
@media (max-width: 1000px) { .pc-tarjetas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pc-fechas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-dias { justify-self: start; } }
.pc-tarjeta input.pc-nombre { height: auto; border: 1px solid transparent; background: transparent; box-shadow: none; padding: 1px 6px; font-size: 16px; font-weight: 800; color: #0f172a; }
.pc-tarjeta input.pc-nombre:hover { border-color: #e2e8f0; background: #fff; }
.pc-tarjeta input.pc-nombre:focus { border-color: var(--c1); background: #fff; }
/* Línea de tiempo con los mismos colores vivos de las tarjetas */
.per-tramo { background: linear-gradient(135deg, #cffafe, #bae6fd); color: #0e7490; font-weight: 800; }
.per-tramo.e-en_curso { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
.per-tramo.e-terminado { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; }
.per-tramo.e-por_cerrar { background: linear-gradient(135deg, #ef4444, #e11d48); color: #fff; }
.per-tramo.e-cerrado { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.per-pagina-guardar { padding: 10px 14px; }
.per-pagina-guardar .sec { font-size: 13px; }
.pc-tarjeta input.pc-nombre::placeholder { color: #0f172a; opacity: 1; }
@media (min-width: 900px) { .per-pagina-guardar { padding-right: 200px; } }
/* ===== Panel del docente ===== */
.doc-hero .hero-texto { max-width: none; }
.doc-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.doc-kpi { display: grid; gap: 2px; min-width: 132px; padding: 10px 14px; border-radius: 14px; text-decoration: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; transition: background .15s, transform .15s; }
.doc-kpi:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.doc-kpi b { font-size: 24px; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.doc-kpi b small { font-size: 14px; font-weight: 700; opacity: .85; margin-left: 1px; }
.doc-kpi span { font-size: 12.5px; font-weight: 600; color: #e0e7ff; }
.doc-kpi.ok b { color: #86efac; }
.doc-kpi.alerta b { color: #fdba74; }
.doc-plazo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa); border: 1px solid #a7f3d0; }
.doc-plazo-ico { font-size: 22px; }
.doc-plazo div { flex: 1; display: grid; gap: 2px; }
.doc-plazo strong { color: #047857; font-size: 14.5px; }
.doc-plazo span { color: #065f46; font-size: 13px; }
.doc-notas { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #475569; }
.doc-notas i { position: relative; width: 46px; height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.doc-notas i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #2563eb, #7c3aed); }
.clase-fila-nombre { flex-wrap: wrap; row-gap: 4px; }
/* Elegir clase: nombre completo y estado de la lista debajo */
.hero-compacto { padding-top: 22px; padding-bottom: 22px; }
.elegir-nombre strong { white-space: normal; overflow: visible; text-overflow: clip; }
.elegir-pendiente { color: #c2410c; font-weight: 600; }
.elegir-hecha { color: #15803d; font-weight: 700; }
.hero-compacto { margin-bottom: 16px; }
.doc-kpi b small { opacity: 1; color: #c7d2fe; }
/* ===== Encabezados de todos los módulos con fondo (mismo estilo que .hero-pagina) ===== */
.encabezado { position: relative; overflow: hidden; align-items: center; gap: 16px 28px; padding: 24px 28px; border-radius: 20px;
  color: rgba(255,255,255,.9); background: linear-gradient(120deg, var(--marino) 0%, var(--azul) 55%, #2f6fe4 100%);
  box-shadow: 0 14px 34px -16px rgba(20,40,122,.6); margin-bottom: 22px; }
.encabezado::after { content: ""; position: absolute; right: -70px; top: -110px; width: 300px; height: 300px; border-radius: 50%;
  border: 26px solid rgba(247,162,27,.22); pointer-events: none; }
.encabezado > * { position: relative; z-index: 1; }
.encabezado > div:first-child { flex: 1 1 380px; min-width: 0; }
.encabezado h1 { color: #fff; font-size: 28px; }
.encabezado h1::after { background: #f7a21b; width: 40px; margin-top: 8px; }
.encabezado p { color: #fff; opacity: .92; font-size: 15px; margin-top: 8px; }
.encabezado a:not(.btn) { color: #fff; }
.encabezado .btn-volver { color: #ffd08a; font-weight: 600; }
.encabezado .pistas li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.encabezado .pistas li svg { color: #ffd08a; }
.encabezado .btn:not(.btn-sec):not(.btn-acento):not(.btn-texto):not(.btn-peligro) { background: #fff; color: var(--marino); border-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.encabezado .btn-sec { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.encabezado .btn-sec:hover { background: rgba(255,255,255,.24); }
.encabezado .btn-texto { color: #fff; }
.encabezado .segmentado { background: rgba(255,255,255,.14); }
.encabezado .segmentado a, .encabezado .segmentado button { color: #fff; }
.encabezado .segmentado .activo { background: #fff; color: var(--marino); }
.encabezado .sec, .encabezado .ter, .encabezado small { color: rgba(255,255,255,.85); }
.encabezado .insignia { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.encabezado select, .encabezado input:not([type=checkbox]):not([type=radio]) { background: #fff; color: var(--texto, #0f172a); }
.encabezado label { color: #fff; }
@media (max-width: 700px) { .encabezado { padding: 18px; border-radius: 16px; } .encabezado h1 { font-size: 23px; } }
/* Código de licencia: campo grande y legible */
input.codigo-licencia { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #c7d2fe; border-radius: 12px; background: #f8faff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--marino); text-transform: uppercase; }
input.codigo-licencia::placeholder { color: #a5b4fc; font-weight: 600; }
input.codigo-licencia:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(37,99,235,.15); background: #fff; }
/* ===== Datos del centro ===== */
.dc-rejilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dc-columna { display: grid; gap: 16px; min-width: 0; }
.dc-columna .tarjeta + .tarjeta { margin-top: 0; }
.dc-bloque { padding: 20px 22px; }
.dc-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: #0f172a; }
.dc-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-size: 15px; flex: none; }
.dc-ico svg { width: 17px; height: 17px; }
.dc-ico.azul { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.dc-ico.verde { background: linear-gradient(135deg, #10b981, #059669); }
.dc-ico.naranja { background: linear-gradient(135deg, #f59e0b, #f97316); }
.dc-ico.violeta { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.dc-campos { gap: 12px 14px !important; }
.dc-campos .campo { margin: 0; }
.dc-ancho { grid-column: 1 / -1; }
.dc-logo-vista { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: #fff7ed; }
.dc-logo-vista div { display: grid; gap: 2px; }
.dc-logo-img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex: none;
  background: linear-gradient(135deg, var(--marino), #2f6fe4); color: #fff; font-size: 22px; font-weight: 800; }
.dc-logo-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dc-subir { display: grid; justify-items: center; gap: 2px; margin-top: 12px; padding: 14px; border: 2px dashed #fdba74; border-radius: 14px; cursor: pointer; text-align: center; }
.dc-subir:hover { background: #fff7ed; }
.dc-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dc-subir span { font-weight: 700; color: #c2410c; }
.dc-subir small { color: #9a3412; font-size: 12px; }
.dc-interruptor { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: #0f172a; }
.dc-interruptor input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1; transition: background .15s; flex: none; }
.dc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.dc-interruptor input:checked + .dc-switch { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.dc-interruptor input:checked + .dc-switch::after { transform: translateX(20px); }
.dc-interruptor input:focus-visible + .dc-switch { box-shadow: 0 0 0 3px rgba(139,92,246,.3); }
.dc-nota { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.dc-anios-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dc-anios-cab .dc-titulo { margin-bottom: 4px; }
.dc-anios-cab p { margin: 0; font-size: 13.5px; }
.dc-anios-lista { display: grid; gap: 10px; }
.dc-anio { display: grid; grid-template-columns: minmax(220px, 1.3fr) auto minmax(0, 1.4fr); align-items: center; gap: 12px 18px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; }
.dc-anio.actual { border-color: #c7d2fe; background: linear-gradient(90deg, #eef2ff, #fff 60%); }
.dc-anio-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-anio-sello { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; color: #fff; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, #64748b, #94a3b8); }
.dc-anio.actual .dc-anio-sello { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.dc-anio-nombre { display: grid; min-width: 0; }
.dc-anio-nombre strong { font-size: 15.5px; }
.dc-anio-nombre small { color: #64748b; font-size: 12.5px; }
.dc-actual { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dc-periodos { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-per { border: 0; cursor: pointer; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700;
  background: #dcfce7; color: #15803d; }
.dc-per:hover { filter: brightness(.96); }
.dc-per.cerrado { background: #e0e7ff; color: #3730a3; }
.dc-anio-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.dc-plegable { position: relative; }
.dc-plegable > summary { list-style: none; cursor: pointer; }
.dc-plegable > summary::-webkit-details-marker { display: none; }
.dc-plegable[open] { flex-basis: 100%; order: 5; }
.dc-anio-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px; background: #f8fafc; }
.dc-anio-form label, .dc-nuevo label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 700; color: #475569; min-width: 0; }
.dc-anio-form input, .dc-nuevo input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #dbe2ee; border-radius: 9px; background: #fff; font: inherit; font-size: 13.5px; }
.dc-peligro .dc-anio-form { grid-template-columns: minmax(0, 1fr) auto; background: #fef2f2; border: 1px solid #fecaca; }
.dc-btn-borrar { background: #fff; color: #b91c1c; border: 1px solid #fecaca; }
.dc-anio-form .dc-btn-borrar { background: #dc2626; color: #fff; border-color: #dc2626; }
.dc-aviso-borrar { margin: 0; font-size: 12.5px; color: #991b1b; font-weight: 600; }
.dc-nuevo { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; margin-top: 14px; padding: 14px;
  border: 2px dashed #c7d2fe; border-radius: 14px; background: #f8faff; }
.dc-nuevo-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e0e7ff; color: #3730a3; font-weight: 800; font-size: 18px; }
@media (max-width: 1100px) { .dc-anio { grid-template-columns: 1fr; } .dc-anio-acciones { justify-content: flex-start; } }
@media (max-width: 900px) { .dc-rejilla { grid-template-columns: 1fr; } .dc-nuevo, .dc-anio-form { grid-template-columns: 1fr 1fr; } .dc-nuevo-ico { display: none; } }
.dc-anio { display: flex; flex-wrap: wrap; }
.dc-anio-cab { flex: 1 1 300px; }
.dc-anio-acciones { margin-left: auto; }
.dc-anio:has(details[open]) .dc-anio-acciones { flex-basis: 100%; justify-content: flex-start; }
.dc-plegable[open] > summary { margin-bottom: 0; }
.dc-anio-nombre small { white-space: nowrap; }
.dc-anio > .dc-anio-form { flex-basis: 100%; margin-top: 2px; }
.dc-anio > .dc-anio-form[hidden] { display: none; }
.dc-form-borrar { grid-template-columns: minmax(0, 1fr) auto !important; background: #fef2f2 !important; border: 1px solid #fecaca; }
.dc-anio-acciones [aria-expanded="true"] { box-shadow: inset 0 0 0 2px currentColor; }
/* ===== Diseño del boletín: pantalla de elección ===== */
.db-actual { display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; min-width: 170px; }
.db-actual-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd08a; }
.db-actual strong { font-size: 18px; color: #fff; }
.db-colores { display: inline-flex; gap: 4px; }
.db-colores i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 2.5px rgba(15,23,42,.12); }
.db-rejilla { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.db-rejilla .diseno { transition: transform .15s, box-shadow .15s; }
.db-rejilla .diseno:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(15,23,42,.45); }
.db-rejilla .diseno.en-uso { box-shadow: 0 0 0 2.5px #16a34a, 0 16px 30px -18px rgba(22,163,74,.6); }
.db-rejilla .bmini { position: relative; height: 180px; padding: 18px 30px 0; }
.db-cinta { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #16a34a; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.db-cinta.nuevo { background: linear-gradient(135deg, #7c3aed, #db2777); }
.db-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-titulo h3 { margin: 0; font-size: 17px; }
.db-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.db-etiquetas:empty { display: none; }
.db-rejilla .diseno-info p { font-size: 13.5px; line-height: 1.45; }
/* Miniaturas de los diseños nuevos */
.bmini-moderno { --p: #4f46e5; --suave: #f8fafc; --k: #fff; --borde: #e2e8f0; --r: 4px; }
.bmini-moderno .bm-franja { height: 3px; border-radius: 3px; margin-left: 0; margin-right: 0; }
.bmini-moderno .bm-logo { border-radius: 7px; }
.bmini-moderno .bm-lineas b { background: #0f172a; }
.bmini-moderno .bm-kpis i:nth-child(1) { box-shadow: inset 2px 0 0 #4f46e5, inset 0 0 0 1px #e2e8f0; }
.bmini-moderno .bm-kpis i:nth-child(2) { box-shadow: inset 2px 0 0 #0ea5e9, inset 0 0 0 1px #e2e8f0; }
.bmini-moderno .bm-kpis i:nth-child(3) { box-shadow: inset 2px 0 0 #10b981, inset 0 0 0 1px #e2e8f0; }
.bmini-moderno .bm-kpis i:nth-child(4) { box-shadow: inset 2px 0 0 #f59e0b, inset 0 0 0 1px #e2e8f0; }
.bmini-moderno .bm-tabla .bm-th { background: #e0e7ff; border-bottom: 1px solid #a5b4fc; }
.bmini-minimalista { --p: #0f172a; --suave: #fff; --k: #fff; --borde: transparent; --r: 0; }
.bmini-minimalista .bm-franja { height: 0; border-top: 1px solid #0f172a; border-radius: 0; }
.bmini-minimalista .bm-logo { background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px #0f172a; }
.bmini-minimalista .bm-lineas b { height: 4px; background: #0f172a; }
.bmini-minimalista .bm-kpis i { box-shadow: inset 0 1px 0 #0f172a; }
.bmini-minimalista .bm-tabla .bm-th { background: #fff; height: 8px; border-bottom: 1px solid #0f172a; }
.bmini-minimalista .bm-tabla span:nth-child(3) { box-shadow: inset 0 -1px 0 #0891b2; }
.bmini-ejecutivo { --p: #1f2937; --suave: #f9fafb; --k: #f3f4f6; --r: 1px; }
.bmini-ejecutivo .bm-franja { display: none; }
.bmini-ejecutivo .bm-cab { background: #1f2937; margin: 0 -14px 10px; padding: 8px 14px; border-bottom: 2px solid #9f1239; border-radius: 4px 4px 0 0; }
.bmini-ejecutivo .bm-logo { background: #9f1239; }
.bmini-ejecutivo .bm-lineas b { background: #fff; }
.bmini-ejecutivo .bm-lineas i { background: #6b7280; }
.bmini-ejecutivo .bm-kpis i { box-shadow: inset 0 2px 0 #1f2937; }
.bmini-oceano { --p: #0f766e; --suave: #f0fdfa; --k: #ecfeff; --r: 6px; }
.bmini-oceano .bm-franja { height: 4px; border-bottom: 2px solid #22d3ee; border-radius: 3px; margin-left: 0; margin-right: 0; }
.bmini-oceano .bm-logo { border-radius: 50%; }
.bmini-oceano .bm-lineas b { background: #134e4a; }
.bmini-oceano .bm-tabla .bm-th { border-radius: 3px; }
.bmini-aurora { --p: #6d28d9; --suave: #faf5ff; --r: 6px; }
.bmini-aurora .bm-franja { height: 7px; background: linear-gradient(180deg, #7c3aed 0 40%, #db2777 40% 75%, #f97316 75%); }
.bmini-aurora .bm-logo { border-radius: 7px; box-shadow: inset 0 -2px 0 #db2777; background: #7c3aed; }
.bmini-aurora .bm-lineas b { background: #4c1d95; }
.bmini-aurora .bm-kpis i:nth-child(1) { background: #f5f3ff; } .bmini-aurora .bm-kpis i:nth-child(2) { background: #fdf2f8; }
.bmini-aurora .bm-kpis i:nth-child(3) { background: #fff7ed; } .bmini-aurora .bm-kpis i:nth-child(4) { background: #ecfeff; }
/* ===== Mi firma ===== */
.nav-crear { background: #ffedd5 !important; color: #c2410c !important; }
.fi-estado { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; min-width: 180px; }
.fi-estado span { font-weight: 800; font-size: 16px; color: #fdba74; }
.fi-estado.ok span { color: #86efac; }
.fi-estado small { color: #e0e7ff; font-size: 12.5px; }
.fi-rejilla { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fi-rejilla .tarjeta + .tarjeta { margin-top: 0; }
.fi-crear { display: grid; gap: 14px; }
.fi-modos { justify-self: start; }
.fi-modos button { border: 0; background: none; font: inherit; cursor: pointer; }
.fi-panel p { margin: 0; }
.fi-escribir { display: grid; gap: 10px; }
.fi-escribir .campo { margin: 0; }
.fi-letras { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-letra { border: 1.5px solid #e2e8f0; background: #fff; border-radius: 12px; padding: 6px 16px; font-size: 22px; cursor: pointer; color: #0f172a; }
.fi-letra.activo { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.fi-subir { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px; border: 2px dashed #a5b4fc; border-radius: 14px; background: #f8faff; cursor: pointer; text-align: center; }
.fi-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fi-subir span { font-weight: 800; color: #4338ca; }
.fi-subir small { color: #64748b; max-width: 46ch; }
.fi-lienzo-marco { position: relative; border-radius: 16px; overflow: hidden; border: 1.5px solid #e2e8f0;
  background-color: #fff; background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%), linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.fi-lienzo { display: block; width: 100%; aspect-ratio: 3 / 1; touch-action: none; position: relative; z-index: 1; }
.fi-lienzo.dibujo { cursor: crosshair; }
.fi-linea { position: absolute; left: 8%; right: 8%; bottom: 22%; border-top: 1.5px dashed #94a3b8; }
.fi-guia { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #94a3b8; font-size: 18px; font-weight: 600; pointer-events: none; }
.fi-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fi-peso { flex: 1 1 220px; font-size: 12.5px; }
.fi-vista { display: grid; gap: 12px; }
.fi-boletin { padding: 22px 16px 16px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; box-shadow: inset 0 3px 0 #1d3a9e; }
.fi-boletin-firma { display: grid; justify-items: center; text-align: center; }
.fi-boletin-img { display: grid; place-items: end center; height: 64px; width: 100%; }
.fi-boletin-img img { max-height: 64px; max-width: 80%; }
.fi-boletin-linea { width: 78%; border-top: 1px solid #0f172a; margin-bottom: 4px; }
.fi-boletin-firma strong { font-size: 13px; }
.fi-boletin-firma small { color: #64748b; font-size: 12px; }
.fi-quitar { color: #b91c1c; }
.fi-consejos { margin: 0; padding-left: 18px; color: #475569; font-size: 13px; display: grid; gap: 4px; }
@media (max-width: 900px) { .fi-rejilla { grid-template-columns: 1fr; } }
/* ===== Licencia: estado e historial ===== */
.li-estado { display: flex; align-items: center; gap: 18px; }
.li-anillo { --c: #94a3b8; width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--pct) * 1%), #e2e8f0 0); }
.li-estado.activa .li-anillo { --c: #16a34a; }
.li-estado.por-vencer .li-anillo { --c: #f59e0b; }
.li-anillo span { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: grid; place-items: center; align-content: center; line-height: 1; }
.li-anillo b { font-size: 24px; font-weight: 800; color: #0f172a; }
.li-anillo small { font-size: 11px; color: #64748b; margin-top: 2px; }
.li-estado-txt { display: grid; gap: 4px; min-width: 0; }
.li-estado-txt h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.li-estado-txt p { margin: 0; }
.li-hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.li-hist-cab .dc-titulo { margin: 0; }
.li-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.li-item { --c: #64748b; --suave: #f1f5f9; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px 14px 0; }
.li-item + .li-item { border-top: 1px dashed #e2e8f0; }
.li-item.e-vigente { --c: #16a34a; --suave: #dcfce7; }
.li-item.e-programada { --c: #2563eb; --suave: #dbeafe; }
.li-item.e-vencida { --c: #64748b; --suave: #f1f5f9; }
.li-item.e-reembolsada { --c: #dc2626; --suave: #fee2e2; }
.li-punto { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--suave); color: var(--c); font-weight: 800; font-size: 16px; }
.li-cuerpo { display: grid; gap: 7px; min-width: 0; }
.li-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.li-codigo { padding: 3px 10px; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 12.5px; letter-spacing: .06em; }
.li-dur { padding: 3px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12.5px; font-weight: 700; }
.li-plan { font-size: 12.5px; color: #64748b; }
.li-estado-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--suave); color: var(--c); font-size: 12px; font-weight: 800; }
.li-vigencia { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #334155; }
.li-barra { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.li-barra i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.li-meta { margin: 0; font-size: 12.5px; color: #64748b; }
.li-meta b { color: #334155; font-weight: 600; }
.li-recibos { display: grid; gap: 6px; justify-items: end; }
.li-sin-recibo { font-size: 12px; color: #94a3b8; padding: 4px 10px; border: 1px dashed #cbd5e1; border-radius: 999px; }
@media (max-width: 700px) { .li-item { grid-template-columns: auto minmax(0, 1fr); } .li-recibos { grid-column: 2; justify-items: start; } .li-estado-pill { margin-left: 0; } }
/* ===== Elegir clase: barra de búsqueda/filtro y secciones plegables ===== */
.elegir-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 16px; position: sticky; top: 8px; z-index: 5; }
.elegir-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.elegir-buscar input { border: 0; background: transparent; padding: 9px 0; width: 100%; font: inherit; outline: none; box-shadow: none; }
.elegir-filtro button { border: 0; font: inherit; cursor: pointer; }
.elegir-acciones { display: flex; gap: 6px; }
.elegir-sin-resultado { width: 100%; margin: 0; }
details.elegir-grupo > summary { list-style: none; cursor: pointer; }
details.elegir-grupo > summary::-webkit-details-marker { display: none; }
.elegir-grupo-cab { position: relative; }
.elegir-grupo-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.elegir-grupo-barra { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.elegir-grupo-barra i { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.g-completo .elegir-grupo-barra i { background: #16a34a; }
.elegir-grupo-cuenta { flex: none; padding: 4px 10px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 13px; }
.elegir-grupo-cuenta b { font-size: 15px; }
.g-completo .elegir-grupo-cuenta { background: #dcfce7; color: #15803d; }
.g-parcial .elegir-grupo-cuenta { background: #fef3c7; color: #b45309; }
.g-pendiente .elegir-sello { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.g-completo .elegir-sello { background: linear-gradient(135deg, #15803d, #22c55e); }
.elegir-flecha { flex: none; color: var(--secundario); transition: transform .15s; }
details.elegir-grupo:not([open]) .elegir-flecha { transform: rotate(-90deg); }
details.elegir-grupo:not([open]) > summary { border-bottom: 0; }
.elegir-grupo-cab:hover { background: var(--fondo); }
.elegir-secciones.plegables { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.elegir-secciones.plegables details[open] { grid-column: 1 / -1; }
.elegir-secciones.plegables details[open] .elegir-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.elegir-secciones.plegables details[open] .elegir-lista li + li { border-top: 0; }
.elegir-secciones.plegables details[open] .elegir-lista li { border-bottom: 1px solid var(--linea-suave); }
.elegir-fila { padding: 10px 18px; }
@media (max-width: 700px) { .elegir-barra { position: static; } .elegir-secciones.plegables details[open] .elegir-lista { grid-template-columns: 1fr; } }
/* Botón secundario sobre el encabezado: más sólido para que no se mezcle con el círculo decorativo. */
.encabezado .btn-sec { background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* ===== Estudiantes ===== */
.est-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.est-kpi { --c: #1d4ed8; --s: #dbeafe; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--linea-suave); box-shadow: var(--sombra); }
.est-kpi span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s); font-size: 19px; color: var(--c); font-weight: 800; }
.est-kpi b { font-size: 22px; line-height: 1.1; color: var(--c); }
.est-kpi small { font-size: 12.5px; color: var(--secundario); }
.k-rosa { --c: #be185d; --s: #fce7f3; } .k-celeste { --c: #0369a1; --s: #e0f2fe; } .k-naranja { --c: #c2410c; --s: #ffedd5; } .k-verde { --c: #15803d; --s: #dcfce7; }
.est-nombre { display: inline-flex; align-items: center; gap: 10px; }
.est-av { width: 32px; height: 32px; font-size: 12px; flex: none; }
.est-av.f { background: #fce7f3; color: #be185d; } .est-av.m { background: #e0f2fe; color: #0369a1; }
/* ===== Secciones ===== */
.sc-resumen { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-resumen span { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linea-suave); font-size: 13.5px; color: var(--secundario); }
.sc-resumen b { color: var(--marino); font-size: 15px; }
.sc-resumen .sc-alerta { background: #fff7ed; border-color: #fed7aa; color: #c2410c; font-weight: 600; }
.sc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.contenedor .sc-rejilla > .tarjeta + .tarjeta, .sc-rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.sc-tarjeta { display: grid; gap: 14px; padding: 18px; color: inherit; border-top: 4px solid var(--azul); transition: transform .15s, box-shadow .15s; }
.sc-tarjeta:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.sc-cab { display: flex; align-items: center; gap: 12px; }
.sc-titulo { flex: 1; min-width: 0; }
.sc-titulo h2 { font-size: 18px; margin: 0; }
.sc-abrir { font-size: 13.5px; font-weight: 700; color: var(--azul); opacity: .75; }
.sc-tarjeta:hover .sc-abrir { opacity: 1; }
.sc-titular { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); }
.sc-titular > span:last-child { display: grid; min-width: 0; }
.sc-titular small { font-size: 11.5px; }
.sc-titular strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sin { background: #ffedd5; color: #c2410c; }
.sc-falta { color: #c2410c; }
.sc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-datos span { display: grid; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea-suave); }
.sc-datos b { font-size: 20px; color: var(--marino); line-height: 1.1; }
.sc-datos small { font-size: 12px; color: var(--secundario); }
.sc-plantilla { margin: 0; font-size: 12px; color: var(--secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Usuarios ===== */
.us-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.us-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.us-total { padding: 2px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--marino); font-size: 13px; }
.us-buscar { width: 280px; max-width: 100%; }
.us-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.us-rol { --c: #334155; --s: #f1f5f9; border: 1px solid transparent; background: var(--s); color: var(--c); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.us-rol b { margin-left: 4px; }
.us-rol.activo { border-color: var(--c); box-shadow: 0 0 0 2px var(--s); }
.us-insignia { --c: #334155; --s: #f1f5f9; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--s); color: var(--c); font-size: 12.5px; font-weight: 700; }
.r-director { --c: #1e3a8a; --s: #dbeafe; } .r-docente { --c: #15803d; --s: #dcfce7; } .r-secretaria { --c: #7e22ce; --s: #f3e8ff; }
.r-coordinador { --c: #b45309; --s: #fef3c7; } .r-pendiente { --c: #c2410c; --s: #ffedd5; }
/* Cuadro de honor: mejor índice por sección sin cortar el nombre. */
.honor-secciones { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
.honor-seccion-item { align-items: center; }
.honor-seccion-estudiante { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
/* ===== Eliminar estudiante ===== */
.est-borrar { color: #b91c1c; }
.est-borrar:hover { background: #fee2e2; }
.est-zona-peligro { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #fecaca; background: #fff5f5; }
.est-zona-peligro p { margin: 4px 0 0; font-size: 13.5px; }
.dlg-eliminar { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 26px; box-shadow: 0 24px 60px rgba(15,23,42,.35); }
.dlg-eliminar::backdrop { background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-eliminar form { display: grid; gap: 12px; }
.dlg-eliminar h2 { margin: 0; font-size: 20px; }
.dlg-eliminar p { margin: 0; color: var(--secundario); font-size: 14.5px; }
.dlg-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fee2e2; font-size: 24px; }
.dlg-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* ===== Roles ===== */
.c-azul { --c: #1d4ed8; --s: #dbeafe; } .c-verde { --c: #15803d; --s: #dcfce7; } .c-morado { --c: #7e22ce; --s: #f3e8ff; }
.c-naranja { --c: #c2410c; --s: #ffedd5; } .c-rosa { --c: #be185d; --s: #fce7f3; } .c-celeste { --c: #0369a1; --s: #e0f2fe; }
.c-rojo { --c: #b91c1c; --s: #fee2e2; } .c-gris { --c: #475569; --s: #f1f5f9; }
.rl-h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-h2 small { font-size: 13px; font-weight: 400; }
.rl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.contenedor .rl-rejilla > .tarjeta + .tarjeta, .rl-rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.rl-tarjeta { display: grid; gap: 12px; border-top: 4px solid var(--c); }
.rl-cab { display: flex; align-items: center; gap: 12px; }
.rl-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--s); font-size: 20px; flex: none; }
.rl-tit { min-width: 0; }
.rl-tit h3 { margin: 0; font-size: 17px; color: var(--c); }
.rl-tit small { font-size: 12.5px; }
.rl-desc { margin: 0; font-size: 13.5px; color: var(--secundario); }
.rl-modulos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-modulos li { padding: 4px 10px; border-radius: 999px; background: var(--s); color: var(--c); font-size: 12px; font-weight: 600; }
.rl-sistema { background: linear-gradient(180deg, #fff, #fafbff); }
.rl-acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--linea-suave); }
.rl-borrar { color: #b91c1c; }
.rl-editar { padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.rl-editar .rl-fila, .rl-editar .rl-bases { grid-template-columns: 1fr; }
.rl-editar .rl-checks { grid-template-columns: 1fr; }
.rl-form { margin-bottom: 8px; }
.rl-campos { display: grid; gap: 14px; margin-top: 12px; }
.rl-fila { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.rl-grupo { border: 0; padding: 0; margin: 0; }
.rl-grupo legend { font-size: 13px; font-weight: 700; color: var(--secundario); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.rl-bases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rl-base { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px; cursor: pointer; }
.rl-base:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); }
.rl-base span { display: grid; } .rl-base small { font-size: 12px; color: var(--secundario); }
.rl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rl-check { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--fondo); font-size: 14px; cursor: pointer; }
.rl-check:has(input:checked) { background: #dcfce7; color: #14532d; font-weight: 600; }
.rl-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-color input { position: absolute; opacity: 0; }
.rl-color span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 3px #fff; border: 2px solid transparent; }
.rl-color input:checked + span { border-color: var(--c); }
.rl-color input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.rl-pie { display: flex; justify-content: flex-end; }
.us-insignia.c-azul, .us-rol.c-azul, .us-insignia[class*=" c-"], .us-rol[class*=" c-"] { background: var(--s); color: var(--c); }
@media (max-width: 760px) { .rl-fila, .rl-bases { grid-template-columns: 1fr; } }
.rl-fila { align-items: end; }
.rl-color span { box-shadow: none; border: 0; margin: 4px; }
.rl-color input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.rl-fijo { margin: 0; font-size: 12.5px; color: var(--secundario); padding-top: 10px; border-top: 1px dashed var(--linea-suave); }
.rl-ajustado { margin-left: auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--s); color: var(--c); font-size: 11px; font-weight: 700; }
.rl-acciones { flex-wrap: wrap; }
.rl-acciones .rl-borrar { margin-left: auto; }
.rl-pie { flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rl-clave { flex: 1 1 260px; margin: 0; }
.rl-clave .error { display: block; margin-top: 4px; }
.rl-quitados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: #fff7ed; border: 1px dashed #fdba74; font-size: 14px; }
.us-propios { display: block; margin-top: 3px; font-size: 11.5px; color: #b45309; }
/* ===== Registro completo: barra de avance ===== */
.rc-caja { margin-top: 12px; padding: 14px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; }
.rc-caja.rc-listo { background: #f0fdf4; border-color: #bbf7d0; }
.rc-cab { display: flex; align-items: center; gap: 14px; }
.rc-pct { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 4px solid #f59e0b; color: #b45309; font-size: 12px; font-weight: 700; line-height: 1; }
.rc-pct b { font-size: 20px; }
.rc-listo .rc-pct { border-color: #16a34a; color: #15803d; }
.rc-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rc-txt small { color: var(--secundario); font-size: 12.5px; }
.rc-listo .rc-txt strong { color: #15803d; }
.rc-barra, .rc-mini { height: 10px; border-radius: 999px; background: #fde7c7; overflow: hidden; }
.rc-barra span, .rc-mini span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #f97316); transition: width .4s; }
.rc-listo .rc-barra { background: #dcfce7; } .rc-listo .rc-barra span { background: linear-gradient(90deg, #22c55e, #16a34a); }
.rc-mini { height: 6px; background: #f1f5f9; }
.rc-parte.ok .rc-mini span { background: #16a34a; }
.rc-detalle { margin-top: 10px; }
.rc-detalle summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--marino); }
.rc-partes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.rc-parte { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--linea-suave); }
.rc-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #fff7ed; font-size: 15px; }
.rc-parte.ok .rc-ico { background: #dcfce7; color: #15803d; font-weight: 800; }
.rc-cuerpo { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rc-fila { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.rc-num { font-weight: 700; color: #b45309; }
.rc-parte.ok .rc-num { color: #15803d; }
.rc-num small { font-weight: 400; color: var(--secundario); }
.rc-faltan { margin: 2px 0 0; padding-left: 18px; font-size: 12.5px; color: #9a3412; display: grid; gap: 2px; }
.rc-ir { font-size: 12.5px; font-weight: 700; justify-self: start; }
.rep-acciones .btn:disabled { opacity: .45; cursor: not-allowed; }
.rc-pct { display: flex; align-items: baseline; justify-content: center; gap: 1px; }
/* Barra del registro completo: ocupa todo el ancho de la fila, debajo del título y los botones. */
.rep-doc > .rc-caja { grid-column: 1 / -1; margin-top: 8px; }
.rc-pct { display: grid; place-items: center; width: 64px; height: 64px; }
.rc-pct > span { display: inline-flex; align-items: baseline; line-height: 1; }
.rc-pct b { font-size: 21px; font-weight: 800; }
.rc-pct small { font-size: 12px; font-weight: 700; margin-left: 1px; }
.rc-txt strong { font-size: 15px; }
.rc-partes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rc-parte { align-items: flex-start; }
.rc-fila strong { min-width: 0; }
.rc-num { white-space: nowrap; }
.rc-faltan li { overflow-wrap: anywhere; }
.rc-partes { align-items: start; }
.rc-fila { flex-direction: column; gap: 2px; }
.rc-datos { font-weight: 500; font-size: 13px; color: var(--secundario); }
/* ===== Reportes: panel lateral real ===== */
.rl-impresora h2 { display: flex; align-items: center; gap: 8px; }
.rl-impresora h2 svg { width: 18px; height: 18px; }
.ri-agente { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: #fef2f2; }
.ri-agente.en-linea { background: #f0fdf4; }
.ri-agente small { display: block; font-size: 12px; color: var(--secundario); }
.ri-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px #fee2e2; }
.en-linea .ri-punto { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.ri-sin { margin: 8px 0 0; font-size: 13px; color: var(--secundario); }
.rd-lista .rep-reciente-info { display: grid; gap: 1px; min-width: 0; }
.rd-lista .rep-reciente-info small { font-size: 12px; }
.rd-aviso { color: #b45309; font-weight: 600; }
.rd-error { color: #b91c1c; }
.rz-resumen { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 13.5px; }
.rz-resumen.listo { background: #f0fdf4; color: #15803d; }
.rz-secciones { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.rz-sec { display: grid; grid-template-columns: 54px 1fr 44px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: inherit; font-size: 13px; }
.rz-sec:hover { background: var(--fondo); text-decoration: none; }
.rz-sec.actual { background: var(--azul-suave); font-weight: 700; }
.rz-barra { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.rz-barra i { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.rz-sec.ok .rz-barra i { background: #16a34a; }
.rz-pct { text-align: right; font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
.rz-sec.ok .rz-pct { color: #15803d; }
.rep-panel .btn:disabled { opacity: .5; cursor: not-allowed; }
.rd-lista .rep-reciente-info strong { white-space: normal; overflow: visible; text-overflow: clip; }
/* ===== Impresión: guía en 3 pasos ===== */
.im-guia .sec { margin: 6px 0 0; }
.im-guia.completa { border: 1px solid #bbf7d0; }
.im-guia-cab { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.im-avance { flex: none; display: grid; justify-items: center; padding: 8px 14px; border-radius: 14px; background: #eff6ff; color: var(--marino); text-align: center; }
.im-avance strong { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.im-avance strong small { font-size: 14px; opacity: .6; }
.im-avance span { font-size: 12px; font-weight: 600; }
.im-avance.ok { background: #dcfce7; color: #15803d; }
.im-barra { height: 6px; margin-top: 14px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.im-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), #22c55e); transition: width .4s; }
.im-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: stretch; }
.im-pasos > li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--fondo); border: 1px solid var(--linea-suave); }
.im-pasos > li.actual { background: #fff; border: 2px solid var(--azul); box-shadow: 0 6px 18px rgba(37, 99, 235, .12); }
.im-pasos > li.hecho { background: #f0fdf4; border-color: #bbf7d0; }
.im-pasos > li > p { margin: 0; font-size: 13px; color: var(--secundario); line-height: 1.5; }
.im-paso-cab { display: flex; align-items: center; gap: 10px; }
.im-paso-cab strong { font-size: 15px; }
.im-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #cbd5e1; color: #fff; font-weight: 800; }
.actual .im-num { background: var(--azul); }
.hecho .im-num { background: #16a34a; }
.im-accion { margin-top: auto; align-self: flex-start; }
.im-so-tabs { display: none; }
.im-so.con-js .im-so-tabs { display: inline-flex; }
.im-so-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 700; }
.im-so-panel { margin-top: 8px; }
.im-so.con-js .im-so-panel { display: none; }
.im-so.con-js .im-so-panel.so-actual { display: block; }
.im-so.con-js .im-so-nombre { display: none; }
.im-so-nombre { font-size: 13px; }
.im-mini { margin: 4px 0 6px; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.im-mini li { margin: 2px 0; }
.im-so-panel small { display: block; font-size: 12px; color: var(--terciario, #94a3b8); }
.im-ventana { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #1e3a8a, #2563eb); color: #fff; }
.im-ventana-ico { font-size: 26px; }
.im-ventana strong { display: block; font-size: 14px; }
.im-ventana-pasos { display: block; font-size: 13px; color: #dbeafe; }
.im-ventana small { display: block; font-size: 12px; color: #bfdbfe; }
.im-final { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--marino); }
.im-final.ok { color: #15803d; }
.im-nuevo { border: 2px solid var(--azul); background: #f5f8ff; }
.im-nuevo h2 { margin: 0; font-size: 18px; }
.im-manual summary { cursor: pointer; font-size: 13px; color: var(--secundario); }
.im-equipo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; background: #fef2f2; }
.im-equipo.en-linea { background: #f0fdf4; }
.im-equipo.en-linea .ri-punto { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.im-equipo.apagado { background: var(--fondo); opacity: .8; }
.im-equipo-txt { flex: 1; min-width: 0; }
.im-equipo-txt small { display: block; font-size: 12.5px; color: var(--secundario); }
.im-equipo-acc { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
@media (max-width: 900px) { .im-pasos { grid-template-columns: 1fr; } .im-equipo { flex-wrap: wrap; } .im-guia-cab { flex-direction: column; } }
/* Impresión: descargar eligiendo el sistema */
.im-descargar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.im-descargar-txt { font-size: 13px; font-weight: 600; color: var(--secundario); }
.im-descargar-so { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(118,118,128,.12); }
.im-descargar-so button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; color: var(--texto); cursor: pointer; white-space: nowrap; }
.im-descargar-so button:hover { background: #fff; }
.im-descargar-so button.so-actual { background: var(--azul); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.im-descargar-so button.so-actual::after { content: ' ✓'; }
.im-pasos .im-descargar { flex-direction: column; align-items: flex-start; }
/* En la tarjeta angosta del paso 2 los tres sistemas ocupan todo el ancho y nunca se salen. */
.im-pasos .im-descargar-so { display: flex; width: 100%; max-width: 100%; }
.im-pasos .im-descargar-so button { flex: 1 1 auto; min-width: 0; padding: 6px 4px; }
.im-pasos .im-descargar-so button > span[aria-hidden] { display: none; }
/* Impresión: editar y eliminar equipo */
.im-editar-btn { margin-left: 4px; padding: 2px 8px; font-size: 12px; }
.im-editar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 2px; }
.im-editar[hidden] { display: none; }
.im-editar input { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--linea, #d2d2d7); border-radius: 8px; font: inherit; font-size: 14px; }
.im-editar .error { width: 100%; color: var(--rojo); }
.im-borrar { color: var(--rojo, #d70015); }

/* Ficha del estudiante (estudiantes/ficha) */
.fi-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--secundario); }
.fi-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fi-metricas { margin-top: 18px; }
.fi-tutor { font-weight: 600; margin-top: 10px; line-height: 1.3; }
.fi-bajo { color: var(--rojo); }
.fi-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .fi-columnas { grid-template-columns: 1fr; } }
.fi-senales { margin-bottom: 18px; }
.fi-notas td.fi-parcial { color: var(--terciario, #86868b); }
.fi-notas td.fi-parcial.fi-bajo { color: var(--rojo); opacity: .75; }
.fi-rp { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700; background: var(--naranja-suave); color: var(--naranja); vertical-align: middle; }
.fi-seg-form { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: start; }
@media (max-width: 700px) { .fi-seg-form { grid-template-columns: 1fr; } }
.fi-seg { border-top: 1px solid var(--linea, #d2d2d7); padding: 12px 0 4px; margin-top: 12px; }
.fi-seg-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fi-seg-cab form { margin-left: auto; }
.fi-seg p { margin-top: 6px; white-space: pre-line; }
.fi-com-acciones { display: flex; gap: 8px; }
.fi-qr { width: 200px; height: 200px; margin-inline: auto; background: #fff; padding: 6px; border-radius: 10px; }
.fi-enlace { width: 100%; font-size: 12px; }
.fi-lateral textarea, .fi-principal textarea { width: 100%; }

/* Ventana «Enlace de registro para docentes» (usuarios/_registro_docentes) */
.rd-ventana { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; margin-bottom: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(242,106,33,.35) 0%, rgba(242,106,33,0) 45%), linear-gradient(135deg, #14287a 0%, #1d3a9e 55%, #2b4fc7 100%);
  box-shadow: 0 18px 40px -18px rgba(20,40,122,.55); }
.rd-ventana::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.rd-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.rd-icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.rd-titulos { flex: 1; min-width: 220px; }
.rd-titulos h3 { color: #fff; margin: 0; font-size: 19px; }
.rd-titulos p { margin: 2px 0 0; color: rgba(255,255,255,.78); font-size: 14px; }
.rd-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.rd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-pista { width: 52px; height: 30px; border-radius: 99px; background: rgba(255,255,255,.25); position: relative; transition: background .2s; }
.rd-bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.rd-switch input:checked + .rd-pista { background: #34c759; }
.rd-switch input:checked + .rd-pista .rd-bola { transform: translateX(22px); }
.rd-switch input:focus-visible + .rd-pista { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
.rd-estado { font-weight: 600; font-size: 14px; min-width: 62px; }
.rd-cuerpo { display: flex; gap: 18px; align-items: stretch; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.rd-enlace-caja { flex: 1; min-width: 260px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 16px; backdrop-filter: blur(8px); }
.rd-pasos { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.85); }
.rd-pasos span { display: inline-flex; align-items: center; gap: 6px; }
.rd-pasos b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #fff; font-size: 12px; }
.rd-enlace { display: flex; gap: 8px; margin-top: 12px; }
.rd-enlace .control { flex: 1; min-width: 0; background: rgba(255,255,255,.95); border-color: transparent; font-size: 13px; }
.rd-enlace .btn { background: var(--acento); border-color: var(--acento); }
.rd-compartir { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.rd-compartir .btn-sec { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
.rd-compartir .btn-texto { color: rgba(255,255,255,.85); }
.rd-qr { width: 150px; height: 150px; flex: none; background: #fff; border-radius: 16px; padding: 8px; }
.rd-cerrado-nota { margin: 14px 0 0; color: rgba(255,255,255,.8); font-size: 14px; position: relative; z-index: 1; }
.rd-solicitudes { margin-top: 18px; background: #fff; color: var(--texto, #1d1d1f); border-radius: 16px; padding: 14px 16px; position: relative; z-index: 1; }
.rd-solicitudes h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.rd-contador { background: var(--acento); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; }
.rd-solicitudes ul { list-style: none; margin: 0; padding: 0; }
.rd-solicitudes li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea, #e5e5ea); }
.rd-solicitudes li:first-child { border-top: 0; }
.rd-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-quien span, .rd-quien small { color: var(--secundario); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.rd-acciones { display: flex; gap: 6px; }
.rd-aprobar { background: #34c759; border-color: #34c759; }
.rd-rechazar { color: var(--rojo); }
@media (max-width: 600px) { .rd-ventana { padding: 18px; border-radius: 18px; } .rd-qr { margin-inline: auto; } .rd-solicitudes li { flex-wrap: wrap; } }

/* Panel de la dirección: tarjetas «Registro de docentes» y «Portal de familias» */
.ae-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
@media (max-width: 900px) { .ae-rejilla { grid-template-columns: minmax(0, 1fr); } }
.ae-tarjeta { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 34px -18px rgba(20,40,122,.55); }
.ae-docentes { background: radial-gradient(120% 140% at 100% 0%, rgba(242,106,33,.35), rgba(242,106,33,0) 45%), linear-gradient(135deg, #14287a, #1d3a9e 60%, #2b4fc7); }
.ae-familias { background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), linear-gradient(135deg, #c93400, #f26a21 60%, #f7a21b); box-shadow: 0 16px 34px -18px rgba(201,52,0,.55); }
.ae-cab { display: flex; align-items: center; gap: 12px; }
.ae-ico { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: rgba(255,255,255,.16); }
.ae-tit { flex: 1; min-width: 0; }
.ae-tit h3 { color: #fff; margin: 0; font-size: 17px; }
.ae-tit p { margin: 2px 0 0; color: rgba(255,255,255,.8); font-size: 13px; }
.ae-enlace { display: flex; gap: 6px; flex-wrap: wrap; }
.ae-enlace .control { flex: 1 1 180px; min-width: 0; font-size: 12px; background: rgba(255,255,255,.95); border-color: transparent; }
.ae-enlace .btn { background: rgba(255,255,255,.95); color: #14287a; border-color: transparent; }
.ae-enlace .ae-wa { background: #25d366; color: #fff; }
.ae-enlace .btn-sec { background: rgba(255,255,255,.18); color: #fff; }
.ae-nota { margin: 0; font-size: 13px; color: rgba(255,255,255,.82); }
.ae-pie { margin: 0; margin-top: auto; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ae-pie:hover { text-decoration: underline; color: #fff; }
.ae-badge { background: #fff; color: #c93400; border-radius: 99px; padding: 0 8px; font-weight: 700; }
.ae-ok { color: rgba(255,255,255,.9); font-weight: 500; }
.ae-tarjeta .rd-switch, .ae-tarjeta .rd-estado, .rd-ventana .rd-switch, .rd-ventana .rd-estado { color: #fff; }
.ae-enlace .btn-sec { background: rgba(255,255,255,.25); color: #fff; font-weight: 600; }
.ae-tarjeta .ae-enlace .btn.btn-sec { background: rgba(0,0,0,.2); color: #fff; }

/* Módulo «Docentes y familias» (accesos/index) */
.ac-rejilla { margin-top: 4px; }
.ac-cuerpo { display: flex; gap: 14px; align-items: flex-start; }
.ac-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-etq { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.ac-texto { margin: 0; font-size: 13px; color: rgba(255,255,255,.88); }
.ac-texto strong { color: #fff; }
.ac-aviso { margin: 0; background: rgba(0,0,0,.2); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.ac-qr { flex: none; width: 120px; height: 120px; background: #fff; border-radius: 14px; padding: 6px; }
.ac-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ac-dos { grid-template-columns: minmax(0, 1fr); } .ac-cuerpo { flex-direction: column; } .ac-qr { align-self: center; } }
.ac-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea, #e5e5ea); }
.ac-fila:first-of-type { margin-top: 8px; }
.ac-fila-s { padding: 8px 0; }
.ac-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-quien span { color: var(--secundario); font-size: 13px; overflow-wrap: anywhere; }
.ac-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 18px; border-radius: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #14287a, #2b4fc7); box-shadow: 0 12px 26px -16px rgba(20,40,122,.6); }
.ac-banner:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }
.ac-banner > span:nth-child(2) { flex: 1; font-size: 14px; }
.ac-dos > .tarjeta { margin: 0; }

/* Mensajes de WhatsApp (centro/mensajes y ficha del estudiante) */
.wa-como { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.wa-como div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.wa-como b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 13px; }
@media (max-width: 800px) { .wa-como { grid-template-columns: 1fr; } }
.wa-plantillas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .wa-plantillas { grid-template-columns: minmax(0, 1fr); } }
.wa-plantillas .tarjeta { margin: 0; }
.wa-plantilla { display: flex; flex-direction: column; gap: 10px; }
.wa-apagada { opacity: .6; }
.wa-cab { display: flex; align-items: center; gap: 10px; }
.wa-cab h3 { flex: 1; margin: 0; font-size: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; background: #e9fbef; display: grid; place-items: center; font-size: 18px; }
.wa-activa { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.wa-plantilla textarea { width: 100%; font-size: 14px; line-height: 1.45; }
.wa-vista { background: #efeae2; border-radius: 12px; padding: 10px 12px; }
.wa-vista-etq { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #667781; margin-bottom: 6px; }
.wa-burbuja { display: block; background: #d9fdd3; color: #111b21; border-radius: 10px 10px 10px 2px; padding: 8px 11px; font-size: 13.5px; line-height: 1.45; white-space: pre-line; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.wa-restaurar { font-size: 13px; color: var(--secundario); display: inline-flex; gap: 6px; align-items: center; }
.wa-variables { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; font-size: 13px; color: var(--secundario); }
.wa-variables code { cursor: pointer; background: var(--azul-suave); color: var(--azul); padding: 1px 6px; border-radius: 6px; }
.wa-guardar { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 16px; }

.wa-ficha h3 { margin: 0; }
.wa-paso { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--secundario); margin-bottom: 8px; }
.wa-para { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wa-para .wa-paso { width: 100%; }
.wa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--linea, #d2d2d7); border-radius: 12px; cursor: pointer; font-size: 14px; }
.wa-chip small { color: var(--secundario); }
.wa-chip:has(input:checked) { border-color: #25d366; background: #e9fbef; }
.wa-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 800px) { .wa-opciones { grid-template-columns: minmax(0, 1fr); } }
.wa-opcion { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid var(--linea, #d2d2d7); border-radius: 14px; cursor: pointer; background: #fff; }
.wa-opcion input { position: absolute; top: 14px; right: 14px; }
.wa-opcion:has(input:checked) { border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.18); }
.wa-opcion-cab { font-weight: 600; font-size: 14px; padding-right: 24px; }
.wa-opcion .wa-burbuja { font-size: 12.5px; max-height: 120px; overflow: auto; }
.wa-libre summary { cursor: pointer; font-size: 14px; color: var(--azul); }
.wa-libre textarea { width: 100%; }
.wa-enviar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.wa-boton { background: #25d366; border-color: #25d366; }
.wa-boton:hover { background: #1ebe5a; border-color: #1ebe5a; }
.wa-historial { border-top: 1px solid var(--linea, #e5e5ea); padding: 8px 0; }
.wa-historial summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.wa-historial summary span:first-child { font-weight: 600; }
.wa-historial .wa-burbuja { margin-top: 8px; }
.riesgo-wa { display: inline; }

/* Apoyo a familias por bajo rendimiento (dueño y dirección) */
.ap-admin, .ap-centro-cab { display: flex; gap: 14px; align-items: flex-start; }
.ap-admin h3, .ap-centro-cab h3 { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-admin-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; background: #e6eeff; display: grid; place-items: center; font-size: 22px; }
.ap-atencion { margin: 14px 0 6px; display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ap-atencion .control { flex: 1; min-width: 0; }
.ap-cita { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linea, #e5e5ea); }
.ap-cita .ac-quien { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.ap-comentario { font-style: italic; }
.ap-atender { display: flex; gap: 8px; align-items: center; flex: 1 1 300px; max-width: 460px; }
.ap-atender .control { flex: 1; min-width: 0; }

/* Módulos de centros (panel del dueño) */
.md-barra { display: inline-block; width: 80px; height: 6px; border-radius: 99px; background: var(--linea, #e5e5ea); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.md-barra i { display: block; height: 100%; background: #22c55e; }
.md-grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--secundario); margin: 22px 0 10px; }
.md-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.md-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 12px; text-align: left; font: inherit; color: inherit; background: #fff;
  border: 1.5px solid var(--linea, #e5e5ea); border-radius: 18px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.md-tarjeta:hover { border-color: #b8c6f0; box-shadow: 0 8px 24px -14px rgba(20,40,122,.4); transform: translateY(-1px); }
.md-tarjeta:focus-visible { outline: 3px solid #66b0ff; outline-offset: 2px; }
.md-ico { width: 42px; height: 42px; border-radius: 13px; background: #eef3ff; display: grid; place-items: center; font-size: 21px; grid-row: span 2; }
.md-texto { display: grid; gap: 3px; }
.md-texto strong { font-size: 15px; }
.md-texto small { color: var(--secundario); font-size: 12.5px; line-height: 1.4; }
.md-req { color: #5a6fb8 !important; }
.md-nuevo { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; background: #f26a21; color: #fff; padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; }
.md-estado { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-top: 4px; }
.md-switch { width: 38px; height: 22px; border-radius: 99px; background: #d1d1d6; position: relative; transition: background .15s; }
.md-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.md-on .md-switch { background: #22c55e; }
.md-on .md-switch i { left: 19px; }
.md-on .md-estado { color: #15803d; }
.md-off { background: #fafafa; }
.md-off .md-ico { filter: grayscale(1); opacity: .6; }
.md-off .md-estado { color: var(--secundario); }
.md-base .md-estado { color: var(--secundario); }
.md-error { background: #fde8e8; color: #b91c1c; border-radius: 14px; padding: 12px 16px; font-size: 14px; }
.md-dlg { width: min(500px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,.35); }
.md-dlg::backdrop { background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.md-dlg-cab { display: flex; gap: 12px; align-items: center; }
.md-dlg-cab .md-ico { grid-row: auto; }
.md-dlg-cab small { color: var(--secundario); font-size: 12px; }
.md-dlg h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.25; }
.md-dlg h3 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--secundario); }
.md-veredicto { margin-top: 16px; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 15px; }
.md-si { background: #e8f8ee; color: #15803d; }
.md-no { background: #fde8e8; color: #b91c1c; }
.md-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.md-dlg-botones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Menú lateral en bloques: panel del dueño y centro, separados y plegables. */
.nav-bloque > summary { list-style: none; cursor: pointer; }
.nav-bloque > summary::-webkit-details-marker { display: none; }
.nav-bloque-cab { display: flex; align-items: center; gap: 10px; margin: 6px 4px 4px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #14287a, #2a4fc4); color: #fff; font-weight: 700; font-size: 14px; }
.nav-bloque-cab small { display: block; font-weight: 500; font-size: 11px; opacity: .75; }
.nav-bloque-cab::after { content: '▾'; margin-left: auto; transition: transform .15s; }
.nav-bloque:not([open]) > .nav-bloque-cab::after { transform: rotate(-90deg); }
.nav-bloque-ico { width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 15px; }
.nav-duenio[open], .nav-duenio:not(details) { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--linea, #e5e5ea); }
.nav-plegable { display: flex; align-items: center; }
.nav-plegable::after { content: '▾'; margin-left: auto; font-size: 12px; transition: transform .15s; }
.nav-ajustes:not([open]) > .nav-plegable::after { transform: rotate(-90deg); }
.nav-plegable:hover { color: var(--texto, #1d1d1f); }

/* ===== Boletines oficiales del MINERD (debajo de los 10 diseños) ===== */
.mn { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; border: 1px solid var(--linea-suave);
  background: radial-gradient(1200px 260px at 0% 0%, #eef4ff 0%, transparent 60%), radial-gradient(900px 240px at 100% 0%, #fff1f6 0%, transparent 55%), var(--superficie); }
.mn::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, #006533, #1d71b8, #c84509, #00a19a, #e8397a, #1d3d71); }
.mn.en-uso { box-shadow: 0 0 0 2.5px #16a34a, 0 16px 30px -18px rgba(22,163,74,.6); }
.mn-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.mn-cab > div:first-child { flex: 1 1 520px; }
.mn-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #1d3d71; background: #e6eefc; }
.mn h2 { margin: 12px 0 8px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; color: var(--texto); }
.mn h2 span { background: linear-gradient(90deg, #1d71b8, #e8397a 55%, #c84509); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mn-cab p { margin: 0; max-width: 760px; color: var(--secundario); font-size: 14.5px; line-height: 1.55; }
.mn-accion { display: grid; gap: 8px; justify-items: start; }
.mn-accion small { color: var(--terciario); font-size: 12.5px; }
.mn-grados { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 22px; }
.mn-grado { border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea-suave); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.mn-grado:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(15,23,42,.45); }
.mn-portada { display: grid; justify-items: center; gap: 2px; padding: 14px 12px 12px; background: linear-gradient(180deg, var(--mn-cl), #fff); border-bottom: 4px solid var(--mn-osc); }
.mn-tit { text-align: center; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; color: var(--mn-osc); }
.mn-num { font-size: 52px; line-height: .95; font-weight: 900; font-style: italic; color: var(--mn-osc); }
.mn-num sup { font-size: 15px; text-decoration: underline; margin-left: 2px; }
.mn-gr { font-size: 22px; line-height: 1; font-weight: 900; color: var(--mn-ac); letter-spacing: -.02em; }
.mn-ciclo { margin-top: 3px; font-size: 9.5px; font-weight: 800; color: var(--mn-osc); letter-spacing: .04em; }
.mn-lineas { display: grid; gap: 4px; width: 78%; margin-top: 8px; }
.mn-lineas i { height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--mn-osc) 25%, transparent); }
.mn-info { padding: 12px 14px 14px; }
.mn-info h3 { margin: 0; font-size: 15.5px; }
.mn-info p { margin: 2px 0 10px; font-size: 12.5px; color: var(--secundario); }
@media (max-width: 640px) { .mn { padding: 20px 16px; } .mn-grados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-grado { position: relative; }
.mn-grado.en-uso { box-shadow: 0 0 0 2.5px #16a34a, 0 16px 30px -18px rgba(22,163,74,.6); }
.mn-portada { position: relative; }
.mn-info form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mn-usar { width: 100%; background: var(--mn-osc); border-color: var(--mn-osc); }
.mn-usa { font-size: 12.5px; font-weight: 700; color: #15803d; }
.mn-quitar { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--rojo); text-decoration: underline; cursor: pointer; }
.mn-ver { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--azul); text-decoration: none; }
.mn-ver:hover { text-decoration: underline; }

/* ===== Actualizaciones del registro ===== */
.act-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.act-pasos li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-suave); font-size: 13.5px; color: var(--secundario); }
.act-pasos b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 13px; }
.act-pasos strong { color: var(--texto); }
.act-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.act-base h3 { margin: 8px 0 4px; font-size: 16px; }
.act-version { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--azul); font-size: 12px; font-weight: 800; white-space: nowrap; }
.act-hist { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea-suave); }
.act-hist:last-child { border-bottom: 0; }
.act-hist > div { flex: 1; display: grid; gap: 2px; }
.act-hist .ter { font-size: 12.5px; }
.act-hist p { margin: 4px 0 0; font-size: 13px; }
.act-borrador { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff7ed; border: 1px solid #fed7aa; }
.act-borrador > div:first-child { display: grid; gap: 4px; flex: 1 1 420px; font-size: 14px; color: #7c2d12; }
.act-bloqueada { background: var(--azul-suave); border-color: #c7d2fe; }
.act-bloqueada > div:first-child { color: var(--marino); }
.act-chip { justify-self: start; display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 12px; font-weight: 800; }
.act-previa { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.act-previa h2, .act-lado h2 { margin: 0 0 12px; font-size: 17px; }
.act-lado { display: grid; gap: 16px; }
.act-cambios { display: grid; gap: 14px; }
.act-grupo h4 { margin: 0 0 6px; font-size: 14px; }
.act-grupo ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.act-grupo s { color: var(--terciario); }
.act-grupo.nuevo h4 { color: var(--verde); }
.act-grupo.quitado h4 { color: var(--rojo); }
.act-dato { display: block; font-size: 12.5px; color: var(--secundario); }
.act-revisiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.act-revisiones li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; }
.act-revisiones li > span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.act-revisiones .r-ok { background: var(--verde-suave); } .act-revisiones .r-ok > span { background: var(--verde); }
.act-revisiones .r-aviso { background: var(--naranja-suave); } .act-revisiones .r-aviso > span { background: var(--naranja); }
.act-revisiones .r-error { background: var(--rojo-suave); } .act-revisiones .r-error > span { background: var(--rojo); }
.act-revisiones .r-sim { outline: 1.5px solid currentColor; outline-offset: -1.5px; }
.act-aplicar textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; }
.act-pendiente { border: 1.5px solid #c7d2fe; }
.act-version-bloque { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.act-version-bloque h3 { margin: 0 0 6px; font-size: 15px; }
.act-version-bloque > p { margin: 0 0 10px; font-size: 13.5px; color: var(--secundario); white-space: pre-line; }
.act-aldia { display: flex; gap: 12px; align-items: center; }
.act-aldia > span { font-size: 28px; }
.act-aldia p { margin: 2px 0 0; }
.aviso-actualizacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 900px) { .act-previa { grid-template-columns: 1fr; } }

/* ---------- Psicología y orientación (bienestar) ---------- */
.bn-nav { margin-bottom: 20px; }
.bn-cuenta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.bn-buscar { display: flex; gap: 8px; min-width: min(420px, 100%); }
.bn-buscar input { flex: 1; }
.bn-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.bn-est { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto); text-decoration: none; padding: 6px 8px; border-radius: 10px; }
.bn-est:hover { background: var(--azul-suave); }
.bn-est .avatar { flex: none; }
.bn-est-datos { display: grid; min-width: 0; }
.bn-est-datos strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-est-datos small { color: var(--secundario); font-size: 12px; }
.bn-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--linea); }
.bn-fila:first-of-type { border-top: 0; }
.bn-fila-enlace { color: var(--texto); text-decoration: none; }
.bn-fila-enlace:hover { background: var(--azul-suave); }
.bn-fila > .bn-est { flex: 1 1 220px; }
.bn-hora { display: grid; text-align: center; min-width: 64px; font-size: 13px; }
.bn-hora small { color: var(--secundario); }
.bn-motivos { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-chico { font-size: 12.5px; }
.bn-alerta { color: var(--rojo); }
.bn-anclas { position: sticky; top: 0; z-index: 2; background: var(--fondo, #f5f5f7); padding: 8px 0; }
.bn-form { margin: 12px 0; }
.bn-form > summary { list-style: none; display: inline-flex; cursor: pointer; }
.bn-form > summary::-webkit-details-marker { display: none; }
.bn-form[open] > summary { margin-bottom: 4px; }
.bn-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bn-check { align-self: end; padding-bottom: 10px; }
.bn-item { border-top: 1px solid var(--linea); padding: 12px 0 6px; }
.bn-item-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bn-item-cab form { margin-left: auto; }
.bn-item-cab form + form { margin-left: 0; }
.bn-texto { margin-top: 6px; white-space: pre-line; line-height: 1.5; font-size: 14px; }
.bn-inactivo { opacity: .55; }
.bn-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.bn-citar { display: flex; gap: 6px; align-items: center; }
.bn-citar select { width: auto; padding: 5px 10px; font-size: 13px; }
.bn-lateral .tarjeta { padding: 18px; }
.bn-accesos { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.bn-accesos li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--linea); }
.bn-accesos small { color: var(--secundario); }
.bn-deriv + .bn-deriv { margin-top: 14px; }
.bn-urgente { box-shadow: inset 4px 0 0 var(--rojo), var(--sombra); }
.bn-atender { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.bn-atender select { width: auto; }
.bn-atender input { flex: 1 1 260px; }
.bn-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.bn-filtros .campo + .campo { margin-top: 0; }
.bn-filtros-botones { display: flex; gap: 6px; }
@media (max-width: 760px) { .bn-filtros { grid-template-columns: 1fr; } .bn-buscar { min-width: 0; width: 100%; } }
.bn-barra { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 36px; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.bn-barra-voc { grid-template-columns: minmax(150px, 1.3fr) 2fr 36px; padding: 6px 0; }
.bn-barra-voc small { display: block; color: var(--secundario); font-size: 11.5px; }
.bn-barra-pista { height: 10px; border-radius: 6px; background: rgba(0,0,0,.06); overflow: hidden; }
.bn-barra-pista span { display: block; height: 100%; border-radius: 6px; background: var(--azul); }
.bn-mes { min-width: 130px; text-align: center; }
.bn-cal-envoltura { padding: 12px; overflow-x: auto; }
.bn-cal { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 4px; min-width: 680px; }
.bn-cal-cab { font-size: 12px; font-weight: 600; color: var(--secundario); text-align: center; padding: 4px 0; }
.bn-cal-dia { min-height: 92px; border-radius: 10px; background: rgba(0,0,0,.025); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.bn-cal-dia.fuera { opacity: .4; }
.bn-cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--azul); }
.bn-cal-num { font-size: 12px; font-weight: 600; }
.bn-cal-cita { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: var(--azul-suave); color: var(--azul); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-cal-cita.e-realizada { background: var(--verde-suave); color: var(--verde); }
.bn-cal-cita.e-cancelada, .bn-cal-cita.e-no_asistio { background: rgba(0,0,0,.05); color: var(--secundario); text-decoration: line-through; }
.bn-prueba-cab, .bn-prueba-fila { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 110px); gap: 8px; align-items: center; }
.bn-prueba-cab { font-size: 12px; font-weight: 600; color: var(--secundario); padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
.bn-prueba-cab span:not(:first-child) { text-align: center; }
.bn-prueba-fila { border: 0; border-bottom: 1px solid var(--linea); margin: 0; padding: 8px 0; }
.bn-prueba-fila legend { float: left; padding: 0; font-size: 14px; }
.bn-prueba-fila label { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; cursor: pointer; color: var(--texto); }
.bn-prueba-fila label span { display: none; }
@media (max-width: 700px) {
  .bn-prueba-cab { display: none; }
  .bn-prueba-fila { grid-template-columns: repeat(3, 1fr); }
  .bn-prueba-fila legend { grid-column: 1 / -1; margin-bottom: 4px; }
  .bn-prueba-fila label span { display: inline; font-size: 13px; }
}
.bn-asistencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }
.bn-evid { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.bn-evid img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; }
.bn-evid a { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- App instalable ---------- */
button.instalar-app.nav-item { width: 100%; border: 0; background: var(--azul-suave); color: var(--azul); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.instalar-app[hidden], .instalar-ios[hidden] { display: none !important; }
.instalar-ios { font-size: 12.5px; color: var(--secundario); margin: 6px 4px 10px; line-height: 1.45; }
@media (display-mode: standalone) { .instalar-app, .instalar-ios { display: none !important; } }
.cuadricula thead th.res-cab { background: #eef2ff; color: var(--marino); }

/* ── Ventana «Un producto de Cumbrix» ─────────────────────────────── */
.cx-ventana { border: 0; padding: 0; background: transparent; max-width: min(460px, calc(100vw - 24px)); width: 100%; margin: auto; overflow: visible; }
.cx-ventana::backdrop { background: rgba(10, 16, 40, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cx-ventana[open] { animation: cx-entra .35s cubic-bezier(.2,.9,.25,1.15); }
.cx-ventana.saliendo { animation: cx-sale .18s ease-in forwards; }
@keyframes cx-entra { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cx-sale { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.cx-caja { position: relative; border-radius: 28px; padding: 26px 24px 22px; color: #fff; overflow: hidden;
  background: radial-gradient(420px 260px at 100% 0%, rgba(242,106,33,.35), transparent 60%), radial-gradient(380px 300px at 0% 100%, rgba(124,92,255,.35), transparent 60%), linear-gradient(160deg, #14287a 0%, #0b1440 100%);
  box-shadow: 0 40px 90px -30px rgba(5,10,40,.8), inset 0 0 0 1px rgba(255,255,255,.1); }
.cx-cerrar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center; transition: background .2s, transform .2s; }
.cx-cerrar:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
.cx-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cx-cabeza { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.cx-logo { flex: none; width: 58px; height: 58px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.cx-antes { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.cx-cabeza h2 { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.cx-lema { margin: 2px 0 0; font-size: 13.5px; color: rgba(255,255,255,.72); }
.cx-aviso { display: flex; gap: 12px; margin-top: 20px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.cx-aviso-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: #f26a21; display: grid; place-items: center; font-size: 19px; }
.cx-aviso strong { font-size: 15px; }
.cx-aviso p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.cx-sub { margin: 18px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.cx-productos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-productos a { display: block; padding: 11px 14px; border-radius: 14px; background: #fff; color: #14287a; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cx-productos a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); text-decoration: none; }
.cx-productos b { font-size: 15px; }
.cx-productos small { display: block; margin-top: 2px; font-size: 12.5px; color: #5b6478; }
.cx-insignia { margin-left: 8px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #fde7da; color: #c2410c; vertical-align: 2px; }
.cx-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.cx-autor { display: flex; align-items: center; gap: 10px; }
.cx-inicial { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #f26a21, #7c5cff); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.cx-autor b { display: block; font-size: 14px; }
.cx-autor small { display: block; font-size: 12px; color: rgba(255,255,255,.65); }
.cx-boton { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #f26a21; color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; box-shadow: 0 10px 22px -8px rgba(242,106,33,.7); }
.cx-boton:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }
@media (max-width: 420px) { .cx-caja { padding: 22px 16px 18px; border-radius: 24px; } .cx-cabeza h2 { font-size: 24px; } .cx-boton { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cx-ventana[open], .cx-ventana.saliendo { animation: none; } }

/* Admin → Módulos de centros: sección General (todos los módulos, haya centros o no). */
.md-general { padding: 20px; }
.md-general-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.md-general-cab h2 { font-size: 19px; margin: 0; }
.md-general-cab .sec { margin-top: 4px; max-width: 720px; }
.md-general-grupo { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--secundario); margin: 20px 0 8px; }
.md-general-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.md-general-mod { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--linea-suave); border-radius: 14px; background: var(--superficie, #fff); }
.md-general-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-general-ico { width: 32px; height: 32px; border-radius: 10px; background: #eef2ff; display: grid; place-items: center; font-size: 17px; }
.md-general-mod p { margin: 0; font-size: 13.5px; color: var(--secundario); }
.md-general-mod .md-general-meta { font-size: 12px; color: var(--terciario, #8a8a99); margin-top: auto; }
.md-general-mod form { margin-top: 4px; }
.md-general-sub { font-size: 19px; margin: 6px 0 10px; }
.md-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Enlaces para familias: envío seguido por WhatsApp. */
.envio-dlg { border: 0; padding: 0; border-radius: 24px; width: min(420px, calc(100vw - 24px)); box-shadow: 0 40px 90px -30px rgba(10,20,60,.6); }
.envio-dlg::backdrop { background: rgba(10,16,40,.5); backdrop-filter: blur(4px); }
.envio-caja { position: relative; padding: 26px 22px 20px; text-align: center; }
.envio-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f2f2f7; font-size: 22px; line-height: 1; cursor: pointer; }
.envio-paso { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--secundario); }
.envio-caja h2 { font-size: 21px; margin: 6px 0 2px; color: var(--marino); }
.envio-destino { margin: 0; color: var(--secundario); font-size: 14px; }
.envio-barra { height: 6px; border-radius: 99px; background: #eef0f6; margin: 16px 0; overflow: hidden; }
.envio-barra i { display: block; height: 100%; background: #25d366; transition: width .3s; }
.envio-abrir { width: 100%; justify-content: center; background: #25d366; color: #fff; }
.envio-abrir:hover { background: #1ebe5b; }
.envio-ayuda { font-size: 13px; color: var(--secundario); margin: 10px 0 0; }
.envio-acciones { display: flex; justify-content: space-between; margin-top: 14px; }
.ter-claro { opacity: .75; font-weight: 500; }
.disco-barra { height: 6px; border-radius: 99px; background: #eef0f6; overflow: hidden; margin: 6px 0 4px; }
.disco-barra i { display: block; height: 100%; background: #34c759; }
.disco-barra.naranja i { background: #ff9f0a; } .disco-barra.rojo i { background: #ff3b30; }

/* Bloques plegables del menú (Panel del dueño, Ajustes del centro): se deslizan al abrir y cerrar (animación en registec.js). */
.lateral { overflow-anchor: none; }
.nav-bloque > summary { user-select: none; -webkit-tap-highlight-color: transparent; }
.nav-bloque > summary:focus:not(:focus-visible) { outline: none; }
.nav-bloque { flex-shrink: 0; } /* en la columna flex del menú, con overflow hidden se encogería */

/* Archivo de años (admin) */
.ar-resumen .valor { font-size: 30px; }
.ar-unidad { font-size: 16px; color: var(--secundario); font-weight: 500; }
.ar-liberable { background: var(--verde-suave); }
.ar-como > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ar-como > summary::-webkit-details-marker { display: none; }
.ar-como > summary::after { content: '▾'; margin-left: auto; color: var(--secundario); }
.ar-como[open] > summary::after { transform: rotate(180deg); }
.ar-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: paso; }
.ar-pasos li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--fondo); }
.ar-pasos li span { font-size: 22px; }
.ar-pasos li small { color: var(--secundario); font-size: 12.5px; line-height: 1.35; }
.ar-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ar-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-filtro { padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--texto); font-size: 14px; font-weight: 500; }
.ar-filtro:hover { text-decoration: none; background: rgba(0,0,0,.09); }
.ar-filtro span { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 12px; }
.ar-filtro.activo { background: var(--marino); color: #fff; }
.ar-filtro.activo span { background: rgba(255,255,255,.22); }
.ar-centro { padding: 0; overflow: visible; }
.ar-centro-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--linea-suave); }
.ar-centro-cab h2 { display: inline; font-size: 17px; margin-right: 8px; }
.ar-anio { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(230px, 1.4fr) minmax(200px, 1.3fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-left: 3px solid transparent; }
.ar-anio + .ar-anio { border-top: 1px solid var(--linea-suave); }
.ar-anio.ar-listo { border-left-color: var(--verde); }
.ar-anio.ar-archivado { border-left-color: var(--acento); }
.ar-anio.ar-error { border-left-color: var(--rojo); }
.ar-anio.ar-en_uso { opacity: .75; }
.ar-anio-nombre { display: flex; flex-direction: column; }
.ar-anio-nombre b { font-size: 16px; }
.ar-anio-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--secundario); }
.ar-peso { color: var(--texto); font-weight: 600; }
.ar-anio-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ar-error { color: var(--rojo); }
.ar-progreso { width: 100%; max-width: 200px; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.ar-progreso i { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.ar-anio-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ar-docs { position: relative; }
.ar-docs > summary { list-style: none; }
.ar-docs > summary::-webkit-details-marker { display: none; }
.ar-docs-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 280px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-alta); }
.ar-docs-lista a { padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.ar-docs-lista a:hover { background: rgba(0,0,0,.05); text-decoration: none; }
.ar-vacio { text-align: center; padding: 30px; }
@media (max-width: 1100px) { .ar-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-anio { grid-template-columns: 1fr 1fr; } .ar-anio-acciones { justify-content: flex-start; } }
@media (max-width: 640px) { .ar-anio { grid-template-columns: 1fr; } .ar-pasos { grid-template-columns: 1fr; } }

/* Sub-bloques del Panel del dueño (Centros · Ventas · Contenido · Sistema): plegables para que el menú sea corto. */
.nav-sub { margin: 2px 0; }
.nav-sub > summary { list-style: none; }
.nav-sub > summary::-webkit-details-marker { display: none; }
.nav-sub-cab { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; user-select: none; }
.nav-sub-cab:hover { background: rgba(0,0,0,.05); }
.nav-sub-cab::after { content: '▾'; margin-left: auto; color: var(--terciario); transition: transform .15s; }
.nav-sub:not([open]) > .nav-sub-cab::after { transform: rotate(-90deg); }
.nav-sub-cab .nav-abierta { margin-left: 4px; }
.nav-sub[open] > .nav-sub-cab { color: var(--marino); }
.nav-sub > .nav-item { margin-left: 8px; }
.nav-sub > summary:focus:not(:focus-visible) { outline: none; }
.lateral-pie > .nav-titulo { padding-top: 4px; }

/* «Panel del dueño»: encabezado fijo, sin flecha ni animación. */
.nav-bloque-fijo { cursor: default; }
.nav-bloque-fijo::after { content: none !important; }

/* Currículo (panel del dueño) */
.cu-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cu-metrica { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.cu-metrica b { font-size: 26px; letter-spacing: -.02em; }
.cu-metrica span { color: var(--secundario); font-size: 13px; }
.cu-grados { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cu-numero { font-size: 22px; font-weight: 700; }
.cu-apagado { opacity: .6; }
.cu-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cu-form select, .cu-form input { flex: 1 1 140px; min-width: 0; }
.cu-matriz td, .cu-matriz th { font-size: 13px; vertical-align: top; }
.cu-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.cu-salidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cu-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; }
.cu-lista b { display: inline-block; min-width: 34px; color: var(--secundario); }
.cu-metricas > .tarjeta, .cu-grados > .tarjeta, .cu-salidas > .tarjeta { margin: 0; }
.cu-pestanas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); }
.cu-pestana { padding: 9px 16px; border-radius: 12px 12px 0 0; color: var(--secundario); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.cu-pestana.activa { color: var(--azul); border-bottom-color: var(--azul); }
.cu-buscador label { display: block; }
.cu-buscador-fila { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cu-buscador-fila input { flex: 1 1 220px; min-width: 0; }
.cu-resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.cu-resultados a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.03); color: inherit; text-decoration: none; }
.cu-resultados a:hover { background: var(--azul-suave); }
.cu-res-cab { font-size: 12.5px; color: var(--secundario); }
.cu-res-texto { font-size: 14px; }
mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.cu-version { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-detalle summary { cursor: pointer; font-size: 13.5px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cu-detalle ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.cu-rojo { color: #c0392b; }
.cu-naranja { color: #b45309; }
.cu-centros { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.cu-centros li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.03); }
.cu-centros li.cu-alerta { background: #fff4e5; }
.cu-celda { color: inherit; text-decoration: none; display: block; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.cu-celda:hover { background: var(--azul-suave); color: var(--azul); }
.cu-solo-movil { display: none; }
.cu-asig-movil { margin: 0 0 10px !important; }
.cu-asig-movil h3 { font-size: 15px; margin: 0 0 8px; }
.cu-asig-grados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cu-asig-grados a { display: grid; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.03); color: inherit; text-decoration: none; font-size: 13px; }
.cu-asig-grados b { color: var(--azul); }
.cu-asig-grados small { color: var(--secundario); }
@media (max-width: 640px) { .cu-solo-pc { display: none; } .cu-solo-movil { display: block; } }
.cu-comparar-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cu-comparar-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; flex: 1 1 150px; }
.cu-comparar-resumen { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cu-comparar-cab { font-size: 15px; padding: 4px 2px; }
.cu-comparar-fund { grid-column: 1 / -1; font-weight: 700; margin-top: 8px; }
.cu-comparar-celda { margin: 0 !important; padding: 12px !important; font-size: 13px; }
.cu-comparar-celda ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.cu-nuevo-a { background: var(--azul-suave); border-radius: 6px; padding: 2px 4px; }
.cu-nuevo-b { background: var(--verde-suave); border-radius: 6px; padding: 2px 4px; }
@media (max-width: 640px) { .cu-comparar { grid-template-columns: 1fr; } .cu-comparar-cab:nth-child(2) { display: none; } }
.cu-ce { margin: 6px 0; }
.cu-modal { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 40px); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 24px 60px rgba(15,23,42,.35); display: none; flex-direction: column; overflow: hidden; }
.cu-modal[open] { display: flex; }
.cu-modal::backdrop { background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cu-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,.08); background: var(--superficie); }
.cu-modal-cab h2 { margin: 0; font-size: 18px; }
.cu-modal-x { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); font-size: 16px; cursor: pointer; color: inherit; }
.cu-modal-x:hover { background: rgba(0,0,0,.12); }
.cu-modal-cuerpo { overflow: auto; padding: 16px 20px 22px; }
.cu-asig-ce { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.cu-asig-ce h3 { margin: 0; }
.cu-ils { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }

/* Currículo · diseño de tarjetas por grado (colores oficiales de cada grado) */
.cu-metrica { position: relative; }
.cu-metrica i { font-style: normal; font-size: 20px; line-height: 1; margin-bottom: 4px; }
.cu-ciclo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 17px; }
.cu-ciclo small { font-size: 13px; font-weight: 400; color: var(--secundario); }
.cu-grados { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.cu-grado { display: flex; flex-direction: column; gap: 12px; background: var(--superficie); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(15,23,42,.06); padding: 0 0 16px; border-top: 0; }
.cu-grado > *:not(.cu-grado-cab) { margin-inline: 16px; }
.cu-grado-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 16px; color: #fff; background: linear-gradient(135deg, var(--g-oscuro), var(--g-acento)); }
.cu-grado-eti { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cu-grado .cu-numero { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cu-grado .cu-numero small { font-size: 14px; font-weight: 600; opacity: .85; }
.cu-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: rgba(0,0,0,.06); color: var(--secundario); white-space: nowrap; }
.cu-grado-cab .cu-chip { background: rgba(255,255,255,.95); color: var(--texto); }
.cu-chip-verde { color: var(--verde) !important; }
.cu-chip-naranja { background: var(--naranja-suave); color: var(--naranja); }
.cu-grado-cab .cu-chip-naranja { color: var(--naranja); }
.cu-chip-rojo { color: var(--rojo) !important; }
.cu-grado-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cu-grado-datos div { display: grid; padding: 10px; border-radius: 12px; background: var(--g-claro); }
.cu-grado-datos b { font-size: 20px; color: var(--g-oscuro); }
.cu-grado-datos span { font-size: 11.5px; color: var(--secundario); line-height: 1.25; }
.cu-grado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cu-btn-ver { flex: 1 1 auto; justify-content: center; background: var(--g-oscuro); border-color: var(--g-oscuro); }
.cu-btn-ver:hover { filter: brightness(1.1); background: var(--g-oscuro); }
.cu-version { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 0; }
.cu-ok { margin-block: 0; font-size: 12.5px; color: var(--verde); }
.cu-grado .cu-detalle { border-top: 1px solid var(--linea-suave); padding-top: 10px; }
.cu-detalle summary { list-style: none; }
.cu-detalle summary::-webkit-details-marker { display: none; }
.cu-detalle summary::after { content: "›"; margin-left: auto; transition: none; color: var(--terciario); font-size: 18px; line-height: 1; }
.cu-detalle[open] summary::after { transform: rotate(90deg); }
.cu-detalle-alerta summary { color: var(--naranja); }
.cu-celda { display: grid !important; gap: 1px; padding: 6px 8px !important; margin: 0 !important; border: 1px solid var(--linea-suave); background: var(--superficie); }
.cu-celda small { color: var(--terciario); font-size: 11px; }
.cu-celda:hover small { color: var(--azul); }
.cu-matriz td { padding: 4px !important; }
.cu-salida .cu-lista li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linea-suave); }
.cu-salida .cu-lista li:last-child { border-bottom: 0; }
.cu-salida .cu-detalle { margin-top: 10px; }
.cu-volver { display: inline-block; margin-bottom: 8px; font-weight: 600; text-decoration: none; }
.cu-grado-grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--g-oscuro, var(--azul)); margin: 14px 0 6px; }
.cu-grado-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cu-grado-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--g-claro, rgba(0,0,0,.03)); }
.cu-grado-nombre { flex: 1 1 auto; display: grid; font-weight: 600; font-size: 14px; }
.cu-grado-nombre small { font-weight: 400; color: var(--secundario); font-size: 12px; }
.cu-nota { margin-block: 0; font-size: 12px; color: var(--secundario); background: var(--linea-suave); border-radius: 10px; padding: 6px 8px; }
.cu-grado .cu-numero small { color: rgba(255,255,255,.92); opacity: 1; }

/* Currículo · herramientas, ventana (copiar, corregir, cobertura), historial e importación */
.cu-herramientas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cu-herramientas .progreso-doc { flex: 1 1 220px; }
.cu-grado-acciones-2 .btn { flex: 1 1 0; justify-content: center; }
.cu-novedades { font-size: 12.5px; background: var(--fondo); border-radius: 12px; padding: 8px 10px; }
.cu-novedades ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.cu-novedades small { color: var(--terciario); }
.cu-nov-reciente { font-weight: 600; }
.cu-nov-reciente::before { content: "● "; color: var(--acento); }
.cu-asig-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-asig-barra p { margin: 0; }
.cu-aviso-borrador { font-size: 13px; background: var(--naranja-suave); border-radius: 10px; padding: 8px 10px; margin: 10px 0 0; }
.cu-aviso-borrador.suave { background: var(--fondo); color: var(--secundario); }
.cu-texto { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.cu-texto > span:first-child, .cu-texto > .cu-ce { flex: 1 1 auto; }
.cu-acciones { display: inline-flex; gap: 2px; flex: 0 0 auto; opacity: .45; transition: none; }
.cu-texto:hover .cu-acciones, .cu-acciones:focus-within { opacity: 1; }
@media (hover: none) { .cu-acciones { opacity: 1; } }
.cu-mini { border: 0; background: transparent; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; }
.cu-mini:hover { background: var(--azul-suave); }
.cu-editado [data-texto-valor] { background: var(--verde-suave); border-radius: 4px; }
.cu-editar { display: grid; gap: 6px; margin-top: 6px; }
.cu-editar textarea { width: 100%; font: inherit; font-size: 14px; }
.cu-ils li.cu-texto { padding: 4px 6px; border-radius: 8px; }
.cu-hecho { background: var(--verde-suave); }
.cu-falta { background: transparent; }
.cu-periodos { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.cu-periodos i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: var(--linea-suave); color: var(--terciario); }
.cu-periodos i.si { background: var(--verde); color: #fff; }
.cu-cobertura { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--azul-suave); display: grid; gap: 6px; font-size: 14px; }
.cu-cobertura p { margin: 0; }
.cu-modal-botones { display: flex; gap: 6px; }
.cu-modal-aviso { margin: 0; padding: 8px 20px; background: var(--verde-suave); color: var(--verde); font-size: 13.5px; font-weight: 600; }
.elegir-curriculo { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; margin-right: 10px; border-radius: 980px; font-size: 12.5px; font-weight: 600; color: var(--azul); background: var(--azul-suave); text-decoration: none; white-space: nowrap; }
.elegir-curriculo:hover { text-decoration: none; filter: brightness(.97); }
li[data-elegir-clase] { display: flex; align-items: center; }
li[data-elegir-clase] > .elegir-fila { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .elegir-curriculo span { display: none; } }
.cu-mini-enlace { margin-left: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cu-linea { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--linea); display: grid; gap: 14px; }
.cu-linea li { position: relative; display: grid; gap: 3px; font-size: 14px; }
.cu-linea li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 3px var(--superficie); }
.cu-linea li.cu-linea-borrador::before { background: var(--acento); }
.cu-linea p { margin: 2px 0 0; }
.cu-importar input[type=file] { width: 100%; }
.cu-previa { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cu-previa-bloque { margin: 0 !important; }
.cu-previa-aviso { box-shadow: inset 0 0 0 2px var(--naranja-suave); }
.cu-previa-cab { display: flex; justify-content: space-between; align-items: center; }
.cu-previa-incluir { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.cu-previa-titulo { font-size: 12.5px; color: var(--secundario); margin: 6px 0; }
.cu-previa-codigo { flex: 0 0 90px !important; font-family: ui-monospace, monospace; }
.cu-previa-acciones { display: flex; justify-content: space-between; gap: 8px; position: sticky; bottom: 12px; }
.cu-ancho { width: 100%; }