/* ===========================
   VARIABLES INSTITUCIONALES
=========================== */

:root {
    --color-primary: #7e3236; /* marrón */
    --color-accent: #f6c005; /* ocre */
}

/* ===========================
   TEXTO GENERAL
=========================== */

body,
.fi-body {
    color: var(--color-primary);
}

/* ===========================
   TITULOS
=========================== */

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-cell-label {
    color: var(--color-accent);
    font-weight: 600;
}

/* ===========================
   CARDS / SECCIONES
=========================== */

.fi-section,
.fi-card {
    border-color: #7e3236;
}

.fi-btn-primary {
    background-color: #7e3236;
    color: #f6c005;
}

.fi-btn-primary:hover {
    background-color: #6a2a2d;
    color: #f6c005;
}

/* ===========================
   FONDO DE LOGIN
=========================== */

.fi-simple-main-ctn {
    background-image: url("/images/cuerpoHumano.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Esto hace que la imagen se quede quieta al hacer scroll */
    min-height: 100vh;
    width: 100%;
}

/* ===========================
   BADGES PERSONALIZADOS
=========================== */
.contador-asistencias .fi-badge-label {
    font-size: 0.85rem !important;
    font-weight: 700;
}

.contador-asistencias .fi-badge {
    font-size: 1.8rem !important;
    font-weight: 700;
    padding: 0.5rem 1.25rem !important;
}

/* ===========================
   LOGO RESPONSIVO
=========================== */

/* Topbar: ocultar en mobile */
@media (max-width: 767px) {
    .fi-sidebar-header,
    .topbar-logo {
        display: none !important;
    }
}

/* Sidebar: ocultar en desktop, mostrar en mobile */
.sidebar-logo-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .sidebar-logo-mobile {
        display: block !important;
        width: 100%;
    }

    .sidebar-logo-mobile img {
        width: 100%;
        height: 65px;
        object-fit: cover;
        object-position: center;
        display: block;
    }
}