@font-face {
    font-family: 'Roboto';
    src: url('/Content/Roboto/static/roboto-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/Content/Roboto/static/roboto-bold.ttf') format('truetype'); /* si lo tienes */
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/Content/Roboto/static/roboto-italic.ttf') format('truetype'); /* si lo tienes */
    font-weight: 400;
    font-style: italic;
}


/* Hace que Bootstrap use Roboto por defecto */
:root {
    --bs-body-font-family: 'Roboto';
}


/* Uso global */
body {
    font-family: 'Roboto';
    font-weight: 400;
    background: #EFEFEF; /*gris*/
}

h1, h2, h3 {
    font-weight: 700;
}

em, i {
    font-style: italic;
}


/* Layout for admin dashboard skeleton */

.wrapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}

#sidebar {
    max-width: 264px;
    min-width: 264px;
    background: var(--bs-dark);
    transition: all 0.35s ease-in-out;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    width: 100%;
    background: var(--bs-dark-bg-subtle);
}

/* Sidebar Elements Style */

.sidebar-logo {
    padding: 1.15rem;
}

    .sidebar-logo a {
        color: #e9ecef;
        font-size: 1.15rem;
        font-weight: 600;
    }

.sidebar-nav {
    flex-grow: 1;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.sidebar-header {
    color: #e9ecef;
    font-size: .75rem;
    padding: 1.5rem 1.5rem .375rem;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #e9ecef;
    position: relative;
    display: block;
    font-size: 0.875rem;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.avatar {
    height: 40px;
    width: 40px;
}

.navbar-expand .navbar-nav {
    margin-left: auto;
}

.content {
    flex: 1;
    max-width: 100vw;
    width: 100vw;
}

@media (min-width:768px) {
    .content {
        max-width: auto;
        width: auto;
    }
}

.card {
    box-shadow: 0 0 .875rem 0 rgba(34, 46, 60, .05);
    margin-bottom: 24px;
}

.illustration {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}

.illustration-img {
    max-width: 150px;
    width: 100%;
}

/* Sidebar Toggle */

#sidebar.collapsed {
    margin-left: -264px;
}

/* Footer and Nav */

@media (max-width:767.98px) {

    .js-sidebar {
        margin-left: -264px;
    }

    #sidebar.collapsed {
        margin-left: 0;
    }

    .navbar,
    footer {
        width: 100vw;
    }
}

/* Theme Toggler */

.theme-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-65%);
    text-align: center;
    z-index: 10;
    right: 0;
    left: auto;
    border: none;
    background-color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .theme-toggle .fa-sun,
html[data-bs-theme="light"] .theme-toggle .fa-moon {
    cursor: pointer;
    padding: 10px;
    display: block;
    font-size: 1.25rem;
    color: #FFF;
}

html[data-bs-theme="dark"] .theme-toggle .fa-moon {
    display: none;
}

html[data-bs-theme="light"] .theme-toggle .fa-sun {
    display: none;
}

.required-label::after {
    content: " *";
    color: red;
    font-weight: bold;
}

#toastEmailSent {
    z-index: 9999 !important; /* más alto que cualquier navbar o modal */
}


.title {
    font-size: 3.5rem; /* Tamaño de letra */
    font-weight: 700; /* Negrita */
    color: #00ADD0;
    /*padding-bottom: 22px;*/
}

.btn-sec {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Tamaño de letra */
    font-weight: 700; /* Negrita */
    color: black; /* Texto blanco */
    background-color: #E8E7E7;
    border: 1px solid #C3BFBF;
    /*height: 60px;*/ /* Altura fija */
    display: flex; /* Centrado horizontal y vertical */
    align-items: center;
    justify-content: center;
    /*border: none;*/
    padding: 8px 16px; /* Espaciado horizontal */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 110px;
}
    /* Hover */
    .btn-sec:hover {
        background-color: #C8C8C8; /* Más oscuro */
    }
    /* Active */
    /*.btn-sec:active {
        background-color: #C8C8C8;*/ /* Aún más oscuro */
    /*}*/

    /* Disabled */
    /*.btn-sec:disabled {
        background-color: #C8C8C8;*/ /* Color apagado */
        /*color: #666666;
        cursor: not-allowed;
    }*/

.btn-main {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Tamaño de letra */
    font-weight: 700; /* Negrita */
    color: #ffffff; /* Texto blanco */
    background-color: #00ADD0; /* Color base */
    /*height: 60px;*/ /* Altura fija */
    display: flex; /* Centrado horizontal y vertical */
    align-items: center;
    justify-content: center;
    border: none;
    padding: 8px 16px; /* Espaciado horizontal */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 110px;
}

    /* Hover */
    .btn-main:hover {
        background-color: #0089A6; /* Más oscuro */
    }

    /* Active */
    .btn-main:active {
        background-color: #007A8C; /* Aún más oscuro */
    }

    /* Disabled */
    .btn-main:disabled {
        background-color: #b3e6ef; /* Color apagado */
        color: #666666;
        cursor: not-allowed;
    }


a.btn-main {
    text-decoration: none; /* Elimina el subrayado */
}

    a.btn-main:hover {
        text-decoration: none; /* Asegura que no aparezca al hacer hover */
    }

/* Responsive ajuste para pantallas pequeñas */
@media (max-width: 576px) {
    .btn-main {
        width: 100%; /* Ocupa todo el ancho */
        height: 50px; /* Un poco menos alto en móvil */
        font-size: 14px; /* Texto más pequeño */
    }
}

.login-div {
    background-color: #000000; /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    border-radius: 12px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    /*text-align: center;*/ /* Centrar contenido */
    /*width: 320px;*/
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.form-div {
    background-color: #FFF; /* Fondo negro */
    /*color: #ffffff;*/ /* Texto blanco */
    border-radius: 14px; /* Bordes redondeados */
    padding: 40px; /* Espaciado interno */
    margin: 40px;
    /*text-align: center;*/ /* Centrar contenido */
    /*width: 320px;*/
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.input-grey {
    background-color: #242424; /* Gris oscuro  */
    color: #ffffff;
    border-radius: 10px; /* Bordes redondeados */
    border: 1px solid #4d4d4d; /* Borde gris oscuro */
    padding: 10px;
}

    .input-grey::placeholder {
        color: #ffffff;
    }

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    background: none;
    border: none;
}


/* Base label para radios */
input[id^="CphBody_"] + label {
    display: inline-block;
    padding: 0 .5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

input[id^="CphBody_"] {
    accent-color: #00ADD0;
}

    /* Seleccionado */
    input[id^="CphBody_"]:checked + label {
        background-color: #00ADD0;
        color: #fff;
        font-weight: 600;
    }

    /*Hover y foco*/
    input[id^="CphBody_"] + label:hover {
        background-color: #e7f1ff;
    }

    input[id^="CphBody_"]:focus-visible + label {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }


/*.modal-header {
    background-color: #00ADD0;*/ /* tu color */
/*color: #fff;*/ /* opcional para el texto */
/*}*/

/* Poner los separadores | entre elementos del navbar */
.navbar .nav-piped .nav-item + .nav-item {
    position: relative;
    margin-left: 1rem; /* espacio a la izquierda del item */
    padding-left: 1rem; /* espacio para que no pegue al separador */
}

    .navbar .nav-piped .nav-item + .nav-item::before {
        content: "|";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px; /* línea real (en lugar de texto "|") */
        height: 1.6em; /* más alta que el texto; ajusta a gusto */
        background-color: rgba(255,255,255,0.6);
    }

/* Apariencia de los links sobre fondo oscuro */
.navbar .nav-link {
    color: #fff;
    /*opacity: 0.85;*/
    font-size: 1.1rem !important;
    font-weight: 600;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: #00ADD0;
    }

/* Asegurar que el toggler se vea sobre bg-dark */
.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,0.25); /* opcional */
}

.navbar-dark .navbar-toggler-icon {
    /* Por si algún reset CSS borró el background-image */
    background-image: var(--bs-navbar-toggler-icon-bg);
}

/* En móviles, quita separadores para evitar overlays y mejorar legibilidad */
@media (max-width: 991.98px) { /* breakpoint de navbar-expand-lg */
    .navbar .nav-piped .nav-item + .nav-item::before {
        display: none;
    }

    .navbar .nav-piped .nav-item + .nav-item {
        margin-left: 0;
        padding-left: 0;
    }
}

.custom-jumbotron {
    background-image: url('../img/bkimg.png');
    background-size: 100% 100%;
    background-position: center;
    min-height: 200px
    /*color: white !important;*/
}

.card-text {
    position: absolute; /* position-absolute */
    top: 0; /* top-0 */
    left: 0; /* start-0 (en LTR es left) */
    width: 100%; /* w-100 */
    /*height: 100%;*/ /* h-100 */
    display: flex; /* d-flex */
    flex-direction: column; /* flex-column */
    /*justify-content: flex-start;*/ /* justify-content-start */
    padding: 24px 40px;
    color: white; /* style="color: white" */
    font-size: clamp(8px, 2vw + 2px, 60px);
    font-weight: 600; /* style="font-weight: 600" */
}

    .card-text span {
        line-height: 1.1; /* controla lo que buscabas */
    }
/* Ajustes para móviles */
@media (max-width: 600px) {
    .card-text {
        padding: 12px 16px; /* mucho menos padding */
        font-size: 20px; /* texto más pequeño */
    }

        .card-text span {
            line-height: 1.05; /* más compacto */
        }
}

.btn-primary, .btn-danger, .btn-success {
    background-color: #00ADD0 !important; /* Color base */
    border: none;
    font-weight: 700;
}
    /* Hover */
    .btn-primary:hover, .btn-danger:hover, .btn-success:hover {
        color: #FFF;
        background-color: #0089A6 !important; /* Más oscuro */
    }

    /* Active */
    .btn-primary:active, .btn-danger:active, .btn-success:active {
        transform: translateY(1px) !important;
    }

    /* Focus */
    .btn-primary:focus, .btn-danger:focus, .btn-success:focus {
        background-color: #0089A6 !important; /* Aún más oscuro */
    }

    /* Disabled */
    .btn-primary:disabled {
        background-color: #b3e6ef; /* Color apagado */
        color: #666666;
        cursor: not-allowed;
    }

/*.btn.btn-main {
    transition: background-color 0.3s ease;    
}
    .btn.btn-main:active {
        transform: translateY(1px) !important;
    }*/

.btn.btn-main:hover {
    color: #fff;
}

.btn.btn-main:active {
    color: #fff !important;
    background-color: #00ADD0 !important;
}

.btn.btn-sec:active {
    background-color: #E8E7E7 !important;
}


.bg-info {
    background-color: #00ADD0;
}

.modal-header {
    background-color: transparent;
    color: #000;
}

    .modal-header .modal-title {
        font-weight: 700;
    }

div.dt-container div.dt-info {
    padding-top: 0px;
    padding-bottom: 8px;
}

#dt-search-0 {
    width: 100%;
    max-width: 420px;
    padding: 8px 12px 8px 38px; /* espacio para la lupa */
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    font-size: 14px;
    outline: none;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    /* ícono lupa */
    background-image: url("/img/icon-search.svg");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}

    #dt-search-0:focus {
        border-color: #bbb;
        background-color: #fff;
    }

label[for="dt-search-0"] {
    display: none;
}

.dt-paging .page-item {
    padding-left: 4px !important;
    padding-right: 4px !important;
   
}

.dt-buttons .dt-button.btn-main {
    background-color: #00ADD0;
    color: #fff;
    display: flex;
    border-radius: 8px;
    border: none;
}

    /* Hover */
    .dt-buttons .dt-button.btn-main:hover {
        background-color: #0089A6 !important; /* Más oscuro */
    }

    /* Active */
    .dt-buttons .dt-button.btn-main:active {
        background-color: #007A8C !important; /* Aún más oscuro */
    }