:root {
    --rojo: #b30000;
    --rojo-claro: #d62828;
    --rojo-hover: #8f0000;
    --blanco: #ffffff;
    --gris-bg: #f8f9fa;
    --texto: #1a1a1a;
    --texto-light: #555;
    --sombra: 0 10px 25px rgba(0, 0, 0, 0.08);
    --radius: 16px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(135deg, #fff5f3, #f0f0f3);
    color: var(--texto);
    padding: 24px;
    min-height: 100vh;
}

.container { max-width: 1300px; margin: 0 auto; }

/* TOPBAR */
.topbar { margin-bottom: 20px; }
.back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--blanco); color: var(--rojo);
    border: 1px solid #efcaca; border-radius: 999px;
    padding: 10px 16px; text-decoration: none; font-weight: 600;
    box-shadow: var(--sombra); transition: var(--transition);
}
.back-btn:hover {
    background: var(--rojo); color: var(--blanco);
    transform: translateY(-2px); border-color: var(--rojo);
}

/* HEADER */
.header {
    background: linear-gradient(135deg, var(--rojo), var(--rojo-claro));
    color: var(--blanco); border-radius: var(--radius);
    padding: 28px 32px; margin-bottom: 28px;
    box-shadow: var(--sombra); display: flex; align-items: center; gap: 24px;
    position: relative; overflow: hidden;
}
.header::before {
    content: ""; position: absolute; width: 240px; height: 240px;
    background: rgba(255,255,255,0.1); border-radius: 50%;
    top: -80px; right: -60px;
}
.header-logo {
    width: 140px; height: 140px; object-fit: contain;
    background: var(--blanco); padding: 0px; border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.header-content { z-index: 1; }
.header-content h1 { font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -0.5px; }
.header-content p { font-size: 15px; opacity: 0.9; margin-top: 6px; }
.campeon-box {
    margin-top: 14px; background: rgba(255,255,255,0.18);
    padding: 10px 16px; border-radius: 10px; display: inline-block;
    backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.2);
}
.campeon-box span { color: #ffe082; font-weight: 700; }

/* CONTROLS */
.controls { margin-bottom: 20px; }
.search-box {
    position: relative; max-width: 320px;
    background: var(--blanco); border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: var(--transition);
}
.search-box:focus-within { box-shadow: 0 6px 16px rgba(179, 0, 0, 0.15); transform: translateY(-1px); }
.search-box input {
    width: 100%; padding: 12px 40px 12px 14px; border: none; outline: none;
    font-size: 14px; background: transparent; font-family: inherit;
}
.search-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #999; pointer-events: none;
}

/* TABLE */
.table-card {
    background: var(--blanco); border-radius: var(--radius);
    box-shadow: var(--sombra); border: 1px solid #f1d6d6; overflow: hidden;
}
.table-wrapper { overflow-x: auto; scrollbar-width: thin; }
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

table { width: 100%; border-collapse: collapse; min-width: 750px; }
thead { background: var(--rojo); color: var(--blanco); position: sticky; top: 0; z-index: 2; }
th {
    padding: 16px 12px; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.6px; font-weight: 700; cursor: pointer; user-select: none;
    transition: var(--transition);
}
th:hover { background: var(--rojo-hover); }
th::after {
    content: "↕"; margin-left: 6px; opacity: 0.5; font-size: 10px;
}
th.sort-active::after { opacity: 1; }
th.asc::after { content: "▲"; }
th.desc::after { content: "▼"; }

td {
    padding: 14px 12px; text-align: center; border-bottom: 1px solid #f0f0f0;
    font-size: 14px; transition: var(--transition);
}
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr:hover { background: #fff2f2; transform: scale(1.002); }

/* BADGES */
.phase-badge {
    display: inline-block; padding: 4px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-final { background: #ffe6e6; color: #b30000; border: 1px solid #ffb3b3; }
.badge-3rd { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.badge-semi { background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; }
.badge-regular { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }

/* ANIMATIONS */
.fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp 0.5s forwards; }
.delay-1 { animation-delay: 0.15s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* RESPONSIVE */
@media (max-width: 900px) {
    body { padding: 16px; }
    .header { flex-direction: column; text-align: center; padding: 24px; }
    .header-logo { width: 90px; height: 90px; }
    .header-content h1 { font-size: 26px; }
    th, td { padding: 10px 8px; font-size: 13px; }
}

/* LOGO DEL CAMPEÓN */
.champion-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: var(--blanco);
    padding: 5px;
    border-radius: 10px;
    margin: 0 8px;
    vertical-align: middle;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.champion-logo:hover {
    transform: scale(1.1) rotate(-3deg);
}