/* INESA — hoja de estilo
 *
 * Mismo esquema de siempre (azul corporativo, menú lateral, tarjetas blancas
 * sobre fondo gris), con un acabado más amable: más aire, esquinas suaves,
 * profundidad ligera y tipografía algo mayor.
 */

:root {
    /* Color */
    --inesa-azul: #002E5C;
    --inesa-azul-oscuro: #00203F;
    --inesa-azul-claro: #1B5E9E;
    --inesa-fondo: #F4F6F9;
    --inesa-superficie: #FFFFFF;
    --inesa-borde: #E4E8EE;
    --inesa-borde-suave: #EEF1F5;
    --inesa-texto: #1D2430;
    /* Texto secundario: al menos 4,5:1 sobre todos los fondos claros que se
       usan (blanco, gris de la página y gris de las cabeceras). */
    --inesa-gris: #5B6577;
    /* Solo para adornos y bordes, nunca para texto (2,6:1). */
    --inesa-gris-claro: #98A2B3;
    --inesa-cabecera-tabla: #F7F9FC;
    --inesa-hover: #F5F8FC;

    /* Escala semántica: correcto / regular / malo, más el neutro y el
       informativo. Se usa igual en etiquetas, textos, filas y barras, para que
       un color signifique siempre lo mismo en toda la aplicación. */
    --ok-fondo: #D3F8DF;
    --ok-borde: #8FE5AE;
    --ok-texto: #05603A;
    --ok-fuerte: #0E9F6E;

    --aviso-fondo: #FDF0C8;
    --aviso-borde: #F5CF63;
    --aviso-texto: #8A5300;
    --aviso-fuerte: #D9800A;

    --mal-fondo: #FEE0DE;
    --mal-borde: #F9AFA9;
    --mal-texto: #B42318;
    --mal-fuerte: #D92D20;

    --info-fondo: #E0EDFB;
    --info-borde: #A9CDF2;
    --info-texto: #1A4E8A;

    --neutro-fondo: #EDEFF3;
    --neutro-borde: #DADEE6;
    --neutro-texto: #4B5565;

    /* Forma */
    --inesa-radio: 8px;
    --inesa-radio-lg: 12px;
    --inesa-sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --inesa-sombra-media: 0 4px 10px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.04);
    --inesa-anillo: 0 0 0 3px rgba(0, 46, 92, 0.14);

    /* Medidas */
    --inesa-barra-alto: 56px;
    --inesa-menu-ancho: 240px;

    /* Bootstrap */
    --bs-primary: #002E5C;
    --bs-primary-rgb: 0, 46, 92;
    --bs-link-color: #002E5C;
    --bs-link-color-rgb: 0, 46, 92;
    --bs-link-hover-color: #00203F;
    --bs-link-hover-color-rgb: 0, 32, 63;
    --bs-border-color: #E4E8EE;
    --bs-body-color: #1D2430;
    --bs-body-bg: #F4F6F9;
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
    --bs-body-font-size: 0.9375rem;
    /* El gris y el rosa de Bootstrap (text-secondary, link-secondary, <code>)
       no llegan a 4,5:1 sobre el fondo gris de la página. */
    --bs-secondary-rgb: 94, 102, 110;
    --bs-code-color: #B5246A;
}

/* --- Base --- */

/* Al saltar a un ancla (por ejemplo, del «Total por trabajador» de Km y gastos
   al desglose de cada uno), que la barra superior fija no tape el título. */
html {
    scroll-padding-top: calc(var(--inesa-barra-alto) + 1rem);
}

body {
    background-color: var(--inesa-fondo);
    color: var(--inesa-texto);
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
    transition: color 0.12s ease;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--inesa-azul-claro);
    outline-offset: 2px;
}

/* Los enlaces dentro de un texto se subrayan: no basta con el color para
   distinguirlos (WCAG 1.4.1). */
p a:not(.btn),
.form-text a,
.alert a:not(.btn),
.enlaces-en-texto a {
    text-decoration: underline;
}

/* «Saltar al contenido»: invisible hasta que se llega con el tabulador. */
.saltar-contenido:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: var(--inesa-azul);
    border-radius: var(--inesa-radio);
    box-shadow: var(--inesa-sombra-media);
}

::selection {
    background-color: rgba(0, 46, 92, 0.15);
}

/* --- Barra superior --- */

.barra-superior {
    height: var(--inesa-barra-alto);
    background-color: var(--inesa-azul);
    color: #fff;
    z-index: 1035;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.barra-superior .marca,
.barra-superior .marca:hover {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
}

.boton-usuario {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 0.28rem 0.85rem 0.28rem 0.3rem;
    font-size: 0.875rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Texto en una sola línea con puntos suspensivos, solo de tableta para arriba:
   en el móvil se parte en varias líneas para que la tabla quepa. */
@media (min-width: 768px) {
    .truncar-md {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Hitos debajo del nombre (móvil): el «Siguiente: …» se parte en líneas en
   vez de cortarse, que si no ensancha la tabla. */
.hitos-partido .text-truncate {
    white-space: normal;
    overflow: visible;
}

/* En el móvil no cabe el nombre: queda el círculo con las iniciales (el
   nombre completo sale al abrir el menú). */
@media (max-width: 575.98px) {
    .boton-usuario {
        padding-right: 0.55rem;
    }

    .boton-usuario > .text-truncate {
        /* Oculto a la vista, pero el lector de pantalla sigue leyendo el nombre. */
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }
}

.boton-usuario:hover,
.boton-usuario:focus,
.boton-usuario.show {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
}

/* Sobre el azul de la barra, el foco en blanco para que se vea. */
.boton-usuario:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Círculo con las iniciales del empleado */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.ficha-usuario {
    min-width: 14rem;
}

/* --- Menú lateral --- */

.menu-lateral {
    --bs-offcanvas-width: 250px;
    --bs-offcanvas-bg: var(--inesa-azul);
    --bs-offcanvas-color: #fff;
    --bs-offcanvas-border-color: transparent;
}

.menu-lateral .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.menu-navegacion {
    background-color: var(--inesa-azul);
    padding: 0.75rem 0 1.5rem;
    min-height: 100%;
}

.menu-grupo + .menu-grupo {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-titulo {
    color: rgba(255, 255, 255, 0.65); /* 6,5:1 sobre el azul */
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 1.35rem 0.45rem;
}

.menu-enlace {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.1rem 0.6rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    border-radius: var(--inesa-radio);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-enlace i {
    width: 1.15rem;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}

.menu-enlace:hover,
.menu-enlace:focus {
    background-color: rgba(255, 255, 255, 0.09);
    color: #fff;
    text-decoration: none;
}

.menu-enlace:hover i {
    color: rgba(255, 255, 255, 0.9);
}

.menu-enlace.activo {
    background-color: #fff;
    color: var(--inesa-azul);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.menu-enlace.activo i {
    color: var(--inesa-azul);
}

@media (min-width: 992px) {
    .menu-lateral {
        position: fixed;
        top: var(--inesa-barra-alto);
        left: 0;
        bottom: 0;
        width: var(--inesa-menu-ancho);
        z-index: 1030;
    }

    .menu-lateral > .offcanvas-body {
        display: block;
        padding: 0;
        height: 100%;
        overflow-y: auto;
    }
}

/* --- Contenido --- */

.contenido {
    padding: calc(var(--inesa-barra-alto) + 1.5rem) 1rem 3rem;
}

@media (min-width: 992px) {
    .contenido {
        margin-left: var(--inesa-menu-ancho);
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.cabecera-pagina {
    margin-bottom: 1.35rem;
}

.titulo-pagina {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--inesa-texto);
    margin: 0;
}

.subtitulo-pagina {
    color: var(--inesa-gris);
    font-size: 0.875rem;
    margin: 0.2rem 0 0;
}

/* --- Tarjetas y paneles --- */

.card {
    background-color: var(--inesa-superficie);
    border: 1px solid var(--inesa-borde);
    border-radius: var(--inesa-radio-lg);
    box-shadow: var(--inesa-sombra);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--inesa-borde-suave);
    border-radius: var(--inesa-radio-lg) var(--inesa-radio-lg) 0 0 !important;
    padding: 0.85rem 1.15rem;
}

.card-body {
    padding: 1.15rem;
}

/* Es un <h2> (para quien navega por encabezados) con el aspecto de siempre. */
.panel-titulo {
    margin: 0;
    line-height: 1.4;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--inesa-texto);
}

/* Tarjeta que es un enlace (portada de configuración) */
a.card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.card:hover {
    border-color: #C8D4E3;
    box-shadow: var(--inesa-sombra-media);
    transform: translateY(-1px);
    text-decoration: none;
}

/* --- Indicadores (KPI) --- */

.kpi {
    height: 100%;
}

.kpi .kpi-cuerpo {
    padding: 1rem 1.15rem;
}

@media (max-width: 575.98px) {
    .kpi .kpi-cuerpo {
        padding: 0.8rem 0.9rem;
    }
}

/* En caja normal y no en mayúsculas: en una columna estrecha, "COSTE IMPUTADO"
   en versalitas con espaciado se partía a mitad de palabra. */
.kpi-titulo {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--inesa-gris);
    margin: 0 0 0.3rem;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* La cifra no se parte nunca, así que se encoge con el ancho disponible:
   con un tamaño fijo se cortaba dentro de la tarjeta en pantallas pequeñas. */
.kpi-valor {
    font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--inesa-texto);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Tablas --- */

.table {
    --bs-table-color: var(--inesa-texto);
    --bs-table-border-color: var(--inesa-borde-suave);
    margin-bottom: 0;
    font-size: 0.9rem;
}

.table > :not(caption) > * > * {
    padding: 0.62rem 0.8rem;
}

.table > thead th {
    background-color: var(--inesa-cabecera-tabla);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--inesa-gris);
    white-space: nowrap;
    border-bottom-color: var(--inesa-borde);
}

.table > thead th a {
    color: inherit;
}

.table-hover > tbody > tr {
    transition: background-color 0.12s ease;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--inesa-hover);
}

.table tfoot td,
.table tfoot th {
    font-weight: 600;
    background-color: var(--inesa-cabecera-tabla);
    border-top: 1px solid var(--inesa-borde);
}

/* Tablas de muchas columnas de cifras (informe de rentabilidad): menos aire
   entre columnas para que el nombre de la primera no se parta tanto. */
.table.tabla-compacta > :not(caption) > * > * {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

/* La tabla ocupa todo el ancho de la tarjeta sin doble borde */
.card > .tabla-scroll > .table > :not(caption) > * > *:first-child,
.card > .tabla-scroll > .table > tfoot > tr > *:first-child {
    padding-left: 1.15rem;
}

.card > .tabla-scroll > .table > :not(caption) > * > *:last-child,
.card > .tabla-scroll > .table > tfoot > tr > *:last-child {
    padding-right: 1.15rem;
}

.card > .tabla-scroll:first-child > .table > thead > tr > *:first-child {
    border-top-left-radius: var(--inesa-radio-lg);
}

.card > .tabla-scroll:first-child > .table > thead > tr > *:last-child {
    border-top-right-radius: var(--inesa-radio-lg);
}

.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Con posición propia, lo que va en posición absoluta dentro de la tabla (el
   texto oculto «Acciones» de las cabeceras vacías, .visually-hidden) se queda
   dentro de la caja que se desplaza. Si no, en el móvil ensanchaba la página
   entera cuando la tabla no cabía. */
.tabla-scroll,
.table-responsive {
    position: relative;
}

.numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Formularios y filtros --- */

.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--inesa-gris);
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    font-size: 0.9rem;
    border-color: var(--inesa-borde);
    border-radius: var(--inesa-radio);
    padding: 0.45rem 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.875rem;
    padding: 0.38rem 0.65rem;
    border-radius: var(--inesa-radio);
}

/* El relleno de arriba quita el hueco que Bootstrap reserva a la flecha de los
   desplegables, y en los estrechos el texto quedaba debajo de la flecha. */
.form-select { padding-right: 2.1rem; }
.form-select-sm { padding-right: 1.9rem; }

/* Tabla de tareas editable de la ficha del proyecto: el nombre no se estrecha
   por debajo de lo que se lee. Si no cabe, la tabla se desplaza en horizontal
   dentro de su .tabla-scroll. */
.tabla-tareas input[name="nombre"] { min-width: 11rem; }

.form-control::placeholder {
    color: #667085; /* 4,6:1 sobre el gris de los campos */
}

.form-control:hover,
.form-select:hover {
    border-color: #CFD6E0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--inesa-azul-claro);
    box-shadow: var(--inesa-anillo);
}

.form-check-input {
    border-color: #C6CDD8;
}

.form-check-input:checked {
    background-color: var(--inesa-azul);
    border-color: var(--inesa-azul);
}

.form-check-input:focus {
    border-color: var(--inesa-azul-claro);
    box-shadow: var(--inesa-anillo);
}

.form-text {
    font-size: 0.8rem;
    color: var(--inesa-gris);
    margin-top: 0.3rem;
}

.filtros {
    background-color: var(--inesa-superficie);
}

.filtros .card-body {
    padding: 1rem 1.15rem;
}

.enlace-limpiar {
    font-size: 0.875rem;
    color: var(--inesa-gris);
}

.enlace-limpiar:hover {
    color: var(--inesa-texto);
}

/* Atajos de periodo */
.atajos-periodo .btn {
    --bs-btn-bg: var(--inesa-cabecera-tabla);
    --bs-btn-border-color: var(--inesa-borde);
    --bs-btn-color: var(--inesa-gris);
    --bs-btn-hover-bg: var(--inesa-hover);
    --bs-btn-hover-color: var(--inesa-texto);
    --bs-btn-font-size: 0.8rem;
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-padding-y: 0.25rem;
    border-radius: 999px;
}

.atajos-periodo .btn.activo {
    background-color: var(--inesa-azul);
    border-color: var(--inesa-azul);
    color: #fff;
}

/* Resumen de los filtros activos */
.filtros-activos {
    border-top: 1px solid var(--inesa-borde-suave);
    padding-top: 0.75rem;
}

.filtro-activo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--info-fondo);
    border: 1px solid var(--info-borde);
    color: var(--info-texto);
    border-radius: 999px;
    padding: 0.2rem 0.3rem 0.2rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.filtro-quitar {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 1;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
    border-radius: 999px;
    cursor: pointer;
}

.filtro-quitar:hover {
    opacity: 1;
    background-color: rgba(26, 78, 138, 0.12);
}

/* --- Botones --- */

.btn {
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--inesa-radio);
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-padding-y: 0.42rem;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sm {
    --bs-btn-font-size: 0.85rem;
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-border-radius: var(--inesa-radio);
}

.btn-primary {
    --bs-btn-bg: var(--inesa-azul);
    --bs-btn-border-color: var(--inesa-azul);
    --bs-btn-hover-bg: var(--inesa-azul-oscuro);
    --bs-btn-hover-border-color: var(--inesa-azul-oscuro);
    --bs-btn-active-bg: var(--inesa-azul-oscuro);
    --bs-btn-active-border-color: var(--inesa-azul-oscuro);
    --bs-btn-disabled-bg: var(--inesa-azul);
    --bs-btn-disabled-border-color: var(--inesa-azul);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

.btn-primary:hover {
    box-shadow: 0 2px 6px rgba(0, 46, 92, 0.28);
}

.btn-outline-secondary {
    --bs-btn-color: var(--inesa-texto);
    --bs-btn-border-color: var(--inesa-borde);
    --bs-btn-bg: var(--inesa-superficie);
    --bs-btn-hover-color: var(--inesa-texto);
    --bs-btn-hover-bg: var(--inesa-hover);
    --bs-btn-hover-border-color: #CFD6E0;
    --bs-btn-active-color: var(--inesa-texto);
    --bs-btn-active-bg: #EDF1F6;
    --bs-btn-active-border-color: #CFD6E0;
}

.btn-outline-primary {
    --bs-btn-color: var(--inesa-azul);
    --bs-btn-border-color: var(--inesa-azul);
    --bs-btn-hover-bg: var(--inesa-azul);
    --bs-btn-hover-border-color: var(--inesa-azul);
    --bs-btn-active-bg: var(--inesa-azul-oscuro);
    --bs-btn-active-border-color: var(--inesa-azul-oscuro);
    --bs-btn-disabled-color: var(--inesa-azul);
    --bs-btn-disabled-border-color: var(--inesa-azul);
}

/* --- Etiquetas de estado --- */

.badge {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    padding: 0.32em 0.7em;
    border-radius: 999px;
}

/* Etiqueta de estado: color de fondo, borde a juego y un punto del color
   fuerte. El punto ayuda a distinguirlas de un vistazo y también a quien no
   separa bien el verde del rojo. */
.etiqueta-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.28em 0.7em 0.28em 0.6em;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.punto-estado {
    width: 0.44em;
    height: 0.44em;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}

.etiqueta-estado.nivel-ok {
    background-color: var(--ok-fondo);
    border-color: var(--ok-borde);
    color: var(--ok-texto);
}

.etiqueta-estado.nivel-aviso {
    background-color: var(--aviso-fondo);
    border-color: var(--aviso-borde);
    color: var(--aviso-texto);
}

.etiqueta-estado.nivel-mal {
    background-color: var(--mal-fondo);
    border-color: var(--mal-borde);
    color: var(--mal-texto);
}

.etiqueta-estado.nivel-info {
    background-color: var(--info-fondo);
    border-color: var(--info-borde);
    color: var(--info-texto);
}

.etiqueta-estado.nivel-neutro {
    background-color: var(--neutro-fondo);
    border-color: var(--neutro-borde);
    color: var(--neutro-texto);
}

/* --- La misma escala en textos, filas y barras --- */

.texto-ok { color: var(--ok-texto) !important; }
.texto-aviso { color: var(--aviso-texto) !important; }
.texto-mal { color: var(--mal-texto) !important; }

.text-danger { color: var(--mal-texto) !important; }
.text-success { color: var(--ok-texto) !important; }
.text-warning { color: var(--aviso-texto) !important; }

.table > tbody > tr.table-danger > * {
    --bs-table-bg: var(--mal-fondo);
    --bs-table-color: var(--mal-texto);
}

.table > tbody > tr.table-warning > * {
    --bs-table-bg: var(--aviso-fondo);
    --bs-table-color: var(--aviso-texto);
}

.table > tbody > tr.table-success > * {
    --bs-table-bg: var(--ok-fondo);
    --bs-table-color: var(--ok-texto);
}

.progress-bar.bg-success { background-color: var(--ok-fuerte) !important; }
.progress-bar.bg-warning { background-color: var(--aviso-fuerte) !important; }
.progress-bar.bg-danger { background-color: var(--mal-fuerte) !important; }

/* --- Progreso --- */

.progress {
    --bs-progress-bg: #EDF0F5;
    --bs-progress-bar-bg: var(--inesa-azul);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    border-radius: 999px;
    transition: width 0.4s ease;
}

.barra-progreso-texto {
    min-width: 3.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}

/* --- Paginación --- */

.pagination {
    --bs-pagination-color: var(--inesa-gris);
    --bs-pagination-bg: var(--inesa-superficie);
    --bs-pagination-hover-color: var(--inesa-azul);
    --bs-pagination-hover-bg: var(--inesa-hover);
    --bs-pagination-focus-box-shadow: var(--inesa-anillo);
    --bs-pagination-active-bg: var(--inesa-azul);
    --bs-pagination-active-border-color: var(--inesa-azul);
    --bs-pagination-border-color: var(--inesa-borde);
    --bs-pagination-border-radius: var(--inesa-radio);
    --bs-pagination-font-size: 0.85rem;
    margin-bottom: 0;
    gap: 0.25rem;
}

.pagination .page-link {
    border-radius: var(--inesa-radio) !important;
}

/* --- Estados vacíos --- */

.sin-datos {
    font-size: 0.9rem;
    color: var(--inesa-gris);
    padding: 2.25rem 1rem;
}

/* --- Pestañas --- */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--inesa-borde);
    gap: 0.15rem;
}

.nav-tabs .nav-link {
    color: var(--inesa-gris);
    font-size: 0.9rem;
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 0.95rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--inesa-texto);
    border-bottom-color: #CFD6E0;
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--inesa-azul);
    font-weight: 600;
    background-color: transparent;
    border-bottom-color: var(--inesa-azul);
}

.tab-content {
    border-radius: 0 0 var(--inesa-radio-lg) var(--inesa-radio-lg);
    border-color: var(--inesa-borde) !important;
}

/* --- Desplegables y avisos --- */

.dropdown-menu {
    font-size: 0.9rem;
    border-color: var(--inesa-borde);
    border-radius: var(--inesa-radio-lg);
    box-shadow: var(--inesa-sombra-media);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: var(--inesa-radio);
    padding: 0.45rem 0.7rem;
}

.alert {
    border-radius: var(--inesa-radio-lg);
    font-size: 0.9rem;
    padding: 0.8rem 1.05rem;
    border-width: 1px;
}

/* Bootstrap reserva sitio a la derecha para el aspa; el padding de arriba
   lo anularía y el texto quedaría debajo del botón de cerrar. */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    padding: 1rem;
}

/* --- Ayudas al pasar el ratón --- */

.tooltip {
    --bs-tooltip-bg: #101828;
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-border-radius: var(--inesa-radio);
    --bs-tooltip-font-size: 0.8rem;
    --bs-tooltip-max-width: 22rem;
    --bs-tooltip-padding-x: 0.65rem;
    --bs-tooltip-padding-y: 0.45rem;
}

.tooltip .tooltip-inner {
    text-align: left;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.24);
}

/* Señal discreta de que un dato tiene explicación */
[data-ayuda] {
    cursor: help;
}

.table [data-ayuda],
.kpi [data-ayuda] {
    cursor: help;
}

.kpi-titulo[data-ayuda] {
    text-decoration: underline dotted var(--inesa-gris-claro);
    text-underline-offset: 0.2em;
}

/* --- Buscador de clientes del alta de proyectos --- */

.buscador-cliente {
    position: relative;
}

.sugerencias-cliente {
    --bs-list-group-bg: var(--inesa-superficie);
    --bs-list-group-active-bg: var(--inesa-azul);
    --bs-list-group-active-border-color: var(--inesa-azul);
    --bs-list-group-action-hover-bg: var(--inesa-hover);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    max-height: 18rem;
    overflow-y: auto;
    border-radius: var(--inesa-radio);
    box-shadow: var(--inesa-sombra-media);
}

.sugerencias-cliente .list-group-item {
    font-size: 0.9rem;
    cursor: pointer;
}

.sugerencias-cliente .list-group-item.active .text-body-secondary {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Favoritos: estrella del listado y de la ficha --- */

.boton-favorito {
    /* Al menos 3:1 sobre blanco: la estrella vacía también tiene que verse. */
    color: var(--inesa-gris);
    text-decoration: none;
}

.boton-favorito.btn-link {
    padding: 0 0.25rem;
    font-size: 1.05rem;
    line-height: 1;
}

.boton-favorito.activo,
.boton-favorito:hover {
    color: var(--inesa-azul);
}

.boton-favorito.activo .bi-star-fill {
    color: #A87200; /* 4,1:1 sobre blanco */
}

/* --- Hitos --- */

.avance-hitos {
    min-width: 8rem;
}

.lista-hitos .hito-hecho {
    background: var(--inesa-fondo);
}

/* --- Rentabilidad: detalles de margen y de facturación --- */

.tabla-detalle th {
    font-weight: 500;
}

.tabla-detalle .fila-total th,
.tabla-detalle .fila-total td {
    border-top: 2px solid var(--inesa-azul);
    font-weight: 700;
}

/* Formularios plegables (<details>): van sin JavaScript, también en Chrome 49. */
.formulario-plegable > summary {
    list-style: none;
}

.formulario-plegable > summary::-webkit-details-marker {
    display: none;
}

.formulario-plegable[open] > summary {
    margin-bottom: 0.25rem;
}

/* --- Página de acceso --- */

.pagina-invitado {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(0, 46, 92, 0.08), transparent 60%),
        var(--inesa-fondo);
}

.caja-invitado {
    width: 100%;
    max-width: 23rem;
}

.caja-invitado .card {
    border-radius: var(--inesa-radio-lg);
    box-shadow: var(--inesa-sombra-media);
}

.caja-invitado .card-body {
    padding: 1.75rem;
}

.marca-invitado {
    text-align: center;
    margin-bottom: 1.35rem;
}

.marca-invitado h1 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--inesa-azul);
    margin: 0;
}

/* --- Logo (components/logo.blade.php) --- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1;
    vertical-align: middle;
}

.logo svg {
    width: 1.65rem;
    height: 1.65rem;
    flex: none;
}

.logo .wordmark {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.logo-grande {
    gap: 0.75rem;
}

.logo-grande svg {
    width: 2.6rem;
    height: 2.6rem;
}

.logo-grande .wordmark {
    font-size: 1.9rem;
}

/* --- Menos movimiento si el sistema lo pide --- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Impresión --- */

@media print {
    .barra-superior,
    .menu-lateral,
    .acciones-pagina,
    .filtros,
    .pagination {
        display: none !important;
    }

    .contenido {
        margin-left: 0;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border-color: #D0D5DD;
    }
}

/* Destino de «Saltar al contenido»: recibe el foco sin marcarse entero. */
.contenido:focus {
    outline: none;
}

/* --- Accesibilidad (WCAG 2.1 AA) --- */

/* Foco visible en todo lo que se maneja con el teclado. Bootstrap lo cambia
   por una sombra azul clara que casi no se ve (menos de 2:1). */
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus-visible,
.list-group-item-action:focus-visible {
    outline: 2px solid var(--inesa-azul-claro);
    outline-offset: 2px;
    box-shadow: none;
}

/* Sobre el azul de la barra superior y del menú, en blanco. */
.barra-superior :focus-visible,
.menu-lateral :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* El borde de los campos, las casillas y los interruptores tiene que verse
   (3:1 como mínimo, WCAG 1.4.11). El resto de bordes sigue siendo suave. */
.form-control,
.form-select,
.form-check-input {
    border-color: #7D8799;
}

.form-control:hover,
.form-select:hover {
    border-color: #5B6577;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--inesa-azul-claro);
}

.form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235B6577'/%3e%3c/svg%3e");
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--mal-texto);
}

/* Botón de borrar: el rojo de Bootstrap se queda en 4,2:1 sobre el gris. */
.btn-outline-danger {
    --bs-btn-color: var(--mal-texto);
    --bs-btn-border-color: var(--mal-texto);
    --bs-btn-hover-bg: var(--mal-texto);
    --bs-btn-hover-border-color: var(--mal-texto);
    --bs-btn-active-bg: var(--mal-texto);
    --bs-btn-active-border-color: var(--mal-texto);
}

.text-danger,
.link-danger,
.invalid-feedback {
    color: var(--mal-texto) !important;
}

/* Con el campo activo manda el azul del foco, aunque el ratón esté encima. */
.form-control:focus,
.form-select:focus {
    border-color: var(--inesa-azul-claro);
}

/* Aviso de sesión a punto de caducar (js/accesibilidad.js) */
.aviso-sesion {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2000;
    max-width: 32rem;
    margin: 0 0 0 auto;
}