:root {
      /* Cabecera */
      --header-bg-primary: #008182;
      --header-bg-accent: #008182;
      --header-text-main: #1E293B;
      --header-text-sub: #E1F0FF;
      --header-time-bg: rgba(255, 255, 255, 0.95);
      --header-user-bg: #F5F1E5;

      /* Cuerpos y Contenedores */
      --bg-main: #F4F7FA;
      --bg-card: #FFFFFF;
      --card-shadow: 0 10px 25px -5px rgba(0, 100, 225, 0.08);
      --card-shadow-hover: 0 10px 25px -5px #A2DBDB;
      --hover-secondary: #A2DBDB;

      /* Tipografía */
      --text-title: #1E293B;
      --text-muted: #64748B;

      /* Botones */
      --btn-bg: #A2DBDB;
      --btn-text: #1E293B;
      --btn-bg-hover: #2563EB;
      --btn-text-hover: #FFFFFF;

      --primary-color: #008182;
      --primary-hover: #155e75;
      --bg-body: #f8fafc;
      --card-radius: 12px;


        --blue-primary: #3b82f6; /* El azul de tu marca */
        --blue-soft: rgba(59, 130, 246, 0.2);
        --dark-blue: #1e3a8a; /* Un azul más oscuro para contrastes */
        --page-bg: #f1f5f9; /* El fondo gris claro de tu base */
        --white: #ffffff;
        --text-dark: #1f2937;
        --black-transparent: rgba(0, 0, 0, 0.4);
        --border-radius-soft: 12px; /* Un radio suave para bordes */
        --border-radius-pill: 50px;

    }

    body {
      background-color: var(--bg-main);
      color: var(--text-title);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Estilos Header */
    .main-header {
      background: linear-gradient(135deg, #bfeded85, #008182A6);
      color: var(--header-text-main) !important;
    }

    .header-inicion {
        background: linear-gradient(135deg, var(--header-bg-primary), var(--header-bg-accent));
        height: 150px;
    }

    .welcome-text h1 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--header-text-main);
    }

    .welcome-text p {
      font-size: 0.9rem;
      color: var(--header-text-sub);
    }

    .time-badge {
      background-color: var(--header-time-bg) !important;
      color: var(--text-title) !important;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      border-radius: 8px !important;
    }

    .user-menu-btn {
      background-color: var(--header-user-bg) !important;
      color: var(--header-text-main) !important;
      /*border-radius: 20px;*/
      /* font-weight: 600 !important; */
      font-size: 0.9rem !important;
    }

    .user-menu-btn:hover {
      color: var(--header-text-main);
      opacity: 0.9;
    }

    /* Estilos Tarjetas */
    .custom-card {
      background-color: var(--bg-card);
      border: none;
      border-radius: 16px;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .custom-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--card-shadow-hover) !important;
      border: 1px solid var(--header-bg-accent);
    }

    .card-illustration {
      max-width: 180px;
      height: auto;
    }

    .card-title-custom {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-title);
    }

    .btn-card {
      background-color: var(--btn-bg) !important;
      color: var(--btn-text) !important;
      border: none !important;
      border-radius: 20px !important;
      font-weight: 600 !important;
      font-size: 0.9rem !important;
      padding: 0.5rem 1.25rem !important;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .btn-card:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-text-hover);
      text-decoration: none;
    }

    /* Footer */
    .main-footer {
      color: var(--text-muted);
      font-size: 0.85rem;
    }


    a {
        text-decoration: none !important;
    }

.hoverImageWrapper {
    display: inline-block;
    transition: background 0.5s ease-in-out;
    border-radius: 25px;
    overflow: hidden;
}
/*.hoverImageWrapper:hover {
    background: #00000096 !important;
}*/

.hoverImageWrapper .hoverImage {
    position: relative;
    align-self: stretch;
    /* height: 10em;
    width: 16em; */
    flex-shrink: 0;
    /* object-fit: cover; */
    max-width: 100%;
    transition: transform 0.5s ease-in-out;
}
.hoverImageWrapper:hover .hoverImage {
    transform: scale(1.1);
    opacity: 0.3;
}
.hoverImageWrapper .icon-file {
    transition: transform 0.5s ease-in-out;
}

.hoverImageWrapper:hover .icon-file {
    transform: scale(1.1);
    opacity: 0.9;
}

.bg-main {
    /* background-color: #1ba0f8;
    margin-left: 2em;
    margin-right: 2em; */
    /*background-image: url("/img/bg_main.png");*/
    /*!* Prevent the image from repeating *!*/
    /*background-repeat: no-repeat;*/
    /*!* Scale the image to cover the entire background area *!*/
    /*background-size: cover;*/
    /*!* Center the image *!*/
    /*background-position: bottom;*/
    /*!* Keep the background fixed during scroll (optional parallax effect) *!*/
    /*background-attachment: fixed;*/
}
/* .main-conent {
    background: #f5f5f5;
    border-radius: 0 0 20px 20px;
    height: calc(100vh - 150px);
}

.nav-header {
    left: 2em;
    right: 2em;
} */

.pointer {
    cursor: pointer;
}

/**
 * CSS DATA TABLES
 */
.dataTables_length select {
    width: 100px !important;
    display: inline-block !important;
}

/* Alinea el buscador para que no tenga margen inferior innecesario */
.dataTables_filter label {
    display: flex;
}

.dataTables_filter input {
    margin-left: 10px;
    /*min-width: 200px;*/
    /*width: 200px;*/
}

.dataTables_empty {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: bold; /* Opcional: para resaltar el aviso */
    color: #6c757d;    /* Opcional: color gris suave de Bootstrap */
    padding: 20px !important;
}

.content-filter .btn-search { height: 30px;}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 0.3 !important;
    content: "" !important; /* Si usas la librería estándar */
    margin-right: 20px;
}

/* 3. Icono cuando la columna se puede ordenar (Estado neutro) */
table.dataTable thead th.sorting:before {
    content: "\f0dc" !important; /* Icono de flechas arriba/abajo */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* 4. Icono cuando está en orden ASCENDENTE (Arriba) */
table.dataTable thead th.sorting_asc:before {
    content: "\f0de" !important; /* Flecha hacia arriba */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: black; /* Color azul para resaltar */
}

/* 5. Icono cuando está en orden DESCENDENTE (Abajo) */
table.dataTable thead th.sorting_desc:before {
    content: "\f0dd" !important; /* Flecha hacia abajo */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: black;
}
/**
 * END CSS DATATABLES
 */

.bold {
    font-weight: bold;
}
.lbl_campo {
    color: var(--text-title);
    font-size: 1.1rem;
}

.text_base {
    color: var(--text-title);
}

.alert-info_
{
    background-color: #ABD3FFA6 !important;
    color: #0153c3;
}

.table .thead-light th {
    background-color: #A2DBDB !important;
    color: #1E293B !important;
}

.select2-container .select2-selection--single {
    height: auto !important;
}


caption {
    caption-side: top !important;
}


.input-group-text {
    background-color: #A2DBDB;
    border: 1px solid #008182;
    border-radius: 0.25rem;
    color: #1E293B;
    font-weight: bold;
}

.form-control,
.custom-select
{
    border: 1px solid #008182;
}

.bounce {
    animation: bounce 1.5s ease infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-0.4em);}
    60% {transform: translateY(-0.2em);}
}


#toast-container>div
{
    opacity: 1 !important;
}

.fieldset,
.fieldset legend
{
    border-radius: 15px;
    border: 1px solid #58a5d8b0;
}

.table tbody tr td,
.table tbody tr th {
    vertical-align: middle;
}
/* Configuración general de la página */
.page-bg {
    background-color: var(--bg-main) !important;
}

/* Tarjetas de Métricas */
.metric-card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}
.metric-card:hover {
    transform: translateY(-2px);
}
.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
/* Botones personalizados */
.btn-medical {
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 18px;
    border: none;
}
.btn-medical:hover {
    background-color: var(--primary-hover);
    color: #ffffff;
}

.btn-medical:active,
.btn-medical:focus {
    box-shadow: 0 0 0 0.2rem var(--hover-secondary) !important;
    background-color: var(--primary-hover) !important;
    color: #ffffff;
}


.card-custom {
    background-color: var(--white);
    border: none !important;
    border-radius: var(--border-radius-soft) !important;
}

.bg-medical {
    background-color: var(--primary-color) !important;
}
.border-medical {
    border: 1px solid var(--primary-color);
}


.btn-slot:not(.disabled):hover,
.ds-cal-day:not(.empty):hover
{
    background-color: var(--hover-secondary) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.ds-cal-day.today .ds-cal-daynum {
    background: var(--primary-color) !important;
    color: #fff;
}
.ds-cal-day.selected {
    background: var(--hover-secondary) !important;
    border-color: var(--header-bg-accent) !important;
}

.ds-cal-toolbar-group .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.ds-cal-toolbar-group .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.ds-cal-weekday {
    color: var(--text-title) !important;
}


.content-info {
    border-radius: 15px;
    border: 1px solid var(--header-bg-primary);
}
.custom-file-label {
    height: 100% !important;
    border: 1px solid var(--header-bg-primary);
}
.custom-file-label::after {
    content: "" !important;
    display: none;
}

.bg-amarillo-crema {
    background-color: var(--header-user-bg);
}


.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid var(--header-bg-accent) !important;
    background: var(--hover-secondary) !important;
    color: var(--text-title) !important;
}

.btn-slot.selected,
.btn-slot.set-horario.selected
{
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border: 1px solid var(--text-title) !important;
    box-shadow: var(--card-shadow-hover);
}


.page-item.active .page-link {
    background-color: var(--hover-secondary) !important;
    border: 1px solid var(--header-bg-accent) !important;
    color: var(--text-title) !important;
}


.form-control:focus {
    border-color: var(--header-bg-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--hover-secondary);
}


.btn-consultar {
    color: var(--primary-color);
    font-weight: bold;
}
.btn-consultar:hover {
    background-color: var(--header-user-bg) !important;
    color: var(--text-title) !important;
}

.btn-consultar.active {
    background: var(--hover-secondary) !important;
    background-color: var(--hover-secondary) !important;
    color: var(--primary-color) !important;
    /*color: white !important;*/
}
.nav-item {
    /* border: 1px solid red; */
    border: 1px solid var(--primary-color);
}
.nav-item .nav-link {
    border-radius: 0;
}
.nav-pills .nav-item:first-child,
.nav-pills .nav-item:first-child .nav-link
{
    border-radius: 10px 0 0 10px;
}
.nav-pills .nav-item:last-child,
.nav-pills .nav-item:last-child .nav-link
{
    border-radius: 0 10px 10px 0;
}


.custom-card_ {
    background-color: var(--bg-card);
    border: none;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}


.parpadea {
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes parpadeo{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes parpadeo {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes parpadeo {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}