/* Reserva en línea — «en silencio».
   Aprobado por Roberto el 04/09/2026; el mockup vive en
   docs/mockups/reserva-silencio.html y la ficha en docs/reserva-spec.md.

   La regla de esta hoja: sólo tiene color lo que se toca (la línea de
   progreso y el botón, en champagne). Todo lo demás es tinta, dos grises y
   filetes de un pixel. Nada de tarjetas, sombras, vidrio ni fotos: eso es de
   otro cliente. Nada por encima de 22 px en celular ni de 30 en escritorio.

   Esta hoja NO carga dashboard.css: el panel pesa 58 KB y es oscuro. Acá se
   entra desde el celular, con datos, a hacer una sola cosa. */

:root {
  --papel: #FBFAF7;
  --tinta: #171310;
  /* Más oscuros desde el 01/10 (Roberto: «el color de las letras se pierde en
     el blanco»): --gris da 5.3:1 sobre el papel, el mínimo para leer letra
     chica; --gris-2 queda para lo apagado a propósito (días cerrados, horas
     tomadas), en 3.5:1. */
  --gris: #6E6860;
  --gris-2: #8C867E;
  --linea: rgba(26, 23, 20, .12);
  --linea-f: rgba(26, 23, 20, .3);
  --champagne: #C9A876;
  --champagne-2: #E2CBA4;
  --laton: #B8955F;
  --salvia: #6F8F72;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* El foco tiene que verse: se reserva desde el teclado y con lector de pantalla. */
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }

/* En celular la columna de la izquierda no existe: la cuentan la línea de
   progreso y «lo que llevás». */
.lado { display: none; }

.sh { padding: 0 22px 30px; }

/* ── El paso ─────────────────────────────────────────────────────────────── */
.entra { animation: sube .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Progreso: cinco tramos, uno por paso. */
.prog { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 0 0 22px; }
.prog i { display: block; height: 1px; background: var(--linea); }
.prog i.ya { background: var(--champagne); }
.prog i.on { background: var(--champagne); transform-origin: left; animation: crece .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.paso-k {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gris); font-weight: 400; margin-bottom: 26px;
}
.paso-k b { font-weight: 400; color: var(--tinta); }
.paso-k .atras { color: var(--gris); display: inline-flex; gap: 5px; align-items: center; }
.paso-k .atras svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.t { font-weight: 300; font-size: 22px; line-height: 1.25; letter-spacing: -.005em; margin: 0 0 6px; text-wrap: balance; }
.t b { font-weight: 400; }
.s { font-size: 12px; color: var(--gris); margin: 0 0 26px; font-weight: 300; }

/* Lo que lleva elegido, en una línea. */
.llevas {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--laton); font-weight: 400; margin: -16px 0 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.llevas i { font-style: normal; color: var(--gris-2); margin: 0 5px; }

/* Pestañas de categoría: texto con filete, sin píldoras. */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 0 0 10px; color: var(--gris); font-weight: 400;
  white-space: nowrap; margin-bottom: -1px;
}
.tab.on { color: var(--tinta); border-bottom: 1px solid var(--tinta); }

/* ── Filas ───────────────────────────────────────────────────────────────── */
.r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
  transition: padding .2s;
  animation: sube .5s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
a.r, label.r { cursor: pointer; }
a.r:hover, label.r:hover { padding-left: 6px; }
.r .n { font-size: 14.5px; font-weight: 400; letter-spacing: .005em; flex: 1; min-width: 0; }
.r .d { display: block; font-size: 11px; color: var(--gris); font-weight: 300; margin-top: 2px; letter-spacing: 0; }
.r .m { font-size: 10.5px; color: var(--gris); letter-spacing: .08em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.r .m b { font-weight: 400; color: var(--tinta); margin-left: 8px; }
.r .sub { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--laton); font-weight: 400; margin-top: 3px; }
.r .sub.ok { color: var(--salvia); }

.grupo { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); font-weight: 400; padding: 20px 0 4px; }
.grupo:first-of-type { padding-top: 14px; }

/* El radio real se esconde; el círculo lo dibuja el CSS. Sin JS, la elección
   se ve igual: es un <label> con su <input> adentro. */
.r input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rad { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--linea-f); flex: none; position: relative; top: 2px; }
.r input[type="radio"]:checked ~ .rad { border-color: var(--tinta); }
.r input[type="radio"]:checked ~ .rad::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tinta); }
.r input[type="radio"]:checked ~ .n { font-weight: 500; }
.r input[type="radio"]:focus-visible ~ .rad { outline: 2px solid var(--laton); outline-offset: 3px; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 18px; border: 0; border-radius: 2px;
  font-family: inherit; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 500; color: #1A1714;
  background: var(--champagne); cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--champagne-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.linea { background: transparent; border: 1px solid var(--linea-f); color: var(--tinta); font-weight: 400; }
.btn.linea:hover { background: transparent; border-color: var(--tinta); }
.btn.linea svg { stroke: none; }

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 18px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--gris); }
.links a, .links button {
  border: 0; background: none; padding: 0 0 2px; margin: 0; cursor: pointer;
  font: inherit; color: var(--gris); border-bottom: 1px solid var(--linea-f);
}
.links a:hover, .links button:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.o { display: flex; align-items: center; gap: 14px; color: #5A5148; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin: 22px 0; font-weight: 500; }
.o::before, .o::after { content: ""; flex: 1; height: 1px; background: rgba(23, 19, 16, .22); }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.campo { margin: 0 0 24px; }
.campo label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #4A423B; font-weight: 500; margin-bottom: 6px; }
.campo input, .campo textarea {
  display: block; width: 100%; margin: 0; padding: 4px 0 8px;
  border: 0; border-bottom: 1.5px solid rgba(23, 19, 16, .42); border-radius: 0;
  background: transparent; color: var(--tinta);
  font-family: inherit; font-size: 15px; font-weight: 300; line-height: 1.5;
  min-height: 30px;
}
.campo textarea { resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8F8A83; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--tinta); }
/* iOS agrega su propio relieve a los campos: lo apagamos. */
.campo input, .campo textarea { -webkit-appearance: none; appearance: none; }

.fino { font-size: 12px; color: #5A5148; margin: 0 0 22px; font-weight: 400; }
.aviso { margin-top: 16px; font-size: 12.5px; color: var(--gris); line-height: 1.6; font-weight: 400; }
.error { font-size: 11.5px; color: #9B4A3A; margin: 0 0 18px; font-weight: 400; }

/* ── Calendario ──────────────────────────────────────────────────────────── */
.mes { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; }
.mes b { font-weight: 400; font-size: 14px; letter-spacing: .02em; }
.mes .nv { display: flex; gap: 6px; }
.mes .nv a, .mes .nv span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--linea); }
.mes .nv span.off { opacity: .35; }
.mes .nv svg { width: 9px; height: 9px; stroke: var(--tinta); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.sem { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.sem span { text-align: center; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-2); font-weight: 400; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.dia { aspect-ratio: 1; display: grid; place-items: center; font-size: 12.5px; font-weight: 300; color: var(--gris-2); position: relative; }
.dia.libre { color: var(--tinta); font-weight: 400; }
.dia.libre::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--champagne); }
.dia.hoy span { border-bottom: 1px solid var(--tinta); padding-bottom: 1px; }
.dia.sel { color: #fff; font-weight: 400; }
.dia.sel::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); z-index: 0; }
.dia.sel span { position: relative; z-index: 1; }
.dia.sel::after { display: none; }

/* ── Horas ───────────────────────────────────────────────────────────────── */
.franja { margin-top: 26px; }
.franja h5 {
  margin: 0 0 4px; display: flex; justify-content: space-between;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gris); font-weight: 400; padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
}
.franja h5 i { font-style: normal; color: var(--tinta); }
.horas { display: grid; grid-template-columns: repeat(3, 1fr); }
.hora {
  display: block; padding: 13px 0; text-align: center; font-size: 12.5px;
  font-weight: 300; border-bottom: 1px solid var(--linea); position: relative;
  cursor: pointer;
}
.hora input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hora:has(input:checked) { font-weight: 500; }
.hora:has(input:checked)::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px; background: var(--champagne); }
.hora:has(input:focus-visible) { outline: 2px solid var(--laton); outline-offset: -2px; }
/* Ocupada o ya pasada: se ve, pero no se toca. Que desaparezca confunde. */
.hora.tach { color: var(--gris-2); text-decoration: line-through; cursor: default; }

.fijo {
  position: sticky; bottom: 0; margin: 18px -22px -30px; padding: 12px 22px 18px;
  background: linear-gradient(to top, var(--papel) 75%, rgba(251, 250, 247, 0));
}
/* El botón flota sobre la lista mientras se elige: sin este colchón, la última
   fila queda debajo de él y parece que no está. */
.con-fijo { padding-bottom: 84px; }
.fijo .res-l { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); text-align: center; margin: 0 0 10px; font-weight: 400; }
.fijo .res-l b { color: var(--tinta); font-weight: 400; }

/* ── Ficha y confirmación ────────────────────────────────────────────────── */
.ficha .r { padding: 13px 0; animation: none; }
.ficha .r span { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); font-weight: 400; }
.ficha .r b { font-weight: 400; font-size: 13.5px; text-align: right; }

.tog { display: flex; gap: 18px; align-items: baseline; margin: 22px 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--gris); }
.tog label { padding-bottom: 2px; cursor: pointer; position: relative; }
.tog input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.tog label:has(input:checked) { color: var(--tinta); border-bottom: 1px solid var(--tinta); }
.tog label:has(input:focus-visible) { outline: 2px solid var(--laton); outline-offset: 3px; }

.ok-k { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--laton); font-weight: 500; margin-bottom: 10px; }
.estado { display: inline-block; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; color: var(--salvia); border: 1px solid rgba(111, 143, 114, .4); padding: 4px 9px; margin-bottom: 12px; }
.estado.gris { color: var(--gris); border-color: var(--linea-f); }

.codigo { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 4px; }
.codigo .c { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); font-weight: 400; }
.codigo .c b { display: block; font-size: 15px; letter-spacing: .18em; color: var(--tinta); font-weight: 400; margin-top: 4px; }
.codigo .qr { width: 66px; height: 66px; flex: none; padding: 0; background: #fff; border: 1px solid var(--linea); }
.codigo .qr svg { width: 100%; height: 100%; display: block; }
.codigo .qr svg path, .codigo .qr svg rect { fill: var(--tinta); }

/* ── Escritorio ──────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .cuerpo-d {
    max-width: 1000px; margin: 0 auto; padding: 64px 48px 96px;
    display: grid; grid-template-columns: 300px 1fr; gap: 80px;
    align-items: start; min-height: 560px;
  }
  .lado { display: block; position: sticky; top: 40px; }
  .lado .k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); font-weight: 400; }
  .lado .pasos { margin-top: 26px; }
  .lado .pasos div { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-2); padding: 5px 0; font-weight: 400; display: flex; gap: 12px; }
  .lado .pasos div i { font-style: normal; width: 22px; }
  .lado .pasos div.ok { color: var(--gris); }
  .lado .pasos div.ya { color: var(--tinta); }
  .lado .pasos div.ya i { color: var(--laton); }
  .lado .res { margin-top: 26px; border-top: 1px solid var(--linea); }
  .lado .res .r { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 13px; animation: none; }
  .lado .res .r:hover { padding-left: 0; }
  .lado .res .r span { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-weight: 400; padding-top: 3px; }
  .lado .res .r b { font-weight: 400; text-align: right; }
  .lado .res .r b.v { color: var(--gris-2); font-weight: 300; }

  .sh { padding: 0; max-width: 620px; }

  /* La columna de la izquierda ya cuenta el progreso y lo elegido. */
  .prog, .llevas { display: none; }

  .t { font-size: 30px; }
  .s { font-size: 14px; margin-bottom: 34px; }
  .r { padding: 18px 0; }
  .r .n { font-size: 17px; }
  .r .m { font-size: 12px; }
  .dia { font-size: 14px; }
  .dia.sel::before { width: 36px; height: 36px; }
  .hora { font-size: 14px; }
  .btn { width: auto; min-width: 300px; }
  .fijo { position: static; margin: 34px 0 0; padding: 0; background: none; }
  .con-fijo { padding-bottom: 0; }
  .fijo .res-l { text-align: left; }
  .conf { max-width: 560px; }

}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Paso 4 · Día y hora ────────────────────────────────────────────────────
   Nombres propios (.rs-*) para lo nuevo: el mockup mostró que `.d` y `.h`
   sueltos se pisan con lo de la ficha de la cita (26/09). */
.dias { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 12px; margin: 0 -2px 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dias::-webkit-scrollbar { display: none; }
.dias .d { flex: 0 0 auto; width: 58px; border: 1px solid var(--linea); border-radius: 14px;
           padding: 10px 0; text-align: center; text-decoration: none; color: inherit;
           transition: border-color .18s, background .18s; }
.dias .d:hover { border-color: var(--linea-f); }
.dias .d .s { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.dias .d .n { display: block; font-size: 19px; font-weight: 300; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dias .d .p { display: block; font-size: 9px; color: var(--salvia); letter-spacing: .06em; margin-top: 2px; }
.dias .d.on { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.dias .d.on .s, .dias .d.on .p { color: rgba(251, 250, 247, .65); }
.dias .d.no { opacity: .38; pointer-events: none; }
.dias .d.no .p { color: var(--gris-2); }
.ver-mes { display: inline-block; font-size: 11px; letter-spacing: .1em; color: var(--gris);
           text-decoration: none; border-bottom: 1px solid var(--linea); padding-bottom: 2px; }
.ver-mes:hover { color: var(--tinta); border-color: var(--linea-f); }

.franja { margin: 22px 0 9px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
          color: var(--gris-2); display: flex; align-items: center; gap: 12px; }
.franja::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.horas .h { position: relative; border: 1px solid var(--linea); border-radius: 12px; padding: 11px 0;
            text-align: center; cursor: pointer; transition: border-color .18s, background .18s; }
.horas .h:hover { border-color: var(--linea-f); }
.horas .h input { position: absolute; opacity: 0; width: 0; height: 0; }
.horas .h .v { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.horas .h .q { display: block; font-size: 9.5px; letter-spacing: .1em; color: var(--gris-2); margin-top: 2px; }
.horas .h:has(input:checked) { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.horas .h:has(input:checked) .q { color: rgba(251, 250, 247, .6); }
.horas .h:has(input:focus-visible) { outline: 2px solid var(--laton); outline-offset: 3px; }

/* el calendario del mes */
.cal { border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; }
.cal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.cal-cab b { font-weight: 400; flex: 1; text-align: center; }
.cal-cab a, .cal-cab .apagado { width: 26px; height: 26px; border: 1px solid var(--linea);
                                border-radius: 999px; display: grid; place-items: center;
                                color: var(--gris); font-size: 12px; text-decoration: none; }
.cal-cab a:hover { border-color: var(--linea-f); color: var(--tinta); }
.cal-cab .apagado { opacity: .35; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.grid .th { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); padding-bottom: 6px; }
.grid .c { padding: 9px 0; border-radius: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums;
           position: relative; color: inherit; text-decoration: none; display: block; }
.grid a.c:hover { background: rgba(26, 23, 20, .05); }
.grid .c.vacia { visibility: hidden; }
.grid .c.lleno { color: var(--gris-2); }
.grid .c.lleno::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 12px; height: 1px;
                        background: var(--gris-2); transform: translateX(-50%); }
.grid div.c:not(.lleno):not(.vacia) { color: var(--gris-2); opacity: .45; }
.grid .c.hay::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 3px; height: 3px;
                      border-radius: 50%; background: var(--laton); transform: translateX(-50%); }
.grid .c.on { background: var(--tinta); color: var(--papel); }
.grid .c.on::after { background: var(--champagne-2); }
.leyenda { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--gris); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--laton);
             margin-right: 6px; vertical-align: 2px; }
.leyenda s { display: inline-block; width: 10px; height: 1px; background: var(--gris-2);
             margin-right: 6px; vertical-align: 4px; }
.leyenda .apagado { opacity: .7; }

/* ── Paso 5 · Confirmá ──────────────────────────────────────────────────── */
.ficha { border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.ficha .f { display: flex; justify-content: space-between; gap: 14px; padding: 13px 18px;
            border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.ficha .f:last-child { border-bottom: 0; }
.ficha .f span { color: var(--gris); flex: 0 0 auto; }
.ficha .f b { font-weight: 400; text-align: right; }
.ficha .f b s { display: block; font-size: 11px; color: var(--gris); text-decoration: none; font-weight: 300; }
.ficha .f.destacada { background: rgba(201, 168, 118, .08); }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
               color: #4A423B; font-weight: 500; margin-bottom: 7px; }
.campo textarea { width: 100%; border: 1px solid rgba(23, 19, 16, .3); border-radius: 12px; padding: 12px 14px;
                  font-family: inherit; font-size: 13.5px; font-weight: 300; color: var(--tinta);
                  background: transparent; resize: vertical; }
.campo textarea:focus { outline: none; border-color: var(--linea-f); }

/* ── La cita de la clienta ──────────────────────────────────────────────── */
.cita-sh { max-width: 560px; margin: 0 auto; padding: 30px 20px 60px; }
.cita-top { text-align: center; padding: 10px 0 24px; border-bottom: 1px solid var(--linea); margin-bottom: 24px; }
.sello { width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--salvia); color: var(--salvia);
         display: grid; place-items: center; margin: 0 auto 16px; }
.sello.no { border-color: var(--gris-2); color: var(--gris-2); }
.sello.espera { border-style: dashed; border-color: var(--laton); color: var(--laton); }
.cita-top .estado { display: block; width: max-content; margin: 14px auto 0; padding: 6px 14px; border-radius: 999px;
                    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.cita-top .estado.espera { border: 1px solid rgba(184, 149, 95, .5); color: var(--laton); }
.cita-top .estado.ok { background: var(--salvia); color: var(--papel); }
.cita-top h2 { font-size: 26px; font-weight: 300; margin: 0 0 6px; }
.cita-top .fino { margin: 0; }
.cita-top .cod { display: inline-block; margin-top: 14px; border: 1px solid var(--linea); border-radius: 999px;
                 padding: 7px 16px; font-size: 11px; letter-spacing: .22em; color: var(--laton); }
.cuando { text-align: center; margin-bottom: 22px; }
.cuando .cw-dia { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-2); }
.cuando .cw-hora { font-size: 34px; font-weight: 200; letter-spacing: -.01em; margin: 4px 0; }
.cuando .cw-que { font-size: 13px; color: var(--gris); }
.cuando.tachado .cw-hora { text-decoration: line-through; color: var(--gris-2); }
.btns { display: flex; gap: 9px; flex-wrap: wrap; }
.btn.chico { width: auto; padding: 12px 22px; }
.btn.peligro { color: #9B4F42; border-color: rgba(155, 79, 66, .35); }
.cancelar { margin-top: 9px; }

/* La identidad al final (27/09): el bloque «¿A nombre de quién?» dentro de confirmar. */
.entra .quien-t { margin: 26px 0 12px; font-size: 17px; font-weight: 400; color: var(--tinta); }
.entra .ficha .cambiar { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--laton, #8E6F4D); text-decoration: underline; text-underline-offset: 3px; }

/* ── Su foto para el salón (mockup aprobado el 27/09) ─────────────────────── */
.fc-caja { margin: 22px 0 18px; border: 1px solid var(--linea-f); border-radius: 18px; padding: 16px; background: #FBF8F3; }
.fc-caja .fc-form { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 14px; align-items: center; }
.fc-caja .fc-visor { width: 78px; height: 78px; border-radius: 999px; border: 1.5px dashed rgba(23,19,16,.3); display: grid; place-items: center; overflow: hidden; color: var(--tinta-3, #8A7F73); }
.fc-caja .fc-visor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-caja .fc-visor img[hidden], .fc-caja .fc-ini[hidden] { display: none; }
.fc-caja.fc-con-foto .fc-visor { border-style: solid; border-color: rgba(23,19,16,.12); }
.fc-caja .fc-ini svg { width: 30px; height: 30px; }
.fc-caja .fc-t b { display: block; font-weight: 500; font-size: 15px; }
.fc-caja .fc-t p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2, #5A5148); }
.fc-caja .fc-botones { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.fc-caja .fc-botones .btn { flex: 1; }
.fc-caja .fc-botones .btn[hidden] { display: none; }
.fc-caja .fc-google { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(23,19,16,.1); font-size: 12.5px; color: var(--tinta-2, #5A5148); }
.fc-caja .fc-google img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.fc-caja .fc-google button, .fc-caja .fc-quitar button { font: inherit; background: none; border: 0; padding: 0; color: var(--tinta, #171310); text-decoration: underline; cursor: pointer; }
.fc-caja .fc-quitar { margin-top: 10px; font-size: 12.5px; }
.fc-aviso { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #EEF3EC; color: #3E6B44; font-size: 13.5px; }