/* ============================================================================
   PLATAFORMA CASURID · HOJA DE ESTILO DEL PANEL
   ----------------------------------------------------------------------------
   Mismos tokens que el prototipo de interfaz, para que lo aprobado en los
   mockups sea literalmente lo que se ve en producción.

   Color semántico, nunca decorativo:
     azul  #478AC9 = contenido      ámbar #D98E2B = dinero
     verde #2C8C63 = vigente/activo rojo  #B8433C = vencido/error
   ========================================================================== */
:root{
  --tinta:#0B1E2E; --tinta-2:#14293B; --tinta-3:#22405A;
  --papel:#EEF1F5; --blanco:#FFFFFF; --linea:#D6DDE6; --linea-suave:#E7ECF1;
  --casurid:#478AC9; --casurid-hondo:#1E5C96; --casurid-tenue:#E3EEF9;
  --ambar:#D98E2B; --ambar-tenue:#FBF0DC;
  --verde:#2C8C63; --verde-tenue:#E0F1E8;
  --rojo:#B8433C;  --rojo-tenue:#FAE6E5;
  --gris:#5C6B7A;  --gris-claro:#8A98A6;
  --r:6px; --r-s:3px; --rail:232px;
  --texto:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --codigo:"IBM Plex Mono","SF Mono",Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--texto);font-size:14px;line-height:1.5;color:var(--tinta);
  background:var(--papel);-webkit-font-smoothing:antialiased}
a{color:var(--casurid-hondo)}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:600;letter-spacing:-.015em}
.mono{font-family:var(--codigo);font-size:12px}
.mini{font-size:11px}
.mb{margin-bottom:18px}
.centro{text-align:center;padding:38px 20px}
.max{max-width:48ch;margin:8px auto 18px}
.grande{font-size:40px;color:var(--casurid);margin-bottom:8px}
.vacio{color:var(--gris-claro);text-align:center;padding:22px}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}
/* Tres zonas: marca fija arriba, menú desplazable en medio, pie fijo abajo.
   `overflow:hidden` en el contenedor y `min-height:0` en el hijo flexible son
   los dos que evitan que el contenido se salga del fondo oscuro cuando hay
   más enlaces que altura de pantalla. */
.lateral{width:var(--rail);flex:0 0 var(--rail);background:var(--tinta);color:#B9C7D4;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:22px 22px}
.lateral-menu{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Barra de desplazamiento discreta: la del sistema se ve como un tajo blanco
   sobre el azul tinta. */
.lateral-menu::-webkit-scrollbar{width:6px}
.lateral-menu::-webkit-scrollbar-track{background:transparent}
.lateral-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.lateral-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}
.lateral-menu{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.marca{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.09);flex:0 0 auto}
.marca .nombre{font-family:var(--display);font-size:21px;font-weight:700;color:#fff;
  letter-spacing:.02em;text-decoration:none;display:block}
.marca .nombre span{color:var(--casurid)}
.marca .bajada{font-size:11px;color:#7E90A2;margin-top:2px}
.grupo{padding:14px 12px}
.lateral-menu .grupo{padding-bottom:20px}
.grupo-tit{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#5E7186;
  padding:14px 8px 7px;font-weight:600}
.nav{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:1px;
  color:#B9C7D4;font-size:13.5px;border-radius:var(--r-s);text-decoration:none}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
/* El enlace de la página actual. Lo marca casurid.js con la clase; el aspecto
   vive aquí, que es donde se busca cuando hay que cambiarlo. */
.nav.activo{background:var(--casurid);color:#fff;font-weight:600}
.nav.activo .ico{opacity:1}
.nav .ico{width:16px;text-align:center;opacity:.85;font-size:13px}
.lateral-pie{flex:0 0 auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;color:#6E8195;background:var(--tinta)}
.lateral-pie b{color:#C9D6E2}
.lateral-pie .salir{color:var(--casurid);display:inline-block;margin-top:7px;text-decoration:none}
.trabajo{flex:1;min-width:0}

.cabeza{background:var(--blanco);border-bottom:1px solid var(--linea);padding:18px 26px 16px}
.cabeza h1{font-size:23px}
.cabeza .sub{color:var(--gris);font-size:13px;margin:3px 0 0;max-width:70ch}
.lienzo{padding:22px 26px 40px}
.grupo-h{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);
  margin:4px 0 11px;font-weight:700}

/* ── Rejillas y tarjetas ──────────────────────────────────────────────────── */
.rejilla{display:grid;gap:14px}
.c4{grid-template-columns:repeat(4,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.c4{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:1fr}}
/* En pantallas estrechas la barra pasa a ser una tira horizontal arriba. Antes
   se ocultaba con display:none, lo que dejaba el panel SIN navegación en un
   teléfono: no había forma de cambiar de módulo ni de cerrar sesión. */
@media(max-width:760px){
  .app{flex-direction:column}
  .lateral{width:100%;flex:0 0 auto;height:auto;position:static;overflow:visible;
    flex-direction:row;align-items:center;gap:10px;padding:8px 12px}
  .marca{padding:0;border-bottom:0;flex:0 0 auto}
  .marca .bajada{display:none}
  .marca-logo{width:120px;margin-bottom:0;padding:6px 8px}
  .lateral-menu{flex:1 1 auto;overflow-x:auto;overflow-y:visible;min-height:0}
  .lateral-menu .grupo{display:flex;gap:4px;padding:0;align-items:center}
  .grupo-tit{display:none}
  .nav{white-space:nowrap;margin-bottom:0;padding:7px 11px}
  .nav .ico{display:none}
  .lateral-pie{flex:0 0 auto;border-top:0;padding:0 4px;white-space:nowrap}
  .lateral-pie b,.lateral-pie .mini,.lateral-pie br{display:none}
}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r)}
.tarjeta-cab{padding:12px 16px;border-bottom:1px solid var(--linea-suave)}
.tarjeta-cab h3{font-size:14.5px}
.tarjeta-cuerpo{padding:16px}

.kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:14px 16px}
.kpi .et{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:600}
.kpi .num{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.1;margin-top:6px}
.kpi.alerta .num{color:var(--rojo)}

/* Tarjeta de módulo. Los pendientes se atenúan pero siguen visibles y
   navegables: la hoja de ruta completa es información, no ruido. */
.mod{display:flex;align-items:center;gap:12px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r);padding:14px;text-decoration:none;color:inherit}
.mod:hover{border-color:var(--casurid)}
.mod-pendiente{opacity:.62;background:#FBFCFD}
.mod-ico{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-s);background:var(--casurid-tenue);
  color:var(--casurid-hondo);display:flex;align-items:center;justify-content:center;font-size:16px}
.mod-cuerpo{flex:1;min-width:0}
.mod-nom{font-weight:600;font-size:14px}
.mod-desc{font-size:12px;color:var(--gris);margin-top:2px}

/* ── Tablas ───────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
  text-align:left;padding:9px 16px;border-bottom:1px solid var(--linea);font-weight:600;background:#FAFBFC}
td{padding:11px 16px;border-bottom:1px solid var(--linea-suave);font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFCFE}
td.prin{font-weight:600}

/* ── Píldoras, avisos, botones ────────────────────────────────────────────── */
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.p-verde{background:var(--verde-tenue);color:var(--verde)}
.p-ambar{background:var(--ambar-tenue);color:#9A6316}
.p-rojo{background:var(--rojo-tenue);color:var(--rojo)}
.p-gris{background:#EDF0F3;color:var(--gris)}

.aviso{padding:11px 26px;font-size:13px;border-bottom:1px solid var(--linea)}
.aviso-info{background:var(--casurid-tenue);color:var(--casurid-hondo)}
.aviso-ok{background:var(--verde-tenue);color:var(--verde)}
.aviso-error{background:var(--rojo-tenue);color:var(--rojo)}
.alerta{background:var(--rojo-tenue);color:var(--rojo);padding:10px 13px;border-radius:var(--r-s);
  font-size:13px;margin-bottom:16px}
.nota{margin-top:20px;padding:13px 16px;background:#FCFDFE;border:1px dashed var(--linea);
  border-radius:var(--r);font-size:12.5px;color:var(--gris)}

.btn{display:inline-block;font-family:var(--texto);font-size:13px;font-weight:600;padding:9px 15px;
  border-radius:var(--r-s);border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);
  cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--gris-claro)}
.btn-p{background:var(--casurid);border-color:var(--casurid);color:#fff}
.btn-p:hover{background:var(--casurid-hondo);border-color:var(--casurid-hondo)}
.btn-ancho{width:100%;padding:11px;font-size:14px}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.campo input,.campo select{width:100%;padding:9px 12px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-family:var(--texto);font-size:13.5px;background:var(--blanco)}
.campo input:focus,.campo select:focus{outline:2px solid var(--casurid);outline-offset:-1px}
.campo .ayuda{font-size:11.5px;color:var(--gris);margin-top:4px}
.codigo-totp{font-family:var(--codigo);font-size:22px!important;letter-spacing:.5em;text-align:center}

/* ── Pantallas de acceso ──────────────────────────────────────────────────── */
body.plena{background:var(--blanco)}
.acceso{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
@media(max-width:900px){.acceso{grid-template-columns:1fr}.acceso .lado{display:none}}
.acceso .lado{background:var(--tinta);color:#fff;padding:44px 46px;display:flex;
  flex-direction:column;justify-content:space-between;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:26px 26px}
.acceso .lado .logo{font-family:var(--display);font-size:27px;font-weight:700}
.acceso .lado .logo span{color:var(--casurid)}
.acceso .lado h2{font-size:31px;line-height:1.2;max-width:15ch}
.acceso .lado p{color:#93A8BB;font-size:13.5px;max-width:42ch;margin:11px 0 0}
.acceso .lado .pie{font-size:11.5px;color:#5E7186}
.acceso .forma{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.forma-caja{width:100%;max-width:370px;margin:0 auto}
.forma-caja h1{font-size:24px;margin-bottom:5px}
.forma-caja .sub{color:var(--gris);font-size:13px;margin:0 0 24px}
.acceso-pie{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea-suave);
  font-size:12.5px;text-align:center}

/* ============================================================================
   F2 · CATÁLOGO Y PAQUETES
   ========================================================================== */
.cabeza{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.cabeza .acciones{margin-left:auto;display:flex;gap:8px;align-items:center}
.en-linea{display:inline-flex;gap:8px}

.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros .buscar{flex:1;min-width:200px;padding:7px 12px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-family:var(--texto);font-size:13px;background:var(--blanco)}
.filtros select,.filtros .chico{padding:7px 10px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-family:var(--texto);font-size:12.5px;background:var(--blanco)}
.filtros .chico{width:90px}
.btn-s{padding:6px 11px;font-size:12px}

.tarjeta-cab{display:flex;align-items:center;gap:10px}
.tarjeta-cab .der{margin-left:auto;font-size:12px;color:var(--gris);font-weight:400}
.tarjeta-cuerpo.pt{padding-top:12px}
.borde-arriba{border-top:1px solid var(--linea-suave);background:#FAFBFC}
td .sec,.sec{font-size:11.5px;color:var(--gris)}
.mb-s{margin-bottom:8px}
.dinero-txt{color:var(--ambar);font-weight:600}

.c-70-30{display:grid;grid-template-columns:2.4fr minmax(260px,1fr);gap:14px}
@media(max-width:1050px){.c-70-30{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column}

.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo-fila-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.campo-fila-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:700px){.campo-fila,.campo-fila-3,.campo-fila-4{grid-template-columns:1fr}}
.campo textarea{width:100%;padding:9px 12px;border:1px solid var(--linea);border-radius:var(--r-s);
  font-family:var(--texto);font-size:13.5px;resize:vertical}
.check{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.check input{width:auto}
.check.alto{align-self:end;padding-bottom:16px}

.ficha-linea{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--linea-suave);font-size:12.5px}
.ficha-linea:last-child{border-bottom:0}
.ficha-linea .k{color:var(--gris)}
.ficha-linea .v{font-weight:600;text-align:right}

.paq{border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);
  padding:15px;text-decoration:none;color:inherit;display:block}
.paq:hover{border-color:var(--casurid)}
.paq-inactivo{opacity:.6}
.paq .sku{font-family:var(--codigo);font-size:11px;color:var(--gris)}
.paq h4{font-size:16px;margin:5px 0 4px;font-weight:700}
.paq .desc{font-size:12.5px;color:var(--gris);min-height:34px}
.paq .cifras{display:flex;gap:14px;margin-top:11px;padding-top:11px;border-top:1px solid var(--linea-suave)}
.paq .cifra{font-size:11px;color:var(--gris)}
.paq .cifra b{display:block;font-family:var(--display);font-size:16px;color:var(--tinta);font-weight:700}
.paq .cifra.precio b{color:var(--ambar)}
.paq-pie{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.p-azul{background:var(--casurid-tenue);color:var(--casurid-hondo)}

.paginacion{display:flex;align-items:center;gap:12px;margin-top:16px;justify-content:center}

/* ============================================================================
   IDENTIDAD · LOGO OFICIAL
   ----------------------------------------------------------------------------
   El logotipo de CASURID lleva el bajofirma "Contenidos Educativos Digitales"
   en negro. Sobre la barra lateral azul tinta desaparecería, así que se aplica
   por superficie:
     · fondo claro  → logo completo, tal cual
     · fondo oscuro → variante con el bajofirma en blanco
     · barra lateral → marca compacta sobre tarjeta blanca, que garantiza los
       colores corporativos exactos en un ancho de solo 232 px
   ========================================================================== */
.marca-logo{display:block;background:#fff;border-radius:var(--r-s);padding:9px 11px;
  margin-bottom:8px;transition:box-shadow .15s}
.marca-logo img{width:100%;height:auto;display:block}
.marca-logo:hover{box-shadow:0 0 0 2px rgba(71,138,201,.5)}

.logo-img{width:230px;max-width:70%;height:auto;display:block}
.logo-forma{width:180px;height:auto;display:block;margin-bottom:22px}
@media(max-width:900px){.logo-forma{margin:0 auto 22px}}

/* ============================================================================
   F2b · CARGA Y CLASIFICACIÓN
   ========================================================================== */
.zona-carga{border:2px dashed var(--casurid);border-radius:var(--r);background:var(--casurid-tenue);
  padding:28px 22px;text-align:center;margin-bottom:14px;transition:background .15s}
.zona-carga.sobre{background:#D2E5F6;border-color:var(--casurid-hondo)}
.zona-carga .big{font-family:var(--display);font-size:17px;font-weight:700;color:var(--casurid-hondo)}
.zona-carga .small{font-size:12.5px;color:var(--gris);margin-top:6px;line-height:1.6}
.zona-botones{display:flex;gap:9px;justify-content:center;margin-top:14px}
.zona-botones .btn{cursor:pointer}

.progreso{margin-bottom:14px}
.progreso-barra{height:6px;background:var(--linea-suave);border-radius:6px;overflow:hidden}
.progreso-barra i{display:block;height:100%;width:0;background:var(--casurid);transition:width .2s}
.progreso-txt{font-size:12px;color:var(--gris);margin-top:6px;font-family:var(--codigo)}

.seg-fila{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.ml-auto{margin-left:auto}
.seg{display:inline-flex;border:1px solid var(--linea);border-radius:var(--r-s);
  overflow:hidden;background:var(--blanco)}
.seg a{padding:7px 13px;font-size:12.5px;color:var(--gris);text-decoration:none;
  border-right:1px solid var(--linea)}
.seg a:last-child{border-right:0}
.seg a.on{background:var(--tinta);color:#fff;font-weight:600}

.lote{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--tinta);
  color:#fff;border-radius:var(--r);margin-bottom:13px;font-size:13px;flex-wrap:wrap}
.lote .cant{font-family:var(--display);font-weight:700;font-size:15px}
.lote select{padding:6px 10px;border:0;border-radius:var(--r-s);font-family:var(--texto);font-size:12.5px}
.check.blanco{color:#fff}

.cola-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);margin-bottom:8px}
.cola-check{flex:0 0 auto;padding-top:9px}
.cola-item .ic{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-s);background:var(--papel);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--casurid-hondo)}
.cola-item .ic-video{background:#EAF4FB}
.cola-item .ic-laboratorio{background:var(--ambar-tenue);color:#9A6316}
.cola-item .info{flex:1;min-width:0}
.cola-item .nom{font-weight:600;font-size:13px;word-break:break-all}
.cola-item .det{font-size:11.5px;color:var(--gris);margin-top:2px}
.cola-item .est{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}

.sugerido{background:var(--verde-tenue);border-left:3px solid var(--verde);padding:7px 11px;
  border-radius:var(--r-s);font-size:12px;margin-top:7px;color:#1F6B4B}
.sugerido.media{background:var(--ambar-tenue);border-left-color:var(--ambar);color:#8A5813}
.sugerido.nada{background:var(--rojo-tenue);border-left-color:var(--rojo);color:#8E3630}
.sugerido.dup{background:var(--ambar-tenue);border-left-color:var(--ambar);color:#8A5813}
.sugerido .pistas{opacity:.75;font-size:11px}
.alerta.ambar{background:var(--ambar-tenue);color:#8A5813}

/* ============================================================================
   F3 · ESTUDIO Y TABLERO DE PRODUCCIÓN
   ========================================================================== */
.bloque{border:1px solid var(--linea);border-radius:var(--r);margin-bottom:9px;
  background:var(--blanco);display:flex;overflow:hidden}
.bloque .asa{width:40px;flex:0 0 40px;background:#F7F9FB;border-right:1px solid var(--linea-suave);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:8px 0;gap:3px;color:var(--gris-claro)}
.bloque .asa-ico{font-size:13px;color:var(--casurid-hondo);margin-bottom:3px}
.bloque .pos{font-family:var(--codigo);font-size:11px;color:var(--gris)}
.mini-btn{border:0;background:none;cursor:pointer;color:var(--gris-claro);font-size:11px;
  padding:1px 4px;line-height:1;border-radius:2px}
.mini-btn:hover{background:var(--linea);color:var(--tinta)}
.mini-btn.quitar{color:var(--rojo);font-size:15px;margin-top:4px}
.bloque .cuerpo{padding:10px 13px;flex:1;min-width:0}
.bloque .tipo{font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--casurid-hondo);font-weight:700;margin-bottom:5px}
.bloque input,.bloque textarea,.bloque select{width:100%;padding:7px 10px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-family:var(--texto);font-size:13px;margin-bottom:6px;background:var(--blanco)}
.bloque .b-titulo{font-weight:600}
.bloque textarea{resize:vertical}
.b-fila{display:flex;gap:8px;align-items:center;margin-bottom:0}
.b-fila .b-min{width:78px;flex:0 0 78px;margin-bottom:0}
.b-fila select{margin-bottom:0}
.b-fila input{margin-bottom:0}
.solo-lectura .bloque{opacity:.85;background:#FBFCFD}

.anadir{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:13px 0 4px;
  border-top:1px dashed var(--linea);margin-top:12px}
.anadir-et{font-size:12px;color:var(--gris);font-weight:600;margin-right:4px}
.chip-add{border:1px solid var(--linea);background:var(--blanco);border-radius:20px;
  padding:5px 11px;font-family:var(--texto);font-size:12px;cursor:pointer;color:var(--gris)}
.chip-add:hover{border-color:var(--casurid);color:var(--casurid-hondo)}
.chip-add .ci{color:var(--casurid-hondo);font-weight:700}
.mt{margin-top:14px}
.btn-d{background:var(--ambar);border-color:var(--ambar);color:#fff}
.btn-d:hover{background:#C07E24;border-color:#C07E24}

.etapas{display:flex;flex-wrap:wrap;gap:5px}
.etapa-btn{border:1px solid var(--linea);background:var(--blanco);border-radius:20px;
  padding:5px 11px;font-family:var(--texto);font-size:11.5px;cursor:pointer;color:var(--gris)}
.etapa-btn:hover{border-color:var(--casurid)}
.etapa-btn.on{background:var(--casurid);border-color:var(--casurid);color:#fff;font-weight:600}

.tablero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1100px){.tablero{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.tablero{grid-template-columns:1fr}}
.col-etapa{background:#F7F9FB;border:1px solid var(--linea);border-radius:var(--r);padding:10px}
.col-cab{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:9px}
.col-vacia{font-size:12px;color:var(--gris-claro);text-align:center;padding:16px 0}
.ficha-t{display:block;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-s);
  padding:10px;margin-bottom:7px;text-decoration:none;color:inherit}
.ficha-t:hover{border-color:var(--casurid)}
.ft-cod{font-size:10.5px;color:var(--gris)}
.ft-tit{font-size:12.5px;font-weight:600;margin:3px 0 5px;line-height:1.35}
.ft-pie{display:flex;justify-content:space-between;font-size:10.5px;color:var(--gris);gap:8px}
.ft-horas{font-family:var(--codigo);font-size:10.5px;color:var(--ambar);margin-top:4px}

/* ============================================================================
   F4 · ENTREGA POR LTI · PANTALLAS DENTRO DEL IFRAME DE MOODLE
   ----------------------------------------------------------------------------
   Estas vistas las ve un docente o un estudiante en medio de su clase, dentro
   de un iframe estrecho. Sin barra lateral, sin chrome, tipografía más grande
   y márgenes generosos: el contenido es lo único que importa.
   ========================================================================== */
body.lti-body{background:var(--blanco);display:block;padding:0}
.lti-caja{max-width:460px;margin:14vh auto;text-align:center;padding:26px}
.lti-logo{width:170px;height:auto;margin-bottom:26px}
.lti-ico{font-size:34px;color:var(--rojo);margin-bottom:8px}
.lti-ico.suave{color:var(--ambar)}
.lti-caja h1{font-size:21px;margin-bottom:8px}
.lti-caja p{color:var(--gris);font-size:14px;line-height:1.6}
.lti-pie{font-size:12px;color:var(--gris-claro);margin-top:22px}

/* ── Reproductor ─────────────────────────────────────────────────────────── */
.reproductor{max-width:820px;margin:0 auto;padding:0 20px 60px}
.rep-cabeza{display:flex;align-items:center;gap:16px;padding:20px 0 16px;
  border-bottom:1px solid var(--linea);margin-bottom:22px}
.rep-logo{width:112px;height:auto;flex:0 0 112px}
.rep-titulo h1{font-size:21px;line-height:1.25}
.rep-meta{font-size:12px;color:var(--gris);margin-top:4px}
.rep-cuerpo{font-size:15px;line-height:1.7}
.rep-bloque{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--linea-suave)}
.rep-bloque:last-child{border-bottom:0}
.rep-tipo{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--casurid-hondo);margin-bottom:7px}
.rep-min{color:var(--gris);font-weight:400;margin-left:6px;letter-spacing:0;text-transform:none}
.rep-bloque h2{font-size:19px;margin-bottom:10px}
.rep-texto{color:var(--tinta)}
.rep-media{width:100%;max-width:100%;border-radius:var(--r);margin:12px 0;display:block;background:#000}
img.rep-media{background:none}
.rep-archivo{display:inline-block;padding:11px 16px;background:var(--casurid-tenue);
  color:var(--casurid-hondo);border-radius:var(--r);text-decoration:none;font-weight:600;margin:10px 0}
.rep-archivo:hover{background:#D2E5F6}
/* La guía docente se distingue visualmente: el docente debe saber de un
   vistazo qué está viendo él y no sus estudiantes. */
.rep-bloque.b-guia_docente{background:var(--ambar-tenue);padding:18px 20px;border-radius:var(--r);border-bottom:0}
.rep-bloque.b-guia_docente .rep-tipo{color:#8A5813}
.rep-vacio{text-align:center;color:var(--gris-claro);padding:46px 0}
.rep-cierre{margin-top:34px;text-align:center}
.rep-pie{max-width:820px;margin:0 auto;padding:16px 20px 30px;border-top:1px solid var(--linea);
  font-size:11.5px;color:var(--gris-claro);text-align:center}

/* ── Selector de Deep Linking ────────────────────────────────────────────── */
.selector{max-width:760px;margin:0 auto;padding:20px 20px 60px}
.sel-cabeza{display:flex;align-items:center;gap:16px;padding-bottom:16px;
  border-bottom:1px solid var(--linea);margin-bottom:16px}
.sel-cabeza h1{font-size:19px}
.sel-filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.sel-filtros .buscar{flex:1;min-width:180px;padding:8px 12px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-family:var(--texto);font-size:13px}
.sel-filtros select{padding:8px 10px;border:1px solid var(--linea);border-radius:var(--r-s);font-size:13px}
.sel-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--r);margin-bottom:7px;cursor:pointer}
.sel-item:hover{border-color:var(--casurid)}
.sel-item input{margin-top:3px}
.si-tit{display:block;font-weight:600;font-size:14px}
.si-meta{display:block;font-size:11.5px;color:var(--gris);margin-top:3px}
.sel-barra{position:sticky;bottom:0;background:var(--blanco);border-top:1px solid var(--linea);
  padding:14px 0;display:flex;align-items:center;gap:14px;justify-content:space-between}

/* ── Uso y adopción ─────────────────────────────────────────────────────── */
.c-25-75{display:grid;grid-template-columns:minmax(230px,1fr) 2.8fr;gap:14px}
@media(max-width:1000px){.c-25-75{grid-template-columns:1fr}}
.lista-inst{max-height:520px;overflow-y:auto}
.li-item{display:flex;justify-content:space-between;gap:10px;padding:9px 15px;
  border-bottom:1px solid var(--linea-suave);text-decoration:none;color:inherit;font-size:13px}
.li-item:hover{background:#FAFCFE}
.li-item.on{background:var(--casurid-tenue);color:var(--casurid-hondo);font-weight:600}
.li-n{font-family:var(--codigo);font-size:11.5px;color:var(--gris)}
.num-col{text-align:right;font-family:var(--codigo)}
.barras{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:10px}
.barra-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.barra-v{width:100%;background:var(--casurid);border-radius:2px 2px 0 0;min-height:3px}
.barra-et{font-size:9px;color:var(--gris-claro);margin-top:5px;white-space:nowrap}
.copiar{cursor:text;user-select:all}

/* ============================================================================
   F5 · COMERCIO · PORTAL DEL COMPRADOR
   ----------------------------------------------------------------------------
   El rector no ve la barra lateral del panel interno: su navegación es corta y
   horizontal, porque tiene cuatro sitios a los que ir, no veinte.
   ========================================================================== */
body.portal{background:var(--papel)}
.pt-cab{background:var(--blanco);border-bottom:1px solid var(--linea);padding:14px 26px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pt-marca img{width:150px;height:auto;display:block}
.pt-nav{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:13.5px}
.pt-nav a{color:var(--tinta);text-decoration:none;font-weight:600}
.pt-nav a:hover{color:var(--casurid-hondo)}
.pt-nav .pt-salir{color:var(--gris);font-weight:400}
.pt-cuerpo{max-width:1080px;margin:0 auto;padding:26px 26px 60px}
.pt-cuerpo h1{font-size:24px;margin-bottom:4px}
.pt-intro{margin-bottom:24px;max-width:64ch}
.pt-intro p{color:var(--gris);font-size:14px;margin-top:6px}
.pt-pie{max-width:1080px;margin:0 auto;padding:20px 26px 40px;border-top:1px solid var(--linea);
  font-size:11.5px;color:var(--gris-claro);text-align:center}

.pt-paq{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  padding:18px;display:flex;flex-direction:column}
.pt-paq h3{font-size:17px;margin:5px 0 6px}
.pt-paq .desc{font-size:12.5px;color:var(--gris);min-height:36px}
.pt-recursos{font-size:11.5px;color:var(--gris);margin-top:8px}
.pt-precio{margin:14px 0;padding-top:14px;border-top:1px solid var(--linea-suave)}
.pt-precio b{font-family:var(--display);font-size:24px;color:var(--ambar);font-weight:700}
.pt-precio small{color:var(--gris);font-size:11.5px}
.pt-precio .sin{color:var(--gris);font-size:13px}
.pt-paq form,.pt-paq>a{margin-top:auto}

/* ── Carrito y desglose ──────────────────────────────────────────────────── */
.carrito-linea{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--linea-suave);align-items:center}
.carrito-linea:last-child{border-bottom:0}
.cl-info{flex:1}
.cl-nom{font-weight:600;font-size:14px}
.cl-det{font-size:12px;color:var(--gris);margin-top:3px}
.cl-val{font-family:var(--codigo);font-size:13.5px;font-weight:600;white-space:nowrap}
.cl-quitar{flex:0 0 auto}

/* La sangría y la numeración de los pasos son documentación viva de la regla
   de negocio: aquí el ORDEN es información, no adorno. */
.calculo{font-size:13px}
.calculo .cl{display:flex;justify-content:space-between;padding:6px 0;gap:12px}
.calculo .cl .n{color:var(--gris)}
.calculo .cl .n small{display:block;font-size:11px;color:var(--gris-claro);margin-left:26px}
.calculo .cl .v{font-family:var(--codigo);font-size:12.5px;white-space:nowrap}
.calculo .cl.desc .v{color:var(--verde)}
.calculo .cl.sub{border-top:1px solid var(--linea-suave);margin-top:5px;padding-top:9px;font-weight:600}
.calculo .cl.sub .n{color:var(--tinta)}
.calculo .cl.tot{border-top:2px solid var(--tinta);margin-top:8px;padding-top:11px;
  font-family:var(--display);font-size:17px;font-weight:700}
.calculo .cl.tot .v{font-family:var(--display);font-size:21px;color:var(--ambar)}
.paso-n{font-family:var(--codigo);font-size:10px;color:var(--gris-claro);background:var(--papel);
  padding:1px 5px;border-radius:8px;margin-right:6px}

/* ── Cajas de aviso del portal ───────────────────────────────────────────── */
.aviso-caja{background:var(--casurid-tenue);color:var(--casurid-hondo);padding:12px 14px;
  border-radius:var(--r);font-size:12.5px;line-height:1.55;margin-bottom:16px}
.ok-caja{background:var(--verde-tenue);color:var(--verde);padding:12px 14px;border-radius:var(--r);
  font-size:13px;font-weight:600}
.lti-ico.bien{color:var(--verde)}
.forma-caja.ancha{max-width:470px}
.sep{border:0;border-top:1px solid var(--linea-suave);margin:20px 0}
.opc{font-weight:400;color:var(--gris)}
.enlace-btn{border:0;background:none;color:var(--casurid-hondo);font-family:var(--texto);
  font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline}

/* ── Documento para imprimir ─────────────────────────────────────────────── */
.doc-cab{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:20px;border-bottom:2px solid var(--tinta);margin-bottom:22px}
.doc-num{text-align:right}
.grande-txt{font-size:17px;font-weight:600}
.doc-partes{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:24px;font-size:13px}
.doc-et{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gris);
  font-weight:700;margin-bottom:5px}
.doc-tabla{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.doc-total{max-width:340px;margin-left:auto}
.doc-pie{margin-top:34px;padding-top:14px;border-top:1px solid var(--linea);
  font-size:11px;color:var(--gris-claro);line-height:1.6}

/* ============================================================================
   F6 · LICENCIAS Y RENOVACIÓN
   ========================================================================== */
.sem{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}
.sem.verde{background:var(--verde)}
.sem.ambar{background:var(--ambar)}
.sem.rojo{background:var(--rojo)}
.sem.vencida{background:var(--gris-claro)}
.ind{margin-left:16px}
.barra{height:6px;background:var(--linea-suave);border-radius:6px;overflow:hidden;min-width:70px}
.barra i{display:block;height:100%;background:var(--casurid)}
.barra i.bien{background:var(--verde)}
.barra i.lleno{background:var(--rojo)}
.fila-actual{background:var(--casurid-tenue)}

/* La caja de riesgo va arriba del todo y dice qué hacer, no solo qué pasa.
   Es la diferencia entre un tablero que informa y uno que sirve para trabajar. */
.riesgo-caja{border-radius:var(--r);padding:16px 18px;border-left:4px solid}
.riesgo-caja.r-alto{background:var(--rojo-tenue);border-left-color:var(--rojo)}
.riesgo-caja.r-medio{background:var(--ambar-tenue);border-left-color:var(--ambar)}
.riesgo-caja.r-bajo{background:var(--verde-tenue);border-left-color:var(--verde)}
.rc-nivel{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:5px}
.riesgo-caja.r-alto .rc-nivel{color:var(--rojo)}
.riesgo-caja.r-medio .rc-nivel{color:#8A5813}
.riesgo-caja.r-bajo .rc-nivel{color:var(--verde)}
.rc-motivo{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:7px}
.rc-accion{font-size:13px;color:var(--tinta);line-height:1.55}

.notas{background:#FAFBFC;border:1px solid var(--linea-suave);border-radius:var(--r-s);
  padding:11px 13px;font-size:12.5px;line-height:1.65;color:var(--gris);
  max-height:220px;overflow-y:auto;white-space:pre-line}

/* ============================================================================
   F7 · APROVISIONAMIENTO
   ========================================================================== */
.detalle-error{background:var(--rojo-tenue);font-size:11.5px;color:#8E3630;line-height:1.7;padding:9px 16px}
.detalle-error .mono{color:var(--rojo)}
.lista-req{font-size:12.5px;color:var(--gris);padding-left:18px;line-height:1.8;margin:0 0 10px}
.lista-req b{color:var(--tinta)}
.mt-s{margin-top:7px}

/* ============================================================================
   F2c · IMPORTADOR
   ========================================================================== */
.nivel{border:1px solid var(--linea);border-left-width:4px;border-radius:var(--r);
  background:var(--blanco);padding:12px 14px;margin-bottom:9px}
.nivel.a{border-left-color:var(--verde)} .nivel.b{border-left-color:var(--casurid)}
.nivel.c{border-left-color:var(--ambar)} .nivel.d{border-left-color:var(--gris-claro)}
.nivel .n-cab{display:flex;align-items:baseline;gap:9px}
.nivel .n-let{font-family:var(--display);font-size:15px;font-weight:800}
.nivel.a .n-let{color:var(--verde)} .nivel.b .n-let{color:var(--casurid)}
.nivel.c .n-let{color:var(--ambar)} .nivel.d .n-let{color:var(--gris)}
.nivel h4{font-size:14px}
.nivel .n-esf{margin-left:auto;font-size:11px;color:var(--gris);font-family:var(--codigo)}
.nivel p{margin:5px 0 0;font-size:12px;color:var(--gris);line-height:1.5}

.listado-archivos{max-height:300px;overflow-y:auto;font-size:11.5px;line-height:1.9;
  border:1px solid var(--linea-suave);border-radius:var(--r-s);padding:9px 11px;background:#FAFBFC}
.listado-archivos>div{display:flex;justify-content:space-between;gap:12px}

/* El paquete en custodia ocupa todo el ancho disponible del iframe de Moodle. */
.rep-externo{width:100%;height:78vh;min-height:520px;border:1px solid var(--linea);
  border-radius:var(--r);background:#fff;display:block}

/* ============================================================================
   F8 · PORTAL COMPLETO Y SOPORTE
   ========================================================================== */
.pt-cuerpo.estrecho{max-width:720px}
.resumen-pago{display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid var(--linea-suave);font-size:13.5px}
.resumen-pago.total{border-bottom:0;border-top:2px solid var(--tinta);margin-top:5px;
  padding-top:11px;font-family:var(--display);font-size:17px;font-weight:700}
.resumen-pago.total .dinero-txt{font-size:21px}

/* Hilo de conversación. Los mensajes de CASURID y los del cliente se alinean a
   lados opuestos: de un vistazo se ve quién habló último, que es lo que
   importa al abrir un ticket. */
.hilo{display:flex;flex-direction:column;gap:11px}
.msg{border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;background:var(--blanco);
  max-width:82%}
.msg-cab{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:6px}
.msg-cuerpo{font-size:13.5px;line-height:1.6;white-space:pre-line}
.msg.de-cliente{align-self:flex-start;border-left:3px solid var(--casurid)}
.msg.de-casurid{align-self:flex-end;background:var(--casurid-tenue);border-color:var(--casurid-tenue)}
/* La nota interna se distingue de forma inequívoca: escribirla creyendo que es
   una respuesta al cliente, o al revés, sería un problema serio. */
.msg.interno{align-self:flex-end;background:var(--ambar-tenue);border-color:var(--ambar);
  border-left:3px solid var(--ambar)}
.msg.interno .msg-cab b{color:#8A5813}
@media(max-width:700px){.msg{max-width:100%}}

/* ============================================================================
   F9 · CONSTRUCTOR VISUAL
   ----------------------------------------------------------------------------
   Los elementos son DIV posicionados en PORCENTAJE dentro de un lienzo 16:9.
   Nada de <canvas>: así el texto es seleccionable y accesible, y el
   reproductor es este mismo DOM sin los controles de edición.
   ========================================================================== */
.constructor{display:grid;grid-template-columns:190px 1fr 280px;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);overflow:hidden}
@media(max-width:1200px){.constructor{grid-template-columns:1fr}}
.constructor.solo-lectura .ct-paleta,.constructor.solo-lectura .ct-props{opacity:.5;pointer-events:none}

.ct-barra{grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:9px 13px;
  border-bottom:1px solid var(--linea);background:#FAFBFC;flex-wrap:wrap}
.ct-barra .sep{width:1px;height:20px;background:var(--linea);margin:0 4px}
.ct-barra .der{margin-left:auto}
.tb{border:1px solid transparent;background:none;padding:5px 9px;border-radius:var(--r-s);
  cursor:pointer;font-family:var(--texto);font-size:12.5px;color:var(--gris)}
.tb:hover{background:var(--papel);color:var(--tinta)}
.tb.peligro:hover{background:var(--rojo-tenue);color:var(--rojo)}
.tb-sel{padding:5px 9px;border:1px solid var(--linea);border-radius:var(--r-s);font-size:12.5px}

.ct-paleta{border-right:1px solid var(--linea);padding:13px 11px;background:#FCFDFE;overflow-y:auto;max-height:640px}
.ct-paleta .grupo-t{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--gris);font-weight:700;margin:13px 0 7px}
.ct-paleta .grupo-t:first-child{margin-top:0}
.ct-el{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--linea);
  border-radius:var(--r-s);background:var(--blanco);margin-bottom:5px;cursor:pointer;
  font-size:12.5px;width:100%;font-family:var(--texto);text-align:left;color:var(--tinta)}
.ct-el:hover{border-color:var(--casurid);color:var(--casurid-hondo)}
.ct-el .ci{width:17px;text-align:center;color:var(--casurid-hondo)}

.ct-centro{padding:16px;background:var(--papel);display:flex;flex-direction:column;gap:11px}
.ct-marco{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-s);
  box-shadow:0 2px 10px rgba(11,30,46,.07);overflow:hidden}
.ct-lienzo{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;user-select:none}

/* Elementos sobre el lienzo */
.el{position:absolute;box-sizing:border-box;cursor:move;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
/* `overflow-wrap` y no `word-break`: el segundo parte cualquier palabra por la
   mitad en cuanto aprieta —«magnitu / d»—, mientras que este solo lo hace
   cuando una palabra sola no cabe de ninguna manera. */
.el-txt{width:100%;line-height:1.25;overflow-wrap:break-word;pointer-events:none;white-space:pre-wrap}
.el-marca{font-size:11px;color:var(--casurid-hondo);background:var(--casurid-tenue);
  padding:4px 8px;border-radius:3px;pointer-events:none}
/* Sin tinte por omisión, igual que en el reproductor.
   El color de una forma viene de SU estilo —el conversor se lo pone desde el
   paquete— y un fondo por omisión aquí compite con él: cualquier forma que no
   alcance a fijar su color inline se queda de este azul grisáceo, que es
   exactamente el «cuadro gris» que tapaba las pestañas con su número.
   Una forma sin color no debe verse; ya la delimita su contorno de selección. */
.el-forma{background:transparent}
.el-linea{background:var(--tinta)}
.el-punto{background:var(--ambar);border:3px solid #fff;border-radius:50%;color:#fff;
  font-weight:700;box-shadow:0 0 0 4px rgba(217,142,43,.3)}
.el-boton{background:var(--casurid);color:#fff}
.el.en-capa{outline:1px dashed var(--ambar);outline-offset:1px}
.el-capa{position:absolute;top:2px;left:2px;font-size:9px;background:var(--ambar);color:#fff;
  padding:1px 5px;border-radius:8px;pointer-events:none}
.el-inter{position:absolute;top:2px;right:2px;font-size:10px;pointer-events:none}
.el.sel{outline:1.5px solid var(--casurid);outline-offset:2px}

.manija{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--casurid);
  border-radius:2px;z-index:999}
.m-nw{left:-5px;top:-5px;cursor:nwse-resize}   .m-n{left:50%;top:-5px;margin-left:-5px;cursor:ns-resize}
.m-ne{right:-5px;top:-5px;cursor:nesw-resize}  .m-e{right:-5px;top:50%;margin-top:-5px;cursor:ew-resize}
.m-se{right:-5px;bottom:-5px;cursor:nwse-resize} .m-s{left:50%;bottom:-5px;margin-left:-5px;cursor:ns-resize}
.m-sw{left:-5px;bottom:-5px;cursor:nesw-resize} .m-w{left:-5px;top:50%;margin-top:-5px;cursor:ew-resize}

.guia{position:absolute;background:var(--rojo);opacity:.7;pointer-events:none;z-index:998}
.guia-v{width:1px;top:0;bottom:0} .guia-h{height:1px;left:0;right:0}

.ct-esc-barra{display:flex;gap:6px;flex-wrap:wrap}
.ct-escenas{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px}
.esc{flex:0 0 112px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--blanco);
  padding:6px;cursor:pointer}
.esc.on{border-color:var(--casurid);box-shadow:0 0 0 2px var(--casurid-tenue)}
.esc .mini{aspect-ratio:16/9;background:#F4F7FA;border-radius:2px;margin-bottom:5px;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gris-claro)}
.esc-tit{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esc-n{font-size:10px;color:var(--gris)}
.esc.nueva{display:flex;align-items:center;justify-content:center;border-style:dashed;
  border-color:var(--casurid);color:var(--casurid-hondo);font-size:18px;font-weight:600}

.ct-props{border-left:1px solid var(--linea);padding:13px;overflow-y:auto;background:#FCFDFE;max-height:640px}
.ct-props h4{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
  font-weight:700;margin:15px 0 8px}
.ct-props h4:first-child{margin-top:0}
.ct-props .campo{margin-bottom:10px}
.ct-props .campo label{font-size:11px}
.ct-props input,.ct-props select,.ct-props textarea{padding:6px 9px;font-size:12.5px}
.ct-xy{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* El texto alternativo se resalta cuando falta: es lo único que impide
   publicar, así que tiene que verse sin buscarlo. */
.falta-marca.falta input{border-color:var(--ambar);background:var(--ambar-tenue)}

.ct-pie{display:flex;align-items:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
.ct-pie .campo.ancho{flex:1;min-width:260px;margin-bottom:0}
.lista-problemas{margin:8px 0 8px 18px;font-size:12.5px;line-height:1.7}

/* ── Reproductor de escenas ──────────────────────────────────────────────── */
.rep-nav{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap}
.rep-nav .rep-titulo{font-weight:600;font-size:14px}
.rep-nav .rep-pos{margin-left:auto;color:var(--gris);font-size:12px}
.rep-marco{overflow:hidden;border:1px solid var(--linea);border-radius:var(--r);background:#fff}
#rep-lienzo{position:relative;transform-origin:top left;overflow:hidden}
.rel{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:0;background:none;padding:0;font-family:var(--texto)}
.rel-txt{width:100%;line-height:1.3;overflow-wrap:break-word;white-space:pre-wrap}

/* ── El texto NO se recorta ──────────────────────────────────────────────────
   En Genially la caja de un texto es una referencia de POSICIÓN, no un
   recinto: si el contenido necesita una línea más, se desborda a la vista y
   nadie lo nota. Con `overflow:hidden` heredado de `.rel`, esa línea de más
   desaparecía — y solo en las palabras largas, que es lo que hacía el síntoma
   tan difícil de leer: «magnitud» cabía y «resistencias» no.

   En imágenes y formas el recorte sí es correcto: ahí la caja es el recinto. */
.rel-texto, .rel-boton { overflow: visible }
.el-texto, .el-boton   { overflow: visible }
.rel img,.rel video,.rel iframe{width:100%;height:100%;object-fit:contain;border:0;display:block}
.rel.clicable{cursor:pointer}
.rel.clicable:hover{filter:brightness(1.06)}
.rel.clicable:focus-visible{outline:3px solid var(--casurid);outline-offset:2px}
/* Una forma toma SU color, que el conversor ya le pone en el estilo. El color
   por omisión pintaba recuadros azul claro donde el original no tiene nada:
   se veían como huecos y parecían un fallo de carga. Solo se usa cuando la
   forma no trae ninguno y además es interactiva, para que se pueda ver dónde
   hay que pulsar mientras se edita. */
.rel-forma{background:transparent}
/* En el aula la zona interactiva no se ve: es un área de clic sobre el botón
   que ya dibujan sus piezas. El cursor y el foco la señalan; un recuadro de
   color encima sería un defecto visual. */
.rel-forma.clicable{background:transparent}

/* Las piezas de un botón —su píldora, su icono, su etiqueta— NO capturan el
   puntero: son decoración. Así el clic las atraviesa hasta la zona interactiva,
   que está DETRÁS, y no hace falta ponerla delante tapándolas.

   Es lo que permite que el botón se vea igual que en el original y siga
   funcionando: un producto que funciona pero se ve mal no se puede vender. */
.rel-imagen:not(.clicable),
.rel-forma:not(.clicable),
.rel-texto:not(.clicable){pointer-events:none}

/* SOLO en el reproductor. En el EDITOR todo elemento debe poder seleccionarse
   y arrastrarse: aplicar aquí `pointer-events:none` dejaba el lienzo muerto —
   se veía bien y no se podía tocar nada. Editar es lo contrario de mirar. */

/* Las piezas de un botón —su píldora, su icono, su etiqueta— NO capturan el
   puntero: son decoración. Así el clic las atraviesa hasta la zona interactiva,
   que está detrás, y no hace falta ponerla delante tapándolas.
   Es lo que permite que el botón se vea como el original y siga funcionando. */
.rel-imagen:not(.clicable),
.rel-forma:not(.clicable),
.rel-texto:not(.clicable) { pointer-events: none }
/* NINGÚN tinte en el aula. Esta regla pintaba de azul claro toda zona
   interactiva sin fondo propio — que son justamente las pestañas y los botones
   rectangulares que llevan un número y saltan a otra escena. El estudiante veía
   recuadros vacíos sobre el contenido.
   Una zona de clic es invisible por definición: lo que se ve son sus piezas. */
.rel-linea{background:var(--tinta)}
.rel-punto{background:var(--ambar);border-radius:50%;color:#fff;font-weight:700;
  box-shadow:0 0 0 4px rgba(217,142,43,.3);animation:pulso 2.2s infinite}
.rel-boton{background:var(--casurid);color:#fff}
@keyframes pulso{0%,100%{box-shadow:0 0 0 4px rgba(217,142,43,.3)}
                 50%{box-shadow:0 0 0 9px rgba(217,142,43,.12)}}

/* Animaciones de entrada. Catálogo fijo: un editor de línea de tiempo produce
   contenido que después nadie sabe mantener. */
.anim-aparecer{animation:aparecer .5s both}
.anim-desde-izq{animation:desdeIzq .5s both}
.anim-desde-der{animation:desdeDer .5s both}
.anim-desde-abajo{animation:desdeAbajo .5s both}
.anim-acercar{animation:acercar .45s both}
.anim-rebote{animation:rebote .6s both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes desdeIzq{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes desdeDer{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes desdeAbajo{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes acercar{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes rebote{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.05)}100%{transform:none}}

/* Quien tiene activada la reducción de movimiento no debe recibir animaciones:
   pueden provocar mareo y en un aula eso es un problema real. */
@media (prefers-reduced-motion: reduce){
  .anim-aparecer,.anim-desde-izq,.anim-desde-der,.anim-desde-abajo,
  .anim-acercar,.anim-rebote,.rel-punto{animation:none!important}
}

/* ============================================================================
   VISOR DE REGISTRO
   ----------------------------------------------------------------------------
   Fondo oscuro y monoespaciada: es un registro técnico y se lee mejor así.
   Los errores se resaltan porque son lo único que se busca de verdad.
   ========================================================================== */
.registro{background:var(--tinta);border-radius:var(--r);padding:11px 13px;
  max-height:420px;overflow-y:auto;font-family:var(--codigo);font-size:11.5px;line-height:1.75}
.reg-l{display:flex;gap:10px;padding:2px 0;color:#A9BCCE;border-bottom:1px solid rgba(255,255,255,.04)}
.reg-l:last-child{border-bottom:0}
.reg-h{flex:0 0 130px;color:#617B92}
.reg-n{flex:0 0 52px;text-transform:uppercase;font-size:10px;padding-top:1px}
.reg-m{flex:1;word-break:break-word;white-space:pre-wrap}
.reg-error .reg-n,.reg-error .reg-m{color:#E08078}
.reg-aviso .reg-n,.reg-aviso .reg-m{color:#E8B45C}
.reg-info .reg-n{color:#5DBE92}
.chip-dia{display:inline-block;font-size:11px;padding:2px 8px;margin-left:4px;border-radius:20px;
  background:var(--papel);color:var(--gris);text-decoration:none;font-family:var(--codigo)}
.chip-dia.on{background:var(--tinta);color:#fff}

/* ============================================================================
   ASISTENTE DE PUESTA EN MARCHA
   ----------------------------------------------------------------------------
   Aparece en el panel mientras falten pasos obligatorios. El paso siguiente se
   resalta: sin eso, una lista de nueve pasos es tan paralizante como ninguna.
   ========================================================================== */
.arranque{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.arr-cab{display:flex;align-items:center;gap:20px;padding:16px 18px;
  border-bottom:1px solid var(--linea-suave);background:#FAFBFC;flex-wrap:wrap}
.arr-cab h2{font-size:17px}
.arr-cab p{margin:3px 0 0;font-size:12.5px;color:var(--gris)}
.arr-prog{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:160px}
.arr-n{font-family:var(--display);font-size:16px;font-weight:700;color:var(--verde)}
.arr-prog .barra{flex:1}

.arr-paso{display:flex;gap:13px;align-items:flex-start;padding:12px 18px;
  border-bottom:1px solid var(--linea-suave)}
.arr-paso:last-child{border-bottom:0}
.arr-num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--papel);color:var(--gris);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.arr-paso.hecho{opacity:.55}
.arr-paso.hecho .arr-num{background:var(--verde-tenue);color:var(--verde)}
.arr-paso.ahora{background:var(--casurid-tenue)}
.arr-paso.ahora .arr-num{background:var(--casurid);color:#fff}
.arr-paso.opcional .arr-num{background:transparent;border:1px dashed var(--linea)}
.arr-cuerpo{flex:1;min-width:0}
.arr-tit{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.arr-det{font-size:12.5px;color:var(--gris);margin-top:3px;line-height:1.5}
.arr-nota{font-size:11.5px;color:var(--gris-claro);margin-top:4px;font-style:italic}
.arr-lado{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.arr-cifra{font-family:var(--codigo);font-size:11px;color:var(--gris);white-space:nowrap}
.arr-pie{margin:0;padding:12px 18px;background:#FAFBFC;border-top:1px solid var(--linea-suave);
  font-size:12px;color:var(--gris);line-height:1.55}
.botonera{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* ── Gestión de usuarios ─────────────────────────────────────────────────── */
.rol-op{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--linea);
  border-radius:var(--r-s);margin-bottom:6px;cursor:pointer}
.rol-op:hover{border-color:var(--casurid)}
.rol-op input{margin-top:3px}
.rol-op b{font-size:13px}
.rol-op small{display:block;font-size:11.5px;color:var(--gris);margin-top:2px;line-height:1.45}
.enlace-caja{border-left:3px solid var(--verde)}
.copiar-todo{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--r-s);
  font-size:12px;background:#FAFBFC;margin-top:8px}

/* ── Encargos y pasarelas ────────────────────────────────────────────────── */
.candidatos{max-height:340px;overflow-y:auto;border:1px solid var(--linea-suave);
  border-radius:var(--r-s);padding:9px}
.atenuada{opacity:.5}
.pas{border-left:3px solid var(--linea)}
.pas.on{border-left-color:var(--verde)}
.opcion-pago{display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--linea-suave)}
.opcion-pago:last-of-type{border-bottom:0}
.op-info{flex:1}
.op-nom{font-weight:600;font-size:14px}
.op-medios{font-size:12px;color:var(--gris);margin-top:2px}

/* ── Ajustes y segundo factor ────────────────────────────────────────────── */
.pasos-2fa{padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--tinta)}
.pasos-2fa li{margin-bottom:12px}
.secreto-2fa{display:inline-block;background:var(--tinta);color:#fff;padding:10px 16px;
  border-radius:var(--r-s);font-size:17px;letter-spacing:.14em;margin:8px 0;user-select:all}
.campo-codigo input{font-family:var(--codigo);font-size:22px;letter-spacing:.3em;
  text-align:center;max-width:210px;padding:10px}
.respaldos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.respaldos span{background:var(--tinta);color:#fff;font-family:var(--codigo);font-size:14px;
  padding:9px 12px;border-radius:var(--r-s);text-align:center;letter-spacing:.06em;user-select:all}
.lateral-pie .mi-cuenta{display:block;color:#8FA6BC;text-decoration:none;margin-bottom:3px}
.lateral-pie .mi-cuenta:hover{color:#fff}

/* ── Conversión de paquetes externos ─────────────────────────────────────── */
.opcion-nivel{padding:11px 0;border-bottom:1px solid var(--linea-suave)}
.opcion-nivel:last-child{border-bottom:0}
.opcion-nivel.no{opacity:.55}
.opcion-nivel b{font-size:13.5px}
.opcion-nivel p{margin:5px 0 0;font-size:12.5px;color:var(--gris);line-height:1.55}
.laminas{max-height:260px}
.lamina{display:flex;gap:9px;align-items:center;padding:5px 3px;cursor:pointer}
.lamina:hover{background:#F2F6FA}
.lamina .sec{margin-left:auto}
.caja-fondo{display:flex;gap:14px;align-items:flex-end;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r-s);padding:11px 13px}
.caja-fondo .campo{margin-bottom:0}
.tarjeta.destacada{border-left:3px solid var(--verde)}
.rel-txt b,.rel-txt strong{font-weight:700}
.el-txt b,.el-txt strong{font-weight:700}
.rel-txt p,.el-txt p{margin:0 0 .4em}
.rel-txt ul,.el-txt ul{margin:0;padding-left:1.2em}
.btn.peligro{border-color:var(--rojo);color:var(--rojo);background:var(--blanco)}
.btn.peligro:hover{background:var(--rojo);color:#fff}
.zona-peligro{border-left:3px solid var(--rojo)}
.btn.peligro{border-color:var(--rojo);color:var(--rojo)}
.btn.peligro:hover{background:var(--rojo-tenue)}
.acciones-fila{display:flex;gap:6px;align-items:center}

/* ============================================================================
   ASISTENTE DE IA
   ----------------------------------------------------------------------------
   El panel aparece flotando y siempre muestra la sugerencia antes de aplicarla.
   El cuadro es editable a propósito: casi ninguna sugerencia se usa tal cual.
   ========================================================================== */
.mini-btn.ia{background:var(--casurid-tenue);color:var(--casurid-hondo);border:0;
  border-radius:10px;font-size:10.5px;padding:2px 8px;cursor:pointer;margin-left:6px;
  font-family:var(--texto);font-weight:600}
.mini-btn.ia:hover{background:var(--casurid);color:#fff}
.ia-panel{position:fixed;right:20px;bottom:20px;z-index:9000;width:380px;max-width:calc(100vw - 40px)}
.ia-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:0 12px 40px rgba(11,30,46,.22);overflow:hidden}
.ia-cab{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--tinta);color:#fff;font-size:13px}
.ia-dest{color:#9CB3C7;font-size:11.5px}
.ia-x{margin-left:auto;background:none;border:0;color:#9CB3C7;font-size:19px;cursor:pointer;line-height:1}
.ia-x:hover{color:#fff}
.ia-cuerpo{padding:14px}
.ia-lbl{display:block;font-size:11px;font-weight:600;color:var(--gris);margin:9px 0 4px}
.ia-opc{font-weight:400}
.ia-cuerpo select,.ia-cuerpo input{width:100%;padding:7px 10px;border:1px solid var(--linea);
  border-radius:var(--r-s);font-size:13px;font-family:var(--texto)}
.ia-cuerpo .btn{margin-top:11px}
.ia-estado{font-size:12px;color:var(--gris);margin-top:9px;min-height:16px}
.ia-resultado{margin-top:12px;border-top:1px solid var(--linea-suave);padding-top:12px}
.ia-aviso{font-size:11.5px;color:#8A5813;background:var(--ambar-tenue);padding:7px 10px;
  border-radius:var(--r-s);margin-bottom:9px;line-height:1.45}
.ia-texto{border:1px solid var(--linea);border-radius:var(--r-s);padding:11px;font-size:13px;
  line-height:1.6;max-height:230px;overflow-y:auto;background:#FAFBFC;white-space:pre-wrap}
.ia-texto:focus{outline:2px solid var(--casurid);outline-offset:-1px;background:#fff}
.ia-botones{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.ia-botones .btn{margin-top:0;flex:1;min-width:96px}
.barra-acciones{display:flex;gap:7px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linea-suave);flex-wrap:wrap}
.b-ia{text-align:right;margin-bottom:3px}

/* La acción principal de una ficha va arriba y se ve sin buscarla. */
.barra-accion{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--casurid-tenue);border:1px solid var(--casurid);
  border-radius:var(--r);padding:14px 18px}
.barra-accion.listo{background:var(--verde-tenue);border-color:var(--verde)}
.ba-texto{flex:1;min-width:240px;font-size:14px}
.ba-texto .sec{display:block;margin-top:3px}
.ba-botones{display:flex;gap:8px;flex-wrap:wrap}

/* ── Catálogo de DBA ─────────────────────────────────────────────────────── */
.lista-dba{max-height:640px;overflow-y:auto}
.dba-item{padding:13px 18px;border-bottom:1px solid var(--linea-suave)}
.dba-item:last-child{border-bottom:0}
.dba-cab{display:flex;gap:9px;align-items:center;margin-bottom:6px;font-size:12px}
.dba-cab .cod{font-weight:600;color:var(--casurid-hondo)}
.dba-enun{margin:0;font-size:13.5px;line-height:1.6;color:var(--tinta)}
.dba-evid{margin-top:7px;font-size:12.5px}
.dba-evid summary{cursor:pointer;color:var(--casurid);user-select:none}
.dba-evid ul{margin:6px 0 0;padding-left:18px;color:var(--gris);line-height:1.6}
.orden-caja{background:var(--tinta);color:#B8E5CF;padding:12px 16px;border-radius:var(--r-s);
  font-size:13px;margin:9px 0;overflow-x:auto;white-space:nowrap}
.rutas-lista{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;max-height:200px;overflow-y:auto}
.rutas-lista span{background:#F2F6FA;border:1px solid var(--linea-suave);border-radius:4px;
  padding:2px 7px;font-size:11.5px}
.sentencias{margin:9px 0 0;padding-left:22px;font-size:12px;line-height:1.7}
.sentencias li.fallo{color:var(--rojo)}
.sentencias .sec{margin-top:2px}
.sentencias li.omitida{color:var(--gris)}

/* ── El constructor pinta el contenido, no rótulos ───────────────────────── */
.el-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;
  -webkit-user-drag:none;user-select:none}
.el-marca.falta{background:var(--rojo-tenue);color:var(--rojo);border:1px dashed var(--rojo)}
/* La zona interactiva va DELANTE de las piezas del botón —tiene que capturar
   el clic— así que su marca no puede taparlas. Solo el contorno, y el rótulo
   únicamente al pasar por encima o al seleccionarla: mientras tanto se ve el
   botón, que es lo que se está editando. */
.el[data-zona]{background:transparent!important}
.el-marca.zona{background:transparent;color:transparent;
  border:1px dashed rgba(43,124,196,.55);font-size:10.5px;
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transition:color .12s,background .12s}
.el:hover > .el-marca.zona,
.el.sel > .el-marca.zona{background:rgba(43,124,196,.10);color:var(--casurid)}

/* ── Selector de color · que se vea cuál está puesto ─────────────────────── */
/* Un <input type="color"> por defecto se dibuja como una franja fina en la que
   no se distingue el color. Se le da tamaño de muestra y se pone el valor al
   lado en texto: el color se ve, y además se puede leer y copiar. */
.color-fila{display:flex;align-items:center;gap:9px}
.color-fila input[type="color"]{
  width:40px;height:30px;padding:2px;border:1px solid var(--linea);
  border-radius:var(--r-s);background:var(--blanco);cursor:pointer;flex:none}
.color-fila input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.color-fila input[type="color"]::-webkit-color-swatch{border:0;border-radius:3px}
.color-fila input[type="color"]::-moz-color-swatch{border:0;border-radius:3px}
.color-fila input[type="range"]{flex:1;accent-color:var(--casurid)}
.color-eco{font-family:var(--codigo);font-size:11.5px;color:var(--gris);
  min-width:62px;user-select:all}

/* El selector de color se dibuja como una franja fina en varios navegadores.
   Con tamaño se ve el color puesto sin tener que abrirlo; el código en texto
   lo pone `ecos()` al lado, que ya existía. */
.color-fila input[type="color"]{width:44px;height:30px;padding:2px;
  border:1px solid var(--linea);border-radius:var(--r-s);background:#fff;
  cursor:pointer;flex:none}
.color-fila input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.color-fila input[type="color"]::-webkit-color-swatch{border:0;border-radius:3px}
.color-fila input[type="color"]::-moz-color-swatch{border:0;border-radius:3px}

.corregir summary{list-style:none;cursor:pointer;display:inline-block}
.corregir summary::-webkit-details-marker{display:none}
.corregir[open] summary{margin-bottom:9px}
.corregir form{background:#FAFBFC;border:1px solid var(--linea-suave);
  border-radius:var(--r-s);padding:12px 14px;min-width:290px}
.obliga{font-size:10.5px;font-weight:400;color:var(--ambar);background:var(--ambar-tenue);
  padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:1px}

/* ── Revisión de textos alternativos ─────────────────────────────────────── */
.alt-tabla td{vertical-align:top;padding:12px 16px}
.alt-tabla tr.pendiente{background:#FDF9EF}
.alt-prev{width:190px}
.alt-prev img{width:160px;height:90px;object-fit:contain;background:#F2F5F8;
  border:1px solid var(--linea-suave);border-radius:var(--r-s);display:block;margin-bottom:5px}
.alt-campo{width:100%}
.alt-campo:disabled{background:#F2F5F8;color:#8A98A6}
.alt-dec{width:120px;white-space:nowrap}

/* ── Acerca de ───────────────────────────────────────────────────────────── */
.acerca{padding:28px 32px}
.acerca-marca{margin-bottom:20px}
.acerca-marca img{max-width:230px;max-height:80px;object-fit:contain}
.acerca h2{font-size:26px;margin:0 0 4px;letter-spacing:-.4px}
.acerca-lema{color:var(--gris);margin:0 0 20px;font-size:14px}
.acerca hr{border:0;border-top:1px solid var(--linea-suave);margin:20px 0}
.acerca p{margin:0 0 14px;line-height:1.65}
.acerca-pie{margin-top:24px;padding-top:16px;border-top:1px solid var(--linea-suave);
  color:var(--gris);font-size:12.5px;line-height:1.7}

/* Token de activación recién generado. Se muestra UNA vez y hay que poder
   copiarlo sin pelearse con la selección, así que el campo ocupa todo el
   ancho y el texto no se parte. */
.token-caja{background:var(--casurid-tenue);border-radius:6px;padding:.8em}
.token-caja input{font-family:var(--casurid-mono,monospace);border:1px solid var(--linea);border-radius:4px;background:#fff}

/* Alta de alcance por grupos. Las casillas en varias columnas porque son 12
   grados y 12 asignaturas: en una sola columna la pantalla se vuelve un
   rollo de dos metros y el botón de guardar queda fuera de la vista. */
.casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.2rem .8rem}
.casillas .casilla{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}
.grupos-rapidos{display:flex;flex-wrap:wrap;gap:.3rem}

/* Edición de reglas de paquete dentro de la tabla. Campos estrechos para que
   las cinco columnas quepan sin que la tabla desborde. */
.min{min-width:7rem;padding:.2rem .3rem}
.mini{width:3.6rem;padding:.2rem .3rem;text-align:center}

/* ============================================================================
   UTILIDADES QUE LAS VISTAS YA USABAN Y NO EXISTÍAN
   ----------------------------------------------------------------------------
   Esto no es maquillaje. Cada clase de aquí se escribió en una vista hace
   meses y nunca pintó nada, así que la señal que la vista pretendía dar no
   llegaba. Una clase que no existe no falla: el navegador la ignora y la
   página sale bien, solo que sin lo que esa clase significaba.

   Las dos que más costaban:

     · `der` estaba definida SOLO como `.tarjeta-cab .der`, y se usa 108 veces,
       casi todas en celdas de tabla. Las columnas de números —cupos, alumnos,
       OVAs, dinero— nunca se alinearon a la derecha, que es lo único que
       permite comparar dos cifras de un vistazo.

     · `mal` no existía en ninguna parte. Es la que pinta en rojo el cupo de
       una línea que pasó del umbral, y es la señal entera de esa columna: sin
       ella, una línea al 95 % se lee igual que una al 10 %. Son 6 usos en
       Contrato y en Corte, justo donde se decide si hay que ampliar.

   Las encontró un recuento de clases usadas en las vistas contra las
   definidas aquí. Ese recuento es ahora la comprobación 24 del auditor.
   ========================================================================== */

/* Alineación y señal en celdas numéricas. */
.der{text-align:right}
.mal{color:var(--rojo);font-weight:600}
.pasa{color:var(--verde);font-weight:600}

/* Rejillas que faltaban en la serie. `.c2` deja el alta por grupos del
   contrato en dos columnas —grados a un lado, asignaturas al otro—, que es
   como está pensada: en una sola columna hay que bajar la página entera para
   ver qué se marcó arriba. */
.rejilla.c2{grid-template-columns:repeat(2,1fr)}
.rejilla.c-60-40{grid-template-columns:3fr 2fr}

/* Etiqueta de estado. Mismo papel que `.pill`, con los nombres que ya usan
   Contrato y Corte: `etiqueta e-<estado>`. Los estados son los de los dos
   ENUM, no una lista inventada: activación (pendiente, activa, suspendida,
   revocada) y corte (abierto, cerrado, facturado). */
.etiqueta{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;
          border-radius:20px;white-space:nowrap;
          background:var(--linea-suave);color:var(--gris)}
.etiqueta.e-activa,.etiqueta.e-facturado{background:var(--verde-tenue);color:var(--verde)}
.etiqueta.e-pendiente,.etiqueta.e-abierto{background:var(--ambar-tenue);color:var(--ambar)}
.etiqueta.e-suspendida{background:var(--ambar-tenue);color:var(--ambar)}
.etiqueta.e-revocada{background:var(--rojo-tenue);color:var(--rojo)}
.etiqueta.e-cerrado{background:var(--casurid-tenue);color:var(--casurid-hondo)}

/* Filtros en forma de pastilla pulsable. `on` marca el activo. */
.chip{display:inline-block;font-size:12px;padding:4px 11px;border-radius:20px;
      border:1px solid var(--linea);color:var(--gris);text-decoration:none}
.chip:hover{border-color:var(--gris-claro)}
.chip.on{background:var(--casurid-tenue);border-color:var(--casurid);
         color:var(--casurid-hondo);font-weight:600}

/* Tabla sin líneas: para los bloques de datos que no son una lista, donde la
   retícula estorba en vez de ayudar a leer. */
.sin-borde td,.sin-borde th{border-bottom:0;padding:4px 10px}

/* La nota que un administrador deja en un corte. Es texto escrito a mano y se
   respetan sus saltos de línea. */
.nota-corte{white-space:pre-wrap;font-family:inherit;font-size:13px;
            background:#FCFDFE;border:1px dashed var(--linea);
            border-radius:var(--r-s);padding:10px 12px;margin:0}

/* AL IMPRIMIR UN CORTE. El menú lateral, la barra de acciones y los botones
   no son parte del documento, y salían impresos en la hoja que se adjunta a
   un cobro. La clase existía en la vista desde el principio y no hacía nada. */
@media print {
  .no-imprimir{display:none !important}
  .lateral,.lateral-menu{display:none !important}
  .app{display:block}
  .lienzo{padding:0}
  .tarjeta{border:0}
}