/* Estilos base de toda la app: tipografia, sistema de sombras, tarjetas,
   botones de marca (.btn-ssf*) y utilidades compartidas.
   Extraidos del <style> inline que estaba en layout/head.php. */
/* Inter para la interfaz; Swiss 721 se reserva para los títulos.
   -0.011em de tracking compensa que Inter es apenas más ancha que
   Helvetica en cuerpos chicos. */
body {
    font-family: 'Inter', 'Swiss 721 SWA', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, sans-serif;
    font-size: .95rem;
    letter-spacing: -.011em;
    color: #1e293b;
    background-color: #f4f6f9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Los títulos conservan la fuente de marca. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Swiss 721 SWA', 'Inter', sans-serif;
    letter-spacing: -.02em;
    color: #0f172a;
}

/* Un titulo dentro de un contenedor de texto claro tiene que heredar ese
   color, no imponer el gris oscuro de arriba.

   Sin esto, un <h3> dentro de un .card-header.text-white sobre fondo azul
   salia NEGRO: la regla de arriba es mas especifica que la clase .text-white
   del contenedor padre, que solo aplica al contenedor. Pasaba en cualquier
   encabezado sobre fondo oscuro del sistema. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6,
.text-light h1, .text-light h2, .text-light h3,
.text-light h4, .text-light h5, .text-light h6,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: inherit;
}

/* Cifras de ancho fijo en todo lo que muestre números: importes,
   contadores, KPIs. Sin esto las columnas de plata se desalinean
   porque el "1" es más angosto que el resto de los dígitos. */
.num,
.kpi-value,
table.dataTable td.num,
.font-numerica {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.bloqueado {
    user-select: none;
}

/* Sistema de sombras reutilizable: 3 niveles de profundidad para usar
   en toda la app en vez de valores de box-shadow sueltos por página. */
:root {
    --sombra-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --sombra-md: 0 2px 6px rgba(15, 23, 42, .07), 0 10px 20px rgba(15, 23, 42, .08);
    --sombra-lg: 0 10px 26px rgba(15, 23, 42, .18), 0 3px 8px rgba(15, 23, 42, .08);
}

/* Look "premium" consistente para toda la app: tarjetas con esquinas
   redondeadas y sombra suave en vez del borde plano por defecto de
   Bootstrap, más una transición pareja para hovers/estados.
   Se pisa la variable de Bootstrap (no solo "border-radius" directo)
   para que card-header/card-footer hereden el mismo redondeo interno. */
.card {
    --bs-card-border-radius: 16px;
    --bs-card-border-width: 0;
    box-shadow: var(--sombra-md);
}

/* Botones "elevados": sombra en reposo, más profunda al pasar el mouse
   (con un pequeño levantamiento) y más chata al hacer clic. */
.btn {
    box-shadow: var(--sombra-sm);
}

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

.btn:active {
    box-shadow: var(--sombra-sm);
    transform: translateY(0);
}

.alert {
    box-shadow: var(--sombra-sm);
}

a,
.btn,
.card,
.nav-link {
    transition: all .18s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp .4s ease-out backwards;
}

.btn-ssf {
    background-color: var(--color-primario);
    color: white;
    border: 2px solid var(--color-primario);
    border-radius: 10px;
}

.btn-ssf:hover {
    background-color: lightgray;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}

.btn-ssf-danger {
    background-color: var(--color-secundario);
    color: white;
    border: 2px solid var(--color-secundario);
}

.btn-ssf-danger:hover {
    background-color: lightgray;
    color: var(--color-secundario);
    border: 2px solid var(--color-secundario);
}

.btn-ssf-success {
    border: 2px solid green;
}

.btn-ssf-success:hover {
    background-color: white;
    color: green;
    border: 2px solid green;
}

.btn-ssf-info {
    background-color: gray;
    color: white;
    border: 2px solid gray;
}

.btn-ssf-info:hover {
    background-color: lightgray;
    color: gray;
    border: 2px solid gray;
}

.container {
    min-height: 78vh;
}

/* ---------------------------------------------------------------------
   Estado de carga por bloque

   Estaba solo en el CSS del dashboard de Deudas. Se mueve acá porque
   ahora lo usa también Dashboard > Home: los dos reemplazaron el modal
   de SweetAlert que tapaba la pantalla entera mientras se consultaba.
   --------------------------------------------------------------------- */
/* ---- Estados de carga por bloque -------------------------------
   Reemplazan al Swal que bloqueaba toda la pantalla 12 segundos.
   Cada tarjeta muestra que está trabajando y el resto sigue legible. */
.esta-cargando {
    position: relative;
    min-height: 120px;
    pointer-events: none;
}

.esta-cargando::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .65) 50%,
            rgba(255, 255, 255, 0) 100%),
        #eef1f5;
    background-size: 200% 100%;
    animation: brillo 1.2s ease-in-out infinite;
    border-radius: 14px;
}

@keyframes brillo {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .esta-cargando::after { animation: none; }
}

/* ---------------------------------------------------------------------
   Columnas de tabla que se esconden en pantallas chicas

   Las tablas del sistema tienen entre 7 y 11 columnas: en celular
   desbordan tanto que hay que arrastrar de costado para llegar a los
   botones de accion. Se marcan con esta clase las columnas menos
   consultadas de un vistazo; el detalle de cada registro las muestra
   todas igual.

   !important porque DataTables escribe estilos inline en las celdas.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .col-oculta-sm {
        display: none !important;
    }
}