/* =========================================================
   AFR Engine - Sistema de Reservas
   Hoja de estilos alineada con la identidad visual de afrengine.es:
   - Tipografía Lexend
   - Rojo de marca (#ff0000) como color de acento / CTA
   - Fondos oscuros #212121 y claros #f5f6f7
   - Botones en mayúsculas, negrita, letter-spacing
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --afr-rojo: #ff0000;
    --afr-rojo-hover: #a50000;
    --afr-oscuro: #212121;
    --afr-gris-claro: #f5f6f7;
    --afr-gris-medio: #e2e4e6;
    --afr-blanco: #ffffff;
    --afr-whatsapp: #25d366;
    --afr-radius: 8px;
    --afr-shadow: 0 2px 12px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--afr-gris-claro);
    color: var(--afr-oscuro);
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 700; margin: 0 0 12px; }

.separador {
    width: 66px;
    height: 4px;
    background: var(--afr-rojo);
    border: none;
    margin: 10px 0 20px;
    border-radius: 2px;
}

.contenedor { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ---------- Cabecera ---------- */
.afr-header {
    background: var(--afr-oscuro);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.afr-header img { height: 40px; display: block; }
.afr-header .volver {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.3);
    padding: 8px 14px;
    border-radius: 6px;
    transition: .2s;
}
.afr-header .volver:hover { border-color: var(--afr-rojo); color: var(--afr-rojo); }

/* ---------- Hero ---------- */
.afr-hero {
    background: var(--afr-oscuro);
    color: #fff;
    padding: 48px 20px 40px;
    text-align: center;
}
.afr-hero h1 { font-size: 1.9rem; text-shadow: 2px 2px 2px rgba(0,0,0,.5); }
.afr-hero p { opacity: .85; max-width: 560px; margin: 0 auto; }
.afr-hero .separador { margin-left: auto; margin-right: auto; }

/* ---------- Pasos de reserva ----------
   Nota: este bloque vive FUERA del hero oscuro, sobre el fondo claro de la
   página (var(--afr-gris-claro)), así que usa colores oscuros para
   mantener buen contraste (antes usaba blanco semitransparente, pensado
   por error para un fondo oscuro, y quedaba casi ilegible). */
.pasos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 24px auto 0;
    max-width: 460px;
    padding: 0 20px;
}
.paso {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a8a8a;
    border-bottom: 3px solid var(--afr-gris-medio);
    padding-bottom: 10px;
}
.paso.activo { color: var(--afr-oscuro); border-color: var(--afr-rojo); }

/* ---------- Tarjetas de servicio ---------- */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 24px 0;
}
.servicio-card {
    background: #fff;
    border: 2px solid var(--afr-gris-medio);
    border-radius: var(--afr-radius);
    padding: 18px;
    cursor: pointer;
    transition: .2s;
    text-align: center;
    font-weight: 600;
}
.servicio-card:hover { border-color: var(--afr-rojo); transform: translateY(-2px); }
.servicio-card.seleccionado {
    border-color: var(--afr-rojo);
    background: #fff5f5;
    box-shadow: var(--afr-shadow);
}
.servicio-card small { display: block; font-weight: 400; color: #666; margin-top: 4px; font-size: 12px; }

/* ---------- Formulario ---------- */
.card-form {
    background: #fff;
    border-radius: var(--afr-radius);
    box-shadow: var(--afr-shadow);
    padding: 28px 24px;
    margin: 24px 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--afr-rojo); border-color: var(--afr-rojo); }
textarea { min-height: 90px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campo-full { grid-column: 1 / -1; }

/* ---------- Calendario mensual (selector de fecha) ---------- */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
}
.cal-mes-label {
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--afr-oscuro);
}
.cal-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--afr-gris-medio);
    background: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--afr-oscuro);
}
.cal-nav:hover:not(:disabled) { border-color: var(--afr-rojo); color: var(--afr-rojo); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-grid-cabecera { margin-bottom: 4px; }
.cal-dia-nombre {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a8a8a;
    padding-bottom: 4px;
}
.cal-dia {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--afr-gris-medio);
    border-radius: 8px;
    background: #fff;
    color: var(--afr-oscuro);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.cal-dia:hover:not(:disabled) { border-color: var(--afr-rojo); }
.cal-dia.seleccionado { border-color: var(--afr-rojo); background: var(--afr-rojo); color: #fff; }
.cal-dia-hoy:not(.seleccionado) { border-color: var(--afr-oscuro); font-weight: 800; }
.cal-dia-vacio { background: transparent; border: none; cursor: default; }
.cal-dia-disabled, .cal-dia:disabled {
    background: #f5f6f7;
    color: #b9bcbf;
    border-color: var(--afr-gris-medio);
    cursor: not-allowed;
}
.cal-nota { font-size: 12px; color: #888; margin-top: 10px; }

@media (max-width: 420px) {
    .cal-dia { font-size: 12px; }
}

/* Cuadrícula de horas tipo "calendario": cada casilla es una hora del día.
   Solo dos estados de cara al cliente: disponible u ocupado (el backend ya
   colapsa aquí conceptos internos como el margen de trabajo tras una cita,
   para no confundir con distinciones que no le aportan nada al cliente). */
.horas-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #555;
    margin-bottom: 12px;
}
.horas-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pastilla { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pastilla-disponible { background: #fff; border: 2px solid var(--afr-gris-medio); }
.pastilla-ocupado { background: #fbdcdc; border: 2px solid #e79a9a; }

.horas-cuadricula {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 10px;
}
.hora-slot {
    padding: 12px 6px;
    border: 2px solid var(--afr-gris-medio);
    border-radius: 8px;
    background: #fff;
    color: var(--afr-oscuro);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    transition: .15s;
}
.hora-slot:hover:not(:disabled) { border-color: var(--afr-rojo); transform: translateY(-1px); }
.hora-slot.seleccionado { border-color: var(--afr-rojo); background: var(--afr-rojo); color: #fff; }

/* Ocupado: casilla con una cita real. Texto oscuro sobre rojo muy claro (buen contraste). */
.hora-slot-ocupado {
    background: #fbdcdc;
    border-color: #e79a9a;
    color: #7a1f1f;
    cursor: not-allowed;
    text-decoration: line-through;
}
.hora-slot:disabled { opacity: .85; }

.sin-horas { color: #666; font-size: 14px; padding: 12px 0; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 14px 30px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: .2s;
    text-align: center;
}
.btn-primario { background: var(--afr-rojo); color: #fff; }
.btn-primario:hover { background: var(--afr-rojo-hover); }
.btn-primario:disabled { background: #ccc; cursor: not-allowed; }
.btn-secundario { background: transparent; border: 2px solid var(--afr-oscuro); color: var(--afr-oscuro); }
.btn-secundario:hover { border-color: var(--afr-rojo); color: var(--afr-rojo); }
.btn-bloque { width: 100%; }

/* ---------- RGPD / consentimiento ---------- */
.consentimiento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #555;
    margin: 18px 0;
}
.consentimiento input { width: auto; margin-top: 3px; }

/* ---------- Resumen ---------- */
.resumen-box {
    background: var(--afr-oscuro);
    color: #fff;
    border-radius: var(--afr-radius);
    padding: 20px;
    margin-bottom: 20px;
}
.resumen-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.resumen-box dt { opacity: .6; }
.resumen-box dd { margin: 0; font-weight: 600; }
.resumen-box .total { font-size: 20px; color: var(--afr-rojo); font-weight: 800; }

/* ---------- Insignia de método de pago (paso 4) ---------- */
.metodo-pago {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--afr-gris-medio);
    border-radius: var(--afr-radius);
    padding: 12px 16px;
    margin: 4px 0 16px;
    font-size: 13px;
    color: #444;
}
.metodo-pago .icono-candado { flex-shrink: 0; color: #6b7280; }
.marca-paypal { font-weight: 800; letter-spacing: -.02em; }
.marca-paypal-pay { color: #003087; }
.marca-paypal-pal { color: #009cde; }

.alerta { padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.alerta-error { background: #fdecea; color: #a50000; border: 1px solid #f5c2c0; }
.alerta-ok { background: #eafaf1; color: #0a6b3f; border: 1px solid #b7e4c7; }

/* ---------- Confirmación ---------- */
.confirmacion { text-align: center; padding: 48px 20px; }
.confirmacion .icono-ok {
    width: 72px; height: 72px; border-radius: 50%;
    background: #0a6b3f; color: #fff; font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.localizador {
    display: inline-block;
    background: var(--afr-oscuro);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 12px 0;
}

/* ---------- Footer ---------- */
.afr-footer {
    background: var(--afr-oscuro);
    color: rgba(255,255,255,.7);
    text-align: center;
    padding: 24px 20px;
    font-size: 13px;
    margin-top: 40px;
}
.afr-footer a { color: #fff; }
.afr-footer a:hover { color: var(--afr-rojo); }

.spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
    display: inline-block; animation: girar .7s linear infinite; vertical-align: -3px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.oculto { display: none !important; }