/*
 * Horas Extras — Empresas FT
 *
 * Ajustes propios sobre Bootstrap 5.
 *
 * Sin logo y sin fotografía (2026-08-01). La identidad son tres cosas: un fondo
 * corporativo de tono piedra, un filete rojo en el borde superior de cada
 * pantalla, y superficies claras de borde definido apoyadas encima. El rojo de
 * la marca es el único acento y se reserva para la acción principal de cada
 * pantalla: si todo fuera rojo, nada destacaría.
 *
 * Los neutros tienen una leve inclinación cálida (no gris puro) para que
 * convivan con el rojo sin que la pantalla se vea azulada.
 */

:root {
    /* Marca */
    --ft-tinta: #17130f;
    --ft-tinta-suave: #574f47;
    --ft-rojo: #b31217;
    --ft-rojo-oscuro: #8f0e12;
    --ft-rojo-tenue: rgba(179, 18, 23, 0.12);

    /* Superficies */
    --ft-superficie: #fdfcfa;
    --ft-superficie-2: #f4f1ec;
    --ft-borde: #d8d2c9;
    --ft-borde-fuerte: #b9b1a5;

    /* Sombra en dos capas: contacto + difusión. */
    --ft-sombra: 0 1px 2px rgba(23, 19, 15, 0.08), 0 8px 24px rgba(23, 19, 15, 0.1);
    --ft-sombra-alta: 0 2px 4px rgba(23, 19, 15, 0.1), 0 16px 40px rgba(23, 19, 15, 0.16);

    /* Tipografía: una serif para los títulos, la sans del sistema para leer. */
    --ft-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

    /* Paleta de gráficos: estados, siempre acompañados de etiqueta directa. */
    --chart-pendiente: #b8860b;
    --chart-aprobado: #1f7a3d;
    --chart-rechazado: #b3251f;
    --chart-secuencial: #2a5d8f;
    --chart-tinta: var(--ft-tinta);
    --chart-tinta-suave: var(--ft-tinta-suave);
    --chart-grilla: #ddd7cd;
    --chart-base: #b9b1a5;

    /* Bootstrap: el primario es la tinta; el rojo es el acento, aparte. */
    --bs-primary: #17130f;
    --bs-primary-rgb: 23, 19, 15;
    --bs-body-color: #17130f;
    --bs-body-font-size: 0.975rem;
    --bs-border-color: #d8d2c9;
    --bs-link-color: #8f0e12;
    --bs-link-color-rgb: 143, 14, 18;
    --bs-link-hover-color: #b31217;
    --bs-secondary-color: #574f47;
    --bs-emphasis-color: #17130f;
}

/*
 * Fondo corporativo: un tono piedra templado, plano, con un degradado apenas
 * perceptible que aclara hacia el centro para que el contenido no quede aplanado
 * contra el borde. `fixed` para que no se desplace al hacer scroll.
 *
 * El tono es cálido a propósito: un gris neutro junto al rojo de la marca se ve
 * sucio, y uno azulado la vuelve fría. Esta es la superficie sobre la que se
 * apoyan las tarjetas, así que tiene que ser más oscura que ellas — si fueran
 * del mismo valor, las tarjetas desaparecerían.
 */
body {
    background-color: #e8e3db;
    background-image: radial-gradient(
        120% 90% at 50% 0%,
        #f1ede6 0%,
        #e8e3db 55%,
        #ded8ce 100%
    );
    background-attachment: fixed;
}

/* ---------------------------------------------------------- tipografía --- */

h1, .h1, h2, .h2 {
    font-family: var(--ft-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ft-tinta);
}

h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 600;
    color: var(--ft-tinta);
}

/* Etiqueta breve en versalitas sobre un título. */
.eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ft-rojo);
}

.text-muted {
    color: var(--ft-tinta-suave) !important;
}

/* ---------------------------------------------------------------- marca --- */

/*
 * Sin logo ni fotografía. La marca se sostiene con un filete rojo fijo en el
 * borde superior —presente en todas las pantallas, sin ocupar espacio ni tapar
 * contenido— y con el rojo reservado a la acción principal.
 */
.brand-rule {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1040;
    background: linear-gradient(to right, var(--ft-rojo), var(--ft-rojo-oscuro));
}

/* -------------------------------------------------------------- botones --- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.1rem;
}

.btn-primary {
    --bs-btn-bg: var(--ft-tinta);
    --bs-btn-border-color: var(--ft-tinta);
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-disabled-bg: var(--ft-tinta);
    --bs-btn-disabled-border-color: var(--ft-tinta);
}

/* La acción principal de cada pantalla. Una sola por vista. */
.btn-brand {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ft-rojo);
    --bs-btn-border-color: var(--ft-rojo);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ft-rojo-oscuro);
    --bs-btn-hover-border-color: var(--ft-rojo-oscuro);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #7a0c10;
    --bs-btn-active-border-color: #7a0c10;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--ft-rojo);
    --bs-btn-disabled-border-color: var(--ft-rojo);
}

/*
 * Los outline van con borde firme y fondo blanco propio: sobre el tono del
 * fondo, un botón sin relleno se pierde. Era lo que pasaba con "Ver Resumen".
 */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-color: var(--ft-tinta);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--ft-borde-fuerte);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ft-tinta);
    --bs-btn-hover-border-color: var(--ft-tinta);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ft-tinta);
    --bs-btn-active-border-color: var(--ft-tinta);
}

.btn-outline-primary {
    --bs-btn-border-color: var(--ft-tinta);
}

.btn-light {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--ft-borde-fuerte);
    --bs-btn-color: var(--ft-tinta);
    --bs-btn-hover-bg: var(--ft-superficie-2);
    --bs-btn-hover-border-color: var(--ft-borde-fuerte);
    --bs-btn-hover-color: var(--ft-tinta);
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--ft-rojo-tenue);
    outline: 2px solid var(--ft-rojo);
    outline-offset: 1px;
}

.text-primary {
    color: var(--ft-rojo) !important;
}

/* Barra de navegación al pie de una pantalla: volver, saltar, salir. */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--ft-borde);
}

.page-nav__spacer {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------- tarjetas --- */

.card {
    background-color: var(--ft-superficie);
    border-color: var(--ft-borde);
    border-radius: 0.65rem;
    box-shadow: var(--ft-sombra);
}

.card-header {
    background-color: var(--ft-superficie-2);
    border-bottom-color: var(--ft-borde);
    font-weight: 600;
}

/* Tarjetas que son un enlace (elegir formulario o carga masiva). */
.option-card {
    color: inherit;
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.option-card:hover,
.option-card:focus-visible {
    border-color: var(--ft-rojo);
    transform: translateY(-2px);
    box-shadow: var(--ft-sombra-alta);
}

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

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

.text-justify {
    text-align: justify;
}

/* ------------------------------------------------------------ formulario --- */

.form-label {
    font-weight: 500;
    color: var(--ft-tinta);
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    border-color: var(--ft-borde-fuerte);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ft-rojo);
    box-shadow: 0 0 0 0.2rem var(--ft-rojo-tenue);
}

/*
 * Campos que la aplicación completa sola a partir del catálogo. Se ven
 * distintos de un campo deshabilitado cualquiera: no es que no se pueda
 * escribir, es que el dato ya se sabe.
 */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ft-superficie-2);
    color: var(--ft-tinta);
    opacity: 1;
}

.field-auto {
    background-color: var(--ft-superficie-2) !important;
    border-style: dashed;
    color: var(--ft-tinta) !important;
}

/* Aviso de a quién reconoció la aplicación por su correo. */
.identity-note {
    background-color: #ffffff;
    border: 1px solid var(--ft-borde);
    border-left: 3px solid var(--ft-rojo);
    border-radius: 0.4rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------- filtros --- */

/*
 * Los filtros del Resumen van en oscuro: quedan fuera de una tarjeta, así que
 * en blanco se confundirían con el fondo. Con la tinta se leen siempre igual y
 * se distinguen de los campos de un formulario.
 */
.filter-select {
    background-color: var(--ft-tinta);
    color: #ffffff;
    border-color: rgba(179, 18, 23, 0.55);
}

.filter-select:focus {
    background-color: var(--ft-tinta);
    color: #ffffff;
    border-color: var(--ft-rojo);
    box-shadow: 0 0 0 0.2rem var(--ft-rojo-tenue);
}

.filter-select option {
    background-color: #ffffff;
    color: var(--ft-tinta);
}

#filters .form-label {
    color: var(--ft-tinta);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------- indicadores --- */

.kpi {
    border-top: 3px solid var(--ft-borde-fuerte);
}

.kpi--aprobado { border-top-color: var(--chart-aprobado); }
.kpi--pendiente { border-top-color: var(--chart-pendiente); }
.kpi--rechazado { border-top-color: var(--chart-rechazado); }

/* -------------------------------------------------------------- gráficos --- */

.chart {
    width: 100%;
    overflow-x: auto;
}

.chart svg {
    min-width: 100%;
}

.chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
}

.chart__legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ft-tinta-suave);
}

.chart__legend-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

.chart__empty {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ft-tinta-suave);
}

/* --------------------------------------------------------------- estados --- */

.badge-estado-Pendiente {
    background-color: #fdf0d0;
    color: #6b4c00;
    border: 1px solid #d9ab3e;
}

.badge-estado-Aprobado {
    background-color: #dcefe2;
    color: #14532a;
    border: 1px solid #4f9d6b;
}

.badge-estado-Rechazado {
    background-color: #f8dedd;
    color: #7a1a16;
    border: 1px solid #cf6b66;
}

/* ---------------------------------------------------------------- tablas --- */

/* Números en columnas alineados por dígito. */
.table td,
.table th {
    font-variant-numeric: tabular-nums;
}

.table > thead {
    --bs-table-bg: var(--ft-superficie-2);
    --bs-table-color: var(--ft-tinta);
}

.table > thead th {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom-width: 2px;
    border-bottom-color: var(--ft-borde-fuerte);
}

/* ------------------------------------------------------- barra superior --- */

/* Va en el layout, así que aparece igual en todas las hojas: es lo que hace que
   se lean como una sola aplicación y no como pantallas sueltas. */
.topbar {
    background: var(--ft-superficie-2);
    border-bottom: 1px solid var(--ft-borde);
}

.topbar__home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ft-display);
    font-size: 1.05rem;
    color: var(--ft-tinta);
    text-decoration: none;
}

.topbar__home:hover,
.topbar__home:focus-visible {
    color: var(--ft-rojo-oscuro);
}

.topbar__user {
    font-size: 0.85rem;
    line-height: 1.25;
}

.topbar__role {
    color: var(--ft-tinta-suave);
    font-size: 0.78rem;
}

/* ------------------------------------------------ accesos de la portada --- */

/* Las tres tarjetas de la pantalla de inicio. Se apoyan en .option-card, que ya
   existía para elegir entre formulario y carga masiva: mismo gesto, misma
   respuesta al foco. */
.acceso {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    background: var(--ft-superficie);
    border: 1px solid var(--ft-borde);
    border-radius: 0.75rem;
    color: var(--ft-tinta);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.acceso:hover,
.acceso:focus-visible {
    border-color: var(--ft-rojo);
    box-shadow: var(--ft-sombra);
    transform: translateY(-1px);
    color: var(--ft-tinta);
}

.acceso .bi {
    font-size: 1.4rem;
    color: var(--ft-rojo);
    margin-bottom: 0.35rem;
}

.acceso__titulo {
    font-weight: 600;
}

.acceso__detalle {
    font-size: 0.85rem;
    color: var(--ft-tinta-suave);
}

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

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