/* =========================================================
   ACCESS TOKENS MOBILE FIX - Corrección Crítica
   Arregla el problema del sidebar que ocupa toda la pantalla
   ========================================================= */

/* === FIX CRÍTICO: LAYOUT EN MÓVILES === */
@media (max-width: 1024px) {
  /* Asegurar que el contenedor principal no tenga padding excesivo */
  .tokens-container {
    padding: var(--mobile-padding-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Header más compacto */
  .bo-page-header {
    padding: var(--mobile-padding-sm) !important;
    margin-bottom: var(--space-md) !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bo-page-header-title {
    width: 100% !important;
    margin-bottom: var(--space-sm) !important;
  }

  .bo-page-header-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }

  .bo-page-header-actions .bo-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Stats grid más compacto */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm) !important;
    margin-bottom: var(--space-md) !important;
  }

  .bo-stat-card {
    padding: var(--space-md) var(--space-sm) !important;
    min-height: 90px !important;
  }

  .bo-stat-icon {
    font-size: 1.5rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  .bo-stat-value {
    font-size: 1.5rem !important;
  }

  .bo-stat-label {
    font-size: 0.7rem !important;
  }

  /* Tabla container */
  .bo-table-container {
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
  }

  /* Ocultar tabla en móvil, mostrar cards */
  .desktop-view {
    display: none !important;
  }

  .mobile-cards-view {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-md) !important;
    padding: 0 !important;
  }

  /* Mobile cards optimizadas */
  .mobile-token-card {
    padding: var(--mobile-padding) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 0 !important;
  }

  .mobile-card-header {
    margin-bottom: var(--space-sm) !important;
  }

  .mobile-token-name {
    font-size: 1rem !important;
  }

  .mobile-card-info {
    gap: var(--space-sm) !important;
    padding: var(--space-sm) 0 !important;
  }

  .mobile-info-label {
    font-size: 0.7rem !important;
  }

  .mobile-card-actions {
    gap: var(--space-sm) !important;
    margin-top: var(--space-sm) !important;
  }

  .bo-btn-mobile {
    padding: var(--space-sm) var(--space-md) !important;
    font-size: 0.875rem !important;
  }
}

/* === MÓVIL PEQUEÑO (< 768px) === */
@media (max-width: 768px) {
  .tokens-container {
    padding: var(--mobile-padding-xs) var(--mobile-padding-sm) !important;
  }

  .bo-page-header {
    padding: var(--mobile-padding-xs) var(--mobile-padding-sm) !important;
  }

  .bo-page-header-title h1 {
    font-size: 1.25rem !important;
  }

  .bo-page-header-title .icon {
    font-size: 1.5rem !important;
  }

  /* Stats en columna única en móviles pequeños */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xs) !important;
  }

  .bo-stat-card {
    padding: var(--space-sm) !important;
    min-height: 80px !important;
  }

  .bo-stat-value {
    font-size: 1.375rem !important;
  }

  .bo-stat-label {
    font-size: 0.65rem !important;
  }

  /* Mobile cards más compactas */
  .mobile-token-card {
    padding: var(--mobile-padding-sm) !important;
  }

  .mobile-token-name {
    font-size: 0.9375rem !important;
  }

  .mobile-card-description {
    font-size: 0.8125rem !important;
    padding: var(--space-xs) var(--space-sm) !important;
  }

  .mobile-card-info {
    gap: var(--space-xs) !important;
  }

  .mobile-token-value {
    padding: var(--space-xs) var(--space-sm) !important;
  }

  .mobile-token-value .token-text {
    font-size: 0.75rem !important;
  }

  .mobile-card-actions {
    grid-template-columns: 1fr !important;
  }

  .bo-btn-mobile {
    width: 100% !important;
  }
}

/* === MÓVIL MUY PEQUEÑO (< 480px) === */
@media (max-width: 480px) {
  .tokens-container {
    padding: var(--space-xs) !important;
  }

  .bo-page-header {
    padding: var(--space-xs) var(--space-sm) !important;
    gap: var(--space-xs) !important;
  }

  .bo-page-header-title h1 {
    font-size: 1.125rem !important;
  }

  .bo-page-header-title .icon {
    font-size: 1.375rem !important;
  }

  .bo-page-header-actions .bo-btn {
    padding: var(--space-sm) var(--space-md) !important;
    font-size: 0.8125rem !important;
  }

  .stats-grid {
    gap: 0.5rem !important;
  }

  .bo-stat-card {
    padding: var(--space-xs) var(--space-sm) !important;
    min-height: 75px !important;
  }

  .bo-stat-icon {
    font-size: 1.25rem !important;
  }

  .bo-stat-value {
    font-size: 1.25rem !important;
  }

  .bo-stat-label {
    font-size: 0.625rem !important;
  }

  .mobile-token-card {
    padding: var(--space-sm) !important;
  }

  .mobile-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-xs) !important;
  }

  .mobile-token-name {
    font-size: 0.875rem !important;
  }

  .bo-badge-status {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .mobile-card-info {
    grid-template-columns: 1fr !important;
  }

  .mobile-info-item {
    padding: var(--space-xs) 0 !important;
  }

  .bo-btn-mobile {
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: 0.8125rem !important;
  }

  .bo-btn-mobile .btn-icon {
    font-size: 1rem !important;
  }
}

/* === FIX PARA MODAL EN MÓVIL === */
@media (max-width: 768px) {
  .bo-modal.show {
    padding: var(--mobile-padding-sm) !important;
  }

  .bo-modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .bo-modal-content {
    border-radius: var(--radius-md) !important;
  }

  .bo-modal-header,
  .bo-modal-body,
  .bo-modal-footer {
    padding: var(--mobile-padding) !important;
  }

  .bo-modal-header h3 {
    font-size: 1.125rem !important;
  }

  .bo-modal-body p {
    font-size: 0.9375rem !important;
  }

  .bo-modal-footer {
    flex-direction: column-reverse !important;
    gap: var(--space-sm) !important;
  }

  .bo-modal-footer .bo-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* === FIX PARA BOTONES === */
@media (max-width: 1024px) {
  .bo-btn,
  .btn {
    min-height: var(--touch-target-min) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1) !important;
  }

  .bo-btn-icon {
    min-width: var(--touch-target-min) !important;
    min-height: var(--touch-target-min) !important;
  }

  /* Feedback táctil */
  .bo-btn:active,
  .btn:active,
  .mobile-token-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
}

/* === FIX PARA BADGES === */
@media (max-width: 768px) {
  .bo-badge,
  .bo-badge-status,
  .status-badge {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .status-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .bo-badge-category {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.7rem !important;
  }
}

/* === FIX PARA USAGE PROGRESS === */
@media (max-width: 768px) {
  .usage-container {
    min-width: 100% !important;
  }

  .usage-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }

  .usage-label {
    font-size: 0.7rem !important;
  }

  .usage-percentage {
    font-size: 0.8125rem !important;
  }

  .usage-progress {
    height: 6px !important;
    margin-bottom: 0.375rem !important;
  }

  .usage-info {
    font-size: 0.75rem !important;
  }
}

/* === FIX PARA ANIMACIONES === */
@media (max-width: 1024px) {
  .mobile-token-card {
    animation: fadeInUpMobile 0.3s ease forwards !important;
  }

  @keyframes fadeInUpMobile {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Delay escalonado */
  .mobile-token-card:nth-child(1) {
    animation-delay: 0.05s !important;
  }

  .mobile-token-card:nth-child(2) {
    animation-delay: 0.1s !important;
  }

  .mobile-token-card:nth-child(3) {
    animation-delay: 0.15s !important;
  }

  .mobile-token-card:nth-child(4) {
    animation-delay: 0.2s !important;
  }

  .mobile-token-card:nth-child(5) {
    animation-delay: 0.25s !important;
  }
}

/* === FIX PARA SCROLL === */
@media (max-width: 1024px) {
  .tokens-container {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-cards-view {
    overflow-x: hidden !important;
  }
}

/* === FIX PARA CATEGORÍAS === */
@media (max-width: 768px) {
  .categories-list {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  .bo-badge-category,
  .bo-badge-more,
  .bo-badge-no-restriction {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}

/* === MEJORAS DE ACCESIBILIDAD === */
@media (max-width: 1024px) {
  /* Focus visible mejorado */
  .bo-btn:focus-visible,
  .btn:focus-visible,
  .mobile-token-value:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
  }

  /* Mejorar contraste de textos */
  .mobile-token-name,
  .mobile-info-label {
    color: var(--text-primary) !important;
  }

  .mobile-card-description,
  .mobile-date-value .date-text {
    color: var(--text-secondary) !important;
  }
}

/* === REDUCIR MOVIMIENTO === */
@media (prefers-reduced-motion: reduce) {
  .mobile-token-card,
  .bo-btn,
  .btn {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* === DARK MODE OPTIMIZATIONS === */
@media (max-width: 1024px) {
  [data-theme="dark"] .mobile-token-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9)) !important;
  }

  [data-theme="dark"] .mobile-card-description,
  [data-theme="dark"] .mobile-created-by {
    background: rgba(15, 23, 42, 0.5) !important;
  }

  [data-theme="light"] .mobile-token-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98)) !important;
  }

  [data-theme="light"] .mobile-card-description,
  [data-theme="light"] .mobile-created-by {
    background: rgba(241, 245, 249, 0.8) !important;
  }
}

/* === LANDSCAPE MODE === */
@media (max-width: 1024px) and (orientation: landscape) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .mobile-card-info {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mobile-card-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mobile-card-actions .bo-btn-danger {
    grid-column: 1 / -1 !important;
  }
}

/* === SAFE AREA INSETS === */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 1024px) {
    .tokens-container {
      padding-bottom: calc(var(--mobile-padding) + env(safe-area-inset-bottom)) !important;
    }

    .bo-modal.show {
      padding-bottom: calc(var(--mobile-padding-sm) + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* === FIX CRÍTICO: ASEGURAR QUE EL CONTENIDO SEA VISIBLE === */
@media (max-width: 1024px) {
  /* Forzar que el main content tenga el ancho completo */
  .backoffice-main {
    width: 100% !important;
    margin-left: 0 !important;
    max-width: 100vw !important;
  }

  /* Asegurar que el contenido no se solape con el sidebar */
  .backoffice-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--mobile-padding) !important;
    overflow-x: hidden !important;
  }

  /* Prevenir que el sidebar empuje el contenido */
  .backoffice-layout {
    overflow-x: hidden !important;
  }
}

/* === MEJORAS DE RENDIMIENTO === */
@media (max-width: 1024px) {
  /* Hardware acceleration */
  .mobile-token-card,
  .bo-btn,
  .btn {
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* Optimizar rendering */
  .mobile-cards-view {
    contain: layout style paint !important;
  }

  .mobile-token-card {
    contain: layout style !important;
  }
}