/* ------------------------------------------------------------------
   LA LÍNEA DE DISEÑO DEL PORTAL
   ------------------------------------------------------------------
   Va después de todas las demás hojas y todo cuelga de #portal, así
   que la página de acceso no se toca.

   La caja no tiene relleno propio: lo pone cada cosa de adentro, con
   la medida que viaja en --lado. Es la única forma de que el título y
   las líneas lleguen a los bordes y, al mismo tiempo, todo lo de
   adentro quede parejo en la misma vertical. Las tarjetas de números
   de arriba y las del catálogo van por su cuenta, con su propio
   relleno.

   Los colores dicen una cosa cada uno:
        verde   = está listo
        naranjo = esto pide que lo mires
        rojo    = falta algo
        gris    = no corresponde todavía
   ------------------------------------------------------------------ */

#portal {
  --ui-linea:     #e6e9ef;
  --ui-tinta:     #1d1d1f;
  --ui-tinta-2:   #5c6470;
  --ui-tinta-3:   #7b8494;
  --ui-ok:        #4b6b26;
  --ui-ok-b:      #eaf2e1;
  --ui-malo:      #b24a32;
  --ui-malo-b:    #fbe5e1;
  --ui-naranjo:   #d9823b;
  --ui-naranjo-b: #fdf1e6;
}

/* ---------- LA CAJA ---------- */
/* Las tarjetas del catálogo quedan fuera: ya tienen su propio diseño
   y este archivo, al colgar de #portal,
   le gana por prioridad a cualquier cosa que digan las demás hojas. */
#portal .card:not(.curso):not(.curso-ayuda) {
  --lado: 22px;
  border-radius: 16px;
  border: 1px solid #e7e9ec;
  box-shadow: 0 1px 2px rgba(29,29,31,.04);
  padding: 0;
  margin: 0 0 20px;
  overflow: hidden;
}

/* Cada cosa de adentro pone su propio relleno a los lados. */
#portal .card > *:not(button):not(.button):not(.pill) {
  padding-left: var(--lado, 0px);
  padding-right: var(--lado, 0px);
}
/* Un botón o una píldora con relleno se engordan: esos se corren con
   margen, que es lo que mueve sin deformar. */
#portal .card > button,
#portal .card > .button,
#portal .card > .pill {
  margin-left: var(--lado, 0px);
  margin-right: var(--lado, 0px);
}
/* Arriba y abajo: aire, salvo donde el título ya hace de cabecera. */
/* El relleno de arriba y abajo es de la caja, no del botón: ponérselo
   al botón lo estira y le corre el texto del centro. A los botones y a
   las píldoras se los mueve con margen, que no los deforma. */
#portal .card > *:first-child:not(h2):not(h3):not(.home-section-heading):not(button):not(.button):not(.pill) {
  padding-top: 20px;
}
#portal .card > *:last-child:not(button):not(.button):not(.pill) { padding-bottom: 20px; }
#portal .card > button:first-child,
#portal .card > .button:first-child,
#portal .card > .pill:first-child { margin-top: 20px; }
#portal .card > button:last-child,
#portal .card > .button:last-child,
#portal .card > .pill:last-child { margin-bottom: 20px; }
/* Y separado de lo que tiene encima: pegado al párrafo se lee como si
   fuera parte del texto. */
#portal .card > button, #portal .card > .button { margin-top: 14px; }
/* Una tabla llega a los bordes: el relleno lo ponen sus celdas. */
#portal .card > *:has(table) { --lado: 0px; }

/* El título de la caja hace de cabecera, con su línea abajo. */
#portal .card > h2:first-child,
#portal .card > h3:first-child,
#portal .card > .home-section-heading:first-child {
  margin: 0;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--ui-linea);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--ui-tinta);
}
#portal .card > .home-section-heading:first-child h2 {
  font-size: 17px; color: var(--ui-tinta); font-weight: 600;
}
#portal .card > .home-section-heading:first-child p {
  margin: 4px 0 0; font-weight: 400; color: var(--ui-tinta-3);
}

/* Las tarjetas de números de arriba: el número manda, el rótulo no.
   Estas sí llevan su relleno en la caja: no hay líneas que cruzar. */
#portal .stats .card { --lado: 0px; padding: 20px 22px; }
/* El rótulo en dos líneas fijas: así los cuatro números quedan a la
   misma altura aunque uno de los rótulos sea largo. Todo tiene que ir simétrico. */
#portal .stats .card > p {
  margin: 0 0 8px;
  min-height: 42px;
  font-size: 13.5px; color: var(--ui-tinta-3);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
#portal .stats .card > *:first-child { padding-top: 0; }
#portal .stats .card > *:last-child { padding-bottom: 0; }
#portal .stats .card .number {
  font-size: 34px; font-weight: 600; letter-spacing: -1px;
  color: var(--blue);
}
#portal .stats .card small { display: block; margin-top: 4px; color: var(--ui-tinta-3); }

/* Las dos columnas del Inicio: cada caja con su propio alto. Estiradas para calzar, la de la derecha queda con un vacío
   grande abajo que no dice nada. */
#portal .home-columns { align-items: start; }
#portal .home-attention h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -.2px;
  color: var(--ui-tinta);
}

/* ---------- LAS TABLAS ---------- */
#portal table { width: 100%; border-collapse: collapse; }
#portal th {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ui-tinta-3);
  padding: 14px 16px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--ui-linea);
}
#portal td {
  padding: 16px; vertical-align: middle; border: 0;
  border-top: 1px solid var(--ui-linea);
  color: var(--ui-tinta-2); white-space: normal;
}
/* La primera y la última columna en la misma vertical que el título. */
#portal th:first-child, #portal td:first-child { padding-left: 22px; }
#portal th:last-child,  #portal td:last-child  { padding-right: 22px; }
#portal tbody tr:first-child td { border-top: 0; }
#portal tbody tr:hover td { background: #f6f8fb; }
#portal td strong, #portal td b { color: var(--ui-tinta); font-size: 1.02rem; }
/* Las columnas de un solo dato, centradas bajo su título. */
#portal th.centro, #portal td.centro { text-align: center; }

/* ---------- LAS FILAS QUE NO SON TABLA ---------- */
#portal .record {
  padding: 18px var(--lado, 22px);
  border-bottom: 1px solid var(--ui-linea);
}
#portal .card > .record:first-child { padding-top: 18px; }
#portal .card > .record:last-child { padding-bottom: 18px; border-bottom: 0; }
#portal .record strong { color: var(--ui-tinta); }
#portal .record p { margin: 4px 0 0; font-size: 13px; color: var(--ui-tinta-3); }

/* Las filas de la lista de capacitaciones, con el mismo aire. */
#portal .card > .execution { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ui-linea); }
#portal .card > .execution:last-child { border-bottom: 0; }
#portal .execution h2 { font-size: 18px; }
#portal .execution-meta { margin: 20px 0 18px; }
#portal .execution-meta dt { color: var(--ui-tinta-3); }
#portal .execution-meta dd { color: var(--ui-tinta); }

/* ---------- LOS COLORES QUE DICEN ALGO ---------- */
/* Todas las píldoras del mismo porte: mismo alto, mismo relleno, misma
   letra. Antes cada una tomaba el tamaño de su texto y en una fila con
   tres se veían de tres tamaños distintos. */
#portal .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; padding: 0 12px; margin: 0;
  border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .2px;
  background: #f1f3f6; color: #48566a;
}
/* Un punto del mismo color que su texto: le pone color a la pantalla y
   hace que las cuatro se lean como una familia, sin que ninguna grite
   más que otra. Antonio: «las píldoras… además les falta color». */
#portal .pill::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8; margin-right: 7px;
}
#portal .pill.success { background: var(--ui-ok-b);      color: var(--ui-ok); }
#portal .pill.warn    { background: var(--ui-naranjo-b); color: #8a5a22; }
#portal .pill.falta   { background: var(--ui-malo-b);    color: var(--ui-malo); }
#portal .pill.info    { background: #e9eef4;               color: var(--blue); }
#portal .pill.neutral { background: #f1f3f6;               color: #6b7482; }

/* Cuánto falta para que termine: texto, no píldora.
   Gris cuando hay tiempo, naranjo cuando se viene encima. */
#portal .falta-dias { margin: 4px 0 0; font-size: .9rem; color: var(--ui-tinta-3); }
#portal .falta-dias.cerca  { color: var(--ui-naranjo); font-weight: 600; }
#portal .falta-dias.pasado { color: var(--ui-malo);    font-weight: 600; }

/* ---------- LOS BOTONES ---------- */
/* Azul el que hace algo, blanco el que acompaña. El naranjo queda
   libre para avisar, que es su único trabajo.
   Se escribe con .workspace porque así está escrito en menu.css: con
   menos, el naranjo de allá le gana a esto. */
#portal .workspace button:not(.secondary),
#portal .workspace .button:not(.secondary) {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(17,26,43,.06);
}
#portal .workspace a.button:not(.secondary) { background: var(--blue); }
#portal .workspace .secondary {
  background: #fff; border: 1px solid #dcdfe5; color: var(--blue);
}
#portal .workspace .secondary:hover { background: #f6f8fb; filter: none; }
/* El menú de la izquierda no son botones de acción: se quedan como están. */
#portal #nav button, #portal #logout, #portal #mobile-menu-toggle {
  background: transparent; border-color: transparent; color: #657182;
  box-shadow: none; font-weight: 500;
}
#portal #nav button.active { background: #eaf0f5; color: var(--blue); }
#portal #logout { border: 1px solid #dcdfe5; color: var(--blue); }

/* ---------- LOS TÍTULOS DE PANTALLA ---------- */
#portal .heading h1 {
  font-size: 30px; font-weight: 600; letter-spacing: -.8px;
  color: var(--ui-tinta);
}
#portal .heading p { font-size: 15px; color: var(--ui-tinta-3); }
#portal .eyebrow {
  font-size: 11px; letter-spacing: .12em; font-weight: 700;
  color: var(--ui-tinta-3) !important; text-transform: uppercase;
}
/* Cuando el rótulo abre la caja, necesita ser bloque para tomar aire. */
#portal .card > .eyebrow:first-child { display: block; padding-top: 20px; }

/* Las notas al pie: recuadro suave, no párrafo suelto. Adentro de una
   caja se alinea con lo demás; sola en la pantalla, no se corre. */
#portal .course-note {
  background: #f6f8fb; border-radius: 12px;
  padding: 14px 22px; font-size: 13px; line-height: 1.6;
  color: var(--ui-tinta-2); margin: 16px 0 20px;
}
#portal .card > .course-note {
  margin: 16px var(--lado, 22px) 20px;
  padding-left: 16px; padding-right: 16px;
}
#portal .empty {
  padding: 28px 22px; text-align: center; color: var(--ui-tinta-3);
}
#portal .form-result:empty { padding: 0; margin: 0; }

/* ---------- LAS PESTAÑAS ---------- */
#portal .tabs, #portal .detail-tabs { gap: 10px; }
#portal .tabs button, #portal .detail-tabs button { font-size: 13.5px; }

@media (max-width: 700px) {
  #portal .card:not(.curso):not(.curso-ayuda) { --lado: 18px; }
  #portal .card > h2:first-child,
  #portal .card > h3:first-child,
  #portal .card > .home-section-heading:first-child { padding: 16px 18px 14px; }
  #portal th:first-child, #portal td:first-child { padding-left: 18px; }
  #portal th:last-child,  #portal td:last-child  { padding-right: 18px; }
  #portal td, #portal th { padding-top: 13px; padding-bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #portal button, #portal .button { transition: none; }
}


/* ==================================================================
   LA BARRA DE ARRIBA
   ==================================================================
   El menú se fue del costado a la cabecera, como en el sistema con que
   trabajamos adentro: la barra lateral se comía 245px de ancho para
   mostrar cuatro palabras. Y pasaron de siete puertas a cuatro.

   Los dos costados crecen igual para que el menú quede en el centro de
   la pantalla y no en el centro de lo que sobra: el logo es ancho y,
   si se lo deja, corre el menú a la derecha.
   ================================================================== */
#portal { display: block; }
#portal .barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .9rem;
  height: 64px; padding: 0 clamp(16px, 3vw, 40px);
  background: #fff; border-bottom: 1px solid var(--ui-linea);
}
#portal .barra .lado-izq, #portal .barra .lado-der {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px;
}
#portal .barra .lado-der { justify-content: flex-end; }
/* Chico a propósito: el logo se mira el primer día; después es una
   referencia de esquina, no algo que se lea. */
#portal .barra .portal-logo { width: auto; height: 22px; }
#portal #nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.2rem, 1.6vw, 1.4rem);
  flex: 0 1 auto; min-width: 0; margin: 0; overflow: visible;
}
#portal #nav button {
  position: relative; flex: none;
  display: inline-flex; align-items: center; height: 40px;
  padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: #657182; box-shadow: none;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.35;
  white-space: nowrap; min-height: 0;
}
#portal #nav button:hover { background: #f1f4f7; color: var(--ui-tinta); }
/* Donde uno está parado se marca con una raya abajo, como una pestaña,
   en vez de pintar el botón entero: pintado competía con el contenido,
   que ahora empieza justo debajo y no al costado. */
#portal #nav button.active {
  background: transparent; color: var(--blue); font-weight: 600;
}
/* La raya va PEGADA al canto de la barra, no flotando en el gris de
   abajo. Antonio: «la barra del menú (naranja) está despegada del
   blanco, se ve flotando». Con el botón de alto fijo la cuenta es
   exacta: el botón mide 40 en una barra de 64, así que del canto de
   abajo del botón al canto de la barra hay justo 12. */
#portal #nav button.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -12.5px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--ui-naranjo);
}
#portal #account {
  font-size: 13.5px; font-weight: 600; color: var(--ui-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#portal #logout {
  min-height: 0; padding: 8px 14px; font-size: 13px;
  background: #fff; border: 1px solid #dcdfe5; color: var(--blue);
}
#portal .workspace { padding: 0 clamp(16px, 3vw, 40px) 60px; max-width: 1500px; margin: 0 auto; }
#portal #breadcrumb:empty { display: none; }
#portal #breadcrumb {
  margin: 22px 0 0; font-size: 12.5px; color: var(--ui-tinta-3);
  letter-spacing: .01em;
}
#portal .heading { margin: 10px 0 24px; }
#portal .tapa .heading { margin-top: 6px; }
#portal .tapa .eyebrow { display: block; margin-top: 18px; }

/* ==================================================================
   EL INICIO
   ==================================================================
   Tres números arriba, y abajo dos columnas: a la izquierda cómo va la
   gente —que es a lo que se entra— y a la derecha lo que hay que hacer
   algo con ello.
   ================================================================== */
/* Tres números en fila: sin esto quedarían cuatro columnas y tres
   tarjetas, o sea una fila coja. */
#portal .stats.tres { grid-template-columns: repeat(3, minmax(0,1fr)); }
#portal .inicio-numeros { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Un buscador no necesita medio metro de ancho. */
#portal .card input[type=search] { max-width: 480px; }

/* El número grande de la pantalla: uno solo, y es el que contesta la
   pregunta con que uno entra —«¿cómo va mi gente?»—. A su lado, el
   gráfico: el número dice dónde estamos y la línea, cómo llegamos. */
/* Una sola columna de cajas a lo ancho. Antonio: «se ven espacios
   demasiado vacíos… imagínate con una sola capacitación». En dos
   columnas, la más corta dejaba un hueco al costado que crecía justo
   cuando la empresa tenía menos cosas. A lo ancho no hay costado. */
#portal .hero-cuerpo {
  display: grid; grid-template-columns: 210px minmax(0,1fr);
  gap: 32px; align-items: center;
  padding: 24px var(--lado, 22px) 26px;
}
#portal .hero-numero-caja { min-width: 0; }
#portal .hero-grafico { min-width: 0; }
#portal .grafico { display: block; width: 100%; height: auto; }
/* La tira: barritas parejas que suben de izquierda a derecha. Todas
   pintadas con el mismo degradado de Liby, tendido de punta a punta del
   gráfico, así que cada barrita toma el color que le corresponde por
   dónde está: azul al principio, naranjo al final. */
#portal .g-riel { fill: #eef1f6; }
#portal .g-tic { fill: url(#halo-liby); }
/* Los cortes de inicio, mitad y término. El primero es solo el borde
   izquierdo y va en gris de pelo; los otros dos toman el color del
   degradado a esa altura de la tira. */
#portal .g-corte { stroke: url(#halo-liby); stroke-width: 1.5; }
#portal .g-corte.primero { stroke: #e3e9f0; stroke-width: 1; }
#portal .g-rotulo {
  fill: var(--ui-tinta-3); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
/* Más chica que el número grande de la izquierda, a propósito: el
   gráfico se dibuja estirado y su letra crece con él, así que en 25 le
   empataba al 53% y la pantalla quedaba con dos números peleando por ser
   el principal. */
#portal .g-cifra {
  fill: var(--ui-tinta); font-size: 20px; font-weight: 600; letter-spacing: -.5px;
}
#portal .g-fecha { fill: #97a0ad; font-size: 11.5px; font-weight: 500; }
/* En el teléfono el gráfico se dibuja con otra proporción (más alto y
   angosto), y su letra se agranda sola con el viewBox. Estas la bajan
   para que no quede desproporcionada. */
@media (max-width: 760px) {
  #portal .g-cifra { font-size: 21px; }
  #portal .g-cifra.futuro { font-size: 13px; }
  #portal .g-rotulo { font-size: 9.5px; }
  #portal .g-fecha { font-size: 10.5px; }
  #portal .g-hoy-rotulo { font-size: 9px; }
}

/* LO QUE SE MANDÓ POR CORREO. En la fila no hay botón —el archivo no
   vive acá— sino el registro de que salió: la píldora verde de «está
   listo» y debajo el día y la hora. */
#portal .enviado {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  justify-self: end; text-align: right;
}
#portal .enviado-cuando {
  font-size: 12px; color: var(--ui-tinta-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* El corte que todavía no ocurre no lleva porcentaje: dice cuánto falta,
   y en letra más chica, porque no es un dato del mismo peso. */
#portal .g-cifra.futuro { font-size: 13.5px; fill: var(--ui-tinta-3); letter-spacing: 0; }
/* La raya de HOY: separa lo recorrido de lo que falta. Sin ella el gris
   de la derecha se lee como un error del gráfico y no como el resto del
   curso. */
#portal .g-hoy { stroke: #b9c2cf; stroke-width: 1; stroke-dasharray: 3 3; }
#portal .g-hoy-rotulo {
  fill: var(--ui-tinta-3); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em;
}
#portal .hero-sin-grafico {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--ui-tinta-3);
  background: #f6f8fb; border-radius: 12px; padding: 16px;
}
#portal .hero-salto { margin: 6px 0 0; font-size: 12.5px; color: var(--ui-tinta-3); }
#portal .hero-salto.sube { color: var(--ui-ok); font-weight: 600; }

#portal .hero-rotulo { margin: 0; font-size: 13px; color: var(--ui-tinta-3); }
#portal .hero-numero {
  margin: 2px 0 0; font-size: 50px; line-height: 1.05; font-weight: 600;
  letter-spacing: -2px; color: var(--blue);
}
#portal .hero-numero span { font-size: 28px; letter-spacing: -1px; margin-left: 2px; }
#portal .hero-pie { margin: 6px 0 0; font-size: 13px; color: var(--ui-tinta-3); }
/* LA FILA DE UNA CAPACITACIÓN, con todo lo suyo junto: quién es, cómo
   va y cuándo termina. Antes esto estaba partido en dos cajas —las
   barras acá y la lista allá— con los mismos cursos escritos dos
   veces. */
#portal .curso-linea {
  padding: 14px var(--lado, 22px) 16px;
  border-bottom: 1px solid var(--ui-linea);
}
#portal .card > .curso-linea:last-child { border-bottom: 0; }
#portal .curso-linea-tapa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
#portal .curso-linea-quien { min-width: 0; }
#portal .curso-linea-quien .eyebrow { display: block; margin-bottom: 3px; }
#portal .curso-linea-quien strong {
  display: block; font-size: 16px; font-weight: 600; color: var(--ui-tinta);
  letter-spacing: -.2px;
}
#portal .curso-linea-estado { display: flex; align-items: center; gap: 14px; flex: none; }
#portal .curso-linea-estado button { margin: 0; }
/* La barra y su número en la misma línea: el número al final del riel,
   no adentro de la barra. */
#portal .curso-linea-avance {
  display: flex; align-items: center; gap: 16px; margin-top: 10px;
}
#portal .curso-linea-avance .avance-riel { flex: 1; margin-top: 0; }
/* Cuándo termina va pegado al nombre del curso, no debajo de la barra:
   es parte de quién es esa capacitación, no de cuánto lleva. Antonio:
   «el término podría estar debajo del nombre del curso». */
#portal .curso-linea-quien .falta-dias { margin-top: 4px; }
#portal .avance-dato {
  flex: none; min-width: 46px; text-align: right;
  font-size: 14px; font-weight: 600; color: var(--ui-tinta);
  font-variant-numeric: tabular-nums;
}
/* La barra del avance.
   Fina, porque el dato es el largo y no el grosor. Y con el halo de
   Liby corriendo por dentro: es el mismo degradado de la marca, y como
   el largo es el avance real, el movimiento queda dentro de lo que se
   lleva andado. Antonio: «debería tener el halo de Liby IA en
   movimiento según el progreso real». */
/* UNA LÍNEA MUY FINA. Antonio: «la línea más fina, como moviéndose:
   una línea muy fina con un halo blanco avanzando hasta el punto y el
   resto gris». El riel gris es el curso entero; lo pintado es lo que se
   lleva andado, y por dentro le corre un destello blanco que llega hasta
   la punta y vuelve a empezar. */
#portal .avance-riel {
  margin-top: 0; height: 3px; border-radius: 999px;
  background: #e4e9ef; overflow: hidden;
}
/* Y el halo que corre por dentro es el de Liby, no un destello blanco.
   Antonio: «con el halo de Liby, obviamente». Es el mismo degradado de
   la marca que corre en el pie del sitio, moviéndose solo dentro de lo
   avanzado: se detiene justo donde está el dato de verdad. */
#portal .avance-barra {
  height: 100%; width: 0; border-radius: 999px;
  background-image: linear-gradient(100deg,#F5A623,#F02D7D,#C86DE8,#4BA8F0,#C86DE8,#F02D7D,#F5A623);
  background-size: 300% 100%;
  animation: haloavance 7s linear infinite;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
/* Estas dos las usa también la firma del pie. Si se borran, «Liby IA»
   deja de tener su degradado en movimiento. */
@keyframes haloavance { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) {
  #portal .avance-barra { animation: none; transition: none; }
}

/* La columna de la derecha. */
#portal .curso-fila .eyebrow { display: block; margin-bottom: 3px; }
#portal .curso-fila strong { display: block; font-size: 15px; }
#portal .atencion .atencion-dato {
  padding: 18px var(--lado, 22px) 0; margin: 0; font-size: 14px;
  color: var(--ui-tinta-2);
}
/* El número ya no va en naranjo: el naranjo avisa «esto pide que lo
   mires», y acá no hay nada que la empresa tenga que hacer. Es el
   trabajo nuestro, contado. */
#portal .atencion .atencion-dato .number {
  display: block; font-size: 34px; font-weight: 600; letter-spacing: -1px;
  color: var(--blue); margin-bottom: 4px;
}
#portal .atencion .atencion-nota {
  margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ui-tinta-3);
}
#portal .promo { background: #f4f6f9; border-color: #e7eaef; }
#portal .promo p { padding-top: 14px; }

/* Contacto y usuarios: el destino de después, no lo primero. Van al
   final y en gris, en píldora, sin ocupar un lugar en el menú. */
#portal .atajos-pildora { display: flex; flex-wrap: wrap; gap: .6rem; margin: 26px 0 0; }
#portal .atajos-pildora button.atajo {
  background: transparent; border: 1px solid var(--ui-linea); box-shadow: none;
  padding: .45rem 1.1rem; border-radius: 99px; min-height: 0;
  font-family: inherit; font-size: .92rem; font-weight: 500; color: var(--ui-tinta-3);
}
#portal .atajos-pildora button.atajo:hover { color: var(--ui-tinta); background: #f6f8fb; filter: none; }

@media (max-width: 820px) {
  #portal .hero-cuerpo { grid-template-columns: minmax(0,1fr); gap: 14px; }
}
@media (max-width: 860px) {
  #portal .inicio-numeros { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  #portal .barra {
    height: auto; flex-wrap: wrap; padding: 10px 16px; gap: .5rem;
    position: static;
  }
  #portal .barra .lado-izq, #portal .barra .lado-der { flex: 0 0 auto; }
  #portal .barra .lado-der { margin-left: auto; }
  #portal #nav {
    order: 3; flex: 1 0 100%; justify-content: flex-start;
    overflow-x: auto; gap: .2rem; padding-bottom: 2px;
  }
  #portal #nav button.active::after { display: none; }
  #portal #nav button.active { background: #eaf0f5; }
  #portal .hero-numero { font-size: 46px; }
  #portal .inicio-numeros { grid-template-columns: minmax(0,1fr); }
}

/* En el teléfono las filas se apilan y la píldora, que es un item más
   de la grilla, se estiraba de lado a lado. Una píldora de ancho
   completo deja de leerse como etiqueta. */
#portal .record > .pill { justify-self: start; width: fit-content; }

/* El cartel de la vista de muestra. Se lee, pero no compite: lo que se
   viene a mirar acá es el diseño, no el cartel. */
#portal .aviso-muestra {
  margin: 18px 0 0; padding: 12px 18px;
  background: var(--ui-naranjo-b); border: 1px solid #f4dfc8;
  border-radius: 12px; font-size: 12.5px; line-height: 1.55;
  color: #8a5a22;
}
#portal .tapa .aviso-muestra { margin-top: 0; }

/* ==================================================================
   LA CUENTA, EL COLOR Y LOS BOTONES PAREJOS
   ================================================================== */

/* Antonio: «cerrar sesión debería ir abajo del nombre de la empresa,
   sin píldora». Es una salida, no una acción que uno venga a hacer:
   en píldora competía con los botones que sí hacen algo. */
#portal .barra .lado-der {
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px;
}
/* El margen de 30px venía de cuando el menú estaba al costado: acá
   empujaba «Cerrar sesión» fuera de la barra. */
#portal #logout {
  background: none; border: 0; padding: 0; margin: 0; min-height: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--ui-tinta-3); box-shadow: none;
}
#portal #logout:hover {
  background: none; color: var(--ui-tinta); text-decoration: underline;
  filter: none;
}

/* Los botones de acción, todos del mismo alto y con el texto en el
   centro. El relleno lo pone el botón y nadie más. */
#portal .workspace button, #portal .workspace .button {
  min-height: 40px; padding: 9px 18px; font-size: 13.5px; line-height: 20px;
}
/* Las pestañas mantienen su letra chica: con la del resto de los
   botones, «Participantes y avance» se partía en dos líneas. */
#portal .workspace .detail-tabs button, #portal .workspace .tabs button {
  min-height: 42px; font-size: 13px; padding: 10px 14px;
}

/* Los cuatro números, cada uno del color de lo que dice: azul lo que
   está andando, verde la gente, naranjo lo que pide atención, gris lo
   que todavía no empieza. Antonio: «no hay nada verde en el sitio, lo
   que hace que se vea plano». */

/* El verde de la marca donde algo está realmente terminado. */
#portal .avance-dato.listo { color: var(--ui-ok); }
#portal td.centro.listo { color: var(--ui-ok); font-weight: 600; }

/* ==================================================================
   EL PIE: POWERED BY LIBY IA
   ==================================================================
   Va en el armazón, no en cada pantalla: así está en todas y no se
   olvida en ninguna. Discreto y centrado —es una firma, no un aviso—,
   con el mismo halo de la marca que corre en las barras de avance.
   ================================================================== */
/* Sin línea arriba y sin tanto aire: Antonio: «el powered by Liby IA
   tiene una línea que no me gusta arriba, y además está demasiado abajo,
   se ve volando». Una firma no necesita que la anuncien con una regla, y
   con sesenta píxeles de vacío encima parecía de otra página. */
#portal .pie-liby {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 22px;
  padding: 0 16px 28px; margin: 0;
  font-size: 12.5px; color: var(--ui-tinta-3);
}
#portal .pie-firma { display: inline-flex; align-items: center; gap: 6px; }
/* Las dos puertas de venta, discretas y en todas las pantallas.
   Antonio: «esas dos deberían ser más sutiles, abajo en el pie, con el
   powered by Liby IA, en todas las páginas». */
#portal .pie-enlaces { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
#portal .pie-enlaces .pie-enlace {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
  min-height: 0; border-radius: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--ui-tinta-3); text-decoration: none; cursor: pointer;
}
#portal .pie-enlaces .pie-enlace:hover {
  color: var(--ui-tinta); background: none; filter: none; text-decoration: underline;
}
/* El aire de abajo lo pone ahora el pie, no el contenido: si lo ponen
   los dos, la firma queda flotando lejos de todo. */
#portal .workspace { padding-bottom: 22px; }
#portal .pie-liby a { text-decoration: none; }
#portal .pie-liby .halo {
  font-weight: 600;
  background-image: linear-gradient(100deg,#F5A623,#F02D7D,#C86DE8,#4BA8F0,#C86DE8,#F02D7D,#F5A623);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: haloavance 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #portal .pie-liby .halo { animation: none; } }

/* ==================================================================
   LOS CUATRO NÚMEROS Y LA INVITACIÓN DEL FINAL
   ================================================================== */

/* LA TIRA DE LOS CUATRO NÚMEROS.
   Una sola caja a lo ancho, los cuatro datos en fila separados por una
   línea de pelo, y al final el único botón que había detrás de todos
   ellos. Antonio: «no llevan a ninguna parte… debería ser una caja que
   ocupe el ancho con los datos y tener un botón que diga ver en
   capacitaciones». */
/* Los dos «:not» no son adorno: la regla general de la caja es
   «#portal .card:not(.curso):not(.curso-ayuda) { padding: 0 }», y entre
   dos reglas manda la más específica, no la que uno escribió después.
   Sin ellos, esta caja se quedaba con relleno cero y los números
   terminaban pegados al borde. */
#portal .card.cifras-caja:not(.curso):not(.curso-ayuda) {
  --lado: 0px;
  display: flex; align-items: center; gap: 24px;
  padding: 22px 24px; margin: 0 0 20px;
}
/* Estas dos le ganan por una clase a las reglas generales de la caja,
   que le ponen relleno arriba al primer hijo y margen abajo al botón.
   Con ellas la tira quedaba apretada contra los bordes y el botón
   corrido hacia arriba del centro. */
#portal .card.cifras-caja > .cifras:first-child { padding: 0; margin: 0; }
#portal .card.cifras-caja > button:last-child { margin: 0; }
#portal .cifras {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
}
#portal .cifras.tres { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Cinco: la fila lleva un número más cuando entra el administrador
   —«Pagos pendientes»—. Sin esto el quinto se caía a una segunda
   línea, debajo del primero y sin su raya, y se veía como un error. */
#portal .cifras.cinco { grid-template-columns: repeat(5, minmax(0,1fr)); }
#portal .cifras.seis  { grid-template-columns: repeat(6, minmax(0,1fr)); }
/* Con seis columnas el aire de los costados aprieta el número contra
   la raya del vecino. Se achica el relleno, no el número. */
#portal .cifras.seis .cifra { padding: 0 14px; }
#portal .cifra {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 0 22px; border-left: 1px solid var(--ui-linea);
}
#portal .cifra:first-child { border-left: 0; padding-left: 0; }
#portal .cifra-dato {
  font-size: 26px; font-weight: 600; letter-spacing: -.8px; color: var(--blue);
}
#portal .cifra-rotulo { font-size: 12px; line-height: 1.35; color: var(--ui-tinta-3); }
#portal .cifras-caja > button { flex: none; margin: 0; }

/* La invitación, abajo de todo y a lo ancho, con el mismo bloque oscuro
   del sitio: rótulo naranjo con su punto, título blanco y dos botones
   blancos. Es lo único que vende en toda la pantalla, así que se
   permite ser lo más fuerte. */
/* UNA FRANJA, NO UN CARTEL. Antonio: «puede ser más acotado en altura;
   si va a estar en todas las páginas, que sea llamativo pero que no robe
   el protagonismo del contenido». Por eso el texto va a la izquierda y
   los botones a la derecha, en una sola línea: la mitad del alto que
   tenía cuando todo iba centrado y apilado. */
/* LA CAJA, BLANCA Y CON ENLACES. Antonio: «¿y si la caja es blanca, la
   descripción pasa a azul, el catálogo a naranjo solo en letras con la
   flecha y el diseño de cursos completo en halo Liby con la flecha, tipo
   enlaces? Se vería más simple». Y sí: sin bloque oscuro ni botones
   rellenos, la franja deja de competir con el contenido y pasa a leerse
   como una fila más del sitio. */
#portal .llamado {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; text-align: center;
  margin: 4px 0 0; padding: 26px 28px 28px;
  border-radius: 16px; background: #fff;
  border: 1px solid #e7e9ec; box-shadow: 0 1px 2px rgba(29,29,31,.04);
}
/* Todo centrado. Antonio: «tal vez que esté al medio la información de
   esa tarjeta, centrado; los enlaces me siguen molestando en proporción.
   Si está todo centrado, título y descripción quedan arriba y los
   enlaces abajo, y no me molestan visualmente». */
/* Sin tope de ancho: la descripción entra en una línea y deja de
   apelotonar el título con los enlaces. Antonio: «se ve apretado, como
   todo muy junto; la descripción podría ocupar el ancho de la caja para
   liberar espacio entre el título y los enlaces». */
#portal .llamado-texto { min-width: 0; }
#portal .llamado .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ui-tinta-3) !important; font-size: 10.5px; letter-spacing: .14em;
}
#portal .llamado .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ui-naranjo);
}
#portal .llamado h2 {
  margin: 9px 0 0; color: var(--ui-tinta); font-size: 20px; font-weight: 600;
  letter-spacing: -.4px; line-height: 1.25;
}
/* Sin tope de ancho: el bloque de texto ya se detiene donde empiezan los
   botones, así que un max-width lo apretaba en dos líneas cortas dejando
   medio metro de caja vacío al lado. Antonio: «la descripción podría
   ocupar más el ancho de la caja, se ve un poco apretada». */
#portal .llamado p {
  margin: 10px auto 0; color: var(--blue);
  font-size: 13.5px; line-height: 1.55;
}
/* Ni en el centro de la caja ni pegados abajo: un pelo bajo el centro,
   que es donde cae la descripción. Pegados al borde de abajo quedaban
   colgando. */
#portal .llamado-botones {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  justify-content: center; margin: 0;
}
/* DOS PUERTAS DISTINTAS, Y SE NOTA CUÁL ES CUÁL. Antonio: «deberían ser
   dos píldoras distintas: una con Catálogo que lleve al catálogo, y la
   otra con diseño de cursos que lleve al sitio libercap.com/empresas».
   La blanca llena se queda acá adentro; la de borde sale del portal, y
   por eso lleva la flecha torcida. */
/* Los dos son enlaces, no botones: sin fondo, sin borde y sin caja.
   Antonio: «tipo enlaces». El del catálogo va en naranjo; el de diseño
   de cursos, entero con el halo de Liby, que es donde aplica Liby
   Business —eso no se dice, pero da la idea—. */
#portal .workspace .llamado-botones button,
#portal .workspace .llamado-botones a.button {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0; min-height: 0; border-radius: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
#portal .workspace .llamado-botones button.llamado-catalogo { color: var(--ui-naranjo); }
#portal .workspace .llamado-botones button.llamado-catalogo:hover {
  color: #c9762f; background: none; filter: none; text-decoration: underline;
}
/* El degradado recortado a la letra, igual que la firma del pie. */
#portal .workspace .llamado-botones a.button.llamado-liby {
  background-image: linear-gradient(100deg,#F5A623,#F02D7D,#C86DE8,#4BA8F0,#C86DE8,#F02D7D,#F5A623);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: haloavance 7s linear infinite;
}
#portal .workspace .llamado-botones a.button.llamado-liby:hover { opacity: .8; filter: none; }
@media (prefers-reduced-motion: reduce) {
  #portal .workspace .llamado-botones a.button.llamado-liby { animation: none; }
}
}

@media (max-width: 700px) {
  #portal .llamado { padding: 18px 18px 20px; gap: 14px; }
  #portal .llamado h2 { font-size: 18px; }
  #portal .llamado-botones { width: 100%; gap: 18px; }
}

/* ==================================================================
   LOS BOTONES DE LAS FILAS
   ==================================================================
   En una fila hay una sola acción y es la que importa: bajar ese
   documento. Va en azul, no en blanco —Antonio: «además les falta
   color»— y todos del mismo ancho, para que una lista de tres no se
   lea como tres botones de tres portes distintos.
   ================================================================== */
/* Todos los botones de una caja miden lo mismo: el de la cabecera y los
   de las filas. Antonio: «actividad reciente está en otro tamaño al de
   descargar». */
#portal .record .button, #portal .record button,
#portal .home-section-heading button, #portal .home-section-heading .button { min-width: 140px; }

/* El botón que acompaña: blanco, pero con un borde que se ve. El gris
   casi invisible de antes lo dejaba flotando sin forma. */
#portal .workspace .secondary {
  border-color: #cbd8e6; color: var(--blue);
}
#portal .workspace .secondary:hover { background: #f1f6fb; border-color: #aec4da; }

/* ==================================================================
   LA MARCA EN LA BARRA
   ==================================================================
   Antonio: «el logo un poco más grande, que se vea la marca… y al lado
   decir EMPRESAS, así marcamos que es de marca empresas como en el
   inicio». Mismo gesto que la cabecera de la página de acceso: el logo,
   una línea fina y la palabra en versalitas.
   ================================================================== */
#portal .barra .portal-logo { height: 30px; }
#portal .barra .marca-empresas {
  display: inline-flex; align-items: center;
  padding-left: 16px; margin-left: 2px;
  border-left: 1px solid #d7dde5;
  align-self: stretch;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: #8b95a5; white-space: nowrap;
}
@media (max-width: 860px) {
  #portal .barra .portal-logo { height: 26px; }
  #portal .barra .marca-empresas { padding-left: 12px; font-size: 11px; letter-spacing: .14em; }
}
@media (max-width: 560px) {
  #portal .barra .marca-empresas { display: none; }
}

/* LA MARCA DE MARCHA BLANCA.
   Antonio: «sería bueno poner el logo de beta al lado de Empresas, así
   saben que está en marcha blanca».
   Va del porte de la palabra que acompaña y en el naranjo suave de los
   avisos: se ve al entrar y no compite con nada. Y va SOLO adentro del
   portal: en la pantalla de acceso no tiene a quién avisarle todavía.
   En el teléfono «Empresas» se esconde por falta de ancho, pero ésta se
   queda —es justamente lo que no conviene que se pierda—. */
#portal .barra .marca-beta {
  display: inline-flex; align-items: center; flex: none;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--ui-naranjo-b); color: #8a5a22;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; cursor: default;
}
@media (max-width: 560px) {
  #portal .barra .marca-beta {
    margin-left: 6px; padding: 2px 6px; font-size: 9.5px;
  }
}

/* LA TIRA DE NÚMEROS EN PANTALLA ANGOSTA.
   Va al final del archivo a propósito: las reglas de la tira están más
   arriba y, entre dos reglas de la misma fuerza, manda la última. Puesta
   antes, esta no hacía nada. */
@media (max-width: 820px) {
  #portal .card.cifras-caja { flex-direction: column; align-items: stretch; gap: 16px; }
  #portal .cifras { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 0; }
  #portal .cifra { padding: 0 16px; border-left: 1px solid var(--ui-linea); }
  #portal .cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
  #portal .cifras-caja > button { width: 100%; }
}

/* ==================================================================
   LA PANTALLA DE CAPACITACIONES
   ==================================================================
   Antonio: «las cajas ocupan mucho ancho para tan poca información. Debe
   haber un submenú de en curso y completas, en curso en verde y completas
   en azul, separadas, si no es una lista interminable». Y: «hay que
   rediseñarlo, más moderno, estilo Apple como el Inicio».
   ================================================================== */

/* LOS TRES GRUPOS. El color no es adorno: marca de qué está hecha esa
   lista. Verde lo que está andando, azul lo que ya terminó, gris lo que
   todavía no empieza. Solo se pinta el que está elegido; los otros son
   texto, para que se vea de lejos en cuál está uno parado. */
#portal .grupos {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
}
#portal .workspace .grupos .grupo {
  background: none; border: 1px solid transparent; box-shadow: none;
  padding: 8px 16px; min-height: 36px; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: var(--ui-tinta-3); cursor: pointer;
}
#portal .workspace .grupos .grupo:hover { background: #eef1f5; color: var(--ui-tinta); filter: none; }
#portal .workspace .grupos .grupo.activo { color: #fff; }
#portal .workspace .grupos .grupo-verde.activo { background: var(--ui-ok); border-color: var(--ui-ok); }
#portal .workspace .grupos .grupo-azul.activo  { background: var(--blue);  border-color: var(--blue); }
#portal .workspace .grupos .grupo-gris.activo  { background: #5c6470;      border-color: #5c6470; }

/* EL BUSCADOR, CON EL HALO DE LIBY EN EL BORDE.
   Antonio: «la barra de búsqueda debe ser como la de CAPI, con el halo de
   Liby». Mismo truco que el botón de diseño de cursos: dos fondos, uno
   blanco al relleno y el degradado al borde. */
#portal .barra-buscar {
  display: grid; grid-template-columns: minmax(0,1fr) repeat(3, minmax(120px, 190px));
  gap: 14px; align-items: end; margin: 0 0 16px;
}
#portal .buscador {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; min-height: 46px; border-radius: 999px;
  border: 1.5px solid transparent;
  background-color: transparent;
  background-image: linear-gradient(#fff, #fff),
                    linear-gradient(100deg,#F5A623,#F02D7D,#C86DE8,#4BA8F0,#C86DE8,#F02D7D,#F5A623);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 0% 50%;
  animation: halodelborde 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #portal .buscador { animation: none; } }
#portal .lupa { flex: none; width: 18px; height: 18px; color: var(--ui-tinta-3); }
#portal .workspace .buscador input[type=search] {
  flex: 1; min-width: 0; max-width: none;
  border: 0; background: none; box-shadow: none; outline: none;
  padding: 12px 0; margin: 0; min-height: 0;
  font-family: inherit; font-size: 14.5px; color: var(--ui-tinta);
}
#portal .buscador input::placeholder { color: var(--ui-tinta-3); }
/* El margen de abajo va en cero a propósito: los rótulos del portal son
   <label> y la hoja base les pone margen inferior. Con él, los
   selectores quedaban 18px más arriba que el buscador y toda la barra se
   veía descuadrada. */
#portal .barra-buscar .campo-filtro {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ui-tinta-3);
}
/* Del mismo alto exacto que el buscador: sus 46 más el borde del halo
   dan 50, y con 48 la barra quedaba con dos píxeles de desnivel. */
#portal .workspace .barra-buscar .campo-filtro select {
  width: 100%; height: 50px; min-height: 50px; margin: 0; border-radius: 12px;
  font-family: inherit; font-size: 13.5px;
}
#portal .cuantos-hay {
  margin: 0 0 12px; font-size: 12.5px; color: var(--ui-tinta-3);
}
/* El renglón de datos de la fila: fechas, modalidad y cuánta gente, en
   una línea chica. Antes era una ficha de cuatro columnas repartida a lo
   ancho de la pantalla para decir lo mismo. */
#portal .curso-linea-datos {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ui-tinta-3);
}
#portal .curso-linea-quien .curso-linea-datos + .falta-dias { margin-top: 3px; }
/* La paginación solo aparece cuando hay más de una página. */
#portal .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
#portal .pager span { font-size: 13px; color: var(--ui-tinta-3); }

@media (max-width: 900px) {
  #portal .barra-buscar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #portal .barra-buscar .buscador { grid-column: 1 / -1; }
}

/* ==================================================================
   LA FICHA DE UNA CAPACITACIÓN
   ==================================================================
   Antonio: «acá igual hay que rediseñarla en base a las previas, que
   mantenga el estilo». Nada nuevo, entonces: la tapa es la fila de
   Capacitaciones en grande, el submenú son las mismas píldoras y el
   buscador es el mismo buscador. Lo único propio es el aire.
   ================================================================== */

#portal .ficha-tapa-cuerpo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px;
}
#portal .ficha-tapa-quien { min-width: 0; }
#portal .ficha-tapa-quien .eyebrow { display: block; margin-bottom: 5px; }
#portal .ficha-tapa h1 {
  margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.6px;
  line-height: 1.2; color: var(--ui-tinta);
}
#portal .ficha-tapa .falta-dias { margin-top: 7px; }
#portal .ficha-tapa-estado { flex: none; }
#portal .ficha-tapa .curso-linea-avance { padding-top: 16px; }

/* EL SUBMENU. Antonio: «las píldoras superiores están demasiado pegadas
   a las cajas de información». Antes eran botones con borde pegados al
   panel; ahora son las píldoras de CAPI, con su aire abajo. */
#portal .grupos.ficha-menu { margin: 0 0 20px; }

/* Los datos de la capacitación, en renglones cortos y no repartidos a
   lo ancho de la pantalla. */
#portal .ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 28px; margin: 0; padding-top: 16px;
}
#portal .ficha-datos div { min-width: 0; }
#portal .ficha-datos dt {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ui-tinta-3);
}
#portal .ficha-datos dd { margin: 4px 0 0; font-size: 14.5px; color: var(--ui-tinta); }
/* La píldora de volver, con aire: pegada a la caja se veía como si
   fuera parte de ella. */
#portal .ficha-volver { margin: 0 0 14px; }

/* La tira de números y los datos, en la MISMA caja: en dos cajas
   quedaban las dos a medio llenar y un hueco entre medio. */
#portal .ficha-cifras {
  padding-top: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-linea);
}

/* El título de la caja y cuántos alumnos son, en la misma línea. */
#portal .card > .home-section-heading.ficha-cabeza:first-child {
  display: flex; align-items: baseline; justify-content: flex-start;
  gap: 12px; flex-wrap: wrap;
}
#portal .ficha-cabeza .cuantos-hay { margin: 0; padding: 0; font-size: 12.5px; }

/* El buscador de la ficha es más bajo que el de Capacitaciones: allá
   tiene que calzar con los selectores de al lado, acá va solo. */
#portal .ficha-buscar { padding-top: 14px; padding-bottom: 10px; }
#portal .ficha-buscar .buscador { min-height: 40px; }
/* El «height: auto» no es adorno: la hoja base le pone alto fijo a los
   campos y, sin esto, el buscador seguía midiendo lo mismo por más que
   se le bajara el relleno. */
#portal .workspace .ficha-buscar .buscador input[type=search] {
  height: auto; padding: 8px 0; font-size: 14px; line-height: 20px;
}

/* LAS DOS DESCARGAS. Antonio: «las opciones de descarga deberían ser en
   CSV y en Excel, dar la opción; en todos los descargables, excepto los
   que son PDF —orden de compra, factura, reportes—, que siempre son
   PDF». Van juntas y en segundo plano: el protagonista es la tabla. */
#portal .ficha-descargas {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 20px;
  padding-top: 16px;
}
#portal .ficha-descargas-botones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
#portal .ficha-descargas-nota,
#portal .ficha-descargas-rotulo { font-size: 12.5px; color: var(--ui-tinta-3); }
#portal .dos-descargas { display: flex; flex-wrap: wrap; gap: 8px; }
/* Bajitas y del porte del rótulo que las acompaña. Antonio: «CSV y Excel
   deberían ser más pequeñas en altura, más alineadas con el título de
   Descargar este listado». No son la acción principal de la pantalla. */
#portal .workspace .ficha-descargas a.button,
#portal .workspace .dos-descargas a.button {
  min-height: 30px; min-width: 74px; padding: 5px 16px;
  font-size: 12.5px; line-height: 18px;
}

@media (max-width: 700px) {
  #portal .ficha-tapa-cuerpo { flex-direction: column; gap: 12px; }
  #portal .ficha-tapa h1 { font-size: 22px; }
}

/* ==================================================================
   DOCUMENTOS Y PAGOS: UNA CAJA POR CAPACITACIÓN
   ==================================================================
   Antonio: «la empresa debe cambiar de pestaña en pestaña para ir
   haciendo pasos que son lógicos en un curso». Así que los tres pasos
   —orden de compra, factura, pago— van juntos y en fila dentro de la
   caja de su capacitación, con la misma tira de columnas separadas que
   usan las cifras del Inicio.
   ================================================================== */

#portal .card > .home-section-heading.papel-cabeza:first-child {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#portal .papel-cabeza .eyebrow { display: block; margin-bottom: 3px; }
#portal .papel-cabeza strong {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.2px;
  color: var(--ui-tinta);
}
#portal .workspace .papel-cabeza button { margin: 0; flex: none; }

#portal .pasos {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  padding-top: 18px; padding-bottom: 18px;
}
/* En una capacitación cerrada solo quedan los pasos que tienen papel, y
   pueden ser uno o dos: la tira se reparte entre los que hay. */
#portal .pasos-1 { grid-template-columns: minmax(0,1fr); }
#portal .pasos-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
#portal .paso {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-width: 0; padding: 0 22px; border-left: 1px solid var(--ui-linea);
}
#portal .paso:first-child { border-left: 0; padding-left: 0; }
#portal .paso-rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ui-tinta-3);
}
#portal .paso-estado { display: block; }
#portal .paso .pill { margin: 0; }
#portal .paso-nota {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ui-tinta-2);
}
/* Las filas de papeles quedan debajo de los pasos, con su línea arriba. */
#portal .papel .pasos + .record { border-top: 1px solid var(--ui-linea); }

/* La barra de búsqueda cuando va sola, sin los selectores al lado. */
#portal .barra-buscar.sola { grid-template-columns: minmax(0,1fr); }

@media (max-width: 760px) {
  #portal .pasos { grid-template-columns: 1fr; gap: 18px; }
  #portal .paso { border-left: 0; padding-left: 0; }
  #portal .paso + .paso { border-top: 1px solid var(--ui-linea); padding-top: 16px; }
}

/* ---------- LOS TÍTULOS QUE SE PLIEGAN ----------
   Antonio: «también en esa sección deberían ser plegables los títulos de
   En curso y Cerradas». La flecha gira al abrir; las cerradas parten
   cerradas porque lo que se mira todos los días es lo que está andando. */
#portal .plegable { margin: 0 0 18px; }
#portal .plegable > summary {
  display: flex; align-items: baseline; gap: 10px;
  list-style: none; cursor: pointer;
  padding: 10px 0 12px;
}
#portal .plegable > summary::-webkit-details-marker { display: none; }
#portal .plegable > summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--ui-tinta-3);
  border-bottom: 2px solid var(--ui-tinta-3);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
#portal .plegable[open] > summary::before {
  transform: rotate(45deg) translate(-2px, -2px);
}
#portal .plegable-titulo {
  font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--ui-tinta);
}
#portal .plegable-cuantos { font-size: 12.5px; color: var(--ui-tinta-3); }
#portal .plegable > summary:hover .plegable-titulo { color: var(--blue); }

/* ---------- SUBIR UN PAPEL ----------
   Antonio: «OC y pago la sube la empresa, la factura la subimos
   nosotros». El formulario vive dentro de la caja de su capacitación y
   está apagado hasta que se aprieta el botón del paso. */
#portal .workspace .paso button.subir-abrir {
  margin: 2px 0 0; min-height: 30px; padding: 5px 14px;
  font-size: 12.5px; line-height: 18px;
  background: #fff; border: 1px solid #dcdfe5; color: var(--blue);
  box-shadow: none;
}
#portal .workspace .paso button.subir-abrir:hover {
  background: #f1f6fb; border-color: #aec4da; filter: none;
}
#portal .subir {
  padding-top: 18px; padding-bottom: 18px;
  border-top: 1px solid var(--ui-linea); background: #f8fafc;
}
#portal .subir[hidden] { display: none; }
#portal .subir-titulo { margin: 0 0 12px; font-size: 13px; color: var(--ui-tinta-2); }
#portal .subir-campos {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
}
#portal .subir-campo[hidden] { display: none; }
#portal .subir-campo {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  max-width: 460px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ui-tinta-3);
}
#portal .workspace .subir-campo input { margin: 0; }
#portal .subir-rotulo { display: block; }
#portal .subir-opcional { font-weight: 400; }
#portal .subir-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#portal .workspace .subir-botones button { min-height: 36px; padding: 7px 18px; font-size: 13px; }
#portal .subir-resultado:empty { display: none; }
#portal .subir-resultado {
  margin: 12px 0 0; font-size: 13px; color: var(--ui-tinta-2);
}

/* Lo que ya está adjunto, dentro de su propio paso: un enlace por
   documento, con su fecha. Antes iba en una lista aparte abajo y era
   decir dos veces lo mismo en la misma caja. */
#portal .paso-papeles { display: flex; flex-direction: column; gap: 6px; }
#portal .paso-papel {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 30px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid #dcdfe5; background: #fff; color: var(--blue);
  font-size: 12.5px; font-weight: 600; line-height: 18px; text-decoration: none;
}
#portal .paso-papel:hover { background: #f1f6fb; border-color: #aec4da; }

/* RETIRAR LO QUE SE SUBIÓ MAL.
   Antonio, sobre un botón parecido en CAPI: «debería ser una pequeña
   palabra, en rojo» —y sin línea debajo—. Va al costado del papel, en
   chico: es una salida de emergencia, no algo de todos los días. Y
   pregunta ahí mismo, porque desde el portal no se deshace. */
#portal .paso-papel-fila {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
}
#portal .workspace .paso button.paso-retirar,
#portal .workspace .paso button.paso-retirar-si,
#portal .workspace .paso button.paso-retirar-no {
  margin: 0; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; line-height: 18px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
#portal .workspace .paso button.paso-retirar,
#portal .workspace .paso button.paso-retirar-si { color: #b4232a; }
#portal .workspace .paso button.paso-retirar:hover,
#portal .workspace .paso button.paso-retirar-si:hover {
  background: none; color: #8d1b21; filter: none; text-decoration: none;
}
#portal .workspace .paso button.paso-retirar-no { color: var(--ui-tinta-3); }
#portal .workspace .paso button.paso-retirar-no:hover {
  background: none; color: var(--ui-tinta); filter: none;
}
#portal .workspace .paso button.paso-retirar[hidden] { display: none; }
#portal .paso-confirmar {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
}
#portal .paso-confirmar-texto { font-size: 12px; color: var(--ui-tinta-2); }

/* LA PANTALLA DE ADMINISTRACIÓN (admin.js)
   Una caja por empresa, y adentro una fila por capacitación con sus
   tres pasos. Las píldoras del papeleo van juntas y se parten solas
   cuando no caben: en un teléfono son tres seguidas y no cabrían en
   una línea. */
.admin-empresa .record:first-of-type { border-top: 1px solid var(--linea, #E3E7ED); }
.admin-pasos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.admin-pasos .pill { margin: 0; }
/* El nombre del curso, un escalón bajo el de la empresa: adentro de una
   caja que ya dice de quién es, repetir el peso del título hace que las
   dos líneas compitan. */
.admin-curso strong { font-weight: 600; }

/* La fila de una capacitación dentro de la caja de su empresa.
   .record está pensada para llevar un botón a la derecha, y sin ese
   botón el texto se iba al borde y el código del curso quedaba pegado
   al nombre en la misma línea. Acá el bloque ocupa todo el ancho y
   cada dato va en su renglón, que es como se lee una ficha. */
/* MEDIDO, NO SUPUESTO: .record es una REJILLA de dos columnas
   (display:grid, justify-content:space-between), pensada para llevar
   el texto en una y un botón en la otra. Esta fila no lleva botón, así
   que caía en la segunda columna y todo el texto se iba al borde
   derecho. Se probó con display:block y con flex y no bastaba: la
   regla original gana por especificidad. Se deja rejilla —es lo que
   es— pero de UNA columna y alineada al inicio. */
.card article.record.admin-curso {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: start !important;
  text-align: left;
}
.card article.record.admin-curso > div { width: 100%; text-align: left; }
.admin-curso .eyebrow { display: block; margin-bottom: .1rem; }
.admin-curso strong { display: block; }
.admin-curso p { margin: .1rem 0 0; }

/* ------------------------------------------------------------------
   DE QUÉ EMPRESA ES CADA CURSO (solo lo ve el administrador)
   ------------------------------------------------------------------
   Antonio, mirando Documentos y pagos como admin: «no me indique de
   qué empresa es ni nada». Dos cursos con el mismo título, uno debajo
   del otro, y nada que los distinga salvo el código.

   El nombre lo agrega admin.js al final del rótulo, y va en tinta
   fuerte: el código es la referencia, pero lo que uno busca con el ojo
   es de quién es. El !important es porque .eyebrow fija su color
   también con !important.
   ------------------------------------------------------------------ */
#portal .eyebrow .admin-de-quien {
  color: var(--ui-tinta) !important;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   EL GRÁFICO NO VA EN LA PANTALLA DEL ADMINISTRADOR
   ------------------------------------------------------------------
   Antonio: «como admin, esconder la caja del gráfico si no tiene
   utilidad». Y no la tiene: la serie del gráfico es DE UNA EMPRESA
   —api.php solo la carga cuando quien entró es una empresa— así que en
   la cuenta de administración esa caja nunca se va a llenar. Mostrar
   un hueco con un texto que promete que se va a completar es peor que
   no mostrar nada.

   Se esconde SOLO el gráfico, no la caja entera: al lado vive «Avance
   promedio de todas», que para el administrador sí dice algo —el
   promedio de todas sus empresas juntas— y se perdería de paso.

   La clase la pone admin.js, que solo corre para el administrador. Una
   empresa nunca la tiene, así que su gráfico no se toca.
   ------------------------------------------------------------------ */
.admin-sin-grafico .hero-grafico { display: none; }

/* ------------------------------------------------------------------
   LA CINTA DE «ESTÁS MIRANDO EL PORTAL DE…»
   ------------------------------------------------------------------
   Antonio: «poder ver lo que ellos ven sin tener que cerrar la sesión
   de admin y entrar como empresa».

   Va fija abajo y no arriba: arriba pelearía con la barra del portal,
   que es justo lo que se está mirando, y la taparía. Abajo se ve
   siempre, se esté donde se esté en la página, y no corre nada de
   lugar. El relleno de abajo del body es para que la cinta no se pare
   encima de lo último de la pantalla.

   En oscuro y a lo ancho a propósito: esto NO es una pantalla normal,
   y tiene que notarse de reojo. Quien mira el portal de un cliente no
   puede olvidarse de que lo está haciendo.
   ------------------------------------------------------------------ */
.cinta-ver-como {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; flex-wrap: wrap; text-align: center;
  padding: .7rem 1rem;
  /* El color va literal, con la variable solo como preferencia.
     --ui-tinta vive en #portal, y esta cinta cuelga del <body>, fuera
     de #portal: ahí la variable no existe, el fondo quedaba
     TRANSPARENTE y la cinta era letras blancas sobre una página
     blanca. Estaba, medía 1470 px de ancho y no se veía. */
  background: var(--ui-tinta, #1d1d1f); color: #fff;
  font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.cinta-ver-como b { font-weight: 700; }
.cinta-ver-como button {
  flex: none; border: 1px solid rgba(255,255,255,.55);
  background: transparent; color: #fff;
  border-radius: 999px; padding: .35rem .95rem;
  font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.cinta-ver-como button:hover { background: rgba(255,255,255,.16); }
body.con-cinta-ver-como { padding-bottom: 3.6rem; }

/* El botón «Ver su portal» de cada empresa, en Accesos. */
.admin-acciones { display: flex; justify-content: flex-end; padding: .1rem 0 .2rem; }

/* El atajo «Ver su portal» dentro de un renglón de Actividad reciente:
   al lado de Descargar, más chico y en línea, para que no le gane a la
   acción principal del renglón. */
.admin-atajo { margin-left: .45rem; }

/* ------------------------------------------------------------------
   EL AVANCE POR EMPRESA (solo lo ve el administrador)
   ------------------------------------------------------------------
   Antonio: «acá podrían ir los avances de cada empresa en lugar de uno
   general. El general no me sirve para nada».

   Una línea por empresa: nombre, barra y número. La barra es para
   comparar de un vistazo —quién va adelante y quién atrás— y el número
   para saber cuánto exactamente. Sin la barra habría que leer tres
   cifras y restarlas de cabeza.

   El número general se esconde junto con el gráfico: las dos cosas
   responden a «cómo va mi empresa», que no es la pregunta de esta
   cuenta.
   ------------------------------------------------------------------ */
.admin-sin-grafico .hero-numero-caja { display: none; }
/* .hero-cuerpo es una GRILLA de dos columnas —una angosta para el
   número y una ancha para el gráfico—. Este bloque es un tercer hijo,
   así que caía en la columna angosta (210 px) y la barra quedaba en
   cero. Con grid-column ocupa el ancho completo, que es lo que una
   barra de comparación necesita para servir de algo. */
#portal .admin-avances { grid-column: 1 / -1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
#portal .admin-avance { display: flex; align-items: center; gap: 14px; }
#portal .admin-avance-quien {
  flex: 0 0 15rem; min-width: 0; display: flex; flex-direction: column;
  gap: 1px; overflow: hidden;
}
#portal .admin-avance-nombre {
  font-size: 14px; font-weight: 600; color: var(--ui-tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Qué capacitaciones la componen y cuánta gente. Estaba en el tooltip
   del navegador y Antonio, con razón: «no pasa nada». Un dato que hay
   que descubrir quedándose quieto encima es un dato que no está. */
#portal .admin-avance-detalle {
  font-size: 11.5px; line-height: 1.25; color: var(--ui-tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#portal .admin-avance-riel {
  flex: 1; min-width: 0; height: 8px; border-radius: 999px;
  background: var(--ui-linea); overflow: hidden;
}
#portal .admin-avance-lleno {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ui-naranjo);
}
#portal .admin-avance-dato {
  flex: none; width: 3.2rem; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--ui-tinta);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  #portal .admin-avance-quien { flex-basis: 9rem; }
}


/* ===== Portal en el teléfono (25-sep-2026) =====
   Antonio: «en el móvil los datos se ven apretados y mal», y «Descargar y
   Ver su portal deberían ir juntos, del mismo tamaño, en una sola fila». */
#portal .record:has(> .admin-atajo){grid-template-columns:minmax(0,1fr) 150px 150px}
#portal .record > .admin-atajo, #portal .record:has(> .admin-atajo) > a.button{width:100%;justify-content:center;margin:0}
@media (max-width: 640px){
  #portal .card.cifras-caja:not(.curso):not(.curso-ayuda){flex-direction:column;align-items:stretch;gap:18px;padding:20px 16px}
  #portal .cifras.seis{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  #portal .cifras.seis .cifra{padding:0 8px;border-left:0}
  #portal .cifras.seis .cifra:not(:nth-child(3n+1)){border-left:1px solid #E6E9EF}
  #portal .cifras.seis .cifra > span:not(.cifra-dato){font-size:.76rem;line-height:1.3}
  #portal .admin-avance{flex-wrap:wrap;row-gap:6px;column-gap:12px}
  #portal .admin-avance-quien{flex:1 1 100%;min-width:0}
  #portal .admin-avance-riel{flex:1 1 auto}
  #portal .curso-linea-tapa{flex-wrap:wrap}
  #portal .curso-linea-estado{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;flex:1 1 100%}
  #portal .curso-linea-estado .pill{grid-column:1/-1;justify-self:start}
  #portal .curso-linea-estado > button, #portal .curso-linea-estado > a{width:100%;justify-content:center;margin:0;padding-left:8px;padding-right:8px}
  #portal .record:has(> .admin-atajo){grid-template-columns:1fr 1fr;gap:10px}
  #portal .record:has(> .admin-atajo) > div{grid-column:1/-1}
}

/* 25-sep-2026 (c): la barra de arriba en el celular. Antonio: «lo que aún
   se ve apretado es el logo y el nombre de la empresa más el cerrar
   sesión», «el beta debería quedar más pegado al logo y en azul» y «el
   beta no está alineado: debería ir alineado con el Libercap». En el
   iPhone el nombre de la empresa se salía por la derecha: la columna de
   la cuenta ahora nunca es más ancha que lo que queda, el menú ya no usa
   márgenes negativos y la página no puede ensancharse de lado.
   El BETA baja 2,4px: en logo-oficial.png las letras están bajo el centro
   de la imagen (del 42% al 80% del alto), no al medio. */
#portal .barra .marca-beta{background:#EAF0F5;color:var(--blue);border-color:#D3DEEA}
@media (max-width: 640px){
  html, body{overflow-x:hidden;overflow-x:clip}
  #portal{max-width:100%;overflow-x:clip}
  #portal .barra{box-sizing:border-box;width:100%;max-width:100vw;padding:12px 16px 4px;column-gap:12px;row-gap:8px;flex-wrap:wrap;align-items:center;overflow:hidden}
  #portal .barra .lado-izq{flex:0 0 auto;gap:5px;align-items:center}
  #portal .barra .portal-logo{height:22px}
  #portal .barra .marca-beta{margin:0;font-size:8px;line-height:1;padding:2.5px 5px;letter-spacing:.1em;transform:translateY(2.4px)}
  #portal .barra .lado-der{flex:1 1 0;width:0;min-width:0;max-width:100%;overflow:hidden;margin-left:0;align-items:flex-end;gap:2px}
  #portal #account{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;line-height:1.25;text-align:right}
  #portal #logout{font-size:12px;margin:0;padding:0}
  #portal #nav{order:3;flex:0 0 100%;width:100%;min-width:0;margin:0;padding:6px 0;border-top:1px solid #EEF0F4;overflow-x:auto;scrollbar-width:none}
  #portal #nav::-webkit-scrollbar{display:none}
  #portal #nav button{flex:0 0 auto;padding:7px 11px;font-size:13.5px}
}