/* =====================================================
    TEMA FODI
    Paleta del isotipo (rompecabezas de 4 colores) aplicada sobre Bootstrap 5.3.
    Se carga después de bootstrap.min.css en todas las pantallas.

    Los colores de marca puros (--fodi-*) se usan en superficies, íconos y acentos.
    Para texto y botones con texto blanco se usan las variantes "-oscuro", que
    cumplen contraste AA (≥ 4.5:1) sobre blanco.
===================================================== */

:root {
    /* Marca */
    --fodi-naranja: #f38b30;
    --fodi-celeste: #2ab7af;
    --fodi-verde: #9bc31a;
    --fodi-violeta: #b15ea1;

    --fodi-naranja-oscuro: #a4530b;
    --fodi-celeste-oscuro: #13807a;
    --fodi-verde-oscuro: #55700a;
    --fodi-violeta-oscuro: #8a3f7b;

    --fodi-naranja-suave: #fdf0e3;
    --fodi-celeste-suave: #e3f5f4;
    --fodi-verde-suave: #f1f7dd;
    --fodi-violeta-suave: #f6eaf4;

    /* Neutros (fondo claro como el sitio de INDI, footer casi negro) */
    --fodi-tinta: #1b2529;
    --fodi-texto: #2e3a3f;
    --fodi-texto-suave: #5b6770;
    --fodi-borde: #e2e7e9;
    --fodi-borde-fuerte: #cfd7da;
    --fodi-fondo: #f5f7f8;
    --fodi-superficie: #ffffff;
    --fodi-oscuro: #004A82;

    --fodi-fuente-texto: var(--font-dm-sans, "DM Sans"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fodi-fuente-titulos: var(--font-public-sans, "Public Sans"), var(--fodi-fuente-texto);

    --fodi-sombra-sm: 0 1px 2px rgba(21, 27, 30, 0.06);
    --fodi-sombra: 0 1px 3px rgba(21, 27, 30, 0.06), 0 6px 16px rgba(21, 27, 30, 0.06);
    --fodi-sombra-lg: 0 10px 40px rgba(21, 27, 30, 0.14);

    --fodi-franja: linear-gradient(
        90deg,
        var(--fodi-naranja) 0 25%,
        var(--fodi-celeste) 25% 50%,
        var(--fodi-verde) 50% 75%,
        var(--fodi-violeta) 75% 100%
    );

    /* ---------- Variables de Bootstrap ---------- */
    --bs-body-font-family: var(--fodi-fuente-texto);
    --bs-body-font-size: 0.9375rem;
    --bs-body-color: var(--fodi-texto);
    --bs-body-color-rgb: 46, 58, 63;
    --bs-body-bg: var(--fodi-superficie);
    --bs-emphasis-color: var(--fodi-tinta);
    --bs-secondary-color: var(--fodi-texto-suave);
    --bs-secondary-bg: #eef2f3;
    --bs-tertiary-bg: var(--fodi-fondo);
    --bs-heading-color: var(--fodi-tinta);

    --bs-primary: var(--fodi-celeste-oscuro);
    --bs-primary-rgb: 19, 128, 122;
    --bs-primary-text-emphasis: #0b4d49;
    --bs-primary-bg-subtle: var(--fodi-celeste-suave);
    --bs-primary-border-subtle: #a9e0dc;

    --bs-success: #4f7f0c;
    --bs-success-rgb: 79, 127, 12;
    --bs-success-text-emphasis: #3d5f08;
    --bs-success-bg-subtle: var(--fodi-verde-suave);
    --bs-success-border-subtle: #d4e79a;

    --bs-warning: #d9731a;
    --bs-warning-rgb: 217, 115, 26;
    --bs-warning-text-emphasis: var(--fodi-naranja-oscuro);
    --bs-warning-bg-subtle: var(--fodi-naranja-suave);
    --bs-warning-border-subtle: #f8c99d;

    --bs-info: var(--fodi-violeta-oscuro);
    --bs-info-rgb: 138, 63, 123;
    --bs-info-text-emphasis: #6b2f5f;
    --bs-info-bg-subtle: var(--fodi-violeta-suave);
    --bs-info-border-subtle: #e2bfdb;

    --bs-danger: #c63b3b;
    --bs-danger-rgb: 198, 59, 59;
    --bs-danger-text-emphasis: #8f2626;
    --bs-danger-bg-subtle: #fbeaea;
    --bs-danger-border-subtle: #f1c0c0;

    --bs-light-rgb: 245, 247, 248;

    --bs-link-color: var(--fodi-celeste-oscuro);
    --bs-link-color-rgb: 19, 128, 122;
    --bs-link-hover-color: #0f6964;
    --bs-link-hover-color-rgb: 15, 105, 100;

    --bs-border-color: var(--fodi-borde);
    --bs-border-color-translucent: rgba(21, 27, 30, 0.1);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;

    --bs-focus-ring-color: rgba(42, 183, 175, 0.3);
}

body {
    font-family: var(--fodi-fuente-texto);
    color: var(--fodi-texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fodi-fuente-titulos);
    color: var(--fodi-tinta);
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(42, 183, 175, 0.25);
}

/* Contenedor del logo (components/LogoFodi): muestra solo la zona del dibujo */
.logo-fodi {
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 0;
}

.logo-fodi img {
    display: block;
}

/* =====================================================
    BOTONES
===================================================== */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 40px;
    white-space: nowrap;
}

.btn-sm {
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.8125rem;
    min-height: 32px;
}

.btn-lg {
    min-height: 48px;
}

.btn-link {
    min-height: 0;
}

.btn-primary {
    --bs-btn-bg: var(--fodi-celeste-oscuro);
    --bs-btn-border-color: var(--fodi-celeste-oscuro);
    --bs-btn-hover-bg: #0f6964;
    --bs-btn-hover-border-color: #0f6964;
    --bs-btn-active-bg: #0c5854;
    --bs-btn-active-border-color: #0c5854;
    --bs-btn-disabled-bg: var(--fodi-celeste-oscuro);
    --bs-btn-disabled-border-color: var(--fodi-celeste-oscuro);
}

.btn-outline-primary {
    --bs-btn-color: var(--fodi-celeste-oscuro);
    --bs-btn-border-color: var(--fodi-celeste-oscuro);
    --bs-btn-hover-bg: var(--fodi-celeste-oscuro);
    --bs-btn-hover-border-color: var(--fodi-celeste-oscuro);
    --bs-btn-active-bg: #0f6964;
    --bs-btn-active-border-color: #0f6964;
}

.btn-outline-secondary {
    --bs-btn-color: var(--fodi-texto);
    --bs-btn-bg: var(--fodi-superficie);
    --bs-btn-border-color: var(--fodi-borde-fuerte);
    --bs-btn-hover-color: var(--fodi-tinta);
    --bs-btn-hover-bg: var(--fodi-fondo);
    --bs-btn-hover-border-color: #b9c3c7;
    --bs-btn-active-color: var(--fodi-tinta);
    --bs-btn-active-bg: #eaeef0;
    --bs-btn-active-border-color: #b9c3c7;
    --bs-btn-disabled-color: var(--fodi-texto-suave);
    --bs-btn-disabled-bg: var(--fodi-superficie);
    --bs-btn-disabled-border-color: var(--fodi-borde);
}

.btn-light {
    --bs-btn-bg: var(--fodi-fondo);
    --bs-btn-border-color: var(--fodi-borde);
    --bs-btn-hover-bg: #eaeef0;
    --bs-btn-hover-border-color: var(--fodi-borde-fuerte);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: #b7d36a;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: #3d5f08;
    --bs-btn-active-border-color: #3d5f08;
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: #3d5f08;
    --bs-btn-hover-border-color: #3d5f08;
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: #e7a3a3;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: #a52f2f;
    --bs-btn-active-border-color: #a52f2f;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: #a52f2f;
    --bs-btn-hover-border-color: #a52f2f;
}

/* =====================================================
    FORMULARIOS
===================================================== */

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fodi-tinta);
    margin-bottom: 0.375rem;
}

.form-text {
    color: var(--fodi-texto-suave);
    font-size: 0.8125rem;
}

.form-control,
.form-select {
    min-height: 40px;
    font-size: 0.9375rem;
    border-color: var(--fodi-borde-fuerte);
    color: var(--fodi-tinta);
}

.form-control-sm,
.form-select-sm {
    min-height: 32px;
    font-size: 0.8125rem;
}

.form-control::placeholder {
    color: #97a3a9;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fodi-celeste);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.input-group-text {
    border-color: var(--fodi-borde-fuerte);
    color: var(--fodi-texto-suave);
    background: var(--fodi-fondo);
}

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

.form-check-input:focus {
    border-color: var(--fodi-celeste);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--fodi-celeste-oscuro);
    border-color: var(--fodi-celeste-oscuro);
}

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.375em;
    margin-top: 0.05em;
    cursor: pointer;
}

.form-switch .form-check-input:focus: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='%232ab7af'/%3e%3c/svg%3e");
}

.form-check-label {
    cursor: pointer;
}

/* =====================================================
    TABLAS
===================================================== */

.table {
    --bs-table-hover-bg: rgba(42, 183, 175, 0.05);
    --bs-table-border-color: var(--fodi-borde);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table th {
    white-space: nowrap;
}

/* Tablas con filtros: el ancho de cada columna lo define su <colgroup> y no el contenido,
   así al filtrar o paginar las columnas no se reacomodan. En pantallas angostas la tabla
   no baja de --tabla-ancho-min y se desplaza en horizontal. */
.tabla-fija {
    table-layout: fixed;
    width: 100%;
    min-width: var(--tabla-ancho-min, 900px);
}

.tabla-fija > :not(caption) > * > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Variante en la que el contenido se ve completo: las celdas pueden pasar a otra línea en vez
   de cortarse. Lo que va dentro de .celda-2-lineas se corta recién en la segunda línea, para
   que un valor exageradamente largo no estire la fila. Los encabezados siguen en una línea. */
/* .table.tabla-celdas-completas para ganarle al nowrap de pantallas chicas (más abajo) */
.table.tabla-celdas-completas > tbody > tr > td {
    white-space: normal;
    overflow-wrap: break-word;
}

.celda-2-lineas {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.celda-2-lineas .badge {
    white-space: normal;
    text-align: left;
}

/* el mensaje de "sin resultados" ocupa todas las columnas y puede ocupar varias líneas */
.tabla-fija td[colspan] {
    white-space: normal;
}

/* columna de acciones (botones al final de la fila) */
.tabla-fija td:last-child:has(.btn) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* En pantallas chicas las filas conservan su alto: la tabla se desplaza en horizontal
   en lugar de partir cada celda en varias líneas. */
@media (max-width: 767.98px) {
    .table-responsive .table td {
        white-space: nowrap;
    }
}

.table > thead.table-light,
.table-light {
    --bs-table-bg: var(--fodi-fondo);
    --bs-table-color: var(--fodi-texto-suave);
    --bs-table-border-color: var(--fodi-borde);
}

.table > thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table-responsive {
    background: var(--fodi-superficie);
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
    COMPONENTES
===================================================== */

.card {
    --bs-card-border-color: var(--fodi-borde);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    box-shadow: var(--fodi-sombra-sm);
}

.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    border-radius: 999px;
}

.text-bg-light {
    background-color: var(--fodi-fondo) !important;
    color: var(--fodi-texto) !important;
}

.alert {
    --bs-alert-border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--fodi-borde);
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-link-active-bg: var(--fodi-celeste-oscuro);
    --bs-dropdown-link-hover-bg: var(--fodi-fondo);
    --bs-dropdown-font-size: 0.875rem;
    box-shadow: var(--fodi-sombra-lg);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding: 0.5rem 0.75rem;
}

.modal-content {
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-border-color: transparent;
    box-shadow: var(--fodi-sombra-lg);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--fodi-oscuro);
    --bs-backdrop-opacity: 0.45;
}

.progress {
    --bs-progress-bar-bg: var(--fodi-celeste);
    --bs-progress-bg: #e8eef0;
    --bs-progress-border-radius: 999px;
}

.pagination {
    --bs-pagination-color: var(--fodi-texto);
    --bs-pagination-hover-color: var(--fodi-celeste-oscuro);
    --bs-pagination-active-bg: var(--fodi-celeste-oscuro);
    --bs-pagination-active-border-color: var(--fodi-celeste-oscuro);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--fodi-celeste-oscuro);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--fodi-celeste-oscuro);
}

.spinner-border.text-primary {
    color: var(--fodi-celeste) !important;
}

/* Foco visible y consistente para navegación con teclado */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--fodi-celeste);
    outline-offset: 2px;
}

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