/* onboarding-v2.css — estilos y animaciones del onboarding v2 (fase 4).
   Los paneles usan estilos inline; aquí viven keyframes, accesibilidad,
   focus-visible, y adaptaciones responsive para móviles. */

@keyframes glowPulse {
    0%, 100% { opacity: .22; transform: scale(1); }
    50% { opacity: .42; transform: scale(1.1); }
}

.odv-glow { animation: glowPulse 3.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .odv-wrap *,
    .odv-wrap *::before,
    .odv-wrap *::after,
    #onboarding-preview-overlay * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Indicadores de foco accesibles para navegación por teclado / lectores de pantalla */
#onboarding-preview-overlay button:focus-visible,
#onboarding-preview-overlay input:focus-visible,
#onboarding-preview-overlay select:focus-visible {
    outline: 2px solid #06b6d4 !important;
    outline-offset: 2px !important;
}

/* Guía de 2 columnas pasa a 1 columna en pantallas medianas / angostas */
@media (max-width: 860px) {
    .odv-guide-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .odv-demo-panel { border-left: none !important; border-top: 1px solid #334155; min-height: 240px; padding: 24px !important; }
}

/* Optimizaciones completas para dispositivos móviles y pantallas táctiles */
@media (max-width: 640px) {
    .odv-wrap {
        padding: 8px !important;
        min-height: 100dvh !important;
        align-items: stretch !important;
    }
    .odv-card {
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100dvh - 16px) !important;
    }
    [data-od-id="od-topbar"] {
        padding: 12px 14px !important;
    }
    [data-od-id="od-footer"] {
        padding: 12px 14px !important;
    }
    [data-od-id="od-footer"]:not(.odv-ready-footer) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px !important;
    }
    [data-od-id="od-footer"]:not(.odv-ready-footer) > div:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: center;
        min-width: 0;
    }
    [data-od-id="od-footer"]:not(.odv-ready-footer) > button[data-act="back"] {
        grid-column: 1;
        grid-row: 2;
        justify-content: center;
    }
    [data-od-id="od-footer"]:not(.odv-ready-footer) > button[data-act="next"] {
        grid-column: 2;
        grid-row: 2;
        justify-content: center;
    }
    [data-od-id="od-guide-copy"],
    [data-od-id="od-choice"],
    [data-od-id="od-setup"],
    [data-od-id="od-ready"] {
        padding: 20px 14px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    [data-od-id="od-guide-copy"] h1,
    [data-od-id="od-choice"] h1,
    [data-od-id="od-setup"] h1,
    [data-od-id="od-ready"] h1 {
        font-size: 20px !important;
    }
    .odv-input {
        font-size: 16px !important; /* Evita zoom automático en Safari / iOS */
    }
    #onboarding-preview-overlay [data-od-id="od-setup"] div[style*="grid-template-columns:minmax"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .odv-emp-form-grid {
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }
    .odv-emp-form-grid .odv-add-emp-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 380px) {
    .odv-wrap {
        padding: 4px !important;
    }
    .odv-days-grid button {
        width: 44px !important;
        min-width: 44px !important;
        height: 46px !important;
        min-height: 44px !important;
        font-size: 13px !important;
    }
}


/* El cierre forma parte del header: nunca se superpone al contador ni a "Omitir guía". */
.odv-topbar-actions { flex-wrap: wrap; }
.odv-topbar-chrome { flex: 0 0 auto; }

@media (max-width: 720px) {
    .odv-topbar { align-items: flex-start !important; }
    .odv-topbar-actions { gap: 8px !important; }
    .odv-topbar-chrome [data-od-preview-status],
    .odv-topbar-chrome > span:not([data-od-preview-status]) { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 480px) {
    .odv-topbar { gap: 8px !important; }
    .odv-topbar-actions { margin-left: auto; }
    .odv-topbar-actions > [aria-live="polite"] { display: none; }
    .odv-topbar-actions [data-act="goLast"] { padding: 0 7px !important; }
}