/* =============================================================================
   EXIA · Campus — sistema visual
   -----------------------------------------------------------------------------
   Rediseñado sobre TailAdmin, los mismos tokens que /cuenta/. La plataforma
   entera —panel, cuenta y campus— se ve ahora como una sola cosa.

   POR QUÉ SE CONSERVAN TODOS LOS NOMBRES DE CLASE

   El campus tiene trece vistas que comparten un único armazón y 59 clases.
   Reescribir los nombres habría obligado a tocar las trece a la vez, y
   cualquier descuido deja una pantalla rota sin que nadie se entere hasta que
   un alumno la abre. Así que cambia TODO el aspecto y NINGÚN nombre: las
   vistas que no se tocan quedan rediseñadas solas.

   EL VERDE DE EXELES

   #00FFBA sobre blanco da 1,31:1. Es ilegible como texto y no hay tema que lo
   arregle. Se queda donde funciona —el logotipo sobre el bloque oscuro— y el
   color con el que se interactúa pasa a ser el de la plataforma. El verde
   vuelve, en su variante legible, para una sola cosa: lo aprobado y lo
   completado, que es donde significa algo.
   ============================================================================= */

/* ------------------------------- TIPOGRAFÍA --------------------------------
   Outfit servida desde el propio dominio, no desde Google Fonts: la misma
   decisión que en /cuenta/, y por el mismo motivo. Licencia SIL OFL. */
@font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fuentes/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fuentes/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fuentes/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fuentes/outfit-latin-700-normal.woff2) format("woff2")}

:root{
  /* Marca TailAdmin — el color con el que se interactúa */
  --brand-25:#f2f7ff; --brand-50:#ecf3ff; --brand-100:#dde9ff; --brand-200:#c2d6ff;
  --brand-300:#9cb9ff; --brand-400:#7592ff; --brand-500:#465fff; --brand-600:#3641f5;
  --brand-700:#2a31d8; --brand-800:#252dae; --brand-900:#262e89;

  --gray-25:#fcfcfd; --gray-50:#f9fafb; --gray-100:#f2f4f7; --gray-200:#e4e7ec;
  --gray-300:#d0d5dd; --gray-400:#98a2b3; --gray-500:#667085; --gray-600:#475467;
  --gray-700:#344054; --gray-800:#1d2939; --gray-900:#101828; --gray-950:#0c111d;

  --success-50:#ecfdf3; --success-500:#12b76a; --success-600:#039855; --success-700:#027a48;
  --error-50:#fef3f2;   --error-500:#f04438;   --error-600:#d92d20;   --error-700:#b42318;
  --warning-50:#fffaeb; --warning-500:#f79009; --warning-600:#dc6803; --warning-700:#b54708;

  --shadow-xs:0 1px 2px 0 rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px 0 rgba(16,24,40,.1),0 1px 2px -1px rgba(16,24,40,.1);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);

  /* La marca EXELES: solo sobre bloques oscuros */
  --verde:#00FFBA;
  --verde-t:#027a48;        /* su equivalente legible sobre claro */

  /* Semánticos — lo que usan las reglas de abajo */
  --fondo:var(--gray-50);
  --panel:#ffffff;
  --side:#ffffff;
  --borde:var(--gray-200);
  --texto:var(--gray-800);
  --texto-2:var(--gray-500);
  --texto-3:var(--gray-400);
  --hover:var(--gray-50);
  --oscuro:var(--gray-900);
  --oscuro-2:var(--gray-800);
  --tinta:var(--texto); --tinta-2:var(--texto-2); --tinta-3:var(--texto-3);
  --linea:var(--borde); --blanco:var(--panel);
  --ok:var(--success-600); --alerta:var(--warning-600); --mal:var(--error-600);
  --r:12px;
  --sombra:var(--shadow-xs);
}

html.dark{
  --fondo:var(--gray-900);
  --panel:#1a2231;
  --side:#171f2c;
  --borde:rgba(255,255,255,.08);
  --texto:var(--gray-100);
  --texto-2:var(--gray-400);
  --texto-3:var(--gray-500);
  --hover:rgba(255,255,255,.04);
  --oscuro:#0c121d;
  --oscuro-2:#151d2a;
  --shadow-xs:none; --shadow-sm:none; --sombra:none;
  --brand-50:rgba(70,95,255,.12);
  --ok:#4ade9a; --alerta:#f8c17c; --mal:#f9a19a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font:15px/1.6 Outfit,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.015em;line-height:1.3;color:var(--texto)}
h1{font-size:24px;font-weight:700}
h2{font-size:16px;font-weight:600}
h3{font-size:14px;font-weight:600}
.muted{color:var(--texto-2)}
.mini{font-size:12.5px}

/* ------------------------------------------------------------------ ARMAZÓN */
.app{display:flex;min-height:100vh}

.lateral{
  width:262px;flex:0 0 262px;background:var(--side);color:var(--texto);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  border-right:1px solid var(--borde);
}
.lateral .marca{padding:20px 20px 16px;border-bottom:1px solid var(--borde)}
.lateral .marca img{width:126px;height:auto;display:block}
html.dark .lateral .marca img{filter:brightness(0) invert(1);opacity:.92}
.lateral .marca span{
  display:block;margin-top:7px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);font-weight:600;
}
.menu{padding:14px 12px;flex:1;overflow-y:auto}
.menu .grupo{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--texto-3);margin:16px 10px 6px;font-weight:600;
}
.menu a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:var(--texto-2);text-decoration:none;font-size:14px;font-weight:500;
  transition:background .14s,color .14s;
}
.menu a:hover{background:var(--hover);color:var(--texto)}
.menu a.on{background:var(--brand-50);color:var(--brand-500);font-weight:600}
.menu a .ic{width:17px;flex:0 0 17px;opacity:.8;text-align:center}
.menu a.on .ic{opacity:1}
.menu .tag{
  margin-left:auto;font-size:11px;background:var(--gray-100);
  padding:1px 8px;border-radius:999px;color:var(--texto-2);font-weight:600;
}
html.dark .menu .tag{background:rgba(255,255,255,.07)}
.menu a.on .tag{background:var(--brand-500);color:#fff}
.lateral .pie{padding:14px 18px;border-top:1px solid var(--borde);font-size:12px;color:var(--texto-3)}
.lateral .pie a{color:var(--texto-2);text-decoration:none}
.lateral .pie a:hover{color:var(--brand-500)}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}

.barra{
  background:var(--panel);border-bottom:1px solid var(--borde);
  padding:12px 26px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:20;
}
.barra .titulo{font-weight:600;font-size:15px}

.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--borde);
  background:var(--panel);color:var(--texto-2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex:0 0 auto;font-size:15px;
}
.icon-btn:hover{background:var(--hover);color:var(--texto)}
.solo-oscuro{display:none}
html.dark .solo-claro{display:none}
html.dark .solo-oscuro{display:inline}

/* ------------------------------------------------- MENÚ DE LA CUENTA (arriba)
   Es un <details>: si el JavaScript no carga, igual abre y cierra. */
.barra .yo{margin-left:auto;position:relative}
.barra .yo > summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:4px 6px 4px 10px;border-radius:999px;border:1px solid transparent;transition:.14s;
}
.barra .yo > summary::-webkit-details-marker{display:none}
.barra .yo > summary:hover{border-color:var(--borde);background:var(--hover)}
.barra .yo .quien{text-align:right;line-height:1.3;color:var(--texto-2)}
.barra .yo img,.barra .yo .ini{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.barra .yo .ini{
  background:var(--brand-500);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;
}
.barra .yo .chevi{color:var(--texto-3);font-size:13px;line-height:1;transition:transform .15s}
.barra .yo[open] .chevi{transform:rotate(180deg)}

.menuyo{
  position:absolute;top:calc(100% + 9px);right:0;min-width:250px;z-index:40;
  background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;
}
html.dark .menuyo{box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menuyo .cab{padding:11px 12px 10px;border-bottom:1px solid var(--borde);margin-bottom:5px}
.menuyo .cab b{display:block;font-size:13.5px}
.menuyo .cab span{display:block;font-size:11.5px;color:var(--texto-2);margin-top:2px;word-break:break-all}
.menuyo a{
  display:block;padding:9px 12px;border-radius:8px;text-decoration:none;
  color:var(--texto);font-size:13.5px;font-weight:500;
}
.menuyo a:hover{background:var(--hover)}
.menuyo a.salir{color:var(--error-600);margin-top:5px;border-top:1px solid var(--borde);border-radius:0 0 8px 8px}
.menuyo a.salir:hover{background:var(--error-50)}
html.dark .menuyo a.salir{color:var(--mal)}
html.dark .menuyo a.salir:hover{background:rgba(240,68,56,.12)}

@media (max-width:620px){ .barra .yo .quien{display:none} }

.contenido{padding:26px;max-width:1180px;width:100%}

/* ------------------------------------------------------------------ PIEZAS */
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:20px;box-shadow:var(--sombra);margin-bottom:16px;
}
.tarjeta > h2{margin-bottom:4px}
.tarjeta > h2 + .muted{margin:0 0 14px}

/* Bloque destacado. Ya no es negro: en TailAdmin el énfasis lo da la marca. */
.panel-oscuro{
  background:var(--oscuro);color:var(--gray-100);border-radius:var(--r);padding:24px;
  margin-bottom:16px;border:1px solid transparent;
}
.panel-oscuro h1,.panel-oscuro h2,.panel-oscuro h3{color:#fff}
.panel-oscuro .cifra{color:var(--verde)}
.panel-oscuro .muted{color:var(--gray-400)}
/* Sin el :not(), un botón dentro del bloque quedaba con su color de texto
   pisado y desaparecía sobre su propio fondo. */
.panel-oscuro a:not(.btn):not(.chip){color:var(--verde)}

.rejilla{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Rejilla de tarjetas de equipo. auto-FILL, no auto-fit: con una sola tarjeta,
   auto-fit la estira a todo el ancho y la foto se vuelve un cartel. */
.eqs{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}

.dato .et{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-2);font-weight:600}
.dato .cifra{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:3px}
.dato .sub{font-size:12.5px;color:var(--texto-2);margin-top:2px}

/* ----------------------------------------------------------------- BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:10px;border:1px solid transparent;
  font:500 14px/1.2 inherit;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-p{background:var(--brand-500);color:#fff}
.btn-p:hover{background:var(--brand-600)}
.btn-s{background:var(--panel);color:var(--texto);border-color:var(--borde)}
.btn-s:hover{background:var(--hover)}
.btn-v{background:var(--success-600);color:#fff}
.btn-v:hover{background:var(--success-700)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:0 0 auto}

/* ---------------------------------------------------------------- ETIQUETAS */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:var(--gray-100);color:var(--texto-2);
}
html.dark .chip{background:rgba(255,255,255,.07)}
.chip.ok{background:var(--success-50);color:var(--success-700)}
.chip.av{background:var(--warning-50);color:var(--warning-700)}
.chip.no{background:var(--error-50);color:var(--error-700)}
.chip.vd{background:var(--brand-50);color:var(--brand-600)}
html.dark .chip.ok{background:rgba(18,183,106,.15);color:#5fdba0}
html.dark .chip.av{background:rgba(247,144,9,.15);color:#f8c17c}
html.dark .chip.no{background:rgba(240,68,56,.15);color:#f9a19a}
html.dark .chip.vd{background:rgba(70,95,255,.18);color:#9cb9ff}

/* --------------------------------------------------------------- FORMULARIO */
label{display:block;font-size:12.5px;color:var(--texto-2);font-weight:500;margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=search],input[type=tel],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--borde);border-radius:9px;
  font:inherit;background:var(--panel);color:var(--texto);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-300);box-shadow:0 0 0 3px var(--brand-50);
}
html.dark input:focus,html.dark select:focus,html.dark textarea:focus{box-shadow:0 0 0 3px rgba(70,95,255,.2)}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
textarea{min-height:88px;resize:vertical}

/* ------------------------------------------------------------------ TABLAS */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-2);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--borde);
}
td{padding:11px 10px;border-bottom:1px solid var(--borde);color:var(--texto)}
tr:last-child td{border-bottom:0}

/* ----------------------------------------------------------------- PROGRESO */
.barrita{height:7px;border-radius:999px;background:var(--gray-100);overflow:hidden}
html.dark .barrita{background:rgba(255,255,255,.08)}
.barrita > i{display:block;height:100%;background:var(--brand-500);border-radius:999px;transition:width .35s}
.barrita.completa > i{background:var(--success-500)}
.panel-oscuro .barrita{background:rgba(255,255,255,.12)}
.panel-oscuro .barrita > i{background:var(--verde)}

/* ------------------------------------------------------------------ AVISOS */
.aviso{border-radius:11px;padding:13px 16px;margin-bottom:16px;font-size:14px}
.aviso.ok{background:var(--success-50);color:var(--success-700)}
.aviso.av{background:var(--warning-50);color:var(--warning-700)}
.aviso.no{background:var(--error-50);color:var(--error-700)}
html.dark .aviso.ok{background:rgba(18,183,106,.13);color:#5fdba0}
html.dark .aviso.av{background:rgba(247,144,9,.13);color:#f8c17c}
html.dark .aviso.no{background:rgba(240,68,56,.13);color:#f9a19a}
.vacio{text-align:center;padding:44px 20px;color:var(--texto-2)}
.vacio .ic{font-size:34px;opacity:.3;margin-bottom:10px}

/* -------------------------------------------------------- TARJETA DE EQUIPO */
.equipo{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:17px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.equipo:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.equipo.tengo{border-color:var(--brand-300);background:var(--brand-25)}
html.dark .equipo.tengo{background:rgba(70,95,255,.08)}
.equipo .nom{font-weight:600;font-size:15px}
.equipo .met{font-size:12px;color:var(--texto-3)}
.equipo .acc{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}
/* `aspect-ratio` sola no basta: cuando una categoría tiene UN solo equipo,
   `auto-fit` colapsa la rejilla a una columna, la tarjeta ocupa todo el ancho
   y la foto se convierte en un cartel de 700 px de alto. El tope de altura es
   lo que impide que una categoría con un equipo se vea como un error. */
.equipo .foto{
  aspect-ratio:4/3;max-height:190px;border-radius:10px;background:var(--gray-50);
  margin:-4px 0 4px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
html.dark .equipo .foto{background:rgba(255,255,255,.04)}
.equipo .foto img{width:100%;height:100%;object-fit:contain;padding:8px}
.equipo .foto .sinfoto{font-size:11px;color:var(--texto-3);letter-spacing:.05em;text-transform:uppercase}

/* ------------------------------ CAPACITACIÓN: EL EQUIPO, DE FONDO */
/* La foto del equipo entra como FONDO del panel oscuro: el bloque se ve igual
   que sin ella —mismo alto, mismo texto, misma barra— y la imagen solo da
   contexto por detrás.

   El problema real es que las fotos del catálogo vienen sobre FONDO BLANCO. Una
   foto así, puesta tal cual de fondo, es un rectángulo blanco con dos bordes
   rectos a la vista. Se resuelve en tres capas:
     1. la foto, sobredimensionada y anclada a la derecha, de modo que se sale
        por arriba y por abajo y no se le ven los cantos horizontales;
     2. una máscara que la desvanece hacia la izquierda, donde va el texto;
     3. un velo de degradados del color del panel, que la baja al nivel de
        fondo y garantiza el contraste del título.
   La variable --foto la pone la vista. Sin ella no hay ni una regla que
   aplique: un equipo sin foto sale exactamente como antes. */
.panel-oscuro.conFoto{position:relative;overflow:hidden}

.panel-oscuro.conFoto::before,
.panel-oscuro.conFoto::after{content:'';position:absolute;inset:0;pointer-events:none}

.panel-oscuro.conFoto::before{
  background-image:var(--foto);
  background-repeat:no-repeat;
  background-position:right -6px center;
  /* Más alta que el panel: el equipo se ve grande y lo que sobra se pierde por
     arriba y por abajo, que es donde no molesta. */
  background-size:auto 130%;
  opacity:.6;
  filter:saturate(.92);
  /* La clave del asunto: máscara RADIAL medida en píxeles.
     Las fotos del catálogo vienen sobre fondo BLANCO. Puestas de fondo tal cual,
     lo que se ve no es un equipo: es un rectángulo claro con los cantos rectos
     pegado a la derecha del panel. La máscara lo disuelve por los cuatro lados
     —el blanco se apaga antes de llegar a su propio borde— y deja solo el halo
     del equipo.
     En píxeles y no en porcentaje a propósito: el porcentaje se calcula sobre el
     ancho del PANEL, así que en una pantalla ancha el desvanecido caía fuera de
     la foto y el canto volvía a verse. */
  -webkit-mask-image:radial-gradient(165px 155px at calc(100% - 130px) 50%,#000 34%,rgba(0,0,0,.5) 66%,transparent 92%);
          mask-image:radial-gradient(165px 155px at calc(100% - 130px) 50%,#000 34%,rgba(0,0,0,.5) 66%,transparent 92%);
}

/* El velo. Va en su propia capa para que el degradado NO se recorte con la
   máscara de la foto: si compartieran capa, el velo se desvanecería con ella y
   el blanco de la foto volvería a subir. */
.panel-oscuro.conFoto::after{
  background:
    linear-gradient(90deg,
      var(--oscuro) 0%, var(--oscuro) 34%,
      rgba(16,24,40,.80) 54%, rgba(16,24,40,.40) 76%, rgba(16,24,40,.28) 100%),
    linear-gradient(180deg,
      rgba(16,24,40,.45) 0%, rgba(16,24,40,0) 30%,
      rgba(16,24,40,0) 70%, rgba(16,24,40,.50) 100%);
}

.panel-oscuro.conFoto > *{position:relative;z-index:1}

/* En pantallas estrechas el texto ocupa todo el ancho y la foto pasaría por
   detrás del título. Se retira casi del todo: contexto, nunca estorbo. */
@media (max-width:720px){
  .panel-oscuro.conFoto::before{opacity:.18;background-position:right -30px bottom}
  .panel-oscuro.conFoto::after{
    background:linear-gradient(90deg,var(--oscuro) 0%,var(--oscuro) 55%,rgba(16,24,40,.80) 100%);
  }
}

/* ---- Con PORTADA: la imagen ocupa el panel entero ----
   Esta es la que se sube a mano desde el panel. A diferencia de la foto del
   producto, aquí la imagen manda: va a sangre por los cuatro lados y el panel
   crece un poco para que se pueda ver algo de ella.
   El velo no es decoración: sobre una foto cualquiera, el título blanco puede
   caer sobre una zona clara y volverse ilegible. El degradado garantiza que la
   mitad izquierda —donde está el texto— siempre esté oscura. */
.panel-oscuro.conPortada{
  position:relative;overflow:hidden;min-height:210px;
  display:flex;flex-direction:column;justify-content:center;
}
.panel-oscuro.conPortada::before,
.panel-oscuro.conPortada::after{content:'';position:absolute;inset:0;pointer-events:none}
.panel-oscuro.conPortada::before{
  background-image:var(--foto);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.panel-oscuro.conPortada::after{
  background:
    linear-gradient(90deg,
      rgba(16,24,40,.95) 0%, rgba(16,24,40,.88) 34%,
      rgba(16,24,40,.58) 64%, rgba(16,24,40,.34) 100%),
    linear-gradient(180deg,
      rgba(16,24,40,.35) 0%, rgba(16,24,40,.05) 45%, rgba(16,24,40,.55) 100%);
}
.panel-oscuro.conPortada > *{position:relative;z-index:1}

/* En móvil el texto ocupa todo el ancho: el velo se cierra para que siga
   leyéndose sobre cualquier foto. */
@media (max-width:720px){
  .panel-oscuro.conPortada{min-height:170px}
  .panel-oscuro.conPortada::after{
    background:linear-gradient(180deg,rgba(16,24,40,.72) 0%,rgba(16,24,40,.88) 100%);
  }
}

/* Miniatura del equipo en las tarjetas del listado.
   Pequeña y con placa clara: las fotos del catálogo traen fondo blanco, así que
   sobre una placa blanca con esquinas redondeadas se leen como el icono del
   equipo. En oscuro se mantiene clara a propósito —un recuadro oscuro sobre
   tarjeta oscura no se distinguiría del fondo—. */
.capMini{
  flex:0 0 auto;width:52px;height:52px;border-radius:11px;overflow:hidden;
  background:#fff;border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;
}
html.dark .capMini{background:#f4f6fa;border-color:rgba(255,255,255,.12)}
.capMini img{max-width:100%;max-height:100%;object-fit:contain;padding:5px}

/* En claro el panel sigue siendo oscuro (es su gracia), así que no cambia. */

/* --------------------------------------------------------- ASISTENTE (wizard) */
.pasos{display:flex;align-items:center;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--texto-3)}
.paso .n{
  width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gray-100);color:var(--texto-2);font-weight:600;font-size:12px;flex:0 0 25px;
}
html.dark .paso .n{background:rgba(255,255,255,.08)}
.paso.act{color:var(--texto);font-weight:600}
.paso.act .n{background:var(--brand-500);color:#fff}
.paso.hecho .n{background:var(--success-500);color:#fff}
.paso .linea{width:22px;height:1px;background:var(--borde)}

/* =============================================================================
   PROGRAMAS DE ESTUDIO
   ============================================================================= */

/* --- tarjeta de programa --- */
.progs{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.prog{
  background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:9px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.prog:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.prog .top{display:flex;align-items:flex-start;gap:12px}
.prog .marca-p{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:16px;
}
.prog h3{font-size:15.5px;line-height:1.35}
.prog .baja{font-size:13px;color:var(--texto-2);line-height:1.5}
.prog .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.prog .pieprog{margin-top:auto;padding-top:12px}
.prog .pieprog .cifras{display:flex;justify-content:space-between;font-size:12px;
  color:var(--texto-2);margin-bottom:6px}

/* --- índice del programa --- */
.uni{border:1px solid var(--borde);border-radius:12px;margin-bottom:12px;overflow:hidden;background:var(--panel)}
.uni > summary{
  padding:14px 17px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  font-weight:600;font-size:14.5px;
}
.uni > summary::-webkit-details-marker{display:none}
.uni > summary:hover{background:var(--hover)}
.uni > summary .num{
  width:26px;height:26px;border-radius:8px;background:var(--gray-100);color:var(--texto-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto;
}
html.dark .uni > summary .num{background:rgba(255,255,255,.07)}
.uni > summary .cuentas{margin-left:auto;font-size:12px;color:var(--texto-2);font-weight:400}
.uni > summary .fl{color:var(--texto-3);transition:transform .18s;font-size:12px}
.uni[open] > summary .fl{transform:rotate(180deg)}
.uni[open] > summary{border-bottom:1px solid var(--borde)}

.lec{
  display:flex;align-items:center;gap:12px;padding:12px 17px;text-decoration:none;
  border-bottom:1px solid var(--borde);transition:background .13s;
}
.lec:last-child{border-bottom:0}
.lec:hover{background:var(--hover)}
.lec .marca-l{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--gray-300);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;
}
.lec.leida .marca-l{background:var(--success-500);border-color:var(--success-500);color:#fff}
.lec .tx{flex:1;min-width:0}
.lec .tx b{display:block;font-size:14px;font-weight:500;color:var(--texto)}
.lec.leida .tx b{color:var(--texto-2)}
.lec .tx span{font-size:12px;color:var(--texto-3)}
.lec .min{font-size:12px;color:var(--texto-3);white-space:nowrap}

.tipo{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
.tipo.leccion{background:var(--gray-100);color:var(--texto-2)}
.tipo.seguridad{background:var(--error-50);color:var(--error-700)}
.tipo.protocolo{background:var(--success-50);color:var(--success-700)}
.tipo.caso{background:var(--warning-50);color:var(--warning-700)}
html.dark .tipo.leccion{background:rgba(255,255,255,.07);color:var(--gray-400)}
html.dark .tipo.seguridad{background:rgba(240,68,56,.15);color:#f9a19a}
html.dark .tipo.protocolo{background:rgba(18,183,106,.15);color:#5fdba0}
html.dark .tipo.caso{background:rgba(247,144,9,.15);color:#f8c17c}

/* =============================================================================
   LECTURA
   -----------------------------------------------------------------------------
   Aquí no manda la retícula del panel, manda el ojo. Medida de línea corta,
   interlineado alto y jerarquía por tamaño, no por color: un texto de 15
   minutos se lee mal en el mismo ancho en el que se leen tres cifras.
   ============================================================================= */
.lectura-cab{margin-bottom:22px}
.lectura-cab .ruta{font-size:12.5px;color:var(--texto-2);margin-bottom:8px}
.lectura-cab .ruta a{color:var(--brand-500);text-decoration:none;font-weight:500}
.lectura-cab .ruta a:hover{text-decoration:underline}
.lectura-cab h1{font-size:30px;line-height:1.2;letter-spacing:-.02em}
.lectura-cab .met{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;
  font-size:12.5px;color:var(--texto-2)}

/* Barra de avance de lectura, pegada bajo la barra superior. */
.leer-progreso{position:sticky;top:61px;z-index:15;height:3px;background:transparent;margin:0 -26px 22px}
.leer-progreso > i{display:block;height:100%;width:0;background:var(--brand-500);transition:width .1s linear}

.lectura{
  max-width:68ch;font-size:16.5px;line-height:1.75;color:var(--texto);
}
.lectura > *:first-child{margin-top:0}
.lectura p{margin:0 0 1.15em}
.lectura h3{font-size:20px;margin:2em 0 .6em;letter-spacing:-.015em;line-height:1.3}
.lectura h4{font-size:16.5px;margin:1.7em 0 .5em;font-weight:600}
.lectura b,.lectura strong{font-weight:600;color:var(--texto)}
.lectura ul,.lectura ol{margin:0 0 1.15em;padding-left:1.35em}
.lectura li{margin-bottom:.5em}
.lectura li::marker{color:var(--texto-3)}
.lectura a{color:var(--brand-500)}
.lectura table{margin:0 0 1.3em;font-size:15px}
.lectura img{max-width:100%;height:auto;border-radius:10px}
.lectura hr{border:0;border-top:1px solid var(--borde);margin:2em 0}
.lectura code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--gray-100);padding:.12em .38em;border-radius:5px;
}
html.dark .lectura code{background:rgba(255,255,255,.08)}
/* El contenido traía sus propios .callout y .pearl del campus anterior. */
.lectura .callout,.lectura .pearl{
  background:var(--brand-25);border-left:3px solid var(--brand-500);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:1.5em 0;
}
html.dark .lectura .callout,html.dark .lectura .pearl{background:rgba(70,95,255,.09)}
.lectura .callout p:last-child,.lectura .pearl p:last-child{margin-bottom:0}

/* --- piezas alrededor de la lectura --- */
.claves{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:18px 20px;margin-bottom:20px}
.claves h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--texto-2);margin-bottom:10px}
.claves ul{margin:0;padding-left:18px}
.claves li{margin-bottom:7px;font-size:14.5px}
.claves li:last-child{margin-bottom:0}

.perla{
  background:var(--warning-50);border-radius:12px;padding:16px 19px;margin:22px 0;
  border-left:3px solid var(--warning-500);
}
html.dark .perla{background:rgba(247,144,9,.1)}
.perla b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--warning-700);margin-bottom:6px}
html.dark .perla b{color:#f8c17c}
.perla p{margin:0;font-size:14.5px;line-height:1.6}

.evidencia{border-top:1px solid var(--borde);margin-top:26px;padding-top:16px;
  font-size:13px;color:var(--texto-2);max-width:68ch}
.evidencia b{color:var(--texto);font-weight:600}

.navlec{
  display:flex;gap:12px;justify-content:space-between;align-items:stretch;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--borde);flex-wrap:wrap;
}
.navlec a{
  flex:1;min-width:210px;background:var(--panel);border:1px solid var(--borde);
  border-radius:12px;padding:13px 16px;text-decoration:none;transition:border-color .15s;
}
.navlec a:hover{border-color:var(--brand-300)}
.navlec a span{display:block;font-size:11.5px;color:var(--texto-3);margin-bottom:2px}
.navlec a b{font-size:14px;font-weight:500;line-height:1.35}
.navlec .sig{text-align:right}

/* -------------------------------------------------------------------- MÓVIL */
.abrir-menu{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--texto)}
.velo{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:50;display:none}
.velo.on{display:block}
@media (min-width:901px){.velo{display:none!important}}
@media (max-width:900px){
  .lateral{
    position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;
  }
  .lateral.abierto{transform:none}
  .abrir-menu{display:block}
  .contenido{padding:18px}
  .barra{padding:11px 16px}
  .lectura{font-size:16px}
  .lectura-cab h1{font-size:24px}
  .leer-progreso{margin:0 -18px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .lateral,.barra,.no-imprimir,.navlec,.leer-progreso{display:none !important}
  body{background:#fff;color:#000}
  .contenido{padding:0;max-width:none}
  .tarjeta,.claves{border:0;box-shadow:none;padding:0}
  .lectura{max-width:none;font-size:12pt}
}