/* ============================================================
   MAIN.CSS — Design tokens, reset y estilos base
   Mobile-first. Variables CSS como fuente única de verdad.
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Paleta principal — inspiración FIFA */
    --color-primary:       #003087;
    --color-primary-dark:  #001a4d;
    --color-primary-light: #1a4da8;
    --color-accent:        #f4b300;
    --color-accent-dark:   #c48f00;

    /* Fondos */
    --color-bg:            #f0f4f8;
    --color-bg-card:       #ffffff;
    --color-bg-dark:       #0a0e1a;
    --color-bg-dark-card:  #111827;

    /* Texto */
    --color-text:          #1a1a2e;
    --color-text-muted:    #6b7280;
    --color-text-inverse:  #ffffff;

    /* Bordes */
    --color-border:        #e2e8f0;
    --color-border-focus:  #003087;

    /* Estados */
    --color-success:       #059669;
    --color-success-bg:    #d1fae5;
    --color-error:         #dc2626;
    --color-error-bg:      #fee2e2;
    --color-warning:       #d97706;
    --color-warning-bg:    #fef3c7;
    --color-info:          #0284c7;
    --color-info-bg:       #e0f2fe;

    /* Tipografía */
    --font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-base);
    --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semi:   600;
    --font-bold:   700;

    /* Espaciado */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Bordes */
    --radius-sm:   0.25rem;
    --radius-base: 0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Layout */
    --max-width:       1200px;
    --nav-height:      60px;
    --sidebar-width:   260px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-base);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

img, svg {
    display: block;
    max-width: 100%;
}

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

ul, ol { list-style: none; }

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

/* ── Utilidades globales ───────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-base);
    font-weight: var(--font-semi);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.btn--primary:hover { background: var(--color-primary-light); color: var(--color-text-inverse); }

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
}
.btn--accent:hover { background: var(--color-accent-dark); }

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: var(--color-text-inverse); }

.btn--danger {
    background: var(--color-error);
    color: var(--color-text-inverse);
}
.btn--danger:hover { background: #b91c1c; color: var(--color-text-inverse); }

.btn--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}
.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}
.btn--full { width: 100%; }

/* ── Formularios ────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semi);
    color: var(--color-text);
}

.form-input {
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-bg-card);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgb(0 48 135 / 0.15);
}
.form-input--error { border-color: var(--color-error); }

.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    overflow: hidden;
}
.card__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.card__body { padding: var(--space-6); }
.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

/* ── Toast / Notificaciones ─────────────────────────────────── */
.toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(var(--space-16));
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    z-index: 9999;
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}
.toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast--success { background: var(--color-success); color: #fff; }
.toast--error   { background: var(--color-error);   color: #fff; }
.toast--info    { background: var(--color-info);    color: #fff; }

/* ── Loading overlay ────────────────────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.loading-overlay--visible {
    opacity: 1;
    pointer-events: all;
}
.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgb(255 255 255 / 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tabla responsive ───────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-semi);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--color-bg); }
.table tbody tr:last-child td { border-bottom: none; }

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semi);
    line-height: 1;
}
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge--neutral { background: var(--color-border);     color: var(--color-text-muted); }

/* ── Responsive helpers ─────────────────────────────────────── */
@media (min-width: 640px) {
    .container { padding-inline: var(--space-6); }
}
@media (min-width: 1024px) {
    .container { padding-inline: var(--space-8); }
}

/* ── Estado vacío ───────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-muted);
}
.empty-state__icon { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semi);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}