/* =========================================================================
   3CWeb — Reservar Reunión: calendario visual para compartir por email.
   Prefijo .reservar- para no tocar el sistema de diseño general. Reutiliza
   .form-card (tarjeta blanca) y .agenda-picker__hora (botón de hora) ya
   existentes en style.css para mantener coherencia visual con agenda.php.
   ========================================================================= */

.reservar-cal { margin-top: 6px; }
.reservar-cal__cab { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.reservar-cal__mes { font-weight: 700; font-size: 1.05rem; }
.reservar-cal__semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.reservar-cal__semana span {
    text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--texto-mute);
}
.reservar-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.reservar-cal__dia {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    font-size: .92rem; font-weight: 600; border: 1.5px solid transparent; transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s;
    position: relative; color: var(--negro);
}
.reservar-cal__dia--fuera, .reservar-cal__dia--sinhueco { color: var(--texto-mute); opacity: .32; }
.reservar-cal__dia--disponible {
    cursor: pointer; border-color: var(--gris-linea); background: #fff;
}
.reservar-cal__dia--disponible:hover, .reservar-cal__dia--disponible:focus-visible {
    border-color: var(--acento); transform: translateY(-3px); outline: none;
}
.reservar-cal__dia--disponible::after {
    content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--acento);
}
.reservar-cal__dia--hoy { box-shadow: inset 0 0 0 1.5px var(--gris-linea); }
.reservar-cal__dia.is-activo { background: var(--negro); border-color: var(--negro); color: #fff; }
.reservar-cal__dia.is-activo::after { background: #fff; }
.reservar-cal__leyenda { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .8rem; color: var(--texto-mute); }
.reservar-cal__leyenda span.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); display: inline-block; }

.reservar-horas { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gris-linea); }
.reservar-horas h3 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
.reservar-horas h3 span { color: var(--texto-mute); font-weight: 500; text-transform: capitalize; }

.reservar-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gris-linea); }

/* Barra lateral con una pequeña explicación + datos de contacto, reutilizando
   .info-list/.info-item de style.css (mismo patrón que contacto.php) para no
   inventar un componente nuevo. */
.reservar-layout { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.reservar-aside {
    position: sticky; top: 110px; border: 1px solid var(--gris-linea); border-radius: var(--radio-lg);
    padding: 26px;
}
.reservar-aside h3 { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.reservar-aside p { font-size: .87rem; color: var(--texto-mute); line-height: 1.55; margin: 0; }
.reservar-aside .info-list { margin-top: 22px; gap: 16px; }
.reservar-aside .info-item .ic { width: 42px; height: 42px; border-radius: 12px; }
.reservar-aside .info-item .ic svg { width: 18px; height: 18px; }
.reservar-aside .info-item b { font-size: .92rem; }
.reservar-aside .info-item small { font-size: .74rem; }

@media (max-width: 900px) {
    .reservar-layout { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
    .reservar-aside { position: static; }
}

@media (max-width: 480px) {
    .reservar-cal__dia { font-size: .82rem; border-radius: 10px; }
    .reservar-cal__semana span { font-size: .62rem; }
}