/* agenda — modal de "Agendar Visita". Reskin Nocturne manteniendo las
   clases existentes (usadas por agenda.js).

   Ojo: propiedad.blade.php trae un <style> embebido (para el modal legacy
   de "compartir por email") que define un ".modal-content{background:#fff}"
   genérico y se carga DESPUÉS de este archivo, así que gana el empate de
   especificidad y pinta este modal de blanco. Se lo neutraliza acá con un
   selector con #id, que siempre tiene más especificidad que una sola clase
   sin importar el orden de carga. */
#agendaModal .modal-content.agenda-wrapper {
    max-width: 440px;
    width: 92%;
    margin: 6% auto;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    position: relative;
}
.agenda-header { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); color: var(--color-text); padding: 20px; text-align: center; border-bottom: 1px solid var(--color-divider); }
.agenda-header h2 { margin: 0; font-size: 20px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.agenda-header p { opacity: 0.7; margin: 4px 0 0; }
.agenda-body { padding: 20px; color: var(--color-text); display: flex; flex-direction: column; gap: var(--space-3); }

.agenda-slots-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.slot-btn { border: 1px solid var(--color-accent); color: var(--color-accent); padding: 8px; text-align: center; border-radius: var(--radius-md); cursor: pointer; transition: 0.2s; background: transparent; }
.slot-btn.selected { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-text); }

.btn-confirmar-agenda { width: 100%; background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); padding: 12px; margin-top: 15px; border-radius: var(--radius-md); cursor: pointer; font-weight: var(--font-heading-weight); font-family: var(--font-heading); }
.btn-confirmar-agenda:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-confirmar-agenda:disabled { border-color: var(--color-divider); color: color-mix(in srgb, var(--color-text) 45%, transparent); cursor: not-allowed; }

.close-agenda { position: absolute; right: 15px; top: 10px; color: var(--color-text); opacity: 0.7; font-size: 25px; cursor: pointer; }
.close-agenda:hover { opacity: 1; color: var(--color-accent); }
.spinner-agenda { width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--color-text) 20%, transparent); border-top: 2px solid var(--color-accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.agenda-status { text-align: center; opacity: 0.75; padding: 10px 0; }

/* El fondo del modal ahora permite scroll */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.iti{
    width: 100%;
}