/* ===========================================================
   Quiniela Mundial 2026 — TSI Logistics
   Tema dark/light sobre MaterializeCSS via variables CSS
   =========================================================== */

:root {
    /* Paleta TSI */
    --tsi-blue:       #1976d2;
    --tsi-blue-dark:  #0d47a1;
    --tsi-cyan:       #00bcd4;
    --tsi-cyan-dark:  #00838f;

    --brand-primary:      var(--tsi-blue);
    --brand-primary-dark: var(--tsi-blue-dark);
    --brand-accent:       var(--tsi-cyan);
    --brand-gradient:     linear-gradient(135deg, var(--tsi-blue), var(--tsi-cyan));
    --brand-gradient-hover: linear-gradient(135deg, var(--tsi-blue-dark), var(--tsi-cyan-dark));
}

/* ============ TEMA OSCURO (default) ============ */
[data-theme="dark"] {
    --bg-app: #0a0e14;
    --bg-surface: #141a23;
    --bg-elevated: #1d2533;
    --bg-hover: #232c3d;
    --text-primary: #e8eaed;
    --text-secondary: #98a2b3;
    --text-muted: #667085;
    --border-color: #232c3d;
    --border-strong: #2d3a4f;
    --nav-bg: #0e131b;
    --footer-bg: #07090d;
    --input-bg: #1d2533;
    --shadow-card: 0 4px 16px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
    --shadow-card-hover: 0 12px 32px rgba(25,118,210,.18), 0 2px 6px rgba(0,0,0,.3);
    --shadow-button: 0 6px 18px rgba(25,118,210,.35);
    --glass-bg: rgba(20,26,35,.7);
    --flash-success-bg: #122d22;
    --flash-success-border: #2e7d32;
    --flash-error-bg: #2d1414;
    --flash-error-border: #c62828;
    --flash-warning-bg: #2d2614;
    --flash-warning-border: #f57c00;
    --flash-info-bg: #142235;
    --flash-info-border: #1976d2;
}

/* ============ TEMA CLARO ============ */
[data-theme="light"] {
    --bg-app: #f4f6f8;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --text-primary: #1a2028;
    --text-secondary: #4a5560;
    --text-muted: #8a949f;
    --border-color: #e0e4e8;
    --nav-bg: #1a2028;
    --footer-bg: #1a2028;
    --input-bg: #ffffff;
    --flash-success-bg: #e8f5e9;
    --flash-success-border: #2e7d32;
    --flash-error-bg: #ffebee;
    --flash-error-border: #c62828;
    --flash-warning-bg: #fff3e0;
    --flash-warning-border: #f57c00;
    --flash-info-bg: #e3f2fd;
    --flash-info-border: #1976d2;
}

/* ============ BASE ============ */
html, body {
    background:
        radial-gradient(circle at 0% 0%, rgba(25,118,210,.06) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0,188,212,.04) 0%, transparent 50%),
        var(--bg-app);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { transition: background-color .25s ease, color .25s ease; }
main { flex: 1 0 auto; padding-top: 16px; }
.app-main {
    max-width: 1280px !important;
    width: 92% !important;
    margin: 24px auto !important;
    padding-bottom: 40px;
}
@media (max-width: 768px) {
    .app-main { width: 96% !important; margin-top: 12px !important; }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -.3px;
}
h4 { font-size: 1.7rem; }
h5 { font-size: 1.25rem; }
p { color: var(--text-secondary); line-height: 1.6; }

/* Scrollbar custom */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
    border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--tsi-blue); }

.brand-text { color: var(--brand-primary) !important; }
.brand-bg {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 6px rgba(25, 118, 210, .25);
}
.brand-bg:hover {
    background: var(--brand-gradient-hover) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, .4);
}

/* ============ FIX MATERIALIZE NAV ICONS ============ */
/* Materialize por defecto pone los íconos del nav como block con height/line-height 56px
   y font-size 2rem — eso los empuja arriba del texto. Lo anulamos. */
nav i,
nav i.material-icons,
nav a i.material-icons,
nav ul li a i.material-icons {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    line-height: 1 !important;
    font-size: 22px !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* ============ NAV — rebuild final, no overflow ============ */
nav {
    background: linear-gradient(180deg, var(--nav-bg), color-mix(in srgb, var(--nav-bg) 92%, #000)) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.04);
    height: 64px !important;
    line-height: 1 !important;
    width: 100%;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 100;
}
nav .nav-wrapper {
    display: flex !important;
    align-items: center;
    height: 64px;
    padding: 0 16px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
nav .brand-logo {
    position: static !important;
    transform: none !important;
    left: auto !important;
    color: var(--brand-primary) !important;
    font-weight: 700;
    font-size: 1.2rem;
    height: 64px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    min-width: 0;
}
nav .brand-logo i.material-icons {
    float: none !important;
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    height: auto !important;
    color: var(--brand-primary);
    display: inline-flex !important;
    align-items: center;
}
/* Logo de la empresa */
nav .navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    border-radius: 4px;
}
@media (max-width: 600px) {
    nav .navbar-logo { height: 32px; }
}
nav ul.right {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    height: 64px;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
nav ul.right li {
    display: flex !important;
    align-items: center;
    height: 64px;
    float: none !important;
    list-style: none;
    flex-shrink: 0;
}
nav ul.right li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255,255,255,.92) !important;
    padding: 0 12px !important;
    height: 40px !important;
    line-height: 1 !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: .92rem;
    transition: background-color .18s ease, color .18s ease, transform .15s ease;
    white-space: nowrap;
}
nav ul.right li > a:hover {
    color: #fff !important;
    transform: translateY(-1px);
}
nav ul.right li > a:hover {
    background-color: rgba(255,255,255,.08);
}
nav ul.right li > a .material-icons {
    float: none !important;
    margin: 0 !important;
    font-size: 22px;
    line-height: 1 !important;
    vertical-align: middle;
}

/* Títulos con ícono alineado correctamente */
h1, h2, h3, h4, h5, h6 {
    display: flex;
    align-items: center;
    gap: 10px;
}
h1 .material-icons, h2 .material-icons, h3 .material-icons,
h4 .material-icons, h5 .material-icons, h6 .material-icons {
    float: none !important;
    margin: 0 !important;
    line-height: 1;
    vertical-align: middle;
}

/* Botones con ícono: forzar centrado vertical */
.btn, .btn-large, .btn-small {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn .material-icons, .btn-large .material-icons, .btn-small .material-icons {
    float: none !important;
    margin: 0 !important;
    line-height: 1;
    font-size: 18px;
}
.btn-large .material-icons { font-size: 22px; }

/* Tarjetas: títulos con ícono */
.card-title .material-icons {
    float: none !important;
    margin-right: 8px !important;
    vertical-align: middle;
}

/* Chips con ícono interno */
.chip .material-icons {
    float: none !important;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1;
}
/* Íconos solos (toggle tema, logout) — cuadrados */
nav ul.right li > a.icon-only {
    width: 40px !important;
    padding: 0 !important;
}

/* Hamburguesa SIEMPRE visible (anula Materialize hide-on-large-only) */
nav .sidenav-trigger.nav-hamb {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 8px;
    border-radius: 10px;
    color: #fff !important;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s ease, transform .15s ease, border-color .2s ease;
    float: none !important;
    flex-shrink: 0;
}
nav .sidenav-trigger.nav-hamb:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(25,118,210,.4);
}
nav .sidenav-trigger.nav-hamb i.material-icons {
    font-size: 24px !important;
    color: #fff !important;
}

/* Quick actions arriba: admin + perfil + tema + logout */
nav ul.right.nav-quick li > a span { display: none; }
nav ul.right.nav-quick li > a.admin-link span {
    display: inline;
    font-size: .82rem;
    margin-left: 4px;
}
nav ul.right.nav-quick li > a:not(.admin-link) {
    width: 40px;
    padding: 0 !important;
}

/* Responsive mínimo */
@media (max-width: 600px) {
    nav .brand-logo span.brand-text-label { display: none; }
    nav ul.right.nav-quick li > a.admin-link span { display: none; }
    nav ul.right.nav-quick li > a.admin-link { width: 40px; padding: 0 !important; }
}
@media (max-width: 480px) {
    nav .nav-wrapper { padding: 0 8px; gap: 4px; }
    nav .navbar-logo { height: 30px; }
}

/* Sidenav rediseñado (theme-aware) */
.sidenav {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%) !important;
    width: 290px;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
    border-right: 1px solid var(--border-color);
}
[data-theme="dark"] .sidenav {
    background: linear-gradient(180deg, #0e131b 0%, #141a23 100%) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
}
.sidenav .user-view {
    background: var(--brand-gradient);
    padding: 24px 20px 20px !important;
    position: relative;
    overflow: hidden;
}
.sidenav .user-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.15), transparent 50%);
    pointer-events: none;
}
.sidenav .user-view .name {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #fff !important;
    margin-top: 6px;
    display: block;
}
.sidenav .user-view .email {
    color: rgba(255,255,255,.85) !important;
    font-size: .82rem !important;
    display: block;
}
.sidenav li > a {
    color: var(--text-primary) !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    margin: 2px 8px;
    border-radius: 10px;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    transition: background .15s ease, transform .12s ease, color .15s ease;
}
.sidenav li > a:hover {
    background: rgba(25,118,210,.15) !important;
    color: var(--tsi-cyan) !important;
    transform: translateX(3px);
}
.sidenav li > a i.material-icons {
    color: var(--brand-primary) !important;
    font-size: 22px !important;
    margin: 0 !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
}
.sidenav li > a:hover i.material-icons {
    color: var(--tsi-cyan) !important;
}
.sidenav .divider {
    background: var(--border-color);
    margin: 8px 16px;
}
.sidenav-overlay { background: rgba(0,0,0,.6) !important; }

/* Botón Admin destacado (gradiente) */
nav ul.right li > a.admin-link {
    background: var(--brand-gradient);
    color: #fff !important;
    height: 40px !important;
    padding: 0 16px !important;
    margin: 0 4px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(25, 118, 210, .4);
    font-weight: 600;
}
nav ul.right li > a.admin-link:hover {
    background: var(--brand-gradient-hover);
    box-shadow: 0 6px 18px rgba(25, 118, 210, .55);
    transform: translateY(-1px);
}

/* Brand logo en pantallas chicas */
@media (max-width: 1200px) {
    nav .brand-logo { font-size: 1.1rem; }
}

/* ============ CARDS ============ */
.card {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
}
.card .card-content {
    padding: 22px 24px;
}
.card-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card.hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25,118,210,.25);
}
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-gradient);
    opacity: .8;
    transition: opacity .3s ease, height .25s ease;
}
.stat-card:hover::before {
    height: 5px;
    opacity: 1;
}
.stat-card h2, .stat-card h3 {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    margin: 10px 0 6px;
    letter-spacing: -1px;
}
.stat-card h2 { font-size: 2.6rem; }
.stat-card h3 { font-size: 2rem; }
.stat-card .card-content { padding: 24px; text-align: center; }
.stat-card .grey-text {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.card .card-content { color: var(--text-primary); }
.card .card-title { color: var(--text-primary) !important; font-weight: 500; }
.card .card-action {
    background-color: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
}
.card p { color: var(--text-secondary); }

.stat-card h3 { font-weight: 300; margin: 8px 0; }
.admin-card.disabled { opacity: .7; }

.login-card { margin-top: 0; }

/* ============ FORMS ============ */
.input-field input, .input-field textarea {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.input-field input:focus, .input-field textarea:focus {
    border-bottom-color: var(--brand-primary) !important;
    box-shadow: 0 1px 0 0 var(--brand-primary) !important;
}
.input-field label { color: var(--text-secondary) !important; }
.input-field input:focus + label,
.input-field input.valid + label,
.input-field label.active { color: var(--brand-primary) !important; }
.input-field .prefix.active { color: var(--brand-primary) !important; }
.input-field .prefix { color: var(--text-secondary); }

select, .select-wrapper input.select-dropdown {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.select-wrapper input.select-dropdown {
    background-color: transparent !important;
}
.select-wrapper .caret { fill: var(--text-secondary); color: var(--text-secondary) !important; }

/* Dropdown de opciones de Materialize (Fase, Estado, etc.) */
.dropdown-content,
.dropdown-content.select-dropdown {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
    border-radius: 6px;
    overflow: hidden;
}
.dropdown-content li > a,
.dropdown-content li > span,
.dropdown-content.select-dropdown li > span {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    padding: 10px 16px !important;
}
.dropdown-content li:hover,
.dropdown-content li.selected,
.dropdown-content li.active,
.dropdown-content.select-dropdown li:hover {
    background: var(--brand-gradient) !important;
}
.dropdown-content li:hover > span,
.dropdown-content li.selected > span,
.dropdown-content li.active > span,
.dropdown-content.select-dropdown li:hover > span {
    color: #fff !important;
}
.dropdown-content li.disabled > span,
.dropdown-content li.disabled:hover > span {
    color: var(--text-muted) !important;
    background-color: transparent !important;
}
.dropdown-content li.disabled:hover { background: transparent !important; }

/* ============ BUTTONS ============ */
.btn, .btn-large, .btn-small {
    background: var(--brand-gradient);
    color: #fff;
    text-transform: none;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover, .btn-large:hover, .btn-small:hover {
    background: var(--brand-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(25,118,210,.35);
}
.btn:active, .btn-small:active { transform: translateY(0); }
/* Botones de color explícito conservan su color */
.btn.red, .btn-small.red, .btn-large.red { background: #e53935 !important; }
.btn.red:hover, .btn-small.red:hover { background: #c62828 !important; }
.btn.green, .btn-small.green, .btn-large.green { background: #43a047 !important; }
.btn.green:hover, .btn-small.green:hover { background: #2e7d32 !important; }
.btn.blue, .btn-small.blue, .btn-large.blue { background: #1e88e5 !important; }
.btn.blue:hover, .btn-small.blue:hover { background: #1565c0 !important; }
.btn-flat {
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none;
}
.full-width { width: 100%; }

/* ============ FLASH MESSAGES ============ */
.flash {
    border-left: 4px solid;
    border-radius: 12px;
    padding: 14px 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    animation: flash-in .3s ease;
}
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash i { vertical-align: middle; margin-right: 8px; }
.flash-success { background-color: var(--flash-success-bg) !important; border-left-color: var(--flash-success-border); color: var(--text-primary) !important; }
.flash-error   { background-color: var(--flash-error-bg) !important;   border-left-color: var(--flash-error-border);   color: var(--text-primary) !important; }
.flash-warning { background-color: var(--flash-warning-bg) !important; border-left-color: var(--flash-warning-border); color: var(--text-primary) !important; }
.flash-info    { background-color: var(--flash-info-bg) !important;    border-left-color: var(--flash-info-border);    color: var(--text-primary) !important; }

/* ============ TABLAS ============ */
table {
    background-color: transparent !important;
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
}
table.striped > tbody > tr:nth-child(odd) { background-color: rgba(255,255,255,.02); }
table.striped > tbody > tr {
    transition: background-color .15s ease;
}
table.striped > tbody > tr:hover { background-color: var(--bg-hover) !important; }
th {
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-transform: uppercase;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    padding: 14px 12px !important;
}
td {
    border-color: var(--border-color) !important;
    padding: 14px 12px !important;
}

/* ============ SIDENAV ============ */
.sidenav { background-color: var(--bg-surface); }
.sidenav li > a { color: var(--text-primary) !important; }
.sidenav li > a i { color: var(--text-secondary) !important; }

/* ============ FOOTER ============ */
.page-footer {
    background: linear-gradient(180deg, transparent, var(--footer-bg));
    padding: 20px 16px !important;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}
.page-footer span { font-size: .85rem; letter-spacing: .3px; }

/* ============ CHIPS DE ESTADO ============ */
.chip {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px !important;
    font-size: .78rem !important;
    font-weight: 600;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
}
.estado-prog    { background-color: #1b3a2e !important; color: #66bb6a !important; border-color: #2e7d32; }
.estado-curso   { background-color: #3a2f1b !important; color: #ffb74d !important; border-color: #f57c00; }
.estado-fin     { background-color: #1a1f28 !important; color: #9aa3ad !important; border-color: #455a64; }
.estado-cancel  { background-color: #3a1b1b !important; color: #ef5350 !important; border-color: #c62828; }

[data-theme="light"] .estado-prog    { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
[data-theme="light"] .estado-curso   { background-color: #fff3e0 !important; color: #e65100 !important; }
[data-theme="light"] .estado-fin     { background-color: #eceff1 !important; color: #455a64 !important; }
[data-theme="light"] .estado-cancel  { background-color: #ffebee !important; color: #c62828 !important; }

/* ============ PARTIDO CARD ============ */

.score-input input[type="number"] {
    text-align: center;
    font-size: 1.8em !important;
    font-weight: 500;
    height: 60px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    background: var(--bg-elevated);
    padding: 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
.score-input input[type="number"]:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ============ RANKING — fila propia ============ */
.my-row {
    background: linear-gradient(90deg, rgba(25,118,210,.18), rgba(0,188,212,.10)) !important;
    border-left: 3px solid var(--tsi-cyan);
    font-weight: 500;
}

/* Card de partido con borde gradiente */
.partido-card { border-left: 4px solid var(--tsi-blue) !important; }
.partido-card.cerrado { border-left-color: var(--text-muted) !important; opacity: .85; }

/* ============ AVATARES ============ */
.avatar-circle {
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.user-row { display: flex; align-items: center; gap: 12px; }
.user-row .user-info { display: flex; flex-direction: column; }
.user-row .user-info small { color: var(--text-muted); font-size: .85em; }

/* ============ TABS ADMIN ============ */
.tabs-admin {
    background-color: var(--bg-surface) !important;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    overflow: hidden;
}
.tabs-admin .tab a {
    color: var(--text-secondary) !important;
    font-weight: 500;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
}
.tabs-admin .tab a .material-icons {
    float: none !important;
    margin: 0 !important;
    line-height: 1;
    font-size: 22px;
    vertical-align: middle;
}
.tabs-admin .tab a.active,
.tabs-admin .tab a:hover {
    color: var(--brand-primary) !important;
    background-color: var(--bg-elevated);
}
.tabs-admin .indicator {
    background: var(--brand-gradient) !important;
    height: 3px;
}

/* ============ BARRA DE PROGRESO ============ */
.progress-pred {
    height: 6px;
    background-color: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.progress-pred .determinate {
    background: var(--brand-gradient);
    height: 100%;
    transition: width .4s ease;
}

/* Chips de rol */
.rol-admin    { background: var(--brand-gradient) !important; color: #fff !important; font-weight: 600; }
.rol-empleado { background-color: var(--bg-elevated) !important; color: var(--text-secondary) !important; }

/* Tarjeta de criterios de desempate */
.criterios-card {
    background-color: rgba(33, 150, 243, .08) !important;
    border-left: 4px solid var(--brand-accent);
    padding: 12px 16px !important;
    margin: 16px 0;
    border-radius: 4px;
}
.criterios-card strong { color: var(--brand-accent); }

/* ============ TOM SELECT (selects con buscador) ============ */
.ts-label {
    display: block;
    color: var(--text-secondary);
    font-size: .9em;
    margin-bottom: 6px;
    margin-top: 8px;
}

.ts-wrapper { margin-bottom: 16px; }

.ts-control {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    min-height: 46px;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--tsi-blue) !important;
    box-shadow: 0 0 0 3px rgba(25,118,210,.15) !important;
}
.ts-control input,
.ts-control .item {
    color: var(--text-primary) !important;
}
.ts-control input::placeholder { color: var(--text-muted) !important; }

.ts-dropdown {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
    margin-top: 4px !important;
}
.ts-dropdown .option {
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-color);
}
.ts-dropdown .option:last-child { border-bottom: none; }
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background: var(--brand-gradient) !important;
    color: #fff !important;
}
.ts-dropdown .no-results {
    color: var(--text-muted) !important;
    padding: 14px;
    font-style: italic;
}

/* ============ TRIVIA ============ */
.trivia-status-card {
    border-left: 4px solid var(--text-muted);
    margin-bottom: 24px;
}
.trivia-status-card.open    { border-left-color: #43a047; }
.trivia-status-card.closed  { border-left-color: #ff9800; }
.trivia-status-card.success { border-left-color: var(--tsi-cyan); }

.trivia-status-card h5 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============ TIMER ============ */
.trivia-player {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
}

/* Header del jugador */
.trivia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.trivia-header h4 { margin: 0; }
.contador-badge {
    background: var(--bg-elevated);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Timer circular */
.timer-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 16px auto 24px;
}
.timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 4px 12px rgba(25, 118, 210, .35));
}
.timer-bg {
    fill: none;
    stroke: var(--bg-elevated);
    stroke-width: 7;
}
.timer-fg {
    fill: none;
    stroke: var(--tsi-cyan);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.timer-fg.peligro {
    stroke: #ff5252;
    animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,82,82,0)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,82,82,.8)); }
}
.timer-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    line-height: 1;
}
.timer-num .num {
    font-size: 3em;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: color .2s ease;
}
.timer-num .label {
    font-size: .7em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.timer-num.peligro .num {
    background: none;
    -webkit-text-fill-color: #ff5252;
    color: #ff5252;
    animation: timer-num-shake .4s ease infinite;
}
@keyframes timer-num-shake {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-2px); }
    75%      { transform: translateY(2px); }
}

/* Barra horizontal de progreso (refuerzo visual + mobile) */
.timer-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}
.timer-bar-fill {
    height: 100%;
    background: var(--brand-gradient);
    transition: width 1s linear, background .3s ease;
    border-radius: 3px;
}
.timer-bar-fill.peligro {
    background: #ff5252;
}

/* RESPONSIVE: ajustes para tablet/móvil */
@media (max-width: 768px) {
    .timer-wrap { width: 120px; height: 120px; margin: 12px auto 18px; }
    .timer-num .num { font-size: 2.5em; }
}
@media (max-width: 480px) {
    .trivia-player { padding: 12px; }
    .timer-wrap { width: 100px; height: 100px; }
    .timer-num .num { font-size: 2em; }
    .timer-num .label { font-size: .6em; }
    .contador-badge { padding: 6px 12px; font-size: .9em; }
}

/* Pregunta y opciones */
.pregunta-card h5 {
    line-height: 1.4;
    margin-bottom: 24px;
    color: var(--text-primary);
}
.opciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .opciones-grid { grid-template-columns: 1fr; }
}
.opcion-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 16px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
    font-size: 1em;
}
.opcion-btn:hover:not(:disabled) {
    border-color: var(--tsi-blue);
    background: rgba(25,118,210,.12);
    transform: translateY(-2px);
}
.opcion-btn:disabled { cursor: default; }
.opcion-btn .letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-app);
    font-weight: 600;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.opcion-btn.correcta {
    background: rgba(67,160,71,.18);
    border-color: #43a047;
}
.opcion-btn.correcta .letra { background: #43a047; color: #fff; }
.opcion-btn.incorrecta {
    background: rgba(229,57,53,.18);
    border-color: #e53935;
}
.opcion-btn.incorrecta .letra { background: #e53935; color: #fff; }

/* Resultado */
.trivia-resultado { max-width: 820px; margin: 40px auto; padding: 0 16px; }
.resultado-emoji { font-size: 5em; line-height: 1; margin-bottom: 8px; }
.resultado-card { background: var(--brand-gradient) !important; color: #fff !important; border: none !important; }
.resultado-card .card-content { padding: 28px !important; }
.resultado-card h2 { font-size: 3.5em; margin: 0; font-weight: 600; color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; }
.resultado-card .grey-text { color: rgba(255,255,255,.85) !important; }

.posicion-card .card-content { padding: 20px; }
.posicion-card h3 {
    margin: 8px 0 4px;
    font-size: 2.2em;
    font-weight: 600;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ GRUPOS DEL MUNDIAL ============ */
.grupos-grid .grupo-card {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    transition: transform .2s ease, border-color .2s ease;
}
.grupos-grid .grupo-card:hover {
    transform: translateY(-2px);
    border-color: var(--tsi-blue);
}
.grupos-grid .card-content { padding: 14px 18px; }

.grupo-header {
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}
.grupo-letra {
    font-size: 1.15em;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grupo-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: .95em;
    transition: background .15s ease;
}
.grupo-fila:hover { background: var(--bg-elevated); border-radius: 6px; }
.grupo-fila:last-child { border-bottom: none; }

.grupo-pos {
    color: var(--text-muted);
    font-size: .85em;
    width: 18px;
    text-align: center;
    font-weight: 500;
}
.grupo-bandera { font-size: 1.4em; line-height: 1; flex-shrink: 0; }
.grupo-nombre {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grupo-codigo {
    color: var(--text-muted);
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .5px;
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: 4px;
}

[data-theme="light"] .grupo-fila { border-bottom: 1px solid rgba(0,0,0,.05); }

/* ============================================================
   🚀 LOGIN — Rediseño con animaciones
   ============================================================ */
.login-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top left,  rgba(25,118,210,.22), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0,188,212,.18), transparent 50%),
        linear-gradient(135deg, #0a0d11 0%, #0f1419 50%, #131b24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 0;
}

/* Orbes pulsantes de fondo */
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
    animation: orb-float 14s ease-in-out infinite;
}
.orb-1 {
    width: 420px; height: 420px;
    background: #1976d2;
    top: -120px; left: -120px;
    animation-delay: 0s;
}
.orb-2 {
    width: 380px; height: 380px;
    background: #00bcd4;
    bottom: -100px; right: -80px;
    animation-delay: -5s;
}
.orb-3 {
    width: 280px; height: 280px;
    background: #1ba1c0;
    top: 40%; left: 60%;
    animation-delay: -9s;
    opacity: .25;
}
@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 40px) scale(.95); }
}

/* Pelotas flotantes en background */
.floating-balls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.fb {
    position: absolute;
    opacity: .15;
    animation: fb-rise linear infinite;
    font-size: 36px;
    user-select: none;
}
.fb-1 { left: 10%;  bottom: -80px; animation-duration: 22s; animation-delay: 0s;  font-size: 30px; }
.fb-2 { left: 30%;  bottom: -80px; animation-duration: 28s; animation-delay: -8s; font-size: 44px; }
.fb-3 { left: 60%;  bottom: -80px; animation-duration: 24s; animation-delay: -15s; font-size: 38px; }
.fb-4 { left: 80%;  bottom: -80px; animation-duration: 26s; animation-delay: -4s; font-size: 32px; }
.fb-5 { left: 45%;  bottom: -80px; animation-duration: 30s; animation-delay: -20s; font-size: 28px; }

@keyframes fb-rise {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
    10%  { opacity: .18; }
    90%  { opacity: .18; }
    100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

/* Split layout */
.login-split {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: rgba(26, 32, 40, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 60px rgba(25,118,210,.15);
    animation: card-rise .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes card-rise {
    from { opacity: 0; transform: translateY(30px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-split.single {
    grid-template-columns: 1fr;
    max-width: 460px;
}

/* ===== Lado izquierdo: branding ===== */
.login-brand {
    background: linear-gradient(135deg, #1976d2 0%, #1ba1c0 50%, #00bcd4 100%);
    padding: 48px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.15), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.1),  transparent 40%);
    pointer-events: none;
}
.login-brand-content { position: relative; z-index: 2; }

.brand-ball {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
    display: inline-block;
    animation: ball-spin 6s ease-in-out infinite, ball-bounce 2.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.4));
}
@keyframes ball-spin {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(360deg); }
}
@keyframes ball-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.brand-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -.5px;
    text-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.brand-title span {
    background: linear-gradient(90deg, #fff, #b3e5fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.brand-subtitle {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    margin: 0 0 36px;
    letter-spacing: .5px;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,.1);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .25s ease, background .25s ease;
    animation: feature-slide .6s ease both;
}
.feature-item:nth-child(1) { animation-delay: .3s; }
.feature-item:nth-child(2) { animation-delay: .45s; }
.feature-item:nth-child(3) { animation-delay: .6s; }
.feature-item:hover {
    transform: translateX(4px);
    background: rgba(255,255,255,.18);
}
@keyframes feature-slide {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.feature-icon { font-size: 24px; flex-shrink: 0; }
.feature-item strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}
.feature-item small {
    display: block;
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    margin-top: 2px;
}

/* ===== Lado derecho: form ===== */
.login-form-wrap {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.login-card-new {
    width: 100%;
    animation: form-slide .6s ease both;
    animation-delay: .2s;
}
@keyframes form-slide {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login-card-header {
    margin-bottom: 32px;
}
.login-card-header h3 {
    font-size: 1.75rem;
    margin: 0 0 4px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #b3e5fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.login-card-header p {
    color: rgba(255,255,255,.7);
    margin: 0;
    font-size: .92rem;
}

/* Inputs nuevos */
.login-form-new { display: flex; flex-direction: column; gap: 20px; }
.form-field-new {
    position: relative;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 14px 16px 14px 48px;
    transition: all .25s ease;
}
.form-field-new:focus-within {
    background: rgba(25,118,210,.1);
    border-color: var(--tsi-cyan);
    box-shadow: 0 0 0 4px rgba(0,188,212,.18);
}
.form-field-new > i.material-icons {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: rgba(255,255,255,.5);
    transition: color .25s ease;
}
.form-field-new:focus-within > i.material-icons { color: var(--tsi-cyan); }
.form-field-new input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: .95rem !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none;
    height: 24px !important;
}
.form-field-new input::placeholder { color: transparent; }
.form-field-new label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.55) !important;
    pointer-events: none;
    transition: all .2s ease;
    font-size: .95rem;
    background: transparent;
    padding: 0 6px;
}
.form-field-new input:focus + label,
.form-field-new input:not(:placeholder-shown) + label {
    top: 0;
    left: 40px;
    font-size: .72rem;
    color: var(--tsi-cyan) !important;
    background: rgba(26, 32, 40, .85);
    transform: translateY(-50%);
}
.toggle-pwd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    padding: 4px;
    transition: color .2s ease;
    /* Matar caja teal del tap en móvil (tap-highlight + focus/active del browser) */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.toggle-pwd:hover { color: var(--tsi-cyan); }
.toggle-pwd:focus,
.toggle-pwd:active,
.toggle-pwd:focus-visible { background: transparent; outline: none; box-shadow: none; }
.toggle-pwd i { font-size: 20px; }

/* Botón ingresar */
.login-btn {
    margin-top: 8px;
    background: linear-gradient(135deg, #1976d2, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
    box-shadow: 0 4px 16px rgba(25,118,210,.4);
    position: relative;
    overflow: hidden;
}
.login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,188,212,.5);
}
.login-btn:hover::before { transform: translateX(100%); }
.login-btn:active { transform: translateY(0); }
.login-btn i { font-size: 20px; transition: transform .2s ease; }
.login-btn:hover i { transform: translateX(4px); }

.login-extras {
    margin-top: 24px;
    text-align: center;
}
.login-extras a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s ease;
}
.login-extras a:hover { color: var(--tsi-cyan); }
.login-extras .material-icons { font-size: 16px !important; }

.login-footer-info {
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    margin: 28px 0 0;
    letter-spacing: .5px;
}

/* En modo claro (raro en login, pero por las dudas) */
[data-theme="light"] .login-stage {
    background:
        radial-gradient(ellipse at top left, rgba(25,118,210,.15), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0,188,212,.12), transparent 50%),
        linear-gradient(135deg, #f4f6f8 0%, #e3f2fd 100%);
}
[data-theme="light"] .login-split {
    background: rgba(255,255,255,.85);
    border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .form-field-new {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .form-field-new input { color: #1a2028 !important; }
[data-theme="light"] .form-field-new label { color: rgba(0,0,0,.55) !important; }
[data-theme="light"] .form-field-new input:focus + label,
[data-theme="light"] .form-field-new input:not(:placeholder-shown) + label {
    background: rgba(255,255,255,.95);
    color: #1976d2 !important;
}
[data-theme="light"] .login-card-header h3 {
    background: linear-gradient(135deg, #1976d2, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .login-card-header p { color: rgba(0,0,0,.6); }

/* Responsive: en mobile, solo el form (oculta el branding) */
@media (max-width: 860px) {
    .login-split { grid-template-columns: 1fr; max-width: 460px; }
    .login-brand { display: none; }
    .login-form-wrap { padding: 40px 28px; }
}
@media (max-width: 480px) {
    .login-stage { padding: 12px; }
    .login-form-wrap { padding: 32px 22px; }
    .login-card-header h3 { font-size: 1.4rem; }
}

/* En el login, ocultamos el navbar y el footer del base */
body:has(.login-stage) nav,
body:has(.login-stage) .page-footer { display: none !important; }
body:has(.login-stage) main.container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   📱 FEED ESTILO FACEBOOK
   ============================================================ */
.feed-container { max-width: 680px; margin: 0 auto; padding: 0 8px; }
.feed-header { margin: 12px 0 18px; }

.fb-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ===== Crear publicación ===== */
.crear-publicacion { padding: 14px 16px; }
.crear-header { display: flex; gap: 12px; align-items: flex-start; }
.crear-header textarea {
    flex: 1;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    color: var(--text-primary) !important;
    resize: vertical;
    box-shadow: none !important;
    margin: 0 !important;
    font-size: .95rem;
    min-height: 60px;
}
.crear-header textarea:focus {
    border-color: var(--tsi-blue) !important;
    box-shadow: 0 0 0 3px rgba(25,118,210,.15) !important;
    outline: none;
}

/* ===== Dropzone estilo FB ===== */
.dropzone {
    position: relative;
    margin-top: 14px;
    background: var(--bg-elevated);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 14px;
    transition: all .2s ease;
    min-height: 60px;
}
.dropzone.drag-over {
    border-color: var(--tsi-blue);
    background: linear-gradient(135deg, rgba(25,118,210,.08), rgba(0,188,212,.06));
    transform: scale(1.005);
    box-shadow: 0 0 0 4px rgba(25,118,210,.12);
}
.dropzone input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Estado vacío: invitación grande */
.dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color .2s ease;
}
.dropzone-empty:hover { color: var(--tsi-blue); }
.dropzone-empty i.material-icons {
    font-size: 48px !important;
    color: var(--tsi-blue);
    margin-bottom: 8px;
    opacity: .7;
}
.dropzone-empty p {
    margin: 0 0 4px;
    font-size: .95em;
    color: var(--text-primary);
}
.dropzone-empty small {
    color: var(--text-muted);
    font-size: .8em;
}
.dropzone.drag-over .dropzone-empty i.material-icons {
    animation: bounce-up .5s ease infinite alternate;
    opacity: 1;
}
@keyframes bounce-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

/* Grid de previews */
.dropzone-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.dz-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    aspect-ratio: 1;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dz-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(25,118,210,.25);
}
.dz-item img,
.dz-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dz-item video { background: #000; }
.dz-item-vid {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dz-item-vid i.material-icons {
    font-size: 16px !important;
    color: #fff;
}
.dz-item-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,.7);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
    padding: 0;
}
.dz-item-x:hover {
    background: #e53935;
    transform: scale(1.15);
}
.dz-item-x i.material-icons {
    font-size: 16px !important;
    color: #fff;
}
.dz-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
    color: #fff;
    font-size: .7em;
    padding: 14px 8px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón "agregar más" */
.dropzone-add-more {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    gap: 6px;
    font-weight: 500;
    transition: all .15s ease;
}
.dropzone-add-more:hover {
    border-color: var(--tsi-blue);
    color: var(--tsi-blue);
    background: rgba(25,118,210,.05);
}
.dropzone-add-more i { font-size: 18px !important; }

/* Contador en toolbar */
.dz-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-elevated);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: .85em;
}
.dz-count i { font-size: 16px !important; color: var(--tsi-blue); }

.crear-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.crear-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s ease;
    border: none;
    font-size: .9em;
}
.btn-icon:hover { background: var(--bg-elevated); }
.btn-icon i { font-size: 20px !important; color: var(--tsi-blue); }
.btn-publicar {
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-publicar:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25,118,210,.4);
}
.btn-publicar i { font-size: 18px !important; }

.notif-panel {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(25,118,210,.08), rgba(0,188,212,.06));
    border: 1px solid rgba(25,118,210,.2);
    border-left: 4px solid var(--tsi-blue);
    border-radius: 10px;
}
.notif-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .95em;
    color: var(--text-primary);
}
.notif-check input { width: auto !important; margin: 0 !important; }
.notif-check .material-icons { color: var(--tsi-blue); font-size: 18px !important; vertical-align: middle; }
.notif-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.notif-hint {
    margin: 10px 0 0;
    font-size: .8em;
    color: var(--text-muted);
    font-style: italic;
}
.notif-select, .notif-input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    font-size: .9em;
}

/* ===== Publicación ===== */
.publicacion { padding: 0; }
.pub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px;
}
.pub-autor {
    display: flex;
    gap: 12px;
    align-items: center;
}
.pub-autor strong { color: var(--text-primary); font-size: 1em; }
.pub-autor small { display: inline-flex; align-items: center; gap: 4px; }
.pub-autor small .material-icons { font-size: 13px !important; }

.btn-flat-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.btn-flat-icon:hover { background: rgba(229,57,53,.1); color: #e53935; }

.pub-contenido {
    padding: 4px 16px 12px;
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Layout de imágenes (FB style) */
.pub-imagenes { display: grid; gap: 2px; max-height: 540px; overflow: hidden; }
.pub-imagenes.layout-1 { grid-template-columns: 1fr; }
.pub-imagenes.layout-2 { grid-template-columns: 1fr 1fr; }
.pub-imagenes.layout-3 { grid-template-columns: 2fr 1fr; }
.pub-imagenes.layout-3 .pub-img-wrap:nth-child(1) { grid-row: span 2; }
.pub-imagenes.layout-4,
.pub-imagenes.layout-5,
.pub-imagenes.layout-6 { grid-template-columns: 1fr 1fr; }

.pub-img-wrap { position: relative; overflow: hidden; }
.pub-img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 540px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform .25s ease;
}
.pub-img:hover { transform: scale(1.02); }

/* Videos en el feed: sin zoom/cursor de imagen, con fondo negro y controles */
.pub-video {
    cursor: default;
    background: #000;
    object-fit: contain;
}
.pub-video:hover { transform: none; }

/* Overlay "Ver de nuevo" cuando termina el video */
.pub-video-box { position: relative; width: 100%; height: 100%; }
.video-replay {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 26px;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(2px);
    transition: transform .2s ease, background .2s ease;
}
.video-replay:hover {
    background: rgba(0,0,0,.8);
    transform: scale(1.06);
}
.video-replay i.material-icons { font-size: 40px !important; }
.pub-video-box.video-terminado .video-replay { display: flex; }

.etiqueta-foto {
    position: absolute;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .8em;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.etiqueta-foto .material-icons { font-size: 14px !important; color: var(--tsi-cyan); }

/* Stats + Acciones */
.pub-stats {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    color: var(--text-muted);
    font-size: .85em;
    border-bottom: 1px solid var(--border-color);
}
.pub-stats .material-icons { font-size: 14px !important; vertical-align: middle; color: var(--tsi-cyan); }

.pub-acciones {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

/* ===== Picker de reacciones (estilo FB) ===== */
.rxn-wrapper { position: relative; flex: 1; display: flex; }
.rxn-wrapper .btn-react { flex: 1; }

.rxn-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(.7);
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1.2);
    z-index: 50;
    transform-origin: bottom center;
    white-space: nowrap;
}
/* Puente invisible entre el botón y el picker (para que no se cierre al moverse) */
.rxn-picker::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.rxn-wrapper.picker-open .rxn-picker {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.rxn-opcion {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 28px;
    padding: 4px 6px;
    border-radius: 50%;
    transition: transform .2s cubic-bezier(.2,.8,.2,1.4), background .2s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rxn-opcion:hover {
    transform: scale(1.5) translateY(-4px);
    background: rgba(25,118,210,.08);
}
.rxn-opcion span {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
    display: inline-block;
}

/* Picker más chico para comentarios */
.rxn-picker.rxn-picker-sm {
    padding: 4px 6px;
}
.rxn-picker.rxn-picker-sm .rxn-opcion {
    font-size: 22px;
    padding: 3px 4px;
}

/* Botón con reacción aplicada */
.btn-react.activa { font-weight: 700; }
.rxn-emoji-btn {
    font-size: 18px;
    line-height: 1;
    animation: rxn-pop .35s cubic-bezier(.2,.8,.2,1.6);
    display: inline-block;
}
@keyframes rxn-pop {
    0%   { transform: scale(0) rotate(-180deg); }
    60%  { transform: scale(1.4) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Resumen de emojis en stats */
.rxn-resumen {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.rxn-emoji-mini {
    display: inline-block;
    font-size: 16px;
    margin-right: -4px;
    background: var(--bg-surface);
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    line-height: 1;
    padding: 1px;
    transition: transform .15s ease;
}
.rxn-emoji-mini:hover { transform: scale(1.3); z-index: 2; }
.rxn-total { margin-left: 6px; color: var(--text-secondary); }

/* Resumen en comentarios (dentro de la burbuja) */
.com-rxn-summary {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: .8em;
    color: var(--text-secondary);
    margin-top: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.com-rxn-summary span { font-size: 14px; }
.com-rxn-summary strong { color: var(--text-secondary); }
.pub-btn-accion {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease;
    font-size: .9em;
    font-weight: 600;
}
.pub-btn-accion:hover { background: var(--bg-elevated); }
.pub-btn-accion.activa { color: var(--tsi-cyan); }
.pub-btn-accion.activa .material-icons { color: var(--tsi-cyan); }
.pub-btn-accion .material-icons { font-size: 18px !important; }

/* Comentarios */
.comentarios-lista { padding: 8px 16px 0; }
.comentario-item {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.com-body { flex: 1; min-width: 0; }
.com-bubble {
    background: var(--bg-elevated);
    padding: 8px 14px;
    border-radius: 18px;
    color: var(--text-primary);
    font-size: .9em;
}
.com-bubble strong { display: block; font-size: .85em; margin-bottom: 2px; }
.com-texto { line-height: 1.4; word-wrap: break-word; }
.com-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .78em;
    padding: 4px 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.com-like, .com-link {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    font-weight: 600;
    font-size: .9em;
}
.com-like:hover, .com-link:hover { text-decoration: underline; color: var(--tsi-cyan); }
.com-like.activa { color: var(--tsi-cyan); }
.com-editado { color: var(--text-muted); font-style: italic; font-size: .85em; }

/* Form nuevo comentario */
.com-form-wrap {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    align-items: center;
}
.com-form-wrap input {
    flex: 1;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    font-size: .9em;
}
.com-form-wrap input:focus {
    border-color: var(--tsi-blue) !important;
    box-shadow: 0 0 0 2px rgba(25,118,210,.18) !important;
}
.com-send {
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.com-send:hover { transform: scale(1.1); }
.com-send i { font-size: 18px !important; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: zoom-out;
}
.lightbox.abierto { display: flex; animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 6px;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 36px !important;
    cursor: pointer;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    padding: 6px;
}

/* Avatar como foto */
.avatar-circle.avatar-photo {
    padding: 0;
    line-height: 0;
}

@media (max-width: 600px) {
    .feed-container { padding: 0 6px; }
    .pub-contenido { padding: 4px 12px 10px; font-size: .95em; }
    .pub-header { padding: 10px 12px 6px; }
    .com-form-wrap, .comentarios-lista { padding-left: 12px; padding-right: 12px; }
    .pub-acciones .pub-btn-accion span { display: none; }
}

/* ============ TARJETAS DE SUGERENCIA (notificar) ============ */
.sugerencia-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 14px;
    cursor: pointer;
    transition: all .2s ease;
    height: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.sugerencia-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.sugerencia-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(25,118,210,.25);
    border-color: var(--tsi-cyan);
}
.sugerencia-card:hover::before {
    opacity: .04;
}
.sugerencia-icono {
    font-size: 1.8em;
    line-height: 1;
}
.sugerencia-titulo {
    font-weight: 600;
    color: var(--text-primary);
    font-size: .95em;
    line-height: 1.3;
}
.sugerencia-preview {
    font-size: .8em;
    line-height: 1.4;
    flex: 1;
}
.sugerencia-action {
    color: var(--tsi-cyan);
    font-size: .8em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color);
}

/* ============ BRACKET (llave eliminatoria) ============ */
.bracket-scroll {
    overflow-x: auto;
    padding: 8px 4px 24px;
    /* Scrollbar visible y estilizado */
    scrollbar-width: thin;
    scrollbar-color: var(--tsi-blue) var(--bg-elevated);
}
.bracket-scroll::-webkit-scrollbar { height: 10px; }
.bracket-scroll::-webkit-scrollbar-track { background: var(--bg-elevated); border-radius: 5px; }
.bracket-scroll::-webkit-scrollbar-thumb {
    background: var(--brand-gradient);
    border-radius: 5px;
}

.bracket-grid {
    display: flex;
    gap: 24px;
    min-width: max-content;
    padding: 8px 4px;
}
.bracket-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 240px;
    justify-content: space-around;
}
.bracket-fase-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--brand-gradient);
    color: #fff;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(25,118,210,.3);
}
.bracket-fase-label strong { font-size: 1em; }
.bracket-fase-label small { color: rgba(255,255,255,.85); font-size: .8em; }

.bracket-match {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bracket-match:hover {
    transform: translateY(-2px);
    border-color: var(--tsi-blue);
    box-shadow: 0 6px 18px rgba(25,118,210,.2);
}
.bracket-match.placeholder { opacity: .55; }
.bracket-match.finalizado { border-left: 4px solid var(--tsi-cyan); }
.bracket-match.destacado  { border-left: 4px solid #ff6b35; }

.bracket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.bracket-header .chip.multi-chip {
    font-size: .85em;
    padding: 1px 6px;
}

.bracket-team {
    display: grid;
    grid-template-columns: 24px 1fr 28px;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 4px;
    font-size: .92em;
    transition: background .15s ease;
}
.bracket-team:hover { background: var(--bg-elevated); }
.bracket-team.ganador {
    background: linear-gradient(90deg, rgba(0,188,212,.15), transparent);
    border-left: 3px solid var(--tsi-cyan);
    padding-left: 2px;
}
.bracket-team.ganador .bracket-name {
    font-weight: 700;
    color: var(--tsi-cyan);
}
.bracket-flag { font-size: 1.2em; line-height: 1; }
.bracket-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bracket-score {
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.05em;
}
.bracket-team.ganador .bracket-score {
    color: var(--tsi-cyan);
}

.bracket-pred {
    margin-top: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: .8em;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.bracket-pred .material-icons { font-size: 14px !important; }
.bracket-pred.acerto  { background: rgba(67,160,71,.18); color: #43a047; border-left: 3px solid #43a047; }
.bracket-pred.parcial { background: rgba(251,140,0,.18); color: #fb8c00; border-left: 3px solid #fb8c00; }
.bracket-pred.fallo   { background: rgba(229,57,53,.15); color: #e53935; border-left: 3px solid #e53935; }
.bracket-pts {
    margin-left: auto;
    font-weight: 700;
    font-size: 1em;
}

.bracket-estado {
    text-align: right;
    margin-top: 6px;
}
.bracket-estado .chip {
    font-size: .7em;
    padding: 2px 8px;
}

@media (max-width: 768px) {
    .bracket-col { min-width: 220px; }
    .bracket-grid { gap: 16px; }
}

/* ============ HEATMAP DE ACTIVIDAD ============ */
.heatmap-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
    padding: 4px 2px;
}
.heatmap-row {
    display: grid;
    grid-template-columns: 50px repeat(24, 1fr);
    gap: 3px;
    align-items: center;
    min-width: 720px;
}
.heatmap-row.heatmap-header { margin-bottom: 4px; }
.heatmap-day-label {
    text-align: right;
    padding-right: 8px;
    font-size: .8em;
    color: var(--text-secondary);
    font-weight: 600;
}
.heatmap-hour-label {
    text-align: center;
    font-size: .7em;
    color: var(--text-muted);
}
.heatmap-cell {
    aspect-ratio: 1;
    min-height: 22px;
    border-radius: 3px;
    background: var(--bg-elevated);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65em;
    color: rgba(255,255,255,.9);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}
.heatmap-cell:hover {
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(25,118,210,.5);
    z-index: 2;
}
/* Color por intensidad (gradiente azul→cyan) */
.heatmap-cell[data-intensity="0"]   { background: var(--bg-elevated); color: transparent; }
.heatmap-cell[data-intensity]:not([data-intensity="0"]) {
    /* fallback se sobreescribe abajo con rangos */
    background: rgba(25, 118, 210, .15);
}

/* Rangos de intensidad */
.heatmap-cell[data-intensity="1"],
.heatmap-cell[data-intensity="2"],
.heatmap-cell[data-intensity="3"],
.heatmap-cell[data-intensity="4"],
.heatmap-cell[data-intensity="5"],
.heatmap-cell[data-intensity="6"],
.heatmap-cell[data-intensity="7"],
.heatmap-cell[data-intensity="8"],
.heatmap-cell[data-intensity="9"],
.heatmap-cell[data-intensity="10"],
.heatmap-cell[data-intensity="11"],
.heatmap-cell[data-intensity="12"],
.heatmap-cell[data-intensity="13"],
.heatmap-cell[data-intensity="14"],
.heatmap-cell[data-intensity="15"],
.heatmap-cell[data-intensity="16"],
.heatmap-cell[data-intensity="17"],
.heatmap-cell[data-intensity="18"],
.heatmap-cell[data-intensity="19"],
.heatmap-cell[data-intensity="20"] { background: rgba(25, 118, 210, .25); }

.heatmap-cell[data-intensity^="2"]:not([data-intensity="2"]),
.heatmap-cell[data-intensity^="3"] { background: rgba(25, 118, 210, .45); }

.heatmap-cell[data-intensity^="4"],
.heatmap-cell[data-intensity^="5"] { background: rgba(25, 118, 210, .65); }

.heatmap-cell[data-intensity^="6"],
.heatmap-cell[data-intensity^="7"] { background: linear-gradient(135deg, #1976d2, #1ba1c0); }

.heatmap-cell[data-intensity^="8"],
.heatmap-cell[data-intensity^="9"],
.heatmap-cell[data-intensity="100"] { background: linear-gradient(135deg, #1976d2, #00bcd4); box-shadow: 0 2px 6px rgba(0,188,212,.35); }

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85em;
}
.heatmap-legend .heatmap-cell {
    min-height: 20px;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}

[data-theme="light"] .heatmap-cell {
    color: rgba(0,0,0,.85);
}
[data-theme="light"] .heatmap-cell[data-intensity^="6"],
[data-theme="light"] .heatmap-cell[data-intensity^="7"],
[data-theme="light"] .heatmap-cell[data-intensity^="8"],
[data-theme="light"] .heatmap-cell[data-intensity^="9"],
[data-theme="light"] .heatmap-cell[data-intensity="100"] {
    color: #fff;
}

/* ============ LOGROS / BADGES ============ */
/* CSS Grid → sin huecos por diferencia de altura entre tarjetas */
.logros-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0 0 16px !important;
}
.logros-grid > .col {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
}
.logros-grid .logro-card {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 0 !important;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.logros-grid .logro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(25,118,210,.2);
}
.logros-grid .card-content {
    padding: 20px 16px;
}

.logro-card.obtenido {
    border-color: var(--tsi-cyan);
    background: linear-gradient(135deg, rgba(25,118,210,.06), rgba(0,188,212,.06)) !important;
}
.logro-card.pendiente {
    opacity: .65;
}
.logro-card.pendiente:hover { opacity: .9; }

.logro-emoji {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 10px;
    display: inline-block;
}
.logro-emoji.bloqueado {
    filter: grayscale(100%);
    opacity: .45;
}
.logro-desc {
    color: var(--text-secondary);
    font-size: .85em;
    margin: 6px 0 12px;
    min-height: 32px;
}

/* Chip de logros en el ranking (cantidad) */
.badge-count {
    background: var(--brand-gradient);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .75em;
    font-weight: 600;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ============ MULTIPLICADOR ============ */
.multi-chip {
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(255,107,53,.4);
    animation: pulse-multi 2s ease-in-out infinite;
}
@keyframes pulse-multi {
    0%, 100% { box-shadow: 0 2px 6px rgba(255,107,53,.4); }
    50%      { box-shadow: 0 2px 14px rgba(255,107,53,.7); }
}

/* ============ MODAL DE CONFIRMACIÓN ============ */
.modal-confirm {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-confirm[style*="display:none"],
.modal-confirm[style*="display: none"] { display: none !important; }

.modal-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(3px);
}
.modal-confirm-box {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    max-width: 500px;
    width: 100%;
    animation: modal-pop .2s ease;
}
@keyframes modal-pop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
.modal-confirm-header {
    text-align: center;
    padding: 28px 20px 16px;
    border-bottom: 1px solid var(--border-color);
}
.modal-confirm-header h5 {
    margin: 8px 0 0;
    color: var(--text-primary);
    justify-content: center;
}
.modal-confirm-body { padding: 20px 28px; }
.modal-confirm-body code {
    background: var(--bg-elevated);
    color: #e53935;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.modal-confirm-body label {
    color: var(--text-secondary);
    font-size: .9em;
    display: block;
    margin-top: 12px;
}
.modal-confirm-body input:focus {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 3px rgba(229,57,53,.2);
    outline: none;
}
.modal-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 24px;
}
.modal-confirm-footer .btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============ FILAS DE PUNTUACIÓN ============ */
.puntuacion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 10px;
    gap: 16px;
    transition: border-color .15s ease, transform .15s ease;
}
.puntuacion-row:hover {
    border-color: var(--tsi-blue);
    transform: translateX(2px);
}

.puntuacion-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.puntuacion-emoji {
    font-size: 1.6em;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.puntuacion-info strong {
    display: block;
    color: var(--text-primary);
    font-size: 1em;
    margin-bottom: 2px;
}
.puntuacion-info small {
    display: block;
    font-size: .85em;
}

.puntuacion-input {
    flex-shrink: 0;
}
.puntuacion-input input[type="number"] {
    width: 70px !important;
    height: 38px !important;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary) !important;
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color .15s ease;
}
.puntuacion-input input[type="number"]:focus {
    border-color: var(--tsi-blue) !important;
    box-shadow: 0 0 0 2px rgba(25,118,210,.2) !important;
    outline: none;
}

@media (max-width: 600px) {
    .puntuacion-row { padding: 12px 14px; }
    .puntuacion-emoji { font-size: 1.3em; width: 28px; height: 28px; }
    .puntuacion-input input[type="number"] { width: 60px !important; font-size: 1em; }
}

/* ============ FILTRO DE PERIODO ============ */
.periodo-filtro {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.periodo-filtro .chip {
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid var(--border-color) !important;
}
.periodo-filtro .chip:hover {
    border-color: var(--tsi-blue) !important;
    color: var(--tsi-blue) !important;
}
.periodo-filtro .chip.activo {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(25,118,210,.35);
}

/* ============ RESPONSIVE GLOBAL ============ */
/* Override de container Materialize */
main.container { width: 92%; max-width: 1280px; }

@media (max-width: 992px) {
    main.container {
        width: 96% !important;
        padding: 0 12px;
    }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.2rem; }
    .stat-card h2 { font-size: 2.2em !important; }
    .stat-card h3 { font-size: 2em !important; }
}

@media (max-width: 768px) {
    /* Tablets */
    nav .nav-wrapper { padding: 0 12px; }
    main.container { padding: 0 10px; }

    /* Tarjetas con menos padding */
    .card .card-content { padding: 16px; }
    .stat-card .card-content { padding: 14px; text-align: center; }

    /* Tablas responsive: hacerlas más compactas */
    table { font-size: .9em; }
    table th, table td { padding: 8px 6px !important; }

    /* Botones grandes en mobile */
    .btn, .btn-small { padding: 0 12px !important; height: 38px; }

    /* Forms */
    .input-field { margin-top: 16px !important; }
}

@media (max-width: 600px) {
    /* Mobile */
    h4 { font-size: 1.3rem; }
    h5 { font-size: 1.1rem; }

    /* El navbar se convierte en sidenav por Materialize automático,
       pero ajustamos el brand-logo para que no ocupe demasiado */
    nav .brand-logo { font-size: 1rem; }
    nav .brand-logo i.material-icons { font-size: 24px !important; }

    /* Stats: 2 columnas en lugar de 4 */
    .stat-card .card-content { padding: 12px 8px; }
    .stat-card h2 { font-size: 1.8em !important; }
    .stat-card h3 { font-size: 1.6em !important; }

    /* Tabla de partidos: ocultar columnas menos críticas */
    .partido-card .row { display: block; }
    .partido-card .col { width: 100% !important; margin-bottom: 8px; }

    /* Tabs admin: scroll horizontal */
    .tabs-admin { overflow-x: auto; }
    .tabs-admin .tab { min-width: 90px; }
    .tabs-admin .tab a { padding: 0 10px; font-size: .85em; }
    .tabs-admin .tab a .material-icons { font-size: 18px !important; }

    /* Avatares más pequeños */
    .avatar-circle { width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 13px !important; }

    /* Resultado de trivia */
    .resultado-card h2 { font-size: 2.5em; }
    .resultado-emoji { font-size: 3.5em; }

    /* Ranking: el valign-wrapper aplastaba el col de chips y los encimaba
       sobre el título. Apilar título arriba, chips abajo en fila scrolleable. */
    .row.valign-wrapper { display: block !important; }
    .periodo-filtro {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-top: 8px;
    }
    .periodo-filtro .chip { flex: 0 0 auto; white-space: nowrap; }
    .right-align .periodo-filtro { text-align: left; }

    /* Acciones de admin (Gestión de partidos, etc): los .btn inline se
       encimaban al envolverse. Apilarlos en flex con gap real. */
    .row.valign-wrapper .right-align {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        margin-top: 10px;
        text-align: left;
    }
    .row.valign-wrapper .right-align .btn,
    .row.valign-wrapper .right-align .btn-small {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }
}

/* ============ TWEMOJI ============ */
/* Los emojis renderizados por Twemoji son <img class="tw-emoji">. Por defecto
   son del tamaño de la fuente, los ajustamos en distintos contextos. */
img.tw-emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.15em;
    margin: 0 1px;
    display: inline-block;
    object-fit: contain;
    /* No tiene background ni borde */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* En el header de la app y branding, un poco más grandes */
nav .brand-logo img.tw-emoji,
.brand-ball img.tw-emoji,
.resultado-emoji img.tw-emoji {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

/* En selects de Tom Select (banderas en el dropdown) */
.ts-control img.tw-emoji,
.ts-dropdown img.tw-emoji {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -0.2em;
}

/* En tablas (ranking, partidos) */
table img.tw-emoji {
    height: 1.15em;
    width: 1.15em;
    vertical-align: -0.18em;
}

/* En el partido card (banderas más grandes) */
.partido-card img.tw-emoji,
.grupo-bandera img.tw-emoji,
.bracket-flag img.tw-emoji {
    height: 1.3em;
    width: 1.3em;
    vertical-align: middle;
}

/* En el bracket / scoreboard */
.brand-ball img.tw-emoji {
    height: 64px !important;
    width: 64px !important;
}
.fb img.tw-emoji {
    height: 100% !important;
    width: 100% !important;
}

/* En picker de reacciones (los emojis grandes) */
.rxn-opcion img.tw-emoji {
    height: 28px;
    width: 28px;
    vertical-align: middle;
}
.rxn-picker.rxn-picker-sm .rxn-opcion img.tw-emoji {
    height: 22px;
    width: 22px;
}

/* Logos pequeños tipo chip */
.chip img.tw-emoji {
    height: 1.1em;
    width: 1.1em;
}

/* ============================================================
   👥 MODAL "QUIÉNES REACCIONARON"
   ============================================================ */
.rxn-clickable { cursor: pointer; transition: opacity .15s ease; }
.rxn-clickable:hover { opacity: .8; }

.rxn-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.rxn-modal.abierto { display: flex; animation: cm-fade .2s ease; }
.rxn-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,8,20,.7);
    backdrop-filter: blur(6px);
}
.rxn-modal-dialog {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: cm-pop .3s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.rxn-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.rxn-modal-header h5 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.rxn-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.rxn-modal-close:hover { background: var(--bg-elevated); }
.rxn-modal-body {
    overflow-y: auto;
    padding: 8px 0;
}
.rxn-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
}
.rxn-tab {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}
.rxn-tab.activo {
    background: var(--brand-gradient);
    color: #fff;
    border-color: transparent;
}
.rxn-list { padding: 6px 0; }
.rxn-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    transition: background .12s ease;
}
.rxn-user-item:hover { background: var(--bg-elevated); }
.rxn-user-info { display: flex; flex-direction: column; }
.rxn-user-info strong { color: var(--text-primary); font-size: .9rem; }
.rxn-user-info small { font-size: .75rem; margin-top: 2px; }

/* Filas de stat-cards con alturas iguales (override Materialize float) */
.stats-equal {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 0 0 16px !important;
}
.stats-equal > .col {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.stats-equal .card {
    height: 100%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}
.stats-equal .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================================
   🎮 OVERLAY DE INICIO TRIVIA (desbloquea audio)
   ============================================================ */
.trivia-overlay-inicio {
    max-width: 480px;
    margin: 60px auto;
    padding: 0 16px;
    animation: cm-pop .4s cubic-bezier(.2,.8,.2,1);
}
.trivia-overlay-card {
    background: linear-gradient(160deg, #1a2230, #141a23);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(25,118,210,.15);
}
.trivia-overlay-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 14px;
    filter: drop-shadow(0 6px 18px rgba(25,118,210,.45));
    animation: float-trivia 3s ease-in-out infinite;
}
@keyframes float-trivia {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.trivia-overlay-card h4 {
    color: var(--text-primary);
    margin: 0 0 10px;
    font-size: 1.6rem;
    justify-content: center;
}
.trivia-overlay-card p {
    color: var(--text-secondary);
    margin: 0 0 24px;
    line-height: 1.6;
}
.trivia-overlay-card p small { color: var(--text-muted); }
.trivia-overlay-card .btn-large {
    padding: 0 36px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 1.05rem !important;
}

/* Wrapper inline para nombre + badge nivel en feed/comentarios */
.autor-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.autor-row strong { display: inline !important; margin: 0 !important; }

/* ============================================================
   🏅 NIVEL XP BADGE + RACHA
   ============================================================ */
.nivel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--nivel-color, #607d8b), color-mix(in srgb, var(--nivel-color, #607d8b) 60%, #000));
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--nivel-color, #607d8b) 40%, transparent);
    vertical-align: middle;
    white-space: nowrap;
}
.nivel-badge .nivel-emoji { font-size: .95em; line-height: 1; }
.nivel-badge.nivel-md { padding: 4px 12px; font-size: .82rem; }
.nivel-badge.nivel-lg { padding: 6px 14px; font-size: .92rem; gap: 6px; }
.nivel-badge.nivel-lg .nivel-emoji { font-size: 1.2em; }

.racha-chip {
    background: linear-gradient(135deg, #ff6b00, #ff3b3b) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    animation: racha-glow 2.5s ease-in-out infinite;
}
@keyframes racha-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 0, .35); }
    50%      { box-shadow: 0 0 16px rgba(255, 59, 59, .55); }
}

/* Progress bar nivel */
.nivel-progress {
    margin: 14px 0;
    background: var(--bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    height: 22px;
    position: relative;
    border: 1px solid var(--border-color);
}
.nivel-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tsi-blue), var(--tsi-cyan));
    transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.nivel-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    letter-spacing: .3px;
}

/* ============================================================
   ✨ POLISH PRO — capa final de diseño (post overhaul)
   ============================================================ */

/* Títulos h4 con barra acento gradient a la izquierda */
.app-main > h4,
.app-main > h5 {
    position: relative;
    padding-left: 18px;
    margin-top: 8px;
    margin-bottom: 18px;
}
.app-main > h4::before,
.app-main > h5::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 78%;
    background: var(--brand-gradient);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(25,118,210,.45);
}
.app-main > h4 .material-icons,
.app-main > h5 .material-icons {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 28px !important;
}

/* Cards: borde sutil gradient en hover (sin layout shift) */
.card {
    position: relative;
    isolation: isolate;
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(25,118,210,.5), rgba(0,188,212,.3), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 1;
}
.card:hover::after { opacity: 1; }

/* Card titles con ícono más vivo */
.card-title .material-icons {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Botón primario con shine al hover */
.btn:not(.red):not(.green):not(.blue):not(.btn-flat),
.btn-large:not(.red):not(.green):not(.blue) {
    position: relative;
    overflow: hidden;
}
.btn:not(.red):not(.green):not(.blue):not(.btn-flat)::before,
.btn-large:not(.red):not(.green):not(.blue)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.btn:not(.red):not(.green):not(.blue):not(.btn-flat):hover::before,
.btn-large:not(.red):not(.green):not(.blue):hover::before {
    transform: translateX(120%);
}

/* Stat cards: número con halo glow sutil */
.stat-card h2,
.stat-card h3 {
    text-shadow: 0 0 40px rgba(25,118,210,.25);
}

/* Tablas: header con fondo glass */
thead {
    background: linear-gradient(180deg, rgba(25,118,210,.06), transparent);
}
table tbody tr {
    transition: background-color .15s ease, transform .15s ease;
}

/* Chips con sombra interna sutil */
.chip {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .15s ease, box-shadow .2s ease;
}
.chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25,118,210,.2);
}

/* Footer: logo TSI sutil + acento gradient top */
.page-footer {
    background:
        linear-gradient(90deg, transparent, rgba(25,118,210,.04), transparent),
        linear-gradient(180deg, transparent, var(--footer-bg));
    position: relative;
}
.page-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tsi-cyan), transparent);
    opacity: .4;
}

/* Avatares: anillo gradient sutil */
.avatar-circle {
    box-shadow:
        0 2px 8px rgba(0,0,0,.3),
        0 0 0 2px rgba(25,118,210,.15);
    transition: box-shadow .25s ease, transform .2s ease;
}
.avatar-circle:hover {
    transform: scale(1.05);
    box-shadow:
        0 4px 14px rgba(0,0,0,.4),
        0 0 0 2px var(--tsi-cyan);
}

/* Brand-bg buttons: glow on hover */
.brand-bg:hover {
    box-shadow: 0 8px 24px rgba(25,118,210,.5), 0 0 0 1px rgba(0,188,212,.3) !important;
}

/* Inputs focus: aro cyan suave */
.input-field input:focus:not([disabled]),
.input-field textarea:focus:not([disabled]) {
    box-shadow: 0 1px 0 0 var(--brand-primary), 0 0 0 4px rgba(25,118,210,.08) !important;
}

/* Loader/skeleton sutil para imágenes en carga */
img:not([src]), img[src=""] { opacity: 0; }

/* Selección de texto con color de marca */
::selection { background: rgba(25,118,210,.4); color: #fff; }

/* Card hover lift consistente */
.card:hover {
    transform: translateY(-2px);
}

/* Materialize tabs polish */
.tabs {
    background-color: transparent !important;
}
.tabs .tab a {
    color: var(--text-secondary) !important;
    transition: color .2s ease;
}
.tabs .tab a.active {
    color: var(--brand-primary) !important;
}
.tabs .indicator {
    background: var(--brand-gradient) !important;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* Partido card: gradient border en hover */
.partido-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.partido-card:hover {
    border-left-color: var(--tsi-cyan) !important;
    box-shadow: 0 8px 24px rgba(0,188,212,.18), -3px 0 0 var(--tsi-cyan);
}

/* Bloque "vacío" estilo zen */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state .material-icons {
    font-size: 64px !important;
    opacity: .3;
    margin-bottom: 12px;
}

/* My-row ranking: animación shimmer */
.my-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,188,212,.1), transparent);
    animation: my-row-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}
.my-row { position: relative; overflow: hidden; }
@keyframes my-row-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}

/* ===== Tooltip nav custom (icon-only mode) ===== */
nav ul.right li > a[data-label] {
    position: relative;
}
nav ul.right li > a[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #0a0e14;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 200;
}
nav ul.right li > a[data-label]::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--border-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 201;
}
/* Solo mostrar tooltip cuando NO hay span visible (icon-only) */
@media (max-width: 1500px) {
    nav ul.right li > a[data-label]:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    nav ul.right li > a[data-label]:hover::before {
        opacity: 1;
    }
}

/* ============================================================
   🛡️ MODAL CONFIRM CUSTOM
   ============================================================ */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.confirm-modal.open { display: flex; animation: cm-fade .2s ease; }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }

.confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 8, 20, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.confirm-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, #1a2230, #141a23);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow:
        0 30px 80px rgba(0,0,0,.65),
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 60px rgba(25,118,210,.15);
    animation: cm-pop .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes cm-pop {
    from { opacity: 0; transform: scale(.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tsi-blue), var(--tsi-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(25,118,210,.45), 0 0 0 8px rgba(25,118,210,.1);
    animation: cm-icon-pulse 2s ease-in-out infinite;
}
.confirm-modal.peligro .confirm-icon {
    background: linear-gradient(135deg, #ef5350, #c62828);
    box-shadow: 0 12px 32px rgba(229,57,53,.5), 0 0 0 8px rgba(229,57,53,.12);
}
@keyframes cm-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.confirm-icon i.material-icons {
    color: #fff !important;
    font-size: 42px !important;
}

.confirm-title {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -.3px;
    justify-content: center;
}
.confirm-msg {
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 28px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-confirm-ok,
.btn-confirm-cancel {
    flex: 1;
    min-width: 130px;
    max-width: 180px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .15s ease, box-shadow .2s ease, background .25s ease;
    font-family: inherit;
}
.btn-confirm-ok i, .btn-confirm-cancel i {
    font-size: 18px !important;
    line-height: 1;
}
.btn-confirm-cancel {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}
.btn-confirm-cancel:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}
.btn-confirm-ok {
    background: linear-gradient(135deg, var(--tsi-blue), var(--tsi-cyan));
    color: #fff;
    box-shadow: 0 6px 18px rgba(25,118,210,.45);
}
.btn-confirm-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(25,118,210,.6);
}
.confirm-modal.peligro .btn-confirm-ok {
    background: linear-gradient(135deg, #ef5350, #c62828);
    box-shadow: 0 6px 18px rgba(229,57,53,.45);
}
.confirm-modal.peligro .btn-confirm-ok:hover {
    box-shadow: 0 10px 28px rgba(229,57,53,.65);
}

[data-theme="light"] .confirm-dialog {
    background: linear-gradient(180deg, #ffffff, #f8f9fb);
    border-color: #e0e4e8;
}
[data-theme="light"] .confirm-backdrop {
    background: rgba(10, 20, 35, .55);
}

@media (max-width: 480px) {
    .confirm-dialog { padding: 28px 22px 22px; }
    .confirm-icon { width: 64px; height: 64px; }
    .confirm-icon i.material-icons { font-size: 36px !important; }
    .confirm-title { font-size: 1.15rem; }
}

/* Light mode: ajustes polish */
[data-theme="light"] .card::after {
    background: linear-gradient(135deg, rgba(25,118,210,.3), rgba(0,188,212,.2), transparent 70%);
}
[data-theme="light"] thead {
    background: linear-gradient(180deg, rgba(25,118,210,.04), transparent);
}

/* ============ UTILS ============ */
.grey-text { color: var(--text-muted) !important; }

/* ============ FIX TEMA: selects nativos (browser-default) ============ */
/* Sin esto, en dark mode el select nativo queda blanco con texto oscuro
   (o ilegible según el navegador). */
select.browser-default {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    height: auto;
}
select.browser-default option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

/* ============ FIX TEMA: texto del progress bar de nivel ============ */
/* La parte NO llena del track es clara en light mode → texto blanco invisible */
[data-theme="light"] .nivel-progress-text {
    color: #1a2028;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
}

/* ============= Reloj de desempate por tiempo (trivia) ============= */
/* Solo aparece en empates de puntaje. Tooltip explica el criterio. */
.reloj-empate {
    background: rgba(255, 152, 0, .15);
    color: #e08600;
    border: 1px solid rgba(255, 152, 0, .35);
    font-size: .72rem;
    height: 24px;
    line-height: 22px;
    padding: 0 8px;
    cursor: help;
    font-weight: 600;
}
.reloj-empate .material-icons.tiny {
    font-size: 14px;
    margin-right: 2px;
}
[data-theme="light"] .reloj-empate {
    background: rgba(255, 152, 0, .12);
    color: #b36a00;
}

/* ============= Filas de sección en tabla de partidos (admin) ============= */
.grupo-partidos td {
    background: var(--bg-hover);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .5px;
    color: var(--text-primary);
}
.grupo-partidos.sec-rojo td    { color: #e53935; }
.grupo-partidos.sec-naranja td { color: #fb8c00; }
.grupo-partidos.sec-gris td    { color: var(--text-muted); }
.grupo-partidos .material-icons.tiny { vertical-align: middle; font-size: 16px; }

/* ============= Menciones (@) en comentarios ============= */
.mencion {
    color: var(--brand-accent);
    font-weight: 600;
    background: rgba(0, 188, 212, .12);
    padding: 0 3px;
    border-radius: 4px;
}
[data-theme="light"] .mencion {
    color: var(--brand-primary-dark);
    background: rgba(25, 118, 210, .10);
}

/* Dropdown de autocompletado de menciones */
.mencion-dropdown {
    position: absolute;
    z-index: 2000;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    padding: 4px;
}
.mencion-op {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
}
.mencion-op.activa,
.mencion-op:hover {
    background: var(--bg-hover);
}
.mencion-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}