/* Identidad de rinku.tech: Bebas Neue (títulos) + Rubik (texto), fondo blanco.
   Paleta: 150d16 · f2f2f2 · 6464ff · b6bbff · d1e7ff · bef3df
   El paso de agenda sigue la estructura del booker de cal.diy (información · calendario · horas). */
:root {
  --fondo: #fff;
  --texto: #150d16;
  --suave: #5b5560;
  --gris: #f2f2f2;
  --acento: #6464ff;
  --acento-hover: #4f4fe6;
  --acento-boton: #5f5fff; /* 6464ff apenas oscurecido: texto blanco a 16px con contraste AA (4,6:1) */
  --acento-texto: #fff;
  --lavanda: #b6bbff;
  --celeste: #d1e7ff;
  --menta: #bef3df;
  --borde: #e3e3ea;
  --apagado: #8a8590; /* placeholders y días sin hueco */
  --error: #c62828;
  --radio: 10px;
  --radio-md: 6px;
  --sombra-tarjeta: 0 1px 2px rgba(21, 13, 22, .04), 0 10px 30px rgba(21, 13, 22, .07);
  --titulos: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 Rubik, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.rf { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); min-height: 100dvh; }
.rf--ancho { max-width: 900px; } /* solo en el paso de agenda (lo pone app.js) */
.rf-embed { padding-top: 56px; min-height: 100vh; } /* dentro del widget: sitio para el botón de cerrar */

.rf-progreso { height: 6px; background: var(--gris); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.rf-progreso-barra { height: 100%; width: 0; background: var(--acento); border-radius: 6px; transition: width .25s ease; }

.rf-titulo {
  font-family: var(--titulos); font-weight: 400; text-transform: uppercase;
  font-size: 1.6rem; line-height: 1.1; letter-spacing: .01em; margin: 8px 0 10px; outline: none;
}
.rf-intro { color: var(--suave); margin: 0 0 20px; }

.rf-campo { display: block; font-weight: 500; margin-bottom: 16px; }
input:not([type=checkbox]), select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 14px; font: inherit; color: var(--texto);
  background: var(--gris); border: 1.5px solid transparent; border-radius: var(--radio);
  transition: border-color .15s, background-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--apagado); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); background: var(--fondo); box-shadow: 0 0 0 3px var(--celeste); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
textarea { resize: vertical; min-height: 150px; margin-bottom: 20px; }
.rf-tel { display: flex; gap: 8px; }
.rf-tel select { width: auto; min-width: 7.5em; flex: none; } /* bandera + prefijo: "🇪🇸 +34" */
.rf-tel input { flex: 1; min-width: 0; }

.rf-check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 16px; color: var(--suave); font-size: .95rem; }
.rf-check input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--acento); }
.rf-check a { color: var(--acento); }
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rf-error { color: var(--error); margin: 0 0 12px; font-weight: 500; }

/* Botón principal: como el "EMPEZAR" de la web (Rubik 600, mayúsculas). */
.rf-boton {
  display: block; width: 100%; padding: 16px; border: 0; border-radius: var(--radio); cursor: pointer;
  background: var(--acento-boton); color: var(--acento-texto); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .03em; text-align: center; text-decoration: none;
  transition: background-color .15s, transform .1s;
}
.rf-boton:hover:not(:disabled) { background: var(--acento-hover); }
.rf-boton:active:not(:disabled) { transform: scale(.99); }
.rf-boton:disabled { background: var(--lavanda); color: var(--texto); cursor: default; }
.rf-secundario { background: var(--fondo); border: 1.5px solid var(--acento); color: var(--acento); }
.rf-secundario:hover:not(:disabled) { background: var(--celeste); }

.rf-atras { background: none; border: 0; color: var(--suave); font: inherit; font-size: .95rem; padding: 8px 0; cursor: pointer; }
.rf-atras::before { content: "← "; }
.rf-atras:hover { color: var(--acento); }

.rf-opciones { display: grid; gap: 12px; }
.rf-opcion {
  text-align: left; padding: 18px 16px; font-weight: 500; font-size: 1rem; color: var(--texto); cursor: pointer;
  background: var(--fondo); border: 1.5px solid var(--borde); border-radius: var(--radio);
  transition: border-color .15s, background-color .15s;
}
.rf-opcion:hover { border-color: var(--lavanda); background: #f7f7ff; }
.rf-opcion[aria-checked=true] { border-color: var(--acento); background: var(--celeste); }

/* ---------- Paso 5: agenda (estructura del booker de cal.diy, sin panel de información) ---------- */
.rf-booker {
  display: grid; grid-template-columns: 1fr; align-items: start;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-tarjeta); overflow: hidden;
}
.rf-booker-cal { padding: 16px; }
.rf-booker-horas { padding: 16px; border-top: 1px solid var(--borde); }

/* Cabecera de la tarjeta, a todo el ancho: duración (esquina izquierda) y zona horaria del lead (esquina derecha).
   Texto pequeño en gris con un icono mínimo, sin fondo ni borde (variante D de la maqueta del 29/09/2026). */
.rf-booker-cabecera {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 14px 16px 0; color: var(--suave); font-size: .85rem;
}
.rf-booker-cabecera > span { display: inline-flex; align-items: center; gap: 6px; }
.rf-ico { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Calendario compacto: un mini calendario por mes con solo las semanas que tienen días ofrecidos */
.rf-meses { display: grid; gap: 20px; max-width: 440px; margin: 0 auto; }
.rf-meses > p { margin: 0; }
.rf-mes-titulo { font-family: var(--titulos); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; margin: 0 0 2px; }
.rf-cal-anio { color: var(--suave); }
.rf-cal-semana, .rf-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rf-cal-semana { margin: 6px 0 8px; font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); text-align: center; }
.rf-cal-dia {
  position: relative; height: 44px; padding: 0; border: 1.5px solid transparent; border-radius: var(--radio-md);
  background: var(--gris); color: var(--texto); font-weight: 500; font-size: .95rem; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.rf-cal-dia:hover:not(:disabled) { background: var(--celeste); border-color: var(--acento); }
.rf-cal-dia:disabled { background: none; color: var(--apagado); font-weight: 400; cursor: default; }
.rf-cal-dia[aria-pressed=true] { background: var(--acento-boton); border-color: var(--acento-boton); color: var(--acento-texto); }
.rf-cal-dia--hoy::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--acento);
}
.rf-cal-dia[aria-pressed=true].rf-cal-dia--hoy::after { background: var(--acento-texto); }
.rf-cal-vacio { color: var(--suave); margin: 0; font-size: .95rem; }
.rf-cargando { color: var(--suave); margin: 0; }

/* Esqueleto mientras llegan los horarios (con la respuesta instantánea del servidor casi nunca llega a verse) */
.rf-esqueleto { display: grid; gap: 8px; }
.rf-esq { display: block; background: var(--gris); border-radius: var(--radio-md); animation: rf-pulso 1.2s ease-in-out infinite; }
.rf-esq--titulo { width: 45%; height: 22px; margin-bottom: 4px; }
.rf-esq--semana { height: 12px; border-radius: 4px; }
.rf-esq--fila, .rf-esq--hora { height: 44px; }
@keyframes rf-pulso { 50% { opacity: .5; } }
.rf-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Columna de horas */
.rf-horas-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rf-horas-titulo { font-family: var(--titulos); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; margin: 0; }
/* En móvil, dos horas por fila para acortar el scroll; en escritorio, una por fila */
.rf-horas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rf-horas-lista[aria-busy=true] { opacity: .6; pointer-events: none; }
.rf-hora {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0; background: var(--fondo);
  border: 1.5px solid var(--borde); border-radius: var(--radio-md); color: var(--texto); font-weight: 500; font-size: .95rem; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.rf-hora:hover { border-color: var(--acento); }
.rf-hora[aria-pressed=true] { border-color: var(--acento); color: var(--acento); }
.rf-horas-lista > .rf-hora:only-child { grid-column: 1 / -1; } /* una sola hora: a todo el ancho */
.rf-hora-fila { grid-column: 1 / -1; display: flex; gap: 8px; }
.rf-hora-fila .rf-hora { flex: 1; }
.rf-hora-confirmar {
  flex: 1; width: auto; padding: 10px 12px; font-size: .95rem; text-transform: none; letter-spacing: 0;
  border-radius: var(--radio-md); animation: rf-aparecer .15s ease-out;
}
@keyframes rf-aparecer { from { opacity: 0; transform: translateX(6px); } }
.rf-horas-vacio { grid-column: 1 / -1; color: var(--suave); margin: 0; }
.rf-turnstile { margin-bottom: 10px; }
.rf-turnstile:empty { display: none; }

/* Estado de la sincronización con la agenda (solo en la confirmación propia) */
.rf-estado { color: var(--suave); font-size: .95rem; margin: -8px 0 16px; }
.rf-estado[data-estado=confirmed] { color: #1b7f4b; }
.rf-estado[data-estado=conflict], .rf-estado[data-estado=failed] { color: var(--error); }

/* Confirmación (estilo BookingSuccessCard) */
.rf-exito { max-width: 480px; margin: 0 auto; }
.rf-ok { width: 56px; height: 56px; border-radius: 50%; background: var(--menta); display: grid; place-items: center; margin: 8px 0 12px; }
.rf-ok svg { width: 26px; height: 26px; stroke: var(--texto); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rf-exito-datos {
  display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px; margin: 20px 0 24px; padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.rf-exito-datos dt { color: var(--suave); font-weight: 500; }
.rf-exito-datos dd { margin: 0; }

@media (min-width: 600px) {
  .rf { padding-top: 32px; }
  .rf-titulo { font-size: 2rem; }
}
/* Escritorio: dos columnas (calendario · horas), con el calendario grande y las horas de dos en dos */
@media (min-width: 768px) {
  .rf-booker { grid-template-columns: minmax(0, 1fr) 280px; }
  .rf-booker-cabecera { padding: 18px 24px 0; }
  .rf-booker-cal { padding: 24px; }
  .rf-booker-horas { border-top: 0; border-left: 1px solid var(--borde); padding: 24px 16px; max-height: 640px; overflow-y: auto; }
  .rf-meses { max-width: 480px; gap: 24px; }
  .rf-cal-semana, .rf-cal-dias { gap: 6px; }
  .rf-cal-dia { height: 52px; font-size: 1.05rem; }
  .rf-esq--fila { height: 52px; }
}
@media (min-width: 1024px) {
  .rf-booker { grid-template-columns: minmax(0, 1fr) 320px; }
  .rf-booker-horas { padding: 24px 20px; }
  .rf-cal-dia { height: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }