/* ArChat Layout Fix
Created: 12-03-2026 17:33:56
Author: SIVOL® - Aldo Frias - Argentina */
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * ARCHAT — Sistema de temas (solo Argentina / Dark)
 * Fallback: argentina.
 */
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * ARCHAT — Tema institucional Argentina (WCAG 2.2 AA)
 * :root[data-theme="argentina"] — contraste ≥ 4.5:1
 */
:root[data-theme="argentina"] {
  --color-primary: #1F6AE1;
  --color-primary-hover: #1659BC;
  --color-primary-active: #0d47a1;
  --color-secondary: #E5F0FF;

  --color-bg-main: #FFFFFF;
  --color-bg-card: #F8FAFC;
  --color-bg-input: #F1F5F9;
  --color-bg-muted: #F1F5F9;

  --color-text-main: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;

  --color-border: #CBD5E1;
  --color-border-focus: var(--color-primary);

  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-success: #16A34A;
  --color-success-hover: #15803D;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;

  --radius-main: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(31, 106, 225, 0.35);

  --focus-outline: 2px solid var(--color-primary);
  --focus-outline-offset: 2px;

  --theme-meta-color: #1F6AE1;
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* Botones (misma semántica que dark) */
  --color-button-bg: var(--color-primary);
  --color-button-text: var(--color-text-inverse);
  --color-button-bg-secondary: var(--color-bg-input);
  --color-button-text-secondary: var(--color-text-main);
  --color-button-bg-disabled: var(--color-bg-muted);
  --color-button-text-disabled: var(--color-text-muted);
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * ARCHAT — Tema oscuro (WCAG 2.2 AA)
 * Contraste texto/fondo ≥ 4.5:1. Textos claros sobre fondos oscuros.
 * :root[data-theme="dark"]
 * @see docs/DARK_THEME_ACCESSIBILITY.md
 */
:root[data-theme="dark"] {
  --color-primary: #60A5FA;
  --color-primary-hover: #3B82F6;
  --color-primary-active: #2563EB;
  --color-secondary: #1E3A5F;

  /* Fondos oscuros accesibles + --app-* para consistencia con global.css */
  --color-bg-main: #0F172A;
  --color-bg-card: #0F172A;
  --color-bg-input: #1E293B;
  --color-bg-muted: #1E293B;
  --app-bg: #0F172A;
  --app-surface: #1e293b;
  --app-card-bg: #0f172a;

  /* Texto claro sobre fondo oscuro (≥ 4.5:1) — contraste cards, labels, progress, botones */
  --color-text-main: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-muted: #94a3b8;
  --color-text-inverse: #0F172A;

  --color-border: #334155;
  --color-border-focus: var(--color-primary);

  --color-danger: #F87171;
  --color-danger-hover: #EF4444;
  --color-success: #4ADE80;
  --color-success-hover: #22C55E;
  --color-warning: #FBBF24;
  --color-warning-bg: #451A03;

  --radius-main: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.45);

  --focus-outline: 2px solid var(--color-primary);
  --focus-outline-offset: 2px;

  --theme-meta-color: #0F172A;
  --color-overlay: rgba(15, 23, 42, 0.88);

  /* Acento/captcha/botón secundario (evitar hex en componentes) */
  --color-accent: #6a4c93;
  --color-accent-hover: #8b6fb8;
  --color-accent-soft: rgba(106, 76, 147, 0.2);

  /* Botones: siempre legibles en dark (WCAG AA) */
  --color-button-bg: var(--color-primary);
  --color-button-text: var(--color-text-inverse);
  --color-button-bg-secondary: var(--color-bg-input);
  --color-button-text-secondary: var(--color-text-main);
  --color-button-bg-disabled: var(--color-bg-input);
  --color-button-text-disabled: var(--color-text-secondary);
}
/* ========== Overrides contraste: panel de planes y dashboard en dark ==========
 * Evitar fondos claros (#e5e7eb, #ffffff) heredados del tema light.
 * Tarjetas oscuras, botones disabled en gris oscuro, texto siempre legible.
 */
/* Botón "Plan actual" (card FREE) en dark — mayor especificidad para ganar a .upgrade-comparison .upgrade-btn-disabled */
[data-theme="dark"] .upgrade-comparison .upgrade-btn-disabled,
[data-theme="dark"] .archat .upgrade-btn-disabled,
[data-theme="dark"] .upgrade-btn-disabled {
  background: #374151 !important;
  color: #d1d5db !important;
  border: none;
}
/* Cards de planes en dark */
[data-theme="dark"] .upgrade-card {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .upgrade-card-free {
  border-color: #6b7280;
}
/* Badge "Plan actual" en cards */
[data-theme="dark"] .upgrade-badge-active {
  background: #374151;
  color: #e5e7eb;
}
/* Dashboard: variables de badges en dark para que .plan-badge.plan-free no use fondo claro */
[data-theme="dark"] .dashboard-saas {
  --badge-free-bg: #374151;
  --badge-free-text: #e5e7eb;
}
/* Badges genéricos y plan-badge en dashboard (FREE junto a "Panel de Control") */
[data-theme="dark"] .badge,
[data-theme="dark"] .plan-badge,
[data-theme="dark"] .dashboard-saas .plan-badge.plan-free,
[data-theme="dark"] .dashboard-plan-badge .plan-badge {
  background: #374151 !important;
  color: #e5e7eb !important;
}
/* Banner inferior / sección upgrade del dashboard: botón "Mejorar Plan" / PRO */
[data-theme="dark"] .dashboard-upgrade .btn-upgrade,
[data-theme="dark"] .upgrade-banner button {
  background: #374151;
  color: #e5e7eb;
  border: none;
}
[data-theme="dark"] .dashboard-upgrade .btn-upgrade:hover,
[data-theme="dark"] .upgrade-banner button:hover {
  background: #4b5563;
  color: #f3f4f6;
}
/* CTAs de upgrade en cards (PRO / FOUNDATION): mantener azul/acento legible en dark */
[data-theme="dark"] .upgrade-card-cta {
  background: #3b82f6;
  color: #ffffff;
}
[data-theme="dark"] .upgrade-card-cta-pro {
  background: #6366f1;
  color: #ffffff;
}
[data-theme="dark"] .upgrade-card-cta-foundation {
  background: #b45309;
  color: #fef3c7;
}
/* Fallback: si no hay data-theme, usar variables de argentina (evitar FOUC) */
:root:not([data-theme]) {
  --color-primary: #1F6AE1;
  --color-primary-hover: #1659BC;
  --color-primary-active: #0d47a1;
  --color-secondary: #E5F0FF;
  --color-bg-main: #FFFFFF;
  --color-bg-card: #F8FAFC;
  --color-bg-input: #F1F5F9;
  --color-bg-muted: #F1F5F9;
  --color-text-main: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;
  --color-border: #CBD5E1;
  --color-border-focus: #1F6AE1;
  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-success: #16A34A;
  --color-success-hover: #15803D;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --radius-main: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(31, 106, 225, 0.35);
  --focus-outline: 2px solid #1F6AE1;
  --focus-outline-offset: 2px;
  --theme-meta-color: #1F6AE1;
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* Botones (fallback, misma semántica que temas) */
  --color-button-bg: var(--color-primary);
  --color-button-text: var(--color-text-inverse);
  --color-button-bg-secondary: var(--color-bg-input);
  --color-button-text-secondary: var(--color-text-main);
  --color-button-bg-disabled: var(--color-bg-muted);
  --color-button-text-disabled: var(--color-text-muted);
}
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Autor: SIVOL® - Aldo Frias - Argentina
 * Fecha: 11/03/2026 22:50 (Argentina - UTC-3)
 * Sistema único de variables de tema (WCAG).
 * Usar solo --color-text-* y --color-bg-*.
 */
:root {
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-main: var(--color-text-primary);
  --color-border: #d1d5db;

  --color-bg-main: #ffffff;
  --color-bg-card: #f9fafb;
  --color-bg-muted: #f3f4f6;
}
/* Tema oscuro: contraste mínimo WCAG */
:root[data-theme="dark"] {
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-text-main: var(--color-text-primary);
  --color-border: #374151;

  --color-bg-main: #0b0f14;
  --color-bg-card: #111827;
  --color-bg-muted: #1f2937;
}
body {
  color: var(--color-text-primary);
  background: var(--color-bg-main);
}
/* Forzar variables en dark para que CSS viejo no pise el tema */
html[data-theme="dark"] body {
  background: var(--color-bg-main) !important;
  color: var(--color-text-primary) !important;
}
html[data-theme="dark"] * {
  border-color: var(--color-border);
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Autor: SIVOL® - Aldo Frias - Argentina
 * Fecha: 11/03/2026 22:50 (Argentina - UTC-3)
 * Design System UI — estilos de componentes reutilizables.
 * Solo variables de tema. Sin colores hardcodeados.
 */
/* ---- Avatar ---- */
.archat-avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* ---- Button ---- */
.archat-button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.archat-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.archat-button-primary {
  background: var(--color-primary, var(--color-bg-muted));
  color: var(--color-text-inverse, var(--color-text-primary));
  border-color: var(--color-primary, var(--color-border));
}
.archat-button-primary:hover:not(:disabled) {
  background: var(--color-primary-hover, var(--color-primary));
}
.archat-button-secondary {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.archat-button-secondary:hover:not(:disabled) {
  background: var(--color-bg-card);
  border-color: var(--color-text-muted);
}
.archat-button-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse, var(--color-text-primary));
  border-color: var(--color-danger);
}
.archat-button-danger:hover:not(:disabled) {
  background: var(--color-danger-hover, var(--color-danger));
}
.archat-button-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
}
.archat-button-ghost:hover:not(:disabled) {
  background: var(--color-bg-muted);
}
.archat-button-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
.archat-button-md {
  padding: 0.5rem 1rem;
}
.archat-button-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}
/* ---- Modal ---- */
.archat-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay, var(--color-bg-main));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Debe respetar el stack global de modales (ModalRoot/useModalStackLayer). */
  z-index: var(--archat-backdrop-z, 900);
  padding: 1rem;
}
.archat-modal {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-radius: var(--radius-main, 12px);
  border: 1px solid var(--color-border);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-md);
}
.archat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.archat-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.archat-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 0.25rem;
}
.archat-modal-close:hover {
  color: var(--color-text-primary);
}
.archat-modal-body {
  padding: 1.25rem;
  color: var(--color-text-primary);
}
/* ---- Input ---- */
.archat-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.archat-input::placeholder {
  color: var(--color-text-muted);
}
.archat-input:focus {
  outline: none;
  border-color: var(--color-border-focus, var(--color-primary));
  box-shadow: var(--shadow-focus, 0 0 0 2px var(--color-border));
}
.archat-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
/* ---- Badge ---- */
.archat-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.archat-badge-neutral {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.archat-badge-success {
  background: var(--color-success);
  color: var(--color-text-inverse, var(--color-text-primary));
}
.archat-badge-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse, var(--color-text-primary));
}
.archat-badge-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse, var(--color-text-primary));
}
.archat-badge-info {
  background: var(--color-primary, var(--color-bg-muted));
  color: var(--color-text-inverse, var(--color-text-primary));
}
/* ---- StatusBadge ---- */
.archat-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.archat-status-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.archat-status-badge-online .archat-status-badge-dot {
  background: var(--color-success);
}
.archat-status-badge-offline .archat-status-badge-dot {
  background: var(--color-text-muted);
}
.archat-status-badge-busy .archat-status-badge-dot {
  background: var(--color-danger);
}
.archat-status-badge-away .archat-status-badge-dot {
  background: var(--color-warning);
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/* Variables de tema definidas solo en theme (theme/index.css, theme/dark.css, styles/argentina-theme.css). No redefinir aquí para evitar sobrescritura. */
/* Diagnóstico: solo con ?diagnostic=1 o localStorage archat_diagnostic=1. Si ves borde verde = global.css SÍ se cargó. */
body.archat-diagnostic {
            border: 6px solid #16a34a !important;
            box-sizing: border-box !important;
        }
body.archat-diagnostic::after {
            content: 'global.css cargado OK';
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #16a34a;
            color: #fff;
            padding: 6px;
            font-size: 12px;
            text-align: center;
            z-index: 999998;
            font-family: system-ui, sans-serif;
        }
* {
            color: inherit;
        }
html {
            background: var(--app-bg);
        }
html,
        body,
        #root {
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--app-bg);
        }
html, body {
            overflow-x: hidden;
        }
body {
            overflow-x: hidden;
        }
#root {
            min-height: 100%;
            height: 100%;
        }
.app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            overflow-x: hidden;
            box-sizing: border-box;
        }
/* Panel de perfil / menú usuario: siempre por encima del chat */
.profile-panel {
            position: relative;
            z-index: 10;
        }
/* ARCHAT LAYOUT RULE
           No usar 100vw, 100vh o position:fixed en el chat.
           El layout debe basarse en flex dentro de .chat-area. */
/* Layout principal: navbar + main-layout (sidebar + chat-area) */
.main-layout {
            display: flex;
            height: calc(100vh - var(--navbar-height, 60px));
            overflow: hidden;
            overflow-x: hidden;
            max-width: 100%;
            min-width: 0;
        }
.chat-area {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
.main-content {
            flex: 1;
            min-height: 0;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            overflow-x: hidden;
        }
.messages-wrapper {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }
.main-layout .chat-area.main-content {
            padding-top: 0;
        }
.app-sidebar {
            flex: 0 0 48px;
            background: rgba(0, 0, 0, 0.15);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 8px;
        }
/* Sidebar lateral deshabilitada globalmente (desktop + móvil)
           para evitar desperdicio de espacio horizontal. */
.app-sidebar {
            display: none !important;
            flex: 0 0 0 !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            border-right: none !important;
            overflow: hidden !important;
        }
.app-sidebar-back {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
            line-height: 1;
            border-radius: 8px;
        }
.app-sidebar-back:hover {
            background: rgba(255, 255, 255, 0.1);
        }
/* Móvil: ocultar sidebar izquierdo residual para evitar barra fantasma */
@media (max-width: 768px) {
            .app-sidebar {
                display: none !important;
            }

            .main-layout,
            .chat-area,
            .main-content {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }
/* ============================================
           ACCESIBILIDAD Y ESCALADO DE FUENTE
           Base: 1rem = 16px (por defecto), pero escala con preferencias del sistema
           ============================================ */
:root {
            /* Fallback antes de data-theme (Argentina por defecto) */
            --app-bg: #f4f8fd;
            --app-surface: #ffffff;
            --app-card-bg: #f0f4f8;
            --color-primary: #3aa6ff;
            --color-secondary: #2563eb;
            --color-accent: #f4c430;
            --color-text-main: #1a1f2e;
            --color-text-secondary: #4b5563;
            --color-muted: #6b7280;
            --color-border: #d1d5db;
            /* Base font-size: 16px por defecto, pero respeta preferencias del usuario */
            font-size: 16px;
            /* Variables para espaciado consistente en rem */
            --spacing-xs: 0.25rem;   /* 4px */
            --spacing-sm: 0.5rem;    /* 8px */
            --spacing-md: 1rem;      /* 16px */
            --spacing-lg: 1.5rem;    /* 24px */
            --spacing-xl: 2rem;      /* 32px */
            --spacing-2xl: 3rem;     /* 48px */
            /* Altura del navbar para layout (main-layout) */
            --navbar-height: 60px;
            /* Z-index estándar enterprise: modales siempre encima */
            --z-overlay: 9998;
            --z-modal: 9999;
            /* Selector de estado de presencia (dark mode legible) */
            --status-bg-dark: #1f2937;
            --status-text-dark: #ffffff;
            --status-selected-bg: #2563eb;
            --status-selected-text: #ffffff;
        }
/* Respetar preferencias de tamaño de fuente del usuario (hasta 200%) */
@media (prefers-reduced-motion: no-preference) {
            html {
                font-size: clamp(14px, 1rem, 20px);
            }
        }
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--color-text-main);
            font-size: clamp(0.875rem, 1rem, 1.25rem);
            line-height: 1.5;
        }
/* Variables de tema (modales) */
:root {
  --modal-attach-bg: white;
}
[data-theme="dark"] {
  --modal-attach-bg: #0f172a;
}
/* Selector de estado de presencia: dark mode legible (sin grises claros hardcodeados) */
.dark .status-option,
:root[data-theme="dark"] .status-option {
  background-color: var(--status-bg-dark, #1f2937);
  color: var(--status-text-dark, #ffffff);
}
.dark .status-option.selected,
:root[data-theme="dark"] .status-option.selected {
  background-color: var(--status-selected-bg, #2563eb);
  color: var(--status-selected-text, #ffffff);
}
.dark .status-option:hover,
:root[data-theme="dark"] .status-option:hover {
  background-color: #374151;
  color: var(--status-text-dark, #ffffff);
}
/* Botones de estado en modal de presencia (dark) */
.dark .status-btn,
:root[data-theme="dark"] .status-btn {
  background-color: var(--status-bg-dark, #1f2937);
  color: var(--status-text-dark, #ffffff);
  border-color: #374151;
}
.dark .status-btn.active,
:root[data-theme="dark"] .status-btn.active {
  background-color: var(--status-selected-bg, #2563eb);
  color: var(--status-selected-text, #ffffff);
}
.dark .status-btn:hover,
:root[data-theme="dark"] .status-btn:hover {
  background-color: #374151;
  color: var(--status-text-dark, #ffffff);
}
/* Accesibilidad: solo para lectores de pantalla (sin duplicar visual) */
.sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
/* Texto y controles heredan del tema (WCAG dark) */
* {
            color: inherit;
            font-weight: inherit;
        }
body * {
            color: var(--color-text-main);
        }
/* Excepciones: iconos y botones heredan */
svg, path, polygon, circle, rect, line, polyline,
        .btn-volver-conversaciones, .btn-conversacion-menu,
        .btn-nueva-conversacion, .btn-enviar-mensaje,
        .btn-contacto-menu, .btn-regenerar-captcha,
        button svg, .icon, [class*="icon"], [class*="btn"] svg {
            color: inherit !important;
            font-weight: inherit !important;
        }
input, textarea {
            color: var(--color-text-main) !important;
            background: var(--color-bg-input) !important;
            border-color: var(--color-border) !important;
        }
input::placeholder, textarea::placeholder {
            color: var(--color-text-muted) !important;
        }
.loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-main);
            color: var(--color-text-main);
            z-index: 1000;
            transition: opacity 0.5s ease-out;
        }
.loading-screen.hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
            display: none !important;
            visibility: hidden !important;
        }
.logo-container {
            width: 100%;
            max-width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
.logo-container img {
            width: 100%;
            max-width: 120px;
            height: auto;
            aspect-ratio: 1;
            animation: logoAnimation 2s ease-in-out infinite;
            display: block;
            object-fit: contain;
        }
/* Responsive para pantalla de carga */
@media (max-width: 480px) {
            .logo-container {
                max-width: 150px;
            }
            
            .logo-container img {
                max-width: 100px;
            }
        }
@media (min-width: 481px) and (max-width: 768px) {
            .logo-container {
                max-width: 180px;
            }
            
            .logo-container img {
                max-width: 120px;
            }
        }
@media (min-width: 769px) {
            .logo-container {
                max-width: 200px;
            }
            
            .logo-container img {
                max-width: 140px;
            }
        }
@keyframes logoAnimation {
            0%, 100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            25% {
                opacity: 0.9;
                transform: scale(1.05) rotate(2deg);
            }
            50% {
                opacity: 0.85;
                transform: scale(1.1) rotate(0deg);
            }
            75% {
                opacity: 0.9;
                transform: scale(1.05) rotate(-2deg);
            }
        }
/* Menú principal */
/* Vista de Conversaciones / Contactos - UNIFICADO */
.conversaciones-view {
            display: none !important;
            min-height: 100vh;
            padding-top: 0;
            background: transparent; /* Sin fondo propio - usa el del body */
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            min-width: 0;
        }
.conversaciones-view.active {
            display: block !important;
        }
.conversaciones-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 15px;
            margin: 0;
            background: transparent;
            border-bottom: none;
            width: 100%;
            box-sizing: border-box;
        }
.conversaciones-header h1 {
            margin: 0;
            color: #ffffff;
            font-size: clamp(1rem, 2.5vw, 1.25rem); /* Escala fluida */
            font-weight: 700;
            text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
            line-height: 1.2;
            overflow-wrap: break-word;
            word-break: break-word;
        }
.btn-nueva-conversacion {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 2.5rem; /* 40px -> 2.5rem */
            height: 2.5rem; /* 40px -> 2.5rem */
            min-width: 2.5rem;
            min-height: 2.5rem;
            border-radius: 50%;
            cursor: pointer;
            font-size: clamp(1.125rem, 2vw, 1.25rem); /* Escala con el sistema */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
.btn-nueva-conversacion:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.conversaciones-list {
            padding: 0.625rem; /* 10px -> 0.625rem */
            max-height: calc(100vh - 13.125rem); /* 210px -> 13.125rem */
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
/* Contenedor de búsqueda y lista de usuarios */
.usuarios-busqueda-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            margin: 20px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }
.usuarios-busqueda-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #6a4c93;
        }
.usuarios-busqueda-header h2 {
            margin: 0;
            color: var(--color-text-main);
            font-size: 1.5rem;
        }
.btn-cerrar-busqueda-usuarios {
            background: #f44336;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
.btn-cerrar-busqueda-usuarios:hover {
            background: #d32f2f;
        }
.usuarios-busqueda-search {
            position: relative;
            margin-bottom: 20px;
        }
.usuarios-busqueda-input {
            width: 100%;
            padding: 12px 45px 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
.usuarios-busqueda-input:focus {
            outline: none;
            border-color: #6a4c93;
        }
.usuarios-busqueda-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }
.usuarios-busqueda-list {
            min-height: 200px;
        }
.usuarios-busqueda-loading,
        .usuarios-busqueda-empty {
            padding: 40px;
            text-align: center;
            color: var(--color-text-main);
        }
.usuarios-busqueda-empty p {
            color: var(--color-text-main);
            font-weight: 500;
        }
/* Tabla de usuarios (mismo estilo que el modal) */
.usuarios-busqueda-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
.usuarios-busqueda-table thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
.usuarios-busqueda-table th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.usuarios-busqueda-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background 0.2s;
        }
.usuarios-busqueda-table tbody tr:hover {
            background: #f5f5f5;
        }
.usuarios-busqueda-table td {
            padding: 15px 20px;
            vertical-align: middle;
        }
.usuarios-busqueda-cell-usuario {
            min-width: 250px;
        }
.usuarios-busqueda-usuario-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
.usuarios-busqueda-usuario-info {
            flex: 1;
            min-width: 0;
        }
.usuarios-busqueda-cell-pais,
        .usuarios-busqueda-cell-idioma {
            min-width: 150px;
        }
.usuarios-busqueda-pais-container,
        .usuarios-busqueda-idioma-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
.usuarios-busqueda-flag {
            font-size: 20px;
            line-height: 1;
        }
.usuarios-busqueda-pais-nombre,
        .usuarios-busqueda-idioma-nombre {
            font-size: 14px;
            color: var(--color-text-main);
        }
.usuarios-busqueda-cell-accion {
            min-width: 180px;
            text-align: right;
        }
.usuarios-busqueda-accion-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
.usuarios-busqueda-btn-contactar {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
.usuarios-busqueda-btn-contactar:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(106, 76, 147, 0.4);
        }
@media (max-width: 768px) {
            .usuarios-busqueda-container {
                margin: 10px;
                padding: 15px;
            }
            
            .usuarios-busqueda-table {
                font-size: 12px;
            }
            
            .usuarios-busqueda-table th,
            .usuarios-busqueda-table td {
                padding: 10px 12px;
            }
            
            .usuarios-busqueda-cell-usuario {
                min-width: 180px;
            }
            
            .usuarios-busqueda-cell-pais,
            .usuarios-busqueda-cell-idioma {
                min-width: 100px;
            }
            
            .usuarios-busqueda-cell-accion {
                min-width: 120px;
            }
        }
.conversacion-item {
            display: flex;
            align-items: center;
            padding: 0.9375rem; /* 15px -> 0.9375rem */
            margin-bottom: 0.625rem; /* 10px -> 0.625rem */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 0.9375rem; /* 15px -> 0.9375rem */
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            min-height: 3.125rem; /* Altura mínima flexible */
        }
.conversacion-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(0.3125rem); /* 5px -> 0.3125rem */
        }
.conversacion-item-avatar {
            width: 3.125rem; /* 50px -> 3.125rem */
            height: 3.125rem; /* 50px -> 3.125rem */
            min-width: 3.125rem;
            min-height: 3.125rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.9375rem; /* 15px -> 0.9375rem */
            font-size: clamp(1.125rem, 2vw, 1.25rem); /* Escala con el sistema */
            color: white;
            font-weight: bold;
            flex-shrink: 0;
            overflow: hidden;
        }
.conversacion-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.conversacion-item-info {
            flex: 1;
            min-width: 0;
        }
.conversacion-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
.conversacion-item-nombre {
            font-weight: 700;
            color: #ffffff;
            font-size: clamp(0.875rem, 2vw, 1rem); /* Escala fluida */
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
            overflow-wrap: break-word;
            word-break: break-word;
        }
.conversacion-item-fecha {
            font-size: clamp(0.75rem, 1.5vw, 0.85rem); /* Escala fluida */
            color: #ffffff;
            white-space: nowrap;
            margin-left: 0.625rem; /* 10px -> 0.625rem */
            opacity: 0.9;
            text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
        }
.conversacion-item-preview {
            font-size: clamp(0.8125rem, 1.75vw, 0.9rem); /* Escala fluida */
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.95;
            text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
            overflow-wrap: break-word;
            word-break: break-word;
        }
.conversacion-item-badge {
            background: #4CAF50;
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.75rem;
            font-weight: bold;
            margin-left: 10px;
            min-width: 20px;
            text-align: center;
        }
.conversaciones-loading,
        .mensajes-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
.conversaciones-loading p,
        .mensajes-loading p {
            color: #ffffff !important;
            font-weight: 500 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        }
.loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }
@keyframes spin {
            to { transform: rotate(360deg); }
        }
.conversaciones-empty {
            text-align: center;
            padding: 60px 20px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
.conversaciones-empty p {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 1.1rem !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
        }
.empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
/* Vista de Conversación Individual: width 100% del contenedor, nunca 100vw ni position fixed */
.conversacion-view {
            display: none;
            flex-direction: column;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
        }
.conversacion-view.active {
            display: flex;
        }
.conversacion-header {
            display: flex;
            align-items: center;
            padding: 0.9375rem 1.25rem; /* 15px 20px -> 0.9375rem 1.25rem */
            min-height: 3.75rem; /* Altura mínima flexible */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 999; /* Menor que el navbar (z-index: 1000) */
        }
.btn-volver-conversaciones {
            background: transparent;
            border: none;
            color: white;
            font-size: clamp(1.25rem, 3vw, 1.5rem); /* Escala fluida */
            cursor: pointer;
            padding: 0.3125rem 0.625rem; /* 5px 10px -> 0.3125rem 0.625rem */
            margin-right: 0.625rem; /* 10px -> 0.625rem */
            min-width: 2.5rem;
            min-height: 2.5rem;
            transition: transform 0.2s;
            flex-shrink: 0;
        }
.btn-volver-conversaciones:hover {
            transform: translateX(-3px);
        }
.conversacion-header-info {
            display: flex;
            align-items: center;
            flex: 1;
        }
.conversacion-avatar {
            width: 2.8125rem; /* 45px -> 2.8125rem */
            height: 2.8125rem; /* 45px -> 2.8125rem */
            min-width: 2.8125rem;
            min-height: 2.8125rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem; /* 12px -> 0.75rem */
            font-size: clamp(1rem, 2.25vw, 1.125rem); /* Escala fluida */
            color: white;
            font-weight: bold;
            overflow: hidden;
            flex-shrink: 0;
        }
.conversacion-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.conversacion-info h2 {
            margin: 0;
            color: var(--color-text-main);
            font-size: clamp(1rem, 2.5vw, 1.1rem);
            font-weight: bold !important;
            overflow-wrap: break-word;
            word-break: break-word;
        }
.conversacion-estado {
            font-size: clamp(0.75rem, 1.5vw, 0.85rem);
            color: var(--color-text-secondary);
            font-weight: bold !important;
        }
.btn-conversacion-menu {
            background: transparent;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 5px 10px;
        }
.conversacion-mensajes {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem; /* 20px -> 1.25rem */
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch; /* Permitir que los mensajes ocupen todo el ancho */
            min-height: 0; /* Permite que flex funcione correctamente */
        }
.mensajes-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch; /* Permitir que los mensajes se distribuyan */
        }
.mensaje-item {
            position: relative;
            display: flex;
            margin-bottom: 0;
            animation: fadeInMessage 0.3s ease-in;
            width: 100%;
            align-items: flex-start;
            flex-shrink: 0;
        }
@keyframes fadeInMessage {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
/* En móvil: todos los mensajes a la izquierda */
.mensaje-item.propio {
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 0;
            margin-right: auto;
        }
.mensaje-item.ajeno {
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 0;
            margin-right: auto;
        }
.mensaje-burbuja {
            max-width: 85%;
            min-width: 12.5rem; /* 200px -> 12.5rem */
            padding: 0.75rem 1rem; /* 12px 16px -> 0.75rem 1rem */
            border-radius: 1.125rem; /* 18px -> 1.125rem */
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            white-space: normal;
            position: relative;
        }
.mensaje-item.propio .mensaje-burbuja {
            background: var(--color-bg-card);
            background-color: var(--color-bg-card);
            color: var(--color-text-main);
            border-bottom-left-radius: 4px;
            margin-left: 0;
            margin-right: auto;
        }
/* Dark: mensajes propios con contraste legible */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after {
            background: var(--color-primary) !important;
            background-color: var(--color-primary) !important;
            color: var(--color-text-inverse) !important;
        }
.mensaje-item.ajeno .mensaje-burbuja {
            background: var(--color-bg-muted);
            color: var(--color-text-main);
            border-bottom-left-radius: 4px;
            margin-left: 0;
            margin-right: auto;
        }
/* En pantallas grandes (desktop): distribuir mensajes */
/* Los estilos de desktop se manejan en responsive.css para evitar conflictos */
.mensaje-texto {
            margin: 0;
            line-height: 1.5;
            color: var(--color-text-main) !important;
            font-weight: bold !important;
            font-size: clamp(0.875rem, 2vw, 1rem);
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            white-space: normal;
            width: 100%;
        }
.mensaje-metadata {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
            font-size: 0.75rem;
            opacity: 0.7;
        }
.mensaje-traduccion-badge {
            display: inline-block;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.4), rgba(56, 142, 60, 0.4));
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-left: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(76, 175, 80, 0.5);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
.mensaje-traduccion-badge:hover {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.6), rgba(56, 142, 60, 0.6));
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }
.mensaje-traduccion-badge.error {
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.4), rgba(198, 40, 40, 0.4));
            border-color: rgba(244, 67, 54, 0.5);
        }
.mensaje-traduccion-badge.error:hover {
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.6), rgba(198, 40, 40, 0.6));
        }
.mensaje-estado {
            display: inline-block;
            font-size: 0.7rem;
            margin-left: 5px;
            font-weight: bold;
        }
.conversacion-input-container {
            padding: 0.9375rem 1.25rem; /* 15px 20px -> 0.9375rem 1.25rem */
            min-height: 3.75rem; /* Altura mínima flexible */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 10;
        }
/* Desktop: conversación dentro del chat-area, sin fixed ni 100vw */
@media (min-width: 769px) {
            .conversacion-view {
                position: relative;
                width: 100%;
                height: 100%;
                min-height: 0;
                margin-top: 0;
                box-sizing: border-box;
            }
            
            .conversacion-header {
                width: 100%;
                position: relative;
                z-index: 1;
            }
            
            .conversacion-input-container {
                position: relative;
                width: 100%;
                flex-shrink: 0;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            }
            
            .conversacion-mensajes {
                padding-bottom: 16px;
            }
        }
/* Corrección para móvil: chat dentro del contenedor, sin position fixed ni 100vw */
@media (max-width: 768px) {
            .conversacion-view {
                height: 100%;
                position: relative;
                width: 100%;
            }
            
            .conversacion-view.active {
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            
            .conversacion-header {
                flex-shrink: 0;
            }
            
            .conversacion-mensajes {
                flex: 1;
                overflow-y: auto !important;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 20px;
                min-height: 0;
                max-height: 100%;
            }
            
            .conversacion-input-container {
                flex-shrink: 0;
                display: block !important; /* Forzar que sea visible */
                visibility: visible !important;
                opacity: 1 !important;
                position: relative;
                z-index: 1000;
                padding: 12px 15px;
                padding-bottom: max(15px, env(safe-area-inset-bottom, 15px));
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                box-sizing: border-box;
                width: 100%;
            }
            
            .conversacion-input-wrapper {
                display: flex !important;
                visibility: visible !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 6px 10px !important;
                box-sizing: border-box !important;
                width: 100% !important;
            }

            .conversacion-input-wrapper .btn-adjuntar-archivo,
            .conversacion-input-wrapper .btn-enviar-mensaje {
                flex-shrink: 0 !important;
                margin: 0 !important;
            }

            .conversacion-input-wrapper #mensajeInput {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                margin: 0 !important;
            }
            
            #mensajeInput {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            #mensajeInput:focus {
                position: relative;
            }
        }
.conversacion-input-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 0.625rem; /* 10px -> 0.625rem */
            background: rgba(255, 255, 255, 0.2);
            border-radius: 1.5625rem; /* 25px -> 1.5625rem */
            padding: 0.5rem 0.9375rem; /* 8px 15px -> 0.5rem 0.9375rem */
            min-height: 2.5rem; /* Altura mínima flexible */
        }
#mensajeInput {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: clamp(0.875rem, 2vw, 1rem); /* Escala fluida */
            resize: none;
            max-height: 7.5rem; /* 120px -> 7.5rem */
            min-height: 1.5rem; /* Altura mínima */
            overflow-y: auto;
            outline: none;
            overflow-wrap: break-word;
            word-break: break-word;
            line-height: 1.5;
        }
#mensajeInput::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
.btn-adjuntar-archivo {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            width: 2.25rem; /* 36px -> 2.25rem */
            height: 2.25rem; /* 36px -> 2.25rem */
            min-width: 2.25rem;
            min-height: 2.25rem;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: clamp(1.125rem, 2.5vw, 1.2rem); /* Escala fluida */
        }
.btn-adjuntar-archivo:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.1);
        }
.btn-adjuntar-archivo:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
/* Dark mode: botón adjuntar en gris */
:root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-adjuntar-archivo {
            background: rgba(176, 176, 176, 0.15) !important;
            border: 1px solid rgba(176, 176, 176, 0.3) !important;
            color: #B0B0B0 !important;
        }
:root[data-theme="dark"] .btn-adjuntar-archivo:hover:not(:disabled),
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover:not(:disabled) {
            background: rgba(224, 224, 224, 0.25) !important;
            border-color: rgba(224, 224, 224, 0.4) !important;
            color: #E0E0E0 !important;
        }
.btn-enviar-mensaje {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            width: 2.25rem; /* 36px -> 2.25rem */
            height: 2.25rem; /* 36px -> 2.25rem */
            min-width: 2.25rem;
            min-height: 2.25rem;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: clamp(1rem, 2vw, 1.125rem); /* Escala fluida */
        }
.btn-enviar-mensaje:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.1);
        }
.btn-enviar-mensaje:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
/* Dark mode: botón enviar en gris */
:root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-enviar-mensaje {
            background: rgba(176, 176, 176, 0.15) !important;
            border: 1px solid rgba(176, 176, 176, 0.3) !important;
            color: #B0B0B0 !important;
        }
:root[data-theme="dark"] .btn-enviar-mensaje:hover:not(:disabled),
        :root[data-theme="dark"] .btn-enviar-mensaje:hover:not(:disabled) {
            background: rgba(224, 224, 224, 0.25) !important;
            border-color: rgba(224, 224, 224, 0.4) !important;
            color: #E0E0E0 !important;
        }
/* Barra de progreso de subida */
.upload-progress-container {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
.upload-progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
.upload-file-name {
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.9rem;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
.btn-cancelar-upload {
            background: rgba(255, 0, 0, 0.3);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: all 0.3s ease;
        }
.btn-cancelar-upload:hover {
            background: rgba(255, 0, 0, 0.5);
            transform: scale(1.1);
        }
.upload-progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 5px;
        }
.upload-progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            width: 0%;
            transition: width 0.3s ease;
        }
.upload-progress-text {
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.8rem;
            text-align: right;
            display: block;
        }
/* Modal de adjuntos */
.modal-adjuntos-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(5px);
        }
.modal-adjuntos {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
.modal-adjuntos h3 {
            color: var(--color-text-main);
            font-weight: bold;
            margin: 0 0 20px 0;
            text-align: center;
            font-size: 1.3rem;
        }
.modal-adjuntos-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
.modal-adjuntos-option {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
.modal-adjuntos-option:hover {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }
.modal-adjuntos-option-icon {
            font-size: 2rem;
            width: 50px;
            text-align: center;
        }
.modal-adjuntos-option-text {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
        }
.modal-adjuntos-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.1);
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--color-text-main);
            font-weight: bold;
        }
.modal-adjuntos-close:hover {
            background: rgba(0, 0, 0, 0.2);
        }
/* Overrides modo oscuro para modal de adjuntos (alta prioridad) */
:root[data-theme="dark"] .modal-adjuntos-overlay {
            background: rgba(0, 0, 0, 0.88) !important;
        }
:root[data-theme="dark"] .modal-adjuntos {
            background: var(--app-surface) !important;
            border: 1px solid #1f2933 !important;
            color: #e5e7eb !important;
            box-shadow: 0 18px 52px rgba(0, 0, 0, 0.65) !important;
        }
:root[data-theme="dark"] .modal-adjuntos h3 {
            color: #e5e7eb !important;
        }
:root[data-theme="dark"] .modal-adjuntos-option {
            background: var(--app-surface) !important;
            border: 1px solid #2d2f38 !important;
            color: #e5e7eb !important;
        }
:root[data-theme="dark"] .modal-adjuntos-option:hover {
            background: #272a33 !important;
            border-color: #8a6fc2 !important;
        }
:root[data-theme="dark"] .modal-adjuntos-option-text,
        :root[data-theme="dark"] .modal-adjuntos-option-icon {
            color: #e5e7eb !important;
        }
:root[data-theme="dark"] .modal-adjuntos-close {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #e5e7eb !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }
:root[data-theme="dark"] .modal-adjuntos-close:hover {
            background: rgba(255, 255, 255, 0.18) !important;
        }
/* Input de archivo oculto */
#fileInputHidden {
            display: none;
        }
/* Modal de grabación de audio */
.modal-grabacion-audio-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
.modal-grabacion-audio {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
.modal-grabacion-audio h3 {
            color: var(--color-text-main);
            font-weight: bold;
            margin: 0 0 20px 0;
            text-align: center;
            font-size: 1.3rem;
        }
.modal-grabacion-audio-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.1);
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
.modal-grabacion-audio-close:hover {
            background: rgba(0, 0, 0, 0.2);
        }
.audio-grabacion-estado {
            text-align: center;
            padding: 20px;
            margin: 20px 0;
        }
.audio-grabacion-icono {
            font-size: 4rem;
            margin-bottom: 15px;
            animation: pulse 2s infinite;
        }
.audio-grabacion-icono.grabando {
            animation: pulse 0.5s infinite;
            color: #ff0000;
        }
@keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
.audio-grabacion-tiempo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--color-text-main);
            margin: 10px 0;
        }
.audio-grabacion-mensaje {
            font-size: 1rem;
            color: #666;
            margin-top: 10px;
        }
.audio-grabacion-preview {
            margin: 20px 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
.audio-grabacion-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
.btn-audio {
            padding: 15px 20px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
.btn-audio-grabar {
            background: #4CAF50;
            color: white;
        }
.btn-audio-grabar:hover {
            background: #45a049;
        }
.btn-audio-detener {
            background: #f44336;
            color: white;
        }
.btn-audio-detener:hover {
            background: #da190b;
        }
.btn-audio-confirmar {
            background: #6a4c93;
            color: white;
        }
.btn-audio-confirmar:hover {
            background: #5a3d83;
        }
.btn-audio-regrabar {
            background: #ff9800;
            color: white;
        }
.btn-audio-regrabar:hover {
            background: #e68900;
        }
/* Vista previa de archivo antes de enviar */
.mensaje-archivo-preview {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
.mensaje-archivo-preview img,
        .mensaje-archivo-preview video {
            max-width: 100px;
            max-height: 100px;
            border-radius: 8px;
            object-fit: cover;
        }
.mensaje-archivo-preview-info {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.9rem;
        }
.mensaje-archivo-preview-remove {
            background: rgba(255, 0, 0, 0.3);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }
/* Archivos adjuntos en mensajes */
.mensaje-archivo {
            margin-top: 8px;
            border-radius: 10px;
            overflow: hidden;
            max-width: 100%;
        }
.mensaje-archivo img,
        .mensaje-archivo video {
            max-width: 100%;
            max-height: 400px;
            display: block;
            border-radius: 10px;
            cursor: pointer;
        }
.mensaje-archivo audio {
            width: 100%;
            margin-top: 5px;
        }
.mensaje-archivo-documento {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            cursor: pointer;
        }
.mensaje-archivo-documento-icon {
            font-size: 2rem;
        }
.mensaje-archivo-documento-info {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
        }
.mensaje-archivo-documento-nombre {
            font-size: 0.9rem;
        }
.mensaje-archivo-documento-tamaño {
            font-size: 0.8rem;
            opacity: 0.7;
        }
/* Modal de visualización de imagen/video */
.modal-archivo-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }
.modal-archivo-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }
.modal-archivo-content img,
        .modal-archivo-content video {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 10px;
        }
.modal-archivo-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }
.modal-archivo-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
/* Cámara */
.camera-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10002;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
.camera-video {
            max-width: 100%;
            max-height: 70vh;
            border-radius: 10px;
        }
.camera-controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
        }
.camera-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
.camera-btn-capture {
            background: #4CAF50;
            color: white;
        }
.camera-btn-cancel {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
.camera-btn-switch {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.camera-btn:hover {
            transform: scale(1.05);
        }
/* Vista de Contactos - Estilo Telegram/WhatsApp */
.contactos-view {
            display: none;
            min-height: 100vh;
            padding-top: 0;
            background: transparent; /* Sin fondo propio */
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
.contactos-view.active {
            display: block;
        }
.contactos-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 15px;
            margin: 0;
            background: transparent;
            border-bottom: none;
            min-height: auto;
            width: 100%;
            box-sizing: border-box;
        }
.contactos-header h1 {
            margin: 0;
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            line-height: 1.2;
        }
.btn-buscar-contacto {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
.btn-buscar-contacto:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.contactos-search-container {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 10px;
        }
.contactos-search-input {
            flex: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--color-text-main);
            font-size: 0.95rem;
            outline: none;
        }
.contactos-search-input::placeholder {
            color: #999;
        }
.btn-cerrar-busqueda {
            background: transparent;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
.btn-cerrar-busqueda:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.contactos-list {
            padding: 5px;
            max-height: calc(100vh - 210px); /* Ajustado para navbar + header */
            overflow-y: auto;
        }
.contacto-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            margin-bottom: 2px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
.contacto-item:hover {
            background: rgba(255, 255, 255, 0.2);
            border-left-color: rgba(255, 255, 255, 0.5);
        }
.contacto-item.favorito {
            border-left-color: #FFD700;
        }
.contacto-item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
            color: white;
            font-weight: 600;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }
.contacto-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.contacto-item-avatar .favorito-badge {
            position: absolute;
            bottom: -2px;
            right: -2px;
            background: #FFD700;
            color: var(--color-text-main);
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
.contacto-item-info {
            flex: 1;
            min-width: 0;
        }
.contacto-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
.contacto-item-nombre {
            font-weight: 600;
            color: white;
            font-size: 0.95rem;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
.contacto-item-preview {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
.contacto-item-accion {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-left: 8px;
        }
.contacto-item-accion:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.contactos-loading,
        .contactos-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: white;
        }
.contactos-empty .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
/* Estilos para nueva tabla de contactos */
.contactos-tabla-search-container {
            padding: 10px 15px;
            background: transparent;
            border-bottom: none;
        }
.contactos-search-status-container {
            display: flex !important;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            padding: 4px 0;
            min-height: 40px;
            width: 100%;
            cursor: pointer;
            visibility: visible !important;
            opacity: 1 !important;
        }
.contactos-search-status-container .user-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
.contactos-search-status-container .user-status-badge:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }
/* Asegurar visibilidad en desktop */
@media (min-width: 769px) {
            .contactos-search-status-container {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 40px !important;
            }
        }
.contactos-tabla-search-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
.contactos-tabla-search-input {
            flex: 1;
            padding: 8px 35px 8px 14px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--color-text-main);
            font-size: 0.9rem;
            outline: none;
            transition: all 0.3s ease;
        }
.contactos-tabla-search-input:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: white;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
        }
.contactos-tabla-search-input::placeholder {
            color: #999;
        }
.contactos-tabla-search-clear {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
.contactos-tabla-search-clear:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.contactos-tabla-wrapper {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            padding: 20px;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }
.contactos-tabla-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
.contactos-tabla-loading p {
            color: #ffffff !important;
            font-weight: 500 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        }
.contactos-tabla {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
.contactos-tabla thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
.contactos-tabla-th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            user-select: none;
        }
.contactos-tabla-th.ordenable {
            cursor: pointer;
            transition: background 0.2s ease;
            position: relative;
        }
.contactos-tabla-th.ordenable:hover {
            background: rgba(255, 255, 255, 0.1);
        }
.contactos-tabla-th.orden-activo {
            background: rgba(255, 255, 255, 0.15);
        }
.orden-indicador {
            margin-left: 8px;
            font-size: 0.8rem;
            opacity: 0.8;
        }
.contactos-tabla tbody tr {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
.contactos-tabla tbody tr:hover {
            background: rgba(106, 76, 147, 0.1);
            /* Removido transform para evitar efectos visuales no deseados */
        }
.contactos-tabla tbody tr:active {
            background: rgba(106, 76, 147, 0.2);
            /* Removido transform para evitar efectos visuales no deseados */
        }
/* Prevenir hover en la fila cuando el mouse está sobre el avatar */
.contactos-tabla tbody tr:hover .contactos-tabla-avatar-container {
            /* El avatar tiene su propio hover, no afectar la fila */
        }
.contactos-tabla tbody td {
            padding: 15px 20px;
            vertical-align: middle;
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 1.1rem;
        }
.contactos-tabla-avatar {
            width: 60px;
        }
.contactos-tabla-avatar-container {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
.contactos-tabla-avatar-container:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(106, 76, 147, 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
/* Asegurar que la imagen del avatar NO se muestre fuera de su contenedor */
.contactos-tabla-avatar-container {
            overflow: hidden;
            position: relative;
        }
/* Prevenir cualquier efecto de zoom o expansión en hover de la fila */
.contactos-tabla tbody tr:hover .contactos-tabla-avatar-img {
            transform: none;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }
/* Estilos para el modal de imagen */
.contactos-modal-imagen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            animation: fadeIn 0.2s ease;
        }
@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
.contactos-modal-imagen img {
            max-width: 90vw;
            max-height: 90vh;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            object-fit: contain;
            cursor: default;
        }
.contactos-tabla-archat {
            width: 80px;
            text-align: center;
            vertical-align: middle;
        }
.archat-icon {
            display: inline-block;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }
.archat-icon:hover {
            transform: scale(1.2);
        }
/* Ícono fijo para mensajes leídos o sin mensajes */
.archat-icon-fixed {
            opacity: 0.3;
        }
.contactos-tabla-estado {
            width: 150px;
            text-align: center;
        }
.contactos-tabla-estado .user-status-badge {
            cursor: pointer;
            transition: all 0.3s ease;
        }
.contactos-tabla-estado .user-status-badge:hover {
            transform: scale(1.15);
            filter: brightness(1.2);
        }
.contactos-tabla-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            pointer-events: none; /* Prevenir que la imagen capture eventos */
        }
.contactos-tabla-avatar-inicial {
            color: white;
            font-weight: 600;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
.contactos-tabla-empty {
            text-align: center;
            padding: 40px 20px;
            color: #ffffff;
            font-size: 1rem;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
/* Vista de Ayuda - Solo variables (Dark y Argentina) */
.ayuda-view {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 140px);
        }
.ayuda-container {
            background: var(--color-bg-card);
            border-radius: 15px;
            padding: 30px;
            box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.1));
            border: 1px solid var(--color-border);
        }
.ayuda-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--color-border);
        }
.ayuda-header h1 {
            color: var(--color-primary);
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
        }
.ayuda-content {
            color: var(--color-text-main);
        }
.ayuda-section {
            margin-bottom: 40px;
        }
.ayuda-section h2 {
            color: var(--color-primary);
            font-size: 1.8rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
.ayuda-section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--color-text-main);
            margin-bottom: 15px;
        }
.ayuda-steps {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-top: 20px;
        }
.ayuda-step {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            background: var(--color-bg-muted);
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid var(--color-primary);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
.ayuda-step:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
        }
.ayuda-step-number {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--color-bg-input);
            color: var(--color-text-main);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            border: 1px solid var(--color-border);
        }
.ayuda-step-content {
            flex: 1;
        }
.ayuda-step-content h3 {
            color: var(--color-primary);
            font-size: 1.3rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
.ayuda-step-content p {
            color: var(--color-text-main);
            font-size: 1rem;
            line-height: 1.6;
            margin: 0;
        }
.ayuda-features,
        .ayuda-tips {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
.ayuda-features li,
        .ayuda-tips li {
            padding: 15px 20px;
            margin-bottom: 10px;
            background: var(--color-bg-muted);
            border-radius: 8px;
            border-left: 3px solid var(--color-primary);
            font-size: 1rem;
            line-height: 1.6;
            color: var(--color-text-main);
            transition: background 0.2s ease;
        }
.ayuda-features li:hover,
        .ayuda-tips li:hover {
            background: var(--color-bg-input);
        }
.ayuda-about {
            background: var(--color-bg-muted);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            border: 1px solid var(--color-border);
        }
.ayuda-about p {
            margin: 10px 0;
            color: var(--color-text-main);
        }
.ayuda-about-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary);
            margin: 15px 0 !important;
        }
.ayuda-about-location {
            font-size: 1.1rem;
            color: var(--color-text-muted);
            font-style: italic;
        }
.ayuda-about-linkedin {
            margin-top: 20px !important;
        }
.ayuda-linkedin-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            padding: 12px 24px;
            background: var(--color-bg-muted);
            border-radius: 8px;
            border: 2px solid var(--color-border);
            transition: all 0.3s ease;
        }
.ayuda-linkedin-link:hover {
            background: var(--color-bg-input);
            border-color: var(--color-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
        }
.ayuda-linkedin-link i {
            font-size: 1.3rem;
        }
.ayuda-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 2px solid var(--color-border);
            text-align: center;
        }
.ayuda-footer p {
            color: var(--color-text-main);
            font-size: 0.9rem;
            margin: 0;
        }
.ayuda-footer strong {
            color: var(--color-primary);
        }
.ayuda-footer span {
            color: var(--color-text-muted);
            font-size: 0.85rem;
        }
/* Responsive para ayuda */
@media (max-width: 768px) {
            .ayuda-view {
                padding: 15px;
            }
            
            .ayuda-container {
                padding: 20px;
            }
            
            .ayuda-header h1 {
                font-size: 2rem;
            }
            
            .ayuda-section h2 {
                font-size: 1.5rem;
            }
            
            .ayuda-step {
                flex-direction: column;
                gap: 15px;
            }
            
            .ayuda-step-number {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
            
            .ayuda-about {
                padding: 20px;
            }
            
            .ayuda-about-name {
                font-size: 1.3rem;
            }
            
            .ayuda-linkedin-link {
                font-size: 1rem;
                padding: 10px 20px;
            }
        }
/* Animación de pulso para estado online */
@keyframes pulse-online {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }
@keyframes glow {
            0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
            50% { filter: drop-shadow(0 0 6px currentColor); }
        }
/* Badge de Estado de Usuario - Diseño Moderno */
.user-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 250, 0.98) 100%);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.5);
            position: relative;
            overflow: hidden;
        }
.user-status-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }
.user-status-badge:hover::before {
            left: 100%;
        }
.user-status-badge-small {
            font-size: 0.75rem;
            padding: 3px 8px;
            gap: 5px;
            border-radius: 14px;
        }
.user-status-badge-large {
            font-size: 1.05rem;
            padding: 8px 18px;
            gap: 10px;
            border-radius: 24px;
        }
.user-status-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            line-height: 1;
            filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
            transition: all 0.3s ease;
        }
.user-status-badge-small .user-status-indicator {
            font-size: 1.1em;
        }
.user-status-badge-large .user-status-indicator {
            font-size: 1.5em;
        }
.user-status-text {
            color: #1a202c;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
            letter-spacing: 0.3px;
        }
.user-status-badge-small .user-status-text {
            max-width: 90px;
            font-size: 0.75rem;
            font-weight: 600;
        }
.user-status-badge-large .user-status-text {
            max-width: 180px;
            font-size: 1rem;
        }
/* Estados específicos - Diseños Vibrantes */
.user-status-online {
            border: 2px solid rgba(0, 210, 106, 0.6);
            background: linear-gradient(135deg, 
                rgba(0, 255, 127, 0.25) 0%, 
                rgba(144, 238, 144, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(0, 210, 106, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
.user-status-online .user-status-indicator {
            animation: pulse-online 2s ease-in-out infinite;
            color: #00d26a;
            filter: drop-shadow(0 0 4px rgba(0, 210, 106, 0.6));
        }
.user-status-idle {
            border: 2px solid rgba(250, 166, 26, 0.6);
            background: linear-gradient(135deg, 
                rgba(255, 193, 7, 0.25) 0%, 
                rgba(255, 223, 0, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(250, 166, 26, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
.user-status-idle .user-status-indicator {
            color: #faa61a;
            filter: drop-shadow(0 0 4px rgba(250, 166, 26, 0.6));
        }
.user-status-dnd {
            border: 2px solid rgba(240, 71, 71, 0.6);
            background: linear-gradient(135deg, 
                rgba(240, 71, 71, 0.25) 0%, 
                rgba(255, 99, 71, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(240, 71, 71, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
.user-status-dnd .user-status-indicator {
            color: #f04747;
            filter: drop-shadow(0 0 4px rgba(240, 71, 71, 0.6));
        }
.user-status-busy {
            border: 2px solid rgba(255, 69, 0, 0.6);
            background: linear-gradient(135deg, 
                rgba(255, 69, 0, 0.25) 0%, 
                rgba(255, 140, 0, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(255, 69, 0, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
.user-status-busy .user-status-indicator {
            color: #ff4500;
            animation: glow 2s ease-in-out infinite;
        }
.user-status-offline {
            border: 2px solid rgba(153, 153, 153, 0.4);
            background: linear-gradient(135deg, 
                rgba(153, 153, 153, 0.15) 0%, 
                rgba(192, 192, 192, 0.1) 50%,
                rgba(245, 245, 245, 0.98) 100%);
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            opacity: 0.85;
        }
.user-status-offline .user-status-indicator {
            color: #999;
        }
.user-status-offline .user-status-text {
            color: #718096;
        }
.user-status-custom {
            border: 2px solid rgba(106, 76, 147, 0.6);
            background: linear-gradient(135deg, 
                rgba(106, 76, 147, 0.3) 0%, 
                rgba(139, 92, 246, 0.2) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(106, 76, 147, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
.user-status-custom .user-status-indicator {
            color: #9d7fcc;
            filter: drop-shadow(0 0 4px rgba(106, 76, 147, 0.6));
        }
/* Efectos hover mejorados */
.user-status-badge:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 6px 20px rgba(0, 0, 0, 0.12),
                0 3px 8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }
.user-status-badge:active {
            transform: translateY(-1px) scale(0.98);
        }
/* Modal para ver imagen de contacto */
.contacto-imagen-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            z-index: 3001;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
.contacto-imagen-modal-overlay.active {
            display: flex;
        }
.contacto-imagen-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
.contacto-imagen-modal-content img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }
.contacto-imagen-modal-close {
            position: absolute;
            top: -50px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
.contacto-imagen-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.contacto-imagen-modal-nombre {
            margin-top: 15px;
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }
@media (max-width: 768px) {
            .contacto-imagen-modal-close {
                top: 10px;
                right: 10px;
                width: 35px;
                height: 35px;
                font-size: 24px;
            }

            .contacto-imagen-modal-nombre {
                font-size: 1rem;
                margin-top: 10px;
            }
        }
/* Modal de Estado Personalizado */
.custom-status-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 3002;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
.custom-status-modal-overlay.active {
            display: flex;
        }
.custom-status-modal {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            animation: modalSlideIn 0.3s ease-out;
        }
.custom-status-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }
.custom-status-modal-header h2 {
            margin: 0;
            color: white;
            font-size: 24px;
            font-weight: 600;
        }
.custom-status-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
.custom-status-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.custom-status-modal-body {
            padding: 30px;
            flex: 1;
            overflow-y: auto;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 30px;
        }
.custom-status-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
.custom-status-input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }
.custom-status-input-container input {
            flex: 1;
        }
.emoji-picker-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.emoji-picker-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
.custom-status-preview {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.custom-status-preview h3 {
            margin: 0 0 15px 0;
            color: white;
            font-size: 16px;
            font-weight: 600;
        }
.preview-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.preview-indicator {
            font-size: 16px;
        }
.preview-text {
            color: white;
            font-size: 14px;
            font-weight: 500;
        }
.custom-status-suggestions {
            margin-top: 10px;
        }
.custom-status-suggestions h3 {
            margin: 0 0 15px 0;
            color: white;
            font-size: 16px;
            font-weight: 600;
        }
.suggestions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
.suggestion-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 10px 12px;
            color: white;
            cursor: pointer;
            font-size: 14px;
            text-align: left;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
.suggestion-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
.custom-status-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            padding: 20px 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }
/* Checkbox personalizado */
.checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: white;
            font-weight: 500;
            gap: 10px;
        }
.checkbox-label input[type="checkbox"] {
            display: none;
        }
.checkmark {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            position: relative;
            transition: all 0.3s ease;
        }
.checkbox-label input[type="checkbox"]:checked + .checkmark {
            background: #4CAF50;
            border-color: #4CAF50;
        }
.checkmark::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
            opacity: 1;
        }
/* Selector de Emojis */
.emoji-picker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            z-index: 3003;
            max-width: 300px;
            width: 90%;
            max-height: 400px;
        }
.emoji-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #f8f9fa;
            border-radius: 15px 15px 0 0;
        }
.emoji-picker-header span {
            font-weight: 600;
            color: var(--color-text-main);
        }
.emoji-picker-header button {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
        }
.emoji-picker-grid {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
            gap: 10px;
            max-height: 300px;
            overflow-y: auto;
        }
.emoji-picker-grid span {
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.emoji-picker-grid span:hover {
            background: #f0f0f0;
        }
@media (max-width: 768px) {
            .custom-status-modal {
                max-width: 95%;
                max-height: 95vh;
            }

            .custom-status-modal-body {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .custom-status-modal-header,
            .custom-status-modal-body,
            .custom-status-modal-footer {
                padding: 20px;
            }

            .suggestions-grid {
                grid-template-columns: 1fr;
            }

            .suggestion-btn {
                text-align: center;
            }
        }
@media (max-width: 768px) {
            .contactos-tabla-wrapper {
                padding: 10px;
                overflow-x: visible;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                min-height: 300px !important;
            }
            
            .contactos-tabla-container {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 200px !important;
                width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            .contactos-tabla {
                width: 100%;
                min-width: auto;
                font-size: 0.85rem;
                display: none !important; /* Ocultar tabla en móvil */
                overflow-x: visible;
                visibility: hidden !important;
            }
            
            /* Asegurar que la lista móvil sea visible */
            .contactos-lista-movil {
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            /* Mostrar lista móvil en lugar de tabla */
            .contactos-lista-movil {
                display: flex !important;
            }
            
            .contactos-tabla thead,
            .contactos-tabla tbody,
            .contactos-tabla tr {
                display: block;
            }
            
            .contactos-tabla thead {
                display: none;
            }
            
            .contactos-tabla tbody tr {
                display: flex;
                flex-direction: column;
                margin-bottom: 15px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 10px;
                padding: 15px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            
            .contactos-tabla tbody td {
                display: flex;
                align-items: center;
                padding: 8px 0;
                border: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }
            
            .contactos-tabla tbody td:last-child {
                border-bottom: none;
            }
            
            .contactos-tabla tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                min-width: 100px;
                margin-right: 10px;
                color: #9d7fcc;
            }
            
            .contactos-tabla-avatar {
                width: 100%;
                justify-content: center;
            }
            
            .contactos-tabla-avatar-container {
                width: 60px;
                height: 60px;
                margin: 0 auto;
            }
            
            .contactos-tabla-avatar-inicial {
                font-size: 24px;
            }
            
            .contactos-tabla-th,
            .contactos-tabla tbody td {
                padding: 8px 0;
            }
            
            .contactos-tabla-search-wrapper {
                max-width: 100%;
            }

            .contactos-tabla-estado {
                width: auto;
                padding: 5px;
            }

            .contactos-tabla tbody td[data-label="Estado:"] {
                justify-content: center;
                padding: 5px 0;
            }

            .user-status-badge-small {
                font-size: 0.75rem;
                padding: 1px 4px;
                gap: 2px;
            }
            
            /* Lista tipo WhatsApp para móviles */
            .contactos-lista-movil {
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                background: rgba(255, 255, 255, 0.05) !important;
                border-radius: 0 !important;
                width: 100% !important;
                min-height: 200px !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .contactos-lista-item {
                display: flex !important;
                align-items: center;
                padding: 12px 16px;
                background: rgba(255, 255, 255, 0.95) !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                transition: background-color 0.2s ease;
                gap: 12px;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 60px;
            }
            
            .contactos-lista-item:active {
                background: rgba(0, 0, 0, 0.05);
            }
            
            .contactos-lista-item:last-child {
                border-bottom: none;
            }
            
            .contactos-lista-avatar {
                flex-shrink: 0;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;
                background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
            }
            
            .contactos-lista-avatar-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .contactos-lista-avatar-inicial {
                font-size: 20px;
                font-weight: 600;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            
            .contactos-lista-contenido {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            
            .contactos-lista-nombre-linea {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }
            
            .contactos-lista-nombre {
                font-size: 16px;
                font-weight: 600;
                color: var(--color-text-main);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
            }
            
            .contactos-lista-estado {
                flex-shrink: 0;
            }
            
            .contactos-lista-info {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                color: #666;
            }
            
            .contactos-lista-status-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .contactos-lista-derecha {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
                min-width: 50px;
            }
            
            .contactos-lista-badge-mensajes {
                background: #25D366;
                color: white;
                border-radius: 12px;
                padding: 2px 8px;
                font-size: 12px;
                font-weight: 600;
                min-width: 20px;
                text-align: center;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .contactos-lista-archat-icon {
                font-size: 18px;
                animation: archatBlink 1.5s ease-in-out infinite;
            }
            
            @keyframes archatBlink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            
            /* Ocultar tabla en móvil y tablets, mostrar lista */
            @media (max-width: 1025px) {
                /* FORZAR VISIBILIDAD EN MÓVIL - ULTRA AGRESIVO */
                .contactos-view.active {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: relative !important;
                    z-index: 1 !important;
                    min-height: calc(100vh - 70px) !important;
                }
                
                .contactos-tabla-wrapper {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 300px !important;
                    padding: 10px !important;
                    overflow: visible !important;
                    max-height: none !important;
                    position: relative !important;
                    z-index: 2 !important;
                }
                
                .contactos-tabla-container {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 200px !important;
                    padding: 10px !important;
                    overflow: visible !important;
                    max-height: none !important;
                    position: relative !important;
                    z-index: 3 !important;
                    background: transparent !important;
                }
                
                /* Ocultar tabla en móvil */
                .contactos-tabla {
                    display: none !important;
                }
                
                /* Mostrar lista móvil */
                .contactos-lista-movil,
                #contactosListaBackup,
                div[style*="flex-direction: column"][style*="background: rgba(255,255,255"] {
                    display: flex !important;
                    flex-direction: column !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 200px !important;
                    position: relative !important;
                    z-index: 4 !important;
                }
                
                /* Forzar visibilidad de items de lista */
                div[data-user-id][style*="display: flex"] {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    position: relative !important;
                    z-index: 5 !important;
                }
                
                /* Forzar visibilidad del test visual */
                div[style*="background: red"] {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: relative !important;
                    z-index: 9999 !important;
                }
            }
            
            /* Ocultar lista en desktop, mostrar tabla */
            @media (min-width: 1026px) {
                .contactos-lista-movil {
                    display: none !important;
                }
                
                .contactos-tabla {
                    display: table !important;
                }
            }

            .user-status-badge-small .user-status-indicator {
                font-size: 0.9em;
            }
        }
@media (max-width: 768px) {
            .conversacion-item {
                padding: 12px;
            }
            
            .conversacion-item-avatar {
                width: 45px;
                height: 45px;
                margin-right: 12px;
            }
            
            .mensaje-burbuja {
                max-width: 85%;
            }
            
            .contacto-item {
                padding: 12px;
            }
            
            .contacto-item-avatar {
                width: 44px;
                height: 44px;
                margin-right: 10px;
            }
            
        }
@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
.menu-header {
            text-align: center;
            margin-bottom: 40px;
            padding-top: 20px;
        }
.menu-header img {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            object-fit: contain;
        }
.menu-options {
            max-width: 500px;
            margin: 0 auto;
        }
.menu-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.menu-item:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
.menu-item-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
.menu-item-description {
            font-size: 0.9rem;
            opacity: 0.8;
        }
.menu-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }
/* Modal de Perfil */
.perfil-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 2000;
            overflow-y: auto;
            padding: 20px;
        }
.perfil-modal-overlay.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }
.perfil-view {
            display: none;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-radius: 20px;
            padding: 30px;
            max-width: 800px;
            width: 100%;
            max-height: calc(90vh - 70px);
            overflow-y: auto;
            margin: 20px auto;
            margin-top: 90px; /* Altura del navbar + margen */
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            position: relative;
            box-sizing: border-box;
        }
.perfil-view.active {
            display: block;
        }
/* Modal de Selección de Contactos */
.contactos-modal-overlay {
            display: none !important;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 2001;
            overflow-y: auto;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
.contactos-modal-overlay.active {
            display: flex !important;
            align-items: flex-start;
            justify-content: center;
            visibility: visible !important;
            opacity: 1 !important;
        }
.contactos-modal {
            background: white;
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
.contactos-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;
            border-bottom: 1px solid #e0e0e0;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: relative;
        }
.contactos-modal-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }
.contactos-modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
.contactos-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
.contactos-modal-search {
            position: relative;
            padding: 20px 30px;
            border-bottom: 1px solid #e0e0e0;
        }
.contactos-modal-search-input {
            width: 100%;
            padding: 12px 40px 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
.contactos-modal-search-input:focus {
            outline: none;
            border-color: #6a4c93;
        }
.contactos-modal-search-icon {
            position: absolute;
            right: 45px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }
.contactos-modal-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px 0;
        }
/* Estilos para tabla de usuarios */
.contactos-modal-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
.contactos-modal-table thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
.contactos-modal-table th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.contactos-modal-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background 0.2s;
        }
.contactos-modal-table tbody tr:hover {
            background: #f5f5f5;
        }
.contactos-modal-table td {
            padding: 15px 20px;
            vertical-align: middle;
        }
.contactos-modal-cell-usuario {
            min-width: 250px;
        }
.contactos-modal-usuario-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
.contactos-modal-usuario-info {
            flex: 1;
            min-width: 0;
        }
.contactos-modal-cell-pais,
        .contactos-modal-cell-idioma {
            min-width: 150px;
        }
.contactos-modal-pais-container,
        .contactos-modal-idioma-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
.contactos-modal-flag {
            font-size: 20px;
            line-height: 1;
        }
.contactos-modal-pais-nombre,
        .contactos-modal-idioma-nombre {
            font-size: 14px;
            color: var(--color-text-main);
        }
.contactos-modal-cell-accion {
            min-width: 180px;
            text-align: right;
        }
.contactos-modal-accion-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
.contactos-modal-btn-contactar {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
.contactos-modal-btn-contactar:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(106, 76, 147, 0.4);
        }
.contactos-modal-btn-contactar:active {
            transform: translateY(0);
        }
@media (max-width: 768px) {
            .contactos-modal-table {
                font-size: 12px;
            }
            
            .contactos-modal-table th,
            .contactos-modal-table td {
                padding: 10px 12px;
            }
            
            .contactos-modal-cell-usuario {
                min-width: 180px;
            }
            
            .contactos-modal-cell-pais,
            .contactos-modal-cell-idioma {
                min-width: 100px;
            }
            
            .contactos-modal-cell-accion {
                min-width: 120px;
            }
            
            .contactos-modal-flag {
                font-size: 16px;
            }
            
            .contactos-modal-pais-nombre,
            .contactos-modal-idioma-nombre {
                font-size: 12px;
            }
            
            .contactos-modal-btn-contactar {
                padding: 6px 12px;
                font-size: 12px;
            }
        }
.contactos-modal-loading,
        .contactos-modal-empty {
            padding: 40px 30px;
            text-align: center;
        }
.contactos-modal-item {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f0f0f0;
        }
.contactos-modal-item:hover {
            background: #f5f5f5;
        }
.contactos-modal-item-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
            overflow: hidden;
        }
.contactos-modal-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.contactos-modal-item-info {
            flex: 1;
            min-width: 0;
        }
.contactos-modal-item-name {
            font-weight: 600;
            font-size: 16px;
            color: var(--color-text-main);
            margin-bottom: 4px;
        }
.contactos-modal-item-email {
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
.contactos-modal-item-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 10px;
        }
.contactos-modal-item-badge.contacto {
            background: rgba(106, 76, 147, 0.2);
            color: #9d7fcc;
        }
.contactos-modal-item-badge.conversacion {
            background: #e8f5e9;
            color: #388e3c;
        }
@media (max-width: 768px) {
            .contactos-modal {
                max-width: 100%;
                max-height: 100vh;
                border-radius: 0;
                margin: 0;
            }
            
            .contactos-modal-overlay {
                padding: 0;
            }
            
            .contactos-modal-header {
                padding: 15px 20px;
                padding-right: 60px;
            }
            
            .contactos-modal-search {
                padding: 15px 20px;
            }
        }
.perfil-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
@media (max-width: 768px) {
            .perfil-modal-close {
                top: 10px;
                right: 10px;
                width: 35px;
                height: 35px;
                font-size: 20px;
            }
        }
.perfil-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }
.perfil-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-right: 60px; /* Espacio para el botón de cerrar */
            position: relative;
        }
.perfil-header h1 {
            font-size: 2rem;
            margin: 0;
        }
@media (max-width: 768px) {
            .perfil-header {
                padding-right: 50px;
            }
            
            .perfil-header h1 {
                font-size: 1.5rem;
            }
        }
.btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
.btn-editar {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            white-space: nowrap;
        }
.btn-editar:hover {
            background: rgba(255, 255, 255, 0.3);
        }
.btn-salir-perfil {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 12px 30px;
            margin: 30px auto 0;
            display: block;
            width: auto;
            min-width: 150px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
.btn-salir-perfil:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
.btn-salir-perfil span {
            margin-right: 8px;
        }
.btn-guardar {
            background: #4CAF50;
            color: white;
        }
.btn-guardar:hover:not(:disabled) {
            background: #45a049;
        }
.btn-cancelar {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            margin-left: 10px;
        }
.btn-cancelar:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.2);
        }
.btn-volver {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            margin-bottom: 20px;
        }
.btn-volver:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
.mensaje {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
.mensaje-success {
            background: rgba(76, 175, 80, 0.3);
            border: 1px solid rgba(76, 175, 80, 0.5);
        }
.mensaje-error {
            background: rgba(244, 67, 54, 0.3);
            border: 1px solid rgba(244, 67, 54, 0.5);
        }
.perfil-imagen-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
.perfil-imagen-wrapper {
            position: relative;
            display: inline-block;
        }
.perfil-imagen-wrapper img,
        .perfil-imagen-placeholder {
            width: 128px;
            height: 128px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
.perfil-imagen-placeholder {
            font-size: 64px;
        }
.perfil-imagen-upload-btn {
            position: absolute;
            bottom: -5px;
            right: -5px;
            background: #4CAF50;
            color: white;
            border: 3px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 20;
            padding: 0;
            margin: 0;
        }
.perfil-imagen-upload-btn:hover {
            background: #45a049;
            transform: scale(1.1);
        }
.perfil-imagen-upload-btn svg {
            width: 20px;
            height: 20px;
            stroke: white;
        }
.perfil-imagen-upload-btn span {
            display: none; /* Ocultar emoji, usar SVG */
        }
@media (max-width: 768px) {
            .perfil-imagen-upload-btn {
                width: 40px;
                height: 40px;
                padding: 0;
            }
            
            .perfil-imagen-upload-btn svg {
                width: 20px;
                height: 20px;
            }
        }
.perfil-imagen-upload-options {
            position: absolute;
            bottom: -5px;
            right: -5px;
            z-index: 10;
        }
.perfil-imagen-wrapper {
            cursor: pointer;
            position: relative;
            display: inline-block;
        }
.perfil-imagen-wrapper:hover {
            opacity: 0.9;
        }
.perfil-imagen-wrapper:hover .perfil-imagen-upload-btn {
            transform: scale(1.1);
        }
/* Modal para ver imagen grande */
.imagen-perfil-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
.imagen-perfil-modal-overlay.active {
            display: flex;
        }
.imagen-perfil-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.imagen-perfil-modal-content img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }
.imagen-perfil-modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
.imagen-perfil-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
.opciones-foto-menu {
            position: absolute;
            bottom: 50px;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 10px 0;
            min-width: 180px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
.opciones-foto-menu button {
            width: 100%;
            padding: 12px 20px;
            background: transparent;
            border: none;
            color: var(--color-text-main) !important;
            font-weight: bold !important;
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.2s;
            font-size: 14px;
        }
.opciones-foto-menu button:hover {
            background: rgba(0, 0, 0, 0.1);
        }
.opciones-foto-menu button span:first-child {
            font-size: 20px;
        }
.perfil-form {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.form-section {
            margin-bottom: 30px;
        }
.form-section h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
/* Sección de Estado de Presencia en Perfil */
.presence-status-section {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
.current-status-display {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }
.status-label {
            font-weight: 600;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }
.current-status-badge {
            flex: 1;
        }
.status-options h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
        }
.status-buttons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
        }
.status-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            font-weight: 500;
            font-size: 0.95rem;
        }
.status-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
.status-btn .status-icon {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
        }
.status-btn.status-online .status-icon {
            color: #00FF00;
        }
.status-btn.status-online {
            border-color: rgba(0, 255, 0, 0.3);
        }
.status-btn.status-idle .status-icon {
            color: #FFAA00;
        }
.status-btn.status-idle {
            border-color: rgba(255, 170, 0, 0.3);
        }
.status-btn.status-dnd .status-icon,
        .status-btn.status-busy .status-icon {
            color: #FF3333;
        }
.status-btn.status-dnd,
        .status-btn.status-busy {
            border-color: rgba(255, 51, 51, 0.3);
        }
.status-btn.status-offline .status-icon {
            color: #999999;
        }
.status-btn.status-offline {
            border-color: rgba(153, 153, 153, 0.3);
        }
.status-btn.status-custom .status-icon {
            color: #9d7fcc;
        }
.status-btn.status-custom {
            border-color: rgba(106, 76, 147, 0.3);
            background: linear-gradient(135deg, rgba(106, 76, 147, 0.2) 0%, rgba(90, 61, 131, 0.2) 100%);
        }
.status-info {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
.status-info .info-item {
            padding: 8px 0;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
.status-info .info-item:last-child {
            border-bottom: none;
        }
.status-info .info-item strong {
            color: rgba(255, 255, 255, 1);
            font-weight: 600;
        }
@media (max-width: 768px) {
            .status-buttons-grid {
                grid-template-columns: 1fr;
            }
            
            .current-status-display {
                flex-direction: column;
                align-items: flex-start;
            }
        }
.form-group {
            margin-bottom: 20px;
        }
.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 0.95rem;
        }
.form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            background: var(--color-bg-input);
            color: var(--color-text-main);
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
        }
.form-group select {
            background-color: var(--color-bg-input);
            color: var(--color-text-main);
        }
.form-group select option {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
            padding: 10px;
        }
.form-group select:focus {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
.form-group select option:checked,
        .form-group select option:hover {
            background: var(--color-primary) !important;
            color: var(--color-text-inverse) !important;
        }
.form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--color-border-focus);
            background: var(--color-bg-input);
        }
.form-group input:disabled,
        .form-group select:disabled,
        .form-group textarea:disabled {
            opacity: 1;
            background-color: transparent !important;
            border: none !important;
            color: var(--color-text-muted) !important;
            cursor: default !important;
            pointer-events: none !important;
        }
.perfil-form input#nick {
            opacity: 1 !important;
            background-color: transparent !important;
            border: none !important;
            color: var(--color-text-muted) !important;
            cursor: default !important;
            pointer-events: none !important;
        }
.perfil-form input:not(:disabled):not(#nick),
        .perfil-form select:not(:disabled),
        .perfil-form textarea:not(:disabled) {
            pointer-events: auto !important;
            user-select: text !important;
            cursor: text !important;
            opacity: 1 !important;
            background-color: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
.form-group input:disabled,
        .form-group textarea:disabled {
            cursor: not-allowed;
        }
.form-group select:disabled option {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
.form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }
.form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
.form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--color-border);
        }
.loading {
            text-align: center;
            padding: 40px;
            font-size: 1.2rem;
        }
/* Formulario login (modal/overlay en app; en ruta /app/login los estilos vienen de LoginView.css) */
/* Asegurar que el formulario no bloquee los eventos */
.login-form {
            pointer-events: auto !important;
        }
.login-form input,
        .login-form button {
            pointer-events: auto !important;
        }
/* Estilos para el botón de recuperar contraseña */
.login-forgot-password {
            text-align: center !important;
            margin-top: 10px !important;
            margin-bottom: 5px !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
.recuperar-password-container {
            margin-top: 10px !important;
            padding: 12px !important;
        }
.recuperar-password-container h3 {
            margin-top: 0 !important;
            margin-bottom: 8px !important;
            font-size: 1rem !important;
        }
.recuperar-password-container p {
            margin-bottom: 10px !important;
            font-size: 0.85rem !important;
        }
.recuperar-password-container form {
            gap: 10px !important;
        }
.btn-forgot-password {
            background: none !important;
            border: none !important;
            color: var(--color-primary) !important;
            text-decoration: underline !important;
            cursor: pointer !important;
            font-size: 0.95rem !important;
            font-weight: 500 !important;
            padding: 5px 10px !important;
            transition: opacity 0.2s !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
.btn-forgot-password:hover {
            opacity: 0.8 !important;
            text-decoration: underline !important;
            color: var(--color-primary) !important;
        }
.btn-forgot-password:active {
            opacity: 0.6 !important;
        }
.login-card {
            background: var(--color-bg-card);
            color: var(--color-text-main);
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            padding: 30px;
            width: 100%;
            max-width: 450px;
            box-sizing: border-box;
            overflow-y: auto;
            max-height: 100vh;
        }
/* Contenedor de mensajes para login */
.login-mensaje-container {
            margin-bottom: 15px;
            min-height: 0;
        }
.login-mensaje {
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 0.9rem;
            text-align: center;
            display: none;
            margin-bottom: 10px;
        }
.login-mensaje.show {
            display: block;
        }
.login-mensaje.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
.login-mensaje.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
.login-info {
            margin-top: 15px;
            padding: 12px;
        }
/* Responsive para login */
@media (max-width: 480px) {
            .login-view {
                padding: 10px;
            }
            
            .login-card {
                padding: 20px;
                max-width: 100%;
                border-radius: 12px;
                max-height: calc(100vh - 20px);
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 22px;
            }
            
            .login-subtitle {
                font-size: 16px;
            }
            
            .login-logo {
                max-width: 120px;
                max-height: 120px;
                width: auto;
                height: auto;
                border-radius: 8px;
                background: white;
                padding: 4px;
            }
            
            .login-form .form-group input {
                font-size: 16px; /* Evita zoom en iOS */
                padding: 14px 16px;
            }
            
            .captcha-container {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .captcha-question {
                min-width: 80px;
                font-size: 16px;
                padding: 10px 12px;
            }
            
            .captcha-input {
                flex: 1;
                min-width: 80px;
                font-size: 16px;
            }
            
            .login-button {
                padding: 14px 20px;
                font-size: 16px;
            }
            
            .login-info {
                padding: 10px;
                margin-top: 12px;
                margin-bottom: 8px;
                flex-wrap: wrap;
            }
            
            .login-info .info-icon {
                font-size: 20px;
            }
            
            .login-info .info-title {
                font-size: 14px;
            }
            
            .login-info .info-text {
                font-size: 12px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
        }
@media (min-width: 481px) and (max-width: 768px) {
            .login-card {
                padding: 30px;
                max-width: 90%;
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 26px;
            }
            
            .login-subtitle {
                font-size: 17px;
            }
        }
@media (min-width: 769px) {
            .login-card {
                padding: 40px;
                max-width: 450px;
            }
        }
.login-header {
            text-align: center;
            margin-bottom: 32px;
        }
.login-logo {
            max-width: 150px;
            max-height: 150px;
            width: auto;
            height: auto;
            border-radius: 10px;
            background: white;
            padding: 5px;
            display: block;
            margin: 0 auto 15px auto;
            object-fit: contain;
        }
.login-header h1 {
            font-size: 32px;
            font-weight: bold;
            color: var(--color-text-main);
            margin: 0 0 8px 0;
        }
.login-main-title {
            color: #1f2937;
            font-size: 28px;
            font-weight: 700;
            margin: 10px 0 5px 0;
            text-align: center;
        }
.login-subtitle {
            color: var(--color-text-secondary);
            font-size: 18px;
            font-weight: 500;
            margin: 0;
        }
.login-form {
            margin-bottom: 15px;
        }
.login-form .form-group {
            margin-bottom: 15px;
        }
.login-form .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-main);
            margin-bottom: 8px;
        }
.login-form .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
            background: var(--color-bg-input);
            color: var(--color-text-main);
        }
.login-form .form-group input:focus {
            outline: none;
            border-color: var(--color-border-focus);
        }
.login-form .form-group input::placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }
.captcha-group {
            background: var(--color-bg-muted);
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
.captcha-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
.captcha-question {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            padding: 12px 16px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 18px;
            min-width: 100px;
            text-align: center;
            box-sizing: border-box;
        }
.captcha-input {
            flex: 1;
            min-width: 80px;
            padding: 12px 16px;
            border: 2px solid var(--color-border);
            border-radius: 6px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
            cursor: text !important;
        }
.captcha-input:disabled,
        .captcha-input[disabled] {
            background: var(--color-bg-muted) !important;
            color: var(--color-text-muted) !important;
            cursor: not-allowed !important;
        }
.captcha-refresh {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            min-width: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: background 0.3s;
            flex-shrink: 0;
        }
.captcha-refresh:hover {
            background: var(--color-primary-hover);
        }
.captcha-help {
            display: block;
            margin-top: 8px;
            color: var(--color-text-muted);
            font-size: 12px;
        }
/* .login-error removido - ahora se usan modales centrados */
.login-button {
            width: 100%;
            padding: 14px 24px;
            background: var(--color-button-bg, var(--color-primary));
            color: var(--color-button-text, var(--color-text-inverse));
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.3s;
        }
.login-button:hover:not(:disabled) {
            background: var(--color-primary-hover);
        }
.login-button:disabled {
            opacity: 0.9;
            cursor: not-allowed;
            background: var(--color-button-bg-disabled, var(--color-bg-input));
            color: var(--color-button-text-disabled, var(--color-text-secondary));
        }
.login-info {
            display: flex;
            align-items: start;
            gap: 12px;
            padding: 16px;
            margin-bottom: 16px;
            border-radius: 8px;
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
.login-info.auto-register {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
        }
/* Modal de registro */
.registro-modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.7) !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 99999 !important;
            backdrop-filter: blur(5px);
            pointer-events: auto !important;
        }
.registro-modal-content {
            pointer-events: auto !important;
        }
.registro-modal-overlay[style*="display: flex"],
        .registro-modal-overlay[style*="display:flex"],
        .registro-modal-overlay.show-modal {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
.registro-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }
@keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
.registro-modal-header {
            padding: 20px 25px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.registro-modal-header h2 {
            margin: 0;
            color: #1f2937;
            font-size: 24px;
        }
.registro-modal-close {
            background: none;
            border: none;
            font-size: 32px;
            color: #6b7280;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
.registro-modal-close:hover {
            background: #f3f4f6;
            color: #1f2937;
        }
.registro-modal-body {
            padding: 25px;
        }
.registro-modal-description {
            color: #6b7280;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.6;
        }
.registro-modal-body .form-group {
            margin-bottom: 20px;
        }
.registro-modal-body .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #374151;
            font-weight: 500;
        }
.registro-modal-body .input-wrapper {
            position: relative;
        }
.registro-modal-body .input-wrapper input {
            width: 100%;
            padding: 12px 40px 12px 12px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.2s;
            pointer-events: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background-color: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
.registro-modal-body .input-wrapper input:focus {
            outline: none;
            border-color: var(--color-border-focus);
            box-shadow: var(--shadow-focus);
        }
.registro-modal-body .input-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }
.registro-modal-body .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }
.registro-modal-body .btn-primary {
            flex: 1;
            padding: 12px 24px;
            background: #6a4c93;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
.registro-modal-body .btn-primary:hover:not(:disabled) {
            background: #5a3d83;
        }
.registro-modal-body .btn-primary:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
.registro-modal-body .btn-secondary {
            flex: 1;
            padding: 12px 24px;
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
.registro-modal-body .btn-secondary:hover {
            background: #e5e7eb;
        }
.registro-modal-body .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
.registro-modal-body .captcha-question {
            background: #6a4c93;
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: bold;
            min-width: 80px;
            text-align: center;
        }
.registro-modal-body .captcha-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
        }
.registro-modal-body .captcha-refresh {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }
.registro-modal-body .captcha-help {
            color: #6b7280;
            font-size: 12px;
        }
/* Efecto neon para ALTA */
.alta-neon {
            display: inline-block;
            font-size: 32px;
            font-weight: bold;
            color: #9d7fcc;
            text-shadow: 
                0 0 10px #9d7fcc,
                0 0 20px #9d7fcc,
                0 0 30px #9d7fcc,
                0 0 40px #9d7fcc,
                0 0 70px #9d7fcc,
                0 0 80px #9d7fcc;
            animation: neonPulse 2s ease-in-out infinite alternate, neonMove 3s ease-in-out infinite;
            letter-spacing: 3px;
        }
@keyframes neonPulse {
            from {
                text-shadow: 
                    0 0 10px #9d7fcc,
                    0 0 20px #9d7fcc,
                    0 0 30px #9d7fcc,
                    0 0 40px #9d7fcc,
                    0 0 70px #9d7fcc,
                    0 0 80px #9d7fcc;
                opacity: 1;
            }
            to {
                text-shadow: 
                    0 0 5px #9d7fcc,
                    0 0 10px #9d7fcc,
                    0 0 15px #9d7fcc,
                    0 0 20px #9d7fcc,
                    0 0 35px #9d7fcc,
                    0 0 40px #9d7fcc;
                opacity: 0.8;
            }
        }
@keyframes neonMove {
            0%, 100% {
                transform: translateX(0) scale(1);
            }
            25% {
                transform: translateX(-3px) scale(1.05);
            }
            50% {
                transform: translateX(0) scale(1.1);
            }
            75% {
                transform: translateX(3px) scale(1.05);
            }
        }
.info-icon {
            font-size: 24px;
            flex-shrink: 0;
        }
.info-title {
            font-weight: 600;
            color: var(--color-text-main);
            margin: 0 0 4px 0;
            font-size: 14px;
        }
.info-text {
            color: #666;
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
        }
/* Barra de navegación superior */
.navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 20px;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
.navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }
.navbar-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
.navbar-logo img {
            width: 40px;
            height: 40px;
            max-width: 40px;
            max-height: 40px;
            border-radius: 8px;
            object-fit: contain;
        }
.hamburger-menu {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            padding: 5px;
        }
.hamburger-menu span {
            width: 25px;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
.navbar-menu {
            display: flex;
            align-items: center;
            gap: 20px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
.navbar-menu li {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
            color: white;
            font-size: 0.95rem;
        }
.navbar-menu li:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.navbar-menu li i {
            font-size: 1.1rem;
        }
.navbar-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
/* Selector de idiomas personalizado (estilo YAZ) */
.language-selector-custom {
            position: relative;
            display: inline-block;
        }
.language-selector-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 8px;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
        }
.language-selector-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.language-flag {
            display: inline-block;
            width: 20px;
            height: 15px;
            vertical-align: middle;
        }
.flag-svg {
            width: 100%;
            height: 100%;
            display: block;
        }
.flag-button {
            width: 20px;
            height: 15px;
        }
.flag-option {
            width: 32px;
            height: 24px;
        }
.language-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(106, 76, 147, 0.98);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            min-width: 200px;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 1001;
            padding: 4px 0;
        }
/* Asegurar que las banderas se muestren */
.language-dropdown.active .language-flag {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
.language-dropdown.active {
            display: block;
        }
.language-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            white-space: nowrap;
        }
.language-option * {
            pointer-events: none;
        }
.language-option:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.language-option.active {
            background: rgba(255, 255, 255, 0.3);
            font-weight: 600;
        }
.language-option .language-flag {
            width: 32px;
            height: 24px;
            min-width: 32px;
            display: inline-block;
            flex-shrink: 0;
        }
.language-option .flag-svg {
            width: 100%;
            height: 100%;
            display: block;
        }
.language-option .language-name {
            flex: 1;
            font-size: 0.95rem;
        }
.user-profile {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
.user-profile:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            overflow: hidden;
            object-fit: cover;
        }
.user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(30, 50, 70, 0.98) !important;
            backdrop-filter: blur(10px);
            border-radius: 8px;
            min-width: 200px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 10001;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
.user-dropdown.active {
            display: block;
        }
.user-dropdown-header {
            padding: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 12px;
        }
.user-dropdown-header .user-avatar {
            width: 40px;
            height: 40px;
        }
.user-dropdown-header .user-info {
            flex: 1;
        }
.user-dropdown-header .user-name {
            font-weight: 700 !important;
            font-size: 0.95rem;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
.user-dropdown-item {
            padding: 12px 16px !important;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            color: #ffffff !important;
            text-decoration: none;
            min-height: 44px !important;
        }
.user-dropdown-item span {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
.user-dropdown-item i {
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
.user-info-navbar {
            display: flex;
            align-items: center;
        }
.user-info-navbar span {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            white-space: nowrap;
        }
.user-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.15) !important;
        }
.user-dropdown-item i {
            font-size: 1.1rem;
            width: 20px;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
.user-dropdown-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.15);
            margin: 4px 0;
        }
.user-dropdown-settings {
            display: flex !important;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            cursor: default;
        }
.user-dropdown-settings-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffff !important;
            font-weight: 700 !important;
        }
.theme-toggle {
            display: flex;
            gap: 8px;
            width: 100%;
        }
.theme-chip {
            flex: 1;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff !important;
            border-radius: 10px;
            padding: 8px 10px;
            font-weight: 700 !important;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
.theme-chip:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.35);
        }
.theme-chip.active {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            color: #ffffff !important;
        }
.logout-btn {
            display: none; /* Oculto porque ahora está en el dropdown */
        }
/* Menú móvil (hamburguesa) */
.mobile-menu {
            position: fixed;
            top: 60px;
            left: -100%;
            width: 280px;
            height: calc(100vh - 60px);
            background: rgba(106, 76, 147, 0.98);
            backdrop-filter: blur(10px);
            transition: left 0.3s ease;
            z-index: 999;
            padding: 20px;
            overflow-y: auto;
        }
.mobile-menu.active {
            left: 0;
        }
.mobile-menu-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #ffffff;
        }
.mobile-menu-item span {
            color: #ffffff !important;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
.mobile-menu-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
.mobile-menu-item i {
            font-size: 1.3rem;
            width: 24px;
        }
.overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }
.overlay.active {
            display: block;
        }
/* Contenido principal */
.main-content {
            margin-top: 60px;
            min-height: calc(100vh - 60px);
            padding: 20px;
        }
/* ===== MODO OSCURO (selección de usuario) ===== */
:root[data-theme="dark"] {
            background: radial-gradient(circle at 20% 20%, rgba(88, 129, 193, 0.35), transparent 30%),
                        radial-gradient(circle at 80% 0%, rgba(118, 75, 162, 0.35), transparent 28%),
                        linear-gradient(180deg, #0f1724 0%, #0b1220 100%);
            color: #e9edf7 !important;
        }
:root[data-theme="dark"] * {
            color: #e9edf7 !important;
        }
:root[data-theme="dark"] .navbar {
            background: linear-gradient(135deg, #111c2b 0%, #0f1724 100%) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
:root[data-theme="dark"] .user-dropdown {
            background: rgba(12, 20, 32, 0.96) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        }
:root[data-theme="dark"] .user-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.08) !important;
        }
:root[data-theme="dark"] .theme-chip {
            border-color: rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }
:root[data-theme="dark"] .theme-chip.active {
            background: linear-gradient(135deg, #6a4c93 0%, #5a3d83 100%);
            color: #ffffff !important;
        }
/* Search bar en dark */
:root[data-theme="dark"] .contacts-search-bar {
            background: #1e1e1e !important;
            border-color: #2a2a2a !important;
            box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
        }
:root[data-theme="dark"] .search-input-container {
            background: #121212 !important;
            border-color: #2a2a2a !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 3px 10px rgba(0,0,0,0.35) !important;
        }
:root[data-theme="dark"] .search-input {
            color: #e0e0e0 !important;
        }
:root[data-theme="dark"] .search-input::placeholder {
            color: #b0b0b0 !important;
        }
:root[data-theme="dark"] .search-icon {
            color: #b0b0b0 !important;
            opacity: 0.8 !important;
        }
/* Base de fondos en modo oscuro */
:root[data-theme="dark"] .main-app,
        :root[data-theme="dark"] .main-content,
        :root[data-theme="dark"] .conversacion-view,
        :root[data-theme="dark"] .conversaciones-view,
        :root[data-theme="dark"] .conversaciones-list,
        :root[data-theme="dark"] .contactos-loading,
        :root[data-theme="dark"] .conversacion-mensajes {
            background: #121212 !important;
        }
/* Header y footers */
:root[data-theme="dark"] .conversacion-header,
        :root[data-theme="dark"] .conversacion-input-container,
        :root[data-theme="dark"] .navbar,
        :root[data-theme="dark"] .mobile-menu {
            background: #1e1e1e !important;
            border-color: #2a2a2a !important;
        }
/* Burbujas izquierda/derecha */
:root[data-theme="dark"] .mensaje-item.ajeno,
        :root[data-theme="dark"] .mensaje-item.ajeno .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.ajeno .mensaje-texto {
            background: #2a2a2a !important;
            color: #e0e0e0 !important;
        }
:root[data-theme="dark"] .mensaje-item.propio,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-texto {
            background: #3D2A5B !important;
            color: #ffffff !important;
        }
/* Burbujas de mensajes propios en modo dark - MÓVIL Y DESKTOP - MÁXIMA ESPECIFICIDAD - PÚRPURA OSCURO, NUNCA AZUL */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-texto,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja .mensaje-texto,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja span,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja p,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja div,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja img,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja button,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja a {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            color: #ffffff !important;
        }
/* Sobrescribir cualquier estilo inline o clase que pueda estar aplicando azul - MÁXIMA PRIORIDAD */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="background"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="blue"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="rgba"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="rgb"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="#"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="667eea"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="75AADB"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="6CB4EE"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="4f8ad9"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="3d6fb8"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="2196F3"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="0b7dda"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="background"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="blue"] {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
        }
/* Forzar también con selector universal para máxima especificidad - PÚRPURA OSCURO, NUNCA AZUL */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja * {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
        }
/* REGLA FINAL: Forzar púrpura oscuro en modo dark - MÁXIMA ESPECIFICIDAD - NUNCA AZUL */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            background-image: none !important;
            color: #ffffff !important;
        }
/* Forzar también en móvil */
@media (max-width: 768px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #5a3d83 !important;
                background-color: #5a3d83 !important;
                color: #ffffff !important;
            }
        }
:root[data-theme="dark"] .mensaje-time,
        :root[data-theme="dark"] .mensaje-editado-indicator,
        :root[data-theme="dark"] .mensaje-sender {
            color: #b0b0b0 !important;
        }
/* Avatares y bordes */
:root[data-theme="dark"] .mensaje-avatar,
        :root[data-theme="dark"] .user-avatar,
        :root[data-theme="dark"] .user-avatar-mobile {
            border: 2px solid var(--color-border) !important;
            background: #2a2a2a !important;
        }
/* Inputs y placeholders */
:root[data-theme="dark"] input,
        :root[data-theme="dark"] textarea,
        :root[data-theme="dark"] .conversacion-input {
            background: #1e1e1e !important;
            color: #e0e0e0 !important;
            border-color: #2a2a2a !important;
        }
:root[data-theme="dark"] input::placeholder,
        :root[data-theme="dark"] textarea::placeholder,
        :root[data-theme="dark"] .conversacion-input::placeholder {
            color: #b0b0b0 !important;
        }
/* Iconos y botones - Dark mode: todos en gris claro, NUNCA azul */
:root[data-theme="dark"] i,
        :root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-emoji-picker,
        :root[data-theme="dark"] .mensaje-delete,
        :root[data-theme="dark"] .mensaje-edit,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-emoji-picker,
        :root[data-theme="dark"] .mensaje-delete,
        :root[data-theme="dark"] .mensaje-edit,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span {
            color: #B0B0B0 !important;
        }
:root[data-theme="dark"] .btn-enviar-mensaje:hover,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover,
        :root[data-theme="dark"] .btn-emoji-picker:hover,
        :root[data-theme="dark"] .mensaje-delete:hover,
        :root[data-theme="dark"] .mensaje-edit:hover,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover,
        :root[data-theme="dark"] .btn-emoji-picker:hover,
        :root[data-theme="dark"] .mensaje-delete:hover,
        :root[data-theme="dark"] .mensaje-edit:hover {
            color: #E0E0E0 !important;
        }
/* Asegurar que los iconos dentro de los botones también sean gris claro */
:root[data-theme="dark"] .btn-adjuntar-archivo *,
        :root[data-theme="dark"] .btn-enviar-mensaje *,
        :root[data-theme="dark"] .btn-emoji-picker *,
        :root[data-theme="dark"] .btn-adjuntar-archivo *,
        :root[data-theme="dark"] .btn-enviar-mensaje *,
        :root[data-theme="dark"] .btn-emoji-picker * {
            color: #B0B0B0 !important;
        }
:root[data-theme="dark"] .btn-adjuntar-archivo:hover *,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover *,
        :root[data-theme="dark"] .btn-emoji-picker:hover *,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover *,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover *,
        :root[data-theme="dark"] .btn-emoji-picker:hover * {
            color: #E0E0E0 !important;
        }
/* 🔥 MEJORA VISUAL: Botón de estado más armonioso para tema Dark */
:root[data-theme="dark"] .navbar-presence-selector .navbar-status-button,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button {
            background: rgba(46, 125, 50, 0.15) !important;
            border: 1px solid rgba(46, 125, 50, 0.4) !important;
            color: rgba(200, 230, 201, 0.9) !important;
            font-weight: 400 !important;
            box-shadow: none !important;
        }
:root[data-theme="dark"] .navbar-presence-selector .navbar-status-button:hover,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button:hover {
            background: rgba(46, 125, 50, 0.22) !important;
            border-color: rgba(46, 125, 50, 0.55) !important;
            transform: none !important;
            box-shadow: none !important;
        }
:root[data-theme="dark"] .navbar-presence-selector .navbar-status-online,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-online {
            background: rgba(46, 125, 50, 0.15) !important;
            border-color: rgba(46, 125, 50, 0.4) !important;
        }
:root[data-theme="dark"] .navbar-presence-selector .navbar-status-icon,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-icon {
            color: rgba(129, 199, 132, 0.9) !important;
            filter: none !important;
        }
:root[data-theme="dark"] .navbar-presence-selector .navbar-status-text,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-text {
            color: rgba(200, 230, 201, 0.9) !important;
        }
/* ===== ESTILOS PARA CONTACTOS EN MODO OSCURO ===== */
:root[data-theme="dark"] .conversacion-item {
            background: rgba(30, 30, 30, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px);
        }
:root[data-theme="dark"] .conversacion-item:hover {
            background: rgba(40, 40, 40, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }
:root[data-theme="dark"] .conversacion-item-nombre {
            color: #e0e0e0 !important;
            font-weight: 600 !important;
        }
:root[data-theme="dark"] .conversacion-item-preview {
            color: #b0b0b0 !important;
            opacity: 0.9 !important;
        }
:root[data-theme="dark"] .conversacion-item-fecha {
            color: #999999 !important;
        }
:root[data-theme="dark"] .conversacion-item-avatar {
            background: rgba(50, 50, 50, 0.8) !important;
            border: 2px solid rgba(255, 255, 255, 0.15) !important;
            color: #e0e0e0 !important;
        }
:root[data-theme="dark"] .conversaciones-subtitle {
            color: #d0d0d0 !important;
            font-weight: 700 !important;
        }
:root[data-theme="dark"] .conversaciones-list {
            background: transparent !important;
        }
:root[data-theme="dark"] .status-display {
            color: #b0b0b0 !important;
        }
:root[data-theme="dark"] .status-display .status-icon {
            opacity: 0.8 !important;
        }
:root[data-theme="dark"] .contact-actions {
            background: transparent !important;
        }
:root[data-theme="dark"] .contact-action-btn {
            background: rgba(40, 40, 40, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            color: #e0e0e0 !important;
        }
:root[data-theme="dark"] .contact-action-btn:hover {
            background: rgba(50, 50, 50, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }
:root[data-theme="dark"] .contact-action-btn.fav-active {
            background: rgba(47, 42, 23, 0.9) !important;
            border-color: #d1a800 !important;
            color: #ffd700 !important;
        }
:root[data-theme="dark"] .contact-action-btn.blocked {
            background: rgba(58, 30, 30, 0.9) !important;
            border-color: #d14a4a !important;
            color: #ff6b6b !important;
        }
/* Subtítulos de secciones (Favoritos, Contactos) */
:root[data-theme="dark"] .conversaciones-section-title,
        :root[data-theme="dark"] h3.conversaciones-subtitle {
            color: #d0d0d0 !important;
            font-weight: 700 !important;
            text-shadow: none !important;
        }
/* Estados de contacto en modo oscuro */
:root[data-theme="dark"] .status-display {
            color: #b0b0b0 !important;
        }
:root[data-theme="dark"] .status-display .status-icon {
            opacity: 0.7 !important;
        }
/* Información adicional del contacto (país, etc.) */
:root[data-theme="dark"] .conversacion-item-info span,
        :root[data-theme="dark"] .contact-country,
        :root[data-theme="dark"] .contact-location {
            color: #999999 !important;
        }
/* ===== SELECTOR DE IDIOMA EN MODO OSCURO ===== */
:root[data-theme="dark"] .language-dropdown {
            background: rgba(30, 30, 30, 0.98) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
        }
:root[data-theme="dark"] .language-option {
            color: #e0e0e0 !important;
        }
:root[data-theme="dark"] .language-option:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }
/* ===== REGLA FINAL ABSOLUTA PARA MENSAJES PROPIOS EN DARK MODE ===== */
/* Esta regla debe estar al final para tener máxima prioridad - COLOR PÚRPURA OSCURO, NUNCA AZUL */
:root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            background-image: none !important;
            color: #ffffff !important;
        }
@media (max-width: 768px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #3D2A5B !important;
                background-color: #3D2A5B !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        }
@media (min-width: 769px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #3D2A5B !important;
                background-color: #3D2A5B !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        }
:root[data-theme="dark"] .language-option.active {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
        }
@media (max-width: 480px) {
            .login-card {
                padding: 24px;
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 24px;
            }
            
            .login-subtitle {
                font-size: 16px;
            }
            
            .login-logo {
                max-width: 100px;
                max-height: 100px;
                width: auto;
                height: auto;
                border-radius: 8px;
                background: white;
                padding: 4px;
            }
            
            /* Responsive para navbar logo en móvil */
            .navbar-logo img {
                width: 32px;
                height: 32px;
                max-width: 32px;
                max-height: 32px;
            }
            
            .navbar-logo span {
                font-size: 1.2rem;
            }
        }
@media (max-width: 768px) {
            .hamburger-menu {
                display: flex;
            }
            
            .navbar-menu {
                display: none;
            }
            
            .navbar-right {
                gap: 10px;
            }
            
            .user-profile span,
            .logout-btn span {
                display: none;
            }
            
            .perfil-view {
                margin-top: 55px;
                padding: 20px;
            }
        }
@media (max-width: 480px) {
            .conversaciones-header,
            .contactos-header {
                padding: 3px 10px;
            }
            
            .perfil-view {
                margin-top: 52px;
                padding: 15px;
                border-radius: 15px;
            }
            
            .conversaciones-header h1 {
                color: #ffffff !important;
                font-weight: 700 !important;
                font-size: 1rem !important;
                line-height: 1.2 !important;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
            }
            
            /* Mejorar contraste de textos en móvil */
            .user-info-navbar span,
            #userName {
                color: #ffffff !important;
                font-weight: 600 !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            }
            
            .mobile-menu-item span {
                color: #ffffff !important;
                font-weight: 500 !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
            }
            
            .user-dropdown-header .user-name,
            .user-dropdown-item span {
                color: #ffffff !important;
                font-weight: 700 !important;
                font-size: 1rem !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .user-dropdown-item {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .user-dropdown-item i {
                color: #ffffff !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
                font-size: 1.2rem !important;
            }
            
            .user-dropdown {
                background: rgba(30, 50, 70, 0.98) !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
            }
        }
@media (min-width: 769px) {
            .mobile-menu {
                display: none !important;
            }
        }
/* ===== REGLA FINAL ABSOLUTA: ELIMINAR TODOS LOS AZULES EN DARK MODE ===== */
/* Forzar que todos los iconos, emojis, y elementos de UI sean gris claro, NUNCA azul */
:root[data-theme="dark"] span[role="img"],
        :root[data-theme="dark"] .emoji-inline,
        :root[data-theme="dark"] button span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] span[role="img"],
        :root[data-theme="dark"] .emoji-inline,
        :root[data-theme="dark"] button span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-emoji-picker span {
            filter: grayscale(0%) brightness(1) !important;
            color: #B0B0B0 !important;
        }
/* Asegurar que los iconos de emoji (😊, 📎, 🗑️, etc.) no tengan azul */
:root[data-theme="dark"] .btn-emoji-picker::before,
        :root[data-theme="dark"] .btn-adjuntar-archivo::before,
        :root[data-theme="dark"] .btn-enviar-mensaje::before,
        :root[data-theme="dark"] .btn-emoji-picker::before,
        :root[data-theme="dark"] .btn-adjuntar-archivo::before,
        :root[data-theme="dark"] .btn-enviar-mensaje::before {
            color: #B0B0B0 !important;
        }
/* ================================
   AUTH PRIMARY BUTTON — Variables tema Argentina
   Usa --color-primary / --color-secondary (celeste Argentina).
================================ */
.auth-primary-button {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.auth-primary-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.auth-primary-button:active {
  transform: translateY(0);
}
.auth-primary-button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.auth-primary-button:disabled,
.auth-primary-button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Blindaje: ninguna regla posterior puede pisar el gradiente del botón primario. */
button.auth-primary-button,
.auth-shell button.auth-primary-button,
.home-public-nav button.auth-primary-button {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  ) !important;
  color: #ffffff !important;
}
/* Google Sign-In: iframe invisible no debe afectar scrollHeight del documento. */
iframe[src*="accounts.google.com"],
iframe[src*="gsi"],
iframe[src*="credential"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* Contenedor estable del botón Google: evita colapso visual. */
.google-wrapper-stable {
  width: 100%;
  min-height: 48px;
  display: block; /* forzar block */
}
.google-wrapper-stable > div {
  width: 100%;
  display: block; /* evitar flex directo */
}
/* Evitar flex en wrappers Google (sobrescribe LoginView.css): cálculo 0px colapsa el botón. */
.register-google-wrapper,
.login-google-wrapper {
  display: block;
}
/* GoogleLoginBlock: wrapper con tamaño estable para evitar colapso 0x0 del iframe */
.google-login-wrapper {
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.google-login-inner {
  width: 300px;
  min-height: 40px;
}
/* Fallback visible si falta VITE_GOOGLE_CLIENT_ID en el build (GIS no puede inicializar) */
.google-login-fallback-btn {
  width: 280px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #dadce0);
  background: #fff;
  color: #3c4043;
  font-size: 14px;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.9;
  box-sizing: border-box;
}
/* Permitir dimensiones al iframe del botón (override regla global que fuerza 0x0) */
.google-login-inner iframe {
  position: relative !important;
  width: 300px !important;
  height: 40px !important;
  min-width: 300px !important;
  min-height: 40px !important;
  top: auto !important;
  left: auto !important;
  border: 0 !important;
  overflow: visible !important;
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Autor: SIVOL® - Aldo Frias - Argentina
 * Fecha: 11/03/2026 22:50 (Argentina - UTC-3)
 * Estilos centralizados para ArchatModal
 * Todos los modales de ARCHAT deben usar estos estilos base
 * 
 * @version 1.0
 */
/* ============================================
   OVERLAY - Fondo oscuro que bloquea el contenido
   ============================================ */
/* Overlay global: bloquea el fondo y centra el modal. Portal en document.body. */
.archat-modal-overlay {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.65);
  z-index: var(--archat-backdrop-z, 900);
}
@keyframes archatModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ============================================
   CONTENIDO DEL MODAL - Centrado, oscuro por defecto (auth /app)
   ============================================ */
.archat-modal-content {
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  color: var(--color-text-main);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  position: relative;
  z-index: var(--archat-modal-z, 1000);
  margin: auto;
  animation: archatModalAppear 0.2s ease-out;
  transform-origin: center center;
  pointer-events: auto;
}
@keyframes archatModalAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ============================================
   HEADER - Título y botón de cerrar
   ============================================ */
.archat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
}
.archat-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
/* Botón de cerrar */
.archat-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 28px;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  z-index: 10;
}
.archat-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
/* ============================================
   BODY - Contenido del modal (scroll solo aquí)
   ============================================ */
.archat-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  color: inherit;
}
/* ============================================
   DARK MODE - Estilos para modo oscuro
   ============================================ */
:root[data-theme="dark"] .archat-modal-overlay,
:root[data-theme="dark"] .archat-modal-overlay {
  background: rgba(0, 0, 0, 0.85);
}
:root[data-theme="dark"] .archat-modal-content,
:root[data-theme="dark"] .archat-modal-content {
  background: linear-gradient(135deg, #1e1e1e 0%, #121212 100%) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="dark"] .archat-modal-header,
:root[data-theme="dark"] .archat-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .archat-modal-header h2,
:root[data-theme="dark"] .archat-modal-header h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] .archat-modal-close,
:root[data-theme="dark"] .archat-modal-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
:root[data-theme="dark"] .archat-modal-close:hover,
:root[data-theme="dark"] .archat-modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
:root[data-theme="dark"] .archat-modal-body,
:root[data-theme="dark"] .archat-modal-body {
  color: #e0e0e0 !important;
}
/* ============================================
   RESPONSIVE - Mobile y Desktop
   ============================================ */
@media (max-width: 768px) {
  .archat-modal-overlay {
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
  }

  .archat-modal-content {
    width: 95vw;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    margin: auto;
  }

  .archat-modal-header {
    padding: 16px 20px;
  }

  .archat-modal-header h2 {
    font-size: 18px;
  }

  .archat-modal-body {
    padding: 20px;
  }
}
@media (min-width: 769px) {
  .archat-modal-content {
    max-width: 600px;
  }
}
/* ============================================
   SCROLLBAR - Estilos para scrollbar en dark mode
   ============================================ */
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar,
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar {
  width: 8px;
}
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-track,
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-track {
  background: #1a1a1a;
}
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .archat-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* ============================================
   AISLAMIENTO COMPLETO DE MODALES
   Garantiza que los modales siempre se rendericen correctamente
   ============================================ */
/* Contenedor único de modales: stacking context estable para todos los portales. */
#archat-modal-root {
  position: relative;
  z-index: 900;
}
/* Sin hijos: no crear layout box visible. */
#archat-modal-root:empty {
  display: none;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
#archat-modal-root > * {
  pointer-events: auto !important;
}
/* Capa reusable por instancia de modal (stack dinámico). */
.archat-modal-layer {
  --archat-backdrop-z: 900;
  --archat-modal-z: 1000;
}
/* PASO 3 — NEUTRALIZAR STACKING CONTEXTS EN CONTENEDORES PRINCIPALES */
.main-app,
.main-content,
.profile-modal,
.profile-modal-overlay,
.app-container,
.chat-layout,
.layout,
.content {
  /* NO crear nuevo contexto de apilamiento para modales */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  isolation: auto !important;
  /* Permitir overflow solo si no afecta modales */
  /* overflow-x: hidden se mantiene para layout, pero no afecta modales con position: fixed */
}
.archat-modal-content {
  position: relative;
  transform: none;
  filter: none;
  perspective: none;
}
.archat-modal-overlay,
[class*="modal-overlay"] {
  contain: layout style paint;
}
/* ============================================
   MODAL TÉRMINOS Y CONDICIONES — Grid anclado arriba, scroll solo en body
   No vh/dvh; altura relativa al contenedor. Footer siempre visible.
   ============================================ */
/* Contenedor principal = full viewport; grid anclado arriba, centrado horizontal */
.terms-modal-container,
.terms-modal-overlay.terms-modal-container,
.register-terms-modal.terms-modal-overlay.terms-modal-container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: start center;
  padding-top: clamp(16px, 5vh, 40px);
  padding-bottom: 48px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  z-index: var(--archat-modal-z, 1000);
}
/* Hijo directo del container: ocupa el ancho de la celda grid */
.terms-modal-container > .terms-modal-content,
.terms-modal-container > .register-terms-content {
  max-width: 720px;
  width: 100%;
}
/* Modal (caja blanca): sin max-height; el contenedor controla el scroll */
.terms-modal-content {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: var(--color-text-main, #1f2937);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
/* Header: sin scroll */
.terms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 24px 24px 0;
  flex-shrink: 0;
}
.terms-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-text-main, #1f2937);
}
.terms-language-selector {
  flex-shrink: 0;
}
/* Body: ÚNICA zona con scroll */
.terms-modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 24px;
  line-height: 1.6;
}
.terms-modal-body::-webkit-scrollbar {
  width: 6px;
}
.terms-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
/* Footer: siempre visible, sin scroll */
.terms-modal-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.terms-modal-footer .terms-buttons,
.terms-modal-footer .register-terms-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
/* Reset estilos heredados del Auth (solo contenido del modal) */
.terms-modal-content,
.terms-modal-content * {
  opacity: 1 !important;
  filter: none !important;
}
/* Contenido legal: legible sobre fondo blanco */
.terms-content h1,
.terms-content h2,
.terms-content h3 {
  color: #1f2937;
  margin-top: 16px;
}
.terms-content p,
.terms-content li {
  color: #374151;
}
.terms-content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0;
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Autor: SIVOL® - Aldo Frias - Argentina
 * Fecha: 11/03/2026 22:50 (Argentina - UTC-3)
 * Variables CSS centralizadas para modales en Dark Mode
 * @file modal-theme.css
 * @version 1.0
 */
/* Variables de modales: dark usa tema centralizado (WCAG) */
:root {
  --modal-bg-overlay: rgba(0, 0, 0, 0.6);
  --modal-icon-brightness: brightness(1);
  --modal-icon-opacity: 1;
}
/* Dark: delegar en variables de theme/dark.css */
:root[data-theme="dark"] {
  --modal-bg-dark: var(--color-bg-card);
  --modal-bg-darker: var(--color-bg-main);
  --modal-bg-hover: var(--color-bg-input);
  --modal-bg-overlay: var(--color-overlay);
  --modal-text-dark: var(--color-text-main);
  --modal-text-muted: var(--color-text-muted);
  --modal-text-secondary: var(--color-text-secondary);
  --modal-border-dark: var(--color-border);
  --modal-border-hover: var(--color-border);
  --modal-btn-dark: var(--color-bg-input);
  --modal-btn-hover: var(--color-border);
  --modal-bg: var(--color-bg-card);
  --modal-bg-secondary: var(--color-bg-main);
  --modal-text: var(--color-text-main);
  --modal-border: var(--color-border);
  --modal-icon-brightness: brightness(1.1);
}
/* Estilos globales para modales en Dark Mode */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] [class*="modal"] {
  background-color: var(--modal-bg-dark) !important;
  background: var(--modal-bg-dark) !important;
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-dark) !important;
}
/* Overlay oscuro */
:root[data-theme="dark"] .modal-overlay,
:root[data-theme="dark"] [class*="modal-overlay"] {
  background: var(--modal-bg-overlay) !important;
  backdrop-filter: blur(8px) !important;
}
/* Botones en modales dark mode */
:root[data-theme="dark"] .modal-button,
:root[data-theme="dark"] [class*="modal"] button {
  background-color: var(--modal-btn-dark) !important;
  background: var(--modal-btn-dark) !important;
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-dark) !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .modal-button:hover,
:root[data-theme="dark"] [class*="modal"] button:hover {
  background-color: var(--modal-btn-hover) !important;
  background: var(--modal-btn-hover) !important;
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-hover) !important;
}
/* Labels y opciones en modales dark mode */
:root[data-theme="dark"] [class*="modal"] label,
:root[data-theme="dark"] [class*="modal"] [role="menuitem"] {
  background-color: var(--modal-bg-dark) !important;
  background: var(--modal-bg-dark) !important;
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-dark) !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] [class*="modal"] label:hover,
:root[data-theme="dark"] [class*="modal"] [role="menuitem"]:hover {
  background-color: var(--modal-bg-hover) !important;
  background: var(--modal-bg-hover) !important;
  color: var(--modal-text-dark) !important;
}
/* Íconos en modales dark mode */
:root[data-theme="dark"] [class*="modal"] span[class*="icon"],
:root[data-theme="dark"] [class*="modal"] .icon {
  filter: var(--modal-icon-brightness) !important;
  opacity: var(--modal-icon-opacity) !important;
}
/* Inputs y textareas en modales dark mode */
:root[data-theme="dark"] [class*="modal"] input,
:root[data-theme="dark"] [class*="modal"] textarea,
:root[data-theme="dark"] [class*="modal"] select {
  background-color: var(--modal-bg-darker) !important;
  background: var(--modal-bg-darker) !important;
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-dark) !important;
}
/* Headers y títulos en modales dark mode */
:root[data-theme="dark"] [class*="modal"] h1,
:root[data-theme="dark"] [class*="modal"] h2,
:root[data-theme="dark"] [class*="modal"] h3,
:root[data-theme="dark"] [class*="modal-header"] {
  color: var(--modal-text-dark) !important;
  border-color: var(--modal-border-dark) !important;
}
/* Textos secundarios en modales dark mode */
:root[data-theme="dark"] [class*="modal"] p,
:root[data-theme="dark"] [class*="modal"] span,
:root[data-theme="dark"] [class*="modal"] small {
  color: var(--modal-text-dark) !important;
}
/* Estados disabled en modales dark mode */
:root[data-theme="dark"] [class*="modal"] button:disabled,
:root[data-theme="dark"] [class*="modal"] input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: var(--modal-bg-darker) !important;
  color: var(--modal-text-muted) !important;
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Estilos Responsive para ARCHAT PWA
 * Adaptación completa para todos los dispositivos
 */
/* Variables CSS para breakpoints y espaciado */
:root {
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1200px;
  /* Variables de espaciado en rem para accesibilidad */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
}
/* Safe area para dispositivos con notch */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* ============================================
   RESPONSIVE GENERAL - MÓVILES PEQUEÑOS
   ============================================ */
@media (max-width: 480px) {
  /* Ajustes generales - usar clamp para escalado fluido */
  body {
    font-size: clamp(0.875rem, 4vw, 1rem); /* 14px - 16px, escala con viewport */
  }

  /* Navbar responsive */
  .navbar {
    padding: 0.5rem 0.625rem; /* 8px 10px -> 0.5rem 0.625rem */
    height: auto;
    min-height: 3.125rem; /* 50px -> 3.125rem */
  }

  .navbar-logo img {
    max-width: 5rem; /* 80px -> 5rem */
    max-height: 2.5rem; /* 40px -> 2.5rem */
  }

  .navbar-menu {
    display: none; /* Ocultar menú en móvil pequeño */
  }

  .navbar-right {
    gap: 0.5rem; /* 8px -> 0.5rem */
  }

  .language-selector-button {
    padding: 0.375rem 0.5rem; /* 6px 8px -> 0.375rem 0.5rem */
    min-height: 2.25rem; /* Altura mínima táctil */
  }

  .language-flag {
    width: 1rem; /* 16px -> 1rem */
    height: 0.75rem; /* 12px -> 0.75rem */
  }

  .user-avatar {
    width: 1.75rem; /* 28px -> 1.75rem */
    height: 1.75rem; /* 28px -> 1.75rem */
    min-width: 1.75rem;
    min-height: 1.75rem;
  }

  .user-info-navbar span {
    font-size: clamp(0.8125rem, 2vw, 0.85rem); /* Escala fluida */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Main content */
  .main-content {
    padding-top: 3.125rem; /* 50px -> 3.125rem */
  }

  /* Conversaciones y contactos */
  .conversaciones-header,
  .contactos-header {
    padding: 0.5rem 0.625rem; /* 8px 10px -> 0.5rem 0.625rem */
    padding-top: 3.125rem; /* 50px -> 3.125rem */
    min-height: 3.125rem;
  }

  .conversaciones-header h1,
  .contactos-header h1 {
    font-size: clamp(0.875rem, 3vw, 1rem); /* Escala fluida */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .conversacion-item {
    padding: 0.625rem; /* 10px -> 0.625rem */
    margin-bottom: 0.5rem; /* 8px -> 0.5rem */
    min-height: 3.125rem; /* Altura mínima flexible */
  }

  .conversacion-item-avatar {
    width: 2.5rem; /* 40px -> 2.5rem */
    height: 2.5rem; /* 40px -> 2.5rem */
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin-right: 0.625rem; /* 10px -> 0.625rem */
    font-size: clamp(0.875rem, 2.5vw, 1rem); /* Escala fluida */
  }

  .conversacion-item-nombre {
    font-size: clamp(0.8125rem, 2.5vw, 0.9rem); /* Escala fluida */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .conversacion-item-fecha {
    font-size: clamp(0.6875rem, 2vw, 0.75rem); /* Escala fluida */
  }

  /* Chat window */
  .conversacion-view {
    padding-top: 3.125rem; /* 50px -> 3.125rem */
  }

  .conversacion-header {
    padding: 0.625rem; /* 10px -> 0.625rem */
    height: auto;
    min-height: 3.125rem; /* 50px -> 3.125rem */
  }

  .conversacion-mensajes {
    padding: 0.625rem; /* 10px -> 0.625rem */
    max-height: calc(100vh - 9.375rem); /* 150px -> 9.375rem */
  }

  .mensaje-item {
    padding: 0.5rem 0.625rem; /* 8px 10px -> 0.5rem 0.625rem */
    margin-bottom: 0.5rem; /* 8px -> 0.5rem */
  }

  .mensaje-texto {
    font-size: clamp(0.8125rem, 2.5vw, 0.9rem); /* Escala fluida */
    line-height: 1.5; /* Mejorado para accesibilidad */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .mensaje-fecha {
    font-size: clamp(0.625rem, 2vw, 0.7rem); /* Escala fluida */
  }

  /* Input de mensaje */
  .conversacion-input-container {
    padding: 0.625rem 0.9375rem; /* 10px 15px -> 0.625rem 0.9375rem */
    padding-bottom: max(0.9375rem, env(safe-area-inset-bottom, 0.9375rem));
    box-sizing: border-box;
    min-height: 3.125rem; /* Altura mínima flexible */
  }

  .conversacion-input-wrapper {
    padding: 0.5rem 0.75rem !important; /* 8px 12px -> 0.5rem 0.75rem */
    gap: 0.5rem !important; /* 8px -> 0.5rem */
    box-sizing: border-box;
    min-height: 2.5rem;
  }

  .mensaje-input-container {
    padding: 0.5rem; /* 8px -> 0.5rem */
  }

  .mensaje-input {
    font-size: clamp(0.8125rem, 2.5vw, 0.9rem); /* Escala fluida */
    padding: 0.5rem 0.75rem; /* 8px 12px -> 0.5rem 0.75rem */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .btn-enviar-mensaje {
    width: 2.25rem !important; /* 36px -> 2.25rem */
    height: 2.25rem !important; /* 36px -> 2.25rem */
    min-width: 2.25rem;
    min-height: 2.25rem;
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important; /* Escala fluida */
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .btn-adjuntar-archivo {
    width: 2.25rem !important; /* 36px -> 2.25rem */
    height: 2.25rem !important; /* 36px -> 2.25rem */
    min-width: 2.25rem;
    min-height: 2.25rem;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #mensajeInput {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Modal de perfil */
  .profile-modal {
    max-width: 95vw;
    padding: 20px;
    margin: 10px;
    max-height: 95vh;
  }

  .profile-modal-header h2 {
    font-size: 1.2rem;
  }

  .profile-photo {
    width: 100px;
    height: 100px;
  }

  .profile-photo span {
    font-size: 48px;
  }

  /* Ayuda */
  .ayuda-view {
    padding: 10px;
    padding-top: 50px;
  }

  .ayuda-header h1 {
    font-size: 1.3rem;
  }

  .ayuda-section h2 {
    font-size: 1.1rem;
  }

  .ayuda-section p,
  .ayuda-section li {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}
/* ============================================
   RESPONSIVE - TABLETS Y MÓVILES GRANDES
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .navbar {
    padding: 10px 15px;
  }

  .navbar-logo img {
    max-width: 100px;
    max-height: 50px;
  }

  .main-content {
    padding-top: 60px;
  }

  .conversaciones-header,
  .contactos-header {
    padding: 10px 15px;
    padding-top: 60px;
  }

  .conversacion-item {
    padding: 12px;
  }

  .conversacion-item-avatar {
    width: 45px;
    height: 45px;
  }

  .profile-modal {
    max-width: 90vw;
    padding: 25px;
  }
}
/* ============================================
   RESPONSIVE - TABLETS GRANDES
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar {
    padding: 12px 20px;
  }

  .main-content {
    padding-top: 60px;
  }

  .conversaciones-header,
  .contactos-header {
    padding: 12px 20px;
    padding-top: 60px;
  }

  .profile-modal {
    max-width: 85vw;
    padding: 30px;
  }
}
/* ============================================
   RESPONSIVE - ORIENTACIÓN LANDSCAPE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar {
    height: auto;
    min-height: 50px;
    padding: 6px 10px;
  }

  .main-content {
    padding-top: 50px;
  }

  .conversacion-mensajes {
    max-height: 100%;
  }

  .profile-modal {
    max-height: 95vh;
    padding: 15px;
  }

  .ayuda-view {
    padding-top: 50px;
  }
}
/* ============================================
   RESPONSIVE - DESKTOP (1025px en adelante)
   ============================================ */
@media (min-width: 1025px) {
  /* Navbar optimizado para desktop */
  .navbar {
    padding: 12px 30px;
    height: 60px;
    max-width: 100%;
  }

  .navbar-left {
    flex: 0 0 auto;
    min-width: 200px;
  }

  .navbar-logo img {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
  }

  .navbar-menu {
    display: flex;
    gap: 25px;
  }

  .navbar-menu li {
    padding: 10px 15px;
    font-size: 1rem;
  }

  .navbar-right {
    flex: 0 0 auto;
  }

  /* Main content - ancho completo sin restricciones */
  .main-content {
    padding-top: 60px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Vistas de conversaciones y contactos - ancho completo */
  .conversaciones-view.active,
  .contactos-view.active {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Headers de secciones - ancho completo */
  .conversaciones-header,
  .contactos-header {
    padding: 15px 30px;
    padding-top: 60px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .conversaciones-header h1,
  .contactos-header h1 {
    font-size: 1.5rem;
  }

  /* Listas de conversaciones y contactos - ancho completo */
  .conversaciones-list,
  .contactos-list {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 15px 30px;
    box-sizing: border-box;
  }

  .conversacion-item {
    padding: 15px 20px;
    max-width: 100%;
  }

  .conversacion-item-avatar {
    width: 55px;
    height: 55px;
    margin-right: 15px;
  }

  .conversacion-item-nombre {
    font-size: 1.1rem;
  }

  /* Chat window - ancho completo */
  .conversacion-view {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .conversacion-mensajes {
    padding: 20px 30px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .mensaje-item {
    padding: 0.75rem 1.25rem; /* 12px 20px -> 0.75rem 1.25rem */
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    display: flex !important;
    min-height: 2.5rem; /* Altura mínima flexible */
  }
  
  /* En desktop: mensajes propios a la derecha */
  .mensaje-item.propio {
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* En desktop: mensajes ajenos a la izquierda */
  .mensaje-item.ajeno {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  /* Ajustar burbujas según el tipo de mensaje en desktop */
  .mensaje-item.propio .mensaje-burbuja {
    margin-left: auto !important;
    margin-right: 0 !important;
    border-bottom-right-radius: 0.25rem !important; /* 4px -> 0.25rem */
    border-bottom-left-radius: 1.125rem !important; /* 18px -> 1.125rem */
    background: rgba(61, 42, 91, 0.9) !important;
    background-color: rgba(61, 42, 91, 0.9) !important;
    color: #fff !important;
    max-width: 70% !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* En modo dark, forzar color púrpura oscuro para mensajes propios - DESKTOP Y MÓVIL - NUNCA AZUL */
  body.theme-dark .mensaje-item.propio .mensaje-burbuja,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja *,
  body.theme-dark .mensaje-item.propio .mensaje-texto,
  body.theme-dark .mensaje-item.propio .mensaje-contenido,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja .mensaje-texto,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja span,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja p,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja div,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja img,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja button,
  body.theme-dark .mensaje-item.propio .mensaje-burbuja a {
    background: #3D2A5B !important;
    background-color: #3D2A5B !important;
    color: #ffffff !important;
  }
  
  .mensaje-item.ajeno .mensaje-burbuja {
    margin-left: 0 !important;
    margin-right: auto !important;
    border-bottom-left-radius: 0.25rem !important; /* 4px -> 0.25rem */
    border-bottom-right-radius: 1.125rem !important; /* 18px -> 1.125rem */
    max-width: 70% !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  
  /* Ajustar avatar solo para mensajes ajenos en desktop */
  .mensaje-item.propio .mensaje-avatar {
    order: 2;
    margin-left: 10px;
    margin-right: 0;
  }
  
  .mensaje-item.ajeno .mensaje-avatar {
    order: 0;
    margin-left: 0;
    margin-right: 10px;
  }
  
  /* Ajustar botón de eliminar para mensajes propios en desktop */
  .mensaje-item.propio .mensaje-delete {
    order: 0;
    margin-left: 0;
    margin-right: 10px;
  }
  
  /* Ajustar texto en mensajes propios en desktop */
  .mensaje-item.propio .mensaje-texto {
    color: #fff !important;
  }
  
  .mensaje-item.propio .mensaje-metadata {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  .mensaje-item.propio .mensaje-fecha {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  /* Ajustar texto en mensajes propios en desktop */
  .mensaje-item.propio .mensaje-texto {
    color: #fff !important;
  }
  
  .mensaje-item.propio .mensaje-metadata {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Input de mensaje - ancho completo */
  .conversacion-input-container {
    padding: 0.9375rem 1.875rem; /* 15px 30px -> 0.9375rem 1.875rem */
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    min-height: 3.75rem; /* Altura mínima flexible */
  }

  /* Modal de perfil */
  .profile-modal {
    max-width: 800px;
    padding: 40px;
  }

  /* Ayuda */
  .ayuda-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
  }

  .ayuda-header h1 {
    font-size: 2.5rem;
  }

  .ayuda-section h2 {
    font-size: 2rem;
  }
}
/* ============================================
   RESPONSIVE - PANTALLAS MUY GRANDES
   ============================================ */
@media (min-width: 1400px) {
  .main-content {
    width: 100%;
    max-width: 100%;
  }

  .conversaciones-header,
  .contactos-header,
  .conversaciones-list,
  .contactos-list,
  .conversacion-view,
  .conversacion-input-container {
    width: 100%;
    max-width: 100%;
  }

  .profile-modal {
    max-width: 900px;
  }

  .ayuda-view {
    width: 100%;
    max-width: 100%;
  }
}
/* ============================================
   TOUCH FRIENDLY - ÁREAS TÁCTILES MÍNIMAS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Asegurar que los botones sean táctiles */
  button,
  .btn,
  .conversacion-item,
  .contacto-item,
  .language-option,
  .user-dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Aumentar padding en inputs */
  input,
  textarea {
    padding: 12px;
    font-size: 16px; /* Evitar zoom en iOS */
  }

  /* Aumentar espaciado entre elementos */
  .conversacion-item {
    margin-bottom: 12px;
  }

  .mensaje-item {
    margin-bottom: 12px;
  }
}
/* ============================================
   REDUCCIÓN DE MOVIMIENTO (ACCESIBILIDAD)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
   IMPRESIÓN
   ============================================ */
@media print {
  .navbar,
  .conversacion-input-container,
  .btn,
  button {
    display: none !important;
  }

  .main-content {
    padding-top: 0;
  }

  .conversacion-mensajes {
    max-height: none;
    overflow: visible;
  }
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */
/**
 * Autor: SIVOL® - Aldo Frias - Argentina
 * Fecha: 11/03/2026 22:50 (Argentina - UTC-3)
 * Temas de ARCHAT: Argentina y Dark
 * Tema Argentina - Inspirado en la bandera argentina
 * Colores: Celeste (#75AADB), Blanco (#FFFFFF), Dorado (#FFD700)
 * @file argentina-theme.css
 * @version 1.0
 */
/* Variables CSS para tema Argentina — contraste y legibilidad (WCAG AA) */
:root[data-theme="argentina"] {
  --app-bg: #f4f8fd;
  --app-surface: #ffffff;
  --app-card-bg: #f3f4f6;
  --color-bg-main: #f4f8fd;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #eef5ff;
  --color-bg-card: #ffffff;
  --color-text-main: #111827;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-inverse: #ffffff;
  --color-muted: #4b5563;
  --color-primary: #3aa6ff;
  --color-secondary: #2563eb;
  --color-accent: #f4c430;
  --color-border: #d1d5db;
  --button-primary-bg: var(--color-primary);
}
:root[data-theme="argentina"],
:root[data-theme="argentina"] {
  /* Colores primarios */
  --argentina-primary: #75AADB;
  --argentina-primary-rgb: 117, 170, 219;
  --argentina-secondary: #FFFFFF;
  --argentina-accent: #FFD700;
  --argentina-accent-rgb: 255, 215, 0;
  
  /* Neutros */
  --argentina-neutral-bg: #F5F5F5;
  --argentina-text-primary: var(--color-text-main, #1f2937);
  --argentina-text-secondary: #666666;
  
  /* Sombras */
  --argentina-shadow: rgba(117, 170, 219, 0.3);
  --argentina-shadow-hover: rgba(117, 170, 219, 0.5);
  
  /* Gradientes (solo para botones/decoración, no para fondo de página) */
  --argentina-gradient-header: linear-gradient(to right, #75AADB, #87CEEB);
  --argentina-gradient-button: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%);
}
/* Tema Argentina: color de texto; fondo lo define global.css (html/body con var(--app-bg)) */
:root[data-theme="argentina"] {
  color: var(--argentina-text-primary) !important;
}
/* OVERRIDE CRÍTICO: evitar herencia global dentro de conversación y modal de edición */
:root[data-theme="argentina"] *:not(.chat-container):not(.chat-container *):not(.contact-edit-modal):not(.contact-edit-modal *) {
  color: inherit !important;
  font-weight: inherit !important;
}
/* Excepción: números del captcha siempre blancos (evita herencia de color oscuro). */
:root[data-theme="argentina"] .captcha-question {
  color: #ffffff !important;
}
/* Forzar colores específicos en elementos de contenido */
:root[data-theme="argentina"] .main-content,
:root[data-theme="argentina"] .contacts-view,
:root[data-theme="argentina"] .conversations-view,
:root[data-theme="argentina"] .conversacion-item,
:root[data-theme="argentina"] .contact-item {
  color: var(--color-text-main) !important;
}
:root[data-theme="argentina"] .main-content *,
:root[data-theme="argentina"] .contacts-view *,
:root[data-theme="argentina"] .conversations-view *:not(.chat-container):not(.chat-container *) {
  color: inherit !important;
}
/* Excepciones para navbar y dropdowns - mantener blanco */
:root[data-theme="argentina"] .navbar,
:root[data-theme="argentina"] .navbar *:not(.navbar-invite-contact-btn):not(.navbar-invite-contact-btn *),
:root[data-theme="argentina"] .user-dropdown,
:root[data-theme="argentina"] .user-dropdown * {
  color: inherit !important;
}
/* Contenedor principal */
:root[data-theme="argentina"] .main-app,
:root[data-theme="argentina"] .app-content,
:root[data-theme="argentina"] .contacts-view,
:root[data-theme="argentina"] .conversations-view {
  background: transparent !important;
  color: var(--argentina-text-primary) !important;
}
/* Elementos del navbar - presencia y usuario */
:root[data-theme="argentina"] .navbar-presence-selector,
:root[data-theme="argentina"] .presence-status,
:root[data-theme="argentina"] .user-profile,
:root[data-theme="argentina"] .user-name {
  color: var(--argentina-secondary) !important;
}
/* 🔥 MEJORA VISUAL: Botón de estado más armonioso para tema Argentina */
:root[data-theme="argentina"] .navbar-presence-selector .navbar-status-button {
  background: rgba(76, 175, 80, 0.12) !important;
  border: 1px solid rgba(76, 175, 80, 0.35) !important;
  color: rgba(46, 125, 50, 0.9) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
:root[data-theme="argentina"] .navbar-presence-selector .navbar-status-button:hover {
  background: rgba(76, 175, 80, 0.18) !important;
  border-color: rgba(76, 175, 80, 0.5) !important;
  transform: none !important;
  box-shadow: none !important;
}
:root[data-theme="argentina"] .navbar-presence-selector .navbar-status-online {
  background: rgba(76, 175, 80, 0.12) !important;
  border-color: rgba(76, 175, 80, 0.4) !important;
}
:root[data-theme="argentina"] .navbar-presence-selector .navbar-status-icon {
  color: rgba(46, 125, 50, 0.85) !important;
  filter: none !important;
}
:root[data-theme="argentina"] .navbar-presence-selector .navbar-status-text {
  color: rgba(46, 125, 50, 0.85) !important;
}
:root[data-theme="argentina"] .navbar-status-dropdown {
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--color-text-main) !important;
  border: 1px solid rgba(117, 170, 219, 0.4) !important;
  box-shadow: 0 12px 30px rgba(17, 25, 39, 0.25) !important;
}
:root[data-theme="argentina"] .navbar-status-option {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(117, 170, 219, 0.25) !important;
  color: #0c1020 !important;
}
:root[data-theme="argentina"] .navbar-status-option:hover {
  background: rgba(117, 170, 219, 0.15) !important;
  border-color: rgba(117, 170, 219, 0.6) !important;
}
:root[data-theme="argentina"] .navbar-status-option.active {
  background: rgba(117, 170, 219, 0.25) !important;
  border-color: rgba(117, 170, 219, 0.8) !important;
}
/* Avatar del usuario en navbar */
:root[data-theme="argentina"] .user-avatar,
:root[data-theme="argentina"] .user-avatar-mobile {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
:root[data-theme="argentina"] .user-avatar:hover,
:root[data-theme="argentina"] .user-avatar-mobile:hover {
  border-color: var(--argentina-accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3) !important;
}
/* Headers y títulos con gradiente celeste */
:root[data-theme="argentina"] .profile-modal-header,
:root[data-theme="argentina"] .navbar,
:root[data-theme="argentina"] .navbar-header,
:root[data-theme="argentina"] .navbar-container {
  background: var(--argentina-gradient-header) !important;
  color: var(--argentina-secondary) !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px var(--argentina-shadow) !important;
}
/* Títulos h2 y h3 - solo en headers, no en contenido */
:root[data-theme="argentina"] .profile-modal-header h2,
:root[data-theme="argentina"] .modal-header h2 {
  background: transparent !important;
  color: var(--argentina-secondary) !important;
}
/* Títulos en contenido principal - fondo blanco con texto oscuro */
:root[data-theme="argentina"] .contacts-view h1,
:root[data-theme="argentina"] .contacts-title,
:root[data-theme="argentina"] .main-content h1,
:root[data-theme="argentina"] .main-content h2,
:root[data-theme="argentina"] .main-content h3,
:root[data-theme="argentina"] .section-title,
:root[data-theme="argentina"] .favoritos-title,
:root[data-theme="argentina"] .contacts-section-title {
  background: transparent !important;
  color: var(--color-text-main) !important;
  font-weight: 700 !important;
}
/* Secciones de contactos */
:root[data-theme="argentina"] .favoritos-section,
:root[data-theme="argentina"] .contacts-section {
  background: transparent !important;
}
:root[data-theme="argentina"] .contacts-list {
  background: transparent !important;
}
/* Navbar específico - fondo celeste */
:root[data-theme="argentina"] .navbar {
  background: var(--argentina-gradient-header) !important;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3) !important;
}
/* Logo y elementos del navbar */
:root[data-theme="argentina"] .navbar-logo,
:root[data-theme="argentina"] .navbar-menu,
:root[data-theme="argentina"] .navbar-right {
  color: var(--argentina-secondary) !important;
}
/* Textos del navbar - asegurar legibilidad */
:root[data-theme="argentina"] .navbar-menu li,
:root[data-theme="argentina"] .navbar-menu span,
:root[data-theme="argentina"] .navbar-menu i {
  color: var(--argentina-secondary) !important;
}
:root[data-theme="argentina"] .navbar-menu li.active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-bottom: 2px solid var(--argentina-accent) !important;
}
/* Botones del navbar */
:root[data-theme="argentina"] .navbar-toggle-contacts-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: var(--argentina-secondary) !important;
}
:root[data-theme="argentina"] .navbar-toggle-contacts-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: var(--argentina-accent) !important;
}
/* Botón "Invitar contacto": forzar contraste legible en Argentina */
:root[data-theme="argentina"] .navbar .navbar-invite-contact-btn {
  background: #0d3f72 !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* Lupa en navbar (solo zona afectada): preservar aspecto sano en tema Argentina */
:root[data-theme="argentina"] .navbar .navbar-contacts-search-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e8ecf1 !important;
}
:root[data-theme="argentina"] .navbar .navbar-contacts-search-toggle:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
:root[data-theme="argentina"] .navbar .navbar-invite-contact-btn:hover {
  background: #0a325c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme="argentina"] .navbar .navbar-invite-contact-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: 1px !important;
}
@media (min-width: 1025px) and (max-width: 1280px) {
  :root[data-theme="argentina"] .navbar .navbar-invite-contact-btn {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
  }
}
/* Inputs y campos de texto */
:root[data-theme="argentina"] input,
:root[data-theme="argentina"] textarea:not(.conversacion-input):not(.chat-input-textarea),
:root[data-theme="argentina"] select {
  border-color: var(--argentina-primary) !important;
  background: #FFFFFF !important;
  color: var(--color-text-main) !important;
  font-weight: normal !important;
}
:root[data-theme="argentina"] input:focus,
:root[data-theme="argentina"] textarea:not(.conversacion-input):not(.chat-input-textarea):focus,
:root[data-theme="argentina"] select:focus {
  border-color: var(--argentina-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3) !important;
  outline: none !important;
}
:root[data-theme="argentina"] input::placeholder,
:root[data-theme="argentina"] textarea:not(.conversacion-input):not(.chat-input-textarea)::placeholder {
  color: #888888 !important;
  font-weight: normal !important;
  opacity: 1 !important;
}
/* Botones */
:root[data-theme="argentina"] .btn-primary {
  background: var(--argentina-gradient-button) !important;
  color: var(--argentina-secondary) !important;
  border: none !important;
  box-shadow: 0 4px 12px var(--argentina-shadow) !important;
}
:root[data-theme="argentina"] .btn-primary:hover {
  background: rgba(255, 215, 0, 0.9) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px var(--argentina-shadow-hover) !important;
}
:root[data-theme="argentina"] button:active {
  transform: scale(0.95) !important;
}
/* Burbujas de chat - Mensajes enviados */
:root[data-theme="argentina"] .mensaje-item.propio .mensaje-burbuja {
  background: var(--argentina-primary) !important;
  color: var(--argentina-secondary) !important;
  box-shadow: 0 2px 8px var(--argentina-shadow) !important;
}
/* Burbujas de chat - Mensajes recibidos */
:root[data-theme="argentina"] .mensaje-item:not(.propio) .mensaje-burbuja {
  background: rgba(255, 255, 255, 0.8) !important;
  border-left: 4px solid var(--argentina-primary) !important;
  color: var(--argentina-text-primary) !important;
}
/* Cards y listas */
:root[data-theme="argentina"] .conversacion-item,
:root[data-theme="argentina"] .contact-item,
:root[data-theme="argentina"] .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(117, 170, 219, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="argentina"] .conversaciones-view {
  background: #f5f7fb !important;
  color: var(--argentina-text-primary) !important;
}
/* =========================
   HELP / PLANHELP (Argentina)
   ========================= */
:root[data-theme="argentina"] .ayuda-container,
:root[data-theme="argentina"] .ayuda-section,
:root[data-theme="argentina"] .plan-help-section {
  color: #0f1a2f !important;
}
/* Evitar que el override global "color: inherit !important" degrade contraste en tarjetas de planes */
:root[data-theme="argentina"] .plan-help-card,
:root[data-theme="argentina"] .plan-help-card * {
  color: inherit !important;
}
:root[data-theme="argentina"] .plan-help-card {
  background: rgba(117, 170, 219, 0.10) !important;
  border-color: rgba(117, 170, 219, 0.75) !important;
  box-shadow: 0 2px 12px rgba(117, 170, 219, 0.18) !important;
}
:root[data-theme="argentina"] .plan-help-card.plan-help-pro {
  background: rgba(255, 215, 0, 0.12) !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.18) !important;
}
:root[data-theme="argentina"] .conversaciones-header h1 {
  color: #0f1a2f !important;
  text-shadow: none !important;
}
:root[data-theme="argentina"] .conversacion-item {
  background: #ffffff !important;
  border-color: rgba(117, 170, 219, 0.2) !important;
}
:root[data-theme="argentina"] .conversacion-item:hover {
  background: #f0f4ff !important;
  transform: none !important;
}
:root[data-theme="argentina"] .conversacion-item-nombre,
:root[data-theme="argentina"] .conversacion-item-preview,
:root[data-theme="argentina"] .conversacion-item-status {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .conversaciones-list {
  padding: 0.625rem !important;
  max-height: calc(100vh - 12rem);
}
/* Textos en las cards de contactos - asegurar legibilidad */
:root[data-theme="argentina"] .conversacion-item-nombre,
:root[data-theme="argentina"] .contact-name,
:root[data-theme="argentina"] .conversacion-item h3,
:root[data-theme="argentina"] .contact-item h3,
:root[data-theme="argentina"] .conversacion-item-info h3 {
  color: var(--color-text-main) !important;
  font-weight: 600 !important;
}
:root[data-theme="argentina"] .conversacion-item-subtitle,
:root[data-theme="argentina"] .contact-subtitle,
:root[data-theme="argentina"] .last-message-preview,
:root[data-theme="argentina"] .conversacion-item-info span {
  color: #555555 !important;
}
:root[data-theme="argentina"] .conversacion-item-status,
:root[data-theme="argentina"] .contact-status,
:root[data-theme="argentina"] .status-display {
  color: #666666 !important;
}
/* Asegurar que todos los textos dentro de las cards sean legibles */
:root[data-theme="argentina"] .conversacion-item *,
:root[data-theme="argentina"] .contact-item * {
  color: inherit !important;
}
:root[data-theme="argentina"] .conversacion-item {
  color: var(--color-text-main) !important;
}
:root[data-theme="argentina"] .conversacion-item:hover,
:root[data-theme="argentina"] .contact-item:hover,
:root[data-theme="argentina"] .card:hover {
  box-shadow: 0 4px 16px var(--argentina-shadow) !important;
  transform: translateY(-2px) !important;
  transition: all 0.2s ease !important;
}
/* Modales */
:root[data-theme="argentina"] .modal-overlay,
:root[data-theme="argentina"] .contact-edit-modal-overlay {
  background: rgba(117, 170, 219, 0.1) !important;
  backdrop-filter: blur(8px) !important;
}
:root[data-theme="argentina"] .modal,
:root[data-theme="argentina"] .profile-modal {
  background: var(--argentina-secondary) !important;
  border: 2px solid var(--argentina-primary) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
}
/* Iconos y elementos activos */
:root[data-theme="argentina"] .contact-action-btn.fav-active,
:root[data-theme="argentina"] .favorite-active,
:root[data-theme="argentina"] .star-active,
:root[data-theme="argentina"] button[class*="fav"],
:root[data-theme="argentina"] .favorito,
:root[data-theme="argentina"] [class*="star"]:not(.dark-mode) {
  color: var(--argentina-accent) !important;
  fill: rgba(255, 215, 0, 0.8) !important;
}
:root[data-theme="argentina"] svg:hover,
:root[data-theme="argentina"] .icon:hover,
:root[data-theme="argentina"] button:hover svg {
  stroke: var(--argentina-primary) !important;
  fill: var(--argentina-primary) !important;
}
/* Botones de acción de contacto */
:root[data-theme="argentina"] .contact-action-btn {
  color: var(--argentina-text-secondary) !important;
  border-color: rgba(117, 170, 219, 0.3) !important;
}
:root[data-theme="argentina"] .contact-action-btn:hover {
  background: rgba(117, 170, 219, 0.1) !important;
  border-color: var(--argentina-primary) !important;
  color: var(--argentina-primary) !important;
}
/* Switches y toggles */
:root[data-theme="argentina"] input[type="checkbox"]:checked,
:root[data-theme="argentina"] .toggle-switch.active {
  background: var(--argentina-accent) !important;
}
:root[data-theme="argentina"] input[type="checkbox"] {
  accent-color: var(--argentina-primary) !important;
}
/* Scrollbars */
:root[data-theme="argentina"] ::-webkit-scrollbar-thumb {
  background: var(--argentina-primary) !important;
}
:root[data-theme="argentina"] ::-webkit-scrollbar-track {
  background: var(--argentina-neutral-bg) !important;
}
/* Links */
:root[data-theme="argentina"] a {
  color: var(--argentina-primary) !important;
}
:root[data-theme="argentina"] a:hover {
  color: var(--argentina-accent) !important;
}
/* Dropdowns y menús */
:root[data-theme="argentina"] .user-dropdown {
  background: #FFFFFF !important;
  border: 2px solid var(--argentina-primary) !important;
  box-shadow: 0 8px 24px var(--argentina-shadow) !important;
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="argentina"] .user-dropdown-header,
:root[data-theme="argentina"] .user-dropdown-item {
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="argentina"] .user-dropdown-item:hover {
  background: rgba(117, 170, 219, 0.15) !important;
  color: var(--argentina-primary) !important;
}
:root[data-theme="argentina"] .user-dropdown-item i {
  color: var(--argentina-primary) !important;
}
:root[data-theme="argentina"] .user-dropdown-item:hover i {
  color: var(--argentina-accent) !important;
}
:root[data-theme="argentina"] .user-dropdown-divider {
  border-color: rgba(117, 170, 219, 0.2) !important;
}
/* Settings header en dropdown */
:root[data-theme="argentina"] .user-dropdown-settings-header {
  color: var(--argentina-text-primary) !important;
  font-weight: 600 !important;
}
:root[data-theme="argentina"] .user-dropdown-settings-header i {
  color: var(--argentina-primary) !important;
}
/* Theme chips (botones de tema) */
:root[data-theme="argentina"] .theme-chip {
  border-color: #75AADB !important;
  color: var(--color-text-main) !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}
:root[data-theme="argentina"] .theme-chip.active {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(117, 170, 219, 0.3) !important;
  border-color: transparent !important;
}
:root[data-theme="argentina"] .theme-chip:hover {
  background: rgba(117, 170, 219, 0.15) !important;
  border-color: #87CEEB !important;
  color: var(--color-text-main) !important;
}
/* Badges y etiquetas */
:root[data-theme="argentina"] .badge,
:root[data-theme="argentina"] .tag {
  background: var(--argentina-primary) !important;
  color: var(--argentina-secondary) !important;
}
/* Input de búsqueda */
:root[data-theme="argentina"] .search-input,
:root[data-theme="argentina"] input[type="search"],
:root[data-theme="argentina"] .navbar-search,
:root[data-theme="argentina"] .contacts-search,
:root[data-theme="argentina"] input[placeholder*="Buscar"],
:root[data-theme="argentina"] input[placeholder*="Search"] {
  border-color: var(--argentina-primary) !important;
  background: #FFFFFF !important;
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="argentina"] .search-input:focus,
:root[data-theme="argentina"] input[type="search"]:focus,
:root[data-theme="argentina"] .navbar-search:focus {
  border-color: var(--argentina-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3) !important;
}
/* Responsive - Móvil */
@media (max-width: 768px) {
  :root[data-theme="argentina"] .modal,
  :root[data-theme="argentina"] .profile-modal {
    padding: 16px !important;
    margin: 16px !important;
  }
}
/* Responsive - PC */
@media (min-width: 769px) {
  :root[data-theme="argentina"] .modal,
  :root[data-theme="argentina"] .profile-modal {
    padding: 24px !important;
    margin: 24px !important;
  }
}
/* ============================================
   MEJORAS DE LEGIBILIDAD ADICIONALES - TEMA ARGENTINA
   ============================================ */
/* Asegurar que todos los textos sean legibles - override global */
:root[data-theme="argentina"] {
  text-shadow: none !important;
}
/* Específicamente para elementos dentro de cards que deben ser oscuros */
:root[data-theme="argentina"] .conversacion-item-info,
:root[data-theme="argentina"] .contact-item-info {
  color: var(--color-text-main) !important;
}
:root[data-theme="argentina"] .conversacion-item-info *,
:root[data-theme="argentina"] .contact-item-info * {
  color: inherit !important;
}
/* Forzar colores específicos en elementos clave con alta especificidad */
:root[data-theme="argentina"] .conversacion-item,
:root[data-theme="argentina"] .contact-item,
:root[data-theme="argentina"] .conversacion-item *,
:root[data-theme="argentina"] .contact-item * {
  color: var(--color-text-main) !important;
  font-weight: normal !important;
}
:root[data-theme="argentina"] .conversacion-item-nombre,
:root[data-theme="argentina"] .contact-name,
:root[data-theme="argentina"] .conversacion-item h3,
:root[data-theme="argentina"] .contact-item h3 {
  color: var(--color-text-main) !important;
  font-weight: 600 !important;
}
:root[data-theme="argentina"] .conversacion-item-subtitle,
:root[data-theme="argentina"] .last-message-preview,
:root[data-theme="argentina"] .conversacion-item-status {
  color: #555555 !important;
  font-weight: normal !important;
}
/* Estados de presencia en cards */
:root[data-theme="argentina"] .status-badge,
:root[data-theme="argentina"] .presence-badge {
  color: #555555 !important;
  background: rgba(245, 245, 245, 0.8) !important;
  border: 1px solid rgba(117, 170, 219, 0.3) !important;
}
/* Excepción: status-pending debe tener texto negro */
:root[data-theme="argentina"] .status-pending {
  color: var(--color-text-main) !important;
  background: #fff3cd !important;
}
/* Iconos en las cards - asegurar visibilidad */
:root[data-theme="argentina"] .contact-action-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(117, 170, 219, 0.4) !important;
  color: #666666 !important;
}
:root[data-theme="argentina"] .contact-action-btn:hover {
  background: rgba(117, 170, 219, 0.15) !important;
  border-color: var(--argentina-primary) !important;
  color: var(--argentina-primary) !important;
}
:root[data-theme="argentina"] .contact-action-btn.fav-active {
  color: var(--argentina-accent) !important;
  background: rgba(255, 215, 0, 0.1) !important;
  border-color: var(--argentina-accent) !important;
}
/* Asegurar que los avatares sean visibles */
:root[data-theme="argentina"] .conversacion-item-avatar,
:root[data-theme="argentina"] .contact-item-avatar {
  border: 2px solid rgba(117, 170, 219, 0.3) !important;
}
/* Placeholders y textos secundarios */
:root[data-theme="argentina"] ::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}
/* Asegurar contraste en todos los textos */
:root[data-theme="argentina"] {
  --text-contrast-dark: #1a1a1a;
  --text-contrast-medium: #555555;
  --text-contrast-light: #888888;
}
/* Ajustes sobre modal de Favoritos/Bloqueados para mostrarlo en Argentina */
:root[data-theme="argentina"] .users-modal-overlay {
  background: rgba(14, 42, 75, 0.65) !important;
}
:root[data-theme="argentina"] .users-modal {
  background: #ffffff !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.5) !important;
  box-shadow: 0 25px 50px rgba(33, 73, 170, 0.2) !important;
}
:root[data-theme="argentina"] .users-modal-close {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(117, 170, 219, 0.5) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .users-modal-tabs button {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(117, 170, 219, 0.5) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .users-modal-tabs button.active {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Modal de Estado de Presencia en tema Argentina */
:root[data-theme="argentina"] .presence-modal-overlay {
  background: rgba(14, 42, 75, 0.6) !important;
}
:root[data-theme="argentina"] .presence-modal {
  background: #ffffff !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  box-shadow: 0 24px 48px rgba(33, 73, 170, 0.22) !important;
}
:root[data-theme="argentina"] .presence-modal-header {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}
:root[data-theme="argentina"] .presence-modal-header h2 {
  color: #0f1a2f !important;
  text-shadow: none !important;
}
:root[data-theme="argentina"] .presence-modal-close {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.6) !important;
}
:root[data-theme="argentina"] .presence-modal-body .current-status-display {
  background: #f5f8ff !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .presence-modal-body .status-label,
:root[data-theme="argentina"] .presence-modal-body .status-options h3 {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .presence-modal-body .status-btn {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.5) !important;
  color: #0f1a2f !important;
  box-shadow: 0 4px 10px rgba(117, 170, 219, 0.12) !important;
}
:root[data-theme="argentina"] .presence-modal-body .status-btn:hover {
  background: rgba(117, 170, 219, 0.18) !important;
  border-color: rgba(117, 170, 219, 0.8) !important;
}
:root[data-theme="argentina"] .presence-modal-body .status-btn.active {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
:root[data-theme="argentina"] .presence-modal-body .status-btn .status-icon {
  filter: none !important;
}
/* Modal de Perfil en tema Argentina */
:root[data-theme="argentina"] .profile-modal-overlay {
  background: rgba(14, 42, 75, 0.6) !important;
}
:root[data-theme="argentina"] .profile-modal {
  background: #ffffff !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  box-shadow: 0 24px 48px rgba(33, 73, 170, 0.22) !important;
}
:root[data-theme="argentina"] .profile-modal-header {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal-header h2 {
  color: #0f1a2f !important;
  text-shadow: none !important;
}
:root[data-theme="argentina"] .profile-modal-close {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.6) !important;
}
:root[data-theme="argentina"] .profile-modal-body {
  background: #ffffff !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal-body input,
:root[data-theme="argentina"] .profile-modal-body select,
:root[data-theme="argentina"] .profile-modal-body textarea {
  background: #f7f9ff !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  color: #0f1a2f !important;
}
/* Secciones internas del perfil claras */
:root[data-theme="argentina"] .profile-section {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.25) !important;
  box-shadow: 0 4px 12px rgba(117, 170, 219, 0.12) !important;
}
:root[data-theme="argentina"] .profile-section h3,
:root[data-theme="argentina"] .profile-section label {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-section small {
  color: #3a4a68 !important;
}
:root[data-theme="argentina"] .profile-field {
  color: #0f1a2f !important;
}
/* Foto de perfil clara */
:root[data-theme="argentina"] .profile-photo {
  background: #ffffff !important;
  border: 4px solid rgba(117, 170, 219, 0.35) !important;
  box-shadow: 0 8px 24px rgba(33, 73, 170, 0.15) !important;
}
:root[data-theme="argentina"] .profile-photo span {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-photo-upload-btn {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  border: 3px solid #ffffff !important;
  color: #ffffff !important;
}
/* Secciones y campos del perfil en claro */
:root[data-theme="argentina"] .profile-photo-section,
:root[data-theme="argentina"] .profile-cover,
:root[data-theme="argentina"] .profile-section,
:root[data-theme="argentina"] .profile-form-section,
:root[data-theme="argentina"] .profile-card,
:root[data-theme="argentina"] .profile-row,
:root[data-theme="argentina"] .profile-field-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.25) !important;
  box-shadow: 0 4px 12px rgba(117, 170, 219, 0.10) !important;
  color: #0f1a2f !important;
}
/* Formularios internos: quitar fondos oscuros residuales */
:root[data-theme="argentina"] .profile-modal .form-group,
:root[data-theme="argentina"] .profile-modal .form-row,
:root[data-theme="argentina"] .profile-modal .form-control,
:root[data-theme="argentina"] .profile-modal .input-group,
:root[data-theme="argentina"] .profile-modal .profile-form-block {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.25) !important;
  color: #0f1a2f !important;
  box-shadow: none !important;
}
:root[data-theme="argentina"] .profile-modal input,
:root[data-theme="argentina"] .profile-modal select,
:root[data-theme="argentina"] .profile-modal textarea {
  background: #f7f9ff !important;
  border: 1px solid rgba(117, 170, 219, 0.35) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal input::placeholder,
:root[data-theme="argentina"] .profile-modal textarea::placeholder {
  color: #3a4a68 !important;
}
/* Sección de idioma/país sin fondo oscuro */
:root[data-theme="argentina"] .profile-modal .profile-section-language,
:root[data-theme="argentina"] .profile-modal .profile-section-country,
:root[data-theme="argentina"] .profile-modal .language-block,
:root[data-theme="argentina"] .profile-modal .country-block {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.25) !important;
  box-shadow: 0 4px 12px rgba(117, 170, 219, 0.10) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal .profile-section-language h3,
:root[data-theme="argentina"] .profile-modal .profile-section-country h3,
:root[data-theme="argentina"] .profile-modal .language-block label,
:root[data-theme="argentina"] .profile-modal .country-block label {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal .select,
:root[data-theme="argentina"] .profile-modal select {
  background: #f7f9ff !important;
  border: 1px solid rgba(117, 170, 219, 0.35) !important;
  color: #0f1a2f !important;
  box-shadow: none !important;
}
:root[data-theme="argentina"] .profile-section h3,
:root[data-theme="argentina"] .profile-form-section h3,
:root[data-theme="argentina"] .profile-card h3,
:root[data-theme="argentina"] .profile-row h3,
:root[data-theme="argentina"] .profile-field-label,
:root[data-theme="argentina"] .profile-modal-body label {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-section small,
:root[data-theme="argentina"] .profile-hint,
:root[data-theme="argentina"] .profile-helper {
  color: #3a4a68 !important;
}
/* FORZAR FONDOS CLAROS EN TODAS LAS SECCIONES DEL MODAL DE PERFIL */
:root[data-theme="argentina"] .profile-modal .form-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal .form-section h2 {
  color: #0f1a2f !important;
  border-bottom-color: rgba(117, 170, 219, 0.3) !important;
}
:root[data-theme="argentina"] .profile-modal .profile-form {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(117, 170, 219, 0.25) !important;
  box-shadow: 0 4px 12px rgba(117, 170, 219, 0.10) !important;
  color: #0f1a2f !important;
}
/* Eliminar cualquier fondo oscuro que pueda estar aplicado por JavaScript o CSS global */
:root[data-theme="argentina"] .profile-modal .form-section *,
:root[data-theme="argentina"] .profile-modal .profile-form * {
  background-color: inherit !important;
}
:root[data-theme="argentina"] .profile-modal .form-section .profile-form {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* FORZAR TODOS LOS ELEMENTOS DEL MODAL A FONDOS CLAROS - MÁXIMA PRIORIDAD */
:root[data-theme="argentina"] .profile-modal * {
  background-color: transparent !important;
}
:root[data-theme="argentina"] .profile-modal .profile-form,
:root[data-theme="argentina"] .profile-modal .form-section .profile-form {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
/* Asegurar que los inputs y textareas también tengan fondo claro */
:root[data-theme="argentina"] .profile-modal .form-group input,
:root[data-theme="argentina"] .profile-modal .form-group textarea,
:root[data-theme="argentina"] .profile-modal .form-group select {
  background: #f7f9ff !important;
  background-color: #f7f9ff !important;
  background-image: none !important;
}
:root[data-theme="argentina"] .profile-photo-menu {
  background: #ffffff !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.3) !important;
  box-shadow: 0 8px 24px rgba(33, 73, 170, 0.18) !important;
}
:root[data-theme="argentina"] .profile-photo-menu button {
  color: #0f1a2f !important;
}
/* Botones de estado (inline en perfil) en claro */
:root[data-theme="argentina"] .profile-modal .status-btn {
  background: #ffffff !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  color: #0f1a2f !important;
  box-shadow: 0 4px 10px rgba(117, 170, 219, 0.12) !important;
}
:root[data-theme="argentina"] .profile-modal .status-btn:hover {
  background: rgba(117, 170, 219, 0.18) !important;
  border-color: rgba(117, 170, 219, 0.8) !important;
}
:root[data-theme="argentina"] .profile-modal .status-btn.active {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
:root[data-theme="argentina"] .profile-modal .status-btn .status-icon {
  filter: none !important;
}
:root[data-theme="argentina"] .profile-modal-body label {
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .profile-modal-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(117, 170, 219, 0.35) !important;
}
:root[data-theme="argentina"] .profile-modal-footer button {
  background: linear-gradient(135deg, #75AADB 0%, #87CEEB 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(117, 170, 219, 0.25) !important;
}
:root[data-theme="argentina"] .profile-modal-footer button:first-child {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f1a2f !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
}
:root[data-theme="argentina"] .users-modal-tabs button:hover {
  background: rgba(117, 170, 219, 0.2) !important;
  border-color: rgba(117, 170, 219, 0.8) !important;
  color: #0f1a2f !important;
}
:root[data-theme="argentina"] .users-empty,
:root[data-theme="argentina"] .users-modal-content,
:root[data-theme="argentina"] .users-item {
  color: #0f1a2f !important;
}
/* ============================================
   ARGENTINA + DARK — Región Argentina con tema oscuro
   Celeste/dorado sobre fondo oscuro; mismo sistema que light sin :not(dark)
   ============================================ */
:root[data-theme="dark"],
:root[data-theme="dark"] {
  --argentina-primary: #75AADB;
  --argentina-primary-rgb: 117, 170, 219;
  --argentina-secondary: #FFFFFF;
  --argentina-accent: #FFD700;
  --argentina-accent-rgb: 255, 215, 0;
  --argentina-neutral-bg: #1a1f2e;
  --argentina-text-primary: #e8ecf1;
  --argentina-text-secondary: #b0b8c4;
  --argentina-gradient-header: linear-gradient(to right, #2a3a52, #1e2d42);
  --argentina-gradient-button: linear-gradient(135deg, #75AADB 0%, #5a8bb8 100%);
}
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar-header,
:root[data-theme="dark"] .navbar-header {
  background: linear-gradient(to right, #2a3a52 0%, #1e2d42 100%) !important;
  border-bottom: 2px solid rgba(117, 170, 219, 0.4) !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .navbar *,
:root[data-theme="dark"] .navbar * {
  color: inherit !important;
}
:root[data-theme="dark"] .navbar-logo,
:root[data-theme="dark"] .navbar-menu,
:root[data-theme="dark"] .navbar-right,
:root[data-theme="dark"] .navbar-logo,
:root[data-theme="dark"] .navbar-menu,
:root[data-theme="dark"] .navbar-right {
  color: #e8ecf1 !important;
}
:root[data-theme="dark"] .navbar-menu li.active,
:root[data-theme="dark"] .navbar-menu li.active {
  border-bottom: 2px solid var(--argentina-accent) !important;
}
:root[data-theme="dark"] .user-dropdown,
:root[data-theme="dark"] .user-dropdown {
  background: #1a1f2e !important;
  border: 1px solid rgba(117, 170, 219, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="dark"] .user-dropdown-item,
:root[data-theme="dark"] .user-dropdown-item,
:root[data-theme="dark"] .user-dropdown-settings-header,
:root[data-theme="dark"] .user-dropdown-settings-header {
  color: var(--argentina-text-primary) !important;
}
:root[data-theme="dark"] .user-dropdown-item:hover,
:root[data-theme="dark"] .user-dropdown-item:hover {
  background: rgba(117, 170, 219, 0.15) !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .theme-chip,
:root[data-theme="dark"] .theme-chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(117, 170, 219, 0.5) !important;
  color: #e8ecf1 !important;
}
:root[data-theme="dark"] .theme-chip.active,
:root[data-theme="dark"] .theme-chip.active {
  background: linear-gradient(135deg, #75AADB 0%, #5a8bb8 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] .theme-chip:hover:not(.active),
:root[data-theme="dark"] .theme-chip:hover:not(.active) {
  background: rgba(117, 170, 219, 0.2) !important;
  border-color: rgba(117, 170, 219, 0.7) !important;
}
/* Menú lateral móvil fullscreen (tema Argentina): paleta celeste/blanco — no afecta navbar superior */
:root[data-theme="argentina"] .archat-mobile-menu-overlay {
  background: rgba(8, 28, 52, 0.55) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-panel {
  background: linear-gradient(180deg, rgba(13, 63, 114, 0.99) 0%, rgba(8, 42, 78, 0.99) 100%) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-item {
  color: #e8f2fc !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-item:hover,
:root[data-theme="argentina"] .archat-mobile-menu-item:active {
  background: rgba(255, 255, 255, 0.12) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-divider {
  background: rgba(255, 255, 255, 0.2) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-user-section {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(117, 170, 219, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 24, 48, 0.35) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-user-section .user-dropdown-item,
:root[data-theme="argentina"] .archat-mobile-menu-user-section .user-dropdown-item span {
  color: #e8f2fc !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-user-section .user-dropdown-header {
  border-bottom-color: rgba(117, 170, 219, 0.35) !important;
}
:root[data-theme="argentina"] .archat-mobile-menu-user-section .user-dropdown-divider {
  background: rgba(117, 170, 219, 0.3) !important;
}
html,
body,
#root {
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  overflow: hidden;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img,
video {
  max-width: 100%;
}
/* Utilidad global para textos/valores latinos en contexto RTL */
.ltr-fixed,
.latin-fixed {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
.numeric-fixed {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
.actions-row-fixed,
.table-stable,
.badge-stable {
  direction: ltr;
}
html[dir='rtl'] {
  overflow-x: hidden;
}
html[dir='rtl'] .ltr-fixed,
html[dir='rtl'] .latin-fixed,
html[dir='rtl'] .numeric-fixed {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
html[dir='rtl'] input:not(.ltr-fixed):not(.latin-fixed):not(.numeric-fixed),
html[dir='rtl'] textarea:not(.ltr-fixed):not(.latin-fixed):not(.numeric-fixed),
html[dir='rtl'] select:not(.ltr-fixed):not(.latin-fixed):not(.numeric-fixed),
html[dir='rtl'] .language-listbox-trigger,
html[dir='rtl'] .language-listbox-dropdown,
html[dir='rtl'] .language-listbox-option {
  direction: rtl;
  text-align: right;
}
/* Selectores nativos de idioma: contraste global en dark mode */
:root[data-theme='dark'] .archat-language-select {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  opacity: 1 !important;
}
:root[data-theme='dark'] .archat-language-select option {
  background: #0f172a !important;
  color: #ffffff !important;
}
/* ArChat Auto-Normalized File
Created: 12-03-2026 22:38:36
Author: SIVOL® - Aldo Frias - Argentina */

        /* Variables de tema definidas solo en theme (theme/index.css, theme/dark.css, styles/argentina-theme.css). No redefinir aquí para evitar sobrescritura. */

        /* Diagnóstico: solo con ?diagnostic=1 o localStorage archat_diagnostic=1. Si ves borde verde = global.css SÍ se cargó. */
        body.archat-diagnostic {
            border: 6px solid #16a34a !important;
            box-sizing: border-box !important;
        }
        body.archat-diagnostic::after {
            content: 'global.css cargado OK';
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #16a34a;
            color: #fff;
            padding: 6px;
            font-size: 12px;
            text-align: center;
            z-index: 999998;
            font-family: system-ui, sans-serif;
        }

        * {
            color: inherit;
        }

        html {
            background: var(--app-bg);
        }

        html,
        body,
        #root {
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--app-bg);
        }

        html, body {
            overflow-x: hidden;
        }

        body {
            overflow-x: hidden;
        }

        #root {
            min-height: 100%;
            height: 100%;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        /* Panel de perfil / menú usuario: siempre por encima del chat */
        .profile-panel {
            position: relative;
            z-index: 10;
        }

        /* ARCHAT LAYOUT RULE
           No usar 100vw, 100vh o position:fixed en el chat.
           El layout debe basarse en flex dentro de .chat-area. */
        /* Layout principal: navbar + main-layout (sidebar + chat-area) */
        .main-layout {
            display: flex;
            height: calc(100vh - var(--navbar-height, 60px));
            overflow: hidden;
            overflow-x: hidden;
            max-width: 100%;
            min-width: 0;
        }

        .chat-area {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .main-content {
            flex: 1;
            min-height: 0;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            overflow-x: hidden;
        }

        .messages-wrapper {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .main-layout .chat-area.main-content {
            padding-top: 0;
        }

        .app-sidebar {
            flex: 0 0 48px;
            background: rgba(0, 0, 0, 0.15);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 8px;
        }

        /* Sidebar lateral deshabilitada globalmente (desktop + móvil)
           para evitar desperdicio de espacio horizontal. */
        .app-sidebar {
            display: none !important;
            flex: 0 0 0 !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            border-right: none !important;
            overflow: hidden !important;
        }

        .app-sidebar-back {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
            line-height: 1;
            border-radius: 8px;
        }

        .app-sidebar-back:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Móvil: ocultar sidebar izquierdo residual para evitar barra fantasma */
        @media (max-width: 768px) {
            .app-sidebar {
                display: none !important;
            }

            .main-layout,
            .chat-area,
            .main-content {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }

        /* ============================================
           ACCESIBILIDAD Y ESCALADO DE FUENTE
           Base: 1rem = 16px (por defecto), pero escala con preferencias del sistema
           ============================================ */
        :root {
            /* Fallback antes de data-theme (Argentina por defecto) */
            --app-bg: #f4f8fd;
            --app-surface: #ffffff;
            --app-card-bg: #f0f4f8;
            --color-primary: #3aa6ff;
            --color-secondary: #2563eb;
            --color-accent: #f4c430;
            --color-text-main: #1a1f2e;
            --color-text-secondary: #4b5563;
            --color-muted: #6b7280;
            --color-border: #d1d5db;
            /* Base font-size: 16px por defecto, pero respeta preferencias del usuario */
            font-size: 16px;
            /* Variables para espaciado consistente en rem */
            --spacing-xs: 0.25rem;   /* 4px */
            --spacing-sm: 0.5rem;    /* 8px */
            --spacing-md: 1rem;      /* 16px */
            --spacing-lg: 1.5rem;    /* 24px */
            --spacing-xl: 2rem;      /* 32px */
            --spacing-2xl: 3rem;     /* 48px */
            /* Altura del navbar para layout (main-layout) */
            --navbar-height: 60px;
            /* Z-index estándar enterprise: modales siempre encima */
            --z-overlay: 9998;
            --z-modal: 9999;
            /* Selector de estado de presencia (dark mode legible) */
            --status-bg-dark: #1f2937;
            --status-text-dark: #ffffff;
            --status-selected-bg: #2563eb;
            --status-selected-text: #ffffff;
        }

        /* Respetar preferencias de tamaño de fuente del usuario (hasta 200%) */
        @media (prefers-reduced-motion: no-preference) {
            html {
                font-size: clamp(14px, 1rem, 20px);
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--color-text-main);
            font-size: clamp(0.875rem, 1rem, 1.25rem);
            line-height: 1.5;
        }

/* Variables de tema (modales) */
:root {
  --modal-attach-bg: white;
}

[data-theme="dark"] {
  --modal-attach-bg: #0f172a;
}

/* Selector de estado de presencia: dark mode legible (sin grises claros hardcodeados) */
.dark .status-option,
:root[data-theme="dark"] .status-option {
  background-color: var(--status-bg-dark, #1f2937);
  color: var(--status-text-dark, #ffffff);
}
.dark .status-option.selected,
:root[data-theme="dark"] .status-option.selected {
  background-color: var(--status-selected-bg, #2563eb);
  color: var(--status-selected-text, #ffffff);
}
.dark .status-option:hover,
:root[data-theme="dark"] .status-option:hover {
  background-color: #374151;
  color: var(--status-text-dark, #ffffff);
}

/* Botones de estado en modal de presencia (dark) */
.dark .status-btn,
:root[data-theme="dark"] .status-btn {
  background-color: var(--status-bg-dark, #1f2937);
  color: var(--status-text-dark, #ffffff);
  border-color: #374151;
}
.dark .status-btn.active,
:root[data-theme="dark"] .status-btn.active {
  background-color: var(--status-selected-bg, #2563eb);
  color: var(--status-selected-text, #ffffff);
}
.dark .status-btn:hover,
:root[data-theme="dark"] .status-btn:hover {
  background-color: #374151;
  color: var(--status-text-dark, #ffffff);
}

        /* Accesibilidad: solo para lectores de pantalla (sin duplicar visual) */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Texto y controles heredan del tema (WCAG dark) */
        * {
            color: inherit;
            font-weight: inherit;
        }

        body * {
            color: var(--color-text-main);
        }

        /* Excepciones: iconos y botones heredan */
        svg, path, polygon, circle, rect, line, polyline,
        .btn-volver-conversaciones, .btn-conversacion-menu,
        .btn-nueva-conversacion, .btn-enviar-mensaje,
        .btn-contacto-menu, .btn-regenerar-captcha,
        button svg, .icon, [class*="icon"], [class*="btn"] svg {
            color: inherit !important;
            font-weight: inherit !important;
        }

        input, textarea {
            color: var(--color-text-main) !important;
            background: var(--color-bg-input) !important;
            border-color: var(--color-border) !important;
        }

        input::placeholder, textarea::placeholder {
            color: var(--color-text-muted) !important;
        }

        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-main);
            color: var(--color-text-main);
            z-index: 1000;
            transition: opacity 0.5s ease-out;
        }
        
        .loading-screen.hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
            display: none !important;
            visibility: hidden !important;
        }
        
        .logo-container {
            width: 100%;
            max-width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo-container img {
            width: 100%;
            max-width: 120px;
            height: auto;
            aspect-ratio: 1;
            animation: logoAnimation 2s ease-in-out infinite;
            display: block;
            object-fit: contain;
        }
        
        /* Responsive para pantalla de carga */
        @media (max-width: 480px) {
            .logo-container {
                max-width: 150px;
            }
            
            .logo-container img {
                max-width: 100px;
            }
        }
        
        @media (min-width: 481px) and (max-width: 768px) {
            .logo-container {
                max-width: 180px;
            }
            
            .logo-container img {
                max-width: 120px;
            }
        }
        
        @media (min-width: 769px) {
            .logo-container {
                max-width: 200px;
            }
            
            .logo-container img {
                max-width: 140px;
            }
        }
        
        @keyframes logoAnimation {
            0%, 100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
            25% {
                opacity: 0.9;
                transform: scale(1.05) rotate(2deg);
            }
            50% {
                opacity: 0.85;
                transform: scale(1.1) rotate(0deg);
            }
            75% {
                opacity: 0.9;
                transform: scale(1.05) rotate(-2deg);
            }
        }
        
        /* Menú principal */
        /* Vista de Conversaciones / Contactos - UNIFICADO */
        .conversaciones-view {
            display: none !important;
            min-height: 100vh;
            padding-top: 0;
            background: transparent; /* Sin fondo propio - usa el del body */
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            min-width: 0;
        }
        
        .conversaciones-view.active {
            display: block !important;
        }
        
        .conversaciones-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 15px;
            margin: 0;
            background: transparent;
            border-bottom: none;
            width: 100%;
            box-sizing: border-box;
        }
        
        .conversaciones-header h1 {
            margin: 0;
            color: #ffffff;
            font-size: clamp(1rem, 2.5vw, 1.25rem); /* Escala fluida */
            font-weight: 700;
            text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
            line-height: 1.2;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        
        .btn-nueva-conversacion {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 2.5rem; /* 40px -> 2.5rem */
            height: 2.5rem; /* 40px -> 2.5rem */
            min-width: 2.5rem;
            min-height: 2.5rem;
            border-radius: 50%;
            cursor: pointer;
            font-size: clamp(1.125rem, 2vw, 1.25rem); /* Escala con el sistema */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        
        .btn-nueva-conversacion:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .conversaciones-list {
            padding: 0.625rem; /* 10px -> 0.625rem */
            max-height: calc(100vh - 13.125rem); /* 210px -> 13.125rem */
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        
        /* Contenedor de búsqueda y lista de usuarios */
        .usuarios-busqueda-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            margin: 20px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }
        
        .usuarios-busqueda-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #6a4c93;
        }
        
        .usuarios-busqueda-header h2 {
            margin: 0;
            color: var(--color-text-main);
            font-size: 1.5rem;
        }
        
        .btn-cerrar-busqueda-usuarios {
            background: #f44336;
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .btn-cerrar-busqueda-usuarios:hover {
            background: #d32f2f;
        }
        
        .usuarios-busqueda-search {
            position: relative;
            margin-bottom: 20px;
        }
        
        .usuarios-busqueda-input {
            width: 100%;
            padding: 12px 45px 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
        
        .usuarios-busqueda-input:focus {
            outline: none;
            border-color: #6a4c93;
        }
        
        .usuarios-busqueda-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }
        
        .usuarios-busqueda-list {
            min-height: 200px;
        }
        
        .usuarios-busqueda-loading,
        .usuarios-busqueda-empty {
            padding: 40px;
            text-align: center;
            color: var(--color-text-main);
        }
        
        .usuarios-busqueda-empty p {
            color: var(--color-text-main);
            font-weight: 500;
        }
        
        /* Tabla de usuarios (mismo estilo que el modal) */
        .usuarios-busqueda-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .usuarios-busqueda-table thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .usuarios-busqueda-table th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .usuarios-busqueda-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .usuarios-busqueda-table tbody tr:hover {
            background: #f5f5f5;
        }
        
        .usuarios-busqueda-table td {
            padding: 15px 20px;
            vertical-align: middle;
        }
        
        .usuarios-busqueda-cell-usuario {
            min-width: 250px;
        }
        
        .usuarios-busqueda-usuario-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .usuarios-busqueda-usuario-info {
            flex: 1;
            min-width: 0;
        }
        
        .usuarios-busqueda-cell-pais,
        .usuarios-busqueda-cell-idioma {
            min-width: 150px;
        }
        
        .usuarios-busqueda-pais-container,
        .usuarios-busqueda-idioma-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .usuarios-busqueda-flag {
            font-size: 20px;
            line-height: 1;
        }
        
        .usuarios-busqueda-pais-nombre,
        .usuarios-busqueda-idioma-nombre {
            font-size: 14px;
            color: var(--color-text-main);
        }
        
        .usuarios-busqueda-cell-accion {
            min-width: 180px;
            text-align: right;
        }
        
        .usuarios-busqueda-accion-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .usuarios-busqueda-btn-contactar {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .usuarios-busqueda-btn-contactar:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(106, 76, 147, 0.4);
        }
        
        @media (max-width: 768px) {
            .usuarios-busqueda-container {
                margin: 10px;
                padding: 15px;
            }
            
            .usuarios-busqueda-table {
                font-size: 12px;
            }
            
            .usuarios-busqueda-table th,
            .usuarios-busqueda-table td {
                padding: 10px 12px;
            }
            
            .usuarios-busqueda-cell-usuario {
                min-width: 180px;
            }
            
            .usuarios-busqueda-cell-pais,
            .usuarios-busqueda-cell-idioma {
                min-width: 100px;
            }
            
            .usuarios-busqueda-cell-accion {
                min-width: 120px;
            }
        }
        
        .conversacion-item {
            display: flex;
            align-items: center;
            padding: 0.9375rem; /* 15px -> 0.9375rem */
            margin-bottom: 0.625rem; /* 10px -> 0.625rem */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 0.9375rem; /* 15px -> 0.9375rem */
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            min-height: 3.125rem; /* Altura mínima flexible */
        }
        
        .conversacion-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(0.3125rem); /* 5px -> 0.3125rem */
        }
        
        .conversacion-item-avatar {
            width: 3.125rem; /* 50px -> 3.125rem */
            height: 3.125rem; /* 50px -> 3.125rem */
            min-width: 3.125rem;
            min-height: 3.125rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.9375rem; /* 15px -> 0.9375rem */
            font-size: clamp(1.125rem, 2vw, 1.25rem); /* Escala con el sistema */
            color: white;
            font-weight: bold;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .conversacion-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .conversacion-item-info {
            flex: 1;
            min-width: 0;
        }
        
        .conversacion-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .conversacion-item-nombre {
            font-weight: 700;
            color: #ffffff;
            font-size: clamp(0.875rem, 2vw, 1rem); /* Escala fluida */
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
            overflow-wrap: break-word;
            word-break: break-word;
        }
        
        .conversacion-item-fecha {
            font-size: clamp(0.75rem, 1.5vw, 0.85rem); /* Escala fluida */
            color: #ffffff;
            white-space: nowrap;
            margin-left: 0.625rem; /* 10px -> 0.625rem */
            opacity: 0.9;
            text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
        }
        
        .conversacion-item-preview {
            font-size: clamp(0.8125rem, 1.75vw, 0.9rem); /* Escala fluida */
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.95;
            text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
            overflow-wrap: break-word;
            word-break: break-word;
        }
        
        .conversacion-item-badge {
            background: #4CAF50;
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.75rem;
            font-weight: bold;
            margin-left: 10px;
            min-width: 20px;
            text-align: center;
        }
        
        .conversaciones-loading,
        .mensajes-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .conversaciones-loading p,
        .mensajes-loading p {
            color: #ffffff !important;
            font-weight: 500 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .conversaciones-empty {
            text-align: center;
            padding: 60px 20px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .conversaciones-empty p {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 1.1rem !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
        }
        
        .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
        
        /* Vista de Conversación Individual: width 100% del contenedor, nunca 100vw ni position fixed */
        .conversacion-view {
            display: none;
            flex-direction: column;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
        }
        
        .conversacion-view.active {
            display: flex;
        }
        
        .conversacion-header {
            display: flex;
            align-items: center;
            padding: 0.9375rem 1.25rem; /* 15px 20px -> 0.9375rem 1.25rem */
            min-height: 3.75rem; /* Altura mínima flexible */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 999; /* Menor que el navbar (z-index: 1000) */
        }
        
        .btn-volver-conversaciones {
            background: transparent;
            border: none;
            color: white;
            font-size: clamp(1.25rem, 3vw, 1.5rem); /* Escala fluida */
            cursor: pointer;
            padding: 0.3125rem 0.625rem; /* 5px 10px -> 0.3125rem 0.625rem */
            margin-right: 0.625rem; /* 10px -> 0.625rem */
            min-width: 2.5rem;
            min-height: 2.5rem;
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        
        .btn-volver-conversaciones:hover {
            transform: translateX(-3px);
        }
        
        .conversacion-header-info {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .conversacion-avatar {
            width: 2.8125rem; /* 45px -> 2.8125rem */
            height: 2.8125rem; /* 45px -> 2.8125rem */
            min-width: 2.8125rem;
            min-height: 2.8125rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem; /* 12px -> 0.75rem */
            font-size: clamp(1rem, 2.25vw, 1.125rem); /* Escala fluida */
            color: white;
            font-weight: bold;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .conversacion-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .conversacion-info h2 {
            margin: 0;
            color: var(--color-text-main);
            font-size: clamp(1rem, 2.5vw, 1.1rem);
            font-weight: bold !important;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        
        .conversacion-estado {
            font-size: clamp(0.75rem, 1.5vw, 0.85rem);
            color: var(--color-text-secondary);
            font-weight: bold !important;
        }
        
        .btn-conversacion-menu {
            background: transparent;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 5px 10px;
        }
        
        .conversacion-mensajes {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem; /* 20px -> 1.25rem */
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch; /* Permitir que los mensajes ocupen todo el ancho */
            min-height: 0; /* Permite que flex funcione correctamente */
        }
        
        .mensajes-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch; /* Permitir que los mensajes se distribuyan */
        }
        
        .mensaje-item {
            position: relative;
            display: flex;
            margin-bottom: 0;
            animation: fadeInMessage 0.3s ease-in;
            width: 100%;
            align-items: flex-start;
            flex-shrink: 0;
        }
        
        @keyframes fadeInMessage {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* En móvil: todos los mensajes a la izquierda */
        .mensaje-item.propio {
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 0;
            margin-right: auto;
        }
        
        .mensaje-item.ajeno {
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 0;
            margin-right: auto;
        }
        
        .mensaje-burbuja {
            max-width: 85%;
            min-width: 12.5rem; /* 200px -> 12.5rem */
            padding: 0.75rem 1rem; /* 12px 16px -> 0.75rem 1rem */
            border-radius: 1.125rem; /* 18px -> 1.125rem */
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            white-space: normal;
            position: relative;
        }
        
        .mensaje-item.propio .mensaje-burbuja {
            background: var(--color-bg-card);
            background-color: var(--color-bg-card);
            color: var(--color-text-main);
            border-bottom-left-radius: 4px;
            margin-left: 0;
            margin-right: auto;
        }

        /* Dark: mensajes propios con contraste legible */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after {
            background: var(--color-primary) !important;
            background-color: var(--color-primary) !important;
            color: var(--color-text-inverse) !important;
        }
        
        .mensaje-item.ajeno .mensaje-burbuja {
            background: var(--color-bg-muted);
            color: var(--color-text-main);
            border-bottom-left-radius: 4px;
            margin-left: 0;
            margin-right: auto;
        }
        
        /* En pantallas grandes (desktop): distribuir mensajes */
        /* Los estilos de desktop se manejan en responsive.css para evitar conflictos */
        
        .mensaje-texto {
            margin: 0;
            line-height: 1.5;
            color: var(--color-text-main) !important;
            font-weight: bold !important;
            font-size: clamp(0.875rem, 2vw, 1rem);
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            white-space: normal;
            width: 100%;
        }
        
        .mensaje-metadata {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
            font-size: 0.75rem;
            opacity: 0.7;
        }
        
        .mensaje-traduccion-badge {
            display: inline-block;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.4), rgba(56, 142, 60, 0.4));
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-left: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(76, 175, 80, 0.5);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .mensaje-traduccion-badge:hover {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.6), rgba(56, 142, 60, 0.6));
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }
        
        .mensaje-traduccion-badge.error {
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.4), rgba(198, 40, 40, 0.4));
            border-color: rgba(244, 67, 54, 0.5);
        }
        
        .mensaje-traduccion-badge.error:hover {
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.6), rgba(198, 40, 40, 0.6));
        }
        
        .mensaje-estado {
            display: inline-block;
            font-size: 0.7rem;
            margin-left: 5px;
            font-weight: bold;
        }
        
        .conversacion-input-container {
            padding: 0.9375rem 1.25rem; /* 15px 20px -> 0.9375rem 1.25rem */
            min-height: 3.75rem; /* Altura mínima flexible */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 10;
        }
        
        /* Desktop: conversación dentro del chat-area, sin fixed ni 100vw */
        @media (min-width: 769px) {
            .conversacion-view {
                position: relative;
                width: 100%;
                height: 100%;
                min-height: 0;
                margin-top: 0;
                box-sizing: border-box;
            }
            
            .conversacion-header {
                width: 100%;
                position: relative;
                z-index: 1;
            }
            
            .conversacion-input-container {
                position: relative;
                width: 100%;
                flex-shrink: 0;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            }
            
            .conversacion-mensajes {
                padding-bottom: 16px;
            }
        }
        
        /* Corrección para móvil: chat dentro del contenedor, sin position fixed ni 100vw */
        @media (max-width: 768px) {
            .conversacion-view {
                height: 100%;
                position: relative;
                width: 100%;
            }
            
            .conversacion-view.active {
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            
            .conversacion-header {
                flex-shrink: 0;
            }
            
            .conversacion-mensajes {
                flex: 1;
                overflow-y: auto !important;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 20px;
                min-height: 0;
                max-height: 100%;
            }
            
            .conversacion-input-container {
                flex-shrink: 0;
                display: block !important; /* Forzar que sea visible */
                visibility: visible !important;
                opacity: 1 !important;
                position: relative;
                z-index: 1000;
                padding: 12px 15px;
                padding-bottom: max(15px, env(safe-area-inset-bottom, 15px));
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                box-sizing: border-box;
                width: 100%;
            }
            
            .conversacion-input-wrapper {
                display: flex !important;
                visibility: visible !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 6px 10px !important;
                box-sizing: border-box !important;
                width: 100% !important;
            }

            .conversacion-input-wrapper .btn-adjuntar-archivo,
            .conversacion-input-wrapper .btn-enviar-mensaje {
                flex-shrink: 0 !important;
                margin: 0 !important;
            }

            .conversacion-input-wrapper #mensajeInput {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                margin: 0 !important;
            }
            
            #mensajeInput {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            #mensajeInput:focus {
                position: relative;
            }
        }
        
        .conversacion-input-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 0.625rem; /* 10px -> 0.625rem */
            background: rgba(255, 255, 255, 0.2);
            border-radius: 1.5625rem; /* 25px -> 1.5625rem */
            padding: 0.5rem 0.9375rem; /* 8px 15px -> 0.5rem 0.9375rem */
            min-height: 2.5rem; /* Altura mínima flexible */
        }
        
        #mensajeInput {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: clamp(0.875rem, 2vw, 1rem); /* Escala fluida */
            resize: none;
            max-height: 7.5rem; /* 120px -> 7.5rem */
            min-height: 1.5rem; /* Altura mínima */
            overflow-y: auto;
            outline: none;
            overflow-wrap: break-word;
            word-break: break-word;
            line-height: 1.5;
        }
        
        #mensajeInput::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .btn-adjuntar-archivo {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            width: 2.25rem; /* 36px -> 2.25rem */
            height: 2.25rem; /* 36px -> 2.25rem */
            min-width: 2.25rem;
            min-height: 2.25rem;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: clamp(1.125rem, 2.5vw, 1.2rem); /* Escala fluida */
        }
        
        .btn-adjuntar-archivo:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.1);
        }
        
        .btn-adjuntar-archivo:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Dark mode: botón adjuntar en gris */
        :root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-adjuntar-archivo {
            background: rgba(176, 176, 176, 0.15) !important;
            border: 1px solid rgba(176, 176, 176, 0.3) !important;
            color: #B0B0B0 !important;
        }

        :root[data-theme="dark"] .btn-adjuntar-archivo:hover:not(:disabled),
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover:not(:disabled) {
            background: rgba(224, 224, 224, 0.25) !important;
            border-color: rgba(224, 224, 224, 0.4) !important;
            color: #E0E0E0 !important;
        }
        
        .btn-enviar-mensaje {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            width: 2.25rem; /* 36px -> 2.25rem */
            height: 2.25rem; /* 36px -> 2.25rem */
            min-width: 2.25rem;
            min-height: 2.25rem;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: clamp(1rem, 2vw, 1.125rem); /* Escala fluida */
        }
        
        .btn-enviar-mensaje:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.1);
        }
        
        .btn-enviar-mensaje:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Dark mode: botón enviar en gris */
        :root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-enviar-mensaje {
            background: rgba(176, 176, 176, 0.15) !important;
            border: 1px solid rgba(176, 176, 176, 0.3) !important;
            color: #B0B0B0 !important;
        }

        :root[data-theme="dark"] .btn-enviar-mensaje:hover:not(:disabled),
        :root[data-theme="dark"] .btn-enviar-mensaje:hover:not(:disabled) {
            background: rgba(224, 224, 224, 0.25) !important;
            border-color: rgba(224, 224, 224, 0.4) !important;
            color: #E0E0E0 !important;
        }
        
        /* Barra de progreso de subida */
        .upload-progress-container {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .upload-progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .upload-file-name {
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.9rem;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .btn-cancelar-upload {
            background: rgba(255, 0, 0, 0.3);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: all 0.3s ease;
        }
        
        .btn-cancelar-upload:hover {
            background: rgba(255, 0, 0, 0.5);
            transform: scale(1.1);
        }
        
        .upload-progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .upload-progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .upload-progress-text {
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.8rem;
            text-align: right;
            display: block;
        }
        
        /* Modal de adjuntos */
        .modal-adjuntos-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(5px);
        }
        
        .modal-adjuntos {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .modal-adjuntos h3 {
            color: var(--color-text-main);
            font-weight: bold;
            margin: 0 0 20px 0;
            text-align: center;
            font-size: 1.3rem;
        }
        
        .modal-adjuntos-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .modal-adjuntos-option {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .modal-adjuntos-option:hover {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }
        
        .modal-adjuntos-option-icon {
            font-size: 2rem;
            width: 50px;
            text-align: center;
        }
        
        .modal-adjuntos-option-text {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
        }
        
        .modal-adjuntos-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.1);
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--color-text-main);
            font-weight: bold;
        }
        
        .modal-adjuntos-close:hover {
            background: rgba(0, 0, 0, 0.2);
        }

        /* Overrides modo oscuro para modal de adjuntos (alta prioridad) */
        :root[data-theme="dark"] .modal-adjuntos-overlay {
            background: rgba(0, 0, 0, 0.88) !important;
        }

        :root[data-theme="dark"] .modal-adjuntos {
            background: var(--app-surface) !important;
            border: 1px solid #1f2933 !important;
            color: #e5e7eb !important;
            box-shadow: 0 18px 52px rgba(0, 0, 0, 0.65) !important;
        }

        :root[data-theme="dark"] .modal-adjuntos h3 {
            color: #e5e7eb !important;
        }

        :root[data-theme="dark"] .modal-adjuntos-option {
            background: var(--app-surface) !important;
            border: 1px solid #2d2f38 !important;
            color: #e5e7eb !important;
        }

        :root[data-theme="dark"] .modal-adjuntos-option:hover {
            background: #272a33 !important;
            border-color: #8a6fc2 !important;
        }

        :root[data-theme="dark"] .modal-adjuntos-option-text,
        :root[data-theme="dark"] .modal-adjuntos-option-icon {
            color: #e5e7eb !important;
        }

        :root[data-theme="dark"] .modal-adjuntos-close {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #e5e7eb !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        :root[data-theme="dark"] .modal-adjuntos-close:hover {
            background: rgba(255, 255, 255, 0.18) !important;
        }
        
        /* Input de archivo oculto */
        #fileInputHidden {
            display: none;
        }
        
        /* Modal de grabación de audio */
        .modal-grabacion-audio-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        
        .modal-grabacion-audio {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .modal-grabacion-audio h3 {
            color: var(--color-text-main);
            font-weight: bold;
            margin: 0 0 20px 0;
            text-align: center;
            font-size: 1.3rem;
        }
        
        .modal-grabacion-audio-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.1);
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .modal-grabacion-audio-close:hover {
            background: rgba(0, 0, 0, 0.2);
        }
        
        .audio-grabacion-estado {
            text-align: center;
            padding: 20px;
            margin: 20px 0;
        }
        
        .audio-grabacion-icono {
            font-size: 4rem;
            margin-bottom: 15px;
            animation: pulse 2s infinite;
        }
        
        .audio-grabacion-icono.grabando {
            animation: pulse 0.5s infinite;
            color: #ff0000;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        .audio-grabacion-tiempo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--color-text-main);
            margin: 10px 0;
        }
        
        .audio-grabacion-mensaje {
            font-size: 1rem;
            color: #666;
            margin-top: 10px;
        }
        
        .audio-grabacion-preview {
            margin: 20px 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        
        .audio-grabacion-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        
        .btn-audio {
            padding: 15px 20px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-audio-grabar {
            background: #4CAF50;
            color: white;
        }
        
        .btn-audio-grabar:hover {
            background: #45a049;
        }
        
        .btn-audio-detener {
            background: #f44336;
            color: white;
        }
        
        .btn-audio-detener:hover {
            background: #da190b;
        }
        
        .btn-audio-confirmar {
            background: #6a4c93;
            color: white;
        }
        
        .btn-audio-confirmar:hover {
            background: #5a3d83;
        }
        
        .btn-audio-regrabar {
            background: #ff9800;
            color: white;
        }
        
        .btn-audio-regrabar:hover {
            background: #e68900;
        }
        
        /* Vista previa de archivo antes de enviar */
        .mensaje-archivo-preview {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .mensaje-archivo-preview img,
        .mensaje-archivo-preview video {
            max-width: 100px;
            max-height: 100px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .mensaje-archivo-preview-info {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        .mensaje-archivo-preview-remove {
            background: rgba(255, 0, 0, 0.3);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }
        
        /* Archivos adjuntos en mensajes */
        .mensaje-archivo {
            margin-top: 8px;
            border-radius: 10px;
            overflow: hidden;
            max-width: 100%;
        }
        
        .mensaje-archivo img,
        .mensaje-archivo video {
            max-width: 100%;
            max-height: 400px;
            display: block;
            border-radius: 10px;
            cursor: pointer;
        }
        
        .mensaje-archivo audio {
            width: 100%;
            margin-top: 5px;
        }
        
        .mensaje-archivo-documento {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            cursor: pointer;
        }
        
        .mensaje-archivo-documento-icon {
            font-size: 2rem;
        }
        
        .mensaje-archivo-documento-info {
            flex: 1;
            color: var(--color-text-main);
            font-weight: bold;
        }
        
        .mensaje-archivo-documento-nombre {
            font-size: 0.9rem;
        }
        
        .mensaje-archivo-documento-tamaño {
            font-size: 0.8rem;
            opacity: 0.7;
        }
        
        /* Modal de visualización de imagen/video */
        .modal-archivo-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }
        
        .modal-archivo-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }
        
        .modal-archivo-content img,
        .modal-archivo-content video {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 10px;
        }
        
        .modal-archivo-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }
        
        .modal-archivo-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* Cámara */
        .camera-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10002;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .camera-video {
            max-width: 100%;
            max-height: 70vh;
            border-radius: 10px;
        }
        
        .camera-controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .camera-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .camera-btn-capture {
            background: #4CAF50;
            color: white;
        }
        
        .camera-btn-cancel {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        .camera-btn-switch {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .camera-btn:hover {
            transform: scale(1.05);
        }
        
        /* Vista de Contactos - Estilo Telegram/WhatsApp */
        .contactos-view {
            display: none;
            min-height: 100vh;
            padding-top: 0;
            background: transparent; /* Sin fondo propio */
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
        
        .contactos-view.active {
            display: block;
        }
        
        .contactos-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 15px;
            margin: 0;
            background: transparent;
            border-bottom: none;
            min-height: auto;
            width: 100%;
            box-sizing: border-box;
        }
        
        .contactos-header h1 {
            margin: 0;
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            line-height: 1.2;
        }
        
        .btn-buscar-contacto {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .btn-buscar-contacto:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .contactos-search-container {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .contactos-search-input {
            flex: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--color-text-main);
            font-size: 0.95rem;
            outline: none;
        }
        
        .contactos-search-input::placeholder {
            color: #999;
        }
        
        .btn-cerrar-busqueda {
            background: transparent;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .btn-cerrar-busqueda:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .contactos-list {
            padding: 5px;
            max-height: calc(100vh - 210px); /* Ajustado para navbar + header */
            overflow-y: auto;
        }
        
        .contacto-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            margin-bottom: 2px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .contacto-item:hover {
            background: rgba(255, 255, 255, 0.2);
            border-left-color: rgba(255, 255, 255, 0.5);
        }
        
        .contacto-item.favorito {
            border-left-color: #FFD700;
        }
        
        .contacto-item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
            color: white;
            font-weight: 600;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }
        
        .contacto-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .contacto-item-avatar .favorito-badge {
            position: absolute;
            bottom: -2px;
            right: -2px;
            background: #FFD700;
            color: var(--color-text-main);
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .contacto-item-info {
            flex: 1;
            min-width: 0;
        }
        
        .contacto-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .contacto-item-nombre {
            font-weight: 600;
            color: white;
            font-size: 0.95rem;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .contacto-item-preview {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .contacto-item-accion {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-left: 8px;
        }
        
        .contacto-item-accion:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .contactos-loading,
        .contactos-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: white;
        }
        
        .contactos-empty .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
        
        /* Estilos para nueva tabla de contactos */
        .contactos-tabla-search-container {
            padding: 10px 15px;
            background: transparent;
            border-bottom: none;
        }
        
        .contactos-search-status-container {
            display: flex !important;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            padding: 4px 0;
            min-height: 40px;
            width: 100%;
            cursor: pointer;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .contactos-search-status-container .user-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        
        .contactos-search-status-container .user-status-badge:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }
        
        /* Asegurar visibilidad en desktop */
        @media (min-width: 769px) {
            .contactos-search-status-container {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 40px !important;
            }
        }
        
        .contactos-tabla-search-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .contactos-tabla-search-input {
            flex: 1;
            padding: 8px 35px 8px 14px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--color-text-main);
            font-size: 0.9rem;
            outline: none;
            transition: all 0.3s ease;
        }
        
        .contactos-tabla-search-input:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: white;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
        }
        
        .contactos-tabla-search-input::placeholder {
            color: #999;
        }
        
        .contactos-tabla-search-clear {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        
        .contactos-tabla-search-clear:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .contactos-tabla-wrapper {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            padding: 20px;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }
        
        .contactos-tabla-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: #ffffff;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .contactos-tabla-loading p {
            color: #ffffff !important;
            font-weight: 500 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        }
        
        .contactos-tabla {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .contactos-tabla thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .contactos-tabla-th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            user-select: none;
        }
        
        .contactos-tabla-th.ordenable {
            cursor: pointer;
            transition: background 0.2s ease;
            position: relative;
        }
        
        .contactos-tabla-th.ordenable:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .contactos-tabla-th.orden-activo {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .orden-indicador {
            margin-left: 8px;
            font-size: 0.8rem;
            opacity: 0.8;
        }
        
        .contactos-tabla tbody tr {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .contactos-tabla tbody tr:hover {
            background: rgba(106, 76, 147, 0.1);
            /* Removido transform para evitar efectos visuales no deseados */
        }
        
        .contactos-tabla tbody tr:active {
            background: rgba(106, 76, 147, 0.2);
            /* Removido transform para evitar efectos visuales no deseados */
        }
        
        /* Prevenir hover en la fila cuando el mouse está sobre el avatar */
        .contactos-tabla tbody tr:hover .contactos-tabla-avatar-container {
            /* El avatar tiene su propio hover, no afectar la fila */
        }
        
        .contactos-tabla tbody td {
            padding: 15px 20px;
            vertical-align: middle;
            color: var(--color-text-main);
            font-weight: bold;
            font-size: 1.1rem;
        }
        
        .contactos-tabla-avatar {
            width: 60px;
        }
        
        .contactos-tabla-avatar-container {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contactos-tabla-avatar-container:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(106, 76, 147, 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        /* Asegurar que la imagen del avatar NO se muestre fuera de su contenedor */
        .contactos-tabla-avatar-container {
            overflow: hidden;
            position: relative;
        }
        
        /* Prevenir cualquier efecto de zoom o expansión en hover de la fila */
        .contactos-tabla tbody tr:hover .contactos-tabla-avatar-img {
            transform: none;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }
        
        /* Estilos para el modal de imagen */
        .contactos-modal-imagen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            animation: fadeIn 0.2s ease;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .contactos-modal-imagen img {
            max-width: 90vw;
            max-height: 90vh;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            object-fit: contain;
            cursor: default;
        }

        .contactos-tabla-archat {
            width: 80px;
            text-align: center;
            vertical-align: middle;
        }
        
        .archat-icon {
            display: inline-block;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }
        
        .archat-icon:hover {
            transform: scale(1.2);
        }
        
        /* Ícono fijo para mensajes leídos o sin mensajes */
        .archat-icon-fixed {
            opacity: 0.3;
        }
        
        .contactos-tabla-estado {
            width: 150px;
            text-align: center;
        }
        
        .contactos-tabla-estado .user-status-badge {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .contactos-tabla-estado .user-status-badge:hover {
            transform: scale(1.15);
            filter: brightness(1.2);
        }
        
        .contactos-tabla-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            pointer-events: none; /* Prevenir que la imagen capture eventos */
        }
        
        .contactos-tabla-avatar-inicial {
            color: white;
            font-weight: 600;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .contactos-tabla-empty {
            text-align: center;
            padding: 40px 20px;
            color: #ffffff;
            font-size: 1rem;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        /* Vista de Ayuda - Solo variables (Dark y Argentina) */
        .ayuda-view {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 140px);
        }
        
        .ayuda-container {
            background: var(--color-bg-card);
            border-radius: 15px;
            padding: 30px;
            box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.1));
            border: 1px solid var(--color-border);
        }
        
        .ayuda-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--color-border);
        }
        
        .ayuda-header h1 {
            color: var(--color-primary);
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
        }
        
        .ayuda-content {
            color: var(--color-text-main);
        }
        
        .ayuda-section {
            margin-bottom: 40px;
        }
        
        .ayuda-section h2 {
            color: var(--color-primary);
            font-size: 1.8rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .ayuda-section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--color-text-main);
            margin-bottom: 15px;
        }
        
        .ayuda-steps {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-top: 20px;
        }
        
        .ayuda-step {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            background: var(--color-bg-muted);
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid var(--color-primary);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .ayuda-step:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
        }
        
        .ayuda-step-number {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--color-bg-input);
            color: var(--color-text-main);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            border: 1px solid var(--color-border);
        }
        
        .ayuda-step-content {
            flex: 1;
        }
        
        .ayuda-step-content h3 {
            color: var(--color-primary);
            font-size: 1.3rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .ayuda-step-content p {
            color: var(--color-text-main);
            font-size: 1rem;
            line-height: 1.6;
            margin: 0;
        }
        
        .ayuda-features,
        .ayuda-tips {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        
        .ayuda-features li,
        .ayuda-tips li {
            padding: 15px 20px;
            margin-bottom: 10px;
            background: var(--color-bg-muted);
            border-radius: 8px;
            border-left: 3px solid var(--color-primary);
            font-size: 1rem;
            line-height: 1.6;
            color: var(--color-text-main);
            transition: background 0.2s ease;
        }
        
        .ayuda-features li:hover,
        .ayuda-tips li:hover {
            background: var(--color-bg-input);
        }
        
        .ayuda-about {
            background: var(--color-bg-muted);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            border: 1px solid var(--color-border);
        }
        
        .ayuda-about p {
            margin: 10px 0;
            color: var(--color-text-main);
        }
        
        .ayuda-about-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary);
            margin: 15px 0 !important;
        }
        
        .ayuda-about-location {
            font-size: 1.1rem;
            color: var(--color-text-muted);
            font-style: italic;
        }
        
        .ayuda-about-linkedin {
            margin-top: 20px !important;
        }
        
        .ayuda-linkedin-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            padding: 12px 24px;
            background: var(--color-bg-muted);
            border-radius: 8px;
            border: 2px solid var(--color-border);
            transition: all 0.3s ease;
        }
        
        .ayuda-linkedin-link:hover {
            background: var(--color-bg-input);
            border-color: var(--color-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
        }
        
        .ayuda-linkedin-link i {
            font-size: 1.3rem;
        }
        
        .ayuda-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 2px solid var(--color-border);
            text-align: center;
        }
        
        .ayuda-footer p {
            color: var(--color-text-main);
            font-size: 0.9rem;
            margin: 0;
        }
        
        .ayuda-footer strong {
            color: var(--color-primary);
        }
        
        .ayuda-footer span {
            color: var(--color-text-muted);
            font-size: 0.85rem;
        }
        
        /* Responsive para ayuda */
        @media (max-width: 768px) {
            .ayuda-view {
                padding: 15px;
            }
            
            .ayuda-container {
                padding: 20px;
            }
            
            .ayuda-header h1 {
                font-size: 2rem;
            }
            
            .ayuda-section h2 {
                font-size: 1.5rem;
            }
            
            .ayuda-step {
                flex-direction: column;
                gap: 15px;
            }
            
            .ayuda-step-number {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
            
            .ayuda-about {
                padding: 20px;
            }
            
            .ayuda-about-name {
                font-size: 1.3rem;
            }
            
            .ayuda-linkedin-link {
                font-size: 1rem;
                padding: 10px 20px;
            }
        }
        
        /* Animación de pulso para estado online */
        @keyframes pulse-online {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }
        
        @keyframes glow {
            0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
            50% { filter: drop-shadow(0 0 6px currentColor); }
        }

        /* Badge de Estado de Usuario - Diseño Moderno */
        .user-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 250, 0.98) 100%);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.5);
            position: relative;
            overflow: hidden;
        }
        
        .user-status-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }
        
        .user-status-badge:hover::before {
            left: 100%;
        }

        .user-status-badge-small {
            font-size: 0.75rem;
            padding: 3px 8px;
            gap: 5px;
            border-radius: 14px;
        }

        .user-status-badge-large {
            font-size: 1.05rem;
            padding: 8px 18px;
            gap: 10px;
            border-radius: 24px;
        }

        .user-status-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            line-height: 1;
            filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
            transition: all 0.3s ease;
        }

        .user-status-badge-small .user-status-indicator {
            font-size: 1.1em;
        }

        .user-status-badge-large .user-status-indicator {
            font-size: 1.5em;
        }

        .user-status-text {
            color: #1a202c;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
            letter-spacing: 0.3px;
        }

        .user-status-badge-small .user-status-text {
            max-width: 90px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .user-status-badge-large .user-status-text {
            max-width: 180px;
            font-size: 1rem;
        }

        /* Estados específicos - Diseños Vibrantes */
        .user-status-online {
            border: 2px solid rgba(0, 210, 106, 0.6);
            background: linear-gradient(135deg, 
                rgba(0, 255, 127, 0.25) 0%, 
                rgba(144, 238, 144, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(0, 210, 106, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .user-status-online .user-status-indicator {
            animation: pulse-online 2s ease-in-out infinite;
            color: #00d26a;
            filter: drop-shadow(0 0 4px rgba(0, 210, 106, 0.6));
        }

        .user-status-idle {
            border: 2px solid rgba(250, 166, 26, 0.6);
            background: linear-gradient(135deg, 
                rgba(255, 193, 7, 0.25) 0%, 
                rgba(255, 223, 0, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(250, 166, 26, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .user-status-idle .user-status-indicator {
            color: #faa61a;
            filter: drop-shadow(0 0 4px rgba(250, 166, 26, 0.6));
        }

        .user-status-dnd {
            border: 2px solid rgba(240, 71, 71, 0.6);
            background: linear-gradient(135deg, 
                rgba(240, 71, 71, 0.25) 0%, 
                rgba(255, 99, 71, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(240, 71, 71, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .user-status-dnd .user-status-indicator {
            color: #f04747;
            filter: drop-shadow(0 0 4px rgba(240, 71, 71, 0.6));
        }

        .user-status-busy {
            border: 2px solid rgba(255, 69, 0, 0.6);
            background: linear-gradient(135deg, 
                rgba(255, 69, 0, 0.25) 0%, 
                rgba(255, 140, 0, 0.15) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(255, 69, 0, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .user-status-busy .user-status-indicator {
            color: #ff4500;
            animation: glow 2s ease-in-out infinite;
        }

        .user-status-offline {
            border: 2px solid rgba(153, 153, 153, 0.4);
            background: linear-gradient(135deg, 
                rgba(153, 153, 153, 0.15) 0%, 
                rgba(192, 192, 192, 0.1) 50%,
                rgba(245, 245, 245, 0.98) 100%);
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            opacity: 0.85;
        }
        
        .user-status-offline .user-status-indicator {
            color: #999;
        }
        
        .user-status-offline .user-status-text {
            color: #718096;
        }

        .user-status-custom {
            border: 2px solid rgba(106, 76, 147, 0.6);
            background: linear-gradient(135deg, 
                rgba(106, 76, 147, 0.3) 0%, 
                rgba(139, 92, 246, 0.2) 50%,
                rgba(255, 255, 255, 0.98) 100%);
            box-shadow: 
                0 2px 12px rgba(106, 76, 147, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .user-status-custom .user-status-indicator {
            color: #9d7fcc;
            filter: drop-shadow(0 0 4px rgba(106, 76, 147, 0.6));
        }

        /* Efectos hover mejorados */
        .user-status-badge:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 6px 20px rgba(0, 0, 0, 0.12),
                0 3px 8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }
        
        .user-status-badge:active {
            transform: translateY(-1px) scale(0.98);
        }

        /* Modal para ver imagen de contacto */
        .contacto-imagen-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            z-index: 3001;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .contacto-imagen-modal-overlay.active {
            display: flex;
        }
        
        .contacto-imagen-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .contacto-imagen-modal-content img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }
        
        .contacto-imagen-modal-close {
            position: absolute;
            top: -50px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .contacto-imagen-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .contacto-imagen-modal-nombre {
            margin-top: 15px;
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .contacto-imagen-modal-close {
                top: 10px;
                right: 10px;
                width: 35px;
                height: 35px;
                font-size: 24px;
            }

            .contacto-imagen-modal-nombre {
                font-size: 1rem;
                margin-top: 10px;
            }
        }

        /* Modal de Estado Personalizado */
        .custom-status-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 3002;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .custom-status-modal-overlay.active {
            display: flex;
        }

        .custom-status-modal {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            animation: modalSlideIn 0.3s ease-out;
        }

        .custom-status-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }

        .custom-status-modal-header h2 {
            margin: 0;
            color: white;
            font-size: 24px;
            font-weight: 600;
        }

        .custom-status-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .custom-status-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .custom-status-modal-body {
            padding: 30px;
            flex: 1;
            overflow-y: auto;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 30px;
        }

        .custom-status-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .custom-status-input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .custom-status-input-container input {
            flex: 1;
        }

        .emoji-picker-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .emoji-picker-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        .custom-status-preview {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .custom-status-preview h3 {
            margin: 0 0 15px 0;
            color: white;
            font-size: 16px;
            font-weight: 600;
        }

        .preview-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .preview-indicator {
            font-size: 16px;
        }

        .preview-text {
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

        .custom-status-suggestions {
            margin-top: 10px;
        }

        .custom-status-suggestions h3 {
            margin: 0 0 15px 0;
            color: white;
            font-size: 16px;
            font-weight: 600;
        }

        .suggestions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }

        .suggestion-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 10px 12px;
            color: white;
            cursor: pointer;
            font-size: 14px;
            text-align: left;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .suggestion-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .custom-status-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            padding: 20px 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }

        /* Checkbox personalizado */
        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: white;
            font-weight: 500;
            gap: 10px;
        }

        .checkbox-label input[type="checkbox"] {
            display: none;
        }

        .checkmark {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            position: relative;
            transition: all 0.3s ease;
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark {
            background: #4CAF50;
            border-color: #4CAF50;
        }

        .checkmark::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
            opacity: 1;
        }

        /* Selector de Emojis */
        .emoji-picker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            z-index: 3003;
            max-width: 300px;
            width: 90%;
            max-height: 400px;
        }

        .emoji-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #f8f9fa;
            border-radius: 15px 15px 0 0;
        }

        .emoji-picker-header span {
            font-weight: 600;
            color: var(--color-text-main);
        }

        .emoji-picker-header button {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
        }

        .emoji-picker-grid {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
            gap: 10px;
            max-height: 300px;
            overflow-y: auto;
        }

        .emoji-picker-grid span {
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .emoji-picker-grid span:hover {
            background: #f0f0f0;
        }

        @media (max-width: 768px) {
            .custom-status-modal {
                max-width: 95%;
                max-height: 95vh;
            }

            .custom-status-modal-body {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .custom-status-modal-header,
            .custom-status-modal-body,
            .custom-status-modal-footer {
                padding: 20px;
            }

            .suggestions-grid {
                grid-template-columns: 1fr;
            }

            .suggestion-btn {
                text-align: center;
            }
        }
        
        @media (max-width: 768px) {
            .contactos-tabla-wrapper {
                padding: 10px;
                overflow-x: visible;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                min-height: 300px !important;
            }
            
            .contactos-tabla-container {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 200px !important;
                width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            .contactos-tabla {
                width: 100%;
                min-width: auto;
                font-size: 0.85rem;
                display: none !important; /* Ocultar tabla en móvil */
                overflow-x: visible;
                visibility: hidden !important;
            }
            
            /* Asegurar que la lista móvil sea visible */
            .contactos-lista-movil {
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            /* Mostrar lista móvil en lugar de tabla */
            .contactos-lista-movil {
                display: flex !important;
            }
            
            .contactos-tabla thead,
            .contactos-tabla tbody,
            .contactos-tabla tr {
                display: block;
            }
            
            .contactos-tabla thead {
                display: none;
            }
            
            .contactos-tabla tbody tr {
                display: flex;
                flex-direction: column;
                margin-bottom: 15px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 10px;
                padding: 15px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            
            .contactos-tabla tbody td {
                display: flex;
                align-items: center;
                padding: 8px 0;
                border: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }
            
            .contactos-tabla tbody td:last-child {
                border-bottom: none;
            }
            
            .contactos-tabla tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                min-width: 100px;
                margin-right: 10px;
                color: #9d7fcc;
            }
            
            .contactos-tabla-avatar {
                width: 100%;
                justify-content: center;
            }
            
            .contactos-tabla-avatar-container {
                width: 60px;
                height: 60px;
                margin: 0 auto;
            }
            
            .contactos-tabla-avatar-inicial {
                font-size: 24px;
            }
            
            .contactos-tabla-th,
            .contactos-tabla tbody td {
                padding: 8px 0;
            }
            
            .contactos-tabla-search-wrapper {
                max-width: 100%;
            }

            .contactos-tabla-estado {
                width: auto;
                padding: 5px;
            }

            .contactos-tabla tbody td[data-label="Estado:"] {
                justify-content: center;
                padding: 5px 0;
            }

            .user-status-badge-small {
                font-size: 0.75rem;
                padding: 1px 4px;
                gap: 2px;
            }
            
            /* Lista tipo WhatsApp para móviles */
            .contactos-lista-movil {
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                background: rgba(255, 255, 255, 0.05) !important;
                border-radius: 0 !important;
                width: 100% !important;
                min-height: 200px !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .contactos-lista-item {
                display: flex !important;
                align-items: center;
                padding: 12px 16px;
                background: rgba(255, 255, 255, 0.95) !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                transition: background-color 0.2s ease;
                gap: 12px;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 60px;
            }
            
            .contactos-lista-item:active {
                background: rgba(0, 0, 0, 0.05);
            }
            
            .contactos-lista-item:last-child {
                border-bottom: none;
            }
            
            .contactos-lista-avatar {
                flex-shrink: 0;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;
                background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
            }
            
            .contactos-lista-avatar-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .contactos-lista-avatar-inicial {
                font-size: 20px;
                font-weight: 600;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            
            .contactos-lista-contenido {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            
            .contactos-lista-nombre-linea {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }
            
            .contactos-lista-nombre {
                font-size: 16px;
                font-weight: 600;
                color: var(--color-text-main);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
            }
            
            .contactos-lista-estado {
                flex-shrink: 0;
            }
            
            .contactos-lista-info {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                color: #666;
            }
            
            .contactos-lista-status-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .contactos-lista-derecha {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
                min-width: 50px;
            }
            
            .contactos-lista-badge-mensajes {
                background: #25D366;
                color: white;
                border-radius: 12px;
                padding: 2px 8px;
                font-size: 12px;
                font-weight: 600;
                min-width: 20px;
                text-align: center;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .contactos-lista-archat-icon {
                font-size: 18px;
                animation: archatBlink 1.5s ease-in-out infinite;
            }
            
            @keyframes archatBlink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            
            /* Ocultar tabla en móvil y tablets, mostrar lista */
            @media (max-width: 1025px) {
                /* FORZAR VISIBILIDAD EN MÓVIL - ULTRA AGRESIVO */
                .contactos-view.active {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: relative !important;
                    z-index: 1 !important;
                    min-height: calc(100vh - 70px) !important;
                }
                
                .contactos-tabla-wrapper {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 300px !important;
                    padding: 10px !important;
                    overflow: visible !important;
                    max-height: none !important;
                    position: relative !important;
                    z-index: 2 !important;
                }
                
                .contactos-tabla-container {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 200px !important;
                    padding: 10px !important;
                    overflow: visible !important;
                    max-height: none !important;
                    position: relative !important;
                    z-index: 3 !important;
                    background: transparent !important;
                }
                
                /* Ocultar tabla en móvil */
                .contactos-tabla {
                    display: none !important;
                }
                
                /* Mostrar lista móvil */
                .contactos-lista-movil,
                #contactosListaBackup,
                div[style*="flex-direction: column"][style*="background: rgba(255,255,255"] {
                    display: flex !important;
                    flex-direction: column !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    min-height: 200px !important;
                    position: relative !important;
                    z-index: 4 !important;
                }
                
                /* Forzar visibilidad de items de lista */
                div[data-user-id][style*="display: flex"] {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    width: 100% !important;
                    position: relative !important;
                    z-index: 5 !important;
                }
                
                /* Forzar visibilidad del test visual */
                div[style*="background: red"] {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: relative !important;
                    z-index: 9999 !important;
                }
            }
            
            /* Ocultar lista en desktop, mostrar tabla */
            @media (min-width: 1026px) {
                .contactos-lista-movil {
                    display: none !important;
                }
                
                .contactos-tabla {
                    display: table !important;
                }
            }

            .user-status-badge-small .user-status-indicator {
                font-size: 0.9em;
            }
        }
        
        @media (max-width: 768px) {
            .conversacion-item {
                padding: 12px;
            }
            
            .conversacion-item-avatar {
                width: 45px;
                height: 45px;
                margin-right: 12px;
            }
            
            .mensaje-burbuja {
                max-width: 85%;
            }
            
            .contacto-item {
                padding: 12px;
            }
            
            .contacto-item-avatar {
                width: 44px;
                height: 44px;
                margin-right: 10px;
            }
            
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .menu-header {
            text-align: center;
            margin-bottom: 40px;
            padding-top: 20px;
        }
        
        .menu-header img {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            object-fit: contain;
        }
        
        .menu-options {
            max-width: 500px;
            margin: 0 auto;
        }
        
        .menu-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .menu-item:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .menu-item-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .menu-item-description {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .menu-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        /* Modal de Perfil */
        .perfil-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 2000;
            overflow-y: auto;
            padding: 20px;
        }
        
        .perfil-modal-overlay.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }
        
        .perfil-view {
            display: none;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-radius: 20px;
            padding: 30px;
            max-width: 800px;
            width: 100%;
            max-height: calc(90vh - 70px);
            overflow-y: auto;
            margin: 20px auto;
            margin-top: 90px; /* Altura del navbar + margen */
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            position: relative;
            box-sizing: border-box;
        }
        
        .perfil-view.active {
            display: block;
        }
        
        /* Modal de Selección de Contactos */
        .contactos-modal-overlay {
            display: none !important;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 2001;
            overflow-y: auto;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .contactos-modal-overlay.active {
            display: flex !important;
            align-items: flex-start;
            justify-content: center;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .contactos-modal {
            background: white;
            border-radius: 20px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .contactos-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;
            border-bottom: 1px solid #e0e0e0;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: relative;
        }
        
        .contactos-modal-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }
        
        .contactos-modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .contactos-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .contactos-modal-search {
            position: relative;
            padding: 20px 30px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .contactos-modal-search-input {
            width: 100%;
            padding: 12px 40px 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
        
        .contactos-modal-search-input:focus {
            outline: none;
            border-color: #6a4c93;
        }
        
        .contactos-modal-search-icon {
            position: absolute;
            right: 45px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }
        
        .contactos-modal-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px 0;
        }
        
        /* Estilos para tabla de usuarios */
        .contactos-modal-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        
        .contactos-modal-table thead {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .contactos-modal-table th {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .contactos-modal-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .contactos-modal-table tbody tr:hover {
            background: #f5f5f5;
        }
        
        .contactos-modal-table td {
            padding: 15px 20px;
            vertical-align: middle;
        }
        
        .contactos-modal-cell-usuario {
            min-width: 250px;
        }
        
        .contactos-modal-usuario-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .contactos-modal-usuario-info {
            flex: 1;
            min-width: 0;
        }
        
        .contactos-modal-cell-pais,
        .contactos-modal-cell-idioma {
            min-width: 150px;
        }
        
        .contactos-modal-pais-container,
        .contactos-modal-idioma-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .contactos-modal-flag {
            font-size: 20px;
            line-height: 1;
        }
        
        .contactos-modal-pais-nombre,
        .contactos-modal-idioma-nombre {
            font-size: 14px;
            color: var(--color-text-main);
        }
        
        .contactos-modal-cell-accion {
            min-width: 180px;
            text-align: right;
        }
        
        .contactos-modal-accion-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .contactos-modal-btn-contactar {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .contactos-modal-btn-contactar:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(106, 76, 147, 0.4);
        }
        
        .contactos-modal-btn-contactar:active {
            transform: translateY(0);
        }
        
        @media (max-width: 768px) {
            .contactos-modal-table {
                font-size: 12px;
            }
            
            .contactos-modal-table th,
            .contactos-modal-table td {
                padding: 10px 12px;
            }
            
            .contactos-modal-cell-usuario {
                min-width: 180px;
            }
            
            .contactos-modal-cell-pais,
            .contactos-modal-cell-idioma {
                min-width: 100px;
            }
            
            .contactos-modal-cell-accion {
                min-width: 120px;
            }
            
            .contactos-modal-flag {
                font-size: 16px;
            }
            
            .contactos-modal-pais-nombre,
            .contactos-modal-idioma-nombre {
                font-size: 12px;
            }
            
            .contactos-modal-btn-contactar {
                padding: 6px 12px;
                font-size: 12px;
            }
        }
        
        .contactos-modal-loading,
        .contactos-modal-empty {
            padding: 40px 30px;
            text-align: center;
        }
        
        .contactos-modal-item {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .contactos-modal-item:hover {
            background: #f5f5f5;
        }
        
        .contactos-modal-item-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .contactos-modal-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .contactos-modal-item-info {
            flex: 1;
            min-width: 0;
        }
        
        .contactos-modal-item-name {
            font-weight: 600;
            font-size: 16px;
            color: var(--color-text-main);
            margin-bottom: 4px;
        }
        
        .contactos-modal-item-email {
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .contactos-modal-item-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 10px;
        }
        
        .contactos-modal-item-badge.contacto {
            background: rgba(106, 76, 147, 0.2);
            color: #9d7fcc;
        }
        
        .contactos-modal-item-badge.conversacion {
            background: #e8f5e9;
            color: #388e3c;
        }
        
        @media (max-width: 768px) {
            .contactos-modal {
                max-width: 100%;
                max-height: 100vh;
                border-radius: 0;
                margin: 0;
            }
            
            .contactos-modal-overlay {
                padding: 0;
            }
            
            .contactos-modal-header {
                padding: 15px 20px;
                padding-right: 60px;
            }
            
            .contactos-modal-search {
                padding: 15px 20px;
            }
        }
        
        .perfil-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        @media (max-width: 768px) {
            .perfil-modal-close {
                top: 10px;
                right: 10px;
                width: 35px;
                height: 35px;
                font-size: 20px;
            }
        }
        
        .perfil-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }
        
        .perfil-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-right: 60px; /* Espacio para el botón de cerrar */
            position: relative;
        }
        
        .perfil-header h1 {
            font-size: 2rem;
            margin: 0;
        }
        
        @media (max-width: 768px) {
            .perfil-header {
                padding-right: 50px;
            }
            
            .perfil-header h1 {
                font-size: 1.5rem;
            }
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-editar {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            white-space: nowrap;
        }
        
        .btn-editar:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .btn-salir-perfil {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 12px 30px;
            margin: 30px auto 0;
            display: block;
            width: auto;
            min-width: 150px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-salir-perfil:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .btn-salir-perfil span {
            margin-right: 8px;
        }
        
        .btn-guardar {
            background: #4CAF50;
            color: white;
        }
        
        .btn-guardar:hover:not(:disabled) {
            background: #45a049;
        }
        
        .btn-cancelar {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            margin-left: 10px;
        }
        
        .btn-cancelar:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .btn-volver {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            margin-bottom: 20px;
        }
        
        .btn-volver:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .mensaje {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        
        .mensaje-success {
            background: rgba(76, 175, 80, 0.3);
            border: 1px solid rgba(76, 175, 80, 0.5);
        }
        
        .mensaje-error {
            background: rgba(244, 67, 54, 0.3);
            border: 1px solid rgba(244, 67, 54, 0.5);
        }
        
        .perfil-imagen-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .perfil-imagen-wrapper {
            position: relative;
            display: inline-block;
        }
        
        .perfil-imagen-wrapper img,
        .perfil-imagen-placeholder {
            width: 128px;
            height: 128px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .perfil-imagen-placeholder {
            font-size: 64px;
        }
        
        .perfil-imagen-upload-btn {
            position: absolute;
            bottom: -5px;
            right: -5px;
            background: #4CAF50;
            color: white;
            border: 3px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 20;
            padding: 0;
            margin: 0;
        }
        
        .perfil-imagen-upload-btn:hover {
            background: #45a049;
            transform: scale(1.1);
        }
        
        .perfil-imagen-upload-btn svg {
            width: 20px;
            height: 20px;
            stroke: white;
        }
        
        .perfil-imagen-upload-btn span {
            display: none; /* Ocultar emoji, usar SVG */
        }
        
        @media (max-width: 768px) {
            .perfil-imagen-upload-btn {
                width: 40px;
                height: 40px;
                padding: 0;
            }
            
            .perfil-imagen-upload-btn svg {
                width: 20px;
                height: 20px;
            }
        }
        
        .perfil-imagen-upload-options {
            position: absolute;
            bottom: -5px;
            right: -5px;
            z-index: 10;
        }
        
        .perfil-imagen-wrapper {
            cursor: pointer;
            position: relative;
            display: inline-block;
        }
        
        .perfil-imagen-wrapper:hover {
            opacity: 0.9;
        }
        
        .perfil-imagen-wrapper:hover .perfil-imagen-upload-btn {
            transform: scale(1.1);
        }
        
        /* Modal para ver imagen grande */
        .imagen-perfil-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .imagen-perfil-modal-overlay.active {
            display: flex;
        }
        
        .imagen-perfil-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .imagen-perfil-modal-content img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }
        
        .imagen-perfil-modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .imagen-perfil-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .opciones-foto-menu {
            position: absolute;
            bottom: 50px;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 10px 0;
            min-width: 180px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
        
        .opciones-foto-menu button {
            width: 100%;
            padding: 12px 20px;
            background: transparent;
            border: none;
            color: var(--color-text-main) !important;
            font-weight: bold !important;
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.2s;
            font-size: 14px;
        }
        
        .opciones-foto-menu button:hover {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .opciones-foto-menu button span:first-child {
            font-size: 20px;
        }
        
        .perfil-form {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .form-section {
            margin-bottom: 30px;
        }
        
        .form-section h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* Sección de Estado de Presencia en Perfil */
        .presence-status-section {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .current-status-display {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }
        
        .status-label {
            font-weight: 600;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .current-status-badge {
            flex: 1;
        }
        
        .status-options h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
        }
        
        .status-buttons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
        }
        
        .status-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .status-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .status-btn .status-icon {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
        }
        
        .status-btn.status-online .status-icon {
            color: #00FF00;
        }
        
        .status-btn.status-online {
            border-color: rgba(0, 255, 0, 0.3);
        }
        
        .status-btn.status-idle .status-icon {
            color: #FFAA00;
        }
        
        .status-btn.status-idle {
            border-color: rgba(255, 170, 0, 0.3);
        }
        
        .status-btn.status-dnd .status-icon,
        .status-btn.status-busy .status-icon {
            color: #FF3333;
        }
        
        .status-btn.status-dnd,
        .status-btn.status-busy {
            border-color: rgba(255, 51, 51, 0.3);
        }
        
        .status-btn.status-offline .status-icon {
            color: #999999;
        }
        
        .status-btn.status-offline {
            border-color: rgba(153, 153, 153, 0.3);
        }
        
        .status-btn.status-custom .status-icon {
            color: #9d7fcc;
        }
        
        .status-btn.status-custom {
            border-color: rgba(106, 76, 147, 0.3);
            background: linear-gradient(135deg, rgba(106, 76, 147, 0.2) 0%, rgba(90, 61, 131, 0.2) 100%);
        }
        
        .status-info {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .status-info .info-item {
            padding: 8px 0;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .status-info .info-item:last-child {
            border-bottom: none;
        }
        
        .status-info .info-item strong {
            color: rgba(255, 255, 255, 1);
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .status-buttons-grid {
                grid-template-columns: 1fr;
            }
            
            .current-status-display {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            background: var(--color-bg-input);
            color: var(--color-text-main);
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
        }
        
        .form-group select {
            background-color: var(--color-bg-input);
            color: var(--color-text-main);
        }
        
        .form-group select option {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
            padding: 10px;
        }
        
        .form-group select:focus {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
        
        .form-group select option:checked,
        .form-group select option:hover {
            background: var(--color-primary) !important;
            color: var(--color-text-inverse) !important;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--color-border-focus);
            background: var(--color-bg-input);
        }
        
        .form-group input:disabled,
        .form-group select:disabled,
        .form-group textarea:disabled {
            opacity: 1;
            background-color: transparent !important;
            border: none !important;
            color: var(--color-text-muted) !important;
            cursor: default !important;
            pointer-events: none !important;
        }
        
        .perfil-form input#nick {
            opacity: 1 !important;
            background-color: transparent !important;
            border: none !important;
            color: var(--color-text-muted) !important;
            cursor: default !important;
            pointer-events: none !important;
        }
        
        .perfil-form input:not(:disabled):not(#nick),
        .perfil-form select:not(:disabled),
        .perfil-form textarea:not(:disabled) {
            pointer-events: auto !important;
            user-select: text !important;
            cursor: text !important;
            opacity: 1 !important;
            background-color: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
        
        .form-group input:disabled,
        .form-group textarea:disabled {
            cursor: not-allowed;
        }
        
        .form-group select:disabled option {
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
        
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--color-border);
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            font-size: 1.2rem;
        }
        
        /* Formulario login (modal/overlay en app; en ruta /app/login los estilos vienen de LoginView.css) */
        /* Asegurar que el formulario no bloquee los eventos */
        .login-form {
            pointer-events: auto !important;
        }
        
        .login-form input,
        .login-form button {
            pointer-events: auto !important;
        }
        
        /* Estilos para el botón de recuperar contraseña */
        .login-forgot-password {
            text-align: center !important;
            margin-top: 10px !important;
            margin-bottom: 5px !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .recuperar-password-container {
            margin-top: 10px !important;
            padding: 12px !important;
        }
        
        .recuperar-password-container h3 {
            margin-top: 0 !important;
            margin-bottom: 8px !important;
            font-size: 1rem !important;
        }
        
        .recuperar-password-container p {
            margin-bottom: 10px !important;
            font-size: 0.85rem !important;
        }
        
        .recuperar-password-container form {
            gap: 10px !important;
        }
        
        .btn-forgot-password {
            background: none !important;
            border: none !important;
            color: var(--color-primary) !important;
            text-decoration: underline !important;
            cursor: pointer !important;
            font-size: 0.95rem !important;
            font-weight: 500 !important;
            padding: 5px 10px !important;
            transition: opacity 0.2s !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .btn-forgot-password:hover {
            opacity: 0.8 !important;
            text-decoration: underline !important;
            color: var(--color-primary) !important;
        }
        
        .btn-forgot-password:active {
            opacity: 0.6 !important;
        }
        
        .login-card {
            background: var(--color-bg-card);
            color: var(--color-text-main);
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            padding: 30px;
            width: 100%;
            max-width: 450px;
            box-sizing: border-box;
            overflow-y: auto;
            max-height: 100vh;
        }
        
        /* Contenedor de mensajes para login */
        .login-mensaje-container {
            margin-bottom: 15px;
            min-height: 0;
        }
        
        .login-mensaje {
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 0.9rem;
            text-align: center;
            display: none;
            margin-bottom: 10px;
        }
        
        .login-mensaje.show {
            display: block;
        }
        
        .login-mensaje.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .login-mensaje.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .login-info {
            margin-top: 15px;
            padding: 12px;
        }
        
        /* Responsive para login */
        @media (max-width: 480px) {
            .login-view {
                padding: 10px;
            }
            
            .login-card {
                padding: 20px;
                max-width: 100%;
                border-radius: 12px;
                max-height: calc(100vh - 20px);
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 22px;
            }
            
            .login-subtitle {
                font-size: 16px;
            }
            
            .login-logo {
                max-width: 120px;
                max-height: 120px;
                width: auto;
                height: auto;
                border-radius: 8px;
                background: white;
                padding: 4px;
            }
            
            .login-form .form-group input {
                font-size: 16px; /* Evita zoom en iOS */
                padding: 14px 16px;
            }
            
            .captcha-container {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .captcha-question {
                min-width: 80px;
                font-size: 16px;
                padding: 10px 12px;
            }
            
            .captcha-input {
                flex: 1;
                min-width: 80px;
                font-size: 16px;
            }
            
            .login-button {
                padding: 14px 20px;
                font-size: 16px;
            }
            
            .login-info {
                padding: 10px;
                margin-top: 12px;
                margin-bottom: 8px;
                flex-wrap: wrap;
            }
            
            .login-info .info-icon {
                font-size: 20px;
            }
            
            .login-info .info-title {
                font-size: 14px;
            }
            
            .login-info .info-text {
                font-size: 12px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
        }
        
        @media (min-width: 481px) and (max-width: 768px) {
            .login-card {
                padding: 30px;
                max-width: 90%;
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 26px;
            }
            
            .login-subtitle {
                font-size: 17px;
            }
        }
        
        @media (min-width: 769px) {
            .login-card {
                padding: 40px;
                max-width: 450px;
            }
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .login-logo {
            max-width: 150px;
            max-height: 150px;
            width: auto;
            height: auto;
            border-radius: 10px;
            background: white;
            padding: 5px;
            display: block;
            margin: 0 auto 15px auto;
            object-fit: contain;
        }
        
        .login-header h1 {
            font-size: 32px;
            font-weight: bold;
            color: var(--color-text-main);
            margin: 0 0 8px 0;
        }
        
        .login-main-title {
            color: #1f2937;
            font-size: 28px;
            font-weight: 700;
            margin: 10px 0 5px 0;
            text-align: center;
        }
        
        .login-subtitle {
            color: var(--color-text-secondary);
            font-size: 18px;
            font-weight: 500;
            margin: 0;
        }
        
        .login-form {
            margin-bottom: 15px;
        }
        
        .login-form .form-group {
            margin-bottom: 15px;
        }
        
        .login-form .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-main);
            margin-bottom: 8px;
        }
        
        .login-form .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
            background: var(--color-bg-input);
            color: var(--color-text-main);
        }
        
        .login-form .form-group input:focus {
            outline: none;
            border-color: var(--color-border-focus);
        }
        
        .login-form .form-group input::placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }
        
        .captcha-group {
            background: var(--color-bg-muted);
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        
        .captcha-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        
        .captcha-question {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            padding: 12px 16px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 18px;
            min-width: 100px;
            text-align: center;
            box-sizing: border-box;
        }
        
        .captcha-input {
            flex: 1;
            min-width: 80px;
            padding: 12px 16px;
            border: 2px solid var(--color-border);
            border-radius: 6px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            background: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
            cursor: text !important;
        }
        
        .captcha-input:disabled,
        .captcha-input[disabled] {
            background: var(--color-bg-muted) !important;
            color: var(--color-text-muted) !important;
            cursor: not-allowed !important;
        }
        
        .captcha-refresh {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            min-width: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: background 0.3s;
            flex-shrink: 0;
        }
        
        .captcha-refresh:hover {
            background: var(--color-primary-hover);
        }
        
        .captcha-help {
            display: block;
            margin-top: 8px;
            color: var(--color-text-muted);
            font-size: 12px;
        }
        
        /* .login-error removido - ahora se usan modales centrados */
        
        .login-button {
            width: 100%;
            padding: 14px 24px;
            background: var(--color-button-bg, var(--color-primary));
            color: var(--color-button-text, var(--color-text-inverse));
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.3s;
        }
        
        .login-button:hover:not(:disabled) {
            background: var(--color-primary-hover);
        }
        
        .login-button:disabled {
            opacity: 0.9;
            cursor: not-allowed;
            background: var(--color-button-bg-disabled, var(--color-bg-input));
            color: var(--color-button-text-disabled, var(--color-text-secondary));
        }
        
        .login-info {
            display: flex;
            align-items: start;
            gap: 12px;
            padding: 16px;
            margin-bottom: 16px;
            border-radius: 8px;
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .login-info.auto-register {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
        }
        
        /* Modal de registro */
        .registro-modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.7) !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 99999 !important;
            backdrop-filter: blur(5px);
            pointer-events: auto !important;
        }
        
        .registro-modal-content {
            pointer-events: auto !important;
        }
        
        .registro-modal-overlay[style*="display: flex"],
        .registro-modal-overlay[style*="display:flex"],
        .registro-modal-overlay.show-modal {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        
        .registro-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .registro-modal-header {
            padding: 20px 25px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .registro-modal-header h2 {
            margin: 0;
            color: #1f2937;
            font-size: 24px;
        }
        
        .registro-modal-close {
            background: none;
            border: none;
            font-size: 32px;
            color: #6b7280;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .registro-modal-close:hover {
            background: #f3f4f6;
            color: #1f2937;
        }
        
        .registro-modal-body {
            padding: 25px;
        }
        
        .registro-modal-description {
            color: #6b7280;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .registro-modal-body .form-group {
            margin-bottom: 20px;
        }
        
        .registro-modal-body .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #374151;
            font-weight: 500;
        }
        
        .registro-modal-body .input-wrapper {
            position: relative;
        }
        
        .registro-modal-body .input-wrapper input {
            width: 100%;
            padding: 12px 40px 12px 12px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.2s;
            pointer-events: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background-color: var(--color-bg-input) !important;
            color: var(--color-text-main) !important;
        }
        
        .registro-modal-body .input-wrapper input:focus {
            outline: none;
            border-color: var(--color-border-focus);
            box-shadow: var(--shadow-focus);
        }
        
        .registro-modal-body .input-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }
        
        .registro-modal-body .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }
        
        .registro-modal-body .btn-primary {
            flex: 1;
            padding: 12px 24px;
            background: #6a4c93;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .registro-modal-body .btn-primary:hover:not(:disabled) {
            background: #5a3d83;
        }
        
        .registro-modal-body .btn-primary:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
        
        .registro-modal-body .btn-secondary {
            flex: 1;
            padding: 12px 24px;
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .registro-modal-body .btn-secondary:hover {
            background: #e5e7eb;
        }
        
        .registro-modal-body .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .registro-modal-body .captcha-question {
            background: #6a4c93;
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: bold;
            min-width: 80px;
            text-align: center;
        }
        
        .registro-modal-body .captcha-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .registro-modal-body .captcha-refresh {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }
        
        .registro-modal-body .captcha-help {
            color: #6b7280;
            font-size: 12px;
        }
        
        /* Efecto neon para ALTA */
        .alta-neon {
            display: inline-block;
            font-size: 32px;
            font-weight: bold;
            color: #9d7fcc;
            text-shadow: 
                0 0 10px #9d7fcc,
                0 0 20px #9d7fcc,
                0 0 30px #9d7fcc,
                0 0 40px #9d7fcc,
                0 0 70px #9d7fcc,
                0 0 80px #9d7fcc;
            animation: neonPulse 2s ease-in-out infinite alternate, neonMove 3s ease-in-out infinite;
            letter-spacing: 3px;
        }
        
        @keyframes neonPulse {
            from {
                text-shadow: 
                    0 0 10px #9d7fcc,
                    0 0 20px #9d7fcc,
                    0 0 30px #9d7fcc,
                    0 0 40px #9d7fcc,
                    0 0 70px #9d7fcc,
                    0 0 80px #9d7fcc;
                opacity: 1;
            }
            to {
                text-shadow: 
                    0 0 5px #9d7fcc,
                    0 0 10px #9d7fcc,
                    0 0 15px #9d7fcc,
                    0 0 20px #9d7fcc,
                    0 0 35px #9d7fcc,
                    0 0 40px #9d7fcc;
                opacity: 0.8;
            }
        }
        
        @keyframes neonMove {
            0%, 100% {
                transform: translateX(0) scale(1);
            }
            25% {
                transform: translateX(-3px) scale(1.05);
            }
            50% {
                transform: translateX(0) scale(1.1);
            }
            75% {
                transform: translateX(3px) scale(1.05);
            }
        }
        
        .info-icon {
            font-size: 24px;
            flex-shrink: 0;
        }
        
        .info-title {
            font-weight: 600;
            color: var(--color-text-main);
            margin: 0 0 4px 0;
            font-size: 14px;
        }
        
        .info-text {
            color: #666;
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
        }
        
        /* Barra de navegación superior */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 20px;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }
        
        .navbar-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        
        .navbar-logo img {
            width: 40px;
            height: 40px;
            max-width: 40px;
            max-height: 40px;
            border-radius: 8px;
            object-fit: contain;
        }
        
        .hamburger-menu {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            padding: 5px;
        }
        
        .hamburger-menu span {
            width: 25px;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        .navbar-menu {
            display: flex;
            align-items: center;
            gap: 20px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .navbar-menu li {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
            color: white;
            font-size: 0.95rem;
        }
        
        .navbar-menu li:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .navbar-menu li i {
            font-size: 1.1rem;
        }
        
        .navbar-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        /* Selector de idiomas personalizado (estilo YAZ) */
        .language-selector-custom {
            position: relative;
            display: inline-block;
        }
        
        .language-selector-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 8px;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
        }
        
        .language-selector-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .language-flag {
            display: inline-block;
            width: 20px;
            height: 15px;
            vertical-align: middle;
        }
        
        .flag-svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .flag-button {
            width: 20px;
            height: 15px;
        }
        
        .flag-option {
            width: 32px;
            height: 24px;
        }
        
        .language-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(106, 76, 147, 0.98);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            min-width: 200px;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 1001;
            padding: 4px 0;
        }
        
        /* Asegurar que las banderas se muestren */
        .language-dropdown.active .language-flag {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .language-dropdown.active {
            display: block;
        }
        
        .language-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            white-space: nowrap;
        }
        
        .language-option * {
            pointer-events: none;
        }
        
        .language-option:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .language-option.active {
            background: rgba(255, 255, 255, 0.3);
            font-weight: 600;
        }
        
        .language-option .language-flag {
            width: 32px;
            height: 24px;
            min-width: 32px;
            display: inline-block;
            flex-shrink: 0;
        }
        
        .language-option .flag-svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .language-option .language-name {
            flex: 1;
            font-size: 0.95rem;
        }
        
        .user-profile {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .user-profile:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            overflow: hidden;
            object-fit: cover;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(30, 50, 70, 0.98) !important;
            backdrop-filter: blur(10px);
            border-radius: 8px;
            min-width: 200px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 10001;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .user-dropdown.active {
            display: block;
        }
        
        .user-dropdown-header {
            padding: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .user-dropdown-header .user-avatar {
            width: 40px;
            height: 40px;
        }
        
        .user-dropdown-header .user-info {
            flex: 1;
        }
        
        .user-dropdown-header .user-name {
            font-weight: 700 !important;
            font-size: 0.95rem;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
        
        .user-dropdown-item {
            padding: 12px 16px !important;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            color: #ffffff !important;
            text-decoration: none;
            min-height: 44px !important;
        }
        
        .user-dropdown-item span {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
        
        .user-dropdown-item i {
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }
        
        .user-info-navbar {
            display: flex;
            align-items: center;
        }
        
        .user-info-navbar span {
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            white-space: nowrap;
        }
        
        .user-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.15) !important;
        }
        
        .user-dropdown-item i {
            font-size: 1.1rem;
            width: 20px;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        }

        .user-dropdown-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.15);
            margin: 4px 0;
        }

        .user-dropdown-settings {
            display: flex !important;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            cursor: default;
        }

        .user-dropdown-settings-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        .theme-toggle {
            display: flex;
            gap: 8px;
            width: 100%;
        }

        .theme-chip {
            flex: 1;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff !important;
            border-radius: 10px;
            padding: 8px 10px;
            font-weight: 700 !important;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .theme-chip:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.35);
        }

        .theme-chip.active {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            color: #ffffff !important;
        }
        
        .logout-btn {
            display: none; /* Oculto porque ahora está en el dropdown */
        }
        
        /* Menú móvil (hamburguesa) */
        .mobile-menu {
            position: fixed;
            top: 60px;
            left: -100%;
            width: 280px;
            height: calc(100vh - 60px);
            background: rgba(106, 76, 147, 0.98);
            backdrop-filter: blur(10px);
            transition: left 0.3s ease;
            z-index: 999;
            padding: 20px;
            overflow-y: auto;
        }
        
        .mobile-menu.active {
            left: 0;
        }
        
        .mobile-menu-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #ffffff;
        }
        
        .mobile-menu-item span {
            color: #ffffff !important;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .mobile-menu-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .mobile-menu-item i {
            font-size: 1.3rem;
            width: 24px;
        }
        
        .overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }
        
        .overlay.active {
            display: block;
        }
        
        /* Contenido principal */
        .main-content {
            margin-top: 60px;
            min-height: calc(100vh - 60px);
            padding: 20px;
        }

        /* ===== MODO OSCURO (selección de usuario) ===== */
        :root[data-theme="dark"] {
            background: radial-gradient(circle at 20% 20%, rgba(88, 129, 193, 0.35), transparent 30%),
                        radial-gradient(circle at 80% 0%, rgba(118, 75, 162, 0.35), transparent 28%),
                        linear-gradient(180deg, #0f1724 0%, #0b1220 100%);
            color: #e9edf7 !important;
        }

        :root[data-theme="dark"] * {
            color: #e9edf7 !important;
        }

        :root[data-theme="dark"] .navbar {
            background: linear-gradient(135deg, #111c2b 0%, #0f1724 100%) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        :root[data-theme="dark"] .user-dropdown {
            background: rgba(12, 20, 32, 0.96) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        }

        :root[data-theme="dark"] .user-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.08) !important;
        }

        :root[data-theme="dark"] .theme-chip {
            border-color: rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }

        :root[data-theme="dark"] .theme-chip.active {
            background: linear-gradient(135deg, #6a4c93 0%, #5a3d83 100%);
            color: #ffffff !important;
        }

        /* Search bar en dark */
        :root[data-theme="dark"] .contacts-search-bar {
            background: #1e1e1e !important;
            border-color: #2a2a2a !important;
            box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
        }

        :root[data-theme="dark"] .search-input-container {
            background: #121212 !important;
            border-color: #2a2a2a !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 3px 10px rgba(0,0,0,0.35) !important;
        }

        :root[data-theme="dark"] .search-input {
            color: #e0e0e0 !important;
        }

        :root[data-theme="dark"] .search-input::placeholder {
            color: #b0b0b0 !important;
        }

        :root[data-theme="dark"] .search-icon {
            color: #b0b0b0 !important;
            opacity: 0.8 !important;
        }

        /* Base de fondos en modo oscuro */
        :root[data-theme="dark"] .main-app,
        :root[data-theme="dark"] .main-content,
        :root[data-theme="dark"] .conversacion-view,
        :root[data-theme="dark"] .conversaciones-view,
        :root[data-theme="dark"] .conversaciones-list,
        :root[data-theme="dark"] .contactos-loading,
        :root[data-theme="dark"] .conversacion-mensajes {
            background: #121212 !important;
        }

        /* Header y footers */
        :root[data-theme="dark"] .conversacion-header,
        :root[data-theme="dark"] .conversacion-input-container,
        :root[data-theme="dark"] .navbar,
        :root[data-theme="dark"] .mobile-menu {
            background: #1e1e1e !important;
            border-color: #2a2a2a !important;
        }

        /* Burbujas izquierda/derecha */
        :root[data-theme="dark"] .mensaje-item.ajeno,
        :root[data-theme="dark"] .mensaje-item.ajeno .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.ajeno .mensaje-texto {
            background: #2a2a2a !important;
            color: #e0e0e0 !important;
        }

        :root[data-theme="dark"] .mensaje-item.propio,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-texto {
            background: #3D2A5B !important;
            color: #ffffff !important;
        }

        /* Burbujas de mensajes propios en modo dark - MÓVIL Y DESKTOP - MÁXIMA ESPECIFICIDAD - PÚRPURA OSCURO, NUNCA AZUL */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-texto,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-contenido,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja .mensaje-texto,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja span,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja p,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja div,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja img,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja button,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja a {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            color: #ffffff !important;
        }

        /* Sobrescribir cualquier estilo inline o clase que pueda estar aplicando azul - MÁXIMA PRIORIDAD */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="background"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="blue"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="rgba"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="rgb"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="#"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="667eea"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="75AADB"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="6CB4EE"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="4f8ad9"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="3d6fb8"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="2196F3"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="0b7dda"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="background"],
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja[style*="blue"] {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
        }

        /* Forzar también con selector universal para máxima especificidad - PÚRPURA OSCURO, NUNCA AZUL */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja * {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
        }

        /* REGLA FINAL: Forzar púrpura oscuro en modo dark - MÁXIMA ESPECIFICIDAD - NUNCA AZUL */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            background-image: none !important;
            color: #ffffff !important;
        }

        /* Forzar también en móvil */
        @media (max-width: 768px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #5a3d83 !important;
                background-color: #5a3d83 !important;
                color: #ffffff !important;
            }
        }

        :root[data-theme="dark"] .mensaje-time,
        :root[data-theme="dark"] .mensaje-editado-indicator,
        :root[data-theme="dark"] .mensaje-sender {
            color: #b0b0b0 !important;
        }

        /* Avatares y bordes */
        :root[data-theme="dark"] .mensaje-avatar,
        :root[data-theme="dark"] .user-avatar,
        :root[data-theme="dark"] .user-avatar-mobile {
            border: 2px solid var(--color-border) !important;
            background: #2a2a2a !important;
        }

        /* Inputs y placeholders */
        :root[data-theme="dark"] input,
        :root[data-theme="dark"] textarea,
        :root[data-theme="dark"] .conversacion-input {
            background: #1e1e1e !important;
            color: #e0e0e0 !important;
            border-color: #2a2a2a !important;
        }

        :root[data-theme="dark"] input::placeholder,
        :root[data-theme="dark"] textarea::placeholder,
        :root[data-theme="dark"] .conversacion-input::placeholder {
            color: #b0b0b0 !important;
        }

        /* Iconos y botones - Dark mode: todos en gris claro, NUNCA azul */
        :root[data-theme="dark"] i,
        :root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-emoji-picker,
        :root[data-theme="dark"] .mensaje-delete,
        :root[data-theme="dark"] .mensaje-edit,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-enviar-mensaje,
        :root[data-theme="dark"] .btn-adjuntar-archivo,
        :root[data-theme="dark"] .btn-emoji-picker,
        :root[data-theme="dark"] .mensaje-delete,
        :root[data-theme="dark"] .mensaje-edit,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span {
            color: #B0B0B0 !important;
        }

        :root[data-theme="dark"] .btn-enviar-mensaje:hover,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover,
        :root[data-theme="dark"] .btn-emoji-picker:hover,
        :root[data-theme="dark"] .mensaje-delete:hover,
        :root[data-theme="dark"] .mensaje-edit:hover,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover,
        :root[data-theme="dark"] .btn-emoji-picker:hover,
        :root[data-theme="dark"] .mensaje-delete:hover,
        :root[data-theme="dark"] .mensaje-edit:hover {
            color: #E0E0E0 !important;
        }

        /* Asegurar que los iconos dentro de los botones también sean gris claro */
        :root[data-theme="dark"] .btn-adjuntar-archivo *,
        :root[data-theme="dark"] .btn-enviar-mensaje *,
        :root[data-theme="dark"] .btn-emoji-picker *,
        :root[data-theme="dark"] .btn-adjuntar-archivo *,
        :root[data-theme="dark"] .btn-enviar-mensaje *,
        :root[data-theme="dark"] .btn-emoji-picker * {
            color: #B0B0B0 !important;
        }

        :root[data-theme="dark"] .btn-adjuntar-archivo:hover *,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover *,
        :root[data-theme="dark"] .btn-emoji-picker:hover *,
        :root[data-theme="dark"] .btn-adjuntar-archivo:hover *,
        :root[data-theme="dark"] .btn-enviar-mensaje:hover *,
        :root[data-theme="dark"] .btn-emoji-picker:hover * {
            color: #E0E0E0 !important;
        }

        /* 🔥 MEJORA VISUAL: Botón de estado más armonioso para tema Dark */
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button {
            background: rgba(46, 125, 50, 0.15) !important;
            border: 1px solid rgba(46, 125, 50, 0.4) !important;
            color: rgba(200, 230, 201, 0.9) !important;
            font-weight: 400 !important;
            box-shadow: none !important;
        }

        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button:hover,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-button:hover {
            background: rgba(46, 125, 50, 0.22) !important;
            border-color: rgba(46, 125, 50, 0.55) !important;
            transform: none !important;
            box-shadow: none !important;
        }

        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-online,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-online {
            background: rgba(46, 125, 50, 0.15) !important;
            border-color: rgba(46, 125, 50, 0.4) !important;
        }

        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-icon,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-icon {
            color: rgba(129, 199, 132, 0.9) !important;
            filter: none !important;
        }

        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-text,
        :root[data-theme="dark"] .navbar-presence-selector .navbar-status-text {
            color: rgba(200, 230, 201, 0.9) !important;
        }

        /* ===== ESTILOS PARA CONTACTOS EN MODO OSCURO ===== */
        :root[data-theme="dark"] .conversacion-item {
            background: rgba(30, 30, 30, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px);
        }

        :root[data-theme="dark"] .conversacion-item:hover {
            background: rgba(40, 40, 40, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        :root[data-theme="dark"] .conversacion-item-nombre {
            color: #e0e0e0 !important;
            font-weight: 600 !important;
        }

        :root[data-theme="dark"] .conversacion-item-preview {
            color: #b0b0b0 !important;
            opacity: 0.9 !important;
        }

        :root[data-theme="dark"] .conversacion-item-fecha {
            color: #999999 !important;
        }

        :root[data-theme="dark"] .conversacion-item-avatar {
            background: rgba(50, 50, 50, 0.8) !important;
            border: 2px solid rgba(255, 255, 255, 0.15) !important;
            color: #e0e0e0 !important;
        }

        :root[data-theme="dark"] .conversaciones-subtitle {
            color: #d0d0d0 !important;
            font-weight: 700 !important;
        }

        :root[data-theme="dark"] .conversaciones-list {
            background: transparent !important;
        }

        :root[data-theme="dark"] .status-display {
            color: #b0b0b0 !important;
        }

        :root[data-theme="dark"] .status-display .status-icon {
            opacity: 0.8 !important;
        }

        :root[data-theme="dark"] .contact-actions {
            background: transparent !important;
        }

        :root[data-theme="dark"] .contact-action-btn {
            background: rgba(40, 40, 40, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            color: #e0e0e0 !important;
        }

        :root[data-theme="dark"] .contact-action-btn:hover {
            background: rgba(50, 50, 50, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        :root[data-theme="dark"] .contact-action-btn.fav-active {
            background: rgba(47, 42, 23, 0.9) !important;
            border-color: #d1a800 !important;
            color: #ffd700 !important;
        }

        :root[data-theme="dark"] .contact-action-btn.blocked {
            background: rgba(58, 30, 30, 0.9) !important;
            border-color: #d14a4a !important;
            color: #ff6b6b !important;
        }

        /* Subtítulos de secciones (Favoritos, Contactos) */
        :root[data-theme="dark"] .conversaciones-section-title,
        :root[data-theme="dark"] h3.conversaciones-subtitle {
            color: #d0d0d0 !important;
            font-weight: 700 !important;
            text-shadow: none !important;
        }

        /* Estados de contacto en modo oscuro */
        :root[data-theme="dark"] .status-display {
            color: #b0b0b0 !important;
        }

        :root[data-theme="dark"] .status-display .status-icon {
            opacity: 0.7 !important;
        }

        /* Información adicional del contacto (país, etc.) */
        :root[data-theme="dark"] .conversacion-item-info span,
        :root[data-theme="dark"] .contact-country,
        :root[data-theme="dark"] .contact-location {
            color: #999999 !important;
        }

        /* ===== SELECTOR DE IDIOMA EN MODO OSCURO ===== */
        :root[data-theme="dark"] .language-dropdown {
            background: rgba(30, 30, 30, 0.98) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
        }

        :root[data-theme="dark"] .language-option {
            color: #e0e0e0 !important;
        }

        :root[data-theme="dark"] .language-option:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

        /* ===== REGLA FINAL ABSOLUTA PARA MENSAJES PROPIOS EN DARK MODE ===== */
        /* Esta regla debe estar al final para tener máxima prioridad - COLOR PÚRPURA OSCURO, NUNCA AZUL */
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja *,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::before,
        :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja::after {
            background: #3D2A5B !important;
            background-color: #3D2A5B !important;
            background-image: none !important;
            color: #ffffff !important;
        }
        
        @media (max-width: 768px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #3D2A5B !important;
                background-color: #3D2A5B !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        }
        
        @media (min-width: 769px) {
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja,
            :root[data-theme="dark"] .mensaje-item.propio .mensaje-burbuja {
                background: #3D2A5B !important;
                background-color: #3D2A5B !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        }

        :root[data-theme="dark"] .language-option.active {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
        }
        
        @media (max-width: 480px) {
            .login-card {
                padding: 24px;
            }
            
            .login-header h1,
            .login-main-title {
                font-size: 24px;
            }
            
            .login-subtitle {
                font-size: 16px;
            }
            
            .login-logo {
                max-width: 100px;
                max-height: 100px;
                width: auto;
                height: auto;
                border-radius: 8px;
                background: white;
                padding: 4px;
            }
            
            /* Responsive para navbar logo en móvil */
            .navbar-logo img {
                width: 32px;
                height: 32px;
                max-width: 32px;
                max-height: 32px;
            }
            
            .navbar-logo span {
                font-size: 1.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .hamburger-menu {
                display: flex;
            }
            
            .navbar-menu {
                display: none;
            }
            
            .navbar-right {
                gap: 10px;
            }
            
            .user-profile span,
            .logout-btn span {
                display: none;
            }
            
            .perfil-view {
                margin-top: 55px;
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .conversaciones-header,
            .contactos-header {
                padding: 3px 10px;
            }
            
            .perfil-view {
                margin-top: 52px;
                padding: 15px;
                border-radius: 15px;
            }
            
            .conversaciones-header h1 {
                color: #ffffff !important;
                font-weight: 700 !important;
                font-size: 1rem !important;
                line-height: 1.2 !important;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
            }
            
            /* Mejorar contraste de textos en móvil */
            .user-info-navbar span,
            #userName {
                color: #ffffff !important;
                font-weight: 600 !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            }
            
            .mobile-menu-item span {
                color: #ffffff !important;
                font-weight: 500 !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
            }
            
            .user-dropdown-header .user-name,
            .user-dropdown-item span {
                color: #ffffff !important;
                font-weight: 700 !important;
                font-size: 1rem !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .user-dropdown-item {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            .user-dropdown-item i {
                color: #ffffff !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
                font-size: 1.2rem !important;
            }
            
            .user-dropdown {
                background: rgba(30, 50, 70, 0.98) !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
            }
        }
        
        @media (min-width: 769px) {
            .mobile-menu {
                display: none !important;
            }
        }

        /* ===== REGLA FINAL ABSOLUTA: ELIMINAR TODOS LOS AZULES EN DARK MODE ===== */
        /* Forzar que todos los iconos, emojis, y elementos de UI sean gris claro, NUNCA azul */
        :root[data-theme="dark"] span[role="img"],
        :root[data-theme="dark"] .emoji-inline,
        :root[data-theme="dark"] button span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-emoji-picker span,
        :root[data-theme="dark"] span[role="img"],
        :root[data-theme="dark"] .emoji-inline,
        :root[data-theme="dark"] button span,
        :root[data-theme="dark"] .btn-adjuntar-archivo span,
        :root[data-theme="dark"] .btn-enviar-mensaje span,
        :root[data-theme="dark"] .btn-emoji-picker span {
            filter: grayscale(0%) brightness(1) !important;
            color: #B0B0B0 !important;
        }

        /* Asegurar que los iconos de emoji (😊, 📎, 🗑️, etc.) no tengan azul */
        :root[data-theme="dark"] .btn-emoji-picker::before,
        :root[data-theme="dark"] .btn-adjuntar-archivo::before,
        :root[data-theme="dark"] .btn-enviar-mensaje::before,
        :root[data-theme="dark"] .btn-emoji-picker::before,
        :root[data-theme="dark"] .btn-adjuntar-archivo::before,
        :root[data-theme="dark"] .btn-enviar-mensaje::before {
            color: #B0B0B0 !important;
        }

/* ================================
   AUTH PRIMARY BUTTON — Variables tema Argentina
   Usa --color-primary / --color-secondary (celeste Argentina).
================================ */

.auth-primary-button {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.auth-primary-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.auth-primary-button:active {
  transform: translateY(0);
}

.auth-primary-button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.auth-primary-button:disabled,
.auth-primary-button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Blindaje: ninguna regla posterior puede pisar el gradiente del botón primario. */
button.auth-primary-button,
.auth-shell button.auth-primary-button,
.home-public-nav button.auth-primary-button {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  ) !important;
  color: #ffffff !important;
}

/* Google Sign-In: iframe invisible no debe afectar scrollHeight del documento. */
iframe[src*="accounts.google.com"],
iframe[src*="gsi"],
iframe[src*="credential"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Contenedor estable del botón Google: evita colapso visual. */
.google-wrapper-stable {
  width: 100%;
  min-height: 48px;
  display: block; /* forzar block */
}

.google-wrapper-stable > div {
  width: 100%;
  display: block; /* evitar flex directo */
}

/* Evitar flex en wrappers Google (sobrescribe LoginView.css): cálculo 0px colapsa el botón. */
.register-google-wrapper,
.login-google-wrapper {
  display: block;
}

/* GoogleLoginBlock: wrapper con tamaño estable para evitar colapso 0x0 del iframe */
.google-login-wrapper {
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.google-login-inner {
  width: 300px;
  min-height: 40px;
}

/* Fallback visible si falta VITE_GOOGLE_CLIENT_ID en el build (GIS no puede inicializar) */
.google-login-fallback-btn {
  width: 280px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #dadce0);
  background: #fff;
  color: #3c4043;
  font-size: 14px;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.9;
  box-sizing: border-box;
}

/* Permitir dimensiones al iframe del botón (override regla global que fuerza 0x0) */
.google-login-inner iframe {
  position: relative !important;
  width: 300px !important;
  height: 40px !important;
  min-width: 300px !important;
  min-height: 40px !important;
  top: auto !important;
  left: auto !important;
  border: 0 !important;
  overflow: visible !important;
}
/* Sin animaciones ni efectos de notificación por mensaje (NO_SOUND / no UI pulse). */