/* ===== Modal de confirmación de reserva ===== */
.modal-reserva-confirmacion {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-confirmacion-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  max-width: 420px;
  width: 95vw;
  padding: 0;
  overflow: hidden;
  animation: modalFadeIn 0.25s;
  border: 2px solid var(--azul);
}

.modal-confirmacion-header {
  background: linear-gradient(90deg, var(--azul) 70%, #003366 100%);
  color: #fff;
  padding: 18px 24px 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e5ec;
}

.modal-confirmacion-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.close-modal-confirmacion {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
  margin-left: 12px;
  transition: background 0.2s;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-modal-confirmacion:hover {
  background: rgba(0,0,0,0.12);
}

.modal-confirmacion-body {
  padding: 22px 24px 10px 24px;
  color: #222;
  font-size: 1.08rem;
  background: #f5f7fa;
  min-height: 120px;
  line-height: 1.6;
}

.modal-confirmacion-footer {
  padding: 12px 24px 18px 24px;
  display: flex;
  justify-content: center;
  background: #f5f7fa;
  border-top: 1px solid #e0e5ec;
}
/* Alerta de confirmación en el modal */
.confirmacion-alerta {
  border: 1.5px solid #b30000;
  background: #fff6f6;
  color: #b30000;
  border-radius: 7px;
  padding: 12px 16px;
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 1.08em;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(179,0,0,0.04);
}

.btn-aceptar-modal-confirmacion {
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 28px;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,92,162,0.08);
}
.btn-aceptar-modal-confirmacion:hover {
  background: #003366;
  box-shadow: 0 4px 16px rgba(0,92,162,0.13);
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

:root {
            --azul: #005CA2;
            --celeste: #84CFED;
            --amarillo: #FEC800;
            --blanco: #FFFFFF;
            --gris-claro: #f5f7fa;
            --gris-medio: #e0e5ec;
            --gris-oscuro: #333333;
            --sombra: 0 4px 12px rgba(0, 0, 0, 0.15);
            --sombra-intensa: 0 10px 30px rgba(0, 0, 0, 0.2);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--gris-claro);
            color: var(--gris-oscuro);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, var(--azul) 0%, #004a8c 100%);
            color: var(--blanco);
            padding: 5px 0;
            box-shadow: var(--sombra);
            position: relative;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .logo-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 15px;
        }

        .logo {
            height: 100px; 
            display: flex;
            align-items: center;
            padding: 5px 0;
        }
        
        .logo img {
            height: 100%;
            width: auto;
            max-width: 300px;
            object-fit: contain;
        }

        .header-text h1 {
            text-align: right;
            margin-left: auto;
        }

        .header-text p {
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            color: var(--blanco);
        }

        .main-title {
            text-align: center;
            margin: 30px 0;
            color: var(--azul);
        }

        .main-title h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .main-title p {
            font-size: 16px;
            color: #666;
        }

        .albergues-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .albergue-card {
            background: var(--blanco);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--sombra);
            transition: var(--transition);
            border-top: 5px solid var(--azul);
        }

        .albergue-card.aquilina {
            border-top-color: var(--amarillo);
        }

        .albergue-card.tinku {
            border-top-color: var(--celeste);
        }

        .albergue-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--sombra-intensa);
        }

        .card-image {
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .card-header {
            padding: 25px;
            background-color: rgba(0, 92, 162, 0.03);
            position: relative;
        }

        .albergue-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 10px;
            width: 100%;
        }

        .albergue-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--azul);
            white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }

        .capacity {
            background-color: var(--celeste);
            color: var(--azul);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .capacity.aquilina {
            background-color: var(--amarillo);
        }

        .capacity.tinku {
            background-color: #d1e8f9;
        }

        .albergue-description {
            color: #555;
            font-size: 15px;
            line-height: 1.5;
            margin-top: 10px;

        }

        .card-body {
            padding: 0 25px 25px;
            margin-top: 20px;
        }

        .features {
            margin-bottom: 25px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .feature-icon {
            width: 26px;
            height: 26px;
            background-color: var(--celeste);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: var(--azul);
            font-size: 12px;
        }

        .feature-icon.aquilina {
            background-color: var(--amarillo);
        }

        .feature-icon.tinku {
            background-color: #d1e8f9;
        }

        .btn-reservar {
            width: 100%;
            background: linear-gradient(to right, var(--azul), #004a8c);
            color: var(--blanco);
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            box-shadow: 0 4px 8px rgba(0, 92, 162, 0.2);
            margin-bottom: 20px;
        }

        .btn-reservar.aquilina {
            background: linear-gradient(to right, var(--amarillo), #e6b500);
            color: var(--gris-oscuro);
        }

        .btn-reservar.tinku {
            background: linear-gradient(to right, var(--celeste), #6abde6);
            color: var(--azul);
        }

        .btn-reservar:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-reservar:active {
            transform: translateY(0);
        }

        .btn-alo {
            width: 100%;
            background: linear-gradient(to right, var(--azul), #004a8c);
            color: var(--blanco);
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            box-shadow: 0 4px 8px rgba(0, 92, 162, 0.2);
            margin-bottom: 20px;
        }

        .btn-alo.aquilina {
            background: linear-gradient(to right, var(--amarillo), #e6b500);
            color: var(--gris-oscuro);
        }

        .btn-alo.tinku {
            background: linear-gradient(to right, var(--celeste), #6abde6);
            color: var(--azul);
        }

        .btn-alo:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-alo:active {
            transform: translateY(0);
        }

        .map-container {
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 15px;
        }

        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .modal.active {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        .modal-content {
            background: var(--blanco);
            border-radius: 15px;
            width: 95%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--sombra-intensa);
            transform: translateY(20px);
            transition: transform 0.4s ease;
            position: relative;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            background: linear-gradient(135deg, var(--azul) 0%, #004a8c 100%);
            color: var(--blanco);
            padding: 25px;
            border-radius: 15px 15px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header.aquilina {
            background: linear-gradient(135deg, var(--amarillo) 0%, #e6b500 100%);
            color: var(--gris-oscuro);
        }

        .modal-header.tinku {
            background: linear-gradient(135deg, var(--celeste) 0%, #6abde6 100%);
            color: var(--azul);
        }

        .close-modal {
            background: none;
            border: none;
            color: inherit;
            font-size: 28px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: var(--transition);
        }

        .close-modal:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .modal-body {
            padding: 30px;
        }

        .modal-title {
            font-size: 24px;
            margin-bottom: 25px;
            text-align: center;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--gris-oscuro);
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid var(--gris-medio);
            border-radius: 6px;
            font-size: 15px;
            font-family: 'Roboto', sans-serif;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--azul);
            box-shadow: 0 0 0 3px rgba(0, 92, 162, 0.2);
        }

        .date-time-group {
            display: flex;
            gap: 15px;
        }

        .date-time-group .form-group {
            flex: 1;
        }

        .btn-submit {
            background: linear-gradient(to right, var(--azul), #004a8c);
            color: var(--blanco);
            padding: 14px 25px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0 4px 10px rgba(0, 92, 162, 0.3);
        }

        .btn-submit.aquilina {
            background: linear-gradient(to right, var(--amarillo), #e6b500);
            color: var(--gris-oscuro);
            box-shadow: 0 4px 10px rgba(254, 200, 0, 0.3);
        }

        .btn-submit.tinku {
            background: linear-gradient(to right, var(--celeste), #6abde6);
            color: var(--azul);
            box-shadow: 0 4px 10px rgba(132, 207, 237, 0.3);
        }

        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        /* Disponibilidad Section */
        .disponibilidad-section {
            background-color: var(--gris-medio);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
        }

        .disponibilidad-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--azul);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ocupacion-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .ocupacion-bar {
            flex: 1;
            height: 12px;
            background-color: #ddd;
            border-radius: 6px;
            overflow: hidden;
        }

        .ocupacion-fill {
            height: 100%;
            background: linear-gradient(to right, var(--azul), var(--celeste));
            border-radius: 6px;
        }

        .ocupacion-info {
            font-weight: 600;
            min-width: 120px;
            font-size: 14px;
        }

        .ocupacion-info.aquilina {
            color: #e6b500;
        }

        .ocupacion-info.tinku {
            color: var(--celeste);
        }

        .calendario-container {
            margin-top: 20px;
        }

        .calendario-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .mes-title {
            font-weight: 600;
            font-size: 18px;
        }

        .nav-mes {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--azul);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .nav-mes:hover {
            background-color: var(--gris-medio);
        }

        .calendario-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .dia-header {
            text-align: center;
            font-weight: 600;
            padding: 10px 0;
            font-size: 14px;
            color: var(--gris-oscuro);
        }

        .dia {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            position: relative;
            font-size: 14px;
        }

        .dia:hover {
            background-color: var(--gris-medio);
        }

        .dia.ocupado {
            background-color: #ffdddd;
            color: #d00;
            cursor: not-allowed;
        }

        .dia.ocupado::after {
            content: "";
            position: absolute;
            bottom: 3px;
            width: 4px;
            height: 4px;
            background-color: rgb(0, 221, 55);
            border-radius: 50%;
        }

        .dia.seleccionado {
            background-color: var(--azul);          
            color: white;
        }

        .dia.seleccionado.ingreso {
            background: linear-gradient(135deg, var(--azul) 50%, var(--celeste) 50%);
        }

        .dia.seleccionado.salida {
            background: linear-gradient(135deg, var(--celeste) 50%, var(--azul) 50%);
        }

        .dia.hoy {
            background-color: var(--gris-medio);
            color: var(--azul);
            font-weight: 700;
        }

        .dia.otro-mes {
            color: #bbb;
        }




        /* Día seleccionado provisional (inicio de rango) */
.dia.seleccionado-inicial {
  background-color: #84CFED; /* celeste claro */
  color: #004a8c;
  border: 2px solid #004a8c;
}








        footer {
            background: linear-gradient(135deg, var(--azul) 0%, #004a8c 100%);
            color: var(--blanco);
            text-align: center;
            padding: 25px 0;
            margin-top: 40px;
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .date-time-group {
                flex-direction: column;
                gap: 15px;
            }
            
            .albergues-container {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                width: 98%;
            }
        }

        /* Ajustes responsivos */
        @media (max-width: 768px) {
            .logo-container {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
            
            .header-text {
                text-align: center;
                margin-left: 0;
                width: 100%;
            }
            
            .logo {
                height: 90px;
                margin: 0 auto;
            }
            
            .logo img {
                max-width: 250px;
            }
            
        }

        @media (max-width: 480px) {
            .header-text p {
                font-size: 14px;
            }
            
            .logo {
                height: 70px;
            }

            .logo img {
                max-width: 210px;
            }
        }


        .calendario-container { position: relative; }




/* Paso 3 mantiene su tamaño normal */
.step-container.paso-box {
  position: relative;
  display: block; /* evita que el flex afecte su contenido */
}

/* Loader oculto por defecto */
.cal-loader[hidden] {
  display: none !important;
}

/* Loader centrado sobre el paso 3 sin afectar el layout */
.cal-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

/* Spinner */
.cal-loader .spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Texto */
.cal-loader .loader-text {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

/* Animación */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* Igualar estilo de labels en Paso 4 */
#paso-box-4-maestro label {
    color: #005ca2;
    font-weight: 600;
}

#paso-box-4-maestro label i {
    color: #005ca2;
}








/* Para boton VERDE*/

/* Botón base: mantenemos tu estilo + centrado perfecto */
.btn-submit{
  width: 100%;
  background: linear-gradient(to right, var(--azul), #004a8c);
  color: var(--blanco);
  padding: 14px 25px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Roboto', sans-serif;
  margin-top: 20px;
  box-shadow: 0 4px 10px rgba(0, 92, 162, 0.3);

  /* centrado de contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;      /* para centrar el icono por absolute */
  gap: .5rem;
}

.btn-submit:disabled{ opacity: 0.9; cursor: not-allowed; }

/* Etiqueta e ícono del botón */
.btn-submit .btn-label{ transition: opacity .15s; }
.btn-submit .btn-icon{
  /* centrado absoluto, no depende del ancho del texto */
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  display: none;           /* visible solo en loading/success */
}

/* Estado: Cargando (spinner centrado) */
.btn-submit.is-loading .btn-icon{
  display: flex;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.btn-submit.is-loading .btn-label{ opacity: 0; }   /* ocultar sin ocupar */
@keyframes spin{ to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Estado: Éxito (verde + tilde centrada) */
.btn-submit.is-success{
  background: #10b981;     /* verde */
  box-shadow: 0 4px 10px rgba(16,185,129,.3);
}
.btn-submit.is-success .btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-submit.is-success .btn-icon::before{
  content: "✓";
  font-size: 16px; line-height: 1; color: #fff;
}
.btn-submit.is-success .btn-label{ opacity: 0; }


/* === Calendario: spinner fijo en su lugar === */
.cal-loader .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0,0,0,0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.9s linear infinite; /* <- usa 'spin' */
}

/* SOLO rotación (no translate) */
@keyframes spin { to { transform: rotate(360deg); } }

/* === Botón: spinner centrado absoluto === */
.btn-submit .btn-icon{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  display: none;
}

/* En carga, animación con translate + rotate */
.btn-submit.is-loading .btn-icon{
  display: flex;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-center .8s linear infinite; /* <- usa 'spin-center' */
}

/* Rotación con el translate incluido para el ícono absoluto del botón */
@keyframes spin-center {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Estado: Error (rojo + X) */
.btn-submit.is-error{
  background:#ef4444;                /* rojo */
  box-shadow:0 4px 10px rgba(239,68,68,.3);
}

/* En error mostramos icono + texto, centrados como en éxito */
.btn-submit.is-error .btn-icon{
  position: static;                  /* no absolute, para ir junto al texto */
  transform: none;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items:center; justify-content:center;
  margin-right:.5rem;
}
.btn-submit.is-error .btn-icon::before{
  content:"✕";                       /* X */
  font-size:16px; line-height:1; color:#fff;
}
.btn-submit.is-error .btn-label{ opacity:1; }

/* Asegurá prioridades vs. loading */
.btn-submit.is-loading .btn-label{ opacity:0; }
.btn-submit.is-loading .btn-icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:spin-center .8s linear infinite;
}
/* Snackbar global fijo */
#app-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #10b981;            /* default success */
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;                  /* por encima de overlays */
  pointer-events: none;            /* no bloquea clics */
  max-width: 90vw;
  text-align: center;
}

#app-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* variantes */
#app-snackbar.error { background: #ef4444; }
#app-snackbar.success { background: #10b981; }

/* que el carrusel ocupe toda la tarjeta */
.card-image .glide,
.card-image .glide__track,
.card-image .glide__slides,
.card-image .glide__slide { height: 100%; }

/* que las imágenes se vean bien */
.glide__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* contenedor: centrado vertical y separación izquierda/derecha */
.glide__arrows{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;          /* centra verticalmente */
  justify-content:space-between;
  padding:0 10px;
  z-index:5;
  pointer-events:none;         /* los clics solo en los botones */
}

/* botón circular: CENTRADO REAL del icono */
.glide__arrow{
  pointer-events:auto;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(0,92,162,.5);
  color:#fff;
  border:0;
  padding:0;                   /* quita padding nativo */
  box-sizing:border-box;
  display:inline-flex;         /* centra con flex */
  align-items:center;
  justify-content:center;
  line-height:1;               /* evita desplazamientos verticales */
  font-size:18px;              /* tamaño del chevron si usás texto o <i> */
  cursor:pointer;
  transition:background .3s ease;
  -webkit-appearance:none;     /* quita estilos nativos (Safari) */
  appearance:none;
}

.glide__arrow:hover{ background: var(--azul); }

/* si usás Font Awesome u otro ícono dentro */
.glide__arrow i{
  margin:0;
  line-height:1;
  pointer-events:none;
  font-size:18px;
}

/* si en lugar de <i> usás el caracter "<" y ">" */
.glide__arrow--left,
.glide__arrow--right{
  font-family: inherit;
}


/* Estilos para el footer */
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .footer-logo {
            height: 75px;
            width: auto;
            margin-bottom: 5px;
        }

        .footer-text {
            text-align: center;
            font-family: 'Roboto', sans-serif;
        }

        .footer-text p {
            font-size: 13px; /* Tamaño un poco más grande que 8px para mejor legibilidad */
            margin: 2px 0;
            line-height: 1.3;
            color: var(--blanco);
        }

            /* Versión responsiva */
        @media (max-width: 768px) {
            .footer-logo {
                height: 50px;
            }
            
            .footer-text p {
                font-size: 12px;
            }
        }


        /* Estilo de campo bloqueado */
.locked-date[readonly]{
  background: #eef2f7;
  cursor: not-allowed;
}

/* Oculta el ícono del picker (Chrome/Safari/Edge) */
.locked-date::-webkit-calendar-picker-indicator{
  display: none;
}

/* ===== Días base ===== */
.dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  position: relative;
  font-size: 14px;
}

/* Hover solo para días activos */
.dia:hover { background-color: var(--gris-medio); }

/* ===== Días inactivos: otro mes + pasados ===== */
.dia.otro-mes,
.dia.inactiva {
  color: #bbb;
  cursor: not-allowed;
  pointer-events: none;           /* no clic */
  opacity: .8;
}
.dia.otro-mes:hover,
.dia.inactiva:hover { background: none; } /* sin hover */

/* Hoy (lo mantenemos) */


/* ===== Día seleccionado (por defecto: Maestro/azul) ===== */
.dia.seleccionado {
  background-color: var(--azul);
  color: #fff;
  border: 1px solid rgba(0,0,0,.05);
}

/* Tinku: celeste */
#modal-tinku .calendario-grid .dia.seleccionado{
  background: rgba(56, 189, 248, .22);
  border-color: rgba(56, 189, 248, .60);
  color: inherit;
}

/* Aquilina: amarillo */
#modal-aquilina .calendario-grid .dia.seleccionado{
  background: rgba(250, 204, 21, .28);
  border-color: rgba(250, 204, 21, .70);
  color: #2b2b2b;
}

/* Si un día ocupado también está seleccionado, priorizamos "seleccionado" */
#modal-tinku .calendario-grid .dia.ocupado.seleccionado,
#modal-aquilina .calendario-grid .dia.ocupado.seleccionado{
  background: inherit;
  border-color: inherit;
  color: inherit;
}
#modal-tinku .calendario-grid .dia.ocupado.seleccionado::after,
#modal-aquilina .calendario-grid .dia.ocupado.seleccionado::after{
  opacity: 0;
}
.dia.inactiva{
  color:#bbb;
  cursor:not-allowed;
  pointer-events:none;
  opacity:.8;
}
.dia.inactiva:hover{ background:none; }









/* ===== Aviso emergente (popup) ===== */
.notice-overlay{
  position: fixed;
  inset: 0;
  display: none;              /* oculto por defecto */
  z-index: 9999;              /* por encima de todo */
}

.notice-overlay.show{ display: block; }

.notice-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5); /* oscurece */
}

.notice-dialog{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: min(90vw, 680px);
  width: clamp(320px, 80vw, 680px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  background: transparent;
}

.notice-dialog img{
  display: block;
  width: 100%;
  height: auto;
}

.notice-close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  z-index: 1002; /* Aumentado para estar por encima del video */
}

.notice-close:hover{ background: rgba(0,0,0,.9); }

/* Más oscuro detrás del aviso */
.notice-overlay .notice-backdrop{
  background: rgba(0,0,0,.72); /* subí el oscurecimiento (antes .5) */
}

/* X simple, sin círculo, como en los modales */
.notice-overlay .notice-close{
  position: absolute;
  top: 10px;
  right: 12px;
  /* sin fondo ni borde */
  background: transparent;
  border: none;
  box-shadow: none;

  /* tipografía y aspecto */
  color: #fff;
  font-size: 28px;   /* ajustá si querés más chica/grande */
  line-height: 1;
  cursor: pointer;

  /* hit-area cómoda sin círculo visible */
  padding: 4px 8px;
  z-index: 1002; /* Aumentado para estar por encima del video */
}

.notice-overlay .notice-close:hover{
  opacity: .9;
  transform: scale(1.05);
}

/* Aviso inicial: versión reducida en pantallas grandes (~80% más pequeño) */
@media (min-width: 1024px){
  .notice-dialog{
    /* antes: width: clamp(320px, 80vw, 680px) */
    width: min(35vw, 420px);   /* más angosto */
    max-width: 420px;
  }
  .notice-dialog img{
    width: 100%;
    height: auto;
    max-height: 80vh;          /* cap: solo 20% del alto del viewport */
    object-fit: contain;       /* respeta proporción */
  }
}

/* Reglas específicas para el video (agregadas para resolver la franja central) */
.notice-dialog video {
  width: 100%;                /* Ocupa todo el ancho del dialog */
  height: auto;               /* Mantiene la proporción original del video */
  max-height: 80vh;           /* Limita la altura máxima para evitar overflow en pantallas pequeñas */
  object-fit: contain;        /* Asegura que el video se vea completo sin recortes ni distorsión (ajusta al contenedor) */
  display: block;             /* Elimina espacios extra alrededor del video */
  margin: 0 auto;             /* Centra horizontalmente si es necesario */
  border-radius: 10px;        /* Opcional: redondea los bordes como el dialog */
  z-index: 1000;              /* Bajo el botón close para no bloquear clics */
}

/* Ajuste para pantallas grandes: permite que el video sea más grande si es necesario */
@media (min-width: 1024px) {
  .notice-dialog {
    max-width: min(90vw, 800px); /* Aumenta el ancho máximo para videos (antes 420px, ahora hasta 800px para mejor visualización) */
    width: clamp(480px, 70vw, 800px); /* Ancho más generoso para evitar que el video se vea como una franja delgada */
  }
  
  .notice-dialog video {
    max-height: 90vh; /* Permite más altura en desktops para que el video se vea completo */
  }
}


@media (max-width: 768px){

  .notice-dialog{
    top: 0;
    left: 0;
    transform: none;

    width: 100vw;
    max-width: 100vw;
    height: auto;

    border-radius: 0;

     position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .notice-dialog video{
    width: 100vw;
    max-height: 100vh;
    border-radius: 10;
  }

}




.video-wrapper{
  position: relative;
}

.sound-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 z-index: 10; 
  font-size: 64px;
  color: white;
  background: rgba(0,0,0,.35);
  

  border: none;
  cursor: pointer;
  

  transition: opacity .3s ease, transform .2s ease;
}

.sound-overlay:hover{
  transform: scale(1.05);
}

.sound-overlay.hidden{
  opacity: 0;
  pointer-events: none;
}








/* Verde y negrita para el número de CAMAS disponibles */
.disponibilidad span[id^="disponibles-"]{
  color: #16a34a;   /* verde */
  font-weight: 700; /* negrita */
}

/* Grid base de 2 columnas en escritorio, 1 en mobile */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Fila de 3 columnas para fecha/ingreso/egreso */
.form-row-3{
  grid-column: 1 / -1;                 /* ocupar ancho completo del grid padre */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px){
  .form-row-3{ grid-template-columns: 1fr; }
}

/* Cantidad + check compacto en línea */
.input-row{
  display: flex;
  align-items: center;
  gap: 12px;
}
.input-row .form-control{
  flex: 1 1 auto;
  min-width: 0;
}

/* Check en línea, compacto */
.check-inline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  font-size: 14px;
  color: var(--gris-oscuro);
  padding: 6px 10px;
  border: 1px solid var(--gris-claro, #e5e7eb);
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
}
.check-inline input[type="checkbox"]{
  accent-color: var(--azul);   /* usa tu color primario */
  transform: scale(1.05);
}

/* Ajustes visuales */
.form-group label{ display:block; font-weight:600; margin-bottom:6px; }
.form-group .form-control{ width:100%; }

/* Alto de controles para alinear */
:root { --control-h: 44px; }

/* Fila de "Cantidad + check" */
.input-row{
  display: flex;
  align-items: flex-start;  /* ⬅️ alinear por arriba */
  gap: 12px;
}

/* Misma altura para el input numérico en esa fila */
.input-row .form-control{
  height: var(--control-h);
}

/* Pill del check con la misma altura y centrado interno */
.check-inline{
  display: flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--gris-claro, #e5e7eb);
  border-radius: 6px;
  background: #fafafa;
  gap: 8px;
}

/* Ajuste fino del checkbox para que no “salte” 1px arriba/abajo */
.check-inline input[type="checkbox"]{
  margin: 0;
  transform: translateY(-1px);
}

/* Fila de 3 columnas: Contacto | Check (centro) | Cantidad */
.form-row-qty{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* check al centro */
  gap: 16px;
  align-items: end;
}

/* En mobile se apilan en orden: Contacto → Check → Cantidad */
@media (max-width: 900px){
  .form-row-qty{ grid-template-columns: 1fr; }
}

/* Celda del check centrada vertical y horizontalmente */
.check-cell{
  display: flex;
  justify-content: center;  /* centrado horizontal */
  align-items: center;      /* centrado vertical */
}

/* Unificamos alturas para alineación perfecta */
:root { --control-h: 44px; }

.form-row-qty .form-control{
  height: var(--control-h);
}

/* Pill del check compacto y de altura igual al input */
.check-inline{
  display: flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--gris-claro, #e5e7eb);
  border-radius: 6px;
  background: #fafafa;
  gap: 8px;
}

.check-inline input[type="checkbox"]{
  margin: 0;
  transform: translateY(-1px);
}
/* Fila 2: Contacto | Check | Cantidad  ==> mismas anchuras que la fila 3 */
.form-row-qty{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* = 1fr 1fr 1fr */
  gap: 16px;
  align-items: end;
}

/* Centrar el check en su columna */
.form-row-qty .check-cell{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Asegurar que los inputs llenen su celda y queden alineados */
.form-row-qty .form-control{
  width: 100%;
  height: var(--control-h, 44px);
}

/* “Píldora” del check con misma altura que los inputs */
.check-inline{
  display: flex;
  align-items: center;
  height: var(--control-h, 44px);
  padding: 0 12px;
  border: 1px solid var(--gris-claro, #e5e7eb);
  border-radius: 6px;
  background: #fafafa;
  gap: 8px;
}
.check-inline input[type="checkbox"]{
  margin: 0;
  transform: translateY(-1px);
}

/* Responsive: se apilan en móviles */
@media (max-width: 900px){
  .form-row-qty{ grid-template-columns: 1fr; }
}

/* Botón grande fuera de los modales (igual ancho visual que tarjetas) */
.btn-cancelar{
  width: 100%;
  max-width: 350px;        /* similar a tu .container principal */
  margin: 20px auto 0;
  display: block;
  background: linear-gradient(to right, #d9534f, #c9302c);
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 4px 10px rgba(217,83,79,.25);
}
.btn-cancelar:hover{ transform: translateY(-2px); }

/* Botón rojo dentro del modal (re-usa tu “btn-submit” con estado de error) */
.btn-cancelar-roja{
  background: linear-gradient(to right, #d9534f, #c9302c);
  color: #fff;
}
.btn-cancelar-roja.is-loading .btn-icon{
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
}
.btn-cancelar-roja.is-error{ background: #c9302c; }

button.btn-submit.btn-cancelar-roja {
  background: linear-gradient(to right, #d9534f, #c9302c) !important;
  color: #fff !important;
}


/*Estilos para la X del css*/
/* Asegura que el snackbar sea el contenedor de referencia de la X */
.snackbar{
  position: fixed;                 /* ya lo tendrás, reforzamos */
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  padding: 12px 44px 12px 16px;    /* espacio a la derecha para la X */
  border-radius: 8px;
  color: #fff;
  z-index: 99999;                  /* por delante de todo */
  pointer-events: auto;
  position: fixed;
  /* si usas flex está ok, pero que no afecte a la X absoluta */
  display: flex;
  align-items: center;
  pointer-events: auto;  /* evita click-through */

}

/* Botón X arriba-derecha, clicable */
.snackbar-close{
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;                    /* mayor área de clic */
  pointer-events: auto;
}
.snackbar-close:hover{ opacity: .85; }

/* Permite seleccionar el texto del mensaje */
.snackbar-message{
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  cursor: text;
  white-space: pre-wrap;
  flex: 1; /* si usas flex en .snackbar, empuja el texto y deja la X a la derecha */
}

/* Asegura que su contenido también reciba eventos */
.snackbar *{
  pointer-events: auto;
}

/* Quitar flechas en Chrome, Safari, Edge */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/*///////////////////**/
/* Colores para validación en rango */
.dia.en-rango.verde {
  background-color: #4CAF50 !important; /* Verde para disponible */
  color: white;
}
.dia.en-rango.rojo {
  background-color: #f44336 !important; /* Rojo para no disponible */
  color: white;
}
/* Mantén en-rango base para días no validados aún */
.dia.en-rango:not(.verde):not(.rojo) {
  background-color: #e3f2fd !important; /* Azul claro neutral */
  color: #1976d2;
}
.dia.inicio-rango, .dia.fin-rango {
  border: 2px solid #2196f3 !important; /* Borde azul para start/end, sobre colores */
}



  

        .title {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #005CA2;
    white-space: nowrap;
}

#cantidad-alo-maestro {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 120px;
    font-size: 14px;
}

#cantidad-alo-maestro:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fas {
    color: #005CA2;
    width: 16px;
    text-align: center;
}


/*para el los recuadros rojo y verde del modal de dias disponibles*/
.fecha-range-info {
    margin: 10px 0;
    font-style: italic;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9; /* Fondo sutil para destacar como "leyenda" */
}

.leyenda-color {
    display: inline-block;
    margin: 0 15px;
    vertical-align: middle;
}

.cuadrado {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    font-weight: bold;
}

.cuadrado.rojo {
    background-color: #f44336; /* Rojo */
    color: white;
}

.cuadrado.verde {
    background-color: #4CAF50; /* Verde */
    color: white;
}

.texto-rojo {
    color: #f44336;
    font-weight: bold;
}

.texto-verde {
    color: #4CAF50;
    font-weight: bold;
}

/* Responsivo: En mobile, apila las leyendas */
@media (max-width: 600px) {
    .leyenda-color {
        display: block;
        margin: 5px 0;
    }
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
}


.calendario-disabled {
    pointer-events: none; /* Bloquea clicks */
    opacity: 0.6; /* Gris visual */
}

.calendario-disabled .nav-mes {
    cursor: not-allowed;
    opacity: 0.5;
}

.ayuda-texto {
    color: #999;
    font-size: 0.8em;
    display: block;
    margin-top: 4px;
    font-style: italic;
}

select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}


/*Estilos para el control secuencial en el modal alojamiento*/

/* Contenedores de pasos */
.step-container {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.step-container.step-completed {
    border-color: #4caf50; /* Verde completado */
    background-color: #f1f8e9;
}
.step-container.step-active {
    border-color: #ff9800; /* Amarillo actual */
    background-color: #fff3e0;
}

/* Indicador de progreso */
.progress-steps {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.step-indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    margin: 0 10px;
    transition: background 0.3s ease;
}
.step-indicator.completed {
    background: #4caf50;
    color: white;
}
.step-indicator.active {
    background: #ff9800;
    color: white;
}
.progress-bar {
    flex: 1;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 15px;
    position: relative;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #4caf50, #8bc34a);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Botón Reset */
.btn-reset {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600
}
.btn-reset:hover {
    background: #d32f2f;
}

/* Bloqueo visual para campos congelados */
input[readonly], select[disabled] {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

/*Bloque de modal*/
.step-container {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.step-container.step-completed {
    border-color: #4caf50;
    background-color: #f1f8e9;
}
.step-container.step-active {
    border-color: #ff9800;
    background-color: #fff3e0;
}
.progress-steps {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.step-indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    margin: 0 10px;
    transition: background 0.3s ease;
}
.step-indicator.completed {
    background: #4caf50;
    color: white;
}
.step-indicator.active {
    background: #ff9800;
    color: white;
}
.progress-bar {
    flex: 1;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 15px;
}
.progress-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.btn-reset {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}
.btn-reset:hover {
    background: #d32f2f;
}
input[readonly], select[disabled] {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}
.calendario-grid.step-completed {
    pointer-events: none;
    opacity: 0.7;
}

/*Loader de calendario*/

.cal-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Sobre el calendario */
    border-radius: 8px; /* Si el calendario tiene bordes redondeados */
}
.loader-text {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.calendario-grid.cal-block {
    pointer-events: none; /* Ya bloquea clics durante carga */
    opacity: 0.5; /* Opcional: Atenúa el calendario durante carga */
}

/*Horarios de entrada y salida*/
.horarios-resaltados {
  margin-top: 0px;
  padding: 0px 1px;
  /*background-color: #e3f2fd; /* Fondo azul claro */
  /*border-left: 4px solid #2196F3; /* Borde izquierdo azul */
  border-radius: 4px;
  font-weight: bold;
  color:#005CA2; /* Texto azul oscuro */
  /*display: flex;*/
  align-items: center important!;
  
  gap: 10px;
  /*font-size: 14px;*/
}


.horarios-resaltados i {
  color: #2196F3 !important; /* Azul para iconos */
  font-size: 18px; /* Ligeramente más grande para impacto visual */
  margin-right: 10px;
}

/*fondo gris calendario*/

/* Fondo gris para calendario de Alojamiento (matching con modal regular) */
.step-container.paso-box {
  background-color: white; /* Gris claro */
  border-radius: 8px; /* Bordes redondeados suaves */
  padding: 15px; /* Espaciado interno */
  margin-bottom: 10px;
}

.calendario-header {
  background-color: #f5f5f5; /* Gris más oscuro para header, opcional */
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.calendario-grid {
  background-color: #f5f5f5; /* Blanco para los días, contraste */
  border: 1px solid #ddd; /* Borde sutil */
  border-radius: 4px;
}

/*Flecha de limpiar todo*/
/* Icono del botón "Limpiar Todo": Blanco y más grueso */
.btn-reset i {
  color: white !important; /* Blanco fijo */
  font-weight: 900; /* Más grueso (bold máximo) */
  font-size: 18px; /* Ligeramente más grande para visibilidad */
  margin-right: 8px; /* Espaciado opcional del texto */
}


/* Fix Mobile: Campos completos en pasos 1 y 2 (evita corte) */
@media (max-width: 480px) { /* Cubre móviles estándar */
  .step-container.step-1 .form-row,
  .step-container.step-2 .form-row {
    width: 100%;
    box-sizing: border-box; /* Incluye padding en ancho */
    padding: 8px; /* Reduce padding para más espacio */
    margin: 0; /* Elimina márgenes extras */
  }

  .step-container.step-1 label,
  .step-container.step-2 label {
    font-size: 14px; /* Texto más pequeño para labels largos */
    line-height: 1.3; /* Menos alto para caber */
    display: block; /* Stack vertical: Label arriba, input abajo */
    margin-bottom: 4px;
  }

  .step-container.step-1 input[type="number"],
  .step-container.step-2 select {
    width: 100% !important; /* Fuerza ancho completo */
    font-size: 16px; /* Mantiene touch-friendly para mobile */
    padding: 8px; /* Padding interno ajustado */
    box-sizing: border-box;
  }

  .modal-content {
    width: 95vw; /* Modal más ancho en mobile (95% viewport) */
    max-width: 95vw;
    margin: 0 auto;
  }

  .modal-body {
    padding: 10px; /* Menos padding general */
  }
}

/* Opcional: Para tablets (480-768px) */
@media (max-width: 768px) and (min-width: 481px) {
  .step-container.step-1 input[type="number"],
  .step-container.step-2 select {
    width: 100%;
  }
}

/* Uniformidad visual para Paso 1 (input number) y Paso 2 (select) */
#cantidad-alo-maestro,
#delegacion-alo-maestro {
  height: 40px; /* Alto uniforme */
  font-family: 'Roboto', sans-serif; /* Fuente consistente */
  font-size: 16px; /* Tamaño de letra uniforme */
  font-weight: 400; /* Peso normal */
  padding: 10px 12px; /* Padding interno equilibrado */
  border: 1px solid #ddd; /* Borde sutil */
  border-radius: 4px; /* Bordes redondeados */
  background-color: white; /* Fondo blanco */
  width: 100%; /* Ancho completo */
  box-sizing: border-box; /* Incluye padding/border en ancho */
  transition: border-color 0.3s ease; /* Suave hover/focus */
}

#cantidad-alo-maestro:focus,
#delegacion-alo-maestro:focus {
  outline: none;
  border-color: #2196F3; /* Azul en focus para feedback */
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); /* Sombra sutil */
}

/* Responsividad mobile (ya existente, reforzada para uniformidad) */
@media (max-width: 480px) {
  #cantidad-alo-maestro,
  #delegacion-alo-maestro {
    height: 45px; /* Ligeramente más alto en mobile para touch */
    font-size: 18px; /* Más grande para fácil tipeo/tap */
    padding: 12px; /* Padding extra en mobile */
  }
}

/* Antes de consultar */
.dia.azul-seleccion {
  background-color: #b3e5ff !important;
  color: #003366;
  border: 2px solid #007bff;
}

/* Después de consultar */
.dia.verde {
  background-color: #9af59a !important;
  color: #0b4d0b;
}
.dia.rojo {
  background-color: #f59a9a !important;
  color: #660000;
}
.dia {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}


/* --- APLICAR COLORES DE RESERVA TAMBIÉN A LOS BOTONES .btn-submit --- */

/* Estilo base de .btn-submit igual a .btn-reservar */
.btn-submit {
  width: 100%;
  background: linear-gradient(to right, var(--azul), #004a8c);
  color: var(--blanco);
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 92, 162, 0.2);
  margin-bottom: 20px;
}

/* Versiones personalizadas por albergue */
#btn-submit-maestro,
#btn-submit-alo-maestro {
  background: linear-gradient(to right, var(--azul), #004a8c);
  color: var(--blanco);
}

#btn-submit-tinku,
#btn-submit-alo-tinku {
  background: linear-gradient(to right, var(--celeste), #6abde6);
  color: var(--azul);
}

#btn-submit-aquilina,
#btn-submit-alo-aquilina {
  background: linear-gradient(to right, var(--amarillo), #e6b500);
  color: var(--gris-oscuro);
}

/* Hover y Active (heredados del estilo .btn-reservar) */
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-submit:active {
  transform: translateY(0);
}


#modal-alojamiento-maestro .modal-header {
  background: var(--azul);
  color: white;
}
#modal-alojamiento-tinku .modal-header {
  background: var(--celeste);
  color: var(--azul);
}
#modal-alojamiento-aquilina .modal-header {
  background: var(--amarillo);
  color: var(--gris-oscuro);
}

.inicio-rango, .fin-rango, .en-rango {
  background-color: var(--celeste) !important;
  color: white !important;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}



.azul-seleccion, .en-rango, .inicio-rango, .fin-rango {
  background-color: var(--celeste) !important;
  color: white !important;
}
.verde { background-color: #28a745 !important; color: white !important; }
.rojo { background-color: #dc3545 !important; color: white !important; }


/* cuando el calendario está loading aplica ligero blur */
.calendario-grid.loading {
  filter: blur(2px) grayscale(0.05);
  transition: filter .15s ease;
  pointer-events: none;
  opacity: 0.9;
}
.cal-loader { display:flex; gap:8px; align-items:center; justify-content:center; }


/* === GRUPO GENERAL === */
.phone-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* === PREFIJOS (0 y 15) === */
.phone-prefix {
  font-weight: bold;
  color: #005ca2;
  font-size: 1rem;
  background: #f0f4f8;
  padding: 0 10px;
  height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;     /* ← más redondeado como un form-control */
}

/* === INPUTS (prefijo y número) === */
.phone-part {
  text-align: center;
  height: 38px;
  border-radius: 6px !important; /* ← iguales al resto de los campos */
  border: 1px solid #ccc;
  padding: 0 8px;
  outline: none;
}

/* === Tamaño del campo de prefijo === */
.phone-input-group .phone-part.prefijo {
  width: 65px !important;  /* entra 3–4 dígitos */
}

/* === Tamaño del campo de número === */
.phone-input-group .phone-part.numero {
  width: 150px !important; /* entra perfecto 6–7 dígitos */
}

/* Quitar bordes raros si el navegador intenta unirlos */
.phone-input-group input {
  border-radius: 6px !important;
}

/*PASOS/*

/* contenedor general del paso (mantiene padding sin colorear todo) */
.paso-box {
  border-left: 4px solid #d0d0d0; /* gris por defecto */
  padding: 12px 12px;
  transition: border-color 200ms ease, background 200ms ease;
  background: transparent; /* importante: no colorear todo el recuadro */
  border-radius: 6px;
}

/* estado ENABLED (naranja lineal solo en la línea) */
.paso-box.enabled {
  border-left-color: #ff9800; /* naranja */
  background: rgba(255,152,0,0.03); /* muy sutil, opcional */
}

/* estado COMPLETED (verde solo en la línea) */
.paso-box.completed {
  border-left-color: #28a745; /* verde */
  background: rgba(40,167,69,0.02); /* muy sutil, opcional */
}

/* Si querés que el contenido texte cambie color cuando esté completed, opcional */
.paso-box.completed .form-row label,
.paso-box.completed label i,
.paso-box.completed i,
.paso-box.completed .form-group label {
  color: #2e7d32; /* tono de verde para labels (opcional) */
}


/* Unificar estilo de textos de todos los pasos */
.paso-box label {
    color: #005ca2 !important;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-group label {
    font-size: 16px;
}

/* Cuando un paso está completo, todos los textos internos se ponen verdes */
.paso-box.completed label,
.paso-box.completed i,
.paso-box.completed span,
.paso-box.completed .form-group label {
    color: #28a745 !important;
}

/* Bordes verdes a inputs cuando el paso está completo */
.paso-box.completed input {
    border-color: #28a745 !important;
}

/* Mantener los indicadores de paso como círculos perfectos */
.step-indicator {
    width: 38px !important;
    height: 38px !important;
    aspect-ratio: 1/1; /* siempre círculo */
    min-width: 38px;
    min-height: 38px;

    border-radius: 50%;
    /*/border: 2px solid #005bbf; /* azul */
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 700;
    /*color: #005bbf;*/

    flex-shrink: 0; /* evita que se achiquen */
}

/* Cuando están completos → verde */
.step-indicator.completed {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

/* —— Ajustes para pantallas pequeñas —— */
@media (max-width: 480px) {
    .step-indicator {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        min-height: 32px;

        font-size: 14px;
    }
}

#snackbar {
  visibility: hidden;
  min-width: 260px;
  margin-left: -130px;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 30px;
  font-size: 15px;
  opacity: 0;
  transition: opacity .4s ease;
}

#snackbar.show {
  visibility: visible;
  opacity: 1;
}

#snackbar.error { background: #c62828; }
#snackbar.success { background: #2e7d32; }




    .header-content {
    display: flex; /* Enable flexbox for alignment */
    justify-content: space-between; /* Logo on left, button on right */
    align-items: center; /* Vertically center items */
    /* Add any other styles if needed, e.g., padding or width */
}
.reglamento-btn {
    border-radius: 40px;
    background-image: linear-gradient(to bottom, #FEC800, #FEC800);
    padding: 10px; /* Sets left/right to 10px; top/bottom overridden below */
    font-weight: bold;
    font-size: 15px;
    border: 2px solid #FEC800;
    width: 163px;
    padding-bottom: 5px;
    padding-top: 5px;
    color: #4d4d4d; /* Retained from previous for text color */
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none; /* Remove underline if using <a> */
    cursor: pointer; /* Make it look clickable */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth animation */
    justify-content: center; /* Center text horizontally */
}

.reglamento-btn:hover {
    background-color: #FFC100; /* Slightly darker yellow on hover; adjust if needed */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Scrollbar personalizado para modales, le pone color azul */
.modal-content::-webkit-scrollbar {
  width: 10px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: #005CA2;
  border-radius: 20px; /* efecto gota */
  border: 3px solid transparent;
  background-clip: content-box;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #004a8c;
}

.modal-content {
  scrollbar-width: thin;
  scrollbar-color: #005CA2 transparent;
}

/* Estilo para la caja de pasos de reserva  */
.reserva-box {
  max-width: 620px;
  margin: 20px auto;
  padding: 1px 10px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-left: 6px solid #005CA2;
  border-right: 6px solid #005CA2;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
}

.reserva-title {
  margin-bottom: 10px;
  color: #005CA2;
  padding-bottom: 10px;
  font-size: 1.3rem;
}

@media (max-width: 480px) {
  .reserva-title {
    text-align: center;
  }
}

.reserva-steps {
  counter-reset: paso;
  list-style: none;
  padding-left: 0;
  color: #333;
  font-size: 0.9rem;
}

.reserva-steps > li {
  counter-increment: paso;
  position: relative;
  padding-left: 36px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.reserva-steps > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #005CA2;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  font-size: 0.9rem;
}

.reserva-steps ul {
  margin-top: 8px;
  padding-left: 18px;
}

.reserva-steps ul li {
  list-style-type: disc;
  margin-top: 4px;
  color: #555;
}

.reserva-steps strong {
  color: #000;
}