/* ─────────────────────────────────────────────────────────────────────────
   Asistente "Pedir cita" (estilo tipo Vithas, con los colores de JOFREFIV).
   Convierte el formulario en pasos (un paso cada vez) con barra de progreso,
   tarjetas seleccionables y navegación Atrás/Siguiente. No cambia los IDs de
   los campos: la lógica y las conexiones (pedir-cita.js) siguen igual.
   ───────────────────────────────────────────────────────────────────────── */

/* Variables en el contenedor de página, para que las compartan la barra lateral
   (pasos + resumen) y el formulario. */
.wz-page {
    --wz-primary: #373daa;
    --wz-primary-dark: #1d24aa;
    --wz-primary-soft: #eef0fb;
    --wz-rosa: #f5a7d8;
    --wz-rosa-dark: #e06fbf;
    --wz-ink: #2a2a3a;
    --wz-muted: #7c7c7c;
    --wz-line: #e4e4ef;
    --wz-bg: #f8f8fc;
    --wz-ok: #23995a;
    --wz-radius: 14px;
    --wz-shadow: 0 10px 30px rgba(55, 61, 170, .10);
    color: var(--wz-ink);
    min-height: 100vh;
    background: linear-gradient(180deg, #eef0fb 0%, #f6f7fc 220px, #f6f7fc 100%);
}
.wz-cita { color: var(--wz-ink); }

/* ── Página dedicada: reset del body y ocultar la "cromática" de la web ─── */
body.wz-page-body { margin: 0; background: #f6f7fc; }
body.wz-page-body > header,
body.wz-page-body > footer,
body.wz-page-body .espacioMenuMovil,
body.wz-page-body #actionBarMovil,
body.wz-page-body #menuMovil,
body.wz-page-body .fondoOscuro,
body.wz-page-body .wz-page > header,
body.wz-page-body .wz-page > footer { display: none !important; }

/* ── Barra superior propia ─────────────────────────────────────────────── */
.wz-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 24px;
    background: #fff; border-bottom: 1px solid var(--wz-line);
    box-shadow: 0 2px 12px rgba(55, 61, 170, .05);
}
.wz-topbar .wz-logo img { height: 40px; width: auto; display: block; }
.wz-top-actions { display: flex; align-items: center; gap: 18px; font-weight: 600; }
.wz-top-actions a { color: var(--wz-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.wz-top-actions a:hover { color: var(--wz-primary-dark); }
.wz-top-phone { font-size: 15px; }
.wz-top-back { font-size: 14px; }

/* ── Estructura de dos columnas ────────────────────────────────────────── */
.wz-shell {
    max-width: 1120px; margin: 0 auto; padding: 32px 24px 60px;
    display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start;
}
.wz-main { min-width: 0; }
.wz-main > .wz-cita { max-width: none; margin: 0; }
/* En la página dedicada el stepper horizontal solo se ve en móvil. */
.wz-main .wz-steps { display: none; }

/* ── Columna lateral (rail): título + pasos verticales + resumen + ayuda ─ */
.wz-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 22px; }
.wz-rail-title { font-size: 28px; font-weight: 800; color: var(--wz-primary-dark); margin: 0; }

.wz-vsteps { list-style: none; margin: 0; padding: 0; }
.wz-vsteps li {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 8px 0; color: var(--wz-muted); font-weight: 600; font-size: 15px;
}
.wz-vsteps li .wz-dot {
    width: 32px; height: 32px; line-height: 32px; text-align: center; flex: 0 0 auto;
    border-radius: 50%; background: #fff; border: 2px solid var(--wz-line);
    color: var(--wz-muted); font-weight: 700; transition: all .2s ease;
}
.wz-vsteps li:not(:last-child)::before {
    content: ""; position: absolute; left: 15px; top: 40px; bottom: -8px; width: 2px; background: var(--wz-line);
}
.wz-vsteps li.is-active { color: var(--wz-primary-dark); }
.wz-vsteps li.is-active .wz-dot { background: var(--wz-primary); border-color: var(--wz-primary); color: #fff; box-shadow: 0 0 0 5px var(--wz-primary-soft); }
.wz-vsteps li.is-done .wz-dot { background: var(--wz-primary); border-color: var(--wz-primary); color: #fff; }
.wz-vsteps li.is-done .wz-dot span { display: none; }
.wz-vsteps li.is-done .wz-dot::after { content: "\2713"; }
.wz-vsteps li.is-done:not(:last-child)::before,
.wz-vsteps li.is-active:not(:last-child)::before { background: var(--wz-primary); }

/* Resumen en vivo */
.wz-summary { background: #fff; border: 1px solid var(--wz-line); border-radius: var(--wz-radius); padding: 18px; box-shadow: var(--wz-shadow); }
.wz-summary h4 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--wz-primary); }
.wz-summary ul { list-style: none; margin: 0; padding: 0; }
.wz-summary li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--wz-line); font-size: 14px; }
.wz-summary li:last-child { border-bottom: none; }
.wz-summary li .k { color: var(--wz-muted); }
.wz-summary li .v { font-weight: 600; text-align: right; color: var(--wz-ink); }
.wz-summary .wz-empty { color: var(--wz-muted); font-size: 14px; margin: 0; }

.wz-help { font-size: 13.5px; color: var(--wz-muted); line-height: 1.5; background: var(--wz-primary-soft); border-radius: 12px; padding: 14px 16px; }
.wz-help strong { color: var(--wz-primary-dark); display: block; margin-bottom: 3px; }

@media (max-width: 900px) {
    .wz-shell { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px 48px; }
    .wz-rail { position: static; }
    .wz-vsteps, .wz-summary, .wz-help { display: none; }   /* en móvil manda el stepper horizontal */
    .wz-main .wz-steps { display: flex; }
}

/* ── Barra de progreso (stepper) ───────────────────────────────────────── */
.wz-steps {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    counter-reset: wz;
}
.wz-steps li {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    font-size: 13px;
    color: var(--wz-muted);
    min-width: 0;
}
/* línea conectora */
.wz-steps li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--wz-line);
    z-index: 0;
}
.wz-steps li:first-child::before { display: none; }
.wz-steps li .wz-dot {
    display: block;   /* es un <span>: sin esto ignora width/height y sale estrecho */
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: #fff;
    border: 2px solid var(--wz-line);
    color: var(--wz-muted);
    font-weight: 700;
    transition: all .25s ease;
}
.wz-steps li .wz-label {
    display: block;
    padding: 0 4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* paso activo */
.wz-steps li.is-active .wz-dot {
    background: var(--wz-primary);
    border-color: var(--wz-primary);
    color: #fff;
    box-shadow: 0 0 0 5px var(--wz-primary-soft);
}
.wz-steps li.is-active .wz-label { color: var(--wz-primary); font-weight: 700; }
/* paso completado */
.wz-steps li.is-done .wz-dot {
    background: var(--wz-primary);
    border-color: var(--wz-primary);
    color: #fff;
}
.wz-steps li.is-done .wz-dot::after { content: "\2713"; }       /* check */
.wz-steps li.is-done .wz-dot span { display: none; }
.wz-steps li.is-done::before,
.wz-steps li.is-active::before { background: var(--wz-primary); }

/* ── Tarjeta del paso ──────────────────────────────────────────────────── */
.wz-step {
    background: #fff;
    border: 1px solid var(--wz-line);
    border-radius: var(--wz-radius);
    box-shadow: var(--wz-shadow);
    padding: 28px;
    animation: wz-in .25s ease;
}
.wz-step[hidden] { display: none; }
@keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz-step > h3 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--wz-primary-dark);
}
.wz-step > .wz-sub {
    margin: 0 0 22px;
    color: var(--wz-muted);
    font-size: 15px;
}
.wz-field { margin-bottom: 18px; }
.wz-field > label { display: block; font-weight: 600; margin-bottom: 7px; }
.wz-req { color: #e0457a; font-weight: 700; margin-left: 2px; }
.wz-oblig { color: var(--wz-muted); font-size: 13px; margin: 2px 0 10px; }
.wz-oblig .wz-req { margin-left: 0; }
.wz-cita .wz-field .form-control,
.wz-cita select.caja,
.wz-cita input.caja,
.wz-cita textarea.caja {
    height: auto;
    min-height: 50px;
    border-radius: 12px;
    border: 1.5px solid var(--wz-line);
    padding: 12px 14px;
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.wz-cita textarea.caja { min-height: 110px; }
.wz-cita .form-control:focus {
    border-color: var(--wz-primary);
    box-shadow: 0 0 0 4px var(--wz-primary-soft);
}
.wz-cita .es-invalido { border-color: var(--wz-rosa-dark) !important; background: #fff6fa; }
.wz-row { display: flex; flex-wrap: wrap; gap: 16px; }
.wz-row > .wz-field { flex: 1 1 240px; margin-bottom: 0; }
.wz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Tarjetas seleccionables (unidad, vía) ─────────────────────────────── */
.wz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.wz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 16px;
    border: 2px solid var(--wz-line);
    border-radius: var(--wz-radius);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: all .18s ease;
}
.wz-card:hover { border-color: var(--wz-primary); transform: translateY(-2px); box-shadow: var(--wz-shadow); }
.wz-card .wz-ic { font-size: 24px; color: var(--wz-primary); }
.wz-card .wz-ct { font-weight: 700; font-size: 16px; }
.wz-card .wz-cd { font-size: 13px; color: var(--wz-muted); }
.wz-card.is-sel {
    border-color: var(--wz-primary);
    background: var(--wz-primary-soft);
    box-shadow: 0 0 0 3px rgba(55, 61, 170, .12);
}
.wz-card.is-sel::after {
    content: "\2713";
    position: absolute;
    top: 10px; right: 12px;
    width: 22px; height: 22px;
    line-height: 22px; text-align: center;
    background: var(--wz-primary); color: #fff;
    border-radius: 50%; font-size: 13px; font-weight: 700;
}

/* ── Pastillas (primera visita, franja) como chips ─────────────────────── */
.wz-cita .opciones_pastilla { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-cita .opciones_pastilla .pastilla { margin: 0; cursor: pointer; }
.wz-cita .opciones_pastilla .pastilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-cita .opciones_pastilla .pastilla span {
    display: inline-block;
    padding: 11px 18px;
    border: 1.5px solid var(--wz-line);
    border-radius: 30px;
    font-weight: 600;
    color: var(--wz-ink);
    background: #fff;
    transition: all .15s ease;
}
.wz-cita .opciones_pastilla .pastilla input:checked + span {
    border-color: var(--wz-primary);
    background: var(--wz-primary);
    color: #fff;
}
.wz-cita .opciones_pastilla .pastilla input:focus-visible + span { box-shadow: 0 0 0 4px var(--wz-primary-soft); }

/* Hover legible (sobrescribe el .pastilla:hover/.hora:hover de pedir-cita.css que
   ponía texto blanco sobre rosa claro y no se leía). */
.wz-cita .opciones_pastilla .pastilla:hover span,
.wz-cita .wz-via .pastilla:hover span,
.wz-cita .rejilla_horas .hora:hover span {
    background-color: var(--wz-primary-soft);
    border-color: var(--wz-primary);
    color: var(--wz-primary-dark);
}
/* ...pero si ya está marcado, mantiene su color de seleccionado. */
.wz-cita .opciones_pastilla .pastilla input:checked + span,
.wz-cita .rejilla_horas .hora input:checked + span {
    background: var(--wz-primary); border-color: var(--wz-primary); color: #fff;
}

/* ── Vía grande (seguro / privado): dos tarjetas ───────────────────────── */
.wz-via { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-via .pastilla { margin: 0; }
.wz-via .pastilla input { position: absolute; opacity: 0; }
.wz-via .pastilla span {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 14px;
    border: 2px solid var(--wz-line);
    border-radius: var(--wz-radius);
    font-weight: 700; font-size: 16px; text-align: center;
    background: #fff; cursor: pointer; transition: all .18s ease;
}
.wz-via .pastilla span i { font-size: 26px; color: var(--wz-primary); }
.wz-via .pastilla span small { font-weight: 500; font-size: 12.5px; color: var(--wz-muted); }
.wz-via .pastilla input:checked + span {
    border-color: var(--wz-primary);
    background: var(--wz-primary-soft);
    box-shadow: 0 0 0 3px rgba(55, 61, 170, .12);
}

/* ── Rejilla de horas (chips) ──────────────────────────────────────────── */
.wz-cita .rejilla_horas { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-cita .rejilla_horas .aviso_horas { color: var(--wz-muted); font-size: 14px; margin: 4px 0; flex-basis: 100%; }
.wz-cita .rejilla_horas .hora { margin: 0; }
.wz-cita .rejilla_horas .hora input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-cita .rejilla_horas .hora span {
    display: inline-block; min-width: 72px; text-align: center;
    padding: 10px 14px; border: 1.5px solid var(--wz-line); border-radius: 10px;
    font-weight: 600; background: #fff; cursor: pointer; transition: all .15s ease;
}
.wz-cita .rejilla_horas .hora input:checked + span {
    border-color: var(--wz-primary); background: var(--wz-primary); color: #fff;
}
.wz-cita .ayuda_campo { display: block; color: var(--wz-muted); font-size: 13px; margin-top: 6px; }

/* ── Calendario de disponibilidad ──────────────────────────────────────── */
.wz-cal { border: 1px solid var(--wz-line); border-radius: var(--wz-radius); padding: 14px 16px; background: #fff; max-width: 440px; }
.wz-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wz-cal-title { font-weight: 700; color: var(--wz-primary-dark); font-size: 17px; }
.wz-cal-nav { border: 1.5px solid var(--wz-line); background: #fff; border-radius: 9px; width: 36px; height: 36px; color: var(--wz-primary); cursor: pointer; font-size: 14px; transition: all .15s; }
.wz-cal-nav:hover:not([disabled]) { border-color: var(--wz-primary); background: var(--wz-primary-soft); }
.wz-cal-nav[disabled] { opacity: .3; cursor: default; }
.wz-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wz-cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--wz-muted); padding-bottom: 6px; }
.wz-cal-day { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; padding: 0; background: transparent; }
.wz-cal-day.is-disabled { color: #c9c9d6; background: #f6f6fa; }
.wz-cal-day.is-available { background: #fff; border-color: var(--wz-line); color: var(--wz-ink); cursor: pointer; }
.wz-cal-day.is-available:hover { border-color: var(--wz-primary); background: var(--wz-primary-soft); }
.wz-cal-day .wz-cal-tick { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 8px; color: var(--wz-ok); }
.wz-cal-day.is-selected { background: var(--wz-primary); border-color: var(--wz-primary); color: #fff; }
.wz-cal-day.is-selected .wz-cal-tick { color: #fff; }
/* Día con hueco pero sin cupo de aseguradora (se puede pulsar para ver el aviso) */
.wz-cal-day.is-full { background: #fff7ec; border-color: #f3d3a4; color: #b06a00; cursor: pointer; }
.wz-cal-day.is-full .wz-cal-tick { color: #b06a00; }
.wz-cal-sel { color: var(--wz-primary); font-weight: 600; font-size: 14px; }
.wz-cal-msg { text-align: center; color: var(--wz-muted); font-size: 14px; padding: 18px 8px; }
.wz-cal-leyenda { color: var(--wz-muted); font-size: 13px; margin-top: 10px; }
/* Mes que el especialista aún no ha publicado */
.wz-cal-pend { text-align: center; padding: 18px 10px 8px; }
.wz-cal-pend i.fa-hourglass-half { font-size: 28px; color: var(--wz-rosa-dark); margin-bottom: 10px; }
.wz-cal-pend p { font-size: 14px; color: var(--wz-ink); margin-bottom: 14px; }
.wz-cita .wz-via .pastilla.is-off { opacity: .45; cursor: not-allowed; }
.wz-franja { margin-bottom: 14px; }

/* ── Consentimiento ────────────────────────────────────────────────────── */
.wz-consent {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--wz-bg); border: 1px solid var(--wz-line);
    border-radius: 12px; padding: 14px 16px; margin-top: 6px;
}
.wz-consent input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.wz-consent label { margin: 0; font-size: 14px; line-height: 1.5; }

/* Información básica de protección de datos (encima del consentimiento) */
.wz-infoprot {
    border: 1px solid var(--wz-line); border-radius: 12px;
    padding: 12px 16px; margin-top: 6px; margin-bottom: 10px;
    font-size: 12.5px; line-height: 1.45; color: var(--wz-ink);
    max-height: 220px; overflow-y: auto;
}
.wz-infoprot-tit { font-weight: 700; margin: 0 0 8px; font-size: 13px; }
.wz-infoprot dl { margin: 0; }
.wz-infoprot dt { font-weight: 700; margin-top: 6px; }
.wz-infoprot dd { margin: 0; }

/* ── Anti-robot (ALTCHA) ───────────────────────────────────────────────── */
.wz-captcha { margin-top: 14px; }
.wz-captcha altcha-widget {
    --altcha-border-radius: 12px;
    --altcha-color-border: var(--wz-line);
    --altcha-color-base: var(--wz-bg);
    --altcha-max-width: 100%;
}

/* ── Navegación ────────────────────────────────────────────────────────── */
.wz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.wz-btn {
    border: none; border-radius: 30px; padding: 14px 26px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: all .15s ease; display: inline-flex; align-items: center; gap: 8px;
}
.wz-btn-primary { background: var(--wz-primary); color: #fff; }
.wz-btn-primary:hover { background: var(--wz-primary-dark); }
.wz-btn-ghost { background: #fff; color: var(--wz-primary); border: 1.5px solid var(--wz-line); }
.wz-btn-ghost:hover { border-color: var(--wz-primary); }
.wz-btn-send { background: var(--wz-rosa); color: #6a1a4d; }
.wz-btn-send:hover { background: var(--wz-rosa-dark); color: #fff; }
.wz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.wz-sumario { margin-bottom: 18px; }

/* ── Resumen (último paso) ─────────────────────────────────────────────── */
.wz-resumen { list-style: none; padding: 0; margin: 0 0 8px; }
.wz-resumen li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--wz-line); font-size: 15px; }
.wz-resumen li strong { color: var(--wz-primary-dark); font-weight: 600; }
.wz-resumen li span { text-align: right; color: var(--wz-ink); }

/* ── Confirmación (hermana del formulario: colores literales, sin variables) ─ */
.confirmacion_cita { max-width: 620px; margin: 0 auto; text-align: center; background:#fff;
    border:1px solid #e4e4ef; border-radius: 14px; box-shadow: 0 10px 30px rgba(55,61,170,.10); padding: 36px 28px; }
.confirmacion_cita .icono_confirmacion {
    width: 72px; height: 72px; line-height: 72px; border-radius: 50%;
    background: #23995a; color: #fff; font-size: 32px; margin: 0 auto 16px;
}
.confirmacion_cita h3 { color: #1d24aa; }
.confirmacion_cita .resumen_cita { text-align: left; margin: 18px 0; }
.confirmacion_cita .btn { margin: 6px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .wz-step { padding: 20px 16px; }
    .wz-steps li .wz-label { display: none; }     /* en móvil solo los números */
    .wz-grid-2, .wz-via { grid-template-columns: 1fr; }
    .wz-btn { padding: 13px 20px; font-size: 15px; }
    .wz-step > h3 { font-size: 20px; }
}