.ka-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
}
.ka-widget {
    --ka-bg: #f5f7fb;
    --ka-surface: #ffffff;
    --ka-surface-container: #fbfbfe;
    --ka-border: #e6eaf3;
    --ka-text: #1d2333;
    --ka-muted: #6b7488;
    --ka-muted-strong: #3f4a5f;
    --ka-orange: #ff6b2c;
    --ka-orange-soft: #fff3ea;
    --ka-orange-border: #ffdcc8;
    --ka-on-orange: #ffffff;
    --ka-error: #dc2626;
    --ka-error-soft: #fdecea;
    --ka-success: #16a34a;
    --ka-success-soft: #eafbf1;
    --ka-shadow: 0 24px 60px rgba(18, 31, 74, 0.10), 0 4px 14px rgba(18, 31, 74, 0.06);
    --ka-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ka-ease-std: cubic-bezier(0.4, 0, 0.2, 1);

    max-width: 560px;
    margin: 0 auto;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ka-text);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    box-shadow: var(--ka-shadow);
    padding: 28px;
    box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
    .ka-widget {
        --ka-bg: #14171f;
        --ka-surface: #1b1f29;
        --ka-surface-container: #20242f;
        --ka-border: #2b3040;
        --ka-text: #eef0f6;
        --ka-muted: #9096a8;
        --ka-muted-strong: #c3c8d6;
        --ka-orange: #ff7a3d;
        --ka-orange-soft: rgba(255, 107, 44, 0.16);
        --ka-orange-border: rgba(255, 107, 44, 0.35);
        --ka-error: #f87171;
        --ka-error-soft: rgba(220, 38, 38, 0.16);
        --ka-success: #4ade80;
        --ka-success-soft: rgba(22, 163, 74, 0.16);
        background: rgba(20, 23, 31, 0.86);
        border-color: rgba(255, 255, 255, 0.06);
    }
}
.ka-widget * { box-sizing: border-box; }

/* Encabezado */
.ka-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ka-orange); margin-bottom: 6px; }
.ka-encabezado h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ka-duracion { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; color: var(--ka-muted); font-size: 13px; }
.ka-duracion-item { display: inline-flex; align-items: center; gap: 6px; }
.ka-duracion-item svg { color: var(--ka-muted); flex-shrink: 0; }

/* Stepper */
.ka-stepper { display: flex; align-items: center; margin-bottom: 26px; }
.ka-stepper-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ka-stepper-dot {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ka-surface-container); border: 1.5px solid var(--ka-border);
    color: var(--ka-muted); font-size: 12px; font-weight: 700;
    transition: background .3s var(--ka-ease-std), border-color .3s var(--ka-ease-std), color .3s var(--ka-ease-std);
}
.ka-stepper-label { font-size: 12px; font-weight: 600; color: var(--ka-muted); white-space: nowrap; transition: color .3s var(--ka-ease-std); }
.ka-stepper-line { flex: 1; height: 1.5px; background: var(--ka-border); margin: 0 10px; min-width: 12px; position: relative; overflow: hidden; }
.ka-stepper-line::after { content: ""; position: absolute; inset: 0; background: var(--ka-orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ka-ease-decel); }
.ka-stepper-item.is-active .ka-stepper-dot { background: var(--ka-orange); border-color: var(--ka-orange); color: var(--ka-on-orange); }
.ka-stepper-item.is-active .ka-stepper-label,
.ka-stepper-item.is-done .ka-stepper-label { color: var(--ka-text); }
.ka-stepper-item.is-done .ka-stepper-dot { background: var(--ka-orange-soft); border-color: var(--ka-orange); color: var(--ka-orange); }
.ka-stepper-item.is-done ~ .ka-stepper-line::after { transform: scaleX(1); }

/* Carril de pasos */
.ka-steps-viewport { position: relative; overflow: hidden; transition: height .38s var(--ka-ease-decel); }
.ka-steps-track { display: flex; width: 400%; transition: transform .38s var(--ka-ease-decel); }
.ka-step { width: 25%; flex-shrink: 0; padding: 2px 2px 4px; }

/* Botón volver */
.ka-volver {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--ka-muted-strong);
    cursor: pointer; padding: 6px 0; margin-bottom: 14px; font-size: 13px; font-weight: 600;
    transition: color .15s var(--ka-ease-std);
}
.ka-volver:hover { color: var(--ka-orange); }
.ka-volver svg { flex-shrink: 0; }

/* Paso 1: calendario mensual */
.ka-nav-fechas { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; margin-bottom: 18px; }
.ka-rango-fechas { font-size: 16px; font-weight: 700; color: var(--ka-text); text-align: center; text-transform: capitalize; }
.ka-btn-icono {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ka-border); background: var(--ka-surface); color: var(--ka-muted-strong);
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
    transition: background .15s var(--ka-ease-std), border-color .15s var(--ka-ease-std), color .15s var(--ka-ease-std), opacity .15s var(--ka-ease-std);
}
.ka-btn-icono:hover:not(:disabled) { background: var(--ka-orange-soft); border-color: var(--ka-orange-border); color: var(--ka-orange); }
.ka-btn-icono:focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 2px; }
.ka-btn-icono:disabled { opacity: .3; cursor: not-allowed; }

.ka-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.ka-cal-semana span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ka-muted); }
.ka-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ka-cal-hueco { visibility: hidden; }
.ka-cal-dia {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ka-border); border-radius: 12px;
    background: var(--ka-surface); color: var(--ka-text); cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    transition: background .18s var(--ka-ease-std), border-color .18s var(--ka-ease-std), color .18s var(--ka-ease-std), transform .18s var(--ka-ease-std);
}
.ka-cal-dia:hover:not(:disabled) { border-color: var(--ka-orange); transform: translateY(-1px); }
.ka-cal-dia:focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 2px; }
.ka-cal-dia.is-activo { background: var(--ka-orange); border-color: var(--ka-orange); color: var(--ka-on-orange); }
.ka-cal-dia:disabled { opacity: .3; cursor: not-allowed; transform: none; border-style: dashed; }
.ka-cal-mes-vacio { grid-column: 1 / -1; }

/* Paso 2: horas */
.ka-paso-titulo { font-size: 15px; font-weight: 700; margin: 0 0 16px; text-transform: capitalize; }
.ka-chips-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.ka-chip-hora {
    height: 44px; padding: 0 12px;
    border: 1.5px solid var(--ka-border); border-radius: 999px;
    background: var(--ka-surface); color: var(--ka-text); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .18s var(--ka-ease-std), border-color .18s var(--ka-ease-std), color .18s var(--ka-ease-std), transform .18s var(--ka-ease-std);
}
.ka-chip-hora:hover { border-color: var(--ka-orange); color: var(--ka-orange); transform: translateY(-1px); }
.ka-chip-hora:focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 2px; }

/* Paso 3: datos */
.ka-resumen-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--ka-orange-soft); border: 1px solid var(--ka-orange-border);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 20px;
    font-size: 14px; font-weight: 600; color: var(--ka-text); text-transform: capitalize;
}
.ka-campo { margin-bottom: 14px; }
.ka-campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ka-muted-strong); margin-bottom: 6px; }
.ka-campo input,
.ka-campo textarea {
    width: 100%; height: 48px; padding: 0 14px;
    border: 1.5px solid var(--ka-border); border-radius: 12px;
    background: var(--ka-surface); color: var(--ka-text);
    font-size: 15px; font-family: inherit;
    transition: border-color .15s var(--ka-ease-std), box-shadow .15s var(--ka-ease-std);
}
.ka-campo textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 48px; }
.ka-campo input:focus,
.ka-campo textarea:focus {
    outline: none; border-color: var(--ka-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.14);
}
.ka-btn-primario {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 50px;
    background: var(--ka-orange); color: var(--ka-on-orange);
    border: none; border-radius: 999px;
    font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
    margin-top: 4px;
    transition: filter .15s var(--ka-ease-std), transform .15s var(--ka-ease-std), opacity .15s var(--ka-ease-std);
}
.ka-btn-primario:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.ka-btn-primario:focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 2px; }
.ka-btn-primario:disabled { opacity: .55; cursor: default; transform: none; }
.ka-mensaje { min-height: 20px; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; text-align: center; }
.ka-mensaje.ka-error { color: var(--ka-error); }
.ka-mensaje.ka-ok { color: var(--ka-success); }

/* Paso 4: éxito */
.ka-exito { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px 8px; }
.ka-exito-icono {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ka-success-soft); color: var(--ka-success);
    margin-bottom: 18px;
    animation: ka-pop .5s var(--ka-ease-decel);
}
.ka-exito h4 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.ka-exito p { margin: 0; color: var(--ka-muted); font-size: 14px; line-height: 1.6; max-width: 340px; }
@keyframes ka-pop {
    from { transform: scale(.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Estados vacíos / carga */
.ka-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; color: var(--ka-muted); font-size: 14px; }
.ka-skeleton-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ka-skeleton-chip { border-radius: 12px; background: linear-gradient(90deg, var(--ka-border) 25%, var(--ka-surface-container) 50%, var(--ka-border) 75%); background-size: 200% 100%; animation: ka-shimmer 1.4s ease-in-out infinite; }
.ka-skeleton-chip.ka-sk-dia { aspect-ratio: 1 / 1; width: auto; }
.ka-skeleton-chip.ka-sk-hora { width: 88px; height: 44px; border-radius: 999px; }
@keyframes ka-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 480px) {
    .ka-page { padding: 16px; }
    .ka-widget { padding: 20px; border-radius: 20px; }
    .ka-stepper-label { display: none; }
    .ka-chips-horas { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .ka-cal-dia { font-size: 13px; }
}