/* global.css - Variables globales y reset */
:root {
    /* Pastel Blue Color Palette */
    --pastel-blue-50: #f0f9ff;
    --pastel-blue-100: #e0f2fe;
    --pastel-blue-200: #bae6fd;
    --pastel-blue-300: #7dd3fc;
    --pastel-blue-400: #38bdf8;
    --pastel-blue-500: #0ea5e9;
    --pastel-blue-600: #0284c7;
    --pastel-blue-700: #0369a1;
    --pastel-blue-800: #075985;
    --pastel-blue-900: #0c4a6e;

    /* Semantic Colors */
    --color-background: var(--pastel-blue-50);
    --color-foreground: var(--pastel-blue-800);
    --color-primary: var(--pastel-blue-500);
    --color-primary-hover: var(--pastel-blue-600);
    --color-primary-text: white;
    --color-card-bg: white;
    --color-border: var(--pastel-blue-200);
    --color-text-main: var(--pastel-blue-800);
    --color-text-muted: var(--pastel-blue-600);
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Sizing & Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    --container-max-width: 1200px;
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-main);
    line-height: 1.6;
}

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

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

a:hover {
    text-decoration: underline;
}

/* Container */
.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Typography */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

/* Spacing utilities */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Icons */
i[data-lucide] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 2;
}

.icon-xs { font-size: 0.875rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }

/* Visibility utilities */
.hidden { display: none !important; }
.visible { display: block !important; }

/* Responsive utilities */
@media (max-width: 640px) {
    .sm-hidden { display: none !important; }
}

@media (max-width: 768px) {
    .md-hidden { display: none !important; }
}

@media (max-width: 1024px) {
    .lg-hidden { display: none !important; }
}