/* ============================================================================
   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(--tinta-suave);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(--tinta-suave);font-size:12.5px;line-height:1.7}