/* ================================================================
   CONTROL FOTOVOLTAICO — Componentes (modo aditivo, NO invasivo)
   ----------------------------------------------------------------
   Reglas: NO redefinir body, *, sidebar, main-content, top-bar,
   data-table, card global — eso vive en /css/styles.css legacy.
   Solo agregar/mejorar componentes específicos del design system v2
   que se ven con look profesional.
   ================================================================ */

/* Tipografía base solo dentro de elementos del nuevo sistema.
   NO global para no romper el legacy. */
.df-typography {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Aplicar Inter como font-family a TODA la app (heredable, no rompe layout) */
html, body, input, textarea, select, button {
    font-family: var(--font-sans), 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ===============================================================
   BOTONES — Mejora visual del .btn legacy
   El legacy tiene: .btn, .btn-primary, .btn-accent, .btn-danger,
   .btn-warning, .btn-outline, .btn-sm, .btn-lg
   Solo sobrescribimos colores/radios/padding para coincidir con
   el brand nuevo, sin tocar layout (margin-left, etc.)
   =============================================================== */
.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    border: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn .icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

.btn-primary {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-secondary-hover) !important; }

.btn-accent {
    background: var(--brand-accent) !important;
    color: #1a1a1a !important;
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}
.btn-accent:hover:not(:disabled) { background: var(--brand-accent-hover) !important; color: #fff !important; }

.btn-danger {
    background: var(--danger) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) { background: #B91C1C !important; }

.btn-warning {
    background: var(--warning) !important;
    color: #1a1a1a !important;
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}

.btn-success {
    background: var(--success) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--brand-secondary) !important;
    color: var(--brand-secondary) !important;
}
.btn-outline:hover:not(:disabled) { background: rgba(37, 99, 235, 0.08) !important; }

.btn-ghost {
    background: transparent !important;
    color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: rgba(100, 116, 139, 0.1); color: var(--text-primary); }

/* Block button (full-width) */
.btn-block { display: flex !important; width: 100%; }

/* ===============================================================
   FORM INPUTS — mejorar legibilidad y altura touch
   =============================================================== */
.form-input,
.form-select,
.form-textarea {
    border-radius: var(--radius-md) !important;
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--text-base) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--brand-secondary) !important;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18) !important;
    outline: none !important;
}
.form-input.is-error,
.form-select.is-error { border-color: var(--danger) !important; }

/* ===============================================================
   BADGES — agregar badges nuevos del v2 sin pisar legacy
   =============================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    white-space: nowrap;
}
.badge .icon { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; }

.badge-success { background: var(--success-soft); color: #065F46; }
.badge-warning { background: var(--warning-soft); color: #92400E; }
.badge-danger  { background: var(--danger-soft);  color: #991B1B; }
.badge-info    { background: var(--info-soft);    color: #075985; }
.badge-brand   { background: rgb(37 99 235 / 0.12); color: var(--brand-primary); }

.badge-count {
    background: rgba(100, 116, 139, 0.2);
    color: inherit;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.badge-count.is-complete { background: var(--success-soft); color: #065F46; }

/* ===============================================================
   MODAL — pequeñas mejoras estéticas SIN romper el legacy
   =============================================================== */
.modal {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}
.modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ===============================================================
   TOASTS — design system v2 (nuevo stack)
   El app.js antiguo usaba .toast-container, ahora usa .toast-stack
   =============================================================== */
.toast-stack {
    position: fixed;
    top: max(env(safe-area-inset-top), 16px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast, 1000);
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: 100%;
}
@media (min-width: 768px) {
    .toast-stack {
        top: 16px; left: auto; right: 16px;
        transform: none; max-width: 420px;
    }
}

.toast-stack .toast {
    background: #ffffff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #94A3B8;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    animation: toast-in 250ms var(--ease-out);
    font-size: var(--text-sm);
    line-height: 1.4;
}
@keyframes toast-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.toast-stack .toast .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-stack .toast-body { flex: 1; }
.toast-stack .toast-success { border-left-color: var(--success); }
.toast-stack .toast-success .icon { color: var(--success); }
.toast-stack .toast-info    { border-left-color: var(--info); }
.toast-stack .toast-info    .icon { color: var(--info); }
.toast-stack .toast-warning { border-left-color: var(--warning); }
.toast-stack .toast-warning .icon { color: var(--warning); }
.toast-stack .toast-urgent  { border-left-color: var(--danger); }
.toast-stack .toast-urgent  .icon { color: var(--danger); }

/* ===============================================================
   PHOTO SLOT — componente nuevo del design system v2
   Se aplica solo dentro del modal de fotos cuando renderPhotosModal
   genera markup nuevo con .photo-slot__*
   =============================================================== */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-4);
    }
}

.photo-slot {
    position: relative;
    aspect-ratio: 1;
    border: 1.5px dashed var(--border-strong, #CBD5E1);
    border-radius: var(--radius-lg);
    background: var(--surface-card, #FFFFFF);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.photo-slot:hover { box-shadow: var(--shadow-md); border-color: var(--brand-secondary); }
.photo-slot:active { transform: scale(0.98); }
.photo-slot:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.photo-slot.uploaded {
    border-style: solid;
    border-color: var(--border-default, #E2E8F0);
}

.photo-slot__content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
    color: var(--text-secondary, #475569);
}
.photo-slot__content .icon-placeholder {
    width: 32px; height: 32px;
    color: var(--neutral-400, #94A3B8);
}
.photo-slot__number {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary, #475569);
}
.photo-slot__label {
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-tertiary, #64748B);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.photo-slot__image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.photo-slot__overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 8px 4px;
    background: linear-gradient(to top, rgb(15 23 42 / 0.85) 0%, rgb(15 23 42 / 0) 100%);
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.photo-slot__badge {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-sm);
    line-height: 1;
    white-space: nowrap;
}
.photo-slot__badge .icon { width: 12px; height: 12px; }
.photo-slot__badge--pending { background: var(--warning); color: #fff; }
.photo-slot__badge--synced  { background: var(--success); color: #fff; }
.photo-slot__badge--error   { background: var(--danger); color: #fff; }

.photo-slot__delete {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 3;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(220 38 38 / 0.95);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--duration-fast);
}
.photo-slot__delete:hover { background: #B91C1C; }
.photo-slot__delete .icon { width: 14px; height: 14px; }

/* ===============================================================
   UTILIDADES sueltas (clases sin selectores que choquen)
   =============================================================== */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }

/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce) {
    .photo-slot, .btn, .toast-stack .toast { transition: none !important; }
    .toast-stack .toast { animation: none !important; }
}

/* ===============================================================
   DARK MODE — Fix de contraste para textos invisibles
   El legacy theme-variables.css define --text-primary muy oscuro
   para el modo dark y eso hace que algunos headers/titles queden
   casi negros sobre fondo dark.
   Detectamos dark mode por la presencia de body[data-theme="dark"]
   o html.dark o por prefers-color-scheme.
   =============================================================== */

/* Por defecto (dark mode legacy activo) aclaramos algunos textos */
body[data-theme="dark"] .card-header h3,
body[data-theme="dark"] .card-header,
html.dark .card-header h3,
html.dark .card-header,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header {
    color: #F1F5F9 !important;
}

body[data-theme="dark"] .top-bar,
body[data-theme="dark"] .top-bar h2,
body[data-theme="dark"] .top-bar h1,
html.dark .top-bar,
html.dark .top-bar h1,
html.dark .top-bar h2 {
    color: #F1F5F9 !important;
}

/* Card titles y cualquier h1-h4 dentro de cards */
body[data-theme="dark"] .card h1,
body[data-theme="dark"] .card h2,
body[data-theme="dark"] .card h3,
body[data-theme="dark"] .card h4,
html.dark .card h1,
html.dark .card h2,
html.dark .card h3,
html.dark .card h4 {
    color: #F1F5F9 !important;
}

/* Tablas: headers de tabla con buen contraste */
body[data-theme="dark"] .data-table th,
body[data-theme="dark"] table th,
html.dark .data-table th,
html.dark table th {
    color: #CBD5E1 !important;
}

body[data-theme="dark"] .data-table td,
body[data-theme="dark"] table td,
html.dark .data-table td,
html.dark table td {
    color: #E2E8F0 !important;
}

/* Nombres / labels en filas */
body[data-theme="dark"] td span,
body[data-theme="dark"] td strong,
html.dark td span,
html.dark td strong {
    color: inherit;
}

/* Sidebar branding: el "SFV Control" en gris claro mejora visibilidad */
body[data-theme="dark"] .sidebar-logo,
body[data-theme="dark"] .sidebar-logo > div > div:first-child,
html.dark .sidebar-logo,
html.dark .sidebar-logo > div > div:first-child {
    color: #F1F5F9 !important;
}

/* Fallback: si NO hay atributo data-theme y el modo es dark del SO,
   también aplicar (para que la app respete prefers-color-scheme cuando
   el legacy no haya marcado el body) */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .card-header h3,
    body:not([data-theme="light"]) .card-header {
        color: #F1F5F9;
    }
}

/* ===============================================================
   APP NATIVA (Capacitor) — SAFE AREA Y AJUSTES ESPECIFICOS
   La WebView de Capacitor no respeta automaticamente la barra de
   estado de Android (donde aparecen hora, bateria, senal). Hay que
   agregar padding-top equivalente a la altura del status bar.
   =============================================================== */
html.is-native-app body {
    /* Reserva espacio para la status bar (Android > 5) */
    padding-top: env(safe-area-inset-top, 24px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    box-sizing: border-box;
}

/* El sidebar fixed tambien debe respetar la safe area */
html.is-native-app .sidebar,
html.is-native-app .top-bar,
html.is-native-app .topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
}

/* TOP-BAR como overlay con backdrop solido — evita ver contenido detras
   cuando el usuario scrollea. Status bar siempre tapada por el topbar
   azul brand, contenido siempre debajo. */
html.is-native-app .top-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
/* Espacio reservado arriba del body para la status bar. Como el topbar
   tiene padding-top con safe-area-inset, esto NO es necesario en el body. */
html.is-native-app body {
    padding-top: 0 !important;
}

/* En la app nativa, el sidebar a la izquierda quita 260px de ancho
   en pantallas grandes; en moviles esta como overlay y se oculta */
@media (max-width: 1023px) {
    html.is-native-app .main-content {
        margin-left: 0 !important;
    }
}

/* ===============================================================
   RESPONSIVE MOBILE — fixes de legibilidad y layout en celular
   El usuario reporto:
   - Headers ilegibles (textos azules muy claros sobre fondo claro)
   - Cards apiladas mal
   - Tabla de Control Diario con scroll horizontal feo
   =============================================================== */

/* Forzar color legible para TODOS los card-header h3 en cualquier modo */
.card-header h3,
.card .card-header,
.card > h3:first-child {
    color: var(--text-primary, #0F172A) !important;
}

/* Fix titulos del dashboard: "Distribucion por Cuadrilla", etc. */
.card-header,
.card-header div,
.card-header span {
    color: var(--text-primary, #0F172A) !important;
}

/* En light mode (que es lo que ve el celular del usuario) los textos
   "Cuadrilla 1, LA BONITA..." con color light-gray no se leen.
   Forzamos texto oscuro en items de listas */
.card .item-row,
.card-body div,
.card-body span:not(.badge):not(.badge-count) {
    color: inherit;
}

/* Stat cards del dashboard: en mobile uso 2 columnas en lugar de 1 columna stretched */
@media (max-width: 640px) {
    /* Stat cards grid */
    [style*="grid-template-columns:repeat(auto-fit"]:has(.stat-card),
    [style*="auto-fit,minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .stat-card {
        padding: 0.75rem !important;
    }
    .stat-card .stat-value {
        font-size: 1.25rem !important;
    }
    .stat-card .stat-label {
        font-size: 0.7rem !important;
    }
    .stat-card .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }

    /* Tabla compacta en mobile */
    .data-table {
        font-size: 0.75rem !important;
    }
    .data-table th, .data-table td {
        padding: 0.5rem 0.4rem !important;
    }

    /* Card headers con padding mas pequeno */
    .card-header {
        padding: 0.75rem 1rem !important;
    }
    .card-body {
        padding: 1rem !important;
    }

    /* Card grids del dashboard: una columna en pantallas muy estrechas */
    [style*="grid-template-columns:1fr 1fr"][style*="gap"] {
        grid-template-columns: 1fr !important;
    }

    /* Topbar en mobile: titulo no debe quedar tapado */
    .top-bar {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }
    .top-bar h1, .top-bar h2 {
        font-size: 1.125rem !important;
    }
}

/* Distribucion por Cuadrilla / Vereda: listas con texto wrap correcto */
@media (max-width: 640px) {
    .card-body > div:first-child + div,
    .card-body > * {
        word-break: break-word;
    }

    /* Charts de Chart.js: limitar altura para no romper layout */
    canvas {
        max-height: 280px !important;
    }
}

/* En mobile el sidebar debe poder colapsarse */
@media (max-width: 1023px) {
    .sidebar:not(.collapsed) {
        box-shadow: var(--shadow-lg);
    }
    .main-content {
        margin-left: 0 !important;
    }
}

/* ===============================================================
   MOBILE OVERRIDE AGRESIVO — class .mobile-mode aplicada por
   mobile-fixer.js cuando width < 768px
   =============================================================== */
html.mobile-mode .card-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 0.75rem 1rem !important;
}
html.mobile-mode .card-header h3,
html.mobile-mode .card-header > div,
html.mobile-mode .card-header > span {
    color: #0F172A !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

html.mobile-mode .card-body {
    padding: 0.75rem !important;
}

/* Cards: spacing pequeño entre cards */
html.mobile-mode .card {
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
}

/* Asegurar que los items de listas internas no tengan colores grises ilegibles */
html.mobile-mode .card-body > div,
html.mobile-mode .card-body > div > div {
    color: #1E293B !important;
}

/* Texto secundario aún legible */
html.mobile-mode [style*="color:var(--text-secondary)"],
html.mobile-mode [style*="color: var(--text-secondary)"] {
    color: #475569 !important;
}

/* Charts: contenedor flex en cardbody no debe forzar 2 columnas */
html.mobile-mode .card-body[style*="grid"] {
    display: block !important;
}

/* Topbar en mobile más compacto, sin tapar la status bar */
html.mobile-mode .top-bar {
    padding: 0.5rem 0.75rem !important;
    min-height: 48px;
    gap: 0.5rem !important;
}
html.mobile-mode .top-bar h1,
html.mobile-mode .top-bar h2 {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Stat cards en mobile: 2 columnas siempre */
html.mobile-mode [style*="grid-template-columns"]:has(.stat-card) {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
}

/* ===============================================================
   FORZAR LIGHT MODE temporalmente (mientras se arregla el dark mode)
   Pisa las variables del legacy theme-variables.css para todas las
   pantallas.
   =============================================================== */
:root,
html,
html[data-theme="dark"],
body,
body[data-theme="dark"] {
    --bg-main: #F8FAFC !important;
    --bg-card: #FFFFFF !important;
    --bg-surface: #F1F5F9 !important;
    --text-primary: #0F172A !important;
    --text-secondary: #475569 !important;
    --text-tertiary: #64748B !important;
    --border: #E2E8F0 !important;
    --sidebar-bg: #FFFFFF !important;
    --sidebar-text: #334155 !important;
    color-scheme: light;
}

/* Aseguro que el body siempre tenga fondo claro */
body, html {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Cards siempre con fondo blanco visible */
.card, .stat-card {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* ===============================================================
   SIDEBAR: textos legibles en modo claro (light mode forzado)
   El legacy hacia .nav-item.active { color: #fff } que sobre fondo
   azul-claro era invisible.
   =============================================================== */
.sidebar,
.sidebar-logo,
.sidebar-footer {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}
.sidebar-logo,
.sidebar-logo > div,
.sidebar-logo > div > div {
    color: #0F172A !important;
}
.sidebar-logo > div > div:nth-child(2) {
    color: #64748B !important;
}
.nav-item {
    color: #334155 !important;
    background: transparent !important;
    border-left-color: transparent !important;
}
.nav-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1E293B !important;
}
.nav-item.active {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563EB !important;
    border-left-color: #2563EB !important;
    font-weight: 600 !important;
}
.nav-item.active span,
.nav-item:hover span {
    color: inherit !important;
}
.sidebar-footer,
.sidebar-footer * {
    color: #475569 !important;
}
.sidebar-footer .btn-outline {
    color: #2563EB !important;
    border-color: #2563EB !important;
}

/* Tablas en mobile: SIEMPRE scroll horizontal, sin word-break por letra */
html.mobile-mode table th,
html.mobile-mode table td,
html.mobile-mode .data-table th,
html.mobile-mode .data-table td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
html.mobile-mode .data-table,
html.mobile-mode table {
    min-width: max-content !important;
}

/* Sidebar en mobile: oculto por defecto, overlay cuando se abre */
@media (max-width: 1023px) {
    html.mobile-mode .sidebar.collapsed {
        transform: translateX(-100%) !important;
    }
    html.mobile-mode .sidebar:not(.collapsed) {
        transform: translateX(0) !important;
        box-shadow: 4px 0 20px rgba(15, 23, 42, 0.3) !important;
        z-index: 55 !important;
    }
    /* Que la main-content NO empuje 260px en mobile */
    html.mobile-mode .main-content {
        margin-left: 0 !important;
    }
    /* Espacio en topbar para el FAB hamburguesa */
    html.mobile-mode .top-bar {
        padding-left: 60px !important;
    }
}