/**
* Formulario de reserva.
* Paleta del logo de Academia de Mano: celeste #5CB6E7, verde #9ECB3B.
* Los tonos del logo no alcanzan contraste para texto, así que el texto usa
* los derivados oscuros (#145E85 y #5A751F).
*/
.adm-reserva {
--adm-sky: #5CB6E7;
--adm-sky-dark: #145E85;
--adm-sky-soft: #F0F8FC;
--adm-sky-100: #DCEEF9; /* hover: perceptible sobre blanco, cosa que #F0F8FC no era */
--adm-green: #9ECB3B;
--adm-green-dark: #5A751F;
--adm-border: #DCE7ED;
--adm-text: #16242D;
--adm-text-2: #4A5C67;
max-width: 720px;
color: var(--adm-text);
}
.adm-reserva form { margin: 0; }
/* El título de cada paso es un encabezado de sección, no un título de página: el
del tema venía a 1,75rem y competía con el "Calendario" que encabeza la página. */
.adm-reserva h3 {
margin: 0 0 14px;
font-size: 1.35rem;
line-height: 1.25;
}
/* ---------- Pasos ---------- */
/* Una línea debajo de los pasos separa "dónde estoy" de "qué tengo que hacer". Sin
ella la barra de progreso flota como si fuera parte del contenido. */
.adm-reserva .adm-pasos {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
list-style: none;
margin: 0 0 18px;
padding: 0 0 16px;
border-bottom: 1px solid var(--adm-border);
font-size: 13px;
color: var(--adm-text-2);
}
.adm-reserva .adm-pasos li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 12px 3px 3px;
border-radius: 999px;
background: #f2f5f7;
}
/* El número es lo que convierte cinco etiquetas sueltas en una secuencia: dice cuántos
pasos hay y en cuál va. Círculo blanco en los tres estados, para que el ojo lo siga
como un mismo elemento que avanza. */
.adm-reserva .adm-paso-n {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 21px;
height: 21px;
border-radius: 50%;
background: #fff;
color: var(--adm-text-2);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.adm-reserva .adm-pasos .adm-paso-hecho {
background: var(--adm-sky-soft);
color: var(--adm-sky-dark);
}
.adm-reserva .adm-pasos .adm-paso-hecho .adm-paso-n,
.adm-reserva .adm-pasos .adm-paso-actual .adm-paso-n {
color: var(--adm-sky-dark);
}
.adm-reserva .adm-pasos .adm-paso-actual {
background: var(--adm-sky-dark);
color: #fff;
font-weight: 600;
}
/* ---------- Opciones (servicio, profesional) ---------- */
.adm-reserva .adm-opciones {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.adm-reserva .adm-opcion {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
text-align: left;
background: #fff;
border: 1px solid var(--adm-border);
border-left: 4px solid var(--adm-sky);
border-radius: 4px;
padding: 14px 16px;
cursor: pointer;
font: inherit;
color: var(--adm-text);
transition: border-color .15s, background .15s;
}
/* El color va declarado sí o sí, no heredado: el reset de Hello Elementor trae
`button:hover { background:#c36; color:#fff }`. Acá el fondo lo pisábamos y el color no,
así que el título quedaba blanco sobre celeste pálido —invisible— mientras el precio se
seguía viendo porque tiene color propio.
Se cubre también :focus, no solo :focus-visible, porque la regla del tema usa :focus. */
.adm-reserva .adm-opcion:hover,
.adm-reserva .adm-opcion:focus,
.adm-reserva .adm-opcion:focus-visible {
background: var(--adm-sky-100);
border-color: var(--adm-sky);
border-left-color: var(--adm-green-dark);
color: var(--adm-text);
}
.adm-reserva .adm-opcion:hover .adm-opcion-meta,
.adm-reserva .adm-opcion:focus .adm-opcion-meta,
.adm-reserva .adm-opcion:hover .adm-opcion-desc,
.adm-reserva .adm-opcion:focus .adm-opcion-desc {
color: var(--adm-text-2);
}
.adm-reserva .adm-opcion-titulo { font-weight: 600; font-size: 1.05rem; }
.adm-reserva .adm-opcion-meta { color: var(--adm-text-2); font-size: .9rem; }
.adm-reserva .adm-opcion-desc { color: var(--adm-text-2); font-size: .88rem; margin-top: 4px; }
/* ---------- Calendario del mes ---------- */
.adm-reserva .adm-cal {
border: 1px solid var(--adm-border);
border-radius: 6px;
padding: 12px;
margin-bottom: 18px;
}
.adm-reserva .adm-cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.adm-reserva .adm-cal-nav form { margin: 0; }
.adm-reserva .adm-cal-mes {
font-weight: 600;
color: var(--adm-sky-dark);
text-transform: capitalize;
font-size: 1.02rem;
}
.adm-reserva .adm-cal-flecha {
background: #fff;
border: 1px solid var(--adm-border);
border-radius: 4px;
color: var(--adm-sky-dark);
cursor: pointer;
font: inherit;
font-size: 1.2rem;
line-height: 1;
padding: 5px 13px;
}
.adm-reserva .adm-cal-flecha:hover,
.adm-reserva .adm-cal-flecha:focus {
background: var(--adm-sky-100);
border-color: var(--adm-sky);
color: var(--adm-sky-dark);
}
/* Mantiene el nombre del mes centrado cuando no hay flecha de "mes anterior". */
.adm-reserva .adm-cal-nav-hueco { width: 44px; }
.adm-reserva .adm-cal-encabezado,
.adm-reserva .adm-cal-grilla {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.adm-reserva .adm-cal-encabezado {
margin-bottom: 4px;
font-size: .7rem;
letter-spacing: .04em;
color: var(--adm-text-2);
text-align: center;
}
/* Los dias con horarios son