@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap");

/* ======================================================================
   Paso 19 — Rediseño visual (maqueta aprobada en docs/maqueta-diseno/maqueta.css).
   Todo el diseño sale de estas variables (se definen UNA sola vez) y de UN solo corte a 900 px.
   ====================================================================== */
:root {
  /* marca */
  --lila: #9b96c9;
  --lila-osc: #7f79b3;
  --magenta: #9e378c;
  --magenta-osc: #832d74;
  --tinta: #1e2939;
  --suave: #6a7282;
  --borde: #e3e0f0;
  --campo: #faf9fe;
  --app-fondo: #f5f3fb;
  --ok: #16a34a;
  --ok-fondo: #eafbf1;
  --peligro: #dc2626;
  --peligro-fondo: #fdecec;
  --seleccion-fondo: #fbf3fa;
  --lila-suave: #f4f2fb;
  /* formas y sombras */
  --radio-campo: 14px;
  --radio-tarjeta: 28px;
  --radio-panel: 22px;
  --sombra-tarjeta: 0 34px 70px -24px rgba(50, 30, 95, 0.55);
  --sombra-boton: 0 14px 26px -10px rgba(158, 55, 140, 0.6);
  --sombra-panel: 0 10px 30px -18px rgba(60, 40, 100, 0.3);
  /* tipografías */
  --fuente-titulo: "Montserrat", sans-serif;
  --fuente-texto: "Open Sans", sans-serif;
  /* fondo lila de las páginas públicas */
  --fondo-publico: radial-gradient(900px 620px at 10% 6%, #b7b2dc 0%, rgba(155, 150, 201, 0) 62%),
    radial-gradient(820px 700px at 96% 102%, #8780b9 0%, rgba(135, 128, 185, 0) 60%), #9b96c9;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fuente-texto); color: var(--tinta); background: var(--lila); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fuente-titulo); margin: 0; }
img, video, svg { max-width: 100%; }
.oculto { display: none !important; }
.oculto-rol { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ PÁGINAS PÚBLICAS: fondo lila, dos columnas ============ */
.pub { min-height: 100vh; color: #fff; display: flex; flex-direction: column; background: var(--fondo-publico); }
.pub-grid {
  flex: 1; width: 100%; max-width: 1340px; margin: 0 auto; padding: 56px 64px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 80px; align-items: center;
}
.marca { display: flex; flex-direction: column; gap: 26px; }
.marca .logo { width: 300px; height: auto; display: block; margin-left: -6px; }
.marca h1 { font-size: 58px; line-height: 1.07; font-weight: 700; text-shadow: 0 2px 10px rgba(40, 20, 80, 0.18); }
.marca .lead { font-size: 21px; line-height: 1.5; color: rgba(255, 255, 255, 0.94); max-width: 520px; margin: 0; }
.marca .lead:empty { display: none; }
.aliada { display: flex; gap: 26px; align-items: flex-end; margin-top: 10px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.28); max-width: 560px; }
.aliada img { width: 210px; height: auto; display: block; flex: none; }
.aliada h2 { font-size: 25px; font-weight: 700; margin-bottom: 10px; text-shadow: 0 1px 6px rgba(40, 20, 80, 0.2); }
.aliada p { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.5; color: #fff; }
.pie { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.78); padding: 14px 0 22px; margin: 0; }
.columna { min-width: 0; }

/* ============ TARJETA BLANCA ============ */
.tarjeta { background: #fff; color: var(--tinta); border-radius: var(--radio-tarjeta); padding: 44px 46px; box-shadow: var(--sombra-tarjeta); }
.tarjeta + .tarjeta { margin-top: 24px; }
.tarjeta h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.paso-titulo { font-size: 26px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.intro { font-size: 16px; line-height: 1.55; color: var(--suave); margin: 0 0 22px; }
.sep { height: 1px; background: var(--borde); margin: 26px 0; }

/* ============ CAMPOS ============ */
label { display: block; font: 600 14px var(--fuente-texto); color: var(--suave); margin: 20px 0 8px; }
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; height: 58px; border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 0 18px;
  font: 400 18px var(--fuente-texto); background: var(--campo); color: var(--tinta);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%239e378c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
textarea { height: auto; min-height: 110px; padding: 14px 18px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa0ad; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(158, 55, 140, 0.14); background: #fff; }
input[readonly] { color: var(--suave); }

/* ============ BOTONES ============ */
.boton {
  display: block; width: 100%; padding: 19px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px var(--fuente-titulo); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; text-decoration: none;
  background: var(--magenta); color: #fff; box-shadow: var(--sombra-boton); transition: background-color 0.15s ease, transform 0.15s ease;
}
.tarjeta > .boton { margin-top: 26px; }
.tarjeta > .boton:first-child, .tarjeta > .camino-detalle + .boton { margin-top: 0; }
.tarjeta > .boton + .boton { margin-top: 14px; }
.intro + .boton { margin-top: 0; }
.boton-primario:hover, .boton-marca:hover { background: var(--magenta-osc); }
.boton-primario:disabled { background: var(--borde); color: var(--suave); box-shadow: none; cursor: not-allowed; }
.boton-secundario { background: #fff; color: var(--magenta); border: 2px solid var(--magenta); padding: 17px 24px; box-shadow: none; }
.boton-secundario:hover { background: var(--seleccion-fondo); }
.boton-texto { background: none; color: var(--magenta); text-transform: none; font: 600 15px var(--fuente-texto); letter-spacing: 0; padding: 14px; box-shadow: none; }
.boton-whatsapp { background: var(--ok-fondo); color: #14803f; text-transform: none; font: 600 15px var(--fuente-texto); letter-spacing: 0; padding: 15px; box-shadow: none; position: relative; }
.tarjeta > .camino-detalle + .boton-whatsapp { margin-top: 30px; }
.boton-whatsapp::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 1px; background: var(--borde); }
.boton-peligro { background: var(--peligro-fondo); color: var(--peligro); border: 1.5px solid #f3b7b7; padding: 13px 22px; box-shadow: none; font-size: 14px; }
.camino-detalle, .det { font-size: 14px; color: var(--suave); text-align: center; margin: 10px 0 26px; }
.resultado-encabezado { display: block; }
.resultado-encabezado .boton-texto { display: inline-block; width: auto; padding: 0; margin: 0 0 18px; font-weight: 600; }

/* ============ TURNERO: pasos ============ */
.paso-subtitulo { font: 700 15px var(--fuente-titulo); color: var(--tinta); margin: 22px 0 10px; }
.item-detalle { font-size: 14px; color: var(--suave); margin: 8px 0 0; line-height: 1.5; }
.item-titulo { font: 700 18px var(--fuente-titulo); color: var(--tinta); }
.item-lista { border: 1.5px solid var(--borde); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; background: #fff; }
.item-lista .item-detalle { margin-top: 4px; }
.item-lista .boton { margin-top: 14px; }
.item-clickeable { position: relative; cursor: pointer; padding-right: 54px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.item-clickeable::after { content: "›"; position: absolute; right: 22px; top: 50%; transform: translateY(-52%); color: var(--magenta); font-size: 26px; line-height: 1; }
.item-clickeable:hover { border-color: var(--magenta); background: var(--seleccion-fondo); box-shadow: 0 0 0 4px rgba(158, 55, 140, 0.1); }
.item-completo { opacity: 0.6; }
.item-cancelado { background: var(--peligro-fondo); border-color: var(--peligro); }
.resultado-fallido { color: var(--peligro); }
.estado-pago-turno { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 12px 16px; color: #55507a; }
.vacio { text-align: center; color: var(--suave); padding: 26px 0; font-size: 15px; margin: 0; }
.mensaje-error { color: var(--peligro); font-size: 14px; margin: 12px 0 0; }
.mensaje-global { text-align: center; padding: 12px 16px; border-radius: var(--radio-campo); font-size: 14px; margin: 18px 0 0; background: #fff; }
.mensaje-global.exito { background: var(--ok-fondo); color: var(--ok); }
.mensaje-global.error { background: var(--peligro-fondo); color: var(--peligro); }

/* bienvenida de "Es mi primera vez" (el titular grande está en la columna izquierda) */
.intro-primera .paso-titulo { display: none; }
.intro-primera p { font-size: 16px; line-height: 1.55; color: var(--suave); margin: 0 0 6px; }
.solo-nuevo { display: none; }
.modo-nuevo .solo-nuevo { display: block; }
.modo-nuevo .solo-normal, .modo-nuevo .marca .lead { display: none; }

/* calendario */
.calendario-encabezado { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; }
.calendario-encabezado span { font: 700 18px var(--fuente-titulo); text-transform: capitalize; }
.boton-mes { width: 38px; height: 38px; border-radius: 50%; background: var(--campo); border: 1px solid var(--borde); color: var(--magenta); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.boton-mes:disabled { opacity: 0.4; cursor: not-allowed; }
.calendario-dias-semana, .calendario-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.calendario-dias-semana span { font: 600 12px var(--fuente-texto); color: var(--suave); padding: 6px 0; }
.dia-calendario { height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: none; padding: 0; font: 600 15px var(--fuente-texto); color: #c1c4cc; cursor: default; }
.dia-calendario-apagado { color: #c1c4cc; }
.dia-calendario-disponible { color: var(--tinta); background: var(--campo); border-color: var(--borde); cursor: pointer; }
.dia-calendario-disponible:hover { border-color: var(--magenta); }
.dia-calendario-seleccionado { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.dia-calendario-elegido { box-shadow: inset 0 0 0 2px var(--ok); }
.dia-calendario-elegido:not(.dia-calendario-seleccionado) { background: var(--ok-fondo); }
.dia-calendario-feriado { background: var(--peligro-fondo); border-color: var(--peligro); color: var(--peligro); }
.dia-calendario-ausencia { background: var(--ok-fondo); border-color: var(--ok); }
.dia-calendario-rango { box-shadow: inset 0 0 0 2px var(--magenta); background: rgba(158, 55, 140, 0.08); }
.dia-calendario-feriado.dia-calendario-seleccionado, .dia-calendario-ausencia.dia-calendario-seleccionado { background: var(--magenta); color: #fff; }

/* horarios */
.grilla-horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 24px; }
.grilla-horarios .boton { padding: 13px 0; border-radius: 12px; border: 1.5px solid var(--borde); background: #fff; color: var(--tinta); font: 700 15px var(--fuente-titulo); letter-spacing: 0; text-transform: none; box-shadow: none; margin: 0; }
.grilla-horarios .boton:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.horario-profesional { display: block; font: 400 12px var(--fuente-texto); margin-top: 2px; opacity: 0.85; }

/* confirmación */
.listo { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.listo i { width: 46px; height: 46px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; font-style: normal; font-size: 26px; font-weight: 700; flex: none; }
.listo h2 { margin: 0; }
.resumen { background: var(--campo); border: 1px solid var(--borde); border-radius: 18px; padding: 20px 24px; margin: 6px 0 22px; }
.resumen div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 16px; }
.resumen div span { color: var(--suave); }
.resumen div b { font-weight: 600; text-align: right; }
.qr-turno { display: block; margin: 6px auto 18px; width: 190px; height: auto; max-width: 100%; }
#paso-confirmado .boton, #paso-confirmacion .boton { margin-top: 6px; }

/* formulario de primera vez */
.form-intro { margin: 0 0 6px; }
.form-intro p { margin: 0 0 14px; }
.privacidad { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 14px 18px; font-size: 14px; color: #55507a; margin: 0 0 6px; }
.progreso { height: 10px; background: #efecf8; border-radius: 99px; overflow: hidden; margin: 16px 0 8px; }
.progreso-barra { height: 100%; width: 0; background: var(--magenta); border-radius: 99px; transition: width 0.25s ease; }
.progreso-texto { font-size: 13px; color: var(--suave); margin: 0 0 6px; }
.form-parte { font: 700 20px var(--fuente-titulo); margin: 34px 0 6px; }
.pregunta { margin: 0; }
.pregunta > .pregunta-texto, .pregunta > label { display: block; font: 700 17px var(--fuente-titulo); color: var(--tinta); margin: 26px 0 12px; line-height: 1.35; }
.pregunta-ayuda { font-size: 14px; color: var(--suave); margin: -4px 0 10px; }
.pregunta-error > .pregunta-texto, .pregunta-error > label { color: var(--peligro); }
label.opcion { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 15px 18px; border: 1.5px solid var(--borde); border-radius: var(--radio-campo); font: 600 16px var(--fuente-texto); color: var(--tinta); background: #fff; cursor: pointer; }
label.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--magenta); margin: 0; }
label.opcion:has(input:checked) { border-color: var(--magenta); background: var(--seleccion-fondo); color: var(--magenta); }
.escala { display: flex; flex-wrap: wrap; gap: 8px; }
.escala label { margin: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--borde); border-radius: 12px; cursor: pointer; font: 600 15px var(--fuente-texto); color: var(--tinta); background: #fff; }
.escala input { display: none; }
.escala input:checked + span { background: var(--magenta); color: #fff; border-radius: 10px; width: 100%; height: 100%; display: grid; place-items: center; }
.intro-form { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 14px 18px; font-size: 14px; color: #55507a; margin: 14px 0 6px; }
details.info-agujas { border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 12px 16px; margin: 6px 0 10px; background: var(--campo); }
details.info-agujas summary { cursor: pointer; font-weight: 600; color: var(--magenta); }
details.info-agujas p, details.info-agujas ul { font-size: 14px; margin: 8px 0; }
#form-cargando { text-align: center; }
#form-listo-texto { margin: 0; font-size: 18px; line-height: 1.55; }

/* ============ CELULAR (un solo corte, 900 px) ============ */
@media (max-width: 900px) {
  .pub-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 26px 16px 8px; max-width: none; }
  .marca { display: contents; }
  .marca .logo { order: 1; width: 190px; margin: 0 auto; }
  .marca h1 { order: 2; font-size: 33px; text-align: center; margin-top: 2px; }
  .marca .lead { order: 3; font-size: 17px; text-align: center; margin: 0 auto; }
  .columna { order: 4; width: 100%; }
  .marca .logo { align-self: center; }
  .tarjeta { padding: 26px 22px; border-radius: 24px; }
  .tarjeta h2, .paso-titulo { font-size: 22px; }
  .aliada { order: 5; max-width: none; gap: 16px; align-items: center; margin-top: 8px; padding-top: 22px; }
  .aliada img { width: 128px; }
  .aliada h2 { font-size: 20px; margin-bottom: 6px; }
  .aliada p { font-size: 15px; }
  .boton { font-size: 15px; padding: 17px 18px; }
  .boton-secundario { padding: 15px 18px; }
  input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], select { height: 54px; font-size: 17px; }
  .item-lista { padding: 16px 16px; }
  .item-clickeable { padding-right: 46px; }
  .item-clickeable::after { right: 16px; }
  .grilla-horarios { gap: 8px; }
  .dia-calendario { height: 40px; }
  .qr-turno { width: 170px; }
  .pie { padding: 12px 16px 24px; }
}
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vacio a { color: var(--magenta); font-weight: 600; }
#consulta-form .boton { margin-top: 26px; }
#consulta-form + .boton-texto { margin-top: 6px; }
/* ==== FIN BASE ==== */