/* ==========================
   Ajustes generales para móviles y tabletas
   ========================== */
@media (max-width: 1024px) {
  /* Contenedor principal */
  body, html {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
  }

  /* Ajuste de cards, modales y tablas */
  .wrap, main, .card, .modal-content, table {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* Grid se apila verticalmente */
  .form-grid, .grid-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Menú lateral se vuelve relativo */
  .menu-lateral {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Sección principal se adapta al contenido */
  .contenido-principal {
    min-height: auto !important;
    height: auto !important;
  }

  /* Footer relativo */
  footer {
    position: relative !important;
    bottom: auto !important;
  }

  /* Tabla responsive */
  .table-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto;
  }

  table {
    width: 100% !important;
    min-width: 0;
    border-collapse: collapse;
  }

  th, td {
    font-size: 0.8rem !important;
    padding: 6px !important;
    text-align: left;
    vertical-align: middle;
  }

  td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* Más espacio para nombres largos */
  }

  /* Modal optimizado para móviles y tabletas */
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 12px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
  }

  /* Ajustes para tarjetas (modo "mobile") */
  @media (max-width: 768px) {
    thead {
      display: none; /* ocultar cabecera en móvil */
    }
    tbody tr {
      display: block;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 8px;
      background: #fff;
    }
    tbody tr td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      border: none;
      border-bottom: 1px solid #f0f0f0;
    }
    tbody tr td:last-child {
      border-bottom: none;
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }
    tbody tr td::before {
      content: attr(data-label);
      font-weight: bold;
      color: var(--azul-fuerte);
      flex: 1;
      text-align: left;
    }
  }
}


/* ==========================
   Blindaje vertical para iframe y menú en móviles
   ========================== */
@media (max-width: 768px) {
  body {
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  .sidebar {
    width: 100% !important;
    position: relative !important;
    z-index: 10;
  }

  .main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 220px) !important; /* Ajusta según alto real del menú */
    overflow-y: auto !important;
  }

  .content {
    flex: 1 !important;
    min-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    padding: 10px;
  }

  #iframeModulo {
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - 220px) !important;
    border: none !important;
    display: block !important;
  }
}


@media (max-width: 768px) {
  #promoFlotante {
    top: 40 !important;          /* vuelve a fijarlo arriba */
    bottom: auto !important;    /* evita que se pegue al pie */
    width: 100% !important;     /* ocupa todo el ancho */
    height: 165px !important;   /* dale un poco más de altura */
    max-height: none !important;
  }
}