/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the
 * later versions of this theme.
 *
 * We advise that you use use this CSS to override
 * SmartAdmin styles.
 *
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

:root {
    --btn-color: #5cb85c; /* Color base del botón */
    /* Azul */
    --azul-bajo: #7aaed9;
    --azul-medio: #338fcc;
    --azul: #0065A9;
    --azul-oscuro: #004a80;
    --azul-neon: #1877f2;

    /* Morado */
    --morado-bajo: #967bce;
    --morado-medio: #7f66cc;
    --morado: #5b36a8;
    --morado-oscuro: #3f277a;
    --morado-neon: #a56de8;

    /* Naranja */
    --naranja-bajo: #f4b56a;
    --naranja-medio: #ff8c33;
    --naranja: #e65c00;
    --naranja-oscuro: #b34700;
    --naranja-neon: #ff9f1a;

    /* Verde */
    --verde-bajo: #a2bb57;
    --verde-medio: #88bb33;
    --verde: #508500;
    --verde-oscuro: #365700;
    --verde-neon: #92D050;

    /* Rojo */
    --rojo-bajo: #d87070;
    --rojo-medio: #db4a4a;
    --rojo: #a62121;
    --rojo-oscuro: #701a1a;
    --rojo-neon: #ff5c5c;

    /* Marrón */
    --marron-bajo: #bfa974;
    --marron-medio: #b28a4a;
    --marron: #8b5e14;
    --marron-oscuro: #5a3f0a;
    --marron-neon: #c99c41;

    /* Rosado */
    --rosado-bajo: #d788c4;
    --rosado-medio: #d055b8;
    --rosado: #DA2EAD;
    --rosado-oscuro: #7a1f67;
    --rosado-neon: #ff5edd;

    /* Celeste */
    --celeste-bajo: #82c4f7;
    --celeste-medio: #4fc3f7;
    --celeste: #03a9f4;
    --celeste-oscuro: #0277bd;
    --celeste-neon: #00b8f4;

    /* Plomo */
    --plomo-bajo: #c6c6c6;
    --plomo-medio: #b0b0b0;
    --plomo: #7b7b7b;
    --plomo-oscuro: #444444;
    --plomo-neon: #a3a8a3;

    /* Negro */
    --negro: #0f0f0f;
    --blanco: #FFFFFF;
    --amarillo: #ffc000;
    --mostaza: #BF8F00;

    /* Gris muy claro */
    --gris-muy-claro: #f2f2f2;
    --gris-claro: #e4e6eb;
    --gris-medio: #606060;

    /* Estados */
    --verde-exito: #4caf50;
    --rojo-error: #f44336;
    --amarillo-alerta: #fff176;
    --azul-info: #2196f3;
    --verde-info: #128C7E;
}

body {
    font-family: 'Exo 2', sans-serif !important;
}

h1, h2, h3, h4, h5 {
    font-family: 'Exo 2', sans-serif !important;
}

.table thead tr {
    background-color: #81bef7 !important;
    color: #222 !important;
    background-image: -webkit-linear-gradient(top, #81bef7 0, #81bef7 100%);
    vertical-align: middle !important;
    text-align: center !important;
}

.table th {
    font-size: 12px;
    vertical-align: middle !important;
    text-align: center !important;
    background-color: #0065A9 !important;
    font-weight: bold;
    color: white;
}

/*.table td { font-size: 10px; }*/
/*.table tr { font-size: 10px;vertical-align: middle;text-align: center;background-color: #81bef7;color: black;}*/

table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
    background-color: #81bef7 !important;
    color: #222 !important;
}

.graficos {
    border-color: #808080;
}


/********************ESTILOS PARA LAS TABLAS (NO MODIFICAR)********************/

.tabla_base th {
    vertical-align: middle;
    text-align: center;
    background-color: #0064A9;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 0 !important;
}

.tabla_base td {
    padding: 3px;
}

.tabla_base tr {
    /*vertical-align: middle;text-align: center;background-color: #1a3a95;color: black;*/
}

.tabla_base > tbody > tr:hover {
    background: #d6f4fc !important;
}

.table-condensed.tabla_base > tbody > tr > td {
    padding: 1px 10px !important;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead > table, .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
    border-bottom: inset !important;
}

.btn_ {
    /*display: inline-block !important;*/
    /*margin-bottom: 0 !important;*/
    /*font-weight: 400 !important;*/
    /*text-align: center !important;*/
    /*vertical-align: middle !important;*/
    /*touch-action: manipulation !important;*/
    /*cursor: pointer !important;*/
    /*background-image: none !important;*/
    /*border: 1px solid transparent !important;*/
    /*white-space: nowrap !important;*/
    padding: 4px 4px !important;
    font-size: 12px !important;
    /*line-height: 1.42857143 !important;*/
    /*border-radius: 2px !important;*/
    /*-webkit-user-select: none !important;*/
    /*-moz-user-select: none !important;*/
    /*-ms-user-select: none !important;*/
    /*user-select: none !important;*/
    margin-bottom: 0.5em !important;
}

.select_ {
    width: 100% !important;
    margin-bottom: 0.5em !important;
}

.input_ {
    width: 100% !important;
}

.h1_ {
    text-align: center !important;
    font-family: 'Ubuntu Condensed';
    font-weight: bold;
    color: #000000;
    border-bottom: 0.1em solid;
    cursor: default;
}

.label_ {
    font-weight: bold !important;
}

.td_ {
    text-align: center !important;
}

.th_ {
    background-color: #0064A9 !important;
    color: #ffffff !important;
}

.center_ {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.text-truncate_ {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.fw-b {
    font-weight: bold;
}


.btn-custom {
    /*background: linear-gradient(135deg, var(--btn-color), #1285b3);*/
    background: var(--btn-color);
    color: white;
    padding: 12px 24px;
    font-size: 1.1em;
    /*font-weight: bold;*/
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(22, 166, 206, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    letter-spacing: 1px;
    margin: 5px;
}

.btn-custom:hover {
    /*background: linear-gradient(135deg, #1285b3, #0f6a91);*/
    background: var(--btn-color);
    box-shadow: 0 6px 12px rgba(22, 166, 206, 0.4);
    transform: translateY(-2px);
}

.btn-custom:disabled {
    background: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-custom-classic {
    background-color: var(--gris-muy-claro);
    color: var(--negro);
    border: 1px solid var(--gris-claro);
    max-width: 160px;
    height: 39px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
    border-radius: 5px;
}

.btn-custom-classic.active {
    background-color: var(--gris-muy-claro);
}

.btn-custom-classic > i {
    margin-right: 6px;
}

.d-none {
    display: none;
}

.m-right {
    margin-right: 6px;
}


/****************************ESTADO-MIAU******************************************/

.disable {
    pointer-events: none;
    opacity: 0.6;
}

a.notcursor {
    cursor: not-allowed;
}


/*******************/

/*!* Estilo para el botón flotante *!*/
.menu-toggle {
    position: fixed;
    left: 0; /* Ajusta la distancia desde la izquierda */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%);
    background-color: #0065A9;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);*/
    transition: all 0.3s ease;

    /* Cambio para hacer el botón vertical */
    /*writing-mode: vertical-rl; !* Cambia la dirección del texto a vertical *!*/
    text-align: center; /* Centra el texto */
    height: 100px; /* Ajusta la altura según sea necesario */
    width: 30px; /* Ajusta el ancho del botón */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100 !important;
    /*font-family: 'Changa';*/
    font-family: 'Exo 2';
}


.sin-espacios {
    line-height: 1.1 !important;
}


/*.menu-toggle::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: -10px; !* Mueve el triángulo hacia la izquierda *!*/
/*    transform: translateY(-50%); !* Centra el triángulo verticalmente *!*/
/*    width: 0;*/
/*    height: 0;*/
/*    border-top: 15px solid transparent; !* Tamaño del triángulo *!*/
/*    border-bottom: 15px solid transparent;*/
/*    border-left: 15px solid #0065A9; !* Color del triángulo (mismo que el rectángulo) *!*/
/*}*/

a.efecto-link {
    color: #333;
    text-decoration: none;
    position: relative;
}

a.efecto-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--azul-info);
    transition: 0.3s ease;
}

a.efecto-link:hover::after {
    left: 0;
    width: 100%;
}