/* PerseFone360 — Restaurante: lo poco que añade a la web pública de la peluquería (assets/salon/publico.css),
   que da la estructura y los temas. Solo usa las variables del tema. */

/* Selector de personas: los mismos botones que las horas, más un campo «Más» */
.personas { align-items: center; }
.personas-mas { width: 84px; min-height: 44px; border: 1.5px solid var(--linea); border-radius: min(var(--radio-ctl), 12px); background: var(--campo);
    color: var(--texto); font: inherit; font-weight: 600; text-align: center; padding: 0 8px; }
.personas-mas:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

/* Carta con alérgenos */
.carta-sec { margin: 18px 0 8px; font-family: var(--f-titulo); font-size: 1.15rem; color: var(--texto); }
.carta-sec:first-of-type { margin-top: 4px; }
.s-carta .sv-d .alerg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.s-carta .sv-d .alerg span { font-size: .74rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso); }
.s-carta .sv-d .alerg span.dieta { background: var(--ok-fondo); color: var(--ok); }
.trazas { margin: 14px 0 0; font-size: .82rem; color: var(--suave); }
.menu-dia { margin: 0; white-space: pre-line; font-size: 1.02rem; }

/* Horario por turnos */
.horario small { font-size: .78rem; color: var(--suave); font-weight: 500; text-transform: lowercase; }

.campo select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid color-mix(in srgb, var(--texto) 22%, transparent);
    border-radius: min(var(--radio-ctl), 14px); background: var(--campo); color: var(--texto); font: inherit; }
.campo select:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }

/* Hoy hay servicio, pero todavía no (o ya no) a esta hora: punto ámbar, no rojo */
.estado.hoy-sirve i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.3); }