@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0d1117; /* Dark background */
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent; /* Android: sin highlight al tocar */
            touch-action: manipulation; /* Android: reduce delay de 300ms en taps */
        }
        #mainApp {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: block;
        }
        #mainApp.hidden {
            display: none !important;
        }
        body.flex #mainApp:not(.hidden) {
            display: block !important;
        }
        /* Ocultar sección de jugadores recientes en inicio */
        #recentPlayersSection {
            display: none !important;
        }
        .sidebar {
            width: 250px;
            background-color: #1a202c; /* Darker sidebar */
        }
        .main-content {
            margin-left: 250px;
        }
        .breakdown-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #374151; /* gray-700 */
        }
        .breakdown-item:last-child {
            border-bottom: none;
        }
        /* Refuerzos CAI: quitar flechas de input type=number (Chrome, Safari, Edge, Firefox) */
        .refuerzo-monto-input::-webkit-outer-spin-button,
        .refuerzo-monto-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .refuerzo-monto-input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }
        .refuerzo-pago-total-label:has(.refuerzo-pago-total-cb:checked) {
            border-color: rgba(34, 197, 94, 0.7);
            background-color: rgba(20, 83, 45, 0.4);
        }
        .refuerzo-pago-total-label:has(.refuerzo-pago-total-cb:checked) span {
            color: #bbf7d0;
        }
        /* Juveniles: texto corto en móvil, completo en desktop */
        .juvenile-btn-mobile { display: none; }
        .juvenile-btn-desktop { display: inline; }

        /* Juveniles: evitar overflow horizontal en cualquier viewport */
        #juveniles { overflow-x: hidden; max-width: 100%; }
        #juvTotalMetricsGrid { max-width: 100%; }
        #juvTotalMetricsGrid > div {
            min-width: 0;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        #juvTotalMetricsGrid h3 {
            white-space: normal;
            overflow-wrap: break-word;
        }
        #juvenileCardsList { max-width: 100%; }
        #juvenileCardsList > div { max-width: 100%; min-width: 0; overflow: hidden; overflow-wrap: break-word; }
        #juvSimilarPlayers { max-width: 100%; }
        #juvSimilarPlayers > div { max-width: 100%; min-width: 0; overflow: hidden; }
        .nav-item {
            transition: all 0.3s ease;
            border-radius: 12px;
            margin: 4px 0;
        }
        .nav-item:hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
            transform: translateX(4px);
        }
        .nav-item.active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
            border-left: 3px solid #10b981;
        }
        .page-content {
            display: none;
            position: fixed;
            top: 0;
            left: 250px;
            width: calc(100vw - 250px);
            height: 100vh;
            background-color: #0d1117;
            z-index: 5;
            overflow-y: auto;
        }
        .page-content.active {
            display: block;
        }
        .page-content > div {
            width: 100%;
            max-width: none;
            padding: 1rem;
        }
        .skeleton-loading {
            background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 25%, rgba(75, 85, 99, 0.5) 50%, rgba(30, 41, 59, 0.5) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* Gestión de activos: columna de nombre fija al scroll horizontal */
        #loans .ts-asset-table-scroll {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        #loans .ts-asset-player-table {
            width: max-content !important;
            min-width: 100% !important;
            border-collapse: separate !important;
            border-spacing: 0;
            overflow: visible !important;
        }
        #loans .ts-asset-player-table th:first-child,
        #loans .ts-asset-player-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 2;
            min-width: 9rem;
            max-width: 16rem;
            box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.35);
        }
        #loans .ts-asset-player-table thead th:first-child {
            z-index: 3;
            background-color: #374151 !important;
        }
        #loans .ts-asset-player-table tbody td:first-child {
            background-color: #1f2937 !important;
        }
        #loans .ts-asset-player-table tbody tr:nth-child(even) td:first-child {
            background-color: #252f3f !important;
        }
        #loans .ts-asset-player-table tbody tr:hover td:first-child {
            background-color: #374151 !important;
        }

        /* Plantilla juveniles (LA SQUADRA): nombres largos sin invadir otras columnas */
        #youthSquadContent .ts-asset-table-scroll {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        #youthSquadContent .ts-asset-player-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
        }
        #youthSquadContent .ts-asset-player-table th:first-child,
        #youthSquadContent .ts-asset-player-table td:first-child {
            width: 14rem;
            min-width: 10rem;
            max-width: 14rem;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
            vertical-align: top;
        }
        #youthSquadContent .ts-asset-player-table th:nth-child(3),
        #youthSquadContent .ts-asset-player-table td:nth-child(3) {
            width: 8rem;
            min-width: 6rem;
            max-width: 9rem;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
            vertical-align: top;
        }

        /* ========================================================
           iPad Responsive — Desktop mode
           iPad Pro 12.9" portrait: 1024 × 1366
           iPad Air portrait:       820 × 1180
           iPad Mini portrait:      768 × 1024
           ======================================================== */

        /* --- Sidebar toggle button (hidden on desktop, shown on iPad) --- */
        .sidebar-toggle {
            display: none;
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1100;
            background: #1a202c;
            border: 1px solid #374151;
            color: #d1d5db;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.2s;
        }
        .sidebar-toggle:hover,
        .sidebar-toggle:active {
            background: #10b981;
            color: #fff;
        }

        /* ── ALL iPads — touch devices only (max-width: 1279px) ── */
        @media (max-width: 1279px) and (pointer: coarse) {

            /* Show toggle button */
            .sidebar-toggle {
                display: flex;
            }

            /* --- Sidebar: off-screen by default, slide-in --- */
            .sidebar {
                width: 250px;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                z-index: 1050;
            }
            .sidebar.sidebar-open {
                transform: translateX(0);
            }

            /* Overlay when sidebar is open */
            .sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1040;
                -webkit-tap-highlight-color: transparent;
            }
            .sidebar-overlay.active {
                display: block;
            }

            /* --- Main content: full-width --- */
            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }

            /* ★ FIX scroll: replace height:100vh with top/bottom anchors
               so Safari dynamic toolbar is accounted for */
            .page-content {
                left: 0 !important;
                width: 100vw !important;
                height: auto !important;
                top: 0 !important;
                bottom: 0 !important;
            }

            /* ★ FIX overlap: padding-top clears the ☰ button,
               padding-bottom gives extra room above Safari toolbar */
            .page-content .flex-grow.p-8,
            .page-content > div {
                padding: 1.25rem !important;
                padding-top: 64px !important;
                padding-bottom: 6rem !important;
            }

            /* --- Headers --- */
            .page-content h1.text-4xl {
                font-size: 1.75rem !important;
            }
            .page-content h2.text-3xl {
                font-size: 1.5rem !important;
            }

            /* --- Grids: 3-col → 2-col --- */
            .page-content .grid.lg\:grid-cols-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .page-content .grid.lg\:grid-cols-5 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
            .page-content .grid.lg\:grid-cols-6 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }

            /* --- Explorer filters → 2 cols --- */
            .page-content .grid.xl\:grid-cols-12 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .page-content .grid.xl\:grid-cols-12 > .xl\:col-span-4,
            .page-content .grid.xl\:grid-cols-12 > .xl\:col-span-3 {
                grid-column: span 1 !important;
            }

            /* --- Loans tabs: horizontal scroll --- */
            #loans .flex.gap-4.mb-6.border-b {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                flex-wrap: nowrap;
                padding-bottom: 2px;
            }
            #loans .flex.gap-4.mb-6.border-b button {
                white-space: nowrap;
                flex-shrink: 0;
                font-size: 0.875rem;
                padding: 0.5rem 1rem;
            }

            /* --- Touch-friendly (min 44 px, 16px to prevent iOS zoom) --- */
            .page-content input,
            .page-content select,
            .page-content textarea {
                min-height: 44px;
                font-size: 16px !important;
            }
            .page-content button {
                min-height: 44px;
            }

            /* --- Tables: full width, wrapper handles scroll --- */
            .page-content table {
                width: 100% !important;
                min-width: 100% !important;
            }
            #loans .ts-asset-player-table {
                width: max-content !important;
                min-width: 100% !important;
            }
            .page-content .overflow-x-auto {
                -webkit-overflow-scrolling: touch;
            }

            /* Compare → single column */
            #compare .grid.lg\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

            /* Valuation value */
            #valTruesignCard .text-4xl {
                font-size: 2rem !important;
            }

            /* Portfolio cards → 1 col */
            #portfolioSummary .grid.lg\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }

            /* Modals */
            .fixed.inset-0 > .bg-gray-800,
            .fixed.inset-0 > div[class*="bg-gray-800"],
            .bg-gray-800.rounded-lg.shadow-xl.max-w-4xl {
                max-width: 90vw !important;
                max-height: 85vh !important;
                margin: auto;
            }

            /* Welcome section */
            .bg-gradient-to-r.from-green-600.to-blue-600 {
                padding: 1.25rem !important;
            }
            .bg-gradient-to-r.from-green-600.to-blue-600 h2 {
                font-size: 1.5rem !important;
            }

            /* Sections padding */
            .page-content section.bg-gray-800 {
                padding: 1rem !important;
            }

            /* Stats text */
            .page-content .text-2xl.font-bold {
                font-size: 1.25rem !important;
            }

            /* Breakdown */
            .breakdown-item {
                padding: 0.5rem 0;
            }

            /*
            ASISTENTE AI DESACTIVADO — descomentar este bloque para reactivar
            #ai-assistant .max-w-4xl {
                max-width: 100% !important;
            }
            */

            /* Juveniles */
            #juveniles .grid.lg\:grid-cols-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #juveniles .grid.md\:grid-cols-6 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
            /* Juveniles tabs: apilar en móvil */
            #juveniles header.flex-col .juv-tab {
                padding: 0.5rem 0.75rem;
                font-size: 0.875rem;
            }
            #juvenileFavoritesList {
                max-width: 100%;
                min-width: 0;
            }
            /* Notas en favoritos juveniles (CAI): legibles y sin texto recortado arriba */
            #juvenileFavoritesList textarea.juv-cai-fav-note {
                box-sizing: border-box;
                line-height: 1.55;
                padding: 0.65rem 0.75rem;
                color: #f9fafb;
                vertical-align: top;
                font-size: 0.875rem;
                resize: vertical;
            }
            #juvenileFavoritesList textarea.juv-cai-fav-note::placeholder {
                color: #9ca3af;
            }
            #caiJuvFavDetailNotes {
                box-sizing: border-box;
                line-height: 1.55;
                padding: 0.65rem 0.75rem;
                color: #f9fafb;
                vertical-align: top;
            }
            #caiJuvFavDetailNotes::placeholder {
                color: #9ca3af;
            }

        }

        /* ── iPad Air portrait & iPad Mini (≤1023px, touch only) ── */
        @media (max-width: 1023px) and (pointer: coarse) {
            .page-content .grid.lg\:grid-cols-3,
            .page-content .grid.md\:grid-cols-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .page-content .grid.lg\:grid-cols-5 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .page-content .grid.lg\:grid-cols-6 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #portfolioSummary .grid.lg\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }

            /* Explorer filters → single column */
            .page-content .grid.xl\:grid-cols-12 {
                grid-template-columns: 1fr !important;
            }

            /* Loans tabs */
            #loans .flex.gap-4.mb-6.border-b button {
                font-size: 0.8rem;
                padding: 0.4rem 0.75rem;
            }

        }

        /* ── iPad Mini portrait (≤834px, touch only) ───────────── */
        @media (max-width: 834px) and (pointer: coarse) {
            .page-content .grid.md\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }
            .page-content .grid.md\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }
            .page-content .grid.lg\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }
            .page-content .grid.lg\:grid-cols-5 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .page-content h1.text-4xl {
                font-size: 1.5rem !important;
            }
            #compare .grid.lg\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

        }

        /* Juveniles: móvil (≤768px) - tabs ancho completo + 1 tarjeta por línea */
        @media (max-width: 768px) {
            #juveniles header [role="tablist"] {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }
            #juveniles header [role="tablist"] .juv-tab {
                flex: 1 1 0;
                min-width: 0;
                max-width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                align-content: center;
                gap: 0.125rem 0.25rem;
                box-sizing: border-box;
            }
            /* Especificidad mayor que #juveniles .grid.lg\:grid-cols-3 para forzar 1 columna */
            #juveniles #juvenileCardsList,
            #juveniles #juvenileFavoritesList,
            #juveniles #juvenileMiPlantillaList {
                grid-template-columns: 1fr !important;
            }
        }

        /* ========================================================
           Móviles Responsive (hasta 480px)
           iPhone 13-16 series, Android (Samsung, Pixel, Xiaomi, etc.)
           Viewports: 360px, 375px, 390px, 393px, 412px, 428px, 430px, 480px
           ======================================================== */
        @media (max-width: 480px) {
            /* Sidebar toggle siempre visible en iPhone */
            .sidebar-toggle {
                display: flex !important;
            }
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.sidebar-open {
                transform: translateX(0);
            }
            .sidebar-overlay.active {
                display: block !important;
            }
            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }

            /* Safe area para notch/Dynamic Island */
            body {
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
                padding-bottom: env(safe-area-inset-bottom);
            }

            /* Sidebar toggle: posición segura */
            .sidebar-toggle {
                top: calc(12px + env(safe-area-inset-top));
                left: calc(12px + env(safe-area-inset-left));
            }

            /* Page content: padding para safe area */
            .page-content .flex-grow.p-8,
            .page-content > div {
                padding-left: calc(1rem + env(safe-area-inset-left)) !important;
                padding-right: calc(1rem + env(safe-area-inset-right)) !important;
                padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
            }

            /* Headers más compactos */
            .page-content h1.text-4xl {
                font-size: 1.35rem !important;
            }
            .page-content h2.text-3xl {
                font-size: 1.25rem !important;
            }

            /* Todos los grids → 1 columna en iPhone */
            .page-content .grid.lg\:grid-cols-3,
            .page-content .grid.lg\:grid-cols-5,
            .page-content .grid.lg\:grid-cols-6,
            .page-content .grid.md\:grid-cols-3,
            .page-content .grid.md\:grid-cols-2,
            .page-content .grid.xl\:grid-cols-12 {
                grid-template-columns: 1fr !important;
            }
            .page-content .grid.xl\:grid-cols-12 > .xl\:col-span-4,
            .page-content .grid.xl\:grid-cols-12 > .xl\:col-span-3 {
                grid-column: span 1 !important;
            }

            /* Valuation card */
            #valTruesignCard .text-4xl {
                font-size: 1.75rem !important;
            }

            /* Settings: controles apilados */
            #settings .flex.items-center.space-x-4 {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0.75rem;
            }
            #settings select, #settings button {
                width: 100%;
            }

            /* Modales: casi pantalla completa */
            .fixed.inset-0 > .bg-gray-800,
            .fixed.inset-0 > div[class*="bg-gray-800"],
            .bg-gray-800.rounded-lg.shadow-xl.max-w-4xl {
                max-width: 95vw !important;
                max-height: 90vh !important;
                margin: 0.5rem auto;
            }


            /* Tablas: scroll horizontal táctil */
            .page-content .overflow-x-auto {
                -webkit-overflow-scrolling: touch;
                margin-left: calc(-1rem - env(safe-area-inset-left));
                margin-right: calc(-1rem - env(safe-area-inset-right));
                padding-left: calc(1rem + env(safe-area-inset-left));
                padding-right: calc(1rem + env(safe-area-inset-right));
            }

            /* Loans tabs: scroll horizontal */
            #loans .flex.gap-4.mb-6.border-b button {
                font-size: 0.75rem;
                padding: 0.4rem 0.6rem;
            }


            /* Stats y breakdown más compactos */
            .page-content .text-2xl.font-bold {
                font-size: 1.1rem !important;
            }
            .breakdown-item {
                padding: 0.4rem 0;
                font-size: 0.9rem;
            }

            /* Dashboard: header apilado */
            #dashboard header.flex.justify-between {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.75rem;
            }
            #dashboard header .flex.items-center.space-x-4 {
                flex-wrap: wrap;
            }

            /* Compare: Five Values grid 5→2 cols */
            #compare .grid.grid-cols-5 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #compare .grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

            /* EXPLORADOR DE JUGADORES desactivado — descomentar al reactivar
            #explorer .grid.gap-4 > * {
                min-width: 0;
            }
            */

            /* Juveniles: en móvil mostrar texto corto */
            #juvenileAnalyzeBtn .juvenile-btn-desktop { display: none !important; }
            #juvenileAnalyzeBtn .juvenile-btn-mobile { display: inline !important; }

            /* Juveniles: formulario en 1 columna */
            #juvenileSearchForm .grid {
                grid-template-columns: 1fr !important;
            }
            #juvenileSearchForm .grid > * {
                grid-column: 1 / -1 !important;
            }
            #juvenileAnalyzeBtn {
                width: 100% !important;
                white-space: nowrap !important;
                font-size: 0.9rem !important;
                padding: 0.75rem 1rem !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            #juvenileAnalyzeBtn span {
                white-space: nowrap !important;
            }

            /* Juveniles: Métricas Totales 1 columna en iPhone (390px) para que no se corte el texto */
            #juvTotalMetricsGrid {
                grid-template-columns: 1fr !important;
            }

            /* Juveniles: tarjetas de jugadores - stats visibles */
            #juvenileCardsList .juv-card-stats,
            #juvenileCardsList .grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
                gap: 0.5rem 0.75rem;
            }
            #juvenileCardsList .juv-card-stats > div,
            #juvenileCardsList .grid.grid-cols-2 > div {
                display: flex;
                align-items: baseline;
                gap: 0.5rem;
                padding: 0.15rem 0;
                min-width: 0;
            }
            #juvenileCardsList .juv-card-stats .text-gray-400,
            #juvenileCardsList .grid.grid-cols-2 .text-gray-400 {
                flex-shrink: 0;
            }
            #juvenileCardsList .juv-card-stats .font-semibold,
            #juvenileCardsList .grid.grid-cols-2 .font-semibold {
                word-break: break-word !important;
                overflow-wrap: break-word !important;
                min-width: 0;
            }
            #juvenileCardsList > div {
                min-width: 0 !important;
                overflow: hidden !important;
            }
            #juvenileCardsList .text-xs span {
                word-break: break-word !important;
            }
            /* Juveniles: nombre dentro de la tarjeta */
            #juvenileCardsList .flex.items-center.space-x-4 h3 {
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }
        }

        /* Desglose del Portafolio: responsive mobile */
        .desglose-portafolio-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .desglose-portafolio-table {
            min-width: 520px;
        }
        @media (max-width: 640px) {
            .desglose-portafolio-table {
                display: none !important;
            }
            .desglose-portafolio-cards {
                display: block !important;
            }
        }
        @media (min-width: 641px) {
            .desglose-portafolio-cards {
                display: none !important;
            }
        }
        .desglose-portafolio-cards {
            display: none;
        }
        .desglose-card {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.875rem 1rem;
            border-bottom: 1px solid rgba(75, 85, 99, 0.5);
        }
        .desglose-card:last-child {
            border-bottom: none;
        }
        .desglose-card-total {
            background: rgba(75, 85, 99, 0.5);
            font-weight: 700;
        }
        .desglose-card-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .desglose-card-right {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem 1rem;
            font-size: 0.8125rem;
        }
        .desglose-card-right span {
            white-space: nowrap;
        }

        /* Teléfonos muy pequeños (360px): Samsung A, Xiaomi Redmi, etc. */
        @media (max-width: 360px) {
            .page-content .flex-grow.p-8,
            .page-content > div {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
            .page-content h1.text-4xl { font-size: 1.2rem !important; }
        }

        /* Tablets y móviles: Métricas Totales 2 columnas hasta 1024px */
        @media (max-width: 1024px) {
            #juvTotalMetricsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 0.5rem !important;
            }
            #juvTotalMetricsGrid > div {
                padding: 0.75rem 0.5rem !important;
            }
            #juvTotalMetricsGrid h3 {
                font-size: 0.75rem !important;
                line-height: 1.2 !important;
            }
            #juvTotalMetricsGrid p {
                font-size: 1.1rem !important;
            }
        }

        /* Móviles y tablets: hasta 768px (incluye Android grandes, phablets) */
        @media (max-width: 768px) {
            #juvenileSearchForm .grid {
                grid-template-columns: 1fr !important;
            }
            #juvenileSearchForm .grid > * {
                grid-column: 1 / -1 !important;
                min-width: 0 !important;
            }
            #juvenileSearchForm .flex.items-end {
                width: 100% !important;
                min-width: 100% !important;
            }
            #juvenileAnalyzeBtn {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 0.75rem 1.5rem !important;
            }

            /* Métricas Totales juveniles: 2 columnas para que no se corten */
            #juvTotalMetricsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            /* Casos históricos similares: sin overflow, badge y stats visibles */
            #juvSimilarPlayers .flex.items-stretch {
                flex-wrap: wrap !important;
            }
            #juvSimilarPlayers .flex-1 {
                min-width: 0 !important;
                flex: 1 1 100% !important;
                overflow-wrap: break-word !important;
            }
            #juvSimilarPlayers .flex.items-center.justify-between {
                flex-wrap: wrap !important;
                gap: 0.5rem !important;
            }
            #juvSimilarPlayers .flex.items-center.justify-between > div {
                min-width: 0 !important;
            }
            #juvSimilarPlayers .flex.flex-wrap {
                flex-wrap: wrap !important;
            }
            #juvSimilarPlayers .flex.items-center.justify-between > span {
                flex-shrink: 0 !important;
            }

            /* Resultados juveniles: 1 columna, contenido dentro de tarjetas */
            #juvenileCardsList {
                grid-template-columns: 1fr !important;
            }
            #juvenileCardsList > .bg-gray-700 {
                min-width: 0 !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
            }
            #juvenileCardsList .font-semibold,
            #juvenileCardsList .text-gray-400,
            #juvenileCardsList .text-xs {
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }
            #juvenileCardsList h3.text-lg {
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }

            /* Inicio: ocultar avatar circular en móvil */
            #dashboard #userAvatar {
                display: none !important;
            }

            /* Métricas por División: scroll horizontal táctil */
            #juvDivisionMetrics {
                -webkit-overflow-scrolling: touch;
                overflow-x: auto;
            }
        }