/* ==========================================================================
   RESPONSIVE.CSS - Estilos responsivos para la extranet Halter
   Usa media queries para adaptar la visualización a distintos tamaños
   ========================================================================== */

/* Ocultar el menú hamburguesa por defecto en escritorio */
.mobile-menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

/* Breakpoints de referencia
   --------------------------
   sm: 576px   (móviles pequeños)
   md: 768px   (tablets)
   lg: 992px   (laptops)
   xl: 1200px  (pantallas grandes)
*/

/* 🌐 Estilos para tablets y laptops pequeños */
@media (max-width: 991.98px) {

  .sidebar {
    display: none;
  }

  .main-container {
    flex-direction: column;
  }

  .content {
    padding: var(--espaciado-md);
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
  }

  .header__usuario {
    align-self: flex-end;
    font-size: var(--tamano-chico);
    text-align: right;
    width: 100%;
  }

  .card {
    padding: var(--espaciado-sm);
  }

  table th,
  table td {
    font-size: var(--tamano-chico);
    padding: 6px;
  }

  .btn {
    padding: var(--espaciado-xs) var(--espaciado-sm);
    font-size: var(--tamano-chico);
  }

  .badge {
    font-size: 12px;
    padding: 2px 6px;
  }

  .header__logo img {
    height: 36px;
  }

  /* Botón menú hamburguesa */
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    padding: var(--espaciado-xs);
    margin-left: auto;
  }

  .mobile-menu-toggle:focus {
    outline: 2px solid var(--color-primario-dark);
  }

  /* Menú hamburguesa en móviles */
  .mobile-menu {
    display: none;
    background-color: var(--color-secundario);
    padding: 0 var(--espaciado-md);
  }

  .mobile-menu.open {
    display: block;
    padding: var(--espaciado-md);
  }

  .mobile-menu a {
    display: block;
    color: #fff;
    padding: var(--espaciado-xs) 0;
    text-decoration: none;
  }

  .mobile-menu ul,
  .mobile-menu li,
  .sidebar ul,
  .sidebar li {
    list-style: none !important;
    margin: 0;
    padding: 0;
  }
}

/* 📱 Teléfonos */
@media (max-width: 767.98px) {

  .header__logo img {
    height: 32px;
  }

  .form-group,
  .form-row {
    display: block;
    width: 100%;
  }

  .form-group label,
  .form-row label {
    margin-bottom: var(--espaciado-xs);
  }

  .btn,
  input[type="submit"] {
    width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
    display: block;
  }

  .header__usuario {
    font-size: 13px;
  }
}

/* 📺 Pantallas grandes (opcional para optimización visual) */
@media (min-width: 1200px) {
  .content {
    max-width: 1200px;
    margin: 0 auto;
  }
}