/*
 * Descripción: Reinicio de estilos CSS para consistencia entre navegadores.
 */

/* ==========================================================================
   RESET — Global reset, base element styles, keyframes, animation utilities
   Layer 2 of 7 — ITCSS Base
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Background Mesh Effect */
    background-image:
        radial-gradient(at 0% 0%, rgba(var(--primary-rgb), 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(var(--primary-rgb), 0.02) 0px, transparent 50%);
}

code, pre {
    font-family: var(--font-code);
}

/* Form elements inherit app font */
input, button, select, textarea { font-family: inherit; }

/* Button reset */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes appleSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   ANIMATION UTILITIES
   ========================================================================== */

.animate-slide-up {
    animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in {
    animation: appleFadeIn 0.5s ease both;
}

/* Staggered children animations */
.stagger-container > * { opacity: 0; }
.stagger-container > *:nth-child(1) { animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.stagger-container > *:nth-child(2) { animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.stagger-container > *:nth-child(3) { animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.stagger-container > *:nth-child(4) { animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.stagger-container > *:nth-child(5) { animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

/* Touch / Click helpers */
.active-scale {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.active-scale:active {
    transform: scale(0.96) !important;
}

.btn-icon-hover {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.btn-icon-hover:hover {
    opacity: 1;
}