/* =========================================================
   1. FONDO GENERAL DE LA PÁGINA
   ========================================================= */

/* Color de fondo de todas las páginas */
body {
    background-image: url("img/CUERPO.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* =========================================================
   2. BARRA DE NAVEGACIÓN SUPERIOR
   DALAI | Clientes | Dashboard | Deudores | etc.
   ========================================================= */

/* Fondo completo de la barra superior */
.navbar {
    background-color: #0F172A !important;
}


/* ---------------------------------------------------------
   NOMBRE / LOGO "DALAI"
   --------------------------------------------------------- */

/* Color y tamaño del texto DALAI */
.navbar .navbar-brand {
    color: #94A3B8 !important;
    font-size: 20px;
    font-weight: 600;
}

/* Color de DALAI cuando pasas el mouse */
.navbar .navbar-brand:hover {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   OPCIONES DEL MENÚ
   Clientes, Dashboard, Deudores, Machotes, Usuarios, Salir
   --------------------------------------------------------- */

/* Color normal de las opciones */
.navbar .nav-link {
    color: #d6d6d6 !important;
    font-size: 15px;
}

/* Color cuando pasas el mouse sobre una opción */
.navbar .nav-link:hover {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   CORREO DEL USUARIO QUE INICIÓ SESIÓN
   --------------------------------------------------------- */

.navbar .navbar-text {
    color: #aeb4ba !important;
}


/* ---------------------------------------------------------
   ESPACIADO DE LA BARRA
   Aumenta o disminuye la altura de la barra superior
   --------------------------------------------------------- */

.navbar {
    padding-top: 12px;
    padding-bottom: 12px;
}


/* =========================================================
   3. TARJETAS / CUADROS
   ========================================================= */

/*
   Se utiliza en prácticamente todos los cuadros blancos
   del sistema.
*/
.card {
    border: 0;
    border-radius: 15px;
}


/* =========================================================
   4. ETIQUETAS DE FORMULARIOS
   ========================================================= */

/*
   Hace más gruesos textos como:
   Nombre
   Correo
   Estatus
   Machote
   etc.
*/
.form-label {
    font-weight: 600;
}


/* =========================================================
   5. CAMPOS [[VARIABLE]]
   ========================================================= */

/*
   Estilo de textos como:
   [[ACREEDOR_NOMBRE]]
   [[DEUDA_TOTAL_USD]]
*/
code {
    color: #111111;
    background: #eef0f3;

    padding: 3px 6px;

    border-radius: 5px;
}


/* =========================================================
   6. TABLAS
   ========================================================= */

/*
   Espacio interno de las celdas de las tablas.
   Aumentar .85rem hace las filas más altas.
*/
.table > :not(caption) > * > * {
    padding: .85rem .75rem;
}


/* =========================================================
   7. TARJETA DEL ASOCIADO
   ========================================================= */

/*
   Línea amarilla que identifica que la sección
   del asociado es opcional.
*/
.optional-card {
    border-left: 4px solid #ffc107;
}


/* =========================================================
   8. HISTORIAL DE CONTRATOS
   ========================================================= */

/*
   Línea que separa cada contrato generado.
*/
.history-item {
    border-bottom: 1px solid #e9ecef;
    padding: .65rem 0;
}


/*
   Quita la línea del último elemento.
*/
.history-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   9. CUADROS DEL DASHBOARD
   ========================================================= */

/*
   Cuadros donde aparecen los estatus y
   número de clientes.
*/
.status-card {
    color: inherit;
    transition: .15s ease;
}


/*
   Hace que el cuadro se levante ligeramente
   cuando pasas el mouse.
*/
.status-card:hover {
    transform: translateY(-2px);
}


/*
   Número grande del Dashboard.

   Ejemplo:

   25
   En negociación
*/
.status-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}


/*
   Nombre del estatus debajo del número.
*/
.status-label {
    margin-top: .5rem;
    color: #6c757d;
}


/* =========================================================
   10. PANTALLA DE INICIO DE SESIÓN
   ========================================================= */

/*
   Fondo y posición del cuadro de Login.
*/
.auth-body {
    min-height: 100vh;

    display: grid;
    place-items: center;

    background-image: url("img/LOGUIN.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 20px;
}


/*
   Ancho máximo del cuadro de inicio de sesión.
*/
.auth-card {
    width: min(430px, 100%);
}


/* =========================================================
   11. BOTONES DEL SISTEMA
   ========================================================= */


/* ---------------------------------------------------------
   BOTÓN: GENERAR WORD
   --------------------------------------------------------- */

.btn-generar-word {
    /* Color del botón */
    background-color: #0d6efd;

    /* Color de las letras */
    color: #ffffff;

    /* Color del borde */
    border: 1px solid #0d6efd;

    /* Bordes redondeados */
    border-radius: 8px;

    /* Grosor de la letra */
    font-weight: 600;

    /* Animación al pasar el mouse */
    transition: 0.2s ease;
}


/* Generar Word cuando pasas el mouse */
.btn-generar-word:hover {
    background-color: #0F172A;
    border-color: #0F172A;
    color: #ffffff;

    /* Lo levanta ligeramente */
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   BOTÓN: GENERAR PDF
   --------------------------------------------------------- */

.btn-generar-pdf {
    /* Color del botón */
    background-color: #dc3545;

    /* Color de las letras */
    color: #ffffff;

    /* Color del borde */
    border: 1px solid #dc3545;

    /* Bordes redondeados */
    border-radius: 8px;

    /* Grosor de letra */
    font-weight: 600;

    transition: 0.2s ease;
}


/* Generar PDF cuando pasas el mouse */
.btn-generar-pdf:hover {
    background-color: #E5237C;
    border-color: #E5237C;
    color: #ffffff;

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   BOTÓN: CARGAR / ACTUALIZAR EXCEL
   --------------------------------------------------------- */

.btn-cargar-excel {
    /* Color del botón */
    background-color: #1E293B;

    /* Color de las letras */
    color: #ffffff;

    /* Color del borde */
    border: 1px solid #1E293B;

    /* Bordes redondeados */
    border-radius: 8px;

    /* Grosor de letra */
    font-weight: 600;

    transition: 0.2s ease;
}


/* Cargar / Actualizar cuando pasas el mouse */
.btn-cargar-excel:hover {
    background-color: #0F172A ;
    border-color: #0F172A;
    color: #ffffff;

    transform: translateY(-1px);
}