/**
 * Vixii — refinamientos visuales modernos para la app principal.
 * Se carga después de style.css y modern-tokens.css.
 */

/* —— Base —— */
body {
    font-family: var(--modern-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--gray-light);
}

.app-container {
    box-shadow: var(--modern-shadow-lg);
}

/* —— Sidebar izquierda —— */
.sidebar-left {
    border-right-color: var(--modern-border);
    box-shadow: var(--modern-shadow-xs);
}

.sidebar-header {
    background: var(--modern-surface-elevated);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--modern-border);
}

.tab-btn {
    border-radius: var(--modern-radius-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background var(--modern-transition), color var(--modern-transition), box-shadow var(--modern-transition), transform 0.12s ease;
}

.tab-btn.active {
    box-shadow: var(--modern-shadow-primary);
}

.tab-btn:hover:not(.active) {
    transform: translateY(-1px);
}

.filter-btn,
.filtros-btn {
    border-radius: var(--modern-radius-full);
    border-color: var(--modern-border);
    font-weight: 500;
    transition: all var(--modern-transition);
}

.filter-btn:hover,
.filtros-btn:hover {
    border-color: var(--modern-border-accent);
    box-shadow: var(--modern-shadow-xs);
}

.advanced-filters-panel {
    border-radius: var(--modern-radius-lg);
    border-color: var(--modern-border-accent);
    box-shadow: var(--modern-shadow-md);
}

.chat-item {
    border-bottom-color: transparent;
    margin: 0px;
    border-radius: 0px;
    transition: background var(--modern-transition), box-shadow var(--modern-transition);
}

.chat-item:hover {
    background-color: var(--pink-light);
}

.chat-item.active {
    background-color: var(--pink-light);
    box-shadow: inset 3px 0 0 var(--brown);
}

.chat-avatar {
    box-shadow: var(--modern-shadow-primary);
}

.sidebar-footer {
    background: var(--modern-surface-elevated);
    backdrop-filter: blur(8px);
    border-top-color: var(--modern-border);
}

.search-container input,
.sidebar-search-row input {
    border-radius: var(--modern-radius-full) !important;
    border-color: var(--modern-border) !important;
    transition: border-color var(--modern-transition), box-shadow var(--modern-transition);
}

.search-container input:focus,
.sidebar-search-row input:focus {
    border-color: var(--brown) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brown) 18%, transparent) !important;
}

/* —— Área de chat —— */
.chat-area {
    background: linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--cream) 70%, var(--pink-light)) 100%);
}

.chat-header-bar {
    background: var(--modern-surface-elevated);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--modern-border);
    box-shadow: var(--modern-shadow-xs);
}

.contact-avatar {
    box-shadow: var(--modern-shadow-primary);
}

.messages-container {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F26A4F' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.message-bubble {
    border-radius: var(--modern-radius-lg);
    box-shadow: var(--modern-shadow-xs);
}

.message.sent .message-bubble {
    background: linear-gradient(135deg, var(--pink-light) 0%, color-mix(in srgb, var(--pink-light) 80%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--brown) 12%, transparent);
}

.message.received .message-bubble {
    border: 1px solid var(--modern-border);
    box-shadow: var(--modern-shadow-sm);
}

.message--destacado .message-bubble {
    border-color: color-mix(in srgb, var(--brown) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brown) 15%, transparent), var(--modern-shadow-sm);
}

.chat-pinned-bar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pink-light) 60%, var(--white)) 0%, var(--white) 100%);
    border-bottom-color: var(--modern-border-accent);
}

.chat-pinned-chip {
    border-radius: var(--modern-radius-md);
    border-color: var(--modern-border-accent);
    box-shadow: var(--modern-shadow-xs);
}

.chat-input-area {
    background: var(--modern-surface-elevated);
    backdrop-filter: blur(12px);
}

.message-input {
    border-radius: var(--modern-radius-xl);
    border-color: var(--modern-border);
    transition: border-color var(--modern-transition), box-shadow var(--modern-transition);
}

.message-input:focus {
    border-color: var(--brown);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brown) 16%, transparent);
}

.send-btn {
    box-shadow: var(--modern-shadow-primary);
    transition: transform 0.12s ease, filter var(--modern-transition), box-shadow var(--modern-transition);
}

.send-btn:hover {
    transform: scale(1.04);
}

/* —— Sidebar derecha —— */
.sidebar-right {
    border-left-color: var(--modern-border);
    box-shadow: var(--modern-shadow-md);
}

.sidebar-right-header {
    background: var(--modern-surface-elevated);
    backdrop-filter: blur(8px);
    border-bottom-color: var(--modern-border);
}

.sidebar-right .admin-input {
    border-radius: var(--modern-radius-md);
    border-color: var(--modern-border);
    transition: border-color var(--modern-transition), box-shadow var(--modern-transition);
}

.sidebar-right .admin-input:focus {
    border-color: var(--brown);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brown) 14%, transparent);
}

.sidebar-right .admin-btn {
    border-radius: var(--modern-radius-md);
    font-weight: 600;
    transition: all var(--modern-transition);
}

.sidebar-right .admin-btn-primary {
    box-shadow: var(--modern-shadow-primary);
}

/* —— Chips, tags, menús —— */
.tag-chip,
.sidebar-filter-chip {
    border-radius: var(--modern-radius-full);
    font-weight: 500;
    transition: all var(--modern-transition);
}

.tag-chip.active,
.tag-chip:hover {
    box-shadow: var(--modern-shadow-primary);
}

.chat-context-menu,
.message-reaction-menu {
    border-radius: var(--modern-radius-md);
    border-color: var(--modern-border);
    box-shadow: var(--modern-shadow-lg);
    overflow: hidden;
}

.chat-context-item {
    transition: background var(--modern-transition);
}

/* —— Empty state —— */
.empty-state-icon {
    opacity: 0.65;
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--brown) 25%, transparent));
}

.empty-state h3 {
    letter-spacing: -0.02em;
}

/* —— Login —— */
.login-body {
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in srgb, var(--brown) 18%, transparent), transparent 70%),
        radial-gradient(ellipse 70% 50% at 90% 90%, color-mix(in srgb, var(--pink-light) 80%, transparent), transparent 65%),
        linear-gradient(160deg, var(--cream) 0%, var(--gray-light) 50%, var(--pink-light) 100%);
}

.login-card {
    border-radius: var(--modern-radius-xl);
    border-color: var(--modern-border-accent);
    box-shadow: var(--modern-shadow-lg);
}

.login-brand-icon {
    display: none;
}

.login-brand .vixii-logo--login {
    display: block;
}

.login-input {
    border-radius: var(--modern-radius-md);
}

.login-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brown) 16%, transparent);
}

.login-submit {
    border-radius: var(--modern-radius-md);
    box-shadow: var(--modern-shadow-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-submit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(255, 177, 102, 0.38);
}

/* —— Toasts —— */
.alert-toast {
    border-radius: var(--modern-radius-md);
    box-shadow: var(--modern-shadow-lg);
    border-color: var(--modern-border);
}

/* —— Scrollbars —— */
.chat-list::-webkit-scrollbar-thumb,
.messages-container::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--gray-dark) 35%, transparent);
    border-radius: var(--modern-radius-full);
}

.chat-list::-webkit-scrollbar-thumb:hover,
.messages-container::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--gray-dark) 55%, transparent);
}

/* —— Focus accesible —— */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brown);
    outline-offset: 2px;
}