/* ================================================================ */
/* MOBILE.CSS — Diseño exclusivo para dispositivos ≤768px           */
/* No incluir reglas de escritorio aquí.                            */
/* Escritorio/tablet: ver desktop.css                               */
/* ================================================================ */

@media (max-width: 768px) {

  /* --- 1. CONFIGURACIÓN GENERAL Y REDUCCIÓN DE SCROLL --- */
  /* El contenido se adapta al ancho real de la pantalla (sin tope de 480px que
     dejaba franjas a los lados). Padding lateral mantiene aire en los bordes. */
  .app-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* padding-bottom amplio: la barra inferior fija mide ~70px+safe; dejamos
       ~100px+safe para que nunca tape la última fila de tarjetas. */
    padding: 12px 14px calc(100px + var(--safe-bottom)) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .scroll-section {
    max-height: 62vh !important;
    padding-right: 2px !important;
  }

  /* Reducir márgenes de títulos de página en móvil */
  .page-header-wrap {
    margin-bottom: 14px !important;
  }

  /* Separación uniforme entre tarjetas/bloques para evitar amontonamiento */
  .card,
  .stat-card {
    margin-bottom: 12px !important;
  }

  /* --- 2. ACCESIBILIDAD Y TIPOGRAFÍA (MÁS CLARA PARA ADULTOS MAYORES) --- */
  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Títulos de secciones */
  .page-header-wrap h2 {
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
  }

  .card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  /* Textos secundarios y etiquetas descriptivas (legibles, no diminutos) */
  .stat-label,
  .progress-label,
  .profile-cargo,
  .anot-fecha,
  .login-info {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
  }

  /* Mayor contraste para textos secundarios en móvil */
  .stat-label,
  .anot-fecha {
    color: var(--text-2) !important;
  }

  /* --- 3. BOTONES Y ELEMENTOS TÁCTILES GRANDES (MÍNIMO 52PX DE ÁREA TÁCTIL) --- */
  .glass-btn,
  .login-btn,
  .back-to-start-btn,
  .modal-btn,
  .hist-toggle-btn,
  .anot-filter,
  .nav-item {
    min-height: 52px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Botones de acción principales más anchos y fáciles de presionar */
  .glass-btn,
  .login-btn,
  .back-to-start-btn,
  .modal-btn {
    padding: 14px 18px !important;
  }

  /* Efecto de toque sutil en dispositivos móviles */
  .glass-btn:active,
  .login-btn:active,
  .back-to-start-btn:active,
  .modal-btn:active,
  .hist-toggle-btn:active,
  .anot-filter:active,
  .stat-card:active,
  .card.dash-card:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
  }

  /* Botón de volver al inicio */
  .back-to-start-btn {
    padding: 14px 18px !important;
    margin-bottom: 14px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- 4. LOGIN MÓVIL MODERNO Y ACCESIBLE --- */
  /* NO forzar display con !important: el JS oculta/muestra pantallas con
     element.style.display = 'none'/'flex' (estilo inline). Un !important en la
     hoja venceria al inline 'none' y dejaria el login pegado sobre el dashboard.
     El centrado flex ya lo aporta base.css sin !important. */
  .login-page {
    padding: 18px !important;
    align-items: center;
    justify-content: center;
  }

  .login-card {
    padding: 30px 22px !important;
    width: 100% !important;
    max-width: 380px !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .login-logo h1 {
    font-size: 30px !important;
  }

  .login-logo p {
    font-size: 14px !important;
  }

  .login-field {
    margin-bottom: 18px !important;
  }

  .login-field label {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 7px !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .login-field input {
    height: 54px !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  .login-field input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--accent) !important;
  }

  .login-btn {
    height: 54px !important;
    margin-top: 18px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
  }

  /* --- 5. CABECERA SUPERIOR MÓVIL --- */
  .app-header {
    padding: calc(8px + var(--safe-top)) 14px 8px !important;
    height: auto !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .app-logo {
    font-size: 19px !important;
    font-weight: 800 !important;
  }

  .app-header-user {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    min-height: 42px !important;
    font-weight: 700 !important;
  }

  .app-header-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .theme-toggle {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* --- 6. DASHBOARD MÓVIL (COMPACTO, LIMPIO Y LEGIBLE) --- */

  /* Saludo */
  #page-dashboard > div.fade-up:first-of-type {
    margin-bottom: 10px !important;
  }

  #page-dashboard > div.fade-up:first-of-type h2 {
    font-size: 21px !important;
  }

  .dash-greeting-text {
    font-size: 13px !important;
  }
  .dash-greeting-title {
    font-size: 21px !important;
  }

  /* Tarjeta de Perfil */
  #page-dashboard .profile-card {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }

  #page-dashboard .profile-card .profile-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 17px !important;
  }

  #page-dashboard .profile-card .profile-name {
    font-size: 17px !important;
  }

  #page-dashboard .profile-card .profile-cargo {
    font-size: 12px !important;
  }

  #page-dashboard .profile-card > div:nth-of-type(2) {
    margin-top: 10px !important;
    padding-top: 10px !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  #page-dashboard .profile-card .profile-meta-item {
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
  }

  #page-dashboard .profile-card .glass-btn {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
  }

  /* Mejorar legibilidad de la tarjeta de perfil móvil (nombre, rol y tags) */
  .profile-name-mobile { font-size: 16px !important; }
  .profile-role-mobile { font-size: 12px !important; color: rgba(255,255,255,0.85) !important; }
  .profile-tags { font-size: 12px !important; color: rgba(255,255,255,0.85) !important; }
  .profile-avatar-mobile { width: 46px !important; height: 46px !important; font-size: 17px !important; }

  /* Tarjetas de Rendimiento EFE Valparaíso */
  #page-dashboard .card.dash-card.kpi-main-score-panel {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }
  #page-dashboard .card.dash-card.ranking-metric-panel,
  #page-dashboard .card.dash-card.tdv-metric-panel {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--border) !important;
  }

  /* Encabezados de KPI / métricas legibles */
  .kpi-title { font-size: 12px !important; }
  .kpi-subtitle { font-size: 12.5px !important; }
  .kpi-feedback { font-size: 12px !important; }
  .dash-metric-header { font-size: 13px !important; }
  .ranking-value { font-size: 15px !important; }
  .ranking-total { font-size: 12px !important; }

  /* Grilla 2x2 de Accesos Rápidos — botones grandes y claros */
  #page-dashboard > div[style*="grid-template-columns"] {
    gap: 12px !important;
    margin-bottom: 0 !important;
  }

  #page-dashboard > div[style*="grid-template-columns"] .dash-card {
    min-height: 92px !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--border) !important;
  }

  #page-dashboard > div[style*="grid-template-columns"] .dash-card div:nth-child(1) {
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }

  #page-dashboard > div[style*="grid-template-columns"] .dash-card div:nth-child(2) {
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #page-dashboard > div[style*="grid-template-columns"] .dash-card div:nth-child(3) {
    font-size: 11px !important;
  }

  /* Accesos directos por clase (shortcut-box) — coherentes y táctiles */
  .shortcut-grid { gap: 12px !important; }
  .shortcut-box { min-height: 104px !important; padding: 14px !important; border-radius: 14px !important; }
  .shortcut-box-icon { font-size: 32px !important; }
  .shortcut-box-title { font-size: 14px !important; }
  .shortcut-box-desc { font-size: 11px !important; }

  /* --- 6b. OCULTAR "METAS / OBJETIVOS DEL MES" SOLO EN MÓVIL --- */
  /* La tarjeta no tiene clase propia: es el único .dash-metric-panel que
     contiene .obj-container (OBJETIVOS DEL MES). La ocultamos completa con
     :has() sin tocar el HTML/JS; en escritorio (≥769px) sigue visible. */
  #page-dashboard .dash-metric-panel:has(.obj-container) {
    display: none !important;
  }

  /* Ocultar tarjeta "MÉTRICAS DE VIAJE Y METAS" (TDV / Racha / Objetivo) solo
     en móvil. Es el único .dash-metric-panel que contiene .tdv-grid. En
     escritorio (≥769px) la regla no aplica y la tarjeta sigue visible. */
  #page-dashboard .dash-metric-panel:has(.tdv-grid) {
    display: none !important;
  }

  /* Ocultar tarjeta "TOP EFE VALPARAÍSO" (Top Global / PT / Full) solo en
     móvil. Es el único .dash-metric-panel que contiene .ranking-grid. Al usar
     display:none sale del flujo y las demás tarjetas suben (sin hueco). En
     escritorio (≥769px) la regla no aplica y la tarjeta sigue visible. */
  #page-dashboard .dash-metric-panel:has(.ranking-grid) {
    display: none !important;
  }

  /* --- CAMBIO 1: FERROSCAN como acceso rápido (solo móvil) --- */
  /* El botón Ferroscan se renderiza SOLO en móvil (ver dashboard.js, _isMobile),
     así que en escritorio ni existe. Aquí solo se ajusta su acomodo: Trenos App
     y Portal SAP arriba, Ferroscan a ancho completo debajo, misma estética. */
  /* Links rápidos alineados a la izquierda, compactos */
  .profile-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* Trenos App y Portal SAP al MISMO tamaño chip que Ferroscan.
     Especificidad #page-dashboard .profile-card .profile-actions para ganarle
     a "#page-dashboard .profile-card .glass-btn" (min-height:46px). */
  #page-dashboard .profile-card .profile-actions .glass-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    margin-top: 0 !important;
  }

  /* Ocultar SOLO visualmente el RUT en móvil (el dato sigue en BD y lógica) */
  .profile-card .profile-tag-rut {
    display: none !important;
  }

  /* Quitar marca de agua (tren blanco) de la tarjeta de perfil en móvil */
  .profile-card .profile-accent-svg {
    display: none !important;
  }

  /* Ferroscan como CHIP/badge en el lugar del RUT: mismo tamaño visual que
     .profile-tag, alineado a la izquierda. Reset de estilos de <button>. */
  .profile-card .ferroscan-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    background: rgba(30, 45, 70, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    cursor: pointer !important;
  }

  /* CAMBIO 3 (TDV vs Histórico): se resuelve por render condicional en
     dashboard.js; no requiere CSS extra aquí. */

  /* --- CAMBIO 2: MODO CLARO MÓVIL CON MÁS PROFUNDIDAD --- */
  /* El modo claro es el estado por defecto (sin clase). El oscuro usa
     body.dark-mode, por eso scopeamos a body:not(.dark-mode) y NO tocamos el
     modo oscuro. Fondo gris suave + tarjetas blancas con borde y sombra ligera.
     Se excluyen las tarjetas con fondo propio (KPI principal y perfil). */
  body:not(.dark-mode) {
    --bg: #f4f6f8 !important;
    background: #f4f6f8 !important;
  }
  body:not(.dark-mode) .card:not(.kpi-main-score-panel):not(.profile-card),
  body:not(.dark-mode) .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  }

  /* --- 6c. COMPACTACIÓN PARA REDUCIR SCROLL (SIN APRETAR DE MÁS) --- */
  /* Menos separación entre bloques del dashboard */
  #page-dashboard .card,
  #page-dashboard .stat-card {
    margin-bottom: 10px !important;
  }

  /* Tarjeta KPI principal: alto reducido manteniendo legibilidad */
  #page-dashboard .card.dash-card.kpi-main-score-panel {
    padding: 14px 14px !important;
    margin-bottom: 10px !important;
  }

  /* Paneles de métricas/ranking: padding y margen algo menores */
  #page-dashboard .card.dash-card.ranking-metric-panel,
  #page-dashboard .card.dash-card.tdv-metric-panel,
  #page-dashboard .dash-metric-panel {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
  }

  /* Tarjeta de perfil un poco más compacta */
  #page-dashboard .profile-card {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
  }

  /* Accesos rápidos: alturas más contenidas para que entren sin scroll */
  #page-dashboard > div[style*="grid-template-columns"] .dash-card {
    min-height: 84px !important;
    padding: 12px 10px !important;
  }
  /* Grid de tarjetas inferiores (TDV / Anotaciones / Ayuda KPI / Soporte):
     2 columnas parejas, mismas dimensiones, sin cortes. Margen inferior extra
     para que la barra de navegación fija no tape la última fila. */
  .shortcut-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  .shortcut-box {
    min-height: 96px !important;
    height: 100% !important;
    padding: 12px 8px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  .shortcut-box-icon { font-size: 28px !important; margin-bottom: 6px !important; line-height: 1 !important; }
  .shortcut-box-title { font-size: 14px !important; line-height: 1.1 !important; margin: 0 !important; }
  .shortcut-box-desc { font-size: 11px !important; line-height: 1.1 !important; margin-top: 3px !important; }

  /* --- 7. BARRA DE NAVEGACIÓN INFERIOR (TÁCTIL Y PREMIUM) --- */
  .bottom-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(229, 231, 235, 0.5) !important;
    padding: 6px 0 calc(10px + var(--safe-bottom)) !important;
    height: calc(70px + var(--safe-bottom)) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
  }

  body.dark-mode .bottom-nav {
    background: rgba(26, 29, 39, 0.92) !important;
    border-top: 1px solid rgba(45, 48, 57, 0.5) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
  }

  .nav-item {
    padding: 6px 8px !important;
    border-radius: 12px !important;
    min-height: 52px !important;
    min-width: 62px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .nav-icon {
    font-size: 24px !important;
    color: var(--text-2) !important;
    transition: transform 0.2s ease !important;
  }

  .nav-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-2) !important;
  }

  .nav-item.active .nav-icon {
    color: var(--primary) !important;
    transform: translateY(-1px) scale(1.12) !important;
  }

  .nav-item.active .nav-label {
    color: var(--primary) !important;
    font-weight: 800 !important;
  }

  /* --- 8. AJUSTES EN PÁGINAS DE DETALLE (MÓVIL) --- */

  /* PÁGINA KPI */
  #page-kpi canvas#kpi-radar {
    max-height: 260px !important;
  }

  #page-kpi div[style*="height: 400px"] {
    height: 270px !important;
  }

  #page-kpi .progress-row {
    min-height: 50px !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    display: flex !important;
    align-items: center !important;
  }

  #page-kpi .progress-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    width: 90px !important;
    color: var(--text) !important;
  }

  #page-kpi .progress-bar {
    height: 12px !important;
    border-radius: 6px !important;
  }

  #page-kpi .progress-value {
    font-size: 15px !important;
    font-weight: 800 !important;
    width: 40px !important;
  }

  /* PÁGINA RANKING */
  #page-ranking div[style*="display:flex; justify-content:center; align-items:flex-end"] {
    padding: 10px 4px 0 !important;
    margin-bottom: 18px !important;
  }

  #page-ranking div[style*="height:80px"],
  #page-ranking div[style*="height:115px"],
  #page-ranking div[style*="height:65px"] {
    border-radius: 10px 10px 0 0 !important;
  }

  /* Switch de privacidad — área táctil amplia */
  #page-ranking .card[onclick*="togglePrivacidadRanking"] {
    padding: 14px 16px !important;
  }

  #page-ranking .card[onclick*="togglePrivacidadRanking"] div[onclick*="togglePrivacidadRanking"] {
    width: 52px !important;
    height: 28px !important;
    border-radius: 14px !important;
  }

  #page-ranking .card[onclick*="togglePrivacidadRanking"] div[onclick*="togglePrivacidadRanking"] > div {
    width: 24px !important;
    height: 24px !important;
  }

  /* PÁGINA HISTÓRICO */
  #page-historico .hist-toggle {
    height: 52px !important;
    padding: 4px !important;
  }

  #page-historico .hist-toggle-btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  #page-historico canvas#hist-chart {
    max-height: 190px !important;
  }

  /* PÁGINA LOGROS */
  #page-logros .card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  #page-logros .card div[style*="font-size:30px"] {
    font-size: 30px !important;
  }

  #page-logros .card div[style*="font-size:12px"] {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  #page-logros .card div[style*="font-size:10px"],
  #page-logros .card div[style*="font-size:9px"] {
    font-size: 12px !important;
  }

  /* PÁGINA ANOTACIONES / NOVEDADES — items y badges legibles */
  #page-anotaciones .anot-item {
    padding: 12px 0 !important;
  }
  .anot-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* --- 9. CONTENCIÓN DE ANCHO / SIN SCROLL HORIZONTAL (320–430px) --- */

  /* Anclar el viewport: nada se desborda hacia los lados */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Contenedores principales ocupan exactamente el ancho disponible */
  .app,
  .app-body,
  .app-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }
  /* .app-content conserva su tope de lectura de 480px y su padding propio
     (ver sección 1); aquí solo se garantiza que no exceda el viewport. */

  /* Cualquier página y tarjeta nunca más anchas que su contenedor */
  .page,
  .card,
  .stat-card,
  .dash-card,
  .dash-metric-panel,
  .profile-card,
  .shortcut-box,
  .chart-container {
    max-width: 100% !important;
  }

  /* Medios y lienzos de gráficos: se escalan al ancho, no lo fuerzan */
  img, canvas, svg, video, iframe {
    max-width: 100% !important;
  }
  #kpi-radar, #hist-chart, #mapa-radar-admin {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cabecera: el nombre/rol largos no empujan la barra fuera de pantalla */
  .app-header .user-info,
  .app-header .logo-brand {
    min-width: 0 !important;
  }
  .app-header .user-name,
  .app-header .user-role {
    max-width: 38vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Tablas anchas (admin) → scroll interno propio, no desbordan la página */
  .adm-table,
  .adm-pareto-table,
  #excel-preview table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Filas flex que podrían no envolver en pantallas estrechas */
  .profile-meta,
  .profile-tags,
  .hist-toggle,
  .stats-grid {
    flex-wrap: wrap !important;
  }

  /* --- 10. PANTALLA TDV MAQUINISTA (MÓVIL) --- */
  /* Contenedor fluido: sin tope de 1200px, padding lateral chico */
  #page-tdv .tdv-page-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 12px calc(90px + var(--safe-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  #page-tdv .tdv-page-header { margin-bottom: 14px !important; gap: 10px !important; }
  #page-tdv .tdv-page-title { font-size: 20px !important; }
  #page-tdv .tdv-page-subtitle { font-size: 12px !important; }

  /* Botón volver: compacto, ancho automático */
  #page-tdv .tdv-back-btn {
    width: auto !important;
    align-self: flex-start !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Mostrar vista móvil (cards+gráfico), ocultar la tabla ancha */
  #page-tdv .tdv-mobile-view { display: block !important; }
  #page-tdv .tdv-card { display: none !important; }  /* tabla = solo escritorio */

  /* KPI principal destacado */
  #page-tdv .tdv-kpi-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important;
    margin-bottom: 12px !important;
  }
  #page-tdv .tdv-kpi-label {
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
    color: var(--text-3) !important;
  }
  #page-tdv .tdv-kpi-value { font-size: 42px !important; font-weight: 900 !important; line-height: 1.1 !important; margin: 4px 0 2px !important; }
  #page-tdv .tdv-kpi-sub { font-size: 12px !important; color: var(--text-3) !important; }

  /* Tarjeta del gráfico */
  #page-tdv .tdv-chart-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 14px 12px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important;
    margin-bottom: 12px !important;
  }
  #page-tdv .tdv-chart-title {
    font-size: 13px !important; font-weight: 800 !important;
    color: var(--text) !important; margin-bottom: 10px !important;
  }
  #page-tdv #tdv-chart { width: 100% !important; max-width: 100% !important; height: 170px !important; }

  /* Grid de tarjetas de métricas (2 columnas) */
  #page-tdv .tdv-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #page-tdv .tdv-metric-box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 14px 10px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05) !important;
    min-height: 78px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
  }
  #page-tdv .tdv-metric-num { font-size: 26px !important; font-weight: 900 !important; line-height: 1 !important; }
  #page-tdv .tdv-metric-lbl { font-size: 11px !important; font-weight: 600 !important; color: var(--text-3) !important; margin-top: 4px !important; line-height: 1.15 !important; }

  body.dark-mode #page-tdv .tdv-kpi-card,
  body.dark-mode #page-tdv .tdv-chart-card,
  body.dark-mode #page-tdv .tdv-metric-box {
    background: #101827 !important; border-color: #1e293b !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
  }

}