*{
    padding: 0;
    margin: 0;
}

body{
    background-color: var(--color-light-gray);
    font-family: 'Poppins', sans-serif;
}

:root {
    /* ---------- Marca ---------- */
    --color-primary: #4355F0;
    --color-primary-light: #6b7cf5;
    --color-secondary: #1B365D;
    --color-secondary-dark: #11233d;
    --color-accent: #43C2F0;
    --color-navbar-bg: hsla(215, 55%, 24%, 0.9);

    /* ---------- Neutros ---------- */
    --color-white: #ffffff;
    --color-light-gray: #F5F7F8;
    --color-border: #e9ecef;
    --color-text-main: #202020;
    --color-text-muted: #555555; 
    --color-text-soft: #444;   
    --color-text-light: #777;      
    --color-text-faint: #888;       
    --color-text-disabled: #aaa;    
    --color-border-soft: #ddd;       
    --color-black: #000;

    /* ---------- Estado warning (aviso borrador) ---------- */
    --color-warning-bg: #fff8e1;
    --color-warning-border: #f0c36d;
    --color-warning-accent: #e0a800;
    --color-warning-text: #7a5c00;

    /* ---------- Sombras con tinte de marca (opcional, ver más abajo) ---------- */
    --shadow-primary-soft: 0 8px 24px rgba(67, 85, 240, 0.15);
    --shadow-primary: 0 10px 30px rgba(67, 85, 240, 0.35);
    --shadow-primary-strong: 0 18px 40px rgba(67, 85, 240, 0.5);
    --shadow-secondary: 0 8px 24px rgba(27, 54, 93, 0.15);
    --shadow-accent-glow: 0 0 20px rgba(67, 194, 240, 0.35);
    --shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-darker: 0 20px 50px rgba(0, 0, 0, 0.25);

    /* ---------- Sombras ---------- */
    --color-shadow: rgba(0, 0, 0, 0.25);

    /* ---------- Acentos semánticos ---------- */
    --color-bg-stats: #6175F2;
    --color-text-green: #0a6e3f;
    --color-bg-green: #e6f4ee;

    /* ---------- Gradientes reutilizables ---------- */
    --gradient-primary: linear-gradient(94deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-bar: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-navbar: linear-gradient(90deg, #2a5cf4f0 0%, #1b375d 100%);
    --gradient-dark: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}

/* #region ---------- Navbar Section  ------------ */
.navbar {
    background-color: var(--color-navbar-bg);
    width: 100%;
    height: 4.5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-sizing: border-box;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 1px 20px 0px var(--color-accent);
    background: var(--gradient-navbar);
    backdrop-filter: blur(10px);
    /* transition: background 0.3s ease, box-shadow 0.3s ease; */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
    will-change: transform;
}

.navbar--hidden {
    transform: translateY(-100%);
}


.navbar-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.navbar-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.navbar-brand .nombre {
    color: var(--color-white);
    font-weight: 900;
    font-size: 18px;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-actions .btn {
    padding: 8px 18px;
    font-size: 0.9rem;
    min-height: 38px;
    white-space: nowrap;
}

.navbar-actions .btn-primary {
    color: var(--color-white);
    background: var(--gradient-primary);
    border: none;
    border-radius: 5px;
}

.navbar-actions .btn-secondary {
    color: var(--color-white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.navbar-actions .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 1rem;
        height: 4rem;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .navbar-icon {
        width: 50px;
        height: 50px;
    }
    .navbar-brand .nombre {
        font-size: 14px;
    }
    .navbar-actions .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        min-height: 32px;
    }

    .navbar-actions {
        gap: 1vw;
    }
}

@media (max-width: 450px) {
    .navbar {
        height: 6rem;
    }
    .navbar-brand{
        flex-direction: column;
        gap:2px;
    }
}
/* #endregion */

/* #region ---------- Copyright Section ----------------------- */
#copyright {
    background-color: var(--color-navbar-bg);
    color: var(--color-white);    
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    font-size: clamp(14px, 1.2vw, 18px);
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.copyright-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
}

.copyright-container .nombre {
    font-weight: 700;
}

@media (max-width: 992px) {
    #copyright {
        padding: 12px 0;
        font-size: 12px;
    }
}
/* #endregion */

/* #region -----------EXTRAS -----------------------------------*/
    .btn-primary {
        border-color: var(--color-white);
        color: var(--color-white);
        position: relative;
        isolation: isolate; 
        background: linear-gradient(94deg, #43C2F0 0%, #43A3F0 28%, #4355F0 100%);
        border-radius: 5px;
        overflow: hidden;
        transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
    }
        .btn-primary::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--color-primary-light);
            opacity: 0;
            transition: opacity .25s ease;
            z-index: -1;
        }

        .btn-primary:hover::after {
            opacity: 1;
        }

    .btn-secondary {
        color: var(--color-secondary); 
        background: var(--color-light-gray); 
        border: 1px solid var(--color-border); 
        border-radius: 5px;
        padding: 7px 15px;
        position: relative;
        isolation: isolate; 
        transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease;           
    }
        .btn-secondary::after {
            content: "";
            position: absolute;
            inset: 0; 
            background: var(--color-primary);                 
            opacity: 0;
            transition: opacity var(--transition-fast);
            z-index: -1;
        }
        .btn-secondary:hover {
            color: var(--color-white);
            box-shadow: 0 4px 10px var(--color-shadow);
        }
        .btn-secondary:hover::after {
            opacity: 1; 
        }
        .btn-secondary:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

    .btn-tertiary{
        border: 2px solid var(--color-secondary);
        background: var(--color-light-gray);    
        border-radius: 5px;
    }
        .btn-tertiary:hover{
            border: 2px solid var(--color-secondary);
            background: var(--color-secondary);
            color: var(--color-white);
        }

    .nombre{
        font-weight: 900;
        font-size: 15px;
    }

    .resaltado{
        color: var(--color-accent);
        text-transform: uppercase;
    }

    @media (max-width: 768px) {
        .nombre{
            font-size: 12px;
        }
        
        .resaltado{
            font-size: 35px;
            font-weight: 900;
        }
    }
/* #endregion */