/* ============================================================
   MASTER.CSS — CRM Outreach Pro
   Responsive + Variables globales + Temas
   ============================================================ */

/* ============================================================
   0. VARIABLES GLOBALES (design tokens)
   ============================================================ */
:root {
    /* ---- BRAND COLORS ---- */
    --brand-primary:          #25d366;      /* Verde WhatsApp principal */
    --brand-primary-hover:    #128c7e;      /* Verde oscuro al hacer hover */
    --brand-primary-light:    #dcfce7;      /* Verde muy claro (fondos) */
    --brand-primary-alpha:    rgba(37, 211, 102, 0.1);
    --brand-primary-alpha-20: rgba(37, 211, 102, 0.2);

    /* ---- SIDEBAR ---- */
    --sidebar-bg:             #111b21;      /* Fondo del sidebar */
    --sidebar-bg-hover:       #202c33;      /* Fondo al hacer hover */
    --sidebar-text:           #d1d5db;      /* Texto del sidebar */
    --sidebar-text-hover:     #25d366;      /* Texto activo */
    --sidebar-border:         #374151;      /* Bordes internos */

    /* ---- SUPERFICIES ---- */
    --surface-bg:             #ffffff;      /* Fondo principal blanco */
    --surface-bg-alt:         #f9fafb;      /* Fondo secundario (gray-50) */
    --surface-bg-tertiary:    #f3f4f6;      /* Fondo terciario (gray-100) */
    --surface-border:         #e5e7eb;      /* Bordes (gray-200) */
    --surface-border-strong:  #d1d5db;      /* Bordes más marcados */

    /* ---- TEXTOS ---- */
    --text-primary:           #111827;      /* Texto principal (gray-900) */
    --text-secondary:         #374151;      /* Texto secundario (gray-700) */
    --text-tertiary:          #6b7280;      /* Texto terciario (gray-500) */
    --text-muted:             #9ca3af;      /* Texto deshabilitado (gray-400) */
    --text-inverse:           #ffffff;      /* Texto sobre fondo oscuro */

    /* ---- ESTADOS (status colors) ---- */
    --status-new-bg:          #f3f4f6;
    --status-new-text:        #4b5563;
    --status-sent1-bg:        #dbeafe;
    --status-sent1-text:      #1d4ed8;
    --status-sent2-bg:        #bfdbfe;
    --status-sent2-text:      #1e40af;
    --status-replied-bg:      #dcfce7;
    --status-replied-text:    #15803d;
    --status-meeting-bg:      #ede9fe;
    --status-meeting-text:    #6d28d9;
    --status-closed-bg:       #d1fae5;
    --status-closed-text:     #047857;
    --status-optout-bg:       #fee2e2;
    --status-optout-text:     #b91c1c;

    /* ---- FEEDBACK ---- */
    --success-bg:             #dcfce7;
    --success-text:           #15803d;
    --success-border:         #86efac;
    --warning-bg:             #fef3c7;
    --warning-text:           #b45309;
    --warning-border:         #fcd34d;
    --danger-bg:              #fee2e2;
    --danger-text:            #b91c1c;
    --danger-border:          #fca5a5;
    --info-bg:                #dbeafe;
    --info-text:              #1d4ed8;
    --info-border:            #93c5fd;

    /* ---- TIPOGRAFÍA ---- */
    --font-base:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:              ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ---- TAMAÑOS DE FUENTE (escala móvil-aware) ---- */
    --fs-xs:                  0.75rem;      /* 12px */
    --fs-sm:                  0.875rem;     /* 14px */
    --fs-base:                1rem;         /* 16px */
    --fs-lg:                  1.125rem;     /* 18px */
    --fs-xl:                  1.25rem;      /* 20px */
    --fs-2xl:                 1.5rem;       /* 24px */

    /* ---- BORDES ---- */
    --radius-sm:              4px;
    --radius-md:              8px;
    --radius-lg:              12px;
    --radius-xl:              16px;
    --radius-full:            9999px;

    /* ---- SOMBRAS ---- */
    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:              0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-sidebar:         0 -4px 12px rgba(0, 0, 0, 0.1);

    /* ---- ESPACIADO ---- */
    --sp-1:                   4px;
    --sp-2:                   8px;
    --sp-3:                   12px;
    --sp-4:                   16px;
    --sp-6:                   24px;

    /* ---- LAYOUT ---- */
    --sidebar-width-mobile:   64px;
    --sidebar-width-tablet:   80px;
    --sidebar-width-desktop:  256px;
    --kpi-grid-mobile:        3;
    --kpi-grid-desktop:       6;
}

/* ============================================================
   1. RESET Y BASE
   ============================================================ */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overscroll-behavior-y: none;
    font-family: var(--font-base);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-primary);
    background: var(--surface-bg-alt);
}

/* Scrollbar personalizado (solo desktop) */
@media (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: var(--radius-sm);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* Ocultar scrollbar en móvil/tablet */
@media (max-width: 1023px) {
    ::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================
   2. SIDEBAR RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    body > div.flex.h-screen {
        flex-direction: column !important;
    }

    body aside {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--sidebar-width-mobile) !important;
        flex-direction: row !important;
        z-index: 100 !important;
        background: var(--sidebar-bg) !important;
        border-top: 1px solid var(--sidebar-border);
        box-shadow: var(--shadow-sidebar);
        padding: 0 !important;
    }

    body aside > div:first-child {
        display: none !important;
    }

    body aside nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    body aside nav a {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        padding: var(--sp-2) var(--sp-1) !important;
        border-radius: var(--radius-md) !important;
        flex: 1 !important;
        max-width: 80px !important;
        text-align: center !important;
        min-width: 0 !important;
        color: var(--sidebar-text) !important;
    }

    body aside nav a i {
        font-size: var(--fs-lg) !important;
        width: auto !important;
        margin: 0 !important;
    }

    body aside nav a span {
        display: block !important;
        font-size: 9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Logout como botón flotante */
    body aside > div:last-child {
        position: fixed !important;
        top: var(--sp-3) !important;
        right: var(--sp-3) !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        z-index: 110 !important;
    }

    body aside > div:last-child a {
        background: rgba(239, 68, 68, 0.15) !important;
        backdrop-filter: blur(8px);
        border-radius: var(--radius-full) !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    body aside > div:last-child a span {
        display: none !important;
    }

    body aside > div:last-child a i {
        font-size: var(--fs-base) !important;
    }

 
}

/* ============================================================
   3. HEADERS Y TOOLBARS
   ============================================================ */
@media (max-width: 767px) {
    .p-6.border-b,
    header.bg-white.border-b {
        padding: var(--sp-3) var(--sp-4) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--sp-3) !important;
        background: var(--surface-bg-alt);
        border-color: var(--surface-border);
    }

    h1.text-2xl {
        font-size: var(--fs-xl) !important;
        line-height: 1.75rem !important;
        color: var(--text-primary);
    }

    h1.text-2xl + p {
        font-size: var(--fs-xs) !important;
        color: var(--text-tertiary);
    }

    .p-6.border-b button,
    header.bg-white button,
    header.bg-white a {
        padding: var(--sp-2) var(--sp-3) !important;
        font-size: var(--fs-xs) !important;
    }
}

/* ============================================================
   4. KPI CARDS (Dashboard)
   ============================================================ */
@media (max-width: 767px) {
    .grid.grid-cols-2.md\:grid-cols-6 {
        grid-template-columns: repeat(var(--kpi-grid-mobile), minmax(0, 1fr)) !important;
        gap: var(--sp-2) !important;
        padding: var(--sp-3) !important;
    }

    .grid.grid-cols-2.md\:grid-cols-6 > div {
        padding: var(--sp-3) !important;
        background: var(--surface-bg);
        border-color: var(--surface-border);
    }

    .grid.grid-cols-2.md\:grid-cols-6 p.text-sm {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        color: var(--text-tertiary);
    }

    .grid.grid-cols-2.md\:grid-cols-6 p.text-2xl {
        font-size: var(--fs-xl) !important;
        line-height: 1.5rem !important;
        color: var(--text-primary);
    }
}

/* ============================================================
   5. ÁREA DE CHAT
   ============================================================ */
@media (max-width: 767px) {
    .flex.flex-1.overflow-hidden:has(> div.w-full.md\:w-80) {
        flex-direction: column !important;
    }

    .w-full.md\:w-80.lg\:w-96.border-r {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--surface-border) !important;
    }

    .w-full.md\:w-80.lg\:w-96.border-r + .flex-1 {
        height: 100% !important;
        max-height: 100% !important;
    }

    .max-w-\[75\%\] {
        max-width: 88% !important;
    }

    form.bg-\[\#f0f2f5\] {
        padding: var(--sp-2) !important;
        background: var(--surface-bg-tertiary) !important;
    }

    form.bg-\[\#f0f2f5\] input {
        padding: 10px 14px !important;
        font-size: var(--fs-sm) !important;
    }

    form.bg-\[\#f0f2f5\] button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: var(--brand-primary);
    }

    .bg-\[\#f0f2f5\].p-3.border-b {
        padding: var(--sp-2) var(--sp-3) !important;
    }

    select.text-xs.border.border-gray-300.rounded.px-2.py-1 {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
}

/* ============================================================
   6. TABLAS
   ============================================================ */
@media (max-width: 767px) {
    table.w-full.text-left.border-collapse {
        min-width: 700px;
    }

    table th,
    table td {
        padding: var(--sp-2) !important;
        font-size: var(--fs-xs) !important;
        border-color: var(--surface-border);
    }

    table thead th {
        font-size: 10px !important;
        background: var(--surface-bg-tertiary);
        color: var(--text-tertiary);
    }

    table th:nth-child(5),
    table td:nth-child(5) {
        display: none !important;
    }
}

/* ============================================================
   7. MODALES
   ============================================================ */
@media (max-width: 767px) {
    .fixed.inset-0.z-50.flex.items-center.justify-center {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .fixed.inset-0.z-50 > div {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        margin: 0 !important;
        background: var(--surface-bg);
    }

    .grid.grid-cols-2,
    .grid.grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Evitar zoom en iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="color"],
    textarea,
    select {
        font-size: var(--fs-base) !important;
        padding: 10px var(--sp-3) !important;
        border-color: var(--surface-border);
        color: var(--text-primary);
        background: var(--surface-bg);
    }

    input.text-xs,
    select.text-xs {
        font-size: var(--fs-xs) !important;
        padding: 6px var(--sp-2) !important;
    }

    .bg-\[\#25d366\].text-white.px-6,
    .bg-\[\#25d366\].text-white.px-4 {
        padding: var(--sp-3) var(--sp-6) !important;
        font-size: var(--fs-sm) !important;
        background: var(--brand-primary) !important;
    }
}

/* ============================================================
   8. DRAWER
   ============================================================ */
@media (max-width: 767px) {
    .absolute.inset-y-0.right-0.max-w-full.flex > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    .p-6.space-y-6.flex-1 {
        padding: var(--sp-3) !important;
        gap: var(--sp-4) !important;
    }

    .bg-blue-50.border.border-blue-200,
    .bg-purple-50.border.border-purple-200,
    .bg-yellow-50.border.border-yellow-200,
    .bg-green-50.border.border-green-200,
    .bg-amber-50.border.border-amber-200 {
        padding: var(--sp-3) !important;
    }

    /* Tabs horizontales: scroll */
    .flex.gap-2.border-b {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1px;
        border-color: var(--surface-border);
    }

    .flex.gap-2.border-b::-webkit-scrollbar {
        display: none !important;
    }

    .flex.gap-2.border-b > button {
        flex-shrink: 0 !important;
        padding: var(--sp-2) var(--sp-3) !important;
        font-size: var(--fs-xs) !important;
    }
}

/* ============================================================
   9. EDITOR DRAG & DROP
   ============================================================ */
@media (max-width: 767px) {
    .border-2.rounded-lg.p-3 > .grid.grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        margin-left: 0 !important;
        margin-top: var(--sp-2) !important;
        gap: var(--sp-2) !important;
    }

    .ml-8 {
        margin-left: 0 !important;
    }
}

/* ============================================================
   10. CALENDARIO PÚBLICO
   ============================================================ */
@media (max-width: 767px) {
    .cal-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .cal-header {
        padding: 20px var(--sp-4) !important;
    }

    .cal-header h1 {
        font-size: 22px !important;
    }

    .cal-body {
        grid-template-columns: 1fr !important;
    }

    .cal-types {
        border-right: none !important;
        border-bottom: 1px solid var(--surface-border) !important;
        padding: var(--sp-4) !important;
        display: flex !important;
        gap: var(--sp-2) !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .cal-types::-webkit-scrollbar {
        display: none !important;
    }

    .cal-type {
        flex-shrink: 0 !important;
        min-width: 200px !important;
        margin-bottom: 0 !important;
        padding: var(--sp-3) !important;
    }

    .cal-days {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--sp-1) !important;
    }

    .cal-day {
        padding: var(--sp-2) var(--sp-1) !important;
    }

    .cal-day .num {
        font-size: 15px !important;
    }

    .cal-day .dow,
    .cal-day .mon {
        font-size: 8px !important;
    }

    .cal-slots {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .cal-slot {
        padding: 10px var(--sp-1) !important;
        font-size: 13px !important;
    }

    .cal-content {
        padding: var(--sp-4) !important;
    }
}

/* ============================================================
   11. EDITOR DE PLANTILLAS DE EMAIL
   ============================================================ */
@media (max-width: 767px) {
    body > .flex.h-screen > main > .flex-1.flex.overflow-hidden {
        flex-direction: column !important;
    }

    .w-56.border-r.border-gray-200.bg-gray-50 {
        width: 100% !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--surface-border) !important;
        padding: var(--sp-2) !important;
    }

    .w-56.border-r.border-gray-200.bg-gray-50 > h3,
    .w-56.border-r.border-gray-200.bg-gray-50 > p {
        display: none !important;
    }

    .palette-item {
        display: inline-flex !important;
        margin-right: 6px !important;
        margin-bottom: 6px !important;
        padding: 6px 10px !important;
        font-size: var(--fs-xs) !important;
    }

    .palette-item i {
        font-size: var(--fs-sm) !important;
    }

    .w-80.border-l.border-gray-200.bg-gray-50 {
        width: 100% !important;
        max-height: 350px !important;
        border-left: none !important;
        border-top: 1px solid var(--surface-border) !important;
    }

    .max-w-3xl.mx-auto.bg-white {
        padding: var(--sp-3) !important;
    }
}

/* ============================================================
   12. MODO OSCURO (activar con `data-theme="dark"` en <html>)
   ============================================================ */
html[data-theme="dark"] {
    --surface-bg:             #111827;
    --surface-bg-alt:         #1f2937;
    --surface-bg-tertiary:    #374151;
    --surface-border:         #374151;
    --surface-border-strong:  #4b5563;

    --text-primary:           #f9fafb;
    --text-secondary:         #e5e7eb;
    --text-tertiary:          #9ca3af;
    --text-muted:             #6b7280;

    --sidebar-bg:             #030712;
    --sidebar-bg-hover:       #1f2937;
    --sidebar-border:         #1f2937;
}

/* ============================================================
   13. UTILIDADES
   ============================================================ */

/* Safe area para iPhone con notch */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        body aside {
            padding-bottom: env(safe-area-inset-bottom) !important;
            height: calc(var(--sidebar-width-mobile) + env(safe-area-inset-bottom)) !important;
        }
    }
}

@media (max-width: 767px) {
    body main.calendar-main {
        padding-bottom: calc(var(--sidebar-width-mobile) + 80px) !important;
        height: calc(100vh - var(--sidebar-width-mobile)) !important;
        overflow-y: auto !important;
    }
}

/* Prevenir zoom en inputs en iOS */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Sin selección de texto en botones */
button, .palette-item, .block-wrapper {
    user-select: none;
    -webkit-user-select: none;
}

/* Tap targets en móvil */
@media (max-width: 767px) {
    button, a[role="button"], .cursor-pointer {
        min-height: 36px;
    }

    .block-toolbar button {
        min-height: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

/* Transiciones suaves */
a, button {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Impresión */
@media print {
    aside, nav, button, .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    main {
        padding: 0 !important;
    }
}


/* ============================================================ */
/* FIXES RESPONSIVE — Dashboard chat, forms, templates           */
/* ============================================================ */

/* ===== FIX 1: Dashboard → chat en móvil (modo pila) ===== */
@media (max-width: 767px) {

    /* Contenedor principal del chat: ocupa el alto disponible */
    .chat-wrapper {
        position: relative !important;
        flex-direction: column !important;
        height: calc(100vh - var(--sidebar-width-mobile) - 132px) !important;
        max-height: calc(100vh - var(--sidebar-width-mobile) - 132px) !important;
        overflow: hidden !important;
    }

    /* Lista de contactos: 100% del alto, scrolleable */
    .chat-sidebar {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        border-right: none !important;
        border-bottom: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 1 !important;
    }

    /* Chat principal: oculto por defecto */
    .chat-main {
        display: none !important;
    }

    /* Cuando hay un chat abierto: ocultar lista, mostrar chat */
    .chat-wrapper.mobile-chat-open .chat-sidebar {
        display: none !important;
    }

    .chat-wrapper.mobile-chat-open .chat-main {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Historial de mensajes: scroll interno */
    .chat-wrapper.mobile-chat-open .flex-1.overflow-y-auto.p-4.md\:p-8.wa-bg {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: var(--sp-3) !important;
    }

    /* Input del mensaje: siempre pegado abajo */
    .chat-wrapper.mobile-chat-open form.bg-\[\#f0f2f5\] {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        background: var(--surface-bg-tertiary) !important;
        border-top: 1px solid var(--surface-border);
    }
}

/* ===== FIX 2: forms.php responsive ===== */
@media (max-width: 767px) {
    main > .flex-1.flex.overflow-hidden {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    .w-80.border-r.bg-gray-50.overflow-y-auto {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--surface-border) !important;
        overflow-y: auto !important;
        flex-shrink: 0 !important;
    }

    .flex-1.overflow-y-auto {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .p-6.max-w-4xl.mx-auto.space-y-6 {
        padding: var(--sp-3) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid-cols-2.gap-4,
    .grid-cols-3.gap-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .grid.grid-cols-3.gap-2.mt-2.ml-8 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        margin-left: 0 !important;
    }

    .flex.gap-2.border-b {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .flex.gap-2.border-b > button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ===== FIX 3: templates.php responsive ===== */
@media (max-width: 767px) {
    body > .flex.h-screen > main > .flex-1.flex.overflow-hidden {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    header.bg-white.border-b {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--sp-2) !important;
        padding: var(--sp-3) !important;
    }

    header .flex.items-center.gap-4.flex-1.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--sp-2) !important;
        width: 100% !important;
    }

    header input[type="text"] {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    header .flex.gap-2.flex-wrap {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    header .flex.gap-2.flex-wrap button,
    header .flex.gap-2.flex-wrap a {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }

    .w-56.border-r.border-gray-200.bg-gray-50 {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 180px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--surface-border) !important;
        padding: var(--sp-2) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .w-56.border-r.border-gray-200.bg-gray-50 > h3,
    .w-56.border-r.border-gray-200.bg-gray-50 > p {
        display: none !important;
    }

    .palette-item {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .palette-item i {
        font-size: 14px !important;
    }

    .palette-item span {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .flex-1.overflow-y-auto.bg-gray-100.p-6 {
        width: 100% !important;
        padding: var(--sp-3) !important;
        overflow-x: hidden !important;
        flex: 0 0 auto !important;
        min-height: 300px !important;
    }

    .max-w-3xl.mx-auto.bg-white {
        padding: var(--sp-2) !important;
        max-width: 100% !important;
    }

    .w-80.border-l.border-gray-200.bg-gray-50 {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        border-left: none !important;
        border-top: 1px solid var(--surface-border) !important;
        flex-shrink: 0 !important;
    }

    .block-toolbar {
        top: -28px !important;
        right: 0 !important;
    }

    .block-toolbar button {
        width: 26px !important;
        height: 26px !important;
    }

    .fixed.inset-0.bg-black.bg-opacity-50 > div {
        max-width: 100% !important;
        width: calc(100% - 16px) !important;
        max-height: 92vh !important;
    }
}


/* ============================================================
   FIX 4: Modal de bajas con scroll horizontal en mobile
   ============================================================ */


@media (max-width: 767px) {
    /* Modal de bajas específico */
    .fixed.inset-0.z-50 > div.max-w-4xl {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        max-height: 92vh !important;
        padding: var(--sp-4) var(--sp-3) !important;
        margin: 0 !important;
        align-self: flex-end !important;
    }


    /* Wrapper con scroll horizontal + vertical */
    .unsubs-table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        /* Hint visual: siempre muestra la barra de scroll */
        scrollbar-width: thin;
    }

    .unsubs-table-wrapper::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .unsubs-table-wrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    /* Forzar ancho mínimo de la tabla para que se pueda scrollear */
    .unsubs-table {
        min-width: 780px !important;
        width: 780px !important;
    }

    .unsubs-table th,
    .unsubs-table td {
        white-space: nowrap;
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* Botón Reactivar cómodo al toque */
    .unsubs-table button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* Empty state: que ocupe el ancho visible, no el de la tabla */
    .unsubs-table td[colspan="6"] {
        white-space: normal;
    }

    /* El botón "Cerrar" del footer, full-width en mobile */
    .fixed.inset-0.z-50 > div.max-w-4xl .border-t button {
        padding: 10px 16px !important;
        font-size: var(--fs-sm) !important;
    }
}

/* ============================================================
   FIX 5: Modal Cargar Excel — altura dinámica en mobile
   ============================================================ */
.upload-modal-box {
    max-height: 90vh;                /* fallback */
    max-height: 90dvh;               /* dynamic viewport (mobile real) */
    min-height: 0;                   /* permite flex shrink */
}

@media (min-width: 768px) {
    .upload-modal-box {
        max-height: 85vh;
        max-height: 85dvh;
    }
}

@media (max-width: 767px) {
    .upload-modal-box {
        max-height: 88dvh;
        height: auto;
    }
}

/* ============================================================
   FIX 6: Modal Editar Contacto — altura dinámica
   ============================================================ */
.edit-contact-modal {
    max-height: 90vh;                /* fallback */
    max-height: 90dvh;               /* dynamic viewport */
    min-height: 0;
}

@media (min-width: 768px) {
    .edit-contact-modal {
        max-height: 85vh;
        max-height: 85dvh;
    }
}

@media (max-width: 767px) {
    .edit-contact-modal {
        max-height: 88dvh;
        height: auto;
    }
}


/* ============================================================
   FIX 7: Filtros del drawer — responsive en mobile
   ============================================================ */
@media (max-width: 767px) {

    /* El contenedor de filtros no debe desbordarse */
    .bg-purple-50.border.border-purple-200 {
        overflow-x: hidden !important;
    }

    /* Cada fila de filtro: los selects se apilan */
    .bg-purple-50 .bg-white.p-2.rounded.border {
        padding: var(--sp-2) !important;
    }

    /* Fila 1 del filtro: tipo + operador + botón */
    .bg-purple-50 .bg-white > .flex.gap-2 {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .bg-purple-50 .bg-white > .flex.gap-2 select {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        max-width: 100% !important;
    }

    /* Fila 2 (valor): input/select full-width */
    .bg-purple-50 .bg-white input,
    .bg-purple-50 .bg-white select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Inputs y selects que no se salgan */
    .bg-purple-50 input[type="text"],
    .bg-purple-50 select {
        font-size: var(--fs-sm) !important;
    }
}

/* ============================================================
   FIX 8: Modal Preview — v4 (funciona con position: fixed real)
   ============================================================ */
.preview-modal-box {
    display: flex !important;
    flex-direction: column !important;
    height: 85dvh !important;
    max-height: 85dvh !important;
    overflow: hidden !important;
}

.preview-iframe-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #f3f4f6;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.preview-iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media (max-width: 767px) {
    .preview-modal-box {
        height: 88dvh !important;
        max-height: 88dvh !important;
    }
    .preview-iframe-wrapper {
        padding: 8px;
    }
}


/* ============================================================
   FIX 9: Modal Editar Tipo de Reunión — altura dinámica
   ============================================================ */
.edit-type-modal {
    max-height: 90vh;
    max-height: 90dvh;
    min-height: 0;
}

@media (min-width: 768px) {
    .edit-type-modal {
        max-height: 85vh;
        max-height: 85dvh;
    }
}

@media (max-width: 767px) {
    .edit-type-modal {
        max-height: 88dvh;
        height: auto;
    }
}


/* ============================================================
   FIX 10: Tab Configuración — botón Guardar sticky en mobile
   ============================================================ */

/* Desktop: footer normal */
.settings-footer {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767px) {

    .settings-tab {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* El footer sticky se queda al fondo del main (que ya tiene padding extra) */
    .settings-footer {
        position: sticky;
        bottom: 0;
        margin: 0 -20px;
        padding: 12px 20px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
        z-index: 20;
    }

    .settings-footer button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}


/* ============================================================
   FIX 11: Tab Disponibilidad — bloques responsive en mobile
   ============================================================ */

@media (max-width: 767px) {

    /* El contenedor no debe permitir overflow horizontal */
    .availability-tab {
        overflow-x: hidden !important;
    }

    .availability-tab > div {
        overflow-x: hidden !important;
    }

    /* Inputs de hora: anchos cómodos en mobile */
    .availability-tab input[type="time"] {
        font-size: 15px !important;
        padding: 8px 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cada fila de bloque: que no se salga */
    .availability-block {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* El botón × siempre visible */
    .availability-block button {
        flex-shrink: 0 !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* El botón "Guardar disponibilidad" también con sticky */
    .availability-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sidebar-width-mobile) + env(safe-area-inset-bottom, 0px));
        padding: 12px 20px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        z-index: 90;
    }

    /* Espacio extra al final del tab para que el footer fixed no tape nada */
    .availability-tab {
        padding-bottom: 90px !important;
    }
}

/* Desktop: footer normal */
.availability-footer {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}