/**
 * Outlet Nupcial CRM Forms — Pide cita estilo "Outlet Nupcial".
 * Estética minimal blanco/negro (DM Sans + Jost). Todo bajo .atcrm-outlet.
 * Variables --ol-* personalizables desde Elementor.
 */

.atcrm-outlet {
    /* Paleta base */
    --ol-ink: #111111;
    --ol-body: #4f4f4f;
    --ol-muted: #8c8c8c;
    --ol-line: #e6e6e6;
    --ol-line-2: #cccccc;
    --ol-bg: #ffffff;
    --ol-bg-2: #f5f5f5;
    --ol-black: #000000;
    --ol-wa: #25d366;
    --ol-card-bg: #ffffff;

    /* Acentos (selección de servicio/día/hora y barras del stepper) */
    --ol-accent: var(--ol-black);
    --ol-accent-text: #ffffff;

    /* Botón Continuar / Confirmar */
    --ol-btn-bg: var(--ol-black);
    --ol-btn-text: #ffffff;
    --ol-btn-border: var(--ol-black);
    --ol-btn-bg-h: #ffffff;
    --ol-btn-text-h: var(--ol-black);

    /* Botón Atrás */
    --ol-back: var(--ol-muted);
    --ol-back-h: var(--ol-ink);

    box-sizing: border-box;
    font-family: "Jost", Arial, sans-serif;
    color: var(--ol-body);
    font-size: 16px;
    line-height: 1.6;
    background: var(--ol-bg-2);
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

/* Ningún elemento interno puede ser más ancho que su caja */
.atcrm-outlet * { max-width: 100%; }
.atcrm-outlet img { max-width: 100%; height: auto; }

.atcrm-outlet *,
.atcrm-outlet *::before,
.atcrm-outlet *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

@media (max-width: 600px) {
    .atcrm-outlet { padding: 20px 14px; }
}

.atcrm-outlet h1,
.atcrm-outlet h2,
.atcrm-outlet h3 {
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    color: var(--ol-ink);
}
.atcrm-outlet button,
.atcrm-outlet input,
.atcrm-outlet textarea { font-family: inherit; }
.atcrm-outlet .ol-hidden { display: none !important; }

/* ===== Card ===== */
.atcrm-outlet .ol-card {
    width: 100%;
    max-width: 640px;
    background: var(--ol-card-bg);
    border: 1px solid var(--ol-line);
}
.atcrm-outlet .ol-card-body { padding: 44px 46px; }
@media (max-width: 600px) {
    .atcrm-outlet .ol-card-body { padding: 30px 22px; }
}
@media (max-width: 400px) {
    .atcrm-outlet .ol-card-body { padding: 24px 16px; }
}

/* ===== Stepper ===== */
.atcrm-outlet .ol-steps { display: flex; gap: 8px; padding: 26px 46px 0; }
@media (max-width: 600px) {
    .atcrm-outlet .ol-steps { padding: 22px 22px 0; gap: 6px; }
}
@media (max-width: 400px) {
    .atcrm-outlet .ol-steps { padding: 18px 16px 0; }
    .atcrm-outlet .ol-footnav { padding: 16px; gap: 8px; }
}
.atcrm-outlet .ol-step { flex: 1; min-width: 0; }
.atcrm-outlet .ol-bar { height: 3px; background: var(--ol-line); transition: background .3s; }
.atcrm-outlet .ol-step.ol-done .ol-bar,
.atcrm-outlet .ol-step.ol-active .ol-bar { background: var(--ol-accent); }
.atcrm-outlet .ol-lbl {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ol-muted); transition: color .3s;
}
.atcrm-outlet .ol-step.ol-active .ol-lbl,
.atcrm-outlet .ol-step.ol-done .ol-lbl { color: var(--ol-ink); }
.atcrm-outlet .ol-num {
    width: 20px; height: 20px; border: 1px solid var(--ol-line-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; flex: none;
    color: var(--ol-ink); background: transparent;
}
.atcrm-outlet .ol-step.ol-active .ol-num { border-color: var(--ol-ink); }
.atcrm-outlet .ol-step.ol-done .ol-num { background: var(--ol-accent); border-color: var(--ol-accent); color: var(--ol-accent-text); }
.atcrm-outlet .ol-num svg { width: 10px; height: 10px; }
.atcrm-outlet .ol-step-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .atcrm-outlet .ol-step-text { display: none; }
}

/* ===== Panels ===== */
.atcrm-outlet .ol-panel { animation: ol-fade .3s ease; }
@keyframes ol-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.atcrm-outlet .ol-eyebrow {
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ol-muted); margin: 0 0 12px; font-weight: 500;
}
.atcrm-outlet .ol-title {
    font-weight: 500; font-size: 30px; letter-spacing: -.01em; margin: 0 0 10px; color: var(--ol-ink);
}
.atcrm-outlet .ol-lead { color: var(--ol-body); font-size: 14.5px; margin: 0 0 28px; }
@media (max-width: 600px) {
    .atcrm-outlet .ol-title { font-size: 25px; }
}

/* ===== Form fields ===== */
.atcrm-outlet .ol-row { display: flex; gap: 18px; }
.atcrm-outlet .ol-row > * { flex: 1; min-width: 0; }
@media (max-width: 480px) {
    .atcrm-outlet .ol-row { flex-direction: column; gap: 0; }
}
.atcrm-outlet .ol-field { margin-bottom: 2px; }
.atcrm-outlet .ol-label {
    display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ol-muted); margin: 16px 0 6px;
}
.atcrm-outlet .ol-input {
    width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--ol-line-2);
    font-size: 16px; background: transparent; color: var(--ol-ink); border-radius: 0;
}
.atcrm-outlet textarea.ol-input { resize: vertical; min-height: 54px; }
.atcrm-outlet .ol-input:focus { outline: none; border-bottom-color: var(--ol-ink); }
.atcrm-outlet .ol-consent { display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; cursor: pointer; }
.atcrm-outlet .ol-consent input { width: auto; padding: 0; margin-top: 3px; accent-color: var(--ol-black); }
.atcrm-outlet .ol-consent span { font-size: 12px; color: var(--ol-body); line-height: 1.5; }
.atcrm-outlet .ol-consent a { color: var(--ol-ink); }

/* ===== Servicios ===== */
.atcrm-outlet .ol-svc { display: grid; gap: 0; border: 1px solid var(--ol-line-2); }
.atcrm-outlet .ol-svc-btn {
    background: var(--ol-card-bg); border: none; border-bottom: 1px solid var(--ol-line-2);
    padding: 22px; text-align: left; cursor: pointer; transition: background .15s; width: 100%;
}
.atcrm-outlet .ol-svc-btn:last-child { border-bottom: none; }
.atcrm-outlet .ol-svc-btn:hover { background: var(--ol-bg-2); }
.atcrm-outlet .ol-svc-btn.ol-sel { background: var(--ol-accent); }
.atcrm-outlet .ol-nm {
    display: block; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ol-ink); overflow-wrap: anywhere;
}
.atcrm-outlet .ol-svc-btn.ol-sel .ol-nm { color: var(--ol-accent-text); }
.atcrm-outlet .ol-svc-desc { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ol-muted); overflow-wrap: anywhere; }
.atcrm-outlet .ol-svc-btn.ol-sel .ol-svc-desc { color: rgba(255, 255, 255, .75); }

/* ===== Calendario + horas ===== */
.atcrm-outlet .ol-dt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.atcrm-outlet .ol-dt > * { min-width: 0; }
@media (max-width: 560px) {
    .atcrm-outlet .ol-dt { grid-template-columns: 1fr; gap: 24px; }
}
.atcrm-outlet .ol-cal { border: 1px solid var(--ol-line-2); padding: 18px; min-width: 0; }
.atcrm-outlet .ol-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.atcrm-outlet .ol-mname {
    flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap;
    font-family: "DM Sans", sans-serif; font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 600; color: var(--ol-ink);
}
.atcrm-outlet .ol-cal-nav {
    flex: 0 0 32px; background: none; border: 1px solid var(--ol-line-2); width: 32px; height: 32px;
    cursor: pointer; color: var(--ol-ink); font-size: 15px; padding: 0; line-height: 1;
}
.atcrm-outlet .ol-cal-nav:hover:not(:disabled) { border-color: var(--ol-ink); background: var(--ol-bg-2); }
.atcrm-outlet .ol-cal-nav:disabled { opacity: .3; cursor: default; }
.atcrm-outlet .ol-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; width: 100%; }
.atcrm-outlet .ol-wd {
    min-width: 0; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ol-muted); text-align: center; padding: 5px 0;
}
.atcrm-outlet .ol-day {
    min-width: 0; aspect-ratio: 1; border: 1px solid transparent; background: var(--ol-card-bg);
    cursor: pointer; font-size: 13.5px; color: var(--ol-ink); transition: all .12s; padding: 0;
}
.atcrm-outlet .ol-day:hover:not(:disabled):not(.ol-empty) { border-color: var(--ol-ink); }
.atcrm-outlet .ol-day.ol-sel { background: var(--ol-accent); color: var(--ol-accent-text); border-color: var(--ol-accent); }
.atcrm-outlet .ol-day:disabled { color: #d4d4d4; cursor: default; }
.atcrm-outlet .ol-day.ol-empty { cursor: default; border: none; background: transparent; }
.atcrm-outlet .ol-slots-title {
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ol-muted); margin: 0 0 14px;
}
.atcrm-outlet .ol-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.atcrm-outlet .ol-slot {
    border: 1px solid var(--ol-line-2); background: var(--ol-card-bg); padding: 12px 0;
    text-align: center; font-size: 14px; color: var(--ol-ink); cursor: pointer; transition: all .12s;
}
.atcrm-outlet .ol-slot:hover { border-color: var(--ol-ink); }
.atcrm-outlet .ol-slot.ol-sel { background: var(--ol-accent); border-color: var(--ol-accent); color: var(--ol-accent-text); }
.atcrm-outlet .ol-slots-empty { color: var(--ol-muted); font-size: 13px; padding: 16px 0; }

@media (max-width: 480px) {
    .atcrm-outlet .ol-cal { padding: 12px; }
    .atcrm-outlet .ol-cal-grid { gap: 2px; }
    .atcrm-outlet .ol-day { font-size: 12.5px; }
    .atcrm-outlet .ol-wd { font-size: 8.5px; padding: 4px 0; }
    .atcrm-outlet .ol-slots { gap: 7px; }
    .atcrm-outlet .ol-slot { padding: 11px 0; font-size: 13.5px; }
}

/* ===== Footer nav ===== */
.atcrm-outlet .ol-footnav {
    border-top: 1px solid var(--ol-line); padding: 20px 46px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
@media (max-width: 600px) {
    .atcrm-outlet .ol-footnav { padding: 18px 22px; }
}
.atcrm-outlet .ol-btn {
    border: 1px solid var(--ol-btn-border); cursor: pointer; background: var(--ol-btn-bg); color: var(--ol-btn-text);
    padding: 15px 44px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
    font-family: "DM Sans", sans-serif; transition: background .15s, color .15s, opacity .15s;
}
.atcrm-outlet .ol-btn:hover:not([disabled]) { background: var(--ol-btn-bg-h); color: var(--ol-btn-text-h); }
.atcrm-outlet .ol-btn[disabled] { opacity: .28; cursor: default; }
.atcrm-outlet .ol-btn.ol-back {
    border: none; background: none; color: var(--ol-back); padding: 15px 6px; letter-spacing: .16em;
}
.atcrm-outlet .ol-btn.ol-back:hover { color: var(--ol-back-h); background: none; }
@media (max-width: 600px) {
    .atcrm-outlet .ol-btn {
        padding: 14px 18px; flex: 1; text-align: center; letter-spacing: .1em;
        min-width: 0; white-space: normal; overflow-wrap: break-word;
    }
    .atcrm-outlet .ol-btn.ol-back { flex: 0 0 auto; padding: 14px 8px; }
}
@media (max-width: 360px) {
    .atcrm-outlet .ol-btn { padding: 13px 10px; font-size: 11px; letter-spacing: .06em; }
}

/* ===== Éxito ===== */
.atcrm-outlet .ol-done-wrap { text-align: center; padding: 18px 0 8px; }
.atcrm-outlet .ol-done-mark {
    width: 76px; height: 76px; border: 1px solid var(--ol-black); color: var(--ol-ink);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 26px;
}
.atcrm-outlet .ol-done-mark svg { width: 34px; height: 34px; }
.atcrm-outlet .ol-wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--ol-wa);
    color: #fff; border: none; max-width: 100%;
    padding: 14px 28px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    font-family: "DM Sans", sans-serif; cursor: pointer; margin-top: 28px; text-decoration: none;
    overflow-wrap: break-word; text-align: center; line-height: 1.3;
}
@media (max-width: 400px) {
    .atcrm-outlet .ol-wa-btn { padding: 13px 18px; letter-spacing: .08em; width: 100%; }
    .atcrm-outlet .ol-svc-btn { padding: 18px 16px; }
}
.atcrm-outlet .ol-wa-btn svg { width: 18px; height: 18px; }
.atcrm-outlet .ol-ghost {
    background: none; border: 1px solid var(--ol-line-2); color: var(--ol-ink);
}
.atcrm-outlet .ol-ghost:hover:not([disabled]) { background: var(--ol-bg-2); color: var(--ol-ink); }

/* ===== Estados: carga / errores ===== */
.atcrm-outlet .ol-loading {
    display: flex; align-items: center; gap: 12px; color: var(--ol-muted);
    font-size: 14px; padding: 30px 0;
}
.atcrm-outlet .ol-spinner {
    width: 18px; height: 18px; border: 2px solid var(--ol-line-2); border-top-color: var(--ol-ink);
    border-radius: 50%; animation: ol-spin .7s linear infinite; flex: none;
}
@keyframes ol-spin { to { transform: rotate(360deg); } }
.atcrm-outlet .ol-errors {
    background: #fdecec; border: 1px solid #f3b7b7; color: #9b1c1c;
    padding: 12px 14px; font-size: 13px; margin: 0 0 18px; line-height: 1.5;
}

/* Honeypot anti-spam */
.atcrm-outlet .ol-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }