/* ═══════════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE - MÓVIL (max-width: 768px)
   Adaptaciones para tablets y móviles
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Contenedor principal */
    .whatsapp-container {
        position: relative;
        overflow: hidden;
    }
    
    /* Sidebar: ocupa toda la pantalla en móvil */
    .sidebar {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        border-right: none;
    }
    
    /* Cuando hay un chat activo, ocultar el sidebar */
    .sidebar.hide-mobile {
        transform: translateX(-100%);
    }
    
    /* Chat area: ocupa toda la pantalla */
    .chat-area {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 5;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    
    /* Cuando hay un chat activo, mostrar el chat area */
    .chat-area.show-mobile {
        transform: translateX(0);
        z-index: 15;
    }
    
    /* Agregar botón de volver en el header del chat (móvil) */
    .chat-header {
        position: relative;
    }
    
    .chat-header .back-btn-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #aebac1;
        font-size: 24px;
        padding: 8px;
        cursor: pointer;
        margin-right: 8px;
        transition: color 0.2s;
    }
    
    .chat-header .back-btn-mobile:active {
        color: #00a884;
    }
    
    /* Welcome screen: ocultar en móvil por defecto */
    .welcome-screen {
        display: none;
    }
    
    /* Ajustar mensajes para móvil */
    .message {
        max-width: 80%;
    }
    
    .message-input {
        gap: 8px;
        padding: 6px 12px;
    }
    
    /* Modales: tamaño completo en móvil */
    .modal {
        min-width: 95vw;
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .modal-large {
        min-width: 95vw;
    }
    
    .modal-body {
        max-height: 70vh;
    }
    
    /* Ajustar header actions */
    .header-actions {
        gap: 4px;
    }
    
    .action-btn {
        font-size: 18px;
        padding: 6px;
    }
    
    /* Ajustar tamaño de avatares */
    .user-avatar,
    .contact-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .chat-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    /* Ajustar fuentes */
    .chat-name {
        font-size: 15px;
    }
    
    .chat-last-message {
        font-size: 13px;
    }
    
    .contact-details h3 {
        font-size: 15px;
    }
    
    /* Ajustar search box */
    .search-container {
        padding: 8px;
    }
    
    /* Ajustar padding general */
    .sidebar-header {
        padding: 8px 12px;
    }
    
    .chat-header {
        padding: 8px 12px;
    }
    
    .chat-item {
        padding: 10px 12px;
    }
    
    /* Ajustar notificaciones */
    .notifications {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .notification {
        min-width: auto;
        width: 100%;
    }
    
    /* Lista de contactos en envío masivo */
    .contacts-list {
        max-height: 200px;
    }
    
    /* Ajustar tabs */
    .tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Ajustar form groups */
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Evita zoom automático en iOS */
    }
    
    /* Ajustar botones */
    .btn {
        padding: 12px 16px;
        font-size: 15px;
    }
    
    /* Ajustar preview section */
    .message-preview {
        max-width: 100%;
    }
}