/* ==========================================================================
   Miledy Motion — capa global por defecto
   --------------------------------------------------------------------------
   Vive aquí (no en app.css) porque _theme.html lo carga en base.html Y en
   los ~67 templates standalone (CRM, Postventa, Pagos…). Tokens y keyframes
   canónicos (modalOverlayIn, modalContentIn, fadeInUp, popoverIn…) están
   en _theme.html; esta hoja solo los aplica sin clases opt-in.

   Lenguaje: «light catch» profesional (opacity / transform / shadow,
   150–300ms, ease-out). Prohibido: animar width/height, scale en celdas
   de tabla, bucles decorativos (solo loaders).
   ========================================================================== */

/* --- View Transitions: cross-fade + ligero asentamiento ----------------- */
::view-transition-old(root) {
    animation: 0.18s var(--ease-out, ease-out) both miledyVtOut;
}
::view-transition-new(root) {
    animation: 0.26s var(--ease-out, ease-out) both miledyVtIn;
}
@keyframes miledyVtOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes miledyVtIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Shell: navbar entra; login también. NO #main-content (tablas 400+) -- */
.top-navbar {
    animation: fadeInDown 0.24s var(--ease-out, ease-out) both;
}
.login-box {
    animation: modalContentIn 0.32s var(--ease-out, ease-out) both;
}
.google-btn {
    transition: transform var(--transition-fast, 0.15s) var(--ease-out, ease-out),
                box-shadow var(--transition-fast, 0.15s) var(--ease-out, ease-out),
                filter var(--transition-fast, 0.15s) var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .google-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.04);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 22%, transparent);
    }
}
body:has(> .login-box) {
    background-image:
        radial-gradient(ellipse at 20% 0%,
            color-mix(in srgb, var(--accent-color) 16%, transparent),
            transparent 55%),
        radial-gradient(ellipse at 90% 100%,
            color-mix(in srgb, var(--accent-color) 10%, transparent),
            transparent 50%);
}

/* Overlay de navegación: fade al pasar a display:flex (theme.js) */
#navLoadingOverlay {
    animation: fadeIn 0.18s var(--ease-out, ease-out) both;
}

/* --- Modales canónicos (.modal-overlay.active = display none→flex) ------ */
.modal-overlay.active {
    animation: modalOverlayIn 0.22s var(--ease-out, ease-out) both;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.modal-overlay.active > .modal-box,
.modal-overlay.active > .modal-content,
.modal-overlay.active > .modal,
.modal-overlay.active > .ac-modal,
.modal-overlay.active > .g-confirm-box,
.modal-overlay.active > .po-modal-box,
.modal-overlay.active > .compose-box {
    animation: modalContentIn 0.26s var(--ease-out, ease-out) both;
}

/* Postventa navega modales con ←/→: no competir con modalNavIn */
html.modal-nav .modal-overlay.active,
html.modal-nav .modal-overlay.active > *,
html.modal-nav .miledy-motion-enter {
    animation: none !important;
}

/* Confirm / atajos: ya transicionan opacity; el box asienta */
#kbdShortcutsPanel.open .kbd-sc-card {
    animation: kbdScIn 0.22s var(--ease-out, ease-out) both;
}

/* --- Botones: light-catch + lift (no en celdas de tabla) ---------------- */
@media (hover: hover) and (pointer: fine) {
    .btn:not(:disabled):hover,
    .ac-btn:not(:disabled):hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 20%, transparent);
    }
    table .btn:hover,
    table .ac-btn:hover,
    .data-table .btn:hover {
        transform: none;
        box-shadow: none;
        filter: brightness(1.06);
    }
}

/* Light-catch: brillo que recorre el botón (background-position, sin overflow) */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning {
    background-image: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
    background-repeat: no-repeat;
    transition:
        background-color var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        background-position 0.45s var(--ease-out, ease-out),
        box-shadow var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        transform var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        filter var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        opacity var(--transition-fast, 0.15s) var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    .btn-success:hover,
    .btn-danger:hover,
    .btn-warning:hover {
        background-position: -20% 0;
    }
}

/* --- Tablas: solo tinte de fondo. NUNCA transform en tr/td -------------- */
@media (hover: hover) and (pointer: fine) {
    tbody tr {
        transition: background-color var(--transition-fast, 0.15s) var(--ease-out, ease-out);
    }
    tbody tr:hover > td {
        background-color: color-mix(in srgb, var(--accent-color) 5.5%, transparent);
    }
}

/* --- Cards / paneles ---------------------------------------------------- */
.ui-card,
.card-hover,
.kpi-card,
.stat-card,
.dash-card,
.settings-card {
    transition:
        transform var(--transition-normal, 0.25s) var(--ease-out, ease-out),
        box-shadow var(--transition-normal, 0.25s) var(--ease-out, ease-out),
        border-color var(--transition-fast, 0.15s) var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .ui-card:hover,
    .card-hover:hover,
    .kpi-card:hover,
    .stat-card:hover,
    .dash-card:hover,
    .settings-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
    }
}

/* --- Chips, badges, tabs: color, no bounce ------------------------------ */
.chip,
.badge,
.pill,
.status-chip,
.hc-type-chip,
.filter-chip,
[role="tab"] {
    transition:
        background-color var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        color var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        border-color var(--transition-fast, 0.15s) var(--ease-out, ease-out),
        box-shadow var(--transition-fast, 0.15s) var(--ease-out, ease-out);
}

/* --- Popovers / menús que aparecen (display o visibility) --------------- */
.dropdown-menu,
.popover,
.fp-dropdown,
.ob-snooze-menu {
    animation: popoverIn 0.16s var(--ease-out, ease-out) both;
}

/* --- HTMX / swaps dinámicos --------------------------------------------- */
.miledy-motion-swap {
    animation: fadeIn 0.2s var(--ease-out, ease-out) both;
}
.miledy-motion-enter {
    animation: modalOverlayIn 0.22s var(--ease-out, ease-out) both;
}
.miledy-motion-enter > .modal-box,
.miledy-motion-enter > .modal-content,
.miledy-motion-enter > .modal,
.miledy-motion-enter > .ac-modal {
    animation: modalContentIn 0.26s var(--ease-out, ease-out) both;
}

/* --- Enlaces de contenido: subrayado suave, no scale -------------------- */
@media (hover: hover) and (pointer: fine) {
    .deal-copy-name,
    .deal-copy-ref {
        transition: border-bottom-color var(--transition-fast, 0.15s),
                    color var(--transition-fast, 0.15s);
    }
}

/* --- Reduced motion: apagar esta capa (el bloque de _theme ya cubre *) -- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .top-navbar,
    .login-box,
    #navLoadingOverlay,
    .modal-overlay.active,
    .modal-overlay.active > .modal-box,
    .modal-overlay.active > .modal-content,
    .modal-overlay.active > .modal,
    .miledy-motion-enter,
    .miledy-motion-swap,
    .dropdown-menu,
    .popover {
        animation: none !important;
    }
    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-warning {
        background-image: none;
        transition: none !important;
    }
    .ui-card:hover,
    .card-hover:hover,
    .kpi-card:hover,
    .btn:hover,
    .ac-btn:hover,
    .google-btn:hover {
        transform: none !important;
    }
}