@import url("tokens.css");

#reserva-app, .cq-app, .espacio-app {
    background: var(--papel); color: var(--tinta); border-radius: 32px; padding: clamp(18px, 3vw, 36px);
}
.rs-paso { font-family: var(--fuente-serif); font-size: 28px; margin-bottom: 18px; }
.rs-paso span { color: var(--hoja); }
.rs-paso em { font-style: italic; color: var(--tinta-suave); font-size: 18px; }
.rs-modalidad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.rs-modalidad button {
    text-align: left; border: 1px solid var(--linea); background: var(--cream); border-radius: 22px; padding: 18px; cursor: pointer; font-family: var(--fuente-serif); font-size: 26px;
}
.rs-modalidad button[aria-selected="true"] { background: var(--sage-deep); color: var(--cream); border-color: var(--sage-deep); }
.rs-servicios { display: grid; gap: 12px; }
.rs-servicio {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    border: 1px solid var(--linea); border-radius: 22px; padding: 16px 16px 16px 18px; background: var(--cream);
}
.rs-servicio h3 { font-size: 26px; }
.rs-servicio p { color: var(--tinta-suave); }
.rs-servicio-meta { display: grid; justify-items: end; gap: 6px; }
.rs-servicio-meta strong { font-family: var(--fuente-serif); font-size: 24px; }
.rs-nota, .rs-ayuda { color: var(--tinta-suave); margin: 8px 0; }
.rs-error, .cq-error { color: #8d3d32; margin: 8px 0; }
.rs-volver { background: none; border: 0; color: var(--hoja); cursor: pointer; margin-bottom: 8px; font-weight: 700; }
.rs-cal-cabeza { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.rs-cal-cabeza h3, .rs-subtitulo { font-size: 28px; }
.rs-cal-cabeza button, .ag-nav button { border: 1px solid var(--linea); background: var(--cream); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; }
.rs-semana, .rs-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; justify-items: center; }
.rs-semana { color: var(--tinta-suave); font-size: 13px; margin-bottom: 6px; }
.rs-dia {
    border: 0; background: transparent; border-radius: 10px; width: 40px; height: 40px;
    cursor: default; color: #a9a49a; font-weight: 650; font-size: 15px;
    transition: background 0.15s ease, color 0.15s ease;
}
.rs-dia.libre { background: transparent; color: var(--sage-deep); font-weight: 700; cursor: pointer; }
.rs-dia.libre:hover,
.rs-dia.libre:focus-visible { background: var(--oliva-suave); outline: 2px solid var(--sage-deep); outline-offset: 1px; }
.rs-dia.elegido,
.rs-dia.elegido:hover,
.rs-dia.elegido:focus-visible { background: var(--sage-deep); color: var(--cream); outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.rs-dia.hoy:not(.elegido) { box-shadow: inset 0 0 0 1.5px var(--oliva); }
.rs-dia-vacio { visibility: hidden; }
.rs-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-hora { border: 1px solid var(--linea); background: white; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.rs-hora.activo { background: var(--sage-deep); color: var(--cream); }
.rs-grilla, .rs-resumen, .espacio-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rs-ancho, .rs-check, .rs-metodos, .rs-cupon, .rs-banco { grid-column: 1 / -1; }
.rs-campo { display: grid; gap: 6px; font-weight: 650; }
.rs-campo input, .rs-campo textarea, .rs-campo select, .rs-cupon input, .cq-pregunta input, .cq-pregunta textarea, .espacio-form input {
    width: 100%; border: 1px solid var(--linea); border-radius: 14px; padding: 12px; background: white;
}
.rs-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.rs-resumen, .rs-banco, .rs-despues { background: var(--cream); border-radius: 18px; padding: 14px; margin: 12px 0; }
.rs-resumen p, .rs-total { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.rs-metodo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linea); }
.rs-metodo-principal { margin-top: 8px; padding: 14px; border: 2px solid var(--hoja); border-radius: 16px; background: var(--oliva-suave); }
.rs-metodo input:disabled + span { opacity: 0.55; }
.rs-metodo small, .rs-ejemplo { display: block; color: var(--tinta-suave); font-weight: 450; }
.rs-ejemplo { color: #8d3d32; }
.rs-cuenta-caja { background: #f6e3c2; border-radius: 16px; padding: 14px; font-size: 18px; }
#rs-cuenta { font-variant-numeric: tabular-nums; font-size: 32px; }
.rs-listo h3 { font-size: 40px; line-height: 1.05; }
.rs-codigo { font-size: 28px; font-family: var(--fuente-serif); margin: 8px 0; }
.rs-despues { display: grid; gap: 10px; }
.rs-despues .boton, .rs-despues .boton-linea { justify-self: start; }

.cq-app, .espacio-app { min-height: 60vh; }
.cq-kicker { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--hoja); font-weight: 700; }
.cq-app h1, .espacio-app h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.02; margin: 6px 0 12px; }
.cq-barra { height: 8px; background: var(--cream-2); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.cq-barra span { display: block; height: 100%; background: var(--hoja); }
.cq-pregunta { border: 0; margin: 14px 0; }
.cq-pregunta legend { font-weight: 700; margin-bottom: 8px; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-chip { border: 1px solid var(--linea); background: white; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.cq-chip.activo { background: var(--sage-deep); color: var(--cream); border-color: var(--sage-deep); }
.cq-numero { display: flex; align-items: center; gap: 8px; }
.cq-numero button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: var(--cream); cursor: pointer; }
.cq-numero input { max-width: 120px; }
.cq-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cq-consent, .cq-demo { background: var(--oliva-suave); border-radius: 16px; padding: 14px; margin: 12px 0; }
.cq-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.espacio-hora { border-top: 1px solid var(--linea); padding: 16px 0; display: grid; gap: 6px; }
.pagina-suave { background: var(--cream); min-height: 100vh; }
.pagina-suave .cabecera { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
    .rs-dia { transition: none; }
}
@media (max-width: 720px) {
    .rs-modalidad, .rs-servicio, .rs-grilla { grid-template-columns: 1fr; }
    .rs-servicio-meta { justify-items: start; }
    .rs-dia { width: 36px; height: 36px; font-size: 14px; }
}