/* ==========================================================================
   consultores_sereslatam — estilos propios
   --------------------------------------------------------------------------
   Bootstrap 5 (autoalojado en css/bootstrap.min.css) es la base. Aquí solo va
   lo que Bootstrap no cubre. Agrupado por componente y con prefijo propio.

   Todo el color y la tipografía salen de css/tokens.css. Ningún literal de
   color en este archivo: si un tono aparece dos veces con dos valores, acaban
   divergiendo y nadie se entera hasta que se ve raro en una sola pantalla.

   Sin `!important`: si alguna vez hiciera falta, se comenta el porqué.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
    background-color: var(--hueso);
    color: var(--tinta);
    font-family: var(--fuente-ui);
}

/* Bootstrap fija su propia familia en controles; se alinean con la nuestra. */
.btn,
.form-control,
.form-select,
.navbar,
.table {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--tr-titulo);
    text-wrap: balance;
}

main {
    background-color: var(--hueso);
}


/* --------------------------------------------------------------------------
   2. Accesibilidad general
   -------------------------------------------------------------------------- */

/* Enlace de salto: invisible hasta recibir el foco por teclado. */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: 0.75rem 1rem;
    background-color: var(--blanco);
    color: var(--marino);
    font-weight: 600;
    border-radius: 0 0 var(--radio-grande) 0;
}

.salto-contenido:focus {
    left: 0;
}

/* Foco siempre visible, también en elementos sin estilo propio de Bootstrap. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: var(--filete) solid var(--marino);
    outline-offset: 2px;
}

/* Sobre fondo marino el contorno marino sería invisible. */
.navbar-marca a:focus-visible,
.navbar-marca button:focus-visible {
    outline-color: var(--lavanda);
}

/* El contenedor <main> recibe foco al usar el salto: no debe dibujar contorno. */
main:focus {
    outline: none;
}


/* --------------------------------------------------------------------------
   3. Navegación
   -------------------------------------------------------------------------- */

.navbar-marca {
    background-color: var(--marino);
}

/* La marca es tipográfica, no un logotipo escalado a la fuerza. */
.navbar-marca .navbar-brand {
    font-weight: 600;
    letter-spacing: var(--tr-titulo);
}

/* El enlace activo se marca con un filete lavanda bajo el texto: el color por
   sí solo no basta para señalar estado (WCAG 1.4.1). */
.navbar-marca .nav-link.activo {
    box-shadow: inset 0 -2px 0 var(--lavanda);
}

.sesion-actual {
    font-size: 0.95rem;
    color: var(--gris);
}


/* --------------------------------------------------------------------------
   4. Pie de página
   -------------------------------------------------------------------------- */

/* Deja de ser una franja gris oscura de 120 px. Un pie no necesita gritar. */
.pie-sitio {
    background-color: var(--blanco);
    border-top: 1px solid var(--linea);
    color: var(--gris);
    font-size: var(--t-micro);
}

.pie-sitio p {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   5. Declaración de portada
   Sustituye al saludo. Dice el estado real de quien entra, con datos que el
   sistema ya calcula para el listado: ninguna consulta nueva.
   -------------------------------------------------------------------------- */

.declaracion {
    padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 2rem);
}

.declaracion__cintillo {
    font-size: var(--t-cintillo);
    font-weight: 650;
    letter-spacing: var(--tr-cintillo);
    text-transform: uppercase;
    color: var(--lavanda-tinta);
    margin-bottom: 1rem;
}

.declaracion__frase {
    font-size: var(--t-declaracion);
    line-height: 1.12;
    letter-spacing: var(--tr-declaracion);
    font-weight: 600;
    color: var(--tinta);
    max-width: 15ch;
    margin-bottom: 0;
}

.declaracion__regla {
    width: 2.6rem;
    height: var(--filete);
    background-color: var(--borgona);
    border: 0;
    opacity: 1;
    margin: 1.1rem 0 0.85rem;
}

.declaracion__pie {
    color: var(--gris);
    max-width: 46ch;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   6. Acciones de portada
   Dos bloques con jerarquía explícita. Antes eran dos tarjetas del mismo peso,
   así que la página no orientaba sobre qué hacer.
   -------------------------------------------------------------------------- */

.acciones-portada {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.accion {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 15rem;
    flex: 0 1 auto;
    padding: 0.9rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radio);
    text-decoration: none;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.accion__nombre {
    font-weight: 600;
}

.accion__detalle {
    font-size: var(--t-micro);
    opacity: 0.82;
}

.accion--principal {
    background-color: var(--borgona);
    color: var(--blanco);
}

.accion--principal:hover,
.accion--principal:focus-visible {
    background-color: var(--borgona-oscuro);
    color: var(--blanco);
}

.accion--secundaria {
    border-color: var(--linea-fuerte);
    color: var(--marino);
    background-color: transparent;
}

.accion--secundaria:hover,
.accion--secundaria:focus-visible {
    border-color: var(--marino);
    color: var(--marino);
}

.accion:hover,
.accion:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--sombra-suave);
}

@media (prefers-reduced-motion: reduce) {
    .accion {
        transition: none;
    }

    .accion:hover,
    .accion:focus-visible {
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   7. Lectura de un entregable
   -------------------------------------------------------------------------- */

.entregable__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

/* El número identifica la página, como ya se hace al hablar de un entregable. */
.entregable__numero {
    font-size: 2rem;
    font-weight: 650;
    line-height: 1;
    color: var(--borgona);
    font-variant-numeric: tabular-nums lining-nums;
}

.entregable__titulo {
    font-size: var(--t-titulo);
    font-weight: 600;
    max-width: 34ch;
    margin-bottom: 0.15rem;
}

.entregable__meta {
    font-size: var(--t-micro);
    color: var(--gris);
    margin-bottom: 0;
}

.entregable__cuerpo {
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-grande);
    padding: 1.25rem 1.4rem;
    line-height: 1.7;
}

.entregable__cuerpo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio);
}

/* Rótulo de sección dentro de la lectura. */
.entregable__seccion {
    font-size: var(--t-cintillo);
    font-weight: 650;
    letter-spacing: var(--tr-cintillo);
    text-transform: uppercase;
    color: var(--lavanda-tinta);
    margin: 1.75rem 0 0.65rem;
}


/* --------------------------------------------------------------------------
   8. Calificación
   La escala se dice, no se adivina: antes se pintaba "3.5" a secas.
   -------------------------------------------------------------------------- */

.calificacion {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.calificacion__valor {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--borgona);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.calificacion__escala {
    font-size: var(--t-micro);
    color: var(--gris);
}

.calificacion__barra {
    flex: 1 1 4rem;
    max-width: 9rem;
    height: 5px;
    background-color: var(--linea);
    border-radius: 3px;
    overflow: hidden;
}

.calificacion__lleno {
    display: block;
    height: 100%;
    background-color: var(--borgona);
}

/* Variante para celda de tabla: la del entregable mide 1.5rem y ahi no cabe. */
.calificacion--compacta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.calificacion--compacta .calificacion__valor {
    font-size: var(--t-cuerpo);
    font-weight: 650;
}

.calificacion--compacta .calificacion__escala {
    font-size: var(--t-micro);
}

.comentario {
    border-left: var(--filete) solid var(--lavanda);
    padding: 0.15rem 0 0.15rem 0.85rem;
    margin-bottom: 0.75rem;
}

.comentario__fecha {
    display: block;
    font-size: var(--t-micro);
    color: var(--gris);
    margin-top: 0.15rem;
}


/* --------------------------------------------------------------------------
   9. Componente `tabla-datos`
   Tabla con búsqueda, ordenamiento y paginación (js/tabla.js).
   Se reencamina el aspecto; el comportamiento no se toca.
   -------------------------------------------------------------------------- */

.tabla-datos .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.tabla-datos .table > :not(caption) > * > * {
    border-bottom-color: var(--linea);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.tabla-datos .table thead th {
    border-bottom-color: var(--linea-fuerte);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lavanda-tinta);
}

/* Primera columna: el número ancla la fila. */
.tabla-datos__ancla {
    font-size: var(--t-numero);
    font-weight: 650;
    color: var(--lavanda-tinta);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

/* Fila que todavía espera respuesta. Codifica en la forma algo que hoy hay que
   leer para saber; el filete acompaña al texto, no lo sustituye. */
.tabla-datos .table tbody tr.fila--pendiente td:first-child {
    box-shadow: inset var(--filete) 0 0 var(--borgona);
}

.tabla-datos .table tbody tr.fila--pendiente .tabla-datos__ancla {
    color: var(--borgona);
}

.tabla-datos__cargando,
.tabla-datos__resumen {
    color: var(--gris);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Cabecera ordenable: es un <button> real, no un <th> con onclick. */
.tabla-datos__orden {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.tabla-datos__orden:hover {
    text-decoration: underline;
}

/* Indicador de dirección. Neutro mientras la columna no está activa. */
.tabla-datos__flecha::after {
    content: "\2195"; /* flecha doble */
    opacity: 0.35;
}

.tabla-datos__th--asc .tabla-datos__flecha::after {
    content: "\2191";
    opacity: 1;
}

.tabla-datos__th--desc .tabla-datos__flecha::after {
    content: "\2193";
    opacity: 1;
}

.tabla-datos__aviso {
    margin-top: 1rem;
}

.tabla-datos__paginacion .page-link {
    cursor: pointer;
    color: var(--marino);
}

.tabla-datos__paginacion .page-item.active .page-link {
    background-color: var(--marino);
    border-color: var(--marino);
    color: var(--blanco);
}

/* Estado vacío servido por el servidor (sin datos que listar).
   Una pantalla vacía es una invitación a actuar, no un hueco. */
.tabla-vacia {
    padding: 2.5rem 1rem;
    text-align: center;
}

.tabla-vacia__titulo {
    font-size: var(--t-titulo);
    font-weight: 600;
}

.tabla-vacia__texto {
    color: var(--gris);
    max-width: 34rem;
    margin: 0.5rem auto 1.25rem;
}


/* --------------------------------------------------------------------------
   10. `tabla-datos` en pantalla estrecha
   Debajo de 576 px la tabla se apila en tarjetas: cada celda muestra su
   rótulo (data-etiqueta) y deja de hacer falta el desplazamiento horizontal.
   El ordenamiento sigue disponible en el selector "Ordenar por".
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .tabla-datos .table,
    .tabla-datos .table tbody,
    .tabla-datos .table tr,
    .tabla-datos .table td {
        display: block;
        width: 100%;
    }

    .tabla-datos .table thead {
        /* Oculto visualmente, presente para lectores de pantalla. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .tabla-datos .table tr {
        border: 1px solid var(--linea);
        border-radius: var(--radio-grande);
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        background-color: var(--blanco);
    }

    /* Apilada, el filete va en el borde izquierdo de la tarjeta entera. */
    .tabla-datos .table tbody tr.fila--pendiente {
        border-left: var(--filete) solid var(--borgona);
    }

    .tabla-datos .table tbody tr.fila--pendiente td:first-child {
        box-shadow: none;
    }

    .tabla-datos .table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        padding: 0.45rem 0;
        text-align: right;
    }

    .tabla-datos .table td + td {
        border-top: 1px solid var(--linea);
    }

    .tabla-datos .table td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        font-weight: 650;
        text-align: left;
        color: var(--gris);
        flex: 0 0 auto;
    }

    /* El atributo `hidden` debe ganar al display que fijamos arriba. */
    .tabla-datos .table[hidden] {
        display: none;
    }

    /* La celda de acciones ocupa el ancho completo, con botones a tamaño táctil. */
    .tabla-datos .table td[data-tabla-accion] {
        justify-content: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding-top: 0.75rem;
    }

    .tabla-datos .table td[data-tabla-accion] .btn {
        flex: 1 1 auto;
    }
}


/* --------------------------------------------------------------------------
   11. Confirmación de acciones destructivas (js/confirmacion.js)
   -------------------------------------------------------------------------- */

.confirmacion__aviso {
    color: var(--peligro);
    font-size: 0.95rem;
}


/* --------------------------------------------------------------------------
   12. Encabezado de listado (común a los tres listados)
   -------------------------------------------------------------------------- */

.listado__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.listado__titulo {
    margin-bottom: 0;
    font-size: var(--t-titulo);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   13. Superficies y formularios
   -------------------------------------------------------------------------- */

/* Panel de contenido sobre el fondo hueso. */
.panel {
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-grande);
    padding: clamp(1rem, 3vw, 1.75rem);
}

.campo__etiqueta {
    font-size: var(--t-cintillo);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lavanda-tinta);
    margin-bottom: 0.3rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lavanda);
    box-shadow: 0 0 0 0.2rem rgba(115, 133, 184, 0.3);
}

/* La acción principal de cada pantalla lleva el color de la marca. */
.btn-marca {
    background-color: var(--borgona);
    border-color: var(--borgona);
    color: var(--blanco);
}

.btn-marca:hover,
.btn-marca:focus-visible {
    background-color: var(--borgona-oscuro);
    border-color: var(--borgona-oscuro);
    color: var(--blanco);
}

.btn-marca:focus-visible {
    outline-color: var(--borgona);
}


/* --------------------------------------------------------------------------
   14. Adjuntos
   Las reglas que se muestran aquí son las que aplica el servidor
   (commons/adjuntos.php). Si divergen, manda el servidor.
   -------------------------------------------------------------------------- */

.adjuntos__zona {
    border: 1.5px dashed var(--linea-fuerte);
    border-radius: var(--radio-grande);
    background-color: var(--blanco);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color 0.14s ease-in-out, background-color 0.14s ease-in-out;
}

.adjuntos__zona.esta-encima {
    border-color: var(--borgona);
    background-color: var(--borgona-tenue);
}

.adjuntos__zona.esta-llena {
    border-style: solid;
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .adjuntos__zona {
        transition: none;
    }
}

.adjuntos__titulo {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.adjuntos__ayuda {
    font-size: var(--t-micro);
    color: var(--gris);
    max-width: 42ch;
    margin: 0 auto 0.75rem;
}

.adjuntos__lista {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.adjuntos__item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: 0 0.7rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background-color: var(--blanco);
}

.adjuntos__item--error {
    border-color: var(--borgona);
    background-color: var(--borgona-tenue);
}

.adjuntos__miniatura {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio);
    object-fit: cover;
    display: block;
}

.adjuntos__marca {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio);
    display: grid;
    place-items: center;
    background-color: var(--borgona-tenue);
    color: var(--borgona);
    font-weight: 700;
}

/* El nombre del cliente se descarta: se muestra con el que se guardó. */
.adjuntos__nombre {
    font-size: 0.9rem;
    font-weight: 550;
    margin-bottom: 0;
    word-break: break-all;
}

.adjuntos__meta {
    font-size: var(--t-micro);
    color: var(--gris);
    margin: 0.1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.adjuntos__insignia {
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background-color: var(--exito-tenue);
    color: var(--exito);
}

.adjuntos__error {
    font-size: var(--t-micro);
    color: var(--borgona);
    margin: 0.1rem 0 0;
}

.adjuntos__barra {
    grid-column: 2 / -1;
    height: 3px;
    background-color: var(--linea);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.35rem;
}

.adjuntos__progreso {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--borgona);
    transition: width 0.18s linear;
}

@media (prefers-reduced-motion: reduce) {
    .adjuntos__progreso {
        transition: none;
    }
}

.adjuntos__contador {
    font-size: var(--t-micro);
    color: var(--gris);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0;
}


/* --------------------------------------------------------------------------
   15. Recorrido guiado (js/recorrido.js sobre js/vendor/driver.js)

   Dos piezas: el botón permanente de la barra y el tema del globo que dibuja
   la biblioteca. `js/vendor/driver.css` se carga aparte, con <link>, y se deja
   intacto: aquí solo se ajusta por encima lo que hace falta para que el globo
   no parezca de otra aplicación.

   Todas las reglas propias van prefijadas con `.driver-popover.recorrido-globo`
   (la clase la pone `popoverClass`). No es adorno de especificidad: driver.css
   se carga DESPUÉS de este archivo, así que una regla con la misma
   especificidad perdería el desempate por orden. Con dos clases gana sin
   necesidad de un solo `!important`.
   -------------------------------------------------------------------------- */

/* --- Botón permanente de la barra ---------------------------------------- */

/* Se sirve oculto y lo muestra el script solo si hay algo que enseñar. La
   regla garantiza que `hidden` gane a las utilidades de display de Bootstrap. */
.recorrido-lanzador[hidden] {
    display: none;
}

.recorrido-lanzador {
    color: var(--blanco);
    background-color: transparent;
    border: 1px solid var(--lavanda);
    font-size: var(--t-micro);
    white-space: nowrap;
    opacity: 0.85;
}

.recorrido-lanzador:hover,
.recorrido-lanzador:focus-visible {
    color: var(--blanco);
    background-color: var(--marino-oscuro);
    border-color: var(--blanco);
    opacity: 1;
}

/* --- Ofrecimiento inicial (modal de Bootstrap) ---------------------------- */

.recorrido-oferta__nota {
    color: var(--gris);
    font-size: var(--t-micro);
}

/* --- Globo del recorrido -------------------------------------------------- */

.driver-popover.recorrido-globo {
    /* Variable de la propia biblioteca (1.7.0+): sin esto el globo se rendiría
       en Helvetica y chocaría con el resto de la interfaz. */
    --driver-popover-font-family: var(--fuente-ui);

    background-color: var(--blanco);
    color: var(--tinta);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-media);
    /* A 360 px el globo no puede medir sus 300 px fijos y quedarse sin aire. */
    max-width: min(22rem, calc(100vw - 2rem));
}

.driver-popover.recorrido-globo .driver-popover-title {
    font-size: var(--t-numero);
    font-weight: 600;
    letter-spacing: var(--tr-titulo);
    color: var(--borgona);
    /* Deja sitio al aspa, que va superpuesta arriba a la derecha. */
    padding-right: 2rem;
}

.driver-popover.recorrido-globo .driver-popover-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--tinta);
}

.driver-popover.recorrido-globo .driver-popover-progress-text {
    color: var(--gris);
    font-size: var(--t-micro);
}

/* El gris de fábrica del aspa (#d2d2d2) no llega a AA sobre blanco, y es un
   control, no un adorno. */
.driver-popover.recorrido-globo .driver-popover-close-btn {
    color: var(--gris);
}

.driver-popover.recorrido-globo .driver-popover-close-btn:hover,
.driver-popover.recorrido-globo .driver-popover-close-btn:focus-visible {
    color: var(--tinta);
}

.driver-popover.recorrido-globo .driver-popover-footer-btn {
    font-family: inherit;
    font-size: var(--t-micro);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background-color: var(--blanco);
    color: var(--marino);
}

.driver-popover.recorrido-globo .driver-popover-footer-btn:hover,
.driver-popover.recorrido-globo .driver-popover-footer-btn:focus-visible {
    background-color: var(--hueso);
    border-color: var(--marino);
    color: var(--marino);
}

/* «Siguiente» y «Listo» son el mismo botón: la biblioteca solo le añade una
   clase en el último paso. */
.driver-popover.recorrido-globo .driver-popover-next-btn {
    background-color: var(--borgona);
    border-color: var(--borgona);
    color: var(--blanco);
}

.driver-popover.recorrido-globo .driver-popover-next-btn:hover,
.driver-popover.recorrido-globo .driver-popover-next-btn:focus-visible {
    background-color: var(--borgona-oscuro);
    border-color: var(--borgona-oscuro);
    color: var(--blanco);
}

/* «Anterior» en el primer paso: el script lo desactiva de verdad (`disabled`),
   así que sale del orden de tabulación y se anuncia como lo que es. Va después
   de las reglas de `:hover` a propósito, para ganar el desempate por orden. */
.driver-popover.recorrido-globo .driver-popover-footer-btn:disabled {
    background-color: var(--blanco);
    border-color: var(--linea);
    color: var(--gris);
    cursor: default;
}

/* El foco tiene que verse también dentro del globo: driver.css hace `all:unset`
   en sus botones, lo que incluye el contorno. */
.driver-popover.recorrido-globo .driver-popover-footer-btn:focus-visible,
.driver-popover.recorrido-globo .driver-popover-close-btn:focus-visible {
    outline: var(--filete) solid var(--marino);
    outline-offset: 2px;
}

/* --- Movimiento reducido -------------------------------------------------- */

/* El script ya desactiva la animación cuando el sistema la desaconseja
   (`animate: false`); esto cubre el caso de que la preferencia cambie con el
   recorrido abierto. `body.driver-fade` añade una etiqueta a la especificidad,
   que es lo que hace falta para ganarle a driver.css sin `!important`. */
@media (prefers-reduced-motion: reduce) {
    body.driver-fade .driver-overlay,
    body.driver-fade .driver-popover {
        animation: none;
    }

    .driver-popover.recorrido-globo .driver-popover-close-btn {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   16. Acceso perdido en la pantalla de entrada (js/acceso.js)

   El mensaje se sirve como un bloque normal y visible; `js/acceso.js` lo mueve
   dentro de un <dialog> nativo. Las dos presentaciones se estilan aquí, porque
   las dos son estados legítimos: sin JavaScript se ve el bloque, con JavaScript
   se ve el diálogo. Nunca ninguna de las dos es un error.

   Sin Bootstrap JS en esta pantalla (ver login.php): la modalidad, la captura
   del tabulador y el cierre con Escape los pone el navegador.
   -------------------------------------------------------------------------- */

/* Enlace y bloque son las DOS CARAS DE LA MISMA MONEDA, y nunca se ven a la vez:

     sin JavaScript  → se lee el bloque; el enlace sobra, porque solo llevaría a un
                       texto que ya está a la vista dos líneas más abajo y quedaría
                       la misma frase repetida dos veces seguidas.
     con JavaScript  → se ve el enlace y el bloque se va dentro del <dialog>.

   Las dos reglas dependen de la misma marca en <html>, que js/acceso.js pone antes
   del primer pintado y retira si no llega a construir el diálogo. Así nunca hay un
   estado en el que no se vea ninguna de las dos cosas. */
.acceso-perdido__linea {
    display: none;
}

.acceso-con-dialogo .acceso-perdido__linea {
    display: block;
}

.acceso-perdido__abrir {
    color: var(--lavanda-tinta);
}

.acceso-perdido__abrir:hover,
.acceso-perdido__abrir:focus-visible {
    color: var(--marino);
}

/* El bloque servido: una nota discreta bajo el formulario. */
.acceso-perdido {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: var(--hueso);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

/* Cuando el script confirma que hay <dialog>, el bloque pasa a vivir dentro del
   diálogo y deja de mostrarse suelto. La marca la pone js/acceso.js en <html>
   antes del primer pintado, así que no hay parpadeo; si el script no llega, la
   clase no existe y esta regla no se aplica. */
.acceso-con-dialogo .acceso-perdido {
    display: none;
}

/* Ya dentro del diálogo vuelve a ser contenido normal: sin caja propia, que
   la caja la pone el <dialog>. */
.dialogo .acceso-perdido {
    display: block;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
}

.acceso-perdido__titulo {
    font-size: var(--t-titulo);
    letter-spacing: var(--tr-titulo);
    color: var(--marino);
    margin-bottom: 0.5rem;
}

.acceso-perdido__nota {
    font-size: var(--t-micro);
    color: var(--gris);
}

/* --- El <dialog> --------------------------------------------------------- */

/* Sin relleno propio: lo lleva `.dialogo__cuerpo`. Así el único punto de la
   superficie que pertenece a `.dialogo` es el velo, y el script puede
   distinguir un clic en el fondo de uno en el contenido comparando el destino
   del evento. */
.dialogo {
    padding: 0;
    width: min(28rem, calc(100vw - 2rem));
    background-color: var(--blanco);
    color: var(--tinta);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-media);
}

.dialogo::backdrop {
    /* `background-color` con `color-mix` para no escribir un literal: el velo
       es la tinta del sistema a media opacidad. */
    background-color: color-mix(in srgb, var(--tinta) 55%, transparent);
}

/* El propio diálogo recibe el foco al abrirse (lleva `tabindex="-1"`). No se
   dibuja contorno porque el elemento enfocado ES la superficie entera y el
   recuadro no orientaría a nadie; el título anunciado por `aria-labelledby` es
   lo que cumple esa función. El foco de los controles de dentro sí se ve. */
.dialogo:focus {
    outline: none;
}

.dialogo__cuerpo {
    padding: clamp(1rem, 4vw, 1.5rem);
}

.dialogo__pie {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* El diálogo aparece con un fundido corto. Se anula por completo si el sistema
   pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
    .dialogo[open] {
        animation: dialogo-entra 0.15s ease-out;
    }
}

@keyframes dialogo-entra {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   17. Aviso de contraseña asignada (portada)

   Se muestra a quien entra con una contraseña que le asignaron y todavía no ha
   cambiado. Es un recordatorio, no una alarma:

   - NO lleva borgoña. Ese color es la identidad y la acción principal, y el
     aviso se pinta a un centímetro de «Generar entregable»: si compartieran
     color competirían y el aviso parecería la acción a seguir.
   - NO lleva rojo ni ámbar. No hay nada roto ni nada urgente, y teñirlo de
     error convierte un consejo en una reprimenda.
   - Queda el marino, que ya es el color de lo institucional y de lo secundario
     en este sistema.
   -------------------------------------------------------------------------- */

.aviso-clave {
    margin-top: 2rem;
    background-color: var(--hueso);
    border: 1px solid var(--linea);
    /* El filete al costado lo separa del texto corrido sin pedir atención. */
    border-left: var(--filete) solid var(--lavanda);
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: var(--t-micro);
}

.aviso-clave__titulo {
    font-weight: 650;
    color: var(--marino);
    margin-bottom: 0.25rem;
}

.aviso-clave__enlace {
    color: var(--marino);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.aviso-clave__enlace:hover,
.aviso-clave__enlace:focus-visible {
    color: var(--marino-oscuro);
}


/* --------------------------------------------------------------------------
   18. Foco visible en los botones de marca

   Corrige un fallo real de accesibilidad (WCAG 2.4.7) que afectaba a botones
   ya existentes, no solo a los nuevos.

   Bootstrap trae `.btn:focus-visible { outline: 0 }` y dibuja su anillo con
   `box-shadow`, tomando el color de `--bs-btn-focus-box-shadow`. Esa variable
   solo la definen las variantes propias de Bootstrap (`.btn-primary`,
   `.btn-outline-light`…). `.btn-marca` y `.recorrido-lanzador` son variantes
   NUESTRAS: no tienen esa variable, así que se quedaban sin `box-shadow` y con
   el contorno anulado, es decir, sin ningún indicador de foco.

   La regla genérica de la sección 2 (`button:focus-visible`) no bastaba: con
   una clase menos de especificidad perdía contra `.btn:focus-visible`. Y la
   regla de `.btn-marca` de la sección 13 solo declaraba `outline-color`, que
   sobre un contorno de grosor cero no se ve.

   Afectaba, entre otros, al botón «Iniciar sesión», a «Generar entregable» y
   al botón del recorrido de la barra. Se arregla con especificidad suficiente
   y sin un solo `!important`.
   -------------------------------------------------------------------------- */

.btn.btn-marca:focus-visible {
    outline: var(--filete) solid var(--borgona);
    outline-offset: 2px;
}

/* Sobre el fondo marino de la barra, un contorno borgoña o marino no se
   distinguiría: ahí el contorno es lavanda, como en el resto de la barra. */
.navbar-marca .btn.recorrido-lanzador:focus-visible {
    outline: var(--filete) solid var(--lavanda);
    outline-offset: 2px;
}



/* --------------------------------------------------------------------------
   19. Adjuntos — piezas que faltaban para la subida por fragmentos

   La sección 14 ya trae el componente aprobado: zona, lista, item, miniatura,
   marca de familia, insignia, barra y contador. Aquí NO se repite ni una de
   esas reglas —duplicar un nombre de clase es garantizar que las dos copias
   diverjan—; solo se añade lo que la subida por fragmentos necesita y el
   prototipo no tenía, porque antes no había nada que reanudar ni cancelar.

   Todo lo de aquí lo activa `js/adjuntos.js`; sin él la vía clásica se sirve
   tal cual y ninguna de estas reglas llega a aplicarse.
   -------------------------------------------------------------------------- */

/*
   El campo de archivo se oculta A LA VISTA, nunca al teclado ni al lector de
   pantalla: con `display: none` saldría del orden de tabulación y la zona de
   arrastre se quedaría sin alternativa accesible. Se escribe aquí en vez de
   usar `.visually-hidden` porque hace falta poder dibujar el contorno de foco
   sobre la etiqueta contigua, y para eso las dos reglas tienen que ir juntas.
*/
.adjuntos__entrada {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El foco del campo se ve en su etiqueta, que es lo que el usuario percibe
   como botón. Sin esto habría foco invisible, que es no tener foco. */
.adjuntos__entrada:focus-visible + .adjuntos__elegir {
    outline: var(--filete) solid var(--borgona);
    outline-offset: 2px;
}

/* Celda central de la rejilla de `.adjuntos__item`. El prototipo la da por
   supuesta —sus reglas de nombre, meta y error solo tienen sentido apiladas—
   pero no la nombra. `min-width: 0` es lo que permite que un nombre larguísimo
   se parta en vez de estirar la fila y empujar los botones fuera de pantalla. */
.adjuntos__datos {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Acciones de cada fila: cancelar, reanudar, reintentar, quitar. Ocupan la
   tercera columna de la rejilla de `.adjuntos__item`. */
.adjuntos__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

/* El contador del prototipo separa sus dos partes a los extremos. A 360 px eso
   deja dos columnas de texto demasiado estrechas y la segunda se sale: aquí
   simplemente se permite que bajen de línea. */
.adjuntos__contador {
    flex-wrap: wrap;
    row-gap: 0.15rem;
}

/* El nombre definitivo es el aleatorio del servidor: es un código, y se lee
   como tal. El original no se guarda en ninguna parte. */
.adjuntos__nombre--codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--t-micro);
    font-weight: 500;
}

/* Recordatorio de qué archivo era, para no perderse con diez adjuntos. */
.adjuntos__original {
    font-size: var(--t-cintillo);
    color: var(--gris);
    margin: 0.1rem 0 0;
    word-break: break-all;
}

/* Segunda línea del error: qué hacer. Va aparte del mensaje del servidor —que
   se muestra literal— para que se lea como lo que es, una sugerencia nuestra y
   no una versión suavizada de lo que dijo el servidor. */
.adjuntos__pista {
    font-size: var(--t-cintillo);
    color: var(--gris);
    margin: 0.1rem 0 0;
}

/* Una subida cortada no es un error: se puede continuar. Se distingue del
   error con el color de aviso, y además con el texto de la propia fila: el
   color por sí solo no señala estado (WCAG 1.4.1). */
.adjuntos__item--pausa {
    border-color: var(--aviso);
}

.adjuntos__item--pausa .adjuntos__error {
    color: var(--aviso);
}

/*
   La barra de la sección 14 espera un `<span class="adjuntos__progreso">` con
   la anchura puesta desde JavaScript. Se usa `<progress>` en su lugar, con el
   mismo aspecto: el avance viaja en el atributo `value`, no en un `style` en
   línea, y así no hay que aflojar `style-src` de la CSP (.htaccess §1) a cambio
   de una barra. `.adjuntos__progreso` deja de hacer falta: ese papel lo hace el
   pseudo-elemento que el propio navegador dibuja.
*/
progress.adjuntos__barra {
    appearance: none;
    border: 0;
    width: 100%;
    color: var(--borgona);   /* respaldo donde no se apliquen los pseudo-elementos */
}

progress.adjuntos__barra::-webkit-progress-bar {
    background-color: var(--linea);
    border-radius: 2px;
}

progress.adjuntos__barra::-webkit-progress-value {
    background-color: var(--borgona);
    border-radius: 2px;
}

progress.adjuntos__barra::-moz-progress-bar {
    background-color: var(--borgona);
    border-radius: 2px;
}

/*
   A 360 px la rejilla de tres columnas de `.adjuntos__item` deja los botones
   sin sitio: el nombre se comprime hasta ser ilegible. Debajo de 480 px la
   fila pasa a dos columnas y las acciones bajan a su propia línea, alineadas a
   la izquierda para que caigan bajo el pulgar.
*/
@media (max-width: 479.98px) {
    .adjuntos__item {
        grid-template-columns: 2rem 1fr;
    }

    .adjuntos__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: 0.35rem;
    }

    .adjuntos__barra {
        grid-column: 1 / -1;
    }
}