/* RedAI-Web – móvil (max-width: 479px) – solo móviles pequeños */
@media (max-width: 479px) {
  /* ===== CONTAINER Y ESPACIADO BASE ===== */
  .container { 
    padding: 0 0.75rem; 
    max-width: 100%;
  }

  /* Header en header.css @media (max-width: 1023px) */

  /* Contadores - Solo iconos y números en móvil */
  .counter-group { 
    margin-right: 4px;
    gap: 0;
  }
  
  .counter-group .counter-chip { 
    padding: 4px 6px; 
    font-size: 11px; 
    gap: 3px;
  }
  
  .counter-group .counter-chip .label { 
    display: none; 
  }
  
  .counter-group .counter-chip i {
    font-size: 12px;
  }
  
  .counter-group .divider {
    height: 14px;
  }
  
  /* Mini-Config en móvil */
  .mini-config-toggle {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  .mini-config-toggle span {
    display: none;
  }
  
  .mini-config-dropdown {
    right: 0;
    left: 0;
    min-width: auto;
    max-width: 100vw;
    width: calc(100vw - 1.5rem);
    margin: 0 0.75rem;
  }
  
  /* User menu en móvil */
  .user-menu-toggle {
    padding: 6px 8px;
    gap: 6px;
  }
  
  .user-menu-toggle span {
    display: none;
  }
  
  .user-menu-toggle .user-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
  }
  
  .user-dropdown {
    right: 0.75rem;
    left: 0.75rem;
    width: calc(100vw - 1.5rem);
    min-width: auto;
  }
  
  /* Notificaciones en móvil */
  .notifications {
    margin-left: 4px;
  }
  
  .notifications-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
  }
  
  .notifications-dropdown {
    right: 0.75rem;
    left: 0.75rem;
    width: calc(100vw - 1.5rem);
    min-width: auto;
    max-width: none;
    max-height: 80vh;
  }
  
  /* Auth buttons */
  .auth-buttons .btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .auth-buttons .btn span {
    display: none;
  }
  
  .nav-link { 
    padding: 12px 16px; 
    font-size: 15px; 
    width: 100%;
    justify-content: flex-start;
  }
  
  .btn { 
    min-height: 44px; 
    min-width: 44px; 
    padding: 10px 16px; 
    font-size: 14px;
  }
  
  .btn i + span {
    margin-left: 6px;
  }

  /* ===== FOOTER RESPONSIVE ===== */
  .footer-container-simple {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem 0.75rem;
    grid-template-columns: 1fr;
  }
  
  .footer-links-inline { 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 0.75rem; 
  }
  
  .footer-left, 
  .footer-social { 
    justify-content: center; 
  }
  
  .footer-social {
    margin-top: 0.5rem;
  }

  /* ===== SIDEBAR RESPONSIVE ===== */
  .sidebar { 
    width: 85vw; 
    max-width: 320px;
    left: -85vw; 
  }
  
  .sidebar-toggle { 
    top: 12px !important; 
    left: 12px !important; 
    min-width: 32px !important; 
    min-height: 32px !important; 
    padding: 6px !important; 
    /* Debajo del backdrop/panel del header en móvil (9998/9999); evita tapar botones del sheet */
    z-index: 8500 !important;
  }
  
  .sidebar-toggle i { 
    font-size: 12px !important; 
  }
  
  .sidebar-overlay {
    z-index: 99998;
  }
  
  /* Asegurar que las secciones de tokens y navegación sean visibles */
  .sidebar-tokens-section,
  .sidebar-nav-section {
    display: block !important;
  }
  
  /* Optimizar tokens en móvil */
  .sidebar-tokens {
    padding: 10px;
    gap: 8px;
  }
  
  .sidebar-token-item {
    min-height: 48px;
    padding: 12px;
  }
  
  .sidebar-token-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .sidebar-token-value {
    font-size: 16px;
  }
  
  /* Optimizar navegación en móvil */
  .sidebar-nav-section .sidebar-btn {
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }
  
  /* Forzar visibilidad de todos los iconos Font Awesome en los botones del sidebar móvil */
  .sidebar-nav-mobile i,
  .sidebar-nav-mobile i.fas,
  .sidebar-nav-mobile i.far,
  .sidebar-nav-mobile i.fab,
  .sidebar-nav-section .sidebar-btn i,
  .sidebar-nav-section .sidebar-btn i.fas,
  .sidebar-nav-section .sidebar-btn i.far,
  .sidebar-nav-section .sidebar-btn i.fab {
    display: inline-block !important;       /* asegurar que se vea */
    color: #7c3aed !important;              /* morado consistente */
    font-size: 18px !important;             /* tamaño decente en móvil */
    width: 24px !important;                 /* ancho fijo para centrar */
    text-align: center !important;          /* centrado */
    opacity: 1 !important;                  /* completamente visible */
    visibility: visible !important;         /* visible sin dudas */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;            /* solid icons */
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1 !important;
  }
  
  /* Asegurar que los botones móviles estén visibles con flex en móvil */
  .sidebar-nav-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  /* Asegurar que el contenedor de botones esté visible en móvil */
  .sidebar-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ===== PAGE HEADERS Y ACTIONS ===== */
  /* Nota: Las clases Tailwind ahora manejan flex-direction, gap, width, etc. */
  /* Mantenemos solo estilos específicos que no tienen equivalente en Tailwind */
  
  .page-header h1 { 
    line-height: 1.3;
  }

  /* ===== GRIDS Y LAYOUTS ===== */
  /* Nota: Los grids ahora usan clases Tailwind (grid-cols-1 md:grid-cols-2, etc.) */
  /* Mantenemos solo estilos específicos del diseño */
  
  .card { 
    margin-bottom: 0.75rem; 
  }

  /* ===== MODALES Y DROPDOWNS ===== */
  /* Nota: Los modales ahora usan clases Tailwind para width, padding, etc. */
  .modal,
  .sidebar-changelog-modal {
    padding: 0.75rem;
  }
  
  .modal-content,
  .sidebar-changelog-container {
    border-radius: 16px 16px 0 0;
  }
  
  .modal-body,
  .sidebar-changelog-body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
  }

  /* ===== FORMULARIOS ===== */
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-label {
    font-size: 14px;
    margin-bottom: 0.5rem;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* Previene zoom en iOS */
    min-height: 44px;
  }
  
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  
  /* Tabs en móvil */
  .cc-tabs,
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0.75rem;
    gap: 8px;
  }
  
  .cc-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }
  
  .cc-tab,
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* ===== TIPOGRAFÍA ===== */
  /* Nota: Los tamaños de texto ahora se manejan con clases Tailwind (text-sm, text-base, etc.) */
  /* Mantenemos solo line-height específicos si es necesario */
  
  p, span, div {
    line-height: 1.6;
  }

  /* ===== ESPACIADO ===== */
  /* Nota: El padding ahora se maneja con clases Tailwind (p-4, py-2, etc.) */
  /* Mantenemos solo estilos específicos del diseño */

  /* ===== TOOLTIPS - Deshabilitar en móvil ===== */
  [title]:hover::after,
  [title]:hover::before {
    display: none;
  }

  /* ===== ADMIN ===== */
  .admin-drawer .drawer-body {
    grid-template-columns: 1fr;
  }
  
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .admin-table table {
    min-width: 600px;
  }

  /* ===== CHARACTER CARDS ===== */
  .character-card,
  .user-card {
    min-width: 0;
    width: 100%;
  }
  
  .character-card .card-body,
  .user-card .card-body {
    padding: 1rem;
  }

  /* ===== UTILIDADES ===== */
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  .text-center-mobile {
    text-align: center;
  }
  
  .full-width-mobile {
    width: 100% !important;
  }
}