/*
 * Portal del personal. Mobile primero.
 *
 * NO usa css/main.css: ese es del panel administrativo (sidebar, tablas, etc.)
 * y arrastra estilos que aca no aplican. Este archivo es el unico CSS propio
 * del portal y lo comparten el login y las paginas con sesion.
 */

:root {
    --portal-fondo: #f4f6f9;
    --portal-superficie: #fff;
    --portal-borde: #dee2e6;
    --portal-texto: #212529;
    --portal-texto-suave: #6c757d;
    --portal-ancho: 900px;
    /* Minimo recomendado para un blanco tocable con el pulgar. */
    --portal-tap: 44px;
}

html {
    /* Evita que iOS agrande el texto al girar el telefono. */
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--portal-fondo);
    color: var(--portal-texto);
    /* dvh = alto visible real: en celular la barra de direcciones hace que
       100vh sea mas alto que lo que se ve, y el contenido centrado queda corrido.
       El vh queda primero como fallback para navegadores viejos. */
    min-height: 100vh;
    min-height: 100dvh;
}

/* Ancho maximo de la columna de CONTENIDO.
   El header NO lo usa a proposito: se probo alinearlo con esta columna y en
   escritorio el logo y el boton de cuenta quedaban apretados contra el centro,
   con margenes enormes a los costados. Un header de ancho completo con el logo
   a la izquierda y la cuenta a la derecha es lo que se espera. */
.portal-limite {
    max-width: var(--portal-ancho);
    margin-inline: auto;
    width: 100%;
}

/* ---------- Header ---------- */

.portal-header {
    background-color: var(--portal-superficie);
    border-bottom: 1px solid var(--portal-borde);
    position: sticky;
    top: 0;
    z-index: 1020;
    /* Celulares con notch: el header no se mete abajo de la muesca. */
    padding-top: env(safe-area-inset-top);
}

.portal-header__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 56px;
    padding-block: .5rem;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
}

.portal-marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    /* Es un link (vuelve al inicio), no solo un logo: tiene que ser tocable. */
    min-height: var(--portal-tap);
    font-weight: 600;
    color: var(--portal-texto);
    text-decoration: none;
}

.portal-marca img {
    height: 32px;
    width: auto;
    flex: 0 0 auto;
}

.portal-marca span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boton de cuenta: tocable, y muestra el nombre tambien en celular para que
   el empleado vea con quien esta logueado sin tener que abrir el menu. */
.portal-cuenta {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--portal-tap);
    max-width: 52vw;
    padding: .375rem .75rem;
    border: 1px solid var(--portal-borde);
    border-radius: .5rem;
    background-color: var(--portal-superficie);
    color: var(--portal-texto);
    font-size: .9rem;
}

.portal-cuenta__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-header .dropdown-item {
    /* 24px de linea + 2x12px = 48px de alto tocable. */
    padding-block: .75rem;
}

/* Pantallas muy angostas (360px y menos): el nombre de la empresa cede el
   lugar, el logo solo alcanza para identificar donde esta. */
@media (max-width: 360px) {
    .portal-marca span {
        display: none;
    }

    .portal-cuenta {
        max-width: 65vw;
    }
}

@media (min-width: 576px) {
    .portal-cuenta {
        max-width: 22rem;
        font-size: 1rem;
    }
}

/* ---------- Contenido ---------- */

.portal-contenido {
    padding-top: 1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.portal-card {
    background-color: var(--portal-superficie);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 1.25rem;
}

.portal-card--angosta {
    max-width: 420px;
    margin-inline: auto;
}

/* Lista de secciones del home: filas tocables, no un mosaico de cuadrados.
   En un celular una fila a lo ancho se toca mejor y deja lugar al subtitulo. */
.portal-secciones {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.portal-seccion {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--portal-tap);
    padding: 1rem;
    background-color: var(--portal-superficie);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    color: var(--portal-texto);
    text-decoration: none;
}

.portal-seccion:hover,
.portal-seccion:focus {
    border-color: var(--portal-borde);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.portal-seccion__icono {
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
    color: #0d6efd;
}

.portal-seccion__texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.portal-seccion__texto small {
    color: var(--portal-texto-suave);
}

/* Pills de estado. El amarillo de Bootstrap (text-bg-warning) es muy saturado
   y con poco contraste sobre blanco; este es el mismo tono pero con borde y
   texto oscuro, que se lee bien en la pantalla de un celular al sol. */
.portal-pill-pendiente {
    background-color: #fff4d6;
    border: 1px solid #f0c674;
    color: #8a5a00;
    font-weight: 600;
}

.portal-pill-ok {
    background-color: #e6f6ec;
    border: 1px solid #9bd5b0;
    color: #14663a;
    font-weight: 600;
}

/* Tarjeta que ademas es link (un curso del listado). */
.portal-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.portal-card--link:hover,
.portal-card--link:focus {
    border-color: var(--portal-borde);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* Numerito del paso, en la vista del curso. */
.portal-paso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .35rem;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}

/* Texto de un contenido tipo texto: ancho de lectura y aire entre lineas.
   El contenido es HTML del editor visual (titulos, listas, links), asi que las
   reglas de abajo son para lo que ese editor puede generar. */
.portal-texto {
    line-height: 1.6;
    white-space: normal;
}

.portal-texto > :last-child {
    margin-bottom: 0;
}

.portal-texto h2,
.portal-texto h3,
.portal-texto h4 {
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}

/* En el celular los titulos del editor (h2/h3) salen enormes al lado del
   cuerpo del texto: se bajan a una escala de lectura. */
.portal-texto h2 { font-size: 1.15rem; }
.portal-texto h3 { font-size: 1.05rem; }
.portal-texto h4 { font-size: 1rem; }

.portal-texto ul,
.portal-texto ol {
    padding-left: 1.25rem;
}

.portal-texto blockquote {
    border-left: 3px solid var(--portal-borde);
    padding-left: .75rem;
    margin-left: 0;
    color: var(--portal-texto-suave);
}

/* Un link largo pegado del material no tiene que ensanchar la pantalla. */
.portal-texto a {
    word-break: break-word;
}

/*
   Visor de PDF (public/js/portal-pdf.js). Las paginas se dibujan en canvas
   apilados, no en un iframe: en el celular el iframe no renderiza el PDF.
   El alto lo pone el aspect-ratio de cada pagina, asi que el scroll no salta
   mientras se van dibujando.
*/
.portal-pdf {
    display: block;
}

.portal-pdf__cargando {
    text-align: center;
    color: var(--portal-texto-suave);
    padding: 2.5rem 1rem;
}

/*
   El alto de la pagina sale SOLO del aspect-ratio, que el JS va ajustando con
   las medidas reales de cada pagina. Por eso el canvas va absoluto: si
   participara del flujo, su alto dependeria del padre y el del padre de el
   (height:100% contra un alto derivado del aspect-ratio), la cuenta queda
   circular y el navegador resuelve 0 — el PDF ocupaba cero y el contenido de
   abajo se le encimaba. Por lo mismo el contenedor no es flex: un hijo
   estirado no tiene ancho resuelto a tiempo para derivar el alto.
*/
.portal-pdf__pagina {
    position: relative;
    width: 100%;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid var(--portal-borde);
    border-radius: .375rem;
    overflow: hidden;
}

.portal-pdf__pagina:last-child {
    margin-bottom: 0;
}

.portal-pdf__pagina canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Navegador sin aspect-ratio (anterior a 2021): sin el alto derivado la
   pagina volveria a medir cero, asi que se le da uno fijo. */
@supports not (aspect-ratio: 1 / 1) {
    .portal-pdf__pagina {
        height: 80vh;
    }
}

/* Mientras la pagina no esta dibujada, el hueco no queda vacio del todo. */
.portal-pdf__pagina:not(.portal-pdf__pagina--lista) {
    background: var(--portal-fondo);
}

.portal-pdf__numero {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    font-size: .75rem;
    line-height: 1;
    padding: .2rem .45rem;
    border-radius: .75rem;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

.portal-vacio {
    text-align: center;
    color: var(--portal-texto-suave);
    padding: 3rem 1rem;
}

.portal-vacio i {
    display: block;
    font-size: 2.5rem;
    opacity: .3;
    margin-bottom: .75rem;
}

/* ---------- Formularios ---------- */

/* iOS hace zoom automatico en cualquier input con letra menor a 16px, y al
   volver del zoom la pagina queda corrida. Esto es un PISO: va como selector
   de elemento pelado justamente para que .form-control-lg (mas especifico) lo
   pueda subir. Escrito como clase, achicaba los inputs grandes a 42px. */
input,
select,
textarea {
    font-size: 16px;
}

/* Alto minimo tocable, independiente de la letra. Vale para inputs y botones:
   asi un btn-sm de Bootstrap (31px) no se cuela como blanco chico. */
.portal-contenido .form-control,
.portal-login .form-control,
.portal-contenido .btn,
.portal-login .btn {
    min-height: var(--portal-tap);
}

/* Los botones con min-height necesitan centrar su contenido. */
.portal-contenido .btn,
.portal-login .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.portal-ayuda {
    color: var(--portal-texto-suave);
    font-size: .875rem;
}

/* ---------- Login ---------- */

.portal-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.portal-login__caja {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
}

.portal-login__logo {
    max-width: 160px;
    height: auto;
}

/* ---------- Pasos de una capacitacion ----------
   Bloques con punta a la derecha (chevrones) hechos con clip-path: cada uno
   tiene la muesca a la izquierda donde encaja la punta del anterior. */

.portal-pasos {
    --punta: 14px;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-pasos__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 3.25rem;
    padding: .5rem calc(var(--punta) + .5rem) .5rem calc(var(--punta) + .75rem);
    margin-left: calc(var(--punta) * -1 + 3px);
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
    clip-path: polygon(0 0, calc(100% - var(--punta)) 0, 100% 50%, calc(100% - var(--punta)) 100%, 0 100%, var(--punta) 50%);
    transition: opacity .2s ease;
}

.portal-pasos__item:first-child {
    margin-left: 0;
    padding-left: .85rem;
    border-radius: .6rem 0 0 .6rem;
    clip-path: polygon(0 0, calc(100% - var(--punta)) 0, 100% 50%, calc(100% - var(--punta)) 100%, 0 100%);
}

.portal-pasos__item--leer { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.portal-pasos__item--evaluacion { background: linear-gradient(135deg, #f59e0b, #d97706); }
.portal-pasos__item--firma { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

/* Lo que todavia no le toca queda apagado; lo hecho y lo actual, a color. */
.portal-pasos__item--pendiente { opacity: .38; }
.portal-pasos__item--hecho { opacity: .8; }

.portal-pasos__numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .25);
    font-size: .875rem;
}

.portal-pasos__item--actual .portal-pasos__numero {
    background-color: #fff;
    color: #212529;
}

.portal-pasos__titulo {
    min-width: 0;
}

/* Celular: numero arriba y texto abajo, asi "capacitación" entra entera. */
@media (max-width: 576px) {
    .portal-pasos { --punta: 10px; }
    .portal-pasos__item {
        flex-direction: column;
        justify-content: center;
        gap: .2rem;
        padding: .45rem calc(var(--punta) + .1rem) .45rem calc(var(--punta) + .35rem);
        font-size: .72rem;
        text-align: center;
    }
    .portal-pasos__item:first-child { padding-left: .4rem; }
    .portal-pasos__numero { width: 1.35rem; height: 1.35rem; font-size: .72rem; }
}

/* ---------- Evaluacion ---------- */

.portal-opcion {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: var(--portal-tap);
    padding: .65rem .85rem;
    margin-bottom: .5rem;
    border: 1px solid var(--portal-borde);
    border-radius: .6rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.portal-opcion:hover { border-color: #adb5bd; }

.portal-opcion:has(input:checked) {
    border-color: #d97706;
    background-color: #fff8eb;
}

.portal-opcion input { margin-top: .2rem; flex: 0 0 auto; }

.portal-opcion--correcta { border-color: #198754; background-color: #e8f5ee; }
.portal-opcion--incorrecta { border-color: #dc3545; background-color: #fdecee; }

.portal-nota {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

/* =====================================================================
   Aspecto (29/10): identidad con el violeta de la marca.
   Va al final a proposito: pisa colores y sombras de los componentes de
   arriba sin tocar su estructura (alturas tocables, safe-area, etc.).
   ===================================================================== */

:root {
    --portal-marca: #3b2c85;
    --portal-marca-2: #5b47c9;
    --portal-marca-suave: #efecfb;
    --portal-fondo: #f5f4fa;
    --portal-borde: #e4e2ee;
    --portal-sombra: 0 1px 2px rgba(35, 25, 90, .05), 0 4px 16px rgba(35, 25, 90, .06);
    --portal-sombra-hover: 0 2px 4px rgba(35, 25, 90, .06), 0 10px 28px rgba(35, 25, 90, .12);
    --portal-radio: 1rem;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .95rem;
}

h1, h2, h3, .h5, .h6 { font-weight: 600; }

/* Header */
.portal-header {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--portal-borde), 0 4px 18px rgba(35, 25, 90, .05);
}

.portal-marca span {
    color: var(--portal-marca);
    font-weight: 700;
    letter-spacing: -.01em;
}

.portal-cuenta {
    border-radius: 999px;
    padding: .3rem .85rem .3rem .3rem;
    border-color: var(--portal-borde);
    font-weight: 500;
}

.portal-cuenta:hover { background-color: var(--portal-marca-suave); }

.portal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--portal-marca-2), var(--portal-marca));
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}

.portal-header .dropdown-menu {
    border: 0;
    border-radius: .85rem;
    box-shadow: var(--portal-sombra-hover);
    padding: .4rem;
}

.portal-header .dropdown-item { border-radius: .55rem; }

/* Tarjetas */
.portal-card,
.portal-seccion {
    border: 1px solid rgba(35, 25, 90, .04);
    border-radius: var(--portal-radio);
    box-shadow: var(--portal-sombra);
}

.portal-card--link,
.portal-seccion {
    transition: box-shadow .18s ease, transform .18s ease;
}

.portal-card--link:hover,
.portal-card--link:focus,
.portal-seccion:hover,
.portal-seccion:focus {
    border-color: rgba(35, 25, 90, .04);
    box-shadow: var(--portal-sombra-hover);
    transform: translateY(-2px);
}

.portal-paso { background-color: var(--portal-marca); }

/* Botones con el color de la marca */
.portal-contenido .btn-primary,
.portal-login .btn-primary {
    --bs-btn-bg: var(--portal-marca);
    --bs-btn-border-color: var(--portal-marca);
    --bs-btn-hover-bg: #2f2370;
    --bs-btn-hover-border-color: #2f2370;
    --bs-btn-active-bg: #281e60;
    --bs-btn-active-border-color: #281e60;
    --bs-btn-disabled-bg: var(--portal-marca);
    --bs-btn-disabled-border-color: var(--portal-marca);
    border-radius: .75rem;
    font-weight: 600;
}

.portal-contenido .btn { border-radius: .75rem; }

.portal-contenido .form-control:focus,
.portal-login .form-control:focus {
    border-color: var(--portal-marca-2);
    box-shadow: 0 0 0 .25rem rgba(91, 71, 201, .18);
}

/* Link "volver" chico, sin caja */
.portal-volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: var(--portal-tap);
    color: var(--portal-texto-suave);
    font-weight: 500;
    text-decoration: none;
}

.portal-volver:hover { color: var(--portal-marca); }

/* ---------- Inicio: saludo ---------- */

.portal-hero {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.35rem;
    margin-bottom: 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--portal-marca-2) 0%, var(--portal-marca) 60%, #2a1f66 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(59, 44, 133, .28);
}

/* Circulos decorativos, solo forma (no imagen). */
.portal-hero::before,
.portal-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.portal-hero::before { width: 220px; height: 220px; right: -70px; top: -90px; }
.portal-hero::after { width: 140px; height: 140px; right: 40px; bottom: -80px; }

.portal-hero__fecha {
    font-size: .8rem;
    opacity: .8;
}

.portal-hero__saludo {
    font-size: 1.45rem;
    font-weight: 700;
    margin: .15rem 0 .25rem;
}

.portal-hero__sub { opacity: .85; margin: 0; }

.portal-hero__datos {
    position: relative;
    display: flex;
    gap: .6rem;
    margin-top: 1.1rem;
}

.portal-hero__dato {
    flex: 1 1 0;
    padding: .65rem .8rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(4px);
}

.portal-hero__dato strong {
    display: block;
    font-size: 1.4rem;
    line-height: 1.1;
}

.portal-hero__dato span { font-size: .78rem; opacity: .85; }

.portal-titulo-seccion {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--portal-texto-suave);
    margin: 0 0 .6rem .25rem;
}

/* Icono de seccion en un cuadrado de color */
.portal-seccion { padding: 1rem 1.1rem; }

.portal-seccion__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    background-color: var(--portal-marca-suave);
    color: var(--portal-marca);
    font-size: 1.4rem;
}

.portal-seccion__texto small { font-size: .8rem; }

.portal-seccion__flecha { color: #b8b4cc; }

/* ---------- Listado de capacitaciones ---------- */

.portal-curso {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.portal-curso__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    font-size: 1.25rem;
}

.portal-curso--pendiente .portal-curso__icono { background: #fff4d6; color: #a86b00; }
.portal-curso--aprobado .portal-curso__icono { background: #e3f5ea; color: #157347; }
.portal-curso--desaprobado .portal-curso__icono { background: #fde8ea; color: #b02a37; }

.portal-curso__cuerpo { flex: 1 1 auto; min-width: 0; }

.portal-curso__titulo { font-weight: 600; line-height: 1.3; }

/* Descripcion a dos lineas: el detalle esta adentro del curso. */
.portal-curso__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-curso__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    margin-top: .55rem;
}

.portal-contenido .badge.rounded-pill { font-weight: 600; padding: .38em .75em; }

/* ---------- Encabezado de un curso ---------- */

/* Franja de color arriba: como fondo y no como borde, asi el redondeado de la
   tarjeta la recorta derecha en vez de curvarla. */
.portal-curso-hero {
    padding-top: 1.5rem;
    background-image: linear-gradient(90deg, var(--portal-marca-2), var(--portal-marca));
    background-size: 100% 5px;
    background-repeat: no-repeat;
}

.portal-curso-hero h1 { color: var(--portal-marca); }

/* ---------- Login ---------- */

.portal-login {
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .12) 0, transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, .08) 0, transparent 45%),
        linear-gradient(160deg, var(--portal-marca-2) 0%, var(--portal-marca) 55%, #221a55 100%);
}

.portal-login .portal-card {
    border: 0;
    border-radius: 1.35rem;
    box-shadow: 0 20px 50px rgba(20, 12, 60, .35);
    padding: 1.75rem 1.5rem;
}

.portal-login .form-label { font-weight: 500; font-size: .875rem; }

.portal-login .input-group-text {
    background-color: var(--portal-marca-suave);
    border-color: var(--bs-border-color);
    color: var(--portal-marca);
}

.portal-login__pie {
    margin-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
}