/* Universidad TRAINMAR · Sistema de clases · v26.9.19
   2026-09-19 · Ruben: "son 14 clases por materia y cada clase va a tener su material PDF, su video, su podcast"
   Manual de identidad: navy #000033 de fondo, naranja #FF6E01 sólo en formas y botones (nunca texto),
   diagonal a 42°, Poppins en titulares (ligero + bold), Lato en texto. Color por licenciatura en --carrera. */

:root{
  --navy:#000033; --navy-2:#0B0B45; --naranja:#FF6E01; --naranja-tinte:#FF9440;
  --fondo:#F4F4F8; --hoja:#FFFFFF; --tinta:#000033; --tinta-2:#4A4A6A; --linea:#DADAE6;
  --ok:#0E7A4B; --ok-fondo:#E4F5EC; --error:#B42318; --error-fondo:#FDECEA; --aviso-fondo:#FFF4E5;
  --carrera:#FF6E01; --carrera-tinte:#FF9440;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 15px/1.55 Lato,"Segoe UI",Arial,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
code{font:500 13px/1 Consolas,"Cascadia Mono",monospace;background:#EEF;padding:2px 6px;border-radius:5px}
h1,h2,h3{font-family:Poppins,Arial,sans-serif;letter-spacing:-.01em;margin:0;text-wrap:balance}
.ligero{font-weight:300}
.antetitulo{font:500 12px/1.3 Poppins,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#C9C9E0;margin:0 0 8px}
.antetitulo.oscuro{color:var(--tinta-2)}
.titulo{font-size:clamp(28px,4vw,40px);line-height:1.1}
.subtitulo{font-size:18px;font-weight:700}
.nota{color:var(--tinta-2);font-size:14px;margin:6px 0}

/* Barra superior */
.barra{background:var(--navy);color:#fff;position:sticky;top:0;z-index:30}
.barra-in{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:130px;display:block}
.marca-sub{font:500 11px Poppins,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;border-left:1px solid #3A3A70;padding-left:12px}
.menu{display:flex;gap:4px;flex:1}
.menu a{color:#E6E6F2;text-decoration:none;font:500 14px Poppins,Arial,sans-serif;padding:7px 12px;border-radius:999px}
.menu a:hover{background:#15154F}
.barra-der{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:13px}
.quien{color:#C9C9E0}
.salir{color:#fff;font-weight:700;text-decoration:none}
.version{font:500 12px Poppins,Arial,sans-serif;color:#fff;background:#15154F;padding:3px 10px;border-radius:999px;letter-spacing:.06em}

.hoja{max-width:1320px;margin:0 auto;padding:28px 24px 56px}
.pie{max-width:1320px;margin:0 auto;padding:18px 24px 30px;display:flex;justify-content:space-between;color:var(--tinta-2);font-size:12px;border-top:1px solid var(--linea)}
.angosto{max-width:560px;margin:0 auto}

/* Botones */
.boton{display:inline-block;border:0;cursor:pointer;background:var(--naranja);color:var(--navy);font:700 14px Poppins,Arial,sans-serif;padding:11px 22px;border-radius:999px;min-height:44px;text-decoration:none}
.boton:hover{background:var(--naranja-tinte)}
.boton:disabled{opacity:.5;cursor:wait}
.boton-sec{display:inline-block;cursor:pointer;background:#fff;color:var(--navy);border:1.5px solid var(--linea);font:500 13px Poppins,Arial,sans-serif;padding:6px 14px;border-radius:999px;text-decoration:none}
.boton-sec:hover{border-color:var(--navy)}
.boton-quitar{cursor:pointer;background:none;border:0;color:var(--error);font:500 13px Poppins,Arial,sans-serif;padding:6px 8px;text-decoration:underline}
.en-linea{display:inline}

/* Formularios */
.formulario{display:flex;flex-direction:column;gap:6px}
.formulario label,.agregar label{font:500 13px Poppins,Arial,sans-serif;color:var(--tinta-2);margin-top:8px}
input[type=text],input:not([type]),input[type=email],input[type=password],input[type=url],input[type=search],select,textarea{
  width:100%;font:400 15px Lato,Arial,sans-serif;color:var(--tinta);background:#fff;border:1.5px solid var(--linea);border-radius:10px;padding:10px 12px}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--naranja);outline:none;box-shadow:0 0 0 3px rgba(255,110,1,.2)}
fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
fieldset:disabled textarea,fieldset:disabled input,fieldset:disabled select{background:#F7F7FA}
.tarjeta{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:22px}
.formulario .boton{align-self:flex-start;margin-top:14px}

/* Avisos */
.aviso{padding:12px 16px;border-radius:12px;background:var(--aviso-fondo);margin:0 0 16px}
.aviso-ok{background:var(--ok-fondo);color:var(--ok)}
.aviso-error{background:var(--error-fondo);color:var(--error)}
.aviso-clave{background:var(--navy);color:#fff}
.aviso-clave p{margin:4px 0}
.clave{font:700 26px/1.2 Consolas,"Cascadia Mono",monospace;letter-spacing:.08em}

/* Acceso (login / primer uso) */
body.acceso{background:var(--navy)}
.acceso-lienzo{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.acceso-marca{position:relative;overflow:hidden;background:var(--navy);display:flex;flex-direction:column;justify-content:flex-end;padding:48px}
.acceso-diagonal{position:absolute;inset:0;background:var(--naranja);clip-path:polygon(0 100%,0 62%,100% -28%,100% 100%);opacity:1}
/* la diagonal sube de izquierda a derecha a 42° en un lienzo cercano a 4:3 */
.acceso-marca .antetitulo,.acceso-lema{position:relative;color:var(--navy)}
.acceso-lema{font:300 clamp(40px,6vw,84px)/1 Poppins,Arial,sans-serif;margin:0;letter-spacing:-.02em}
.acceso-lema b{font-weight:700}
.acceso-caja{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,6vw,80px)}
.acceso-logo{width:220px;margin-bottom:28px}
.acceso-caja h1{font-size:30px}
.acceso-caja .nota{color:#C9C9E0}
.acceso-caja label{color:#C9C9E0}
.acceso-caja .formulario{max-width:380px;margin-top:18px}
.acceso-version{margin-top:28px;font:500 12px Poppins,Arial,sans-serif;color:#8C8CB0;letter-spacing:.08em}

/* Inicio */
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.buscador{flex:0 1 420px}
.buscador label{display:block;font:500 13px Poppins,Arial,sans-serif;color:var(--tinta-2);margin-bottom:6px}
.resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border-radius:16px;overflow:hidden;margin-bottom:30px}
.resumen div{background:var(--hoja);padding:16px 20px;display:flex;flex-direction:column}
.resumen b{font:300 40px/1 Poppins,Arial,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.resumen span{font:500 12px Poppins,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);margin-top:6px}
.bloque{margin-bottom:34px}
.bloque > .subtitulo{margin-bottom:14px}
.programas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.programa{display:flex;flex-direction:column;background:var(--hoja);border:1px solid var(--linea);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s}
.programa:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,51,.1)}
.programa-franja{height:64px;background:var(--carrera);position:relative;overflow:hidden}
.programa-franja::after{content:"";position:absolute;right:18px;top:12px;width:34px;height:40px;background:var(--carrera-tinte);
  clip-path:path("M5 0H29Q34 0 34 5V20C34 29 26 36 17 40C8 36 0 29 0 20V5Q0 0 5 0Z")}
.programa-cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.programa-clave{font:500 11px Poppins,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.programa-nombre{font:700 19px/1.2 Poppins,Arial,sans-serif}
.programa-datos{font-size:13px;color:var(--tinta-2)}
.programa-avance{font-size:13px;color:var(--tinta-2)}
.programa-avance b{color:var(--tinta);font-family:Poppins,Arial,sans-serif}

/* Barras de avance: color de la carrera */
.barra-av{display:inline-block;width:100%;height:8px;background:#E7E7EF;border-radius:999px;overflow:hidden;vertical-align:middle}
.barra-av i{display:block;height:100%;background:var(--carrera);border-radius:999px;min-width:0}
.barra-av.grande{height:10px}
.barra-av.claro{background:rgba(255,255,255,.18);max-width:520px}
.barra-av.claro i{background:#fff}

/* Resultados de búsqueda */
.lista{display:flex;flex-direction:column;gap:8px}
.fila{display:grid;grid-template-columns:90px 1fr 170px;gap:14px;align-items:center;background:var(--hoja);border:1px solid var(--linea);border-left:5px solid var(--carrera);border-radius:12px;padding:12px 16px;text-decoration:none}
.fila-clave{font:500 13px Poppins,Arial,sans-serif;color:var(--tinta-2)}
.fila-nombre{font:500 15px Poppins,Arial,sans-serif}
.fila-nombre small{display:block;font:400 13px Lato,Arial,sans-serif;color:var(--tinta-2)}
.fila-avance{display:flex;gap:8px;align-items:center;font:500 13px Poppins,Arial,sans-serif}

/* Portada de programa / materia / clase: bloque navy con franja de color de la carrera */
.portada-carrera{background:var(--navy);color:#fff;border-radius:18px;padding:22px 26px 26px;margin-bottom:22px;position:relative;overflow:hidden;border-top:10px solid var(--carrera)}
.portada-carrera::after{content:"";position:absolute;right:0;bottom:0;height:70%;aspect-ratio:1.11/1;background:var(--carrera);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.9}
.portada-carrera > *{position:relative;z-index:1}
.portada-carrera h1{font-size:clamp(24px,3.4vw,36px);line-height:1.15;max-width:900px}
.portada-datos{color:#C9C9E0;margin:10px 0 12px}
.portada-datos b{color:#fff;font-family:Poppins,Arial,sans-serif}
.migas{font-size:13px;color:#C9C9E0;margin-bottom:12px}
.migas a{color:#fff}
.migas span{opacity:.5;margin:0 4px}
.portada-carrera.compacta{padding-bottom:18px}

/* Programa: materias por cuatrimestre o módulo */
.grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.grupo{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.grupo h2{font:500 12px Poppins,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);display:flex;gap:10px;align-items:baseline;margin:2px 4px 4px}
.grupo h2 b{font:300 30px/1 Poppins,Arial,sans-serif;color:var(--tinta)}
.materia{display:grid;grid-template-columns:1fr;gap:4px;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;text-decoration:none}
.materia:hover{border-color:var(--carrera)}
.materia.completa{border-left:5px solid var(--carrera)}
.materia-nombre{font:500 14px/1.3 Poppins,Arial,sans-serif}
.materia-meta{font-size:12px;color:var(--tinta-2)}
.materia-avance{display:flex;align-items:center;gap:10px;font:500 12px Poppins,Arial,sans-serif}

/* Materia: las clases */
.objetivo{background:var(--hoja);border:1px solid var(--linea);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.objetivo summary{cursor:pointer;font:500 14px Poppins,Arial,sans-serif}
.objetivo p{margin:10px 0 0;max-width:80ch}
.leyenda{display:flex;gap:18px;font-size:12px;color:var(--tinta-2);margin:0 0 10px}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid #B9B9CC;vertical-align:-1px;margin-right:4px}
.punto.si{background:var(--carrera);border-color:var(--carrera)}
.clases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.clase{display:grid;grid-template-columns:56px 1fr auto 110px;gap:16px;align-items:center;background:var(--hoja);border:1px solid var(--linea);border-radius:12px;padding:12px 16px;text-decoration:none}
.clase:hover{border-color:var(--carrera)}
.clase-num{font:300 34px/1 Poppins,Arial,sans-serif;color:var(--tinta);text-align:center;font-variant-numeric:tabular-nums}
.clase.con-material .clase-num{color:#fff;background:var(--carrera);border-radius:10px;padding:8px 0}
.clase-titulo{display:block;font:500 15px/1.3 Poppins,Arial,sans-serif}
.clase-temas{display:block;font-size:13px;color:var(--tinta-2);margin-top:2px}
.clase-material{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip{font:500 11px Poppins,Arial,sans-serif;padding:3px 9px;border-radius:999px;border:1.5px solid #CFCFDD;color:#9A9AB2;white-space:nowrap}
.chip.si{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-total{font:700 12px Poppins,Arial,sans-serif;min-width:24px;text-align:center}
.estado{font:500 11px Poppins,Arial,sans-serif;padding:4px 10px;border-radius:999px;background:#EEEEF4;color:var(--tinta-2);text-align:center;white-space:nowrap}
.estado-proceso{background:var(--aviso-fondo);color:#8A4B00}
.estado-lista{background:var(--ok-fondo);color:var(--ok)}

/* Clase */
.clase-cabeza{display:flex;gap:18px;align-items:center}
.clase-num.grande{font-size:64px;color:#fff;min-width:70px}
.pasos{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.paso{color:#fff;text-decoration:none;font:500 13px Poppins,Arial,sans-serif;border:1.5px solid #3A3A70;padding:6px 14px;border-radius:999px;background:var(--navy)}
.paso:hover{border-color:#fff}
.clase-hoja{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start}
.seccion-cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.falta{margin:0;font:500 13px Poppins,Arial,sans-serif;color:#8A4B00;background:var(--aviso-fondo);padding:4px 12px;border-radius:999px}
.falta.ok{color:var(--ok);background:var(--ok-fondo)}
.vacio{background:var(--hoja);border:1.5px dashed #C9C9DA;border-radius:14px;padding:22px;color:var(--tinta-2);text-align:center}
.recursos{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.recurso{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:14px 16px}
.recurso header{display:flex;gap:10px;align-items:center}
.recurso h3{font-size:15px;font-weight:500}
.reproductor{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-top:10px;background:#000}
.reproductor iframe{width:100%;height:100%;border:0;border-radius:10px}
.recurso audio{width:100%;margin-top:10px}
.recurso-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--tinta-2);margin:8px 0}
.recurso-meta .liga{word-break:break-all}
.recurso-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.agregar{display:flex;flex-direction:column;gap:4px}
.agregar h3{font-size:16px}
.agregar-rejilla{display:grid;grid-template-columns:200px 1fr;gap:12px}
.agregar-rejilla > div{display:flex;flex-direction:column;gap:4px}
.agregar .boton{align-self:flex-start;margin-top:14px}
.o{text-align:center;color:var(--tinta-2);font:500 12px Poppins,Arial,sans-serif;margin:8px 0 0}
input[type=file]{font:400 14px Lato,Arial,sans-serif;padding:10px;border:1.5px dashed #C9C9DA;border-radius:10px;background:#FAFAFD}
.progreso{position:relative;height:30px;background:#E7E7EF;border-radius:999px;overflow:hidden;margin-top:12px}
.progreso i{position:absolute;inset:0 auto 0 0;width:0;background:var(--naranja);transition:width .2s}
.progreso span{position:relative;display:block;text-align:center;font:500 13px/30px Poppins,Arial,sans-serif;color:var(--navy)}
.estado-sel{width:auto;padding:6px 10px;font:500 13px Poppins,Arial,sans-serif}
.guardar-fila{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.guardar-fila .boton{margin-top:10px}

/* Usuarios */
.usuarios{overflow-x:auto;background:var(--hoja);border:1px solid var(--linea);border-radius:16px;margin-bottom:22px}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font:500 12px Poppins,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);padding:12px 14px;border-bottom:1px solid var(--linea)}
.tabla td{padding:10px 14px;border-bottom:1px solid #EEEEF4;vertical-align:middle}
.tabla td small{display:block;color:var(--tinta-2);font-size:12px}
.tabla tr.inactivo td{opacity:.5}
.tabla select{width:auto;padding:5px 8px;font-size:13px}
.acciones{white-space:nowrap}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:22px}

@media (max-width:980px){
  .clase-hoja,.dos-columnas,.acceso-lienzo{grid-template-columns:1fr}
  .acceso-marca{min-height:220px}
  .clase{grid-template-columns:44px 1fr;row-gap:8px}
  .clase-material,.estado{grid-column:2;justify-content:flex-start;justify-self:start}
  .resumen{grid-template-columns:repeat(2,1fr)}
  .fila{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hoja{padding:18px 16px 40px}
  .barra-in{padding:10px 16px;gap:12px}
  .marca-sub,.quien{display:none}
  .agregar-rejilla{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ================================================================
   2026-09-19 (v26.9.19.2) · Menú lateral como el de SistemasGLI ("me gusta ese estilo" -> "dale"),
   con los colores de la Universidad: fondo navy, barrita naranja en la opción activa.
   ================================================================ */
body.con-lateral{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
.contenido-principal{min-width:0;display:flex;flex-direction:column}
.contenido-principal .hoja{flex:1;width:100%}
.lateral{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--navy);color:#fff;display:flex;flex-direction:column;border-right:1px solid #12124A}
.lat-logo{display:flex;flex-direction:column;gap:8px;padding:20px 22px 16px;text-decoration:none;background:#00002A;border-bottom:1px solid #16164F}
.lat-logo img{width:170px}
.lat-logo span{font:500 10px Poppins,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#9C9CC4}
.lat-yo{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #16164F}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--naranja);color:var(--navy);display:grid;place-items:center;font:700 14px Poppins,Arial,sans-serif}
.lat-yo-txt{display:flex;flex-direction:column;min-width:0}
.lat-yo-txt b{font:700 13px Poppins,Arial,sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-yo-txt small{font-size:12px;color:#9C9CC4}
.lat-nav{flex:1;padding:8px 0 16px}
.lat-sec{margin:18px 22px 6px;font:500 11px Poppins,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7E7EA8}
.lat-item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 22px;color:#E6E6F2;text-decoration:none;font:400 14.5px Lato,Arial,sans-serif}
.lat-item:hover{background:#0E0E48}
.lat-item.activo{background:#14144F;color:#fff;font-weight:700}
.lat-item.activo::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:0 4px 4px 0;background:var(--naranja)}
.lat-item svg{flex:none;width:18px;height:18px;fill:#9C9CC4}
.lat-item.activo svg{fill:#fff}
.lat-item span{flex:1;min-width:0;line-height:1.25}
.lat-item em{font:500 11px Poppins,Arial,sans-serif;font-style:normal;color:#9C9CC4;background:#10104A;padding:2px 7px;border-radius:999px}
.lat-punto{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;margin:0 3px;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.subtitulo .lat-punto{vertical-align:1px;margin-left:0}
.lat-pie{padding:14px 22px 18px;border-top:1px solid #16164F;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.lat-salir{display:block;text-align:center;color:#fff;text-decoration:none;font:500 13px Poppins,Arial,sans-serif;border:1.5px solid #34346E;border-radius:10px;padding:9px}
.lat-salir:hover{border-color:#fff}
.lat-pie .version{align-self:center}
.movil{display:none}
.velo{position:fixed;inset:0;background:rgba(0,0,30,.55);z-index:40}

@media (max-width:900px){
  body.con-lateral{display:block}
  .movil{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;background:var(--navy);padding:10px 16px}
  .movil img{width:120px}
  .movil .version{margin-left:auto}
  .movil-menu{width:40px;height:40px;border:0;background:#14144F;border-radius:10px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;cursor:pointer}
  .movil-menu span{display:block;height:2px;background:#fff;border-radius:2px}
  .lateral{position:fixed;left:0;top:0;z-index:50;width:280px;max-width:86vw;transform:translateX(-100%);transition:transform .2s}
  .lateral.abierto{transform:none}
}

/* 2026-09-19 (v26.9.19.3) · Sello TRAINMAR MEXICO · institutotrainmar.edu.mx que mando Ruben */
.lat-sello{display:block;width:92px;margin:6px auto 4px;opacity:.55}
.acceso-sello{position:absolute;right:40px;top:40px;width:clamp(110px,14vw,170px);opacity:.9}

/* 2026-09-19 (v26.9.19.4) · Sugerencias y comentarios */
.tarjeta-sug{border:2px dashed #C9C9DA;background:#FFFDF9}
.tarjeta-sug .programa-franja{background:var(--naranja);display:flex;align-items:center;padding-left:18px}
.tarjeta-sug .programa-franja::after{display:none}
.sug-icono{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 22px Poppins,Arial,sans-serif}
.sug-hoja{display:grid;grid-template-columns:minmax(300px,1fr) 1.4fr;gap:22px;align-items:start}
.pegar{border:2px dashed #C9C9DA;border-radius:12px;padding:14px;background:#FAFAFD;display:flex;flex-direction:column;gap:8px}
.pegar p{margin:0;font-size:14px;color:var(--tinta-2)}
.pegar.arrastrando,.pegar:focus{border-color:var(--naranja);outline:none}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.miniaturas img{width:120px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--linea)}
.sug header{flex-wrap:wrap}
.sug header .estado{margin-left:auto}
.sug-error{border-left:5px solid var(--error)}
.sug-texto{white-space:pre-wrap;margin:10px 0}
.sug-respuesta{background:var(--ok-fondo);color:var(--ok);padding:8px 12px;border-radius:10px;font-size:14px}
.sug-responder{display:grid;grid-template-columns:150px 1fr auto;gap:8px;margin-top:8px}
@media (max-width:980px){.sug-hoja,.sug-responder{grid-template-columns:1fr}}
.angosto-izq{max-width:560px}

/* 2026-09-19 (v26.9.19.5) · Ruben: "Activo A = Lectura base ... Activo H = Recurso interactivo del bloque" */
.activos-sec{margin-bottom:26px}
.activos-sec .cuenta{font:500 13px Poppins,Arial,sans-serif;color:var(--tinta-2);margin-left:6px}
.activos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.activo{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;border-top:4px solid #CFCFDD}
.activo.activo-ok{border-top-color:var(--carrera)}
.activo header{display:flex;gap:12px;align-items:center}
.activo h3{font-size:15px;font-weight:700;line-height:1.25}
.activo-letra{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:700 20px Poppins,Arial,sans-serif;background:#EDEDF4;color:#9A9AB2}
.activo-ok .activo-letra{background:var(--carrera);color:#fff}
.activo-estado{margin:2px 0 0;font:500 12px Poppins,Arial,sans-serif;color:#8A4B00}
.activo-ok .activo-estado{color:var(--ok)}
.activo-archivo{border-top:1px dashed var(--linea);padding-top:6px}
.activo-archivo .recurso-meta{margin:2px 0 6px}
.activo-archivo b{font-weight:700;color:var(--tinta);word-break:break-all}
.activo-archivo.anterior{opacity:.7}
.activo .reproductor{width:100%;border-radius:10px}
.activo audio{width:100%}
.activo-subir{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:8px;border-top:1px solid var(--linea)}
.activo-subir label{font:500 12px Poppins,Arial,sans-serif;color:var(--tinta-2)}
.activo-subir input[type=file]{font-size:13px;max-width:100%}
.activo-subir .boton{align-self:flex-start;min-height:36px;padding:7px 18px}
.chip-activo{min-width:24px;text-align:center;padding:3px 6px}

/* 2026-09-19 (v26.9.19.6) · Ruben: "falta el de recuperar contraseña en el login" */
.acceso-olvide{margin:14px 0 0;font:500 14px Poppins,Arial,sans-serif}
.acceso-olvide a{color:var(--navy)}
.correo-fila{display:flex;gap:6px;margin-top:4px}
.correo-fila input{font-size:12px;padding:4px 8px;min-width:200px}
.pidio{display:block;color:var(--error);font-weight:700}