/* ============================================================
   VARIABLES DE IDENTIDAD CORPORATIVA (QROFIN)
   ============================================================ */
:root {
    --qro-dark: #002147; /* Azul Marino */
    --qro-blue: #236192; /* Azul Medio */
    --qro-green: #00AB66; /* Verde Esmeralda */
    --qro-silver: #D0D3D4; /* Plata / Gris Claro */
}

/* ============================================================
   ESTILOS BASE DEL SISTEMA
   ============================================================ */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

/* Ajuste de enfoque (Focus) utilizando la paleta QroFin */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--qro-blue) !important;
    border-color: var(--qro-blue);
    outline: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Para DIV Login */
.contenedor {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    height: 70vh; /* Altura igual al 100% de la pantalla */
}

/* ============================================================
   CLASES UTILITARIAS QROFIN (Fondos y Textos)
   ============================================================ */
.bg-qro-dark {
    background-color: var(--qro-dark) !important;
    color: white;
}

.bg-qro-blue {
    background-color: var(--qro-blue) !important;
    color: white;
}

.bg-qro-green {
    background-color: var(--qro-green) !important;
    color: white;
}

.bg-qro-silver {
    background-color: var(--qro-silver) !important;
    color: var(--qro-dark);
}

.text-qro-dark {
    color: var(--qro-dark) !important;
}

.text-qro-blue {
    color: var(--qro-blue) !important;
}

.text-qro-green {
    color: var(--qro-green) !important;
}

/* ============================================================
   BOTONES CORPORATIVOS
   ============================================================ */
.btn-qro-dark {
    background-color: var(--qro-dark);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

    .btn-qro-dark:hover {
        background-color: var(--qro-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(35, 97, 146, 0.4);
    }

.btn-qro-green {
    background-color: var(--qro-green);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

    .btn-qro-green:hover {
        background-color: #008f55; /* Tono ligeramente más oscuro para el hover */
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 171, 102, 0.4);
    }

.btn-outline-qro {
    border: 2px solid var(--qro-blue);
    color: var(--qro-blue);
    background: transparent;
    transition: all 0.3s ease;
}

    .btn-outline-qro:hover {
        background-color: var(--qro-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(35, 97, 146, 0.3);
    }

/* ============================================================
   COMPONENTES UI Y TABLAS
   ============================================================ */
/* Sombra profunda y elegante para tarjetas */
.qro-shadow {
    box-shadow: 0 15px 35px rgba(0, 33, 71, 0.12) !important;
}

/* Encabezados con degradado para tablas */
.table-qro-header {
    background: linear-gradient(135deg, var(--qro-dark) 0%, var(--qro-blue) 100%);
    color: white;
    border-bottom: none;
}

    .table-qro-header th,
    .table-qro-header h4,
    .table-qro-header h5 {
        color: white !important;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-bottom: none !important;
        background-color: transparent !important;
    }