/* ==========================================================================
   MEJORAS DEL MISMO DISEÑO (oct 2026)
   Contraste legible en ambos temas, foco visible con teclado, la app usable
   en celular y tableta, y movimiento con propósito en el Resumen.
   ========================================================================== */

/* --- Contraste: textos secundarios que se leen (mínimo 4.5:1) --- */
:root:not([data-theme="dark"]) {
    --text-secondary: #556274;
    --text-muted: #617086;
    --primary-light: #5b5ef0;  /* se usa como color de enlaces y nombres: 4.9:1 sobre blanco */
    --success-ink: #047857;
    --danger-ink: #dc2626;
}

[data-theme="dark"] {
    --text-muted: #8592a8;
    --success-ink: var(--success);
    --danger-ink: #f87171;
}

.trend-up,
.trend-chip-up { color: var(--success-ink); }
.trend-chip-down { color: var(--danger-ink); }
.text-success { color: var(--success-ink) !important; }
.text-danger { color: var(--danger-ink) !important; }

/* Botón principal en tema oscuro: un tono más profundo para que el texto blanco se lea */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-filter.active { background: #5558e8; }
[data-theme="dark"] .btn-primary:hover { background: #4b4ee0; }
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .nav-item.active i { color: var(--primary-light); }

/* Cifras que no bailan mientras cambian */
.stat-value,
.top-equipo-total,
.premium-table td { font-variant-numeric: tabular-nums; }

/* --- Foco visible con teclado (antes los botones no mostraban nada) --- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.btn-action:focus-visible,
.btn-close:focus-visible,
.theme-toggle:focus-visible,
.nav-item:focus-visible,
.btn-filter:focus-visible,
.stock-chip:focus-visible,
.rp-segmented button:focus-visible,
.rp-codigo:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .nav-item:focus-visible { outline-color: var(--primary-light); }

/* --- Indicador del menú que se desliza a la sección elegida --- */
.nav-menu { position: relative; }
.nav-item { z-index: 1; }

.nav-indicator {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-glow), rgba(14, 165, 233, 0.08));
    box-shadow: inset 0 0 12px rgba(79, 70, 229, 0.1);
    pointer-events: none;
    opacity: 0;
    transition: transform 300ms var(--ease-out), width 300ms var(--ease-out),
                height 300ms var(--ease-out), opacity 160ms ease;
}

.nav-indicator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    border-radius: 0 3px 3px 0;
}

.nav-menu.has-indicator .nav-item.active {
    background: transparent;
    box-shadow: none;
}

.nav-menu.has-indicator .nav-item.active::before { display: none; }

/* --- Resumen: entrada y datos que se llenan --- */
.top-equipos-lista.animar .top-equipo-row {
    animation: filaEntra 360ms var(--ease-out) backwards;
}

.top-equipos-lista.animar .top-equipo-barra span {
    transform-origin: left center;
    animation: llenarBarra 750ms var(--ease-out) backwards;
}

.top-equipos-lista.animar .top-equipo-row:nth-child(2),
.top-equipos-lista.animar .top-equipo-row:nth-child(2) .top-equipo-barra span { animation-delay: 60ms; }
.top-equipos-lista.animar .top-equipo-row:nth-child(3),
.top-equipos-lista.animar .top-equipo-row:nth-child(3) .top-equipo-barra span { animation-delay: 120ms; }
.top-equipos-lista.animar .top-equipo-row:nth-child(4),
.top-equipos-lista.animar .top-equipo-row:nth-child(4) .top-equipo-barra span { animation-delay: 180ms; }
.top-equipos-lista.animar .top-equipo-row:nth-child(5),
.top-equipos-lista.animar .top-equipo-row:nth-child(5) .top-equipo-barra span { animation-delay: 240ms; }

#dashboard-readings-list.animar .list-item { animation: filaEntra 360ms var(--ease-out) backwards; }
#dashboard-readings-list.animar .list-item:nth-child(2) { animation-delay: 50ms; }
#dashboard-readings-list.animar .list-item:nth-child(3) { animation-delay: 100ms; }
#dashboard-readings-list.animar .list-item:nth-child(4) { animation-delay: 150ms; }
#dashboard-readings-list.animar .list-item:nth-child(5) { animation-delay: 200ms; }

@keyframes filaEntra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes llenarBarra {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Medallas del top: el número se lee sobre el oro y la plata */
.top-equipo-rank.medalla-clara { color: #1e293b; }

/* Campana: un aviso nuevo se anuncia una sola vez */
.notification-bell-container svg { transform-origin: 50% 10%; }

/* Cambio de tema: el nuevo tema se revela en círculo desde el botón */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* --- Celular y tableta: el menú pasa arriba y el contenido usa todo el ancho --- */
@media (max-width: 900px) {
    .app-container { flex-direction: column; }

    .sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: var(--glass-border);
        scrollbar-width: none;
    }

    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar .brand { margin: 0; padding: 0; flex: none; }
    .sidebar .brand-icon { width: 36px; height: 36px; }
    .brand-info { display: none; }

    .nav-menu { flex-direction: row; flex: none; gap: 2px; }

    .nav-item {
        padding: 9px 12px;
        gap: 8px;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .nav-item span { display: inline; }

    .nav-indicator::before {
        top: auto;
        right: 10px;
        left: 10px;
        bottom: 0;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .main-content {
        margin-left: 0;
        padding: 14px 14px 28px;
        gap: 18px;
    }

    .main-header {
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-search,
    .header-search:focus-within { width: 100%; order: 2; }

    .header-profile {
        width: 100%;
        justify-content: flex-end;
        gap: 10px;
    }

    #current-date { margin-right: auto; }
    .view-header { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
    .view-header h2 { font-size: 1.5rem; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 480px) {
    #current-date { display: none; }
    .stats-grid { gap: 12px; }
    .stat-card { padding: 16px; }
    .stat-value { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-indicator { transition: opacity 160ms ease; }
    .top-equipos-lista.animar .top-equipo-row,
    .top-equipos-lista.animar .top-equipo-barra span,
    #dashboard-readings-list.animar .list-item { animation: none; }
}

/* Durante el cambio de tema no corren las transiciones de color: el círculo hace el cambio */
.cambiando-tema,
.cambiando-tema * { transition: none !important; }