/* CONECTA360-PRO - Global Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden
}

a {
    color: var(--primary-400);
    text-decoration: none;
    transition: color var(--transition-fast)
}

a:hover {
    color: var(--primary-300)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight)
}

h1 {
    font-size: var(--text-4xl)
}

h2 {
    font-size: var(--text-3xl)
}

h3 {
    font-size: var(--text-2xl)
}

h4 {
    font-size: var(--text-xl)
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
    width: 100%;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-4);
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

ul,
ol {
    list-style: none
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit
}

button {
    cursor: pointer;
    background: none;
    border: none
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none
}

table {
    width: 100%;
    border-collapse: collapse
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full)
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-600);
    border-radius: var(--radius-full)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500)
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-600) var(--bg-tertiary)
}

::selection {
    background: var(--primary-500);
    color: white
}

.hidden {
    display: none !important
}

.block {
    display: block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-2 {
    gap: var(--space-2)
}

.gap-4 {
    gap: var(--space-4)
}

.w-full {
    width: 100%
}

.h-full {
    height: 100%
}

.text-center {
    text-align: center
}

.text-sm {
    font-size: var(--text-sm)
}

.font-medium {
    font-weight: var(--font-medium)
}

.rounded {
    border-radius: var(--radius-md)
}

.rounded-lg {
    border-radius: var(--radius-lg)
}

.rounded-xl {
    border-radius: var(--radius-xl)
}

.rounded-full {
    border-radius: var(--radius-full)
}

.shadow-lg {
    box-shadow: var(--shadow-lg)
}

.overflow-hidden {
    overflow: hidden
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.transition {
    transition: all var(--transition-base)
}

.opacity-0 {
    opacity: 0
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(100%)
    }
}

.animate-fadeIn {
    animation: fadeIn .3s ease forwards
}

.animate-slideInUp {
    animation: slideInUp .3s ease forwards
}

.animate-scaleIn {
    animation: scaleIn .3s ease forwards
}

.animate-spin {
    animation: spin 1s linear infinite
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-surface) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md)
}

.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-max);
    transition: opacity var(--transition-slow)
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.preloader-content {
    text-align: center
}

.preloader-logo {
    font-size: 4rem;
    color: var(--primary-500);
    margin-bottom: var(--space-6);
    animation: float 2s ease-in-out infinite
}

.preloader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    animation: spin 1s linear infinite
}

.preloader-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    letter-spacing: .1em;
    text-transform: uppercase
}

/* Profile Grid */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    width: 100%;
}

@media (min-width: 1024px) {
    .profile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}