/* ===== Tokens por tema ===== */
:root, [data-tema="minimal"] {
  --fondo: #0b0b0b; --superficie: #141414; --superficie-2: #1b1b1b; --texto: #f5f5f2; --suave: #8f8f89; --linea: #2a2a2a;
  --acento: #f5f5f2; --acento-texto: #0b0b0b; --destaque: #f5f5f2; --sel-fondo: #f5f5f2; --sel-texto: #0b0b0b;
  --radio: 0px; --radio-btn: 0px; --sombra: none;
  --fuente-titulo: "Inter Tight", -apple-system, "Segoe UI", sans-serif; --fuente-texto: "Inter Tight", -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 600; --titulo-espaciado: -0.03em; --etiqueta-transform: uppercase; --etiqueta-espaciado: .14em;
}
[data-tema="peluqueria"] {
  --fondo: #f4ece2; --superficie: #fbf6ef; --superficie-2: #efe4d6; --texto: #2b1d16; --suave: #7a6556; --linea: #e0d1bf;
  --acento: #2b1d16; --acento-texto: #f7efe5; --destaque: #b0703c; --sel-fondo: #2b1d16; --sel-texto: #f7efe5;
  --radio: 16px; --radio-btn: 999px; --sombra: 0 1px 0 rgba(43,29,22,.04);
  --fuente-titulo: "DM Serif Display", Georgia, serif; --fuente-texto: "Jost", -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 400; --titulo-espaciado: -0.01em; --etiqueta-transform: uppercase; --etiqueta-espaciado: .18em;
}
[data-tema="hosteleria"] {
  --fondo: #fbf5ec; --superficie: #fffaf3; --superficie-2: #f4eadb; --texto: #2a2118; --suave: #76695b; --linea: #e6d9c6;
  --acento: #b5492d; --acento-texto: #fffaf3; --destaque: #4f5a2e; --sel-fondo: #4f5a2e; --sel-texto: #fffaf3;
  --radio: 6px; --radio-btn: 6px; --sombra: 0 1px 2px rgba(42,33,24,.06);
  --fuente-titulo: "Fraunces", Georgia, serif; --fuente-texto: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 700; --titulo-espaciado: -0.02em; --etiqueta-transform: uppercase; --etiqueta-espaciado: .12em;
}
[data-tema="bienestar"] {
  --fondo: #eef2ec; --superficie: #f8faf6; --superficie-2: #e3eae1; --texto: #23392f; --suave: #5f7266; --linea: #d3ddd1;
  --acento: #23392f; --acento-texto: #f8faf6; --destaque: #6f9175; --sel-fondo: #6f9175; --sel-texto: #ffffff;
  --radio: 22px; --radio-btn: 999px; --sombra: 0 6px 24px -14px rgba(35,57,47,.35);
  --fuente-titulo: "Cormorant Garamond", Georgia, serif; --fuente-texto: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 600; --titulo-espaciado: 0; --etiqueta-transform: none; --etiqueta-espaciado: .02em;
}
[data-tema="claro"] {
  --fondo: #f4f6fa; --superficie: #ffffff; --superficie-2: #eef1f7; --texto: #16213a; --suave: #5b6478; --linea: #e1e6ef;
  --acento: #2f5bea; --acento-texto: #ffffff; --destaque: #2f5bea; --sel-fondo: #2f5bea; --sel-texto: #ffffff;
  --radio: 14px; --radio-btn: 10px; --sombra: 0 1px 2px rgba(22,33,58,.06), 0 8px 24px -16px rgba(22,33,58,.25);
  --fuente-titulo: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif; --fuente-texto: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 700; --titulo-espaciado: -0.02em; --etiqueta-transform: none; --etiqueta-espaciado: 0;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente-texto); font-size: 16px; line-height: 1.5; min-height: 100vh; transition: background .2s; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
.envoltura { max-width: 720px; margin: 0 auto; padding: 0 16px 120px; }
.oculto { display: none !important; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ===== Cabecera ===== */
.cabecera { padding: 40px 0 28px; position: relative; }
.cabecera .logo { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radio); margin-bottom: 16px; display: block; background: var(--superficie-2); }
.cabecera .sobre { font-size: 12px; letter-spacing: var(--etiqueta-espaciado); text-transform: var(--etiqueta-transform); color: var(--suave); margin: 0 0 8px; }
.cabecera h1 { font-family: var(--fuente-titulo); font-weight: var(--titulo-peso); letter-spacing: var(--titulo-espaciado); font-size: clamp(34px, 7vw, 52px); line-height: 1.05; margin: 0 0 12px; }
.cabecera .desc { color: var(--suave); margin: 0 0 14px; max-width: 52ch; }
.cabecera .datos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--suave); }
.cabecera .datos a { text-decoration: none; }
.cabecera .datos a:hover { text-decoration: underline; }

[data-tema="peluqueria"] .cabecera::after { content: ""; display: block; height: 10px; margin-top: 28px; background: repeating-linear-gradient(-45deg, var(--destaque) 0 6px, transparent 6px 14px); opacity: .55; border-radius: 999px; }
[data-tema="hosteleria"] .cabecera { text-align: center; }
[data-tema="hosteleria"] .cabecera .logo { margin-left: auto; margin-right: auto; border-radius: 50%; }
[data-tema="hosteleria"] .cabecera .desc { margin-left: auto; margin-right: auto; }
[data-tema="hosteleria"] .cabecera .datos { justify-content: center; }
[data-tema="hosteleria"] .cabecera::after { content: "✦"; display: block; color: var(--acento); margin-top: 22px; font-size: 14px; letter-spacing: 1em; }
[data-tema="bienestar"] .cabecera h1 { font-size: clamp(40px, 8vw, 60px); }
[data-tema="bienestar"] .cabecera .logo { border-radius: 50%; }
[data-tema="minimal"] .cabecera { border-bottom: 1px solid var(--linea); margin-bottom: 8px; }
[data-tema="claro"] .cabecera { padding-top: 32px; }

/* ===== Pasos ===== */
.paso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); margin-top: 14px; overflow: hidden; }
[data-tema="minimal"] .paso { border-width: 0 0 1px; background: transparent; margin-top: 0; }
.paso-cab { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
[data-tema="minimal"] .paso-cab { padding: 22px 0; }
.paso-num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 600; border-radius: 50%; border: 1.5px solid var(--linea); color: var(--suave); }
[data-tema="minimal"] .paso-num { border-radius: 0; }
.paso.activo .paso-num { background: var(--sel-fondo); color: var(--sel-texto); border-color: var(--sel-fondo); }
.paso.hecho .paso-num { color: var(--destaque); border-color: var(--destaque); }
.paso-tit { flex: 1; min-width: 0; }
.paso-tit h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: var(--etiqueta-espaciado); text-transform: var(--etiqueta-transform); color: var(--suave); }
.paso-tit .valor { margin-top: 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso.activo .paso-tit h2 { color: var(--texto); }
.cambiar { background: none; border: 0; color: var(--suave); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 6px; }
.paso-cuerpo { padding: 0 20px 20px; }
[data-tema="minimal"] .paso-cuerpo { padding: 0 0 28px; }
.paso:not(.activo) .paso-cuerpo { display: none; }
.paso.bloqueado { opacity: .5; }

/* Servicios */
.lista { display: grid; gap: 10px; }
.opcion { width: 100%; text-align: left; background: var(--superficie-2); border: 1.5px solid transparent; border-radius: calc(var(--radio) * .75); padding: 14px 16px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; transition: border-color .15s, background .15s; }
.opcion:hover { border-color: var(--linea); }
.opcion[aria-pressed="true"] { border-color: var(--sel-fondo); }
.opcion .n { font-weight: 600; }
.opcion .p { font-weight: 600; color: var(--destaque); text-align: right; white-space: nowrap; }
.opcion .d { grid-column: 1 / -1; font-size: 14px; color: var(--suave); }
[data-tema="minimal"] .opcion { background: transparent; border: 1px solid var(--linea); }
[data-tema="minimal"] .opcion[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
[data-tema="minimal"] .opcion[aria-pressed="true"] .p, [data-tema="minimal"] .opcion[aria-pressed="true"] .d { color: var(--fondo); }
[data-tema="hosteleria"] .opcion { background: transparent; border: 0; border-bottom: 1px dashed var(--linea); border-radius: 0; padding: 14px 4px; }
[data-tema="hosteleria"] .opcion .n { font-family: var(--fuente-titulo); font-size: 19px; font-weight: 500; display: flex; align-items: baseline; gap: 8px; }
[data-tema="hosteleria"] .opcion[aria-pressed="true"] { background: var(--superficie-2); border-bottom-color: var(--destaque); }
[data-tema="bienestar"] .opcion .n { font-size: 17px; }

/* Profesionales */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--linea); background: var(--superficie); border-radius: var(--radio-btn); padding: 10px 16px; cursor: pointer; font-weight: 500; }
.chip:hover { border-color: var(--suave); }
.chip[aria-pressed="true"] { background: var(--sel-fondo); color: var(--sel-texto); border-color: var(--sel-fondo); }
.chip:disabled { opacity: .35; cursor: default; }

/* Calendario */
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-cab strong { font-family: var(--fuente-titulo); font-weight: var(--titulo-peso); font-size: 20px; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 38px; height: 38px; border-radius: var(--radio-btn); border: 1.5px solid var(--linea); background: var(--superficie); cursor: pointer; font-size: 18px; line-height: 1; }
.cal-nav button:disabled { opacity: .3; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal .dsem { font-size: 12px; color: var(--suave); padding: 4px 0; text-transform: uppercase; letter-spacing: .06em; }
.cal button { aspect-ratio: 1; max-height: 52px; border: 0; background: transparent; border-radius: var(--radio-btn); cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; position: relative; }
[data-tema="minimal"] .cal button, [data-tema="hosteleria"] .cal button { border-radius: 0; }
.cal button.libre { background: var(--superficie-2); }
.cal button.libre:hover { outline: 1.5px solid var(--suave); }
.cal button:disabled { color: var(--suave); opacity: .45; cursor: default; background: transparent; }
.cal button.hoy::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--destaque); }
.cal button[aria-pressed="true"] { background: var(--sel-fondo); color: var(--sel-texto); }
.horas-tit { font-size: 12px; letter-spacing: var(--etiqueta-espaciado); text-transform: var(--etiqueta-transform); color: var(--suave); margin: 20px 0 8px; font-weight: 600; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.horas .chip { padding: 10px 0; text-align: center; font-variant-numeric: tabular-nums; }
.vacio { color: var(--suave); font-size: 15px; padding: 10px 0; }
.cargando { color: var(--suave); font-size: 15px; padding: 10px 0; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .45; } }

/* Formulario */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.campo input, .campo textarea, .campo select { width: 100%; padding: 12px 14px; background: var(--fondo); border: 1.5px solid var(--linea); border-radius: min(var(--radio-btn), 14px); font-size: 16px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); }
.campo textarea { resize: vertical; min-height: 70px; }
.campo .ayuda { font-size: 13px; color: var(--suave); margin-top: 4px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .dos { grid-template-columns: 1fr; } }
.legal { font-size: 13px; color: var(--suave); margin: 4px 0 16px; }
.error { color: #c0392b; font-size: 14px; margin: 8px 0 0; min-height: 1em; }
[data-tema="minimal"] .error { color: #ff7a6b; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 22px; border: 0; border-radius: var(--radio-btn); background: var(--acento); color: var(--acento-texto); font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .1s, opacity .15s; }
[data-tema="minimal"] .boton { text-transform: uppercase; letter-spacing: .12em; font-size: 14px; }
.boton:active { transform: scale(.99); }
.boton:disabled { opacity: .55; cursor: wait; }
.boton.sec { background: transparent; color: var(--texto); border: 1.5px solid var(--linea); }

/* Resumen fijo */
.resumen { position: fixed; left: 0; right: 0; bottom: 0; background: var(--superficie); border-top: 1px solid var(--linea); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
.resumen .in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.resumen .txt { flex: 1; min-width: 0; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumen .txt b { color: var(--texto); }

/* Confirmación */
.confirmada { text-align: center; padding: 30px 0 10px; }
.confirmada .sello { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--sel-fondo); color: var(--sel-texto); font-size: 28px; }
[data-tema="minimal"] .confirmada .sello { border-radius: 0; }
.confirmada h2 { font-family: var(--fuente-titulo); font-weight: var(--titulo-peso); letter-spacing: var(--titulo-espaciado); font-size: 34px; margin: 0 0 8px; }
.ficha { text-align: left; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px 20px; margin: 22px 0; }
.ficha div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.ficha div:last-child { border-bottom: 0; }
.ficha span { color: var(--suave); }
.ficha b { text-align: right; font-weight: 600; }
.acciones { display: grid; gap: 10px; }

/* WhatsApp */
.wa { position: fixed; right: 18px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); z-index: 6; text-decoration: none; transition: transform .15s; }
.wa:hover { transform: scale(1.06); }

.pie { text-align: center; color: var(--suave); font-size: 12px; margin-top: 40px; }
.pie a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--suave); margin: 4px 0 16px; cursor: pointer; }
.consentimiento input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--destaque); }
.consentimiento a { color: var(--texto); }
.pie a { text-decoration: none; }
.pie .legales { display: block; margin-top: 6px; }
.pie .legales a { text-decoration: underline; }