html {
  font-size: 14px;
}

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

.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 #258cfb;
}

.btn {
    border: 2px solid transparent; /* Inicialmente sin borde */
    transition: all 0.2s ease-in-out;
}

.btn:active,
.btn:focus {
    border: 2px solid black !important;
    box-shadow: 0 0 4px white !important; /* Simula borde blanco */
}

.boton-fino {
    margin-left: 1rem;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 4px;
    font-weight: 400;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: flex-start; /* Asegura que el contenido comience desde arriba */
    min-height: 100vh; /* Altura mínima del viewport */
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
}

.subtitulo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 1rem;
    font-size: 1rem;
    z-index: 100;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.form-control, .form-select {
    padding: 0;
    font-size: 0.75rem;
    padding-bottom: 0.02rem;
}

#contenedorCalendario {
    display: none;
    position: absolute;
    top: 50px;
    left: 20px;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    width: 100%; /* Aumentar el ancho */
    max-width:600px;
    height: auto; /* Altura automática */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Ajusta la altura del contenedor según sea necesario */
#calendar-container {
    height: 400px;
    overflow: hidden;
    border: 1px solid #ccc; /* Opcional: para ver los límites del contenedor */
    position: relative;
}

/* Ajusta la escala del calendario */
#calendar {
    transform: scale(0.85);
    transform-origin: top left;
    width: calc(100% / 0.90);
    height: calc(100% / 0.90);
}

/* Asegurar que la tabla del calendario tenga un ancho definido */
#calendar table {
    width: 45rem !important;
}

/*.highlight-date {
    background-color: #007bff !important;*/ /* Azul similar al estilo de Bootstrap */
    /*color: white !important;*/ /* Texto en blanco */
    /*border-radius: 50%;*/ /* Convertir en círculo */
/*}*/


/* Ajuste de las celdas del calendario */
.fc-day, .fc-widget-content {
    min-width: 160px; /* Ajusta este valor según tus necesidades */
}

/* Ajustes en la cabecera del calendario */
.fc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

/* Asegura que el título del mes esté alineado a la izquierda */
.fc-toolbar-chunk:first-child {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
}

/* Estilo del título del mes */
.fc-toolbar-title {
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Controles de navegación a la derecha */
.fc-toolbar-chunk:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Posicionamiento del submenú */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
    z-index: 1000; /* Asegura que esté encima */
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Contenedor principal: centrado */
#confirmacionReserva {
    margin: auto;
    height: 36rem;
    background-color: beige;
}

.left-column {
    width: 50%;
    height: 35rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
}

.ventana-detalles {
    max-height: 400px; /* ajusta según tu diseño */
    width:75%;
    overflow-y: auto;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background-color: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    background-color:cornsilk;
}

.right-column {
    width: 50%;
    height: 35rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.right-column-top {
    height: 50%; /* 📌 Ocupa el 50% del contenedor */
    background-color: #d1e7dd; /* verde claro */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* 🔍 Agrega scroll si el contenido sobrepasa el espacio */
}

.right-column-bottom {
    height: 50%; /* 📌 Ocupa el 50% del contenedor */
    background-color: #f8d7da; /* rojo claro */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* 🔄 Agrega scroll si el contenido sobrepasa el espacio */
}

.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;
}



.mifila td,
.mifila th {
    padding-top: 0.2rem; /* Reducir el padding superior */
    padding-bottom: 0.2rem; /* Reducir el padding inferior */
    line-height: 1; /* Ajustar la altura de línea para minimizar la altura total */
    font-size: 0.9rem; /* Opcional: reducir el tamaño de la fuente */
}

/*.dt-paging.paging_full_numbers {
    display: flex !important;
}*/

/* Contenedor principal */
.tab-container {
    border: 2px solid #333; /* Borde alrededor del control */
    border-top: 2px solid #333; /* Específicamente para el borde superior */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espacio interno */
    background-color: #f8f9fa; /* Fondo del contenedor */
}

/* Quitar la línea inferior predeterminada de las pestañas */
.nav-tabs {
    border-bottom: none; /* Eliminar la línea de separación predeterminada */
    /*margin-bottom: -2px;  Conectar visualmente con el contenido */
    padding-left:15px;
}

/* Estilo general de las pestañas */
.nav-tabs .nav-link {
    border: 1px solid transparent; /* Borde transparente por defecto */
    border-radius: 8px 8px 0 0; /* Redondear solo los bordes superiores */
    padding: 10px 20px;  /*Espaciado interno para hacerlas más grandes */
    text-align: center; /* Centrar el texto */
}

/* Pestaña activa */
.nav-tabs .nav-link.active {
    border: 2px solid #333; /* Borde completo */
    border-bottom: 2px solid #f8f9fa; /* Conectar visualmente con el contenido */
    background-color: #fff; /* Fondo blanco */
    font-weight: bold; /* Negrita para resaltar */
    z-index: 1; /* Colocar la pestaña activa sobre el contenedor */
}

/* Estilo al pasar el ratón por las pestañas */
.nav-tabs .nav-link:hover {
    border-color: #666; /* Cambiar el borde al pasar el ratón */
}

/* Contenido de las pestañas */
.tab-content {
    border:2px solid #333; /* Borde alrededor del contenido */
    /*border-top: none;*/ /* Conexión visual con la pestaña activa */
    padding: 10px; /* Espaciado interno */
    background-color: #fff; /* Fondo blanco */
    border-radius: 0 0 8px 8px; /* Redondear solo los bordes inferiores */
}

.nav-tabs .nav-link .nav-item {
    padding: 10px 30px !important; /* Ajusta los valores de padding (arriba/abajo y izquierda/derecha) */
    border: 1px solid #333; /* Borde alrededor del contenido */
    background-color: #fff; /* Fondo blanco */
    border-radius: 0 0 8px 8px; /* Redondear solo los bordes inferiores */
}

.text-left {
    text-align: left !important;
}
.text-center input{
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}

/* Clase personalizada para hacer las filas más estrechas */
.compact-table td,
.compact-table th {
    padding: 0; /*4px 8px;  Reduce el padding vertical y horizontal */
    font-size: 0.75rem; /* Reduce el tamaño de la fuente */
}

/* Ajusta el tamaño de los botones de paginación */
.dataTables_paginate a {
    font-size: 0.30rem; /* Reduce el tamaño de los números y los botones */
    padding: 4px 8px; /* Ajusta el tamaño de los botones de la paginación */
}

/* Estilos para la tabla comprimida */
.tablaComprimida {
    font-size: 0.70rem !important; /* Reducir el tamaño de la fuente */
    line-height: 0.5rem !important; /* Reducir la altura de las filas */
    /*table-layout: fixed !important;  Hacer que las celdas tengan un ancho fijo */
    width: 100% !important; /* Asegurarse de que la tabla ocupe todo el espacio disponible */
}

/* Estilos para los controles de búsqueda dentro de la tabla comprimida */
.tablaComprimida .dataTables_filter input {
    font-size: 0.70rem !important;
    padding: 0.25rem !important;
    height: 1rem !important;
}

.tablaComprimida .dataTables_filter button {
    font-size: 0.705rem !important;
    padding:0rem;
    /*padding: 0.25rem 0.5rem !important;*/
}

#tablaReserva td,
#tablaReserva th {
    padding: 0 !important; /* 🔥 Elimina el padding completamente */
}

#tablaReserva {
    font-size: 0.85rem; /* 🔹 Reduce el tamaño de la fuente ligeramente */
    border-collapse: collapse; /* 🔹 Une las líneas de los bordes */
}

#tablaReserva th td {
    /*padding: 4px 8px;  🔹 Reduce espacio interno en celdas */
    line-height: 1.2 !important; /* 🔹 Hace que el texto esté más compacto */
    padding-top: 0 !important;
}

#tablaReserva > :not(caption) > * > * {
    padding: 0 !important;
}

#tablaReserva td {
    padding: 0 !important; /* 🔥 Esto forzará el cambio */
}


#t_telefonos {
    table-layout: fixed !important;
    width: 100% !important; /* Garantiza que la tabla ocupe todo el ancho disponible */
}

.alineacion_izq {
    display: flex;
    justify-content: flex-start;
    margin-left:1rem;
}

.dt-button.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    font-size: 0.875rem !important; /* Tamaño pequeño */
    padding: 0.15rem 0.5rem !important; /* Relleno más pequeño para reducir altura */
    line-height: 1.2 !important; /* Reduce la altura de la línea */
    min-width: auto !important; /* Evita un ancho mínimo predeterminado */
}

.datepicker {
    z-index: 1050 !important;
}

#mainContent {
    width: 95%; /* Ajusta el ancho según tus necesidades */
    margin-top: 20px; /* Espaciado desde el encabezado */
    text-align: center; /* Opcional: Centrar el texto dentro del main */
    background-color: #f8f9fa; /* Color de fondo para destacar */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para un efecto visual */
}

.sr-only { /*Lo ponemos por accesibilidad pero lo ocultamos*/
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*CARRUSEL defs FOTOS*/
/* Contenedor que centra el carrusel en la pantalla */
/* Contenedor que ocupa toda la ventana y centra el carrusel */

#carruselContainer{
    display:flex;
}

.carrusel-centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    width: 80vw;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #f8f9fa;
}

/* Carrusel con tamaño máximo y centrado */
.carrusel-wrapper {
    width: 90vw;
    height: 90vh;
    max-width: 1000px;
    max-height: 700px;
    position: relative;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Ajuste de imagen o video */
.media-ajustada {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
    background-color: #fff;
}

/* Título superpuesto */
.titulo-foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top:1.5rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    padding: 0.4rem 0;
    font-weight: 500;
    font-size: 1.2rem;
    z-index: 2;
}


/*LIMPIA LA PANTALLA DEL CONTENIDO PRINCIPAL*/
.solo-layout{
    display: none;
}

/* Base para todos los botones personalizados */
.btn-app {
    height: 1.8rem;
    line-height: 1.8rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 0.5rem;
    transition: all 0.25s ease;
    font-weight: 500;
    cursor: pointer;
}

/* ALTA - NUEVO */
.btn-nuevo {
    background-color: #84cc16; /* VERDE LIMA*/
    color: white;
}

    .btn-nuevo:hover {
        background-color: white;
        color: #7c3aed;
        border: 2px solid #84cc16;
    }

    .btn-nuevo:active {
        border: 5px solid #84cc16;
        box-shadow: 0 0 6px #84cc16;
    }

/* ACEPTAR */
.btn-aceptar {
    background-color: #7c3aed; /* VIOLETA */
    color: white;
}

    .btn-aceptar:hover {
        background-color: white;
        color: black; /* Mantiene el texto en negro al pasar el ratón */
        border: 2px solid #7c3aed;
    }

    .btn-aceptar:active {
        border: 5px solid #7c3aed;
        box-shadow: 0 0 6px #7c3aed;
    }

/* CANCELAR */
.btn-cancelar {
    background-color: #06b6d4; /* TURQUESA */
    color: white;
}

    .btn-cancelar:hover {
        background-color: white;
        color: black; /* Mantiene el texto en negro al pasar el ratón */
        border: 2px solid #06b6d4;
    }

    .btn-cancelar:active {
        border: 5px solid #06b6d4;
        box-shadow: 0 0 6px #06b6d4;
    }

/* PAGAR */
.btn-pagar {
    background-color: #fb7185;
    color: white;
}

    .btn-pagar:hover {
        background-color: white;
        color: black; /* Mantiene el texto en negro al pasar el ratón */
        border: 2px solid #fb7185;
    }

    .btn-pagar:active {
        border: 5px solid #fb7185;
        box-shadow: 0 0 6px #fb7185;
    }

/* REENVIAR EMAIL - OLVIDADO CONTRASEÑA - OTROS... */
.btn-otros {
    background-color: #fbbf24; /* Amarillo ocre */
    color: white; /* Texto blanco por defecto */
}

    .btn-otros:hover {
        background-color: white;
        color: black; /* Mantiene el texto en negro al pasar el ratón */
        border: 2px solid #fbbf24;
    }

    .btn-otros:active {
        border: 5px solid #fbbf24;
        box-shadow: 0 0 6px #fbbf24; /* Ocre con transparencia */
    }

/*<h5 class="mb-3" > Botones personalizados</h5 >

<div class="d-flex flex-wrap gap-2" >
<button class="btn-app btn-nuevo" > Nuevo</button >
<button class="btn-app btn-aceptar" > Aceptar</button >
<button class="btn-app btn-cancelar" > Cancelar</button >
<button class="btn-app btn-pagar" > Pagar</button >
<button class="btn-app btn-otros" > Otros</button >
</div >*/