/* =============================================================================
   PUBLICO.CSS · Portal del cliente
   -----------------------------------------------------------------------------
   Se apoya en las variables de tema.css, así que hereda la paleta, el modo
   oscuro y el color de acento que el administrador configure en el panel. Aquí
   solo va lo que el panel no necesita.

   Criterio de diseño: esto se abre casi siempre desde un teléfono, muchas veces
   desde el enlace de un correo y con prisa. Por eso todo está pensado en
   vertical, con un bloque de contenido estrecho y centrado, y con las zonas
   pulsables grandes. Nada de rejillas de varias columnas que luego haya que
   deshacer en móvil: se construye para el móvil y se ensancha en pantalla
   grande, no al revés (apartado 3).
   ============================================================================= */

.pub-cuerpo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--salon-fondo);
}

/* ── Barra superior ──────────────────────────────────────────────────────── */

.pub-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.1rem;
    background: var(--salon-superficie);
    border-bottom: 1px solid var(--salon-borde);
    position: sticky;
    top: 0;
    z-index: 30;
}

.pub-marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--salon-texto);
    min-width: 0;
}

/* El logotipo del centro en el portal. 44 px: es lo primero que ve una clienta
   al entrar desde el enlace de un correo, y a 34 px no se reconocía. */
.pub-marca__logo {
    height: 44px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    border-radius: 8px;
}

.pub-marca__inicial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--salon-champagne);
    color: var(--salon-sobre-champagne);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
    flex: none;
}

.pub-marca__nombre {
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pub-barra__acciones { display: flex; align-items: center; gap: .4rem; flex: none; }

.pub-barra__enlace {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: var(--salon-radio-sm);
    text-decoration: none;
    color: var(--salon-texto-suave);
    font-size: .85rem;
}

.pub-barra__enlace:hover { background: var(--salon-superficie-hover); color: var(--salon-texto); }

/* ── Contenido ───────────────────────────────────────────────────────────── */

.pub-principal {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1.1rem 3rem;
}

.pub-tarjeta {
    background: var(--salon-superficie);
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio-lg);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--salon-sombra);
}

.pub-tarjeta--centrada { text-align: center; }

.pub-titulo {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0 0 .5rem;
}

.pub-texto {
    color: var(--salon-texto-suave);
    margin: 0;
    line-height: 1.6;
}

/* Icono grande de estado, arriba de las páginas de resultado. */
.pub-icono {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 1rem;
}

.pub-icono--exito { background: var(--salon-exito-suave); color: var(--salon-exito); }
.pub-icono--aviso { background: var(--salon-aviso-suave); color: var(--salon-aviso); }
.pub-icono--error { background: var(--salon-error-suave); color: var(--salon-error); }
.pub-icono--info  { background: var(--salon-info-suave);  color: var(--salon-info); }

/* ── Resumen de la cita ──────────────────────────────────────────────────── */

.pub-resumen {
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio);
    overflow: hidden;
    margin: 1.2rem 0;
    text-align: left;
}

.pub-resumen__fila {
    display: flex;
    gap: 1rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--salon-borde);
}

.pub-resumen__fila:last-child { border-bottom: 0; }

.pub-resumen__etiqueta {
    color: var(--salon-texto-tenue);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 104px;
    flex: none;
    padding-top: .1rem;
}

.pub-resumen__valor { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* La fecha y la hora son lo que la persona busca al abrir el correo: se
   destacan por tamaño, no por color, para que funcionen también impresas. */
.pub-cuando {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

/* ── Acciones ────────────────────────────────────────────────────────────── */

.pub-acciones {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1.2rem;
}

.pub-acciones .btn { padding: .7rem 1rem; font-weight: 500; }

/* Los botones que disparan una acción van dentro de su propio <form>, para
   viajar con el token CSRF. `display: contents` hace que el formulario no
   genere caja, así el botón participa en este flex como si fuera hijo directo
   y no hay que envolver la fila en una rejilla postiza. */
.pub-acciones form { display: contents; }

@media (min-width: 520px) {
    .pub-acciones { flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .pub-acciones .btn { flex: 1 1 auto; min-width: 190px; }
}

/* ── Evaluación por estrellas ────────────────────────────────────────────────
   Se implementa con radios reales dentro de un fieldset, en orden inverso, para
   que funcione con teclado y con lector de pantalla. Un puñado de <i> con un
   `onclick` habría sido más corto y habría dejado fuera a quien no usa ratón. */

.pub-estrellas {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .25rem;
    border: 0;
    padding: 0;
    margin: 0;
    /* Ancla a los radios ocultos. Sin esto se posicionan contra el bloque
       contenedor inicial y acaban donde nadie eligió. */
    position: relative;
}

/* Los radios se ocultan a la vista, pero siguen siendo los que mandan: el foco,
   las flechas del teclado y el lector de pantalla trabajan sobre ellos.

   Se anclan con `top`/`left` y se les quita el ratón de encima. Sin eso son
   cinco cajas transparentes, posicionadas —y por tanto pintadas por delante de
   las etiquetas—, que caen donde cada motor resuelva la posición estática
   dentro de un flex invertido, y que siguen siendo sensibles al clic. Nunca se
   comprobó que llegaran a estorbar, pero dejar la posición al azar del
   navegador no aporta nada. Pulsar es siempre cosa de la etiqueta;
   `pointer-events` no afecta al foco ni al teclado. */
.pub-estrellas input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pub-estrellas label {
    font-size: 2rem;
    line-height: 1;
    color: var(--estrella-apagada, var(--salon-gris-300));
    cursor: pointer;
    transition: color var(--salon-transicion), transform var(--salon-transicion);
    /* Por delante de los radios ocultos pase lo que pase. */
    position: relative;
}

.pub-estrellas label:hover,
.pub-estrellas label:hover ~ label,
.pub-estrellas input:checked ~ label { color: var(--salon-acento); }

.pub-estrellas label:active { transform: scale(.92); }

/* El foco tiene que verse: es la única pista de dónde está quien navega con
   teclado, y el color de relleno ya lo usa el estado «seleccionada». */
.pub-estrellas input:focus-visible + label {
    outline: 2px solid var(--salon-texto);
    outline-offset: 3px;
    border-radius: 4px;
}

/* El modo oscuro cambia el color de la estrella APAGADA, y lo hace a través de
   una variable en el contenedor en vez de volver a fijar `color` en la etiqueta.

   Fijarlo en la etiqueta era el error: `:root[data-tema="oscuro"] .pub-estrellas
   label` pesa (0,3,1) y `.pub-estrellas input:checked ~ label` pesa (0,2,2), así
   que en oscuro el gris ganaba siempre y las estrellas no se marcaban jamás —ni
   al pulsarlas ni al pasar por encima—. En claro no había conflicto, de ahí que
   pareciera cosa del navegador: solo fallaba en quien abría la página con el
   sistema en oscuro.

   Con la variable, el tema decide el color de reposo y las reglas de estado
   siguen mandando sobre él, que es el orden correcto. */
.pub-estrellas { --estrella-apagada: var(--salon-gris-300); }

:root[data-tema="oscuro"] .pub-estrellas { --estrella-apagada: var(--salon-gris-700); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pub-pie {
    border-top: 1px solid var(--salon-borde);
    background: var(--salon-superficie);
    margin-top: auto;
}

.pub-pie__interior {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.6rem 1.1rem 1rem;
    display: grid;
    gap: 1.4rem;
    font-size: .82rem;
    color: var(--salon-texto-suave);
}

@media (min-width: 560px) {
    .pub-pie__interior { grid-template-columns: 1fr 1.3fr; }
}

.pub-pie__titulo {
    font-weight: 600;
    color: var(--salon-texto);
    margin-bottom: .4rem;
}

.pub-pie__bloque > div { margin-bottom: .25rem; }

/* Enlace de WhatsApp del pie. Con el verde de la marca, que es lo que la gente
   reconoce sin leer: un enlace de texto más entre la dirección y el correo
   habría pasado desapercibido justo donde se busca cuando surge una duda. */
.pub-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: #25D366;
    color: #0b3d20;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    transition: filter var(--salon-transicion);
}

.pub-whatsapp:hover,
.pub-whatsapp:focus-visible { filter: brightness(1.08); color: #0b3d20; }

.pub-whatsapp i { font-size: 1.05rem; }

.pub-pie__linea {
    text-align: center;
    padding: .8rem 1rem 1.2rem;
    font-size: .76rem;
    color: var(--salon-texto-tenue);
}

@media print {
    .pub-barra__acciones,
    .pub-acciones,
    .pub-pie__bloque--legal { display: none; }
    .pub-tarjeta { border: 0; box-shadow: none; }
}

/* ── Indicador de pasos ──────────────────────────────────────────────────────
   En móvil se reduce al número: cuatro etiquetas de texto no caben en 360 px y
   partirlas en dos líneas empuja el contenido fuera de la pantalla. */

.pub-pasos {
    display: flex;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    counter-reset: paso;
}

.pub-paso {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--salon-texto-tenue);
    border-top: 3px solid var(--salon-borde);
    padding-top: .5rem;
    min-width: 0;
}

.pub-paso span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--salon-borde);
    color: var(--salon-texto-suave);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 650;
    flex: none;
}

.pub-paso--activo { color: var(--salon-texto); border-top-color: var(--salon-texto); font-weight: 600; }
.pub-paso--activo span { background: var(--salon-boton-solido); color: var(--salon-sobre-boton-solido); }

.pub-paso--hecho { border-top-color: var(--salon-exito); }
.pub-paso--hecho span { background: var(--salon-exito); color: #fff; }

@media (max-width: 480px) {
    .pub-paso { font-size: 0; gap: 0; justify-content: center; }
    .pub-paso span { font-size: .7rem; }
}

/* ── Opción seleccionable (servicio, profesional) ────────────────────────────
   Es un <label> con el control dentro: así toda la tarjeta es zona pulsable,
   que en un teléfono es la diferencia entre acertar y no acertar. */

/* ── Categorías de servicio ──────────────────────────────────────────────────
   Son `<details>`: se pliegan sin JavaScript y responden al teclado solas. La
   cabecera es todo el `<summary>`, de borde a borde, para que en el teléfono se
   pueda pulsar sin apuntar. */

.pub-grupo {
    margin-bottom: .6rem;
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio);
    overflow: hidden;
}

.pub-grupo__titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--salon-texto);
    font-weight: 650;
    cursor: pointer;
    background: var(--salon-superficie);
    min-height: 48px;
    user-select: none;
}

/* El triángulo nativo se quita: estorba al diseño y se sustituye por la flecha
   propia, que además gira al abrir. */
.pub-grupo__titulo::-webkit-details-marker { display: none; }
.pub-grupo__titulo::marker { content: ''; }

.pub-grupo__titulo:hover { background: var(--salon-superficie-hover); }

.pub-grupo__titulo:focus-visible {
    outline: 2px solid var(--salon-acento);
    outline-offset: -2px;
}

.pub-grupo__nombre { flex: 1; min-width: 0; }

.pub-grupo__cuenta {
    font-size: .72rem;
    font-weight: 600;
    color: var(--salon-texto-tenue);
    background: var(--salon-gris-100);
    border-radius: 999px;
    padding: .1rem .5rem;
    letter-spacing: 0;
}

/* Lo elegido dentro de un grupo plegado tiene que seguir viéndose: si no, el
   cliente cree que perdió la selección y la vuelve a marcar. */
.pub-grupo__elegidos {
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--salon-sobre-boton-solido);
    background: var(--salon-boton-solido);
    border-radius: 999px;
    padding: .1rem .55rem;
}

.pub-grupo__flecha {
    font-size: .7rem;
    color: var(--salon-texto-tenue);
    transition: transform var(--salon-transicion);
}

.pub-grupo[open] .pub-grupo__flecha { transform: rotate(180deg); }

.pub-grupo[open] .pub-grupo__titulo { border-bottom: 1px solid var(--salon-borde); }

.pub-grupo .pub-opcion { border-radius: 0; border: none; margin-bottom: 0; }

/* La separación es entre servicios, no entre etiquetas: un servicio con tramos
   arrastra debajo su selector y los dos son la misma unidad. */
.pub-grupo .pub-servicio + .pub-servicio { border-top: 1px solid var(--salon-borde); }

.pub-opcion {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio);
    margin-bottom: .5rem;
    cursor: pointer;
    background: var(--salon-superficie);
    transition: border-color var(--salon-transicion), background var(--salon-transicion);
}

.pub-opcion:hover { border-color: var(--salon-borde-fuerte); background: var(--salon-superficie-hover); }

.pub-opcion:has(input:checked) {
    border-color: var(--salon-texto);
    background: var(--salon-superficie);
    box-shadow: inset 0 0 0 1px var(--salon-texto);
}

/* `:has()` no existe en navegadores anteriores a 2023; el anillo de foco
   asegura que al menos se vea cuál está enfocada. */
.pub-opcion:focus-within { outline: 2px solid var(--salon-texto); outline-offset: 2px; }

.pub-opcion input { flex: none; margin: 0; }

.pub-opcion__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pub-opcion__titulo { font-weight: 600; }
.pub-opcion__sub    { font-size: .82rem; color: var(--salon-texto-suave); }
.pub-opcion__meta   { font-size: .78rem; color: var(--salon-texto-tenue); }

.pub-opcion__precio { font-weight: 600; white-space: nowrap; flex: none; }

/* ── Tramos ───────────────────────────────────────────────────────────────
   Aparecen bajo el servicio, ya marcado. Van sangrados y sobre un fondo algo
   distinto para que se lean como una pregunta DENTRO de ese servicio y no como
   otra lista de servicios: sin la sangría, en el teléfono los cuatro largos de
   cabello parecían cuatro alisados distintos. */
.pub-tramos {
    padding: .2rem .85rem 1rem 2.4rem;
    background: var(--salon-superficie-hover);
}

.pub-tramos__titulo {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--salon-texto-suave);
    margin-bottom: .5rem;
}

.pub-tramos__opciones { display: flex; flex-direction: column; gap: .35rem; }

.pub-tramos__nota {
    margin: .6rem 0 0;
    font-size: .75rem;
    color: var(--salon-texto-tenue);
}

.pub-tramo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .7rem;
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio);
    background: var(--salon-superficie);
    cursor: pointer;
    transition: border-color var(--salon-transicion);
}

.pub-tramo:hover { border-color: var(--salon-borde-fuerte); }

.pub-tramo:has(input:checked) { box-shadow: inset 0 0 0 1px var(--salon-texto); border-color: var(--salon-texto); }

.pub-tramo:focus-within { outline: 2px solid var(--salon-texto); outline-offset: 2px; }

.pub-tramo input { flex: none; margin: 0; }

.pub-tramo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.pub-tramo__nombre { font-weight: 600; font-size: .88rem; }
.pub-tramo__sub    { font-size: .78rem; color: var(--salon-texto-suave); }
.pub-tramo__meta   { font-size: .78rem; color: var(--salon-texto-tenue); }

@media (max-width: 575.98px) {
    .pub-tramos { padding-left: 1rem; }
}

.pub-opcion__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--salon-champagne);
    color: var(--salon-sobre-champagne);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
    flex: none;
    overflow: hidden;
}

.pub-opcion__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Horas disponibles ───────────────────────────────────────────────────────
   Rejilla automática: se ajusta sola al ancho sin puntos de corte. Cada botón
   mide al menos 44 px de alto, el mínimo recomendado para tocar con el dedo. */

.pub-horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
}

.pub-hora {
    padding: .7rem .4rem;
    min-height: 44px;
    border: 1px solid var(--salon-borde-fuerte);
    border-radius: var(--salon-radio-sm);
    background: var(--salon-superficie);
    color: var(--salon-texto);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--salon-transicion);
}

.pub-hora:hover { border-color: var(--salon-texto); }

.pub-hora--elegida {
    background: var(--salon-boton-solido);
    border-color: var(--salon-boton-solido);
    color: var(--salon-sobre-boton-solido);
}

/* ── Ancho de la página ──────────────────────────────────────────────────────
   El portal nació estrecho porque todo lo que tenía eran formularios de una
   columna abiertos desde el correo en un teléfono. El catálogo de la tienda es
   lo primero que necesita más sitio; el resto sigue igual. */

.pub-principal--ancho { max-width: 1100px; }

/* ── Carrito en la barra ─────────────────────────────────────────────────────
   Vive aquí y no en tienda.css porque la cabecera lo pinta en TODAS las páginas
   públicas mientras la tienda esté encendida, y tienda.css solo se carga en las
   páginas de la tienda. */

.pub-barra__carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--salon-radio-sm);
    color: var(--salon-texto);
    text-decoration: none;
    transition: background var(--salon-transicion);
}

.pub-barra__carrito:hover { background: var(--salon-superficie-hover); }

.pub-barra__contador {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--salon-boton-solido);
    color: var(--salon-sobre-boton-solido);
    font-size: .68rem;
    font-weight: 650;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Texto legal ──────────────────────────────────────────────────────────
   El contenido llega como HTML ya saneado desde `legal_documents`, así que
   aquí solo se le da tipografía de lectura larga: son documentos que alguien
   tiene que leer entero antes de aceptarlos, no un aviso de tres líneas.
   Sin esto salían con el interlineado por defecto del navegador y una medida
   de línea que en un monitor ancho llega a los ciento veinte caracteres. */
.pub-legal {
    max-width: 68ch;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--salon-texto-suave);
}

.pub-legal h2,
.pub-legal h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--salon-texto);
    margin: 1.8rem 0 .6rem;
}

.pub-legal p    { margin: 0 0 1rem; }
.pub-legal ul,
.pub-legal ol   { margin: 0 0 1rem 1.2rem; padding: 0; }
.pub-legal li   { margin-bottom: .35rem; }
.pub-legal a    { color: var(--salon-texto); text-decoration: underline; }

/* ── Calendario del paso 3 ────────────────────────────────────────────────
   Sustituye al `<input type="date">` nativo, que es más simple pero no puede
   apagar los días sin cupo. La rejilla es de siete columnas iguales y los
   botones cuadrados, para que el mes quepa en un teléfono sin desplazarse. */

.pub-cal {
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio);
    padding: .8rem;
    background: var(--salon-superficie);
}

.pub-cal__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.pub-cal__mes {
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: -.01em;
}

.pub-cal__mover {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--salon-borde);
    border-radius: var(--salon-radio-sm);
    background: transparent;
    color: var(--salon-texto-suave);
}

.pub-cal__mover:hover:not(:disabled) {
    background: var(--salon-superficie-hover);
    color: var(--salon-texto);
}

.pub-cal__mover:disabled { opacity: .35; cursor: not-allowed; }

.pub-cal__semana,
.pub-cal__rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}

.pub-cal__semana {
    margin-bottom: .25rem;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    color: var(--salon-texto-tenue);
    text-transform: uppercase;
}

.pub-cal__vacio { aspect-ratio: 1; }

.pub-cal__dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--salon-radio-sm);
    background: var(--salon-superficie-hover);
    color: var(--salon-texto);
    font-size: .92rem;
    font-weight: 500;
    transition: background var(--salon-transicion), border-color var(--salon-transicion);
}

.pub-cal__dia:hover:not(:disabled) { border-color: var(--salon-acento); }

/* Un día sin horas se ve apagado Y va `disabled`: si solo estuviera en gris,
   se pulsaría igual y no pasaría nada, que es peor que no poder pulsarlo. */
.pub-cal__dia:disabled {
    background: transparent;
    color: var(--salon-texto-tenue);
    opacity: .4;
    cursor: not-allowed;
}

/* El día de hoy se marca con un punto, no con color de fondo: el fondo ya
   significa «elegido» y dos cosas distintas no pueden decirse igual. */
.pub-cal__dia--hoy { position: relative; font-weight: 700; }

.pub-cal__dia--hoy::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.pub-cal__dia--elegido {
    background: var(--salon-acento);
    border-color: var(--salon-acento);
    color: var(--salon-sobre-acento);
    font-weight: 650;
}