/* ============================================================
   WTBOT ADMIN - CORRECCIONES MÓVIL
   Estilos específicos para arreglar problemas en dispositivos móviles
   ============================================================ */

/* 1. BOTONES DE FORMATO - Más pequeños y en grid */
.format-toolbar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding: 8px !important;
  background: var(--bg-tabs) !important;
  border-radius: 8px 8px 0 0 !important;
}

.format-btn {
  padding: 10px 8px !important;
  font-size: 14px !important;
  min-height: 40px !important;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  transition: all 0.2s !important;
}

.format-btn:active {
  transform: scale(0.95) !important;
  background: var(--btn-hover) !important;
}

/* 2. BOTONES LARGOS - Prevenir overflow */
button {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

button[style*="width:100%"] {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* 3. PREVIEW DE IMÁGENES EN MODAL - Limitar tamaño */
#images-preview img,
.modal-content img {
  max-width: 100% !important;
  max-height: 150px !important;
  object-fit: contain !important;
}

#images-preview {
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* 4. LISTA DE DESTINATARIOS - Solo en móvil */
@media (max-width: 768px) {

  .contacts-list,
  .groups-list {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 10px !important;
  }

  .contacts-list label,
  .groups-list label {
    display: block !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 6px !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
  }

  .contacts-list input[type="checkbox"],
  .groups-list input[type="checkbox"] {
    margin-right: 10px !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
    width: 18px !important;
    height: 18px !important;
  }

  .contacts-list span,
  .groups-list span {
    display: inline !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    vertical-align: middle !important;
  }

  /* FORZAR separación de checkboxes y texto */
  .contacts-list label::after,
  .groups-list label::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }

  /* Cada checkbox + texto en su propia línea */
  .contacts-list label input,
  .groups-list label input {
    float: none !important;
    display: inline-block !important;
  }

  .contacts-list label span,
  .groups-list label span {
    display: inline !important;
    margin-left: 5px !important;
  }
}

/* 5. Toolbars de destinatarios (antes: div[style*="display:flex"] rompía layouts en toda la app) */
.recipient-actions {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* 6. MODALES - Mejor espaciado en móvil */
@media (max-width: 640px) {
  .modal {
    padding: 0.5rem !important;
  }

  .modal-content {
    max-height: 95vh !important;
    margin: 0 !important;
  }

  .modal-header {
    padding: 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-footer {
    padding: 1rem !important;
    flex-direction: column !important;
  }

  .modal-footer button {
    width: 100% !important;
  }
}

/* 7. INPUTS Y SELECTS - Mejor tamaño táctil */
@media (max-width: 640px) {

  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="file"],
  input[type="search"],
  textarea {
    font-size: 16px !important;
    /* Previene zoom en iOS */
    padding: 12px !important;
  }

  select:not([multiple]) {
    font-size: 16px !important;
    padding: 12px 2.85rem 12px 12px !important;
  }

  button {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
}

/* 8. TABS - Scroll horizontal suave */
@media (max-width: 640px) {
  .tabs {
    gap: 6px !important;
    padding-bottom: 8px !important;
  }

  .tabs button {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* 9. LISTAS - Mejor formato en móvil */
@media (max-width: 640px) {
  ul li {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  ul li strong {
    margin-bottom: 8px !important;
  }

  ul li .actions {
    width: 100% !important;
    margin-top: 8px !important;
  }

  ul li .actions button {
    flex: 1 !important;
  }
}

/* 10. FORMS - Stack vertical en móvil */
@media (max-width: 640px) {
  .form-inline {
    flex-direction: column !important;
  }

  .form-inline input,
  .form-inline select,
  .form-inline button {
    width: 100% !important;
  }
}

/* 11. PAQUETES GUARDADOS - Prevenir overflow */
div[style*="Paquetes"] button {
  font-size: 13px !important;
  padding: 10px 12px !important;
}

/* 12. BÚSQUEDA - Ancho completo en móvil */
@media (max-width: 640px) {

  input[placeholder*="Buscar"],
  input[placeholder*="buscar"] {
    width: 100% !important;
  }
}

/* 13. GRID DE CONTACTOS/GRUPOS - ELIMINADO
   La regla anterior rompía el grid de 2 columnas en desktop.
   El grid de destinatarios ahora se maneja con JS inline styles. */


/* 14. BOTONES DE SINCRONIZAR/LIMPIAR - Stack vertical */
@media (max-width: 640px) {

  button[style*="Sincronizar"],
  button[style*="Limpiar"] {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
}

/* 15. FOOTER - Mejor espaciado en móvil */
@media (max-width: 640px) {
  .app-footer {
    padding: 2rem 0.75rem !important;
    font-size: 0.75rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .footer-separator {
    display: none !important;
  }
}

/* 16. Diálogos wtAlert/wtConfirm: refuerzo (última hoja + IDs; anula body>* y .modal genérico) */
#modal-wt-alert.modal.wt-native-dialog,
#modal-wt-confirm.modal.wt-native-dialog,
#modal-wt-prompt.modal.wt-native-dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
  z-index: 10060 !important;
  background-color: var(--bg-modal-overlay) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  align-items: center !important;
  justify-content: center !important;
}

#modal-wt-alert .wt-dialog-main-row,
#modal-wt-confirm .wt-dialog-main-row,
#modal-wt-prompt .wt-dialog-main-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 1rem 1.25rem !important;
  align-items: start !important;
}

#modal-wt-alert .modal-content.wt-dialog-card,
#modal-wt-confirm .modal-content.wt-dialog-card,
#modal-wt-prompt .modal-content.wt-dialog-card {
  padding: 1.5rem 1.65rem 1.4rem !important;
  max-width: min(100%, 480px) !important;
  box-sizing: border-box !important;
}

/* Ayuda / términos / descargo: listas con viñetas personalizadas (no regla genérica ul li) */
@media (max-width: 640px) {
  .legal-doc .legal-doc-custom-list li {
    padding: 4px 0 !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }
}