:root {
    --bg: #f5f7ff;
    --bg-soft: #eef2ff;
    --panel: #ffffff;
    --panel-border: #e1e8ff;
    --text: #1f2a44;
    --text-soft: #64708b;

    --primary: #3156ff;
    --primary-strong: #233ed6;
    --secondary: #0ea5e9;

    --success: #0f9f6e;
    --danger: #df3f5f;
    --warning: #c98a14;

    --shadow-sm: 0 8px 20px rgba(26, 50, 112, 0.08);
    --shadow-md: 0 18px 40px rgba(26, 50, 112, 0.14);
    --shadow-lg: 0 24px 70px rgba(26, 50, 112, 0.18);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --transition: 0.22s ease;
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Nunito Sans", "Trebuchet MS", sans-serif;
    color: var(--text);
    background: var(--bg);
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body.app-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 20%, #dbe6ff 0%, transparent 30%),
        radial-gradient(circle at 85% 10%, #d7f3ff 0%, transparent 28%),
        linear-gradient(180deg, #f7f9ff 0%, #f1f5ff 45%, #eef2ff 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

.bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

.orb-a {
    width: 220px;
    height: 220px;
    top: 72px;
    left: -70px;
    background: #b9c9ff;
}

.orb-b {
    width: 290px;
    height: 290px;
    top: 220px;
    right: -110px;
    background: #bdefff;
}

.orb-c {
    width: 200px;
    height: 200px;
    bottom: 40px;
    left: 20%;
    background: #d5dcff;
}

.header {
    position: sticky;
    top: 0;
    margin-top: 0;
    padding-top: 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(172, 189, 255, 0.35);
}

.header-container {
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-5);
    padding-top: 0 !important;
    min-height: 68px;
    display: grid;
    grid-template-columns: 170px 1fr auto;
    align-content: center;
    align-items: center;
    gap: var(--space-4);
}

.header-container > * {
    align-self: center;
}

.logo h1 {
    margin: 0;
}

.logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--primary);
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--app-action, var(--primary)),
        var(--app-action-secondary, var(--secondary))
    );
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(var(--app-action-rgb, 49, 86, 255), 0.22);
}

.logo-mark-image {
    width: 34px;
    height: 34px;
    padding: 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

.logo-text {
    display: inline-block;
    line-height: 1;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Las secciones disponibles siempre se acomodan alrededor del centro,
   incluso cuando el administrador deja solo una o pocas opciones. */
.header-container .nav ul {
    justify-content: center;
}

.nav li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav ul::-webkit-scrollbar {
    display: none;
}

.nav {
    min-width: 0;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    color: #445067;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    transition: all var(--transition);
}

.nav a:hover {
    color: var(--primary);
    background: #ecf1ff;
    border-color: #d6e0ff;
}

.nav a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
    box-shadow: 0 10px 24px rgba(49, 86, 255, 0.3);
}

.mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d3ddfa;
    background: #ffffff;
    color: #3450a0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.mobile-sidebar-toggle:hover {
    border-color: #b6c9ff;
    background: #edf3ff;
    color: #2346ad;
}

.mobile-sidebar-overlay,
.mobile-sidebar {
    display: none;
}

.mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(19, 33, 64, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 80;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    background: #ffffff;
    border-right: 1px solid #dce5ff;
    box-shadow: var(--shadow-md);
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 90;
    padding: var(--space-4);
    overflow-y: auto;
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.mobile-sidebar-header strong {
    font-size: 16px;
    color: #2a3f70;
}

.mobile-sidebar-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #d3ddfa;
    background: #ffffff;
    color: #3e5aa4;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mobile-sidebar-search-form {
    margin-bottom: var(--space-4);
}

.mobile-sidebar-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.mobile-sidebar-search-row input[type="search"] {
    width: 100%;
    height: 36px;
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    padding: 0 11px;
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.mobile-sidebar-search-row input[type="search"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.mobile-sidebar-search-submit {
    width: 36px;
    height: 36px;
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #ffffff;
    color: #3450a0;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.mobile-sidebar-search-submit:hover {
    border-color: #b6c9ff;
    background: #edf3ff;
    color: #2346ad;
    transform: translateY(-1px);
}

.mobile-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.mobile-sidebar-nav li {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobile-sidebar-nav a {
    display: block;
    width: min(100%, 230px);
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #3b4e78;
    font-weight: 700;
    text-align: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.mobile-sidebar-nav a:hover {
    color: var(--primary);
    background: #f0f5ff;
    border-color: #d6e0ff;
}

.mobile-sidebar-nav a.active {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
}

body.mobile-sidebar-open {
    overflow: hidden;
}

body.mobile-sidebar-open .mobile-sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.mobile-sidebar-open .mobile-sidebar {
    transform: translateX(0);
}

.mobile-bottom-nav {
    display: none;
}

.header-search-form {
    width: 100%;
    margin: 0;
}

.header-search-form input[type="search"] {
    width: 100%;
    height: 36px;
    border: 1px solid #d3ddfa;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    padding: 0 13px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.header-search-form input[type="search"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-pill {
    padding: 7px 13px;
    border-radius: 999px;
    background: #eef3ff;
    border: 1px solid #d6e0ff;
    color: #3c4f7c;
    font-weight: 700;
    font-size: 13px;
}

.user-pill-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pill-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: 0 0 22px;
}

.user-pill-avatar-img {
    object-fit: cover;
    border: 1px solid #d2ddff;
}

.user-pill-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
}

.user-menu a {
    color: #546283;
    font-weight: 700;
    font-size: 14px;
    transition: color var(--transition);
}

.user-menu a:hover {
    color: var(--primary);
}

.user-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid transparent;
    color: #546283;
    background: transparent;
    transition: all var(--transition);
    text-decoration: none;
    font-size: 16px;
}

.user-action-icon:hover {
    color: var(--primary);
    background: rgba(49, 86, 255, 0.08);
    border-color: rgba(49, 86, 255, 0.18);
}

.notification-link {
    position: relative;
}

.notification-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notif-count {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ef476f;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    font-weight: 800;
}

.notification-drawer {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: #fff;
    border: 1px solid #dce5ff;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.notification-menu.is-open .notification-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.notification-drawer.is-anchored {
    transform: translateY(-10px) scale(0.97);
}

.notification-menu.is-open .notification-drawer.is-anchored {
    transform: translateY(0) scale(1);
}

.notification-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 12px 14px;
    border-bottom: 1px solid #edf2ff;
}

.notification-drawer-header strong {
    font-size: 14px;
    color: #2f3e62;
}

.notification-drawer-counter {
    font-size: 11px;
    font-weight: 700;
    color: #2149d1;
    background: #eaf0ff;
    border: 1px solid #d6e1ff;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}

.notification-drawer-list {
    max-height: min(360px, calc(100vh - 220px));
    overflow: auto;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.notification-drawer-item {
    display: block;
    border: 1px solid #e5ebff;
    border-radius: 12px;
    background: #fbfcff;
    padding: 10px 11px;
    color: #334262;
    transition: border-color var(--transition), background var(--transition);
}

.notification-drawer-item:hover {
    border-color: #c8d6ff;
    background: #f3f7ff;
    color: #334262;
}

.notification-drawer-item.unread {
    border-color: rgba(49, 86, 255, 0.45);
    background: rgba(49, 86, 255, 0.08);
}

.notification-drawer-item-title {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
}

.notification-drawer-item-message {
    display: -webkit-box;
    margin-top: 4px;
    color: #607094;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-drawer-item-date {
    display: block;
    margin-top: 6px;
    color: #7a88a8;
    font-size: 11px;
}

.notification-drawer-empty {
    margin: 0;
    border: 1px dashed #d7e1ff;
    border-radius: 12px;
    background: #f9fbff;
    color: #69789b;
    font-size: 12px;
    padding: 12px;
    text-align: center;
}

.notification-drawer-footer {
    border-top: 1px solid #edf2ff;
    padding: 10px 12px 12px;
    display: flex;
    justify-content: flex-end;
}

.notification-drawer-footer .btn,
.notification-drawer-footer .btn:hover,
.notification-drawer-footer .btn:focus {
    color: #fff;
}

.notification-drawer-footer .btn:hover {
    box-shadow: none;
}

.profile-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.profile-menu-trigger-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.user-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid #d6e0ff;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: all var(--transition);
}

.user-pill-btn:hover {
    color: var(--primary);
    background: #e6eeff;
    border-color: #c2d3ff;
}

.profile-toggle-caret {
    font-size: 11px;
    opacity: 0.8;
}

.profile-drawer {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 180px;
    background: #fff;
    border: 1px solid #dce5ff;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 70;
    overflow: hidden;
}

.profile-menu.is-open .profile-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.profile-drawer a {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #415170;
    border-bottom: 1px solid #edf2ff;
}

.profile-drawer a:last-child {
    border-bottom: 0;
}

.profile-drawer a:hover {
    background: #f2f6ff;
    color: var(--primary);
}

.main-container {
    position: relative;
    z-index: 2;
    max-width: 1220px;
    margin: var(--space-7) auto 0;
    padding: 0 var(--space-5) var(--space-7);
}

.app-page .main-container {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    position: relative;
    z-index: 2;
    margin-top: var(--space-7);
    padding: var(--space-6) var(--space-4);
    border-top: 1px solid rgba(172, 189, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: #6a7794;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.app-page .footer {
    margin-top: auto;
}

.footer p {
    margin: 0;
}

.footer-admin-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--primary);
    transition: color var(--transition);
}

.footer-admin-link:hover {
    color: var(--primary-strong);
}

.admin-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-5);
    align-items: stretch;
    min-height: calc(100vh - 170px);
}

.admin-sidebar {
    position: sticky;
    top: calc(70px + var(--space-4));
    align-self: stretch;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    min-height: calc(100vh - 170px);
}

.admin-sidebar h2 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 18px;
    color: var(--primary);
}

.admin-sidebar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar nav li {
    margin-bottom: var(--space-2);
}

.admin-sidebar nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: #3b4a6b;
    font-weight: 700;
    border: 1px solid transparent;
    transition: all var(--transition);
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
    color: var(--primary);
    background: rgba(49, 86, 255, 0.08);
    border-color: #d6e0ff;
}

.admin-content {
    display: block;
}

.admin-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.admin-home-grid.admin-home-grid-compact {
    margin-top: var(--space-4);
}

.admin-card {
    display: block;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff, #f8faff);
    border: 1px solid #dce4ff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    color: inherit;
}

.admin-card:hover {
    transform: translateY(-2px);
    border-color: #c5d5ff;
    box-shadow: 0 18px 35px rgba(49, 86, 255, 0.12);
}

.admin-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.admin-home-grid p {
    margin: 0;
    color: var(--text-soft);
}

.admin-analytics-section {
    margin-top: var(--space-6);
    scroll-margin-top: 120px;
}

@media (max-width: 980px) {
    .header-container {
        grid-template-columns: 1fr;
    }

    .header-search-form {
        order: 2;
        width: 100%;
    }

    .nav {
        order: 3;
    }

    .user-menu {
        order: 4;
        justify-content: flex-end;
    }

    body.chat-page .chat-search {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    body.chat-page .chat-search-row {
        order: 1;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    body.chat-page .chat-section-selector {
        order: 2;
        margin-top: 0;
    }

    body.chat-page .chat-bubble-hover-controls {
        display: none;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-container {
        padding: 0 var(--space-4) var(--space-6);
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        top: auto;
        margin-bottom: var(--space-5);
    }
}

/* ---------- Surface cards ---------- */
.form-container,
.detail-container,
.calendar-container,
.dashboard-container,
.meetings-container,
.users-container,
.logs-container,
.profile-container,
.forum-container,
.chat-container,
.methodology-container,
.notifications-container,
.search-container,
.section-proximas,
.section-actions,
.section-proyectos,
.profile-section {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-container,
.meetings-container,
.users-container,
.logs-container,
.profile-container,
.forum-container,
.chat-container,
.methodology-container,
.notifications-container,
.search-container,
.calendar-container,
.form-container,
.detail-container {
    padding: var(--space-6);
}

h1,
h2,
h3 {
    margin-top: 0;
    color: #253557;
    letter-spacing: 0.1px;
}

h1 {
    font-size: clamp(26px, 3vw, 33px);
    margin-top: 0;
    margin-bottom: var(--space-5);
}

h2 {
    font-size: clamp(20px, 2.3vw, 25px);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: clamp(17px, 2vw, 21px);
    margin-bottom: var(--space-3);
}

.text-soft {
    color: var(--text-soft);
}

/* ---------- Flash ---------- */
.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-weight: 700;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.25s ease;
}

.flash-success {
    color: #106046;
    background: #dcfce7;
    border-color: #a7f3d0;
}

.flash-error {
    color: #8f1538;
    background: #ffe1ea;
    border-color: #ffc1d2;
}

.flash-warning {
    color: #8a5e10;
    background: #fff3d8;
    border-color: #ffe2a9;
}

.flash-info {
    color: #0f4f66;
    background: #dcf5ff;
    border-color: #b5e8ff;
}

.flash-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 18px;
    font-weight: 800;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    border: 1px solid #d5def8;
    border-radius: 12px;
    padding: 10px 15px;
    background: #fff;
    color: #304062;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}

.btn:hover {
    transform: translateY(-1px);
    border-color: #bcc9ef;
    box-shadow: 0 8px 22px rgba(69, 93, 155, 0.16);
}

.btn-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
}

.btn-primary:hover {
    box-shadow: 0 12px 28px rgba(41, 77, 227, 0.32);
}

.btn-secondary {
    color: #fff;
    background: linear-gradient(120deg, #64748b, #4f5e79);
    border-color: transparent;
}

.btn-small {
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 10px;
}

.btn-danger {
    color: #fff;
    background: linear-gradient(120deg, #ef476f, #d22f55);
    border-color: transparent;
}

.btn-block {
    width: 100%;
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 13px;
    font-weight: 700;
    color: #3b4a6b;
}

.form-group input,
.form-group textarea,
.form-group select,
.search-form input,
.search-form select,
.filter-form input,
.filter-form select {
    width: 100%;
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.search-form input:focus,
.search-form select:focus,
.filter-form input:focus,
.filter-form select:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-soft);
    font-size: 12px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.meeting-schedule-row {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.85fr);
    align-items: start;
}

.form-actions,
.button-group,
.toolbar,
.calendar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.form-actions {
    margin-top: var(--space-5);
}

.meetings-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.meetings-section-header {
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.meetings-section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.meetings-section-header h1 {
    margin: 0;
}

.meetings-section-header p {
    margin: 0;
}

.meetings-section-top-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: nowrap;
}

.meetings-inline-search {
    margin: 0;
    display: block;
    width: clamp(180px, 24vw, 300px);
}

.meetings-inline-search input[type="text"] {
    width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .meetings-section-title-row {
        grid-template-columns: 1fr;
    }

    .meetings-section-top-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .meetings-inline-search {
        width: 100%;
        max-width: none;
    }
}

.meetings-new-btn {
    white-space: nowrap;
}

.meetings-view-toggle,
.task-view-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid #d8e1fb;
    border-radius: 999px;
    background: #f4f7ff;
    width: fit-content;
    margin-inline: auto;
}

.meetings-view-link,
.task-view-btn {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    color: #3b4d79;
    border-radius: 999px;
    padding: 7px 14px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    line-height: 1.2;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.meetings-view-link:hover,
.task-view-btn:hover {
    background: #e7eeff;
    color: #3b4d79;
    box-shadow: none;
    transform: none;
}

.meetings-view-link.is-active,
.task-view-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #3b63ff, #2441c8);
    border-color: #2340be;
    box-shadow: 0 7px 16px rgba(43, 77, 214, 0.22);
}

.meetings-cards-grid {
    --meeting-card-fixed-width: 270px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--meeting-card-fixed-width), var(--meeting-card-fixed-width)));
    gap: var(--space-4);
    align-items: start;
    justify-content: start;
}

.meetings-cards-grid .proxima-reunion-card,
.meetings-cards-grid .proxima-card-inner {
    min-height: 300px;
    overflow: visible;
}

/* Las tarjetas de reuniones muestran una vista compacta y se expanden al abrirse. */
.meetings-cards-grid .proxima-reunion-card:not(.is-details-open),
.meetings-cards-grid .proxima-reunion-card:not(.is-details-open) .proxima-card-inner {
    min-height: 148px;
    height: 148px;
}

.meetings-cards-grid .proxima-reunion-card:not(.is-details-open) .proxima-card-face {
    padding: 14px 16px;
    gap: 8px;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open,
.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-inner {
    min-height: 430px;
    height: 430px;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-face {
    padding: 18px;
    gap: 12px;
    overflow-y: auto;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open,
.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-inner {
    min-height: 430px;
    height: 430px;
}

.meetings-cards-grid .proxima-card-face {
    overflow: visible;
}

.meetings-cards-grid .proxima-card-front {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.meetings-cards-grid .proxima-reunion-title {
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.meetings-cards-grid .proxima-reunion-meta {
    display: none;
    margin-top: 0;
    align-content: start;
}

.meetings-cards-grid .proxima-reunion-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

.meetings-cards-grid .proxima-reunion-meta dt,
.meetings-cards-grid .proxima-reunion-meta dd {
    text-align: left;
}

.meetings-cards-grid .proxima-reunion-meta dd {
    line-height: 1.35;
}

.meetings-scroll-shell {
    position: relative;
    max-height: min(72vh, 920px);
    min-height: 420px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4px 6px 18px 0;
    isolation: isolate;
}

.meetings-scroll-shell-list {
    padding-right: 0;
}

.meetings-table-scroll {
    min-width: 100%;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-reunion-meta {
    display: grid;
}

.meetings-cards-grid .proxima-card-hint {
    margin-top: 0;
}

.meetings-cards-grid .proxima-reunion-title {
    text-align: left;
}

.meetings-card-status {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.meetings-card-back-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.meetings-card-back-actions .btn-small {
    min-height: 38px;
}

.meeting-card {
    border: 1px solid #d9e4ff;
    border-radius: 16px;
    background: #fbfdff;
    padding: 12px;
    display: grid;
    gap: 10px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.meeting-card:hover {
    border-color: #abc0ff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(57, 76, 132, 0.14);
}

.meeting-card.is-context-open {
    border-color: #8ea9ff;
    box-shadow: 0 14px 28px rgba(57, 76, 132, 0.2);
}

.meeting-card-main {
    display: grid;
    gap: 8px;
}

.meeting-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.meeting-card-head h3 {
    margin: 0;
    color: #2d4378;
    font-size: 16px;
}

.meeting-card-main p {
    margin: 0;
    color: #4f638f;
    font-size: 13px;
}

.meeting-card-context-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #d1ddff;
    border-radius: 8px;
    background: #fff;
    color: #415a92;
    cursor: pointer;
    font-weight: 700;
}

.meeting-card-context-btn:hover {
    border-color: #9fb4ff;
    background: #eff4ff;
}

.meeting-card-hint {
    margin: 0;
    border: 1px dashed #d4e1ff;
    border-radius: 10px;
    background: #f7faff;
    color: #5f7099;
    font-size: 12px;
    padding: 6px 8px;
}

.meeting-card-context {
    display: none;
    border-top: 1px solid #e4ebff;
    padding-top: 10px;
    gap: 8px;
}

.meeting-card.is-context-open .meeting-card-context {
    display: grid;
}

.meeting-card-context-head {
    display: grid;
    gap: 2px;
}

.meeting-card-context-head strong {
    font-size: 13px;
    color: #2b4074;
}

.meeting-card-context-head small {
    color: #62749f;
    font-size: 12px;
}

.meeting-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.meeting-card-actions .inline-form {
    margin: 0;
}

.meeting-card-actions .btn-small {
    width: 100%;
    min-width: 0;
}

.search-form,
.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    width: 100%;
}

.search-form-inline {
    display: inline-grid;
}

.list-summary {
    margin-top: 20px;
    color: #666;
}

.user-reset-password-modal {
    display: grid;
    gap: 10px;
}

.user-reset-password-lead {
    font-size: 14px;
    color: #2b4074;
}

.user-reset-password-target {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #d7e2ff;
    border-radius: 999px;
    background: #f7faff;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.user-reset-password-hint {
    font-size: 12px;
}

.is-hidden {
    display: none !important;
}

.section-block-sm {
    margin-bottom: 18px;
}

.section-block-md {
    margin-top: 18px;
    margin-bottom: 18px;
}

.section-note-reset {
    margin: 0;
}

.form-actions-top-sm {
    margin-top: 14px;
}

.checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
    background: linear-gradient(180deg, #f8faff, #f3f6ff);
    border: 1px solid #dde6ff;
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.checkbox-label {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #3f5075;
    background: #fff;
    border: 1px solid #e4ebff;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkbox-label input {
    width: 16px;
    height: 16px;
}

/* ---------- Configuracion ---------- */
.settings-section-title-row {
    margin-bottom: var(--space-2);
}

.settings-section-lead {
    margin: 0 0 var(--space-5);
}

.settings-container .meeting-form {
    display: grid;
    gap: var(--space-4);
}

.settings-container .form-group,
.settings-container .detail-section,
.settings-container .section-block-sm,
.settings-container .section-block-md,
.settings-container .form-actions {
    margin: 0;
}

.settings-container .form-actions-top-sm {
    margin-top: var(--space-4);
}

.settings-container .inline-form {
    margin-left: 0;
}

.user-section-table {
    min-width: 760px;
}

.user-section-table th,
.user-section-table td {
    vertical-align: middle;
}

.user-section-user {
    min-width: 220px;
}

.user-section-user strong,
.user-section-user small {
    display: block;
}

.user-section-user small {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.35;
}

.user-section-cell {
    text-align: center;
}

.user-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: #3b4f7e;
    font-size: 12px;
    font-weight: 800;
}

.user-section-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #3156ff;
}

.ui-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ui-action-btn {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 14px;
    line-height: 1;
    white-space: nowrap;
}

.ui-action-btn .ui-action-icon {
    font-size: 14px;
    line-height: 1;
}

.ui-action-btn-primary {
    box-shadow: 0 10px 22px rgba(49, 86, 255, 0.24);
}

.ui-action-btn-primary:hover {
    box-shadow: 0 14px 28px rgba(49, 86, 255, 0.3);
}

.settings-section-top-actions .ui-action-btn,
.user-form-actions .ui-action-btn {
    min-height: 38px;
}

@media (max-width: 760px) {
    .form-actions.ui-actions-bar {
        width: 100%;
    }

    .form-actions.ui-actions-bar .ui-action-btn,
    .form-actions.ui-actions-bar .inline-form,
    .form-actions.ui-actions-bar .inline-form .ui-action-btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

/* ---------- Dashboard ---------- */
.dashboard-container h1 {
    margin-bottom: var(--space-2);
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.dashboard-kicker {
    display: inline-block;
    color: #3156ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.dashboard-date-card {
    min-width: 150px;
    border: 1px solid #dce4ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f8faff);
    padding: 12px 14px;
    display: grid;
    gap: 3px;
    box-shadow: var(--shadow-sm);
}

.dashboard-date-card span {
    color: #63749f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-date-card strong {
    color: #273963;
    font-size: 20px;
    line-height: 1.1;
}

.dashboard-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.dashboard-work-panel {
    min-width: 0;
    border: 1px solid #dce4ff;
    border-radius: 16px;
    background: #ffffff;
    padding: 14px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.dashboard-work-panel-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-work-panel-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

.dashboard-work-panel-head strong {
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3ff;
    color: #3156ff;
    font-size: 22px;
    line-height: 1;
}

.dashboard-mini-list {
    display: grid;
    gap: 8px;
    align-content: start;
}

.dashboard-mini-item {
    min-width: 0;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    background: #fbfdff;
    color: #263a67;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    text-decoration: none;
}

.dashboard-mini-item:hover {
    border-color: #b9c9ff;
    background: #f4f7ff;
    text-decoration: none;
}

.dashboard-mini-time {
    min-width: 44px;
    border-radius: 999px;
    background: #eef3ff;
    color: #2e4ba3;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 8px;
    text-align: center;
}

.dashboard-mini-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.dashboard-mini-main strong,
.dashboard-mini-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mini-main strong {
    color: #253866;
    font-size: 13px;
}

.dashboard-mini-main small {
    color: #65759e;
    font-size: 12px;
}

.dashboard-empty-note {
    margin: 0;
    color: #65759e;
    font-size: 13px;
    line-height: 1.4;
}

.dashboard-panel-link {
    justify-self: start;
}

.dashboard-pending-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-pending-summary span {
    border: 1px solid #dce4ff;
    border-radius: 999px;
    background: #f6f9ff;
    color: #4f6291;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.dashboard-task-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-task-priority {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 7px 8px;
}

.dashboard-task-due {
    border-radius: 999px;
    background: #eef3ff;
    color: #4b5e8e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 8px;
    white-space: nowrap;
}

.dashboard-task-due.is-today {
    background: #fff3d7;
    color: #7b5700;
}

.dashboard-task-due.is-overdue {
    background: #ffe3ea;
    color: #9d2448;
}

.dashboard-notification-item {
    grid-template-columns: auto minmax(0, 1fr);
}

.dashboard-notification-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c7d2eb;
}

.dashboard-notification-item.is-unread .dashboard-notification-dot {
    background: #3156ff;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce4ff;
    border-radius: var(--radius-md);
    padding: var(--space-5);
    background: linear-gradient(180deg, #ffffff, #f8faff);
    box-shadow: var(--shadow-sm);
}

.stat-card::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(49, 86, 255, 0.08);
}

.stat-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 34px;
    color: var(--primary);
}

.stat-card p {
    margin: 0;
    color: var(--text-soft);
    font-weight: 600;
}

.section-proximas,
.section-actions {
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.section-proximas h2,
.section-actions h2 {
    margin-bottom: var(--space-4);
}

.section-proyectos {
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.dashboard-collapsible-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #243963;
    font-weight: 900;
}

.dashboard-collapsible-section > summary::-webkit-details-marker {
    display: none;
}

.dashboard-collapsible-section > summary::after {
    content: "+";
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd8ff;
    background: #f8fbff;
    color: #3156ff;
    font-size: 18px;
    line-height: 1;
}

.dashboard-collapsible-section[open] > summary {
    margin-bottom: var(--space-4);
}

.dashboard-collapsible-section[open] > summary::after {
    content: "-";
}

.dashboard-collapsible-section > summary span {
    font-size: 20px;
}

.dashboard-collapsible-section > summary small {
    color: #65759e;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-projects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.dashboard-projects-head h2 {
    margin: 0;
}

.dashboard-project-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: var(--space-4);
}

.dashboard-project-mini-card {
    border: 1px solid #dce4ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f7faff);
    padding: 10px 12px;
    display: grid;
    gap: 2px;
}

.dashboard-project-mini-card strong {
    font-size: 22px;
    line-height: 1;
    color: #2a4697;
}

.dashboard-project-mini-card span {
    font-size: 12px;
    color: #5a6b92;
    font-weight: 700;
}

.dashboard-task-progress {
    border: 1px solid #dce4ff;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    margin-bottom: var(--space-4);
}

.dashboard-task-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 8px;
}

.dashboard-task-progress-head h3 {
    margin: 0;
    font-size: 15px;
}

.dashboard-task-progress-head strong {
    color: #2a4697;
    font-size: 15px;
}

.dashboard-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #eaf0ff;
    overflow: hidden;
    margin-bottom: 8px;
}

.dashboard-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3156ff, #2fa6e4);
}

.dashboard-progress-track-small {
    height: 8px;
    margin-bottom: 10px;
}

.dashboard-task-progress p {
    margin: 0;
    font-size: 13px;
}

.dashboard-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-project-card {
    border: 1px solid #dce4ff;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.dashboard-project-card.status-done {
    border-color: #bde7ce;
}

.dashboard-project-card.status-pending {
    border-color: #ffd9a3;
}

.dashboard-project-card.status-started {
    border-color: #ffd6d6;
}

.dashboard-project-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.dashboard-project-card-head h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

.dashboard-project-state {
    font-size: 11px;
    font-weight: 700;
    color: #445784;
    background: #edf2ff;
    border: 1px solid #d6e1ff;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}

.dashboard-project-desc {
    margin: 0;
    color: #5f7099;
    font-size: 13px;
    line-height: 1.35;
}

.dashboard-project-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

.dashboard-project-card-meta span {
    font-size: 12px;
    color: #4c5f8f;
}

.dashboard-container .dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.dashboard-container .dashboard-quick-actions .btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.proximas-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 230px));
    gap: var(--space-4);
    justify-content: center;
}

.proxima-reunion-card {
    position: relative;
    min-height: 300px;
    perspective: 1200px;
    transition: transform 0.16s ease;
}

.proxima-reunion-card.is-context-open {
    z-index: 24;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open {
    z-index: 18;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open,
.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-inner {
    min-height: 430px;
    height: 430px;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-front {
    min-height: 430px;
    z-index: 9;
    box-shadow: 0 20px 42px rgba(45, 66, 128, 0.22);
    border-color: #c7d6ff;
}

.meetings-cards-grid .proxima-reunion-card.is-details-open .proxima-card-hint {
    display: none;
}

.proxima-card-inner {
    position: relative;
    min-height: 300px;
    transform-style: preserve-3d;
    transition: transform 0.34s ease;
}

.proxima-reunion-card.is-context-open .proxima-card-inner {
    transform: rotateY(180deg);
}

.proxima-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border: 1px solid #dbe5ff;
    border-radius: 18px;
    background: #fff;
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.proxima-card-front {
    z-index: 2;
}

.proxima-card-back {
    transform: rotateY(180deg);
}

.proxima-card-back-head strong {
    display: block;
    font-size: 14px;
    color: #2a3e79;
}

.proxima-card-back-head small {
    color: #6375a1;
    font-size: 12px;
}

.proxima-card-back-note {
    margin: 0;
    font-size: 12px;
    color: #5f7099;
}

.proxima-card-hint {
    margin: auto 0 0;
    font-size: 12px;
    color: #5f7099;
    border: 1px dashed #d4e1ff;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 10px;
}

.proxima-reunion-card:hover .proxima-card-front {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.14);
}

/* El resumen del escritorio usa el mismo lenguaje compacto del listado de reuniones. */
.section-proximas .proximas-cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: 430px;
    overflow-y: auto;
    padding: 2px 6px 6px 2px;
    align-content: start;
}

.section-proximas .proxima-reunion-card,
.section-proximas .proxima-card-inner {
    min-height: 148px;
    height: 148px;
    perspective: none;
}

.section-proximas .proxima-card-inner {
    transform: none !important;
}

.section-proximas .proxima-card-face {
    position: relative;
    inset: auto;
    min-height: 148px;
    height: 148px;
    padding: 14px 48px 14px 16px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.8fr);
    grid-template-rows: auto 1fr;
    gap: 5px 18px;
    overflow: hidden;
}

.section-proximas .proxima-card-front {
    display: grid;
    z-index: 2;
}

.section-proximas .proxima-card-back {
    display: none;
}

.section-proximas .proxima-reunion-title {
    min-height: 0;
    align-self: end;
    text-align: left;
    font-size: 16px;
}

.section-proximas .proxima-reunion-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 12px;
}

.section-proximas .proxima-reunion-row {
    display: flex;
    gap: 5px;
}

.section-proximas .proxima-reunion-row dt {
    font-weight: 700;
}

.section-proximas .proxima-reunion-row dd {
    margin: 0;
    color: #53658f;
}

.section-proximas .proxima-card-hint {
    display: none;
}

.section-proximas .content-card-menu-button {
    top: 12px;
    right: 12px;
}

@media (max-width: 680px) {
    .section-proximas .proxima-card-face {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 148px;
    }

    .section-proximas .proxima-reunion-meta {
        grid-column: 1;
    }
}

.proxima-reunion-card.is-context-open:hover .proxima-card-front {
    transform: none;
}

.proxima-reunion-title {
    margin: 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.proxima-reunion-meta {
    margin: 0;
    display: grid;
    gap: 10px;
}

.proxima-reunion-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--space-2);
    align-items: start;
}

.proxima-reunion-meta dt {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: #3d4f79;
}

.proxima-reunion-meta dd {
    margin: 0;
    font-size: 13px;
    color: #526284;
    word-break: break-word;
}

.proxima-reunion-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    width: 100%;
}

.proxima-reunion-actions .inline-form {
    margin: 0;
    width: 100%;
}

.proxima-reunion-actions .btn-small {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    height: auto;
    padding: 0 6px;
    font-size: 11px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* ---------- Inner surfaces ---------- */
.table,
.detail-section,
.calendar-navigation,
.calendar,
.notification-item,
.search-result-list li,
.chat-sidebar,
.chat-main,
.task-history-item {
    box-shadow: var(--shadow-sm);
}

/* ---------- Table ---------- */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #dce4ff;
    border-radius: 14px;
    overflow: hidden;
}

.table thead th {
    background: #f5f8ff;
    color: #304062;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 800;
    padding: 13px 12px;
    border-bottom: 1px solid #e0e8ff;
}

.table td {
    padding: 12px;
    border-bottom: 1px solid #edf1ff;
    color: #2f3f60;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: #f9fbff;
}

.table-compact td,
.table-compact th {
    font-size: 13px;
    padding: 10px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.inline-form {
    display: inline-flex;
    gap: var(--space-2);
    margin-left: var(--space-2);
    vertical-align: middle;
}

.pagination {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pagination .active {
    background: linear-gradient(120deg, var(--primary), var(--secondary));
    color: #fff;
    border-color: transparent;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.badge-planificada { background: #dbe7ff; color: #294bb0; }
.badge-en_progreso { background: #fff1d7; color: #9b6500; }
.badge-aplazada { background: #ffe8c7; color: #a35d02; }
.badge-suspendida { background: #fde1c9; color: #b2491a; }
.badge-completada { background: #dbf8ea; color: #0f8059; }
.badge-cancelada { background: #ffdce5; color: #a62a4a; }
.badge-confirmada { background: #dbf8ea; color: #0f8059; }
.badge-pendiente { background: #fff1d7; color: #9b6500; }
.badge-rechazada { background: #ffdce5; color: #a62a4a; }
.badge-activo { background: #dbf8ea; color: #0f8059; }
.badge-inactivo { background: #e9edf8; color: #5b6584; }

.badge-en_revision { background: #e7ecff; color: #394cb7; }
.badge-bloqueada { background: #ffe2d8; color: #ad4b1f; }

.badge-prio-baja { background: #e8f8f0; color: #0c7a55; }
.badge-prio-media { background: #e8eeff; color: #2f4ab3; }
.badge-prio-alta { background: #fff0d5; color: #a46206; }
.badge-prio-critica { background: #ffdce5; color: #9f2346; }

/* ---------- Detail ---------- */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.detail-content {
    display: grid;
    gap: var(--space-5);
}

.detail-section {
    border: 1px solid #dde5ff;
    border-radius: var(--radius-md);
    padding: var(--space-5);
    background: linear-gradient(180deg, #ffffff, #f9fbff);
}

.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: var(--space-3) var(--space-4);
}

.detail-list dt {
    font-weight: 800;
    color: #394b72;
}

.detail-list dd {
    margin: 0;
    color: #526284;
}

.meeting-detail-container .detail-header h1 {
    margin: 0;
    word-break: break-word;
}

.meeting-detail-actions {
    align-items: center;
}

.meeting-detail-actions .inline-form {
    margin-left: 0;
}

.meeting-attendees-scroll {
    margin-top: var(--space-2);
}

.meeting-attendees-mobile {
    display: none;
}

.meeting-attendees-mobile-list {
    display: grid;
    gap: 10px;
    margin-top: var(--space-2);
}

.meeting-attendee-card {
    border: 1px solid #d6e2ff;
    border-radius: 12px;
    background: #f9fbff;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.meeting-attendee-card.is-mine {
    border-color: #b9d2ff;
    background: #eef5ff;
}

.meeting-attendee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.meeting-attendee-head strong {
    font-size: 14px;
    color: #2f426a;
}

.meeting-attendee-row {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 8px;
    align-items: start;
}

.meeting-attendee-row span:first-child {
    font-weight: 700;
    color: #3a4e77;
    font-size: 12px;
}

.meeting-attendee-row span:last-child {
    color: #4f628a;
    font-size: 12px;
    word-break: break-word;
}

.minuta-content {
    padding: var(--space-4);
    border-radius: 14px;
    border: 1px solid #dde5ff;
    background: #f8faff;
}

.minuta-content pre {
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ---------- Calendar ---------- */
.calendar-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(49, 86, 255, 0.12), rgba(14, 165, 233, 0.12));
    border-radius: var(--radius-md);
}

.calendar-month-heading {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
    padding: 12px 16px;
}

.calendar-navigation-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    padding: 10px 14px;
}

.calendar-navigation-controls .calendar-nav-today {
    justify-content: center;
}

.calendar-navigation-controls .calendar-nav-next {
    justify-content: flex-end;
}

.current-month {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-strong);
    text-align: center;
    white-space: nowrap;
}

.calendar-nav-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-nav-prev {
    justify-content: flex-start;
}

.calendar-nav-next {
    justify-content: flex-end;
}

.calendar-nav-side .btn {
    min-width: 98px;
    justify-content: center;
}

.calendar-today-btn {
    min-width: 64px !important;
}

.calendar {
    border: 1px solid #b3c4ff;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #f4f8ff;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table th {
    text-align: center;
    padding: 14px 12px;
    background: #dbe7ff;
    color: #1f3b7c;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-table td {
    height: 98px;
    border: 1px solid #d7e4ff;
    vertical-align: top;
    padding: 0;
    background: #f7fbff;
}

.calendar-table td.empty {
    background: #edf4ff;
}

.calendar-day-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 12px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.calendar-day-btn:hover {
    background: #dde7ff;
    transform: translateY(-1px);
}

.calendar-day.today .calendar-day-btn {
    background: #fff2b8;
}

.calendar-day.has-meetings .calendar-day-btn,
.calendar-day.has-agenda-items .calendar-day-btn {
    background: #d7e7ff;
}

.day-number {
    font-size: 14px;
    font-weight: 900;
    color: var(--primary-strong);
}

.day-indicator {
    margin-top: 6px;
    color: var(--primary-strong);
    font-size: 20px;
    line-height: 1;
}

.calendar-day-markers {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.calendar-day-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.calendar-day-dot.is-meeting {
    background: #2f67db;
}

.calendar-day-dot.is-meeting-cancelled {
    background: #dc2626;
}

.calendar-day-dot.is-task {
    background: #e7913a;
}

.calendar-day-dot.is-reminder {
    background: #34a06b;
}

.calendar-day-dot.is-google {
    background: #8b5cf6;
}

.calendar-day-total {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #3d5588;
}

.calendar-share-panel {
    border: 1px solid #dce4ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f7faff);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: var(--space-5);
}

.calendar-share-panel h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.calendar-share-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-legend {
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
}

.calendar-legend .user-pill {
    padding: 5px 9px;
    font-size: 11px;
}

.calendar-legend .calendar-day-dot {
    width: 7px;
    height: 7px;
}

.calendar-share-link {
    min-width: min(420px, 100%);
    display: grid;
    gap: 5px;
    color: #4f6291;
    font-size: 12px;
    font-weight: 800;
}

.calendar-share-link input {
    min-height: 36px;
    border: 1px solid #c9d7ff;
    border-radius: 10px;
    padding: 7px 10px;
    color: #263a67;
    background: #fff;
}

.calendar-share-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
    color: var(--text);
}

.calendar-share-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 clamp(16px, 4vw, 44px);
    border-bottom: 1px solid #d8e3ff;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
}

.calendar-share-brand {
    color: #1d3163;
    font-size: 24px;
    font-weight: 900;
    text-decoration: none;
}

.calendar-share-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 40px;
}

.calendar-share-hero {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.calendar-share-hero h1 {
    margin: 0;
    color: #1f315f;
}

.calendar-share-window {
    width: fit-content;
    margin: 8px 0 0;
    border: 1px solid #cbd8ff;
    border-radius: 999px;
    background: #ffffff;
    color: #3156ff;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 800;
}

.calendar-share-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.calendar-share-card,
.calendar-requests-container {
    border: 1px solid #dce4ff;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(49, 69, 107, 0.1);
    padding: 18px;
}

.calendar-share-table .calendar-day-btn {
    display: grid;
    align-content: start;
    gap: 8px;
    text-decoration: none;
}

.calendar-day.has-available-slots .calendar-day-btn {
    background: #e7f6ff;
}

.calendar-day.selected .calendar-day-btn {
    outline: 2px solid #3156ff;
    outline-offset: -2px;
    background: #eaf0ff;
}

.calendar-share-availability {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3156ff;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.calendar-share-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
}

.calendar-share-range-help,
.calendar-share-range-summary {
    margin: 0;
    color: #61739b;
    font-size: 12px;
    line-height: 1.45;
}

.calendar-share-range-summary {
    min-height: 18px;
    color: #3156ff;
    font-weight: 800;
}

.calendar-share-slot {
    min-width: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    text-align: inherit;
}

.calendar-share-slot:focus-visible {
    outline: 3px solid rgba(49, 86, 255, .24);
    outline-offset: 2px;
}

.calendar-share-slot span {
    min-height: 40px;
    border: 1px solid #cbd8ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    color: #27417f;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 800;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.calendar-share-slot:hover span {
    border-color: #9eb5ff;
    background: #eef3ff;
}

.calendar-share-slot.is-range-selected span {
    border-color: #3156ff;
    background: #3156ff;
    color: #fff;
}

.calendar-share-slot.is-range-middle span {
    border-color: #9eb5ff;
    background: #dfe8ff;
    color: #27417f;
}

.calendar-share-request-form [data-calendar-share-submit]:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.calendar-share-request-form {
    display: grid;
    gap: 10px;
}

.calendar-request-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.calendar-request-list {
    display: grid;
    gap: 12px;
}

.calendar-request-card {
    border: 1px solid #dce4ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.calendar-request-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}

.calendar-request-card-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.calendar-request-card-head strong {
    white-space: nowrap;
    border-radius: 999px;
    background: #eef3ff;
    color: #3156ff;
    padding: 8px 10px;
    font-size: 13px;
}

.calendar-request-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.calendar-request-meta div {
    min-width: 0;
}

.calendar-request-meta dt {
    color: #2f4aa0;
    font-size: 12px;
    font-weight: 900;
}

.calendar-request-meta dd {
    margin: 3px 0 0;
    color: #43577f;
    font-size: 13px;
    line-height: 1.4;
}

.calendar-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-hover-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 140;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(177, 198, 255, 0.9);
    border-radius: 12px;
    background: rgba(33, 48, 88, 0.96);
    color: #f6f8ff;
    box-shadow: 0 16px 36px rgba(15, 26, 53, 0.28);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.calendar-hover-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-hover-tooltip span {
    display: block;
}

.calendar-hover-tooltip span + span {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(214, 226, 255, 0.18);
}

.reunion-item {
    border: 1px solid #dee7ff;
    border-radius: 12px;
    background: #f9fbff;
    padding: 12px;
    margin-bottom: 10px;
}

.reunion-item-meta {
    margin-top: 5px;
    color: #5a6a8f;
    font-size: 13px;
}

.calendar-day-status {
    border: 1px solid #d8e6ff;
    border-radius: 12px;
    background: #f7fbff;
    color: #38507c;
    padding: 12px;
    margin-bottom: var(--space-3);
}

.calendar-day-status.is-available {
    border-color: #b8e7cf;
    background: #eefcf4;
    color: #1f6f4e;
}

.calendar-day-note {
    margin: 0 0 var(--space-3);
    color: #5e6d90;
    font-size: 13px;
}

.calendar-day-note.is-bottom-note {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

.calendar-day-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-3);
}

.calendar-day-actions-top {
    justify-content: flex-start;
}

.calendar-modal-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    align-items: center;
    border: 1px solid #d9e5ff;
    border-radius: 12px;
    background: #f7fbff;
    padding: 10px 12px;
    margin-bottom: var(--space-3);
}

.calendar-modal-toolbar-info {
    display: grid;
    gap: 2px;
}

.calendar-modal-toolbar-info strong {
    font-size: 13px;
    color: #304a83;
}

.calendar-modal-toolbar-info small {
    color: #6074a4;
    font-size: 12px;
}

.calendar-meetings-list {
    margin-top: var(--space-2);
    display: grid;
    gap: 10px;
}

.calendar-agenda-section {
    margin-top: var(--space-4);
}

.calendar-agenda-section h3 {
    margin: 0 0 var(--space-2);
    font-size: 14px;
    color: #334f88;
}

.calendar-list-item {
    border: 1px solid #dce6ff;
    border-radius: 14px;
    background: #fbfdff;
    padding: 12px;
    display: grid;
    gap: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.calendar-list-item.is-cancelled {
    border-color: #fecaca;
    background: #fff7f7;
}

.calendar-meeting-status {
    margin: 0;
    color: #4f638f;
    font-size: 13px;
}

.calendar-meeting-status.is-cancelled {
    color: #b91c1c;
    font-weight: 700;
}

.calendar-list-item.is-context-open {
    border-color: #9fb8ff;
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.12);
}

.calendar-list-item-main {
    display: grid;
    gap: 6px;
}

.calendar-list-item-main p {
    margin: 0;
    color: #4f638f;
    font-size: 13px;
}

.calendar-list-item-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.calendar-list-item-head h3 {
    margin: 0;
    color: #2d4378;
    font-size: 15px;
}

.calendar-list-item-head span {
    color: #405687;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d8e3ff;
    border-radius: 999px;
    padding: 3px 9px;
    background: #eef4ff;
}

.calendar-list-item-open {
    width: fit-content;
    border: 1px dashed #c9d8ff;
    border-radius: 999px;
    background: #f7faff;
    color: #3a5290;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
}

.calendar-list-item-open:hover {
    border-color: #97b1ff;
    background: #edf4ff;
    color: #2444a8;
}

.calendar-list-item-context {
    display: none;
    border-top: 1px solid #e6edff;
    padding-top: 10px;
    gap: 8px;
}

.calendar-list-item.is-context-open .calendar-list-item-context {
    display: grid;
}

.calendar-list-item-context-head {
    display: grid;
    gap: 2px;
}

.calendar-list-item-context-head strong {
    font-size: 13px;
    color: #2b4074;
}

.calendar-list-item-context-head small {
    color: #6476a0;
    font-size: 12px;
}

.calendar-list-item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.calendar-list-item-actions .inline-form {
    margin: 0;
}

.calendar-list-item-actions .btn-small {
    width: 100%;
    min-width: 0;
}

.calendar-item-detail p {
    margin: 0 0 8px;
    color: #445a87;
    font-size: 13px;
}

.calendar-recurrence-wrap.is-hidden {
    display: none;
}

.calendar-monthly-row.is-hidden,
#calendar-day-of-month-wrap.is-hidden {
    display: none;
}

.calendar-modal-form {
    margin-top: var(--space-3);
}

.calendar-modal-form .form-actions {
    justify-content: flex-end;
}

.calendar-attendees-list {
    max-height: 220px;
    overflow: auto;
}

.calendar-form-error {
    margin: 0 0 var(--space-3);
    border: 1px solid #f5bcc9;
    border-radius: 12px;
    background: #fff4f7;
    color: #a03a55;
    padding: 10px 12px;
    font-size: 13px;
}

.calendar-form-error.is-hidden {
    display: none;
}

.btn.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Profile ---------- */
.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--space-5);
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #d5def7;
    background: #ffffff;
    color: #375083;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(54, 82, 145, 0.07);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.profile-tab:hover {
    background: #f6f9ff;
    border-color: #c1d1f9;
    color: #2f4677;
    transform: translateY(-1px);
}

.profile-tab.is-active {
    color: #ffffff;
    border-color: #3c6ce0;
    background: linear-gradient(135deg, #4c79e7, #2f5fcf);
    box-shadow: 0 9px 20px rgba(56, 89, 170, 0.22);
}

.profile-tab-panels {
    display: block;
}

.profile-tab-panel {
    display: none;
}

.profile-tab-panel.is-active {
    display: block;
}

.profile-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

.profile-section {
    padding: var(--space-5);
}

.profile-section h2 {
    margin-bottom: var(--space-4);
}

.profile-account-list {
    grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
    gap: 10px 14px;
    align-items: start;
}

.profile-account-list dt {
    color: #3a4d77;
    font-weight: 700;
}

.profile-account-list dd {
    color: #2f3f62;
    word-break: break-word;
}

.profile-recovery-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.profile-recovery-stat {
    border: 1px solid #d9e3ff;
    border-radius: 12px;
    background: #f7f9ff;
    padding: var(--space-3);
}

.profile-recovery-stat span {
    display: block;
    color: var(--text-soft);
    font-size: 12px;
    margin-bottom: 4px;
}

.profile-recovery-stat strong {
    color: #30497f;
    font-size: 16px;
}

.profile-recovery-form {
    margin-bottom: var(--space-4);
}

.profile-recovery-codes {
    border: 1px dashed #c7d7ff;
    border-radius: 14px;
    background: #f9fbff;
    padding: var(--space-4);
}

.profile-recovery-codes h3 {
    margin-bottom: var(--space-2);
    font-size: 15px;
}

.profile-recovery-codes ul {
    margin: var(--space-3) 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.profile-recovery-codes code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.profile-notifications-list {
    display: grid;
    gap: 12px;
    margin-bottom: var(--space-5);
}

.profile-notification-item {
    border: 1px solid #dbe5ff;
    border-radius: 14px;
    padding: 14px;
    background: #fbfdff;
    display: grid;
    gap: 10px;
}

.profile-notification-copy h3 {
    margin: 0 0 6px;
    color: #2f4778;
    font-size: 15px;
}

.profile-notification-copy p {
    margin: 0;
    color: #62739d;
    font-size: 13px;
}

.profile-notification-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-channel-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.profile-channel-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-channel-switch-ui {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #c8d4f4;
    position: relative;
    transition: background-color .2s ease;
}

.profile-channel-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(35, 55, 100, 0.24);
    transition: transform .2s ease;
}

.profile-channel-switch input:checked + .profile-channel-switch-ui {
    background: #3c6ce0;
}

.profile-channel-switch input:checked + .profile-channel-switch-ui::after {
    transform: translateX(18px);
}

.profile-channel-switch-text {
    color: #334b7d;
    font-size: 13px;
    font-weight: 600;
}

.profile-channel-switch.is-locked {
    cursor: not-allowed;
    opacity: 0.75;
}

.profile-notification-note {
    margin: 0;
    color: #6679a7;
    font-size: 12px;
}

.profile-account-divider {
    height: 1px;
    background: #dde6ff;
    margin: 18px 0;
}

/* ---------- Login ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(144, 170, 255, 0.78), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(124, 217, 255, 0.76), transparent 27%),
        linear-gradient(145deg, #eaf0ff 0%, #dce8ff 42%, #d7f0ff 100%);
    background-size: 260% 260%;
    animation: login-bg-drift 8s linear infinite;
    will-change: background-position;
}

.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    opacity: 0.7;
    pointer-events: none;
    will-change: transform;
}

.login-page::before {
    width: 420px;
    height: 420px;
    left: -150px;
    top: -40px;
    background: radial-gradient(circle, rgba(92, 127, 255, 0.5), rgba(92, 127, 255, 0));
    animation: login-orb-left 6.8s ease-in-out infinite;
}

.login-page::after {
    width: 500px;
    height: 500px;
    right: -180px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(35, 177, 236, 0.45), rgba(35, 177, 236, 0));
    animation: login-orb-right 8s ease-in-out infinite;
}

.login-container {
    width: 100%;
    max-width: 364px;
    position: relative;
    z-index: 1;
}

.login-box {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(179, 198, 255, 0.6);
    border-radius: 24px;
    padding: 52px 24px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
}

.login-title {
    margin-bottom: 6px;
    text-align: center;
    color: #2445bf;
    font-size: 30px;
    letter-spacing: 0.2px;
}

.login-brand-mark {
    width: 96px;
    height: 88px;
    margin: 0 auto 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-subtitle {
    margin-bottom: var(--space-5);
    text-align: center;
    color: #4b5c84;
    font-size: 18px;
    font-weight: 700;
}

.login-box h1:not(.login-title) {
    margin-bottom: var(--space-2);
    text-align: center;
    color: #2445bf;
}

.login-box h2:not(.login-subtitle) {
    margin-bottom: var(--space-4);
    text-align: center;
    color: #4b5c84;
    font-size: 18px;
}

.login-social-auth {
    margin-bottom: var(--space-4);
}

.btn-google {
    min-height: 44px;
    border-color: #cfdcfb;
    background: #ffffff;
    color: #223a73;
    box-shadow: 0 8px 18px rgba(64, 93, 167, 0.12);
}

.btn-google:hover {
    border-color: #a8bee9;
    box-shadow: 0 12px 24px rgba(56, 88, 163, 0.2);
}

.btn-google:focus-visible {
    outline: 2px solid #86a3ff;
    outline-offset: 2px;
}

.btn-google svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.login-divider {
    position: relative;
    text-align: center;
    margin: 0 0 var(--space-4);
}

.login-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #d8e3ff;
    transform: translateY(-50%);
}

.login-divider span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b6f9f;
    background: rgba(255, 255, 255, 0.94);
}

.login-email-only-note {
    margin: 0 0 var(--space-4);
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b6f9f;
}

.login-form {
    display: grid;
    gap: var(--space-2);
}

.login-form .form-group {
    margin-bottom: 0;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    height: 44px;
}

.login-form input::placeholder {
    color: #7a8cb8;
}

.login-password-wrap {
    position: relative;
}

.login-password-wrap input[type="password"],
.login-password-wrap input[type="text"] {
    padding-right: 54px;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: transparent;
    color: #5970a6;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.login-password-toggle:hover {
    color: #2749b1;
    background: #eef3ff;
}

.login-password-toggle:focus-visible {
    outline: 2px solid #86a3ff;
    outline-offset: 2px;
}

.login-password-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-password-icon[hidden] {
    display: none !important;
}

.login-remember-wrap {
    margin-top: 2px;
    margin-bottom: 2px;
}

.login-form .login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #4a5e8d;
    cursor: pointer;
    margin: 0;
}

.login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3156ff;
    flex: 0 0 16px;
}

.login-remember span {
    line-height: 1;
}

.login-footer {
    margin-top: var(--space-5);
    border-top: 1px solid #d8e3ff;
    padding-top: var(--space-4);
    font-size: 13px;
    color: #5b6f9f;
    text-align: center;
}

.login-footer p {
    margin: 0;
}

.login-footer a {
    color: #2f4fb4;
    font-weight: 700;
}

.login-footer a:hover {
    text-decoration: underline;
}

@keyframes login-bg-drift {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes login-orb-left {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(120px, 40px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes login-orb-right {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-140px, -55px, 0) scale(1.1); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes login-logo-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* ---------- Modal ---------- */
.app-modal {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 999;
}

.app-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 31, 55, 0.5);
    backdrop-filter: blur(4px);
}

.app-modal-dialog {
    position: relative;
    width: min(680px, calc(100% - 24px));
    margin: min(8vh, 70px) auto;
    background: #fff;
    border: 1px solid #dbe4ff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--transition);
}

.app-modal.is-open .app-modal-dialog {
    transform: translateY(0) scale(1);
}

.app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid #e5ebff;
}

.app-modal-header h3 {
    margin: 0;
    font-size: 20px;
}

.app-modal-close {
    border: 1px solid #d6dffb;
    background: #f4f7ff;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: #445374;
    font-weight: 800;
}

.app-modal-body {
    padding: var(--space-5) var(--space-6);
    max-height: 62vh;
    overflow: auto;
}

.app-modal-footer {
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid #e5ebff;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.force-password-page {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    animation: none;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.force-password-page::before,
.force-password-page::after {
    animation: none;
    transform: none;
}

.force-password-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
}

.force-password-modal {
    opacity: 1;
    visibility: visible;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.force-password-dialog {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100vh - 48px);
    margin: 0;
    border-radius: 24px;
}

.force-password-header {
    padding-bottom: 18px;
}

.force-password-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.force-password-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: transparent;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    font-weight: 900;
    box-shadow: none;
}

.force-password-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: contain;
}

.force-password-kicker {
    margin: 0 0 4px;
    color: #4f6cb6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.force-password-header h1 {
    margin: 0;
    color: #203761;
    font-size: 28px;
    line-height: 1.15;
}

.force-password-body {
    display: grid;
    gap: 18px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.force-password-intro {
    display: grid;
    gap: 12px;
}

.force-password-intro p {
    margin: 0;
    color: #596b8f;
    font-size: 15px;
    line-height: 1.6;
}

.force-password-user-card {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid #dce6ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
}

.force-password-user-card strong {
    color: #243a67;
    font-size: 15px;
}

.force-password-user-card small {
    color: #65769b;
    font-size: 13px;
}

.force-password-guidelines {
    border: 1px solid #dce6ff;
    border-radius: 16px;
    background: #f9fbff;
    padding: 14px 16px;
}

.force-password-guidelines strong {
    display: block;
    color: #2c4275;
    font-size: 14px;
    margin-bottom: 8px;
}

.force-password-guidelines ul {
    margin: 0;
    padding-left: 18px;
    color: #5e6f92;
    font-size: 13px;
    line-height: 1.65;
}

.force-password-form {
    gap: 14px;
}

.force-password-form label {
    display: block;
    margin-bottom: 6px;
    color: #334a79;
    font-size: 13px;
    font-weight: 700;
}

.force-password-actions {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.force-password-actions .btn {
    justify-content: center;
}

.no-data {
    margin: 0;
    border: 1px dashed #c7d5ff;
    border-radius: 12px;
    background: #f9fbff;
    color: #5d6d90;
    padding: 16px;
    text-align: center;
}

tr.inactive {
    opacity: 0.74;
    background: #f8f9fc;
}

tr.status-cancelada td {
    color: #a84a61;
    text-decoration: line-through;
}

tr.status-completada td {
    color: #2e7a61;
}

.my-attendance-row {
    background: rgba(49, 86, 255, 0.05);
}

/* ---------- Foro ---------- */
.forum-toolbar {
    margin-bottom: var(--space-5);
}

.forum-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.forum-header-row h1 {
    margin: 0;
    font-size: 2rem;
}

.forum-section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.forum-section-top-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: nowrap;
}

.forum-inline-search {
    margin: 0;
    display: block;
    width: clamp(210px, 30vw, 360px);
}

.forum-inline-search input[type="text"] {
    width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .forum-section-title-row {
        grid-template-columns: 1fr;
    }

    .forum-section-top-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .forum-inline-search {
        width: 100%;
        max-width: none;
    }
}

.forum-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

.forum-main {
    min-width: 0;
}

.forum-new-topic-btn {
    white-space: nowrap;
}

.forum-topic-cards {
    --forum-card-fixed-width: 270px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--forum-card-fixed-width), var(--forum-card-fixed-width)));
    gap: var(--space-4);
    align-items: start;
    justify-content: start;
}

.forum-topic-card {
    position: relative;
    border: 1px solid #dbe6ff;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 22px rgba(57, 76, 132, 0.08);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 236px;
    min-width: 0;
    overflow: hidden;
    align-self: start;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.forum-topic-card:not(.is-details-open) {
    height: 236px;
}

.forum-topic-card:hover {
    transform: translateY(-2px);
    border-color: #becfff;
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.14);
}

.forum-topic-card:focus-visible {
    outline: 3px solid rgba(49, 86, 255, 0.22);
    outline-offset: 3px;
}

.forum-topic-card.is-details-open {
    border-color: #b8c8ff;
    border-radius: 18px;
    box-shadow: 0 0 0 2px rgba(72, 105, 210, 0.1), 0 14px 28px rgba(57, 76, 132, 0.14);
    z-index: 20;
}

.forum-topic-card.is-context-open {
    border-color: #9fb6ff;
    box-shadow: 0 0 0 2px rgba(72, 105, 210, 0.16), 0 12px 24px rgba(57, 76, 132, 0.14);
}

.forum-topic-row.is-context-open td {
    background: rgba(49, 86, 255, 0.07);
}

.forum-topic-row.is-details-open td {
    background: rgba(49, 86, 255, 0.035);
}

.forum-topic-list-details-row {
    display: none;
}

.forum-topic-list-details-row.is-details-open {
    display: table-row;
}

.forum-topic-list-details-row td {
    padding: 0 12px 12px;
    border-top: 0;
    background: rgba(248, 251, 255, 0.92);
}

.forum-topic-list-details-row.is-details-open .forum-topic-list-details {
    display: grid;
}

.forum-topic-list-details {
    padding: 12px;
    border: 1px solid #dbe6ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.forum-topic-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
}

.forum-topic-head-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.forum-topic-pin,
.forum-topic-pin-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #ffd98a;
    background: #fff8e6;
    color: #a06d03;
    font-size: 12px;
    line-height: 1;
}

.forum-topic-pin-inline {
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin-right: 6px;
    vertical-align: middle;
}

.forum-topic-head h3 {
    margin: 0;
    font-size: 16px;
    color: #2d4276;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forum-topic-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.forum-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4ddfa;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #3550a0;
    background: #eef3ff;
    white-space: nowrap;
}

.forum-priority-baja {
    border-color: #d6e8ff;
    background: #f3f9ff;
    color: #27618b;
}

.forum-priority-media {
    border-color: #d4ddfa;
    background: #eef3ff;
    color: #3550a0;
}

.forum-priority-alta {
    border-color: #ffd7b4;
    background: #fff3e8;
    color: #a75213;
}

.forum-priority-critica {
    border-color: #f3b7c7;
    background: #fff0f5;
    color: #b02852;
}

.forum-topic-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4ddfa;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #586ca0;
    background: #f6f8ff;
    white-space: nowrap;
}

.forum-topic-unread.has-unread {
    border-color: #92b8ff;
    background: #edf4ff;
    color: #1f4dae;
}

.forum-topic-description {
    margin: 0;
    color: #566892;
    font-size: 13px;
    line-height: 1.45;
}

.forum-topic-details {
    display: none;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    cursor: default;
}

.forum-topic-details::before {
    content: none;
}

.forum-topic-card.is-details-open .forum-topic-details {
    display: grid;
}

.forum-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.forum-topic-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7e1ff;
    border-radius: 999px;
    background: #f4f7ff;
    color: #36549f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
}

.forum-topic-meta {
    margin: 0;
    display: grid;
    gap: 7px;
}

.forum-topic-meta > div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.forum-topic-meta dt {
    margin: 0;
    color: #3251ac;
    font-size: 12px;
    font-weight: 700;
}

.forum-topic-meta dd {
    margin: 0;
    color: #334b7a;
    font-size: 13px;
    line-height: 1.35;
}

.forum-topic-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
    align-items: stretch;
}

.forum-topic-card-actions {
    margin-top: auto;
}

.forum-topic-actions .inline-form {
    margin: 0;
    display: block;
}

.forum-topic-actions a,
.forum-topic-actions button,
.forum-topic-actions .inline-form {
    cursor: pointer;
}

.forum-topic-actions .btn-small,
.forum-topic-actions .inline-form .btn-small {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    text-align: center;
}

.forum-topic-actions-list {
    min-width: 220px;
}

.forum-topic-hint {
    margin: 0;
    color: #6a7ea9;
    font-size: 12px;
    font-weight: 600;
}

.form-group .forum-topic-feature-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #445b8e;
    font-weight: 700;
    font-size: 13px;
}

.form-group .forum-topic-feature-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3156ff;
}

.notification-list {
    display: grid;
    gap: var(--space-3);
}

.notification-item {
    border: 1px solid #dce5ff;
    border-radius: 14px;
    background: #fbfcff;
    padding: 14px;
}

.notification-item.unread {
    border-color: rgba(49, 86, 255, 0.45);
    background: rgba(49, 86, 255, 0.06);
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 8px;
}

.notification-header h3 {
    margin: 0;
    font-size: 16px;
}

.notification-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.search-result-list li {
    border: 1px solid #e3eaff;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f9fbff;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    align-items: center;
}

.search-result-list a {
    font-weight: 700;
}

.search-result-list small {
    color: var(--text-soft);
}

.forum-aside {
    min-width: 0;
}

.forum-posts {
    display: grid;
    gap: var(--space-4);
}

.forum-topic-view .detail-section + .detail-section {
    margin-top: var(--space-5);
}

.forum-topic-view .forum-posts {
    gap: var(--space-5);
}

.forum-post {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-4);
    padding: 24px;
    border: 1px solid #e1e8ff;
    border-radius: 28px;
    background: #f8faff;
    box-shadow: 0 10px 24px rgba(108, 127, 186, 0.06);
    align-items: start;
}

.forum-post.mine {
    border-color: rgba(49, 86, 255, 0.35);
    background: rgba(232, 240, 255, 0.98);
}

.forum-post-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    text-align: center;
    padding-right: var(--space-4);
    border-right: 1px solid #e8eef9;
}

.forum-post-side .forum-author-info {
    align-items: center;
}

.forum-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-avatar-img {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.forum-avatar-img img {
    width: 72px;
    height: 72px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.profile-avatar-img,
.avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--panel-border);
    margin-top: var(--space-3);
}

.forum-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.forum-author-info strong {
    font-size: 14px;
}

.forum-author-info span {
    font-size: 13px;
    color: var(--text-soft);
}

.forum-post-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.forum-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
    font-size: 13px;
}

.forum-post-meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.forum-post-option-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #d7e2ff;
    border-radius: 8px;
    background: #ffffff;
    color: #3d5aa8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
    font-size: 13px;
    line-height: 1;
}

.forum-post-option-btn:hover {
    border-color: #b6c8ff;
    background: #edf3ff;
    color: #2e4ea7;
    transform: translateY(-1px);
}

.forum-post-option-btn.is-danger {
    color: #b03a48;
    border-color: #f0ccd3;
    background: #fff8f9;
}

.forum-post-option-btn.is-danger:hover {
    color: #9a2032;
    border-color: #e7b5bf;
    background: #ffeef1;
}

.forum-post-edit-form {
    display: none;
}

.forum-post-box {
    background: #ffffff;
    border: 1px solid #e4ecff;
    border-radius: 28px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left !important;
    align-items: stretch;
    box-shadow: 0 10px 24px rgba(100, 117, 183, 0.06);
}

.forum-post-text {
    display: block;
    width: 100%;
    text-align: left !important;
    justify-content: flex-start;
    align-items: flex-start;
    background: #fbfcff;
    border: 1px solid #eef2ff;
    border-radius: 24px;
    padding: 24px;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.95;
    white-space: pre-wrap;
}

.forum-attachments {
    padding: 18px 20px 20px;
    border: 1px solid #e2e7ff;
    border-radius: 24px;
    background: #fbfcff;
}

.forum-attachments strong {
    display: block;
    margin-bottom: 10px;
    color: #2f4fb4;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.attachment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.attachment-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e9ff;
    border-radius: 12px;
    background: #ffffff;
}

.attachment-list a {
    color: #244dff;
    text-decoration: none;
    font-weight: 600;
}

.attachment-list a:hover {
    text-decoration: underline;
}

.attachment-size {
    color: #6e7a99;
    font-size: 12px;
    white-space: nowrap;
}


/* ---------- Chat ---------- */
.chat-header {
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.chat-section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.chat-header h1 {
    margin: 0;
}

.chat-header .text-soft {
    margin: 0;
}

.chat-section-top-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

.chat-section-top-actions input[type="text"] {
    width: clamp(210px, 28vw, 360px);
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-section-top-actions input[type="text"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.chat-new-chat-btn {
    white-space: nowrap;
}

.chat-mobile-directory-btn,
.chat-mobile-sidebar-head,
.chat-mobile-directory-backdrop {
    display: none;
}

.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-5);
    align-items: start;
}

.chat-sidebar {
    border: 1px solid #dce4ff;
    border-radius: var(--radius-md);
    background: #f9fbff;
    overflow: visible;
}

.chat-search {
    padding: var(--space-3);
    border-bottom: 1px solid #e4eaff;
}

.chat-section-selector {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.chat-section-selector-btn {
    border: 1px solid #d3ddfa;
    border-radius: 10px;
    background: #ffffff;
    color: #3f568d;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.chat-section-selector-btn:hover {
    border-color: #9eb3ff;
    background: #eef4ff;
    color: #2748ab;
    transform: translateY(-1px);
}

.chat-section-selector-btn.is-active {
    color: #ffffff;
    border-color: #2340be;
    background: linear-gradient(135deg, #3b63ff, #2441c8);
    box-shadow: 0 7px 16px rgba(43, 77, 214, 0.22);
}

.chat-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    align-items: center;
}

.chat-archive-toggle {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #4863b8;
    font-weight: 600;
}

.chat-search input {
    width: 100%;
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-search input:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.chat-open-all-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #cfdcff;
    border-radius: 10px;
    background: #ffffff;
    color: #3a4a70;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
}

.chat-open-all-btn:hover {
    border-color: #9fb4ff;
    background: #eff4ff;
    color: var(--primary);
}

.chat-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.chat-users-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e6ecff;
    background: #f4f8ff;
}

.chat-users-header strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4b5f8c;
}

.chat-users {
    max-height: 560px;
    overflow: auto;
    overflow-x: visible;
}

.chat-directory-section.is-hidden {
    display: none;
}

.chat-user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-bottom: 1px solid #e9efff;
}

.chat-user-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 11px 12px;
    min-width: 0;
    transition: background var(--transition);
}

.chat-user-item:hover {
    background: #f1f5ff;
}

.chat-user-row.active .chat-user-item,
.chat-user-item.active {
    background: #e9f0ff;
}

.chat-user-item strong {
    display: block;
}

.chat-user-item small {
    color: var(--text-soft);
}

.chat-user-row.is-astra {
    border-bottom-color: #d7e6ff;
}

.chat-user-item.is-astra {
    background: linear-gradient(95deg, #eef7ff 0%, #f7fbff 100%);
    border-left: 3px solid #37a0ff;
    padding-left: 9px;
}

.chat-user-item.is-astra:hover {
    background: linear-gradient(95deg, #e4f2ff 0%, #eef7ff 100%);
}

.chat-user-row.active .chat-user-item.is-astra,
.chat-user-item.is-astra.active {
    background: linear-gradient(95deg, #ddecff 0%, #eaf4ff 100%);
    border-left-color: #1f89f0;
}

.chat-astra-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid #98cafc;
    background: #e7f4ff;
    color: #1f6fb7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.chat-user-meta {
    text-align: right;
    display: grid;
    gap: 4px;
    justify-items: end;
    flex-shrink: 0;
}

.chat-user-actions {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 8px;
}

.chat-user-actions-toggle {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #5c6f99;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
}

.chat-user-actions-toggle:hover {
    background: #eef3ff;
    border-color: #d8e3ff;
    color: #2f4fb4;
}

.chat-user-actions.is-open .chat-user-actions-toggle {
    background: #eef3ff;
    border-color: #d8e3ff;
}

.chat-user-actions-menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    right: 8px;
    width: 160px;
    border: 1px solid #d7e2ff;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    z-index: 40;
    padding: 6px;
}

.chat-user-actions-menu.is-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 1300;
    min-width: 170px;
}

.chat-user-actions.is-open .chat-user-actions-menu {
    display: block;
}

.chat-user-action-item {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    color: #3f5078;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

.chat-user-action-item:hover {
    background: #f1f5ff;
    color: #2d4cb8;
}

.chat-user-action-form {
    margin: 0;
}

.chat-user-action-item.is-danger {
    color: #b83359;
}

.chat-user-action-item.is-danger:hover {
    background: #fff1f5;
    color: #a3264c;
}

.chat-all-users-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.chat-all-user-item {
    display: grid;
    gap: 3px;
    border: 1px solid #dfe7ff;
    border-radius: 12px;
    background: #f9fbff;
    padding: 10px 12px;
}

.chat-all-user-item:hover {
    border-color: #c8d7ff;
    background: #f2f7ff;
}

.chat-all-user-item small {
    color: var(--text-soft);
}

.chat-contacts-modal,
.chat-settings-modal,
.chat-forward-modal {
    display: grid;
    gap: 12px;
}

.chat-contacts-header,
.chat-settings-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    border: 1px solid #dde7ff;
    border-radius: 12px;
    background: #f6f9ff;
    padding: 10px 12px;
}

.chat-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e9f0ff;
    border: 1px solid #d0dcff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2f4fb4;
    font-size: 17px;
}

.app-modal.chat-confirm-modal .app-modal-dialog {
    width: min(470px, calc(100% - 24px));
}

.app-modal.chat-confirm-modal .app-modal-header {
    padding-bottom: 14px;
}

.chat-confirm-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.chat-confirm-icon {
    width: 42px;
    height: 42px;
    border: 1px solid #cbd8ff;
    border-radius: 14px;
    background: #edf3ff;
    color: #3657bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.chat-confirm-icon.is-danger {
    border-color: #ffd0db;
    background: #fff0f4;
    color: #c62e53;
}

.chat-confirm-content strong {
    display: block;
    color: #26375f;
    font-size: 16px;
    line-height: 1.35;
}

.chat-confirm-content p {
    margin: 6px 0 0;
    color: #647390;
    font-size: 13px;
    line-height: 1.55;
}

.app-modal.chat-confirm-modal .app-modal-footer {
    padding-top: 14px;
}

@media (max-width: 520px) {
    .app-modal.chat-confirm-modal .app-modal-dialog {
        margin: 18vh auto 0;
        border-radius: 18px;
    }

    .app-modal.chat-confirm-modal .app-modal-footer .btn {
        flex: 1;
    }
}

.chat-contacts-header strong,
.chat-settings-header strong {
    display: block;
    color: #2a3e79;
    font-size: 14px;
}

.chat-contacts-header small,
.chat-settings-header small {
    color: #6375a1;
    font-size: 12px;
}

.chat-contacts-list {
    max-height: 360px;
    overflow: auto;
    display: grid;
    gap: 8px;
    padding-right: 2px;
}

.chat-contact-groups {
    gap: 12px;
}

.chat-contact-group {
    display: grid;
    gap: 8px;
}

.chat-contact-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.chat-contact-group-head strong {
    color: #30457d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-contact-group-count,
.chat-contact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #d9e4ff;
    background: #f5f8ff;
    color: #5b6f9f;
    font-size: 11px;
    font-weight: 700;
}

.chat-contact-group-list {
    display: grid;
    gap: 8px;
}

.chat-contact-subgroup {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5ebff;
    border-radius: 14px;
    background: rgba(245, 248, 255, 0.72);
}

.chat-contact-subgroup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-contact-subgroup-head strong {
    color: #5a6f9d;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chat-contact-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfe7ff;
    border-radius: 12px;
    background: #fbfcff;
    padding: 10px 12px;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.chat-contact-row:hover {
    border-color: #c4d4ff;
    background: #f2f7ff;
    transform: translateY(-1px);
}

.chat-contact-row.is-astra {
    border-color: #bcdfff;
    background: linear-gradient(100deg, #eef7ff 0%, #f8fcff 100%);
}

.chat-contact-row.is-astra:hover {
    border-color: #9bceff;
    background: linear-gradient(100deg, #e5f2ff 0%, #f2f8ff 100%);
}

.chat-contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #edf3ff;
    border: 1px solid #d4e0ff;
    color: #3a58bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.chat-contact-icon.is-astra {
    background: #e3f2ff;
    border-color: #bcdfff;
    color: #1e79cb;
}

.chat-contact-main {
    display: grid;
    gap: 2px;
}

.chat-contact-main strong {
    color: #2f4068;
    font-size: 13px;
}

.chat-contact-main small {
    color: #65769e;
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-contact-open {
    color: #4f67ab;
    font-size: 16px;
    line-height: 1;
}

.chat-forward-preview {
    display: grid;
    gap: 5px;
    border: 1px solid #dbe5ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
    padding: 11px 12px;
}

.chat-forward-preview span {
    color: #6a7ca7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-forward-preview strong {
    color: #273d70;
    font-size: 13px;
    line-height: 1.45;
}

.chat-forward-search {
    width: 100%;
    height: 42px;
    border: 1px solid #d5e0ff;
    border-radius: 14px;
    background: #ffffff;
    color: #27395f;
    font-size: 14px;
    padding: 0 13px;
    outline: none;
}

.chat-forward-search:focus {
    border-color: #7fa3ff;
    box-shadow: 0 0 0 3px rgba(47, 89, 238, 0.12);
}

.chat-forward-targets {
    max-height: min(48vh, 420px);
    overflow: auto;
    display: grid;
    gap: 12px;
    padding-right: 2px;
}

.chat-forward-target-section {
    display: grid;
    gap: 8px;
}

.chat-forward-target-section header {
    color: #415686;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-forward-target-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfe7ff;
    border-radius: 14px;
    background: #fbfcff;
    padding: 10px 12px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), opacity var(--transition);
}

.chat-forward-target-row:hover {
    border-color: #bfcfff;
    background: #f2f7ff;
    transform: translateY(-1px);
}

.chat-forward-target-row.is-group {
    background: #f9fbff;
}

.chat-forward-target-row:disabled {
    cursor: wait;
    opacity: 0.68;
    transform: none;
}

.chat-forward-target-row.is-sending {
    border-color: #83a2ff;
    background: #edf4ff;
}

.chat-forward-target-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #d2ddff;
    border-radius: 12px;
    background: #edf3ff;
    color: #3558c5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.chat-forward-target-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.chat-forward-target-copy strong,
.chat-forward-target-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-forward-target-copy strong {
    color: #263a66;
    font-size: 13px;
    font-weight: 900;
}

.chat-forward-target-copy small {
    color: #68789d;
    font-size: 12px;
}

.chat-forward-target-go {
    color: #3157d8;
    font-size: 15px;
    font-weight: 900;
}

.chat-forward-status {
    min-height: 18px;
    margin: 0;
    color: #61729b;
    font-size: 12px;
    font-weight: 700;
}

.chat-settings-grid {
    display: grid;
    gap: 10px;
}

.chat-settings-check {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe5ff;
    border-radius: 10px;
    background: #fbfcff;
    padding: 10px 11px;
    color: #3e5079;
    font-size: 13px;
    font-weight: 600;
}

.chat-settings-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.chat-settings-inline {
    display: grid;
    gap: 6px;
    color: #3e5079;
    font-size: 13px;
    font-weight: 600;
}

.chat-settings-inline input[type="number"] {
    border: 1px solid #d3ddfa;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}

.chat-settings-inline input[type="number"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.chat-settings-inline textarea,
.chat-settings-inline input[type="datetime-local"] {
    border: 1px solid #d3ddfa;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-settings-inline textarea {
    resize: vertical;
    min-height: 92px;
}

.chat-settings-inline textarea:focus,
.chat-settings-inline input[type="datetime-local"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.chat-settings-tools {
    display: flex;
    justify-content: flex-end;
}

.chat-main {
    position: relative;
    border: 1px solid #dce4ff;
    border-radius: var(--radius-md);
    background: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 430px) auto auto;
    min-height: 640px;
    overflow: hidden;
}

.chat-drop-overlay {
    position: absolute;
    inset: 58px 12px 88px;
    z-index: 55;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed #7fa0ff;
    border-radius: 18px;
    background: rgba(246, 249, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(49, 86, 255, 0.08), 0 20px 48px rgba(33, 57, 132, 0.18);
    pointer-events: none;
}

.chat-main.is-dragging-files .chat-drop-overlay {
    display: flex;
}

.chat-drop-panel {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: min(360px, calc(100% - 32px));
    padding: 18px 20px;
    border: 1px solid #d8e3ff;
    border-radius: 16px;
    background: #ffffff;
    color: #2e4375;
    text-align: center;
    box-shadow: 0 14px 34px rgba(50, 75, 150, 0.16);
}

.chat-drop-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #c8d8ff;
    background: #eff4ff;
    color: #3156ff;
    font-size: 18px;
}

.chat-drop-panel strong {
    font-size: 15px;
}

.chat-drop-panel small {
    color: #65769d;
    font-size: 12px;
    line-height: 1.35;
}

.chat-peer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid #e4eaff;
    background: #f7faff;
}

.chat-peer-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.chat-peer h3 {
    margin: 0;
}

.chat-peer small {
    color: var(--text-soft);
}

.chat-peer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-peer-context-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #d1ddff;
    border-radius: 10px;
    background: #fff;
    color: #3f5489;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.chat-peer-context-btn:hover {
    border-color: #9fb4ff;
    background: #eff4ff;
    color: #2a4bb2;
}

.chat-expand-btn.is-active {
    border-color: #3156ff;
    background: linear-gradient(135deg, #3156ff, #2441c8);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(49, 86, 255, 0.22);
}

.chat-peer-buzz-btn {
    border-color: #e3d5a2;
    background: linear-gradient(180deg, #fff9e8, #f8ecc5);
    color: #8a6400;
}

.chat-peer-buzz-btn:hover {
    border-color: #dcb84e;
    background: linear-gradient(180deg, #fff4d2, #f5e3ad);
    color: #704f00;
}

body.chat-page.chat-expanded {
    overflow: hidden;
}

body.chat-page.chat-expanded .chat-container {
    position: fixed;
    inset: 8px;
    z-index: 240;
    width: auto;
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 0;
    padding: 18px;
    border-radius: 20px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

body.chat-page.chat-expanded .chat-header {
    margin-bottom: 12px;
}

body.chat-page.chat-expanded .chat-layout {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    align-items: stretch;
}

body.chat-page.chat-expanded .chat-sidebar {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-page.chat-expanded .chat-directory-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.chat-page.chat-expanded .chat-users {
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
}

body.chat-page.chat-expanded .chat-main {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

body.chat-page.chat-expanded .chat-messages-shell {
    height: 100%;
    min-height: 0;
}

body.chat-page.chat-expanded .chat-messages {
    height: 100%;
}

.chat-messages-shell {
    position: relative;
    height: 100%;
    min-height: 0;
}

.chat-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 6;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
}

.chat-top-overlays {
    top: 10px;
}

.chat-overlay-stack {
    display: grid;
    gap: 6px;
    pointer-events: none;
}

.chat-overlay-section {
    pointer-events: none;
}

.chat-overlay-section.is-empty {
    display: none;
}

.chat-scheduled-overlay {
    bottom: 12px;
}

.chat-scheduled-inline {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.chat-scheduled-inline,
#chat-highlighted-overlay {
    display: none !important;
}

.chat-scheduled-inline.is-empty {
    display: none;
}

.chat-scheduled-list {
    display: grid;
    gap: 10px;
}

.chat-scheduled-timeline-label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7a879e;
    font-size: 11px;
    font-weight: 800;
}

.chat-scheduled-timeline-label::before,
.chat-scheduled-timeline-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #d9e1f1;
}

.chat-scheduled-timeline-label span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d8dee8;
    background: rgba(246, 248, 251, 0.96);
    color: #677487;
}

.chat-overlay.is-empty {
    display: none;
}

.chat-overlay-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-overlay-head strong {
    font-size: 12px;
    color: #304a83;
}

.chat-overlay-icon,
.chat-overlay-item-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #eaf1ff;
    border: 1px solid #cfdcff;
    color: #2e4bb0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.chat-overlay-list {
    display: grid;
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    pointer-events: auto;
}

.chat-overlay-row {
    width: 100%;
    display: flex;
    justify-content: start;
}

.chat-overlay-row.mine {
    justify-content: flex-end;
}

.chat-overlay-item-main {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.chat-overlay-item-main strong {
    color: #30457d;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.chat-overlay-item-main small {
    color: #66779f;
    font-size: 11px;
    line-height: 1.3;
}

.chat-overlay-empty {
    margin: 0;
    color: #66779f;
    font-size: 12px;
}

.chat-container {
    --chat-attachment-card-width: 340px;
    --chat-attachment-preview-height: 190px;
    --chat-document-card-width: 300px;
    --chat-document-preview-height: 236px;
    --chat-audio-note-width: 300px;
}

.chat-messages {
    height: 100%;
    padding: 70px var(--space-4) var(--space-4);
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: #9cb1f6 #edf2ff;
    background:
        linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
}

.chat-messages::-webkit-scrollbar {
    width: 11px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #edf2ff;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #9cb1f6;
    border-radius: 999px;
    border: 2px solid #edf2ff;
}

.chat-bubble {
    width: fit-content;
    max-width: min(560px, 72%);
    margin-bottom: calc(var(--space-3) + 4px);
    border: 1px solid #dce5ff;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 8px 18px rgba(57, 76, 132, 0.08);
    position: relative;
}

.chat-bubble.has-reactions {
    margin-bottom: calc(var(--space-3) + 20px);
}

.chat-bubble.mine {
    margin-left: auto;
    border-color: #c2dea0;
    background: #d8efb6;
}

.chat-bubble.chat-bubble-media-card {
    max-width: calc(var(--chat-attachment-card-width, 340px) + 26px);
}

.chat-bubble.chat-bubble-astra:not(.mine) {
    border-color: #b8dcfb;
    background: linear-gradient(140deg, #eef7ff 0%, #f8fcff 100%);
}

.chat-bubble.chat-bubble-astra:not(.mine) header strong {
    color: #1f5f99;
}

.chat-bubble.chat-bubble-system,
.chat-bubble.chat-bubble-system.mine {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 92%;
    margin: 6px auto 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.chat-bubble.chat-bubble-system.chat-bubble-buzz,
.chat-bubble.chat-bubble-system.chat-bubble-buzz.mine {
    max-width: 100%;
}

.chat-system-alert-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 28px);
    margin: 0 auto;
    padding: 7px 12px;
    border-radius: 14px;
    border: 1px solid rgba(172, 192, 215, 0.18);
    background: rgba(11, 21, 33, 0.44);
    color: #d6e4f3;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    backdrop-filter: blur(2px);
}

.chat-system-alert-label.is-buzz-alert {
    max-width: calc(100% - 12px);
    white-space: nowrap;
    overflow-wrap: normal;
}

.chat-bubble header {
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 6px;
}

.chat-bubble small {
    color: var(--text-soft);
}

.chat-bubble header strong,
.chat-bubble header small {
    min-width: 0;
}

.chat-message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-status {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.chat-bubble-status small {
    font-size: 11px;
    font-weight: 700;
}

.chat-bubble-check {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.chat-bubble-status.is-sent small,
.chat-bubble-status.is-sent .chat-bubble-check {
    color: #7b8ab2;
}

.chat-bubble-status.is-delivered small,
.chat-bubble-status.is-delivered .chat-bubble-check {
    color: #536ea8;
}

.chat-bubble-status.is-read small,
.chat-bubble-status.is-read .chat-bubble-check {
    color: #2f4fb4;
}

.chat-send-form {
    position: relative;
    border-top: 1px solid #e4eaff;
    padding: var(--space-4);
    display: grid;
    gap: 10px;
}

.chat-send-main {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    border: 1px solid #d8e3ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f7faff);
    padding: 8px;
    box-shadow: 0 8px 18px rgba(57, 76, 132, 0.08);
}

.chat-message-input-stack {
    min-width: 0;
    display: grid;
    gap: 6px;
    align-self: start;
}

.chat-send-form textarea {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    border: 1px solid #cfdcff;
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.25;
    outline: none;
    resize: none;
    overflow-y: auto;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-send-form textarea:focus {
    border-color: #6f8fff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.15);
}

.chat-send-form textarea::placeholder {
    color: #6d7fa6;
}

.chat-send-submit {
    height: 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-send-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    transform: translateX(1px);
}

.chat-send-paper-plane {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-send-submit.is-voice-mode {
    background: linear-gradient(140deg, #4a67e6, #4b92f0);
}

.chat-send-submit.is-recording {
    background: linear-gradient(140deg, #e44f6d, #d23a5b);
    border-color: #c73354;
    box-shadow: 0 0 0 3px rgba(226, 72, 111, 0.16);
}

.chat-send-submit.is-recording .chat-send-icon {
    transform: none;
}

.chat-send-submit.is-voice-mode .chat-send-icon {
    transform: none;
}

.chat-recording-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #f1c4d0;
    border-radius: 999px;
    background: #fff5f8;
    color: #8f2e49;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.chat-recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e54767;
    box-shadow: 0 0 0 3px rgba(229, 71, 103, 0.18);
}

.chat-recording-cancel {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #e9b4c3;
    background: #ffffff;
    color: #b1415f;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-recording-cancel:hover {
    background: #fff0f4;
    border-color: #df8ea4;
}

.chat-input-icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #c7d6ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f0f5ff);
    color: #3652a9;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.chat-input-icon-btn:hover {
    border-color: #90a9ff;
    background: linear-gradient(180deg, #fdfdff, #e8f0ff);
    color: #2b49ad;
    box-shadow: 0 8px 16px rgba(53, 83, 175, 0.18);
    transform: translateY(-1px);
}

.chat-input-icon-btn:active {
    transform: translateY(0);
}

.chat-input-icon-btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.chat-send-form textarea[readonly] {
    background: #f5f8ff;
    color: #6a7899;
}

.chat-emoji-toggle-icon {
    font-size: 19px;
    line-height: 1;
}

.chat-attach-toggle-icon {
    font-size: 18px;
    line-height: 1;
}

.chat-schedule-toggle-icon {
    font-size: 16px;
    line-height: 1;
}

.chat-emoji-picker {
    position: absolute;
    left: 16px;
    bottom: 72px;
    width: min(360px, calc(100% - 24px));
    border: 1px solid #cfdcff;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 18px 34px rgba(52, 74, 129, 0.24);
    z-index: 11;
    padding: 10px;
    display: grid;
    gap: 8px;
    overflow: hidden;
    animation: chatEmojiDrawerIn 0.16s ease;
}

@keyframes chatEmojiDrawerIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-emoji-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dde7ff;
    border-radius: 10px;
    background: #f4f8ff;
    padding: 6px 8px;
}

.chat-emoji-drawer-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #e9f0ff;
    border: 1px solid #d0dcff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.chat-emoji-drawer-head strong {
    color: #36509c;
    font-size: 13px;
}

.chat-emoji-drawer-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    max-height: min(320px, 46vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #b5c3e0 transparent;
}

.chat-emoji-drawer-grid::-webkit-scrollbar {
    width: 8px;
}

.chat-emoji-drawer-grid::-webkit-scrollbar-thumb {
    background: #b5c3e0;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.chat-emoji-btn {
    border: 1px solid #d2defe;
    border-radius: 8px;
    background: #ffffff;
    height: 34px;
    cursor: pointer;
    font-size: 16px;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.chat-emoji-btn:hover {
    border-color: #9bb2ff;
    background: #ecf2ff;
    transform: translateY(-1px);
}

.chat-send-extras {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.chat-pinned-item,
.chat-highlighted-item,
.chat-scheduled-item {
    border: 1px solid #d6e2ff;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    padding: 7px 10px;
    font-size: 12px;
    color: #3f517d;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(57, 76, 132, 0.12);
    backdrop-filter: blur(4px);
    max-width: min(320px, 100%);
}

.chat-pinned-item {
    border-color: #ccd9ff;
    background: rgba(241, 246, 255, 0.96);
    cursor: pointer;
}

.chat-highlighted-item {
    border-color: #ffe1a8;
    background: rgba(255, 250, 238, 0.97);
    cursor: pointer;
}

.chat-highlighted-overlay .chat-overlay-item-icon {
    background: #fff4d4;
    border-color: #f6d48a;
    color: #d18b00;
}

.chat-scheduled-item {
    border-color: #cfd7e2;
    background: linear-gradient(180deg, #eef2f6 0%, #e3e8ee 100%);
    cursor: pointer;
    align-items: flex-start;
    justify-content: stretch;
    gap: 10px;
    width: min(420px, 78%);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: 0 10px 20px rgba(70, 82, 107, 0.12);
}

.chat-scheduled-item .chat-overlay-item-main,
.chat-scheduled-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-scheduled-item-body {
    display: grid;
    gap: 6px;
}

.chat-scheduled-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-scheduled-item-head strong {
    color: #596272;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.chat-scheduled-item-head small {
    color: #6f7a8b;
    font-size: 11px;
    font-weight: 700;
}

.chat-scheduled-item-text {
    color: #32435f;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.chat-overlay-row.mine .chat-scheduled-item {
    margin-left: auto;
}

.chat-scheduled-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #c8d0de;
    background: rgba(239, 242, 246, 0.96);
    color: #5f6a7d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.chat-bubble-scheduled {
    background: linear-gradient(180deg, #eef1f5 0%, #e2e7ed 100%);
    border-color: #c9d1db;
}

.chat-bubble.mine.chat-bubble-scheduled {
    background: linear-gradient(180deg, #e8edf3 0%, #dce3eb 100%);
    border-color: #c1cad6;
}

.chat-message-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #d6def0;
    background: rgba(246, 248, 252, 0.96);
    color: #596a88;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.chat-message-flag-pinned {
    border-color: #c8d7ff;
    background: rgba(239, 245, 255, 0.98);
    color: #3c58b5;
}

.chat-message-flag-highlighted {
    border-color: #f1d28d;
    background: rgba(255, 246, 222, 0.98);
    color: #b77a00;
}

.chat-bubble-pinned {
    border-color: #bfd2ff;
}

.chat-bubble-highlighted {
    border-color: #f0d59b;
}

.chat-bubble.mine.chat-bubble-highlighted {
    border-color: #e2c26c;
}

.chat-pinned-item:focus-visible,
.chat-highlighted-item:focus-visible,
.chat-scheduled-item:focus-visible {
    outline: 2px solid #86a3ff;
    outline-offset: 1px;
}

.chat-bubble-focus {
    border-color: #7d98f8 !important;
    box-shadow: 0 0 0 4px rgba(74, 107, 232, 0.2), 0 10px 22px rgba(49, 77, 166, 0.22) !important;
    animation: chatBubbleFocusIn 0.35s ease;
}

@keyframes chatBubbleFocusIn {
    from {
        transform: translateY(-2px) scale(0.99);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

.chat-attach-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.chat-send-extras input[type="datetime-local"] {
    width: min(220px, 100%);
}

.chat-attach-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.chat-attach-inline.is-empty {
    display: none;
}

.chat-attach-chip {
    max-width: 100%;
    border: 1px solid #ccdbff;
    border-radius: 999px;
    background: #f2f6ff;
    color: #3652a9;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-attach-chip-icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid #bcd0ff;
    background: #e5edff;
    color: #2f4fb4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex: 0 0 auto;
}

.chat-attach-chip-text {
    min-width: 0;
    max-width: min(300px, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-chip-remove {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(47, 79, 180, 0.12);
    color: #2f4fb4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--transition), color var(--transition);
}

.chat-attach-chip-remove:hover {
    background: rgba(47, 79, 180, 0.2);
    color: #1f3a8a;
}

.chat-attach-chip-remove:focus-visible {
    outline: 2px solid #86a3ff;
    outline-offset: 1px;
}

.chat-send-extras input[type="datetime-local"] {
    border: 1px solid #cfdcff;
    border-radius: 10px;
    background: #ffffff;
    color: #4a5678;
    padding: 9px 10px;
    font-size: 12px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-send-extras input[type="datetime-local"]:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.chat-scheduled-cancel {
    margin-left: 2px;
    border: 1px solid #edbecd;
    border-radius: 999px;
    background: #fff4f7;
    color: #9d3853;
    font-size: 11px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.chat-scheduled-cancel:hover {
    background: #ffe8ef;
}

.chat-highlighted-modal {
    display: grid;
    gap: 14px;
}

.chat-highlighted-modal-list {
    display: grid;
    gap: 10px;
    max-height: min(56vh, 460px);
    overflow-y: auto;
    padding-right: 4px;
}

.chat-highlighted-modal-item {
    width: 100%;
    border: 1px solid #f0d49c;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff8eb 0%, #fff3da 100%);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.chat-highlighted-modal-item:hover {
    border-color: #e2b95a;
    box-shadow: 0 12px 24px rgba(181, 128, 18, 0.12);
}

.chat-highlighted-modal-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid #efcf86;
    background: rgba(255, 255, 255, 0.88);
    color: #ca8a04;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-highlighted-modal-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.chat-highlighted-modal-copy strong {
    color: #7a4d05;
    font-size: 13px;
    font-weight: 800;
}

.chat-highlighted-modal-copy small {
    color: #8b6a2f;
    font-size: 12px;
    line-height: 1.4;
}

.chat-highlighted-modal-go {
    color: #b7791f;
    font-size: 20px;
    line-height: 1;
}

.chat-typing-indicator {
    min-height: 22px;
    padding: 0 16px 10px 16px;
    color: #4f6397;
    font-size: 12px;
    font-weight: 600;
}

.chat-reply-preview {
    border-left: 3px solid #9db2ff;
    background: #f2f6ff;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #3f4f78;
}

.chat-reply-composer-preview {
    position: relative;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 34px;
    align-items: center;
    min-width: 0;
    min-height: 54px;
    border: 1px solid #d6e1ff;
    border-radius: 11px;
    background: #f4f7ff;
    overflow: hidden;
}

.chat-reply-composer-preview.is-hidden {
    display: none;
}

.chat-reply-composer-accent {
    align-self: stretch;
    background: #ef476f;
}

.chat-reply-composer-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 10px;
}

.chat-reply-composer-copy strong {
    color: #e13f68;
    font-size: 12px;
}

.chat-reply-composer-copy span {
    overflow: hidden;
    color: #405078;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-cancel {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #405078;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.chat-reply-cancel:hover,
.chat-reply-cancel:focus-visible {
    background: #e5ecff;
    outline: none;
}

.chat-reply-quote {
    display: grid;
    gap: 2px;
    width: 100%;
    min-width: 150px;
    margin: 0 0 7px;
    padding: 7px 9px;
    border: 0;
    border-left: 4px solid #ef476f;
    border-radius: 8px;
    background: rgba(233, 239, 255, 0.82);
    color: #35466f;
    text-align: left;
    cursor: pointer;
}

.chat-bubble.mine .chat-reply-quote {
    background: rgba(48, 117, 78, 0.12);
}

.chat-reply-quote strong,
.chat-reply-quote span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-quote strong {
    color: #df3f67;
    font-size: 12px;
}

.chat-reply-quote span {
    font-size: 12px;
    line-height: 1.35;
}

.chat-reply-quote.is-deleted span {
    font-style: italic;
    opacity: 0.72;
}

.chat-reply-quote:hover,
.chat-reply-quote:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(72, 102, 197, 0.24);
    outline: none;
}

.chat-bubble-attachments {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.chat-attachment-item {
    display: grid;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
}

.chat-attachment-media {
    width: var(--chat-attachment-card-width, 340px);
    max-width: 100%;
    min-width: 0;
    border: 1px solid #d3ddfa;
    border-radius: 14px;
    background: #edf2ff;
    overflow: hidden;
    padding: 6px;
}

.chat-bubble.mine .chat-attachment-media {
    margin-left: auto;
}

.chat-attachment-image-link,
.chat-attachment-video-link {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #d3ddfa;
    border-radius: 14px;
    background: #edf2ff;
    overflow: hidden;
}

.chat-bubble.mine .chat-attachment-image-link {
    margin-left: auto;
}

.chat-attachment-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #e5ecff;
}

.chat-attachment-video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: #dfe9ff;
    border-radius: 10px;
}

.chat-audio-inline {
    display: block;
    width: min(var(--chat-audio-note-width, 300px), 100%);
    max-width: 100%;
    height: 34px;
    background: transparent;
}

.chat-bubble.mine .chat-audio-inline {
    margin-left: auto;
}

.chat-attachment-item.is-audio {
    width: min(var(--chat-audio-note-width, 300px), 100%);
    max-width: 100%;
}

.chat-bubble.mine .chat-attachment-item.is-audio {
    margin-left: auto;
}

.chat-attachment-item.is-audio .chat-audio-inline {
    width: 100%;
}

.chat-bubble.chat-bubble-audio-only,
.chat-bubble.chat-bubble-audio-only.mine {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 4px 0 0;
}

.chat-bubble.chat-bubble-audio-only header {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 4px;
}

.chat-bubble.chat-bubble-audio-only .chat-bubble-attachments {
    margin-top: 0;
}

.chat-voice-note {
    width: min(var(--chat-audio-note-width, 300px), 100%);
    max-width: 100%;
    border: 1px solid #d7e2ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7faff 0%, #edf3ff 100%);
    padding: 7px 9px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.chat-bubble.mine .chat-voice-note {
    margin-left: auto;
}

.chat-voice-note-play {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(160deg, #7369e8, #6c87f0);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(91, 104, 199, 0.25);
    padding: 0;
}

.chat-voice-note-play:hover {
    filter: brightness(1.05);
}

.chat-voice-wave {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(139, 151, 226, 0.28) 0px,
            rgba(139, 151, 226, 0.28) 2px,
            transparent 2px,
            transparent 6px
        ),
        #eef3ff;
    border: 1px solid #d5deff;
    overflow: hidden;
}

.chat-voice-wave-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(111, 123, 214, 0.8) 0px,
            rgba(111, 123, 214, 0.8) 2px,
            transparent 2px,
            transparent 6px
        ),
        rgba(132, 145, 236, 0.2);
    transition: width 0.12s linear;
}

.chat-voice-time {
    min-width: 38px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: #6072a3;
}

.chat-voice-note.is-playing .chat-voice-time {
    color: #43589a;
}

.chat-voice-audio {
    display: none;
}

.chat-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    border: 1px solid #d3ddfa;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    color: #2c4ab0;
    background: #f5f8ff;
}

.chat-attachment-link.is-disabled {
    opacity: 0.62;
    color: #5e6e95;
    background: #eef3ff;
    border-color: #d4deff;
    cursor: not-allowed;
    text-decoration: none;
    pointer-events: none;
}

.chat-attachment-link span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-attachments {
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.chat-attachment-item {
    min-width: 0;
}

.chat-attachment-preview-card,
.chat-file-card {
    width: 100%;
    max-width: 100%;
    border: 1px solid #d2ddfa;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f6ff 100%);
    box-shadow: 0 10px 24px rgba(47, 71, 122, 0.12);
}

.chat-attachment-item.is-image,
.chat-attachment-item.is-video {
    width: var(--chat-attachment-card-width, 340px);
    max-width: 100%;
    min-width: 0;
}

.chat-attachment-item.is-document {
    width: min(var(--chat-document-card-width, 260px), 100%);
    max-width: 100%;
}

.chat-attachment-preview-card {
    display: grid;
    overflow: hidden;
}

.chat-attachment-item.is-image .chat-attachment-preview-card,
.chat-attachment-item.is-video .chat-attachment-preview-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.chat-attachment-item.is-image .chat-attachment-caption,
.chat-attachment-item.is-video .chat-attachment-caption {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.chat-bubble.mine .chat-attachment-preview-card,
.chat-bubble.mine .chat-file-card,
.chat-bubble.mine .chat-voice-note {
    margin-left: auto;
}

.chat-attachment-preview-card .chat-attachment-preview-media {
    position: relative;
    display: block;
    width: 100%;
    height: var(--chat-attachment-preview-height, 190px);
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: #eef3ff;
    padding: 0;
    overflow: hidden;
}

.chat-attachment-image-link,
.chat-attachment-video-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.chat-attachment-image-link:hover,
.chat-attachment-video-link:hover {
    text-decoration: none;
}

.chat-attachment-preview-card .chat-attachment-image {
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    background: #eef3ff;
}

.chat-attachment-preview-card .chat-attachment-video {
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    background: #152033;
    object-fit: cover;
    pointer-events: none;
}

.chat-media-play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(210, 222, 255, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #294aa6;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 10px 14px;
    box-shadow: 0 10px 24px rgba(11, 22, 46, 0.24);
}

.chat-attachment-video-link:hover .chat-media-play-badge {
    border-color: #294de0;
    background: #ffffff;
}

.chat-media-expand-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid rgba(210, 222, 255, 0.86);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #294aa6;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(11, 22, 46, 0.22);
    z-index: 2;
}

.chat-media-expand-btn:hover {
    border-color: #294de0;
    background: #ffffff;
}

.app-modal.chat-media-modal-open .app-modal-dialog {
    width: min(1180px, calc(100% - 24px));
    height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    background: #0e1728;
    border-color: rgba(211, 223, 255, 0.26);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.app-modal.chat-media-modal-open .app-modal-header {
    border-bottom-color: rgba(219, 228, 255, 0.14);
    background: #101a2e;
    color: #f5f8ff;
    padding: 12px 16px;
}

.app-modal.chat-media-modal-open .app-modal-header h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.app-modal.chat-media-modal-open .app-modal-close {
    border-color: rgba(214, 223, 251, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.app-modal.chat-media-modal-open .app-modal-body {
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: #0b1220;
}

.app-modal.chat-media-modal-open .app-modal-footer {
    display: none;
}

.chat-media-modal-viewer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 10px;
    background: #0b1220;
    outline: none;
    overflow: hidden;
}

.chat-media-modal-viewer.is-video-viewer {
    padding: 60px 12px 112px;
}

.chat-media-modal-viewer.is-image-viewer,
.chat-media-modal-viewer.is-video-viewer {
    cursor: zoom-in;
    touch-action: none;
}

.chat-media-modal-viewer.is-image-viewer.is-zoomed,
.chat-media-modal-viewer.is-video-viewer.is-zoomed {
    cursor: grab;
}

.chat-media-modal-viewer.is-image-viewer.is-dragging,
.chat-media-modal-viewer.is-video-viewer.is-dragging {
    cursor: grabbing;
}

.chat-media-modal-tools {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(214, 224, 255, 0.24);
    border-radius: 999px;
    background: rgba(13, 23, 42, 0.72);
    color: #ffffff;
    padding: 6px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.chat-media-modal-tools button {
    min-width: 30px;
    height: 30px;
    border: 1px solid rgba(214, 224, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 0 10px;
}

.chat-media-modal-tools button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.46);
}

.chat-media-modal-tools span {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #dbe6ff;
}

.chat-media-modal-image,
.chat-media-modal-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.chat-media-modal-image {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    background: #eef3fb;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    transition: transform 0.08s ease-out;
}

.chat-media-modal-video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: #000000;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    transition: transform 0.08s ease-out;
}

.chat-media-modal-video:focus-visible {
    outline: 2px solid rgba(219, 231, 255, 0.9);
    outline-offset: -2px;
}

.chat-media-video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(214, 224, 255, 0.24);
    border-radius: 999px;
    background: rgba(13, 23, 42, 0.78);
    color: #ffffff;
    padding: 8px 10px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    cursor: default;
}

.chat-media-video-controls button,
.chat-media-video-controls a,
.chat-media-video-speed-label {
    height: 30px;
    border: 1px solid rgba(214, 224, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 0 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.chat-media-video-controls button,
.chat-media-video-controls a,
.chat-media-video-speed-label select {
    cursor: pointer;
}

.chat-media-video-controls button:hover,
.chat-media-video-controls a:hover,
.chat-media-video-speed-label:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.46);
    text-decoration: none;
}

.chat-media-video-controls button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.chat-media-video-speed-label select {
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    outline: none;
    padding: 0;
}

.chat-media-video-speed-label select option {
    color: #1b2840;
}

.chat-media-video-controls span {
    min-width: 92px;
    color: #dbe6ff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.chat-media-video-controls input[type="range"] {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
    accent-color: #dbe6ff;
    cursor: pointer;
}

.chat-attachment-preview-card .chat-document-preview-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--chat-document-preview-height, 236px);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 1px, transparent 1px 100%),
        #eaf0ff;
    background-size: 22px 22px;
    overflow: hidden;
}

.chat-document-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.chat-document-preview-open {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 1px solid #cfdcff;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #294aa6;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(40, 58, 110, 0.16);
}

.chat-document-preview-open:hover {
    border-color: #294de0;
    background: #ffffff;
    text-decoration: none;
}

.chat-document-preview-fallback {
    padding: 0;
}

.chat-document-preview-card.is-generated-preview .chat-document-preview-media {
    height: 132px;
}

.chat-document-preview-card.is-spreadsheet .chat-document-preview-media {
    background:
        radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.92) 0 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(235, 250, 241, 0.86) 0%, rgba(247, 253, 250, 0.96) 100%),
        #f7fbff;
}

.chat-spreadsheet-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(38, 166, 91, 0.06) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(38, 166, 91, 0.06) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(244, 252, 248, 0.9) 100%);
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: none;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 11px;
    padding: 26px 28px;
    overflow: hidden;
}

.chat-spreadsheet-page .chat-document-page-label {
    background: #e3f7eb;
    color: #147a3d;
}

.chat-spreadsheet-page span:not(.chat-document-page-label) {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #ccefd9;
    width: min(100%, 210px);
}

.chat-spreadsheet-page span:nth-child(3) {
    width: min(86%, 182px);
}

.chat-spreadsheet-page span:nth-child(4) {
    width: min(70%, 150px);
}

.chat-spreadsheet-page span:nth-child(5) {
    width: min(54%, 116px);
}

.chat-document-preview-card.is-compact {
    display: block;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
}

.chat-document-preview-card.is-compact .chat-document-compact-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 12px 14px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.98) 0 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%);
}

.chat-document-compact-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 10px;
}

.chat-document-compact-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.chat-document-compact-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #274174;
    font-size: 13px;
    font-weight: 800;
}

.chat-document-compact-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64759d;
    font-size: 11px;
    font-weight: 700;
}

.chat-document-compact-type {
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #d3ddf7;
    background: rgba(255, 255, 255, 0.96);
    color: #3956a6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-document-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.92) 0 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(245, 248, 255, 0.88) 100%);
    box-shadow: none;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 11px;
    padding: 26px 28px;
}

.chat-document-page-label {
    width: max-content;
    min-width: 54px;
    border-radius: 999px;
    background: #e7edff;
    color: #294aa6;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 8px 10px;
    text-align: center;
}

.chat-document-page span:not(.chat-document-page-label) {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #d9e2fb;
    width: min(100%, 210px);
}

.chat-document-page span:nth-child(3) {
    width: min(86%, 182px);
}

.chat-document-page span:nth-child(4) {
    width: min(70%, 150px);
}

.chat-document-page span:nth-child(5) {
    width: min(54%, 116px);
}

.chat-attachment-caption,
.chat-file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.chat-attachment-caption {
    border-top: 1px solid #e1e8ff;
    background: rgba(255, 255, 255, 0.92);
    padding: 9px 10px;
    min-height: 58px;
}

.chat-file-card {
    color: #273d72;
    padding: 10px;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.chat-file-card:hover {
    border-color: #b8c8f4;
    box-shadow: 0 12px 28px rgba(47, 71, 122, 0.16);
    transform: translateY(-1px);
    text-decoration: none;
}

.chat-file-card.is-disabled {
    opacity: 0.68;
    cursor: not-allowed;
    pointer-events: none;
}

.chat-file-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #c9d8ff;
    border-radius: 11px;
    background: linear-gradient(160deg, #ffffff 0%, #e9f0ff 100%);
    color: #3151aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.chat-attachment-file-main {
    min-width: 0;
    display: grid;
    gap: 2px;
    color: #263f76;
}

.chat-attachment-file-main strong,
.chat-voice-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.chat-attachment-file-main small,
.chat-voice-title small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #65759e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.chat-attachment-download,
.chat-file-action {
    border: 1px solid #cfdcff;
    border-radius: 999px;
    background: #ffffff;
    color: #294aa6;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.chat-attachment-download:hover,
.chat-file-card:hover .chat-file-action {
    border-color: #294de0;
    background: #f1f5ff;
    text-decoration: none;
}

.chat-attachment-download.is-disabled,
.chat-file-card.is-disabled .chat-file-action {
    color: #6d7896;
    background: #edf2ff;
}

.chat-voice-note {
    width: min(var(--chat-audio-note-width, 300px), 100%);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 9px 10px;
    border: 1px solid rgba(119, 206, 178, 0.22);
    border-radius: 6px;
    background: #145c4e;
    box-shadow: none;
}

.chat-voice-body,
.chat-voice-title {
    min-width: 0;
    display: grid;
}

.chat-voice-body {
    gap: 4px;
}

.chat-voice-title {
    gap: 2px;
}

.chat-voice-note .chat-voice-title {
    display: none;
}

.chat-voice-wave {
    height: 28px;
    border: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(124, 205, 178, 0.64) 0 3px,
            transparent 3px 7px
    );
    border-radius: 4px;
}

.chat-voice-note .chat-voice-wave-fill {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(180, 244, 223, 0.94) 0 3px,
            transparent 3px 7px
        );
}

.chat-voice-note .chat-voice-note-play {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.26));
    font-size: 15px;
}

.chat-voice-note .chat-voice-note-play:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.26));
    color: #c7f6e7;
}

.chat-voice-note .chat-voice-time {
    min-width: 38px;
    color: #9bd9c7;
    font-size: 12px;
    font-weight: 700;
    align-self: end;
}

.chat-voice-note.is-playing .chat-voice-time {
    color: #c7f6e7;
}

.chat-bubble-reactions {
    display: flex;
    gap: 6px;
    position: absolute;
    bottom: -16px;
    left: 10px;
    z-index: 4;
}

.chat-bubble.mine .chat-bubble-reactions {
    left: auto;
    right: 10px;
}

.chat-reaction-pill {
    border: 1px solid #cfdcff;
    border-radius: 999px;
    background: #ffffff;
    color: #3551a8;
    font-size: 13px;
    padding: 3px 8px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 6px 14px rgba(57, 76, 132, 0.14);
    transition: border-color var(--transition), background var(--transition), transform var(--transition), color var(--transition);
}

.chat-reaction-pill.is-active {
    border-color: #294de0;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
    color: #ffffff;
}

.chat-reaction-pill:hover {
    border-color: #9fb4ff;
    background: #f2f6ff;
    transform: translateY(-1px);
}

.chat-reaction-emoji {
    font-size: 16px;
    line-height: 1;
}

.chat-reaction-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #4760a6;
}

/* Unificacion visual de mensajes (desktop + responsive) */
body.chat-page .chat-messages {
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 82% 4%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #d7e3eb 0%, #cfdde7 100%);
    scrollbar-color: #8ea5bc #c5d3df;
}

body.chat-page .chat-messages::-webkit-scrollbar-track {
    background: #c5d3df;
}

body.chat-page .chat-messages::-webkit-scrollbar-thumb {
    background: #8ea5bc;
    border-color: #c5d3df;
}

body.chat-page .chat-bubble {
    width: fit-content;
    max-width: min(540px, 70%);
    border: 1px solid #d7dee6;
    border-radius: 15px 15px 15px 8px;
    background: #fdfefe;
    box-shadow: 0 5px 10px rgba(50, 72, 104, 0.1);
}

body.chat-page .chat-bubble.chat-bubble-media-card {
    max-width: calc(var(--chat-attachment-card-width, 340px) + 26px);
}

body.chat-page .chat-bubble.mine {
    border-color: #c2dea0;
    border-radius: 15px 15px 8px 15px;
    background: #d8efb6;
}

body.chat-page .chat-bubble.chat-bubble-astra:not(.mine) {
    border-color: #b1d6f6;
    background: linear-gradient(140deg, #e7f4ff 0%, #f4fbff 100%);
}

body.chat-page .chat-bubble.chat-bubble-astra:not(.mine) header strong {
    color: #1c638f;
}

body.chat-page .chat-bubble.chat-bubble-audio-only,
body.chat-page .chat-bubble.chat-bubble-audio-only.mine {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 4px 0 0;
}

body.chat-page .chat-bubble.chat-bubble-system,
body.chat-page .chat-bubble.chat-bubble-system.mine {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 6px auto 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.chat-page .chat-bubble.chat-bubble-system.chat-bubble-buzz,
body.chat-page .chat-bubble.chat-bubble-system.chat-bubble-buzz.mine {
    max-width: 100%;
}

body.chat-page .chat-system-alert-label {
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    font-size: 13px;
    border-color: rgba(172, 192, 215, 0.16);
    background: rgba(10, 17, 25, 0.4);
}

body.chat-page .chat-system-alert-label.is-buzz-alert {
    max-width: calc(100% - 12px);
    white-space: nowrap;
    overflow-wrap: normal;
}

body.chat-page .chat-bubble header {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 4px;
    gap: 8px;
}

body.chat-page .chat-bubble header strong {
    color: #2f4a6d;
}

body.chat-page .chat-bubble header small {
    color: #69809a;
}

body.chat-page .chat-message-content {
    color: #2a415f;
}

body.chat-page .chat-bubble-reactions {
    bottom: -16px;
    padding: 2px 6px;
    border: 1px solid #d3dde8;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: none;
}

body.chat-page .chat-reaction-pill {
    min-height: 18px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.chat-reaction-pill.is-active .chat-reaction-count {
    color: #ffffff;
}

.chat-bubble-hover-controls {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.chat-bubble:hover .chat-bubble-hover-controls,
.chat-bubble:focus-within .chat-bubble-hover-controls,
.chat-bubble.is-controls-open .chat-bubble-hover-controls {
    opacity: 1;
    pointer-events: auto;
}

.chat-bubble-react-btn,
.chat-bubble-menu-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #cfdcff;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #3f568d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(57, 76, 132, 0.14);
    transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.chat-bubble-react-btn {
    font-size: 13px;
}

.chat-bubble-react-btn:hover,
.chat-bubble-menu-btn:hover {
    background: #eef4ff;
    border-color: #9eb3ff;
    color: #2748ab;
    transform: translateY(-1px);
}

.chat-bubble-react-btn:focus-visible,
.chat-bubble-menu-btn:focus-visible {
    outline: 2px solid #86a3ff;
    outline-offset: 1px;
}

.chat-reaction-menu {
    position: fixed;
    z-index: 1450;
    display: none;
    border: 1px solid #d5e1ff;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(57, 76, 132, 0.2);
    padding: 6px 8px;
}

.chat-reaction-menu.is-open {
    display: block;
}

.chat-reaction-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-reaction-picker-btn {
    min-width: 34px;
    height: 34px;
    border: 1px solid #d5e0ff;
    border-radius: 999px;
    background: #f7faff;
    color: #3551a8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.chat-reaction-picker-btn:hover {
    background: #ecf3ff;
    border-color: #9eb3ff;
    transform: translateY(-1px);
}

.chat-reaction-picker-btn.is-more {
    font-size: 22px;
    font-weight: 700;
    color: #2f4fb4;
    background: #edf3ff;
}

@media (hover: none) and (pointer: coarse) {
    .chat-bubble .chat-bubble-hover-controls {
        opacity: 1;
        pointer-events: auto;
    }
}

.chat-group-reads {
    display: block;
    margin-top: 7px;
    color: #5f6f98;
    font-size: 11px;
}

.chat-context-menu {
    position: fixed;
    z-index: 1400;
    min-width: 210px;
    max-height: calc(100vh - 16px);
    border: 1px solid #d7e2ff;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 26px rgba(57, 76, 132, 0.2);
    padding: 6px;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-context-menu.is-open {
    display: grid;
    gap: 4px;
}

.chat-context-menu.is-message-menu {
    min-width: 228px;
    width: 228px;
    max-width: min(280px, calc(100vw - 24px));
    gap: 2px;
    padding: 6px;
    border-color: #d5e1ff;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(57, 76, 132, 0.2);
}

.chat-context-item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3f5078;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}

.chat-context-item:hover {
    background: #f1f5ff;
    color: #2d4cb8;
}

.chat-context-item.is-danger {
    color: #b83359;
}

.chat-context-item.is-danger:hover {
    background: #fff1f5;
    color: #a3264c;
}

.chat-context-item.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-context-separator {
    height: 1px;
    margin: 3px 2px;
    background: #e7eeff;
}

.chat-message-menu-icon {
    width: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    opacity: 0.9;
}

.chat-context-menu.is-message-menu .chat-context-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    color: #334b7a;
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 600;
}

.chat-context-menu.is-message-menu .chat-context-item:hover {
    background: #eef4ff;
    color: #2748ab;
}

.chat-context-menu.is-message-menu .chat-context-item.is-danger {
    color: #b83359;
}

.chat-context-menu.is-message-menu .chat-context-item.is-danger:hover {
    background: #fff1f5;
    color: #a3264c;
}

.chat-message-menu-list {
    display: grid;
    gap: 2px;
}

.chat-message-menu-reactions {
    display: flex;
    gap: 8px;
}

.chat-context-reaction-btn {
    border: 1px solid #cbd8ff;
    border-radius: 999px;
    background: #f4f7ff;
    color: #3954a6;
    font-size: 17px;
    line-height: 1;
    min-width: 38px;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
}

.chat-context-reaction-btn:hover {
    border-color: #9eb3ff;
    background: #eaf0ff;
    transform: translateY(-1px);
}

.chat-message-menu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chat-context-item.chat-context-chip {
    display: inline-flex;
    align-items: center;
    width: auto;
    border: 1px solid #cad7fb;
    border-radius: 999px;
    background: #f8faff;
    color: #3551a8;
    text-align: center;
    padding: 7px 12px;
    line-height: 1.2;
}

.chat-context-item.chat-context-chip:hover {
    border-color: #9eb3ff;
    background: #edf3ff;
    color: #2746aa;
}

.chat-context-item.chat-context-chip.is-danger {
    border-color: #eab4c4;
    background: #fff5f8;
    color: #b23757;
}

.chat-context-item.chat-context-chip.is-danger:hover {
    border-color: #e18aa4;
    background: #ffeef3;
    color: #a0284a;
}

.chat-bubble-selected {
    outline: 2px dashed #8eb0ff;
    outline-offset: 2px;
}

.chat-settings-inline select {
    border: 1px solid #d3ddfa;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}

.chat-global-font-sm .chat-bubble,
.chat-global-font-sm .chat-send-form textarea {
    font-size: 12px;
}

.chat-global-font-lg .chat-bubble,
.chat-global-font-lg .chat-send-form textarea {
    font-size: 15px;
}

.chat-template-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
}

.chat-template-item {
    border: 1px solid #dce6ff;
    border-radius: 12px;
    background: #fbfdff;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.chat-template-item p {
    margin: 0;
    color: #53658f;
    font-size: 13px;
    white-space: pre-wrap;
}

.chat-template-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.chat-quick-templates {
    display: grid;
    gap: 4px !important;
    margin: 0 0 4px !important;
    padding: 4px 10px !important;
    border: 1px solid #dbe5ff;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
}

.chat-quick-templates.is-empty {
    display: none;
}

.chat-quick-templates-label {
    color: #5f7098;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.chat-quick-templates-list {
    display: flex;
    gap: 6px !important;
    flex-wrap: wrap;
    align-items: center;
}

.chat-quick-template-chip {
    min-height: 38px !important;
    padding: 9px 16px !important;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: #ffffff;
    color: #3f67d4;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.chat-quick-template-chip:hover {
    border-color: #adc7ff;
    box-shadow: 0 10px 22px rgba(63, 103, 212, 0.12);
    transform: translateY(-1px);
}

.chat-scheduled-modal-list {
    display: grid;
    gap: 10px;
}

.chat-scheduled-modal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.chat-scheduled-modal-open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    border: 1px solid #dfe6ff;
    border-radius: 14px;
    background: #fbfcff;
    padding: 12px;
    text-align: left;
}

.chat-scheduled-modal-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #d7def7;
    background: #f5f7ff;
    color: #5670cc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.chat-scheduled-modal-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.chat-scheduled-modal-copy strong {
    color: #31467d;
    font-size: 13px;
}

.chat-scheduled-modal-copy small {
    color: #68789d;
    font-size: 12px;
    line-height: 1.45;
}

.chat-scheduled-modal-cancel {
    width: 34px;
    height: 34px;
    border: 1px solid #f0bfd0;
    border-radius: 999px;
    background: #fff5f8;
    color: #c05274;
    font-size: 15px;
    line-height: 1;
}

.chat-template-use {
    font-size: 12px;
}

/* ---------- Metodologias ---------- */
.task-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-inline-search {
    margin: 0;
}

.task-inline-search input {
    width: 280px;
    max-width: 38vw;
    border: 1px solid #d3ddfa;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.task-inline-search input:focus {
    border-color: #86a3ff;
    box-shadow: 0 0 0 4px rgba(49, 86, 255, 0.12);
}

.task-new-btn {
    white-space: nowrap;
}

.task-projects-btn {
    border-color: #c0d2ff;
    background: linear-gradient(135deg, #eef3ff 0%, #e4edff 100%);
    color: #2b4ea7;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(49, 77, 149, 0.16);
}

.task-projects-btn:hover {
    border-color: #a9c0ff;
    background: linear-gradient(135deg, #e5edff 0%, #d8e6ff 100%);
    color: #22469b;
}

.task-projects-btn .task-projects-btn-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(43, 78, 167, 0.14);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.task-top-actions .task-projects-btn {
    min-height: 38px;
    padding: 0 12px;
    white-space: nowrap;
}

.projects-grid {
    --project-card-fixed-width: 270px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--project-card-fixed-width), var(--project-card-fixed-width)));
    gap: var(--space-4);
    align-items: stretch;
    justify-content: start;
}

.project-card {
    border: 1px solid #dbe4ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 8px 22px rgba(39, 61, 110, 0.08);
    padding: 14px;
    display: grid;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.project-card-status-done {
    border-color: #b8e7cf;
    box-shadow: 0 8px 22px rgba(26, 120, 78, 0.11);
}

.project-card-status-pending {
    border-color: #ffd9a9;
    box-shadow: 0 8px 22px rgba(184, 121, 24, 0.12);
}

.project-card-status-started {
    border-color: #ffc8d3;
    box-shadow: 0 8px 22px rgba(176, 53, 80, 0.12);
}

.project-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.project-card-head-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    min-width: 0;
}

.project-card-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    flex: 1 1 170px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.project-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: normal;
    line-height: 1.15;
    max-width: 100%;
}

.project-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
}

.project-status-pill.status-done {
    color: #136844;
    background: #eaf9f1;
    border-color: #bde6d0;
}

.project-status-pill.status-done .project-status-icon {
    background: rgba(19, 104, 68, 0.15);
}

.project-status-pill.status-pending {
    color: #9a5a00;
    background: #fff4e4;
    border-color: #ffd9a8;
}

.project-status-pill.status-pending .project-status-icon {
    background: rgba(154, 90, 0, 0.14);
}

.project-status-pill.status-started {
    color: #a12848;
    background: #ffebf0;
    border-color: #ffc5d1;
}

.project-status-pill.status-started .project-status-icon {
    background: rgba(161, 40, 72, 0.14);
}

.project-status-pill.status-empty {
    color: #445f99;
    background: #eef3ff;
    border-color: #cfdbff;
}

.project-status-pill.status-empty .project-status-icon {
    background: rgba(68, 95, 153, 0.14);
}

.project-card-description {
    margin: 0;
    color: #556588;
    font-size: 13px;
    line-height: 1.45;
    min-height: 38px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.project-card-metrics {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.project-card-metrics div {
    border: 1px solid #e4ebff;
    border-radius: 12px;
    background: #fbfdff;
    padding: 8px 9px;
    min-width: 0;
}

.project-card-metrics dt {
    margin: 0;
    font-size: 11px;
    color: #6b7ba2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.project-card-metrics dd {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #2f4476;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.project-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.project-card-actions .inline-form {
    margin: 0;
}

.project-card-actions .btn {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 560px) {
    .projects-grid {
        --project-card-fixed-width: min(100%, 270px);
        grid-template-columns: repeat(auto-fill, minmax(var(--project-card-fixed-width), var(--project-card-fixed-width)));
    }

    .forum-topic-cards {
        --forum-card-fixed-width: min(100%, 270px);
        grid-template-columns: repeat(auto-fill, minmax(var(--forum-card-fixed-width), var(--forum-card-fixed-width)));
    }

    .project-card-head h3 {
        flex-basis: 100%;
        font-size: 17px;
    }

    .project-card-head-meta {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .project-card-metrics {
        grid-template-columns: 1fr;
    }

    .project-card-actions {
        justify-content: stretch;
    }

    .project-card-actions .btn {
        width: 100%;
    }
}

/* Tamano unificado en escritorio para buscador + boton de accion */
@media (min-width: 769px) {
    .meetings-inline-search,
    .forum-inline-search,
    .task-inline-search,
    .chat-section-top-actions input[type="text"] {
        width: clamp(220px, 25vw, 300px);
    }

    .meetings-inline-search,
    .forum-inline-search,
    .task-inline-search {
        margin: 0;
        display: block;
    }

    .meetings-inline-search input[type="text"],
    .forum-inline-search input[type="text"],
    .task-inline-search input,
    .chat-section-top-actions input[type="text"] {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    .meetings-new-btn,
    .forum-new-topic-btn,
    .task-projects-btn,
    .task-new-btn,
    .chat-new-chat-btn {
        min-width: 150px;
        min-height: 38px;
        padding: 0 12px;
        white-space: nowrap;
    }

    .meetings-section-top-actions,
    .forum-section-top-actions,
    .chat-section-top-actions,
    .task-top-actions {
        gap: 10px;
    }
}

.task-view-switch {
    margin-bottom: var(--space-4);
}

.task-view-panel.is-hidden {
    display: none;
}

.task-board-scroll-shell,
.task-list-scroll-shell {
    position: relative;
    max-height: min(72vh, 940px);
    min-height: 440px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4px 6px 18px 0;
    isolation: isolate;
}

.task-list-scroll-shell {
    padding-right: 0;
}

.task-list-table-scroll {
    min-width: 100%;
}

.task-board-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.task-board-column {
    border: 1px solid #d9e4ff;
    background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(43, 66, 140, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.task-board-column.is-over {
    border-color: #2f4ab3;
    box-shadow: 0 0 0 2px rgba(47, 74, 179, 0.2), 0 12px 24px rgba(43, 66, 140, 0.16);
}

.task-board-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 10px;
}

.task-board-column-head h3 {
    margin: 0;
    font-size: 16px;
}

.task-board-count {
    min-width: 28px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dfe7ff;
    color: #2b4290;
    font-weight: 700;
}

.task-board-dropzone {
    min-height: 140px;
    display: grid;
    gap: 10px;
    overflow: visible;
}

.task-board-empty {
    margin: 0;
    border: 1px dashed #c7d6ff;
    border-radius: 12px;
    padding: 14px 12px;
    color: #61739d;
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.task-board-empty.is-hidden {
    display: none;
}

.task-board-dropzone.is-stacked {
    display: block;
    --task-stack-collapsed-height: 72px;
    --task-stack-overlap: 32px;
    padding-bottom: 4px;
}

.task-board-dropzone.is-stacked .task-board-card {
    min-height: var(--task-stack-collapsed-height);
    margin-top: calc(-1 * var(--task-stack-overlap));
    cursor: pointer;
}

.task-board-dropzone.is-stacked .task-board-card.is-locked {
    cursor: not-allowed;
}

.task-board-dropzone.is-stacked .task-board-card:first-of-type {
    margin-top: 0;
}

.task-board-dropzone.is-stacked .task-board-card .task-card-inner {
    min-height: var(--task-stack-collapsed-height);
}

.task-board-dropzone.is-stacked .task-board-card .task-card-face {
    padding: 10px 12px;
    border-radius: 12px;
}

.task-board-dropzone.is-stacked .task-board-card h4 {
    margin: 0;
    min-height: 0;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-board-dropzone.is-stacked .task-board-card .task-owner-indicator,
.task-board-dropzone.is-stacked .task-board-card .task-board-desc,
.task-board-dropzone.is-stacked .task-board-card .task-board-meta,
.task-board-dropzone.is-stacked .task-board-card .task-board-card-footer,
.task-board-dropzone.is-stacked .task-board-card .task-card-lock-note {
    display: none;
}

.task-board-dropzone.is-stacked .task-board-card:not(.is-stack-active):hover .task-card-front {
    transform: none;
    box-shadow: 0 8px 18px rgba(57, 76, 132, 0.12);
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active {
    min-height: 340px;
    margin-left: 12px;
    margin-right: -12px;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-inner {
    min-height: 340px;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-face {
    padding: 12px;
    border-radius: 14px;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active h4 {
    margin: 0 0 8px;
    min-height: 42px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-owner-indicator {
    display: inline-flex;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-desc,
.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-meta,
.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-card-footer,
.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-lock-note {
    display: block;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-card-footer {
    display: flex;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-meta {
    display: grid;
}

.task-board-dropzone.is-stacked .task-board-card[data-can-move="1"].is-stack-active {
    cursor: grab;
}

/* Escritorio: superpuestas pero completas */
@media (min-width: 981px) {
    .task-board-dropzone.is-stacked {
        --task-stack-collapsed-height: 340px;
        --task-stack-overlap: 250px;
    }

    .task-board-dropzone.is-stacked .task-board-card {
        min-height: var(--task-stack-collapsed-height);
    }

    .task-board-dropzone.is-stacked .task-board-card .task-card-inner {
        min-height: var(--task-stack-collapsed-height);
    }

    .task-board-dropzone.is-stacked .task-board-card .task-card-face {
        padding: 12px;
        border-radius: 14px;
    }

    .task-board-dropzone.is-stacked .task-board-card h4 {
        margin: 0 0 8px;
        min-height: 42px;
        font-size: 15px;
        line-height: 1.35;
        white-space: normal;
        overflow: hidden;
        text-overflow: initial;
    }

    .task-board-dropzone.is-stacked .task-board-card .task-owner-indicator {
        display: flex;
    }

    .task-board-dropzone.is-stacked .task-board-card .task-board-desc,
    .task-board-dropzone.is-stacked .task-board-card .task-board-card-footer,
    .task-board-dropzone.is-stacked .task-board-card .task-card-lock-note {
        display: block;
    }

    .task-board-dropzone.is-stacked .task-board-card .task-board-card-footer {
        display: flex;
    }

    .task-board-dropzone.is-stacked .task-board-card .task-board-meta {
        display: grid;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active {
        min-height: var(--task-stack-collapsed-height);
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-inner {
        min-height: var(--task-stack-collapsed-height);
    }
}

.task-board-card {
    cursor: grab;
    user-select: none;
    min-height: 340px;
    position: relative;
    perspective: 1200px;
    transition: transform 0.16s ease, opacity 0.16s ease;
    z-index: 1;
    overflow: visible;
}

.task-board-card {
    touch-action: manipulation;
}

.task-card-inner {
    position: relative;
    min-height: 340px;
    transform-style: preserve-3d;
    transition: transform 0.34s ease;
    overflow: visible;
}

.task-board-card.is-context-open {
    z-index: 30;
}

.task-board-card.is-context-open,
.task-board-dropzone.is-stacked .task-board-card.is-stack-active {
    z-index: 42;
}

.task-board-card.is-mobile-expanded {
    z-index: 46;
}

.task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-front,
.task-board-card.is-mobile-expanded .task-card-front,
.task-board-card.is-context-open .task-card-face {
    box-shadow: 0 22px 44px rgba(43, 66, 140, 0.2);
}

.task-board-card.is-context-open .task-card-inner {
    transform: rotateY(180deg);
}

.task-card-face {
    position: absolute;
    inset: 0;
    border: 1px solid #d7e1ff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(57, 76, 132, 0.08);
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.task-board-card.is-mobile-expanded .task-card-front {
    min-height: 340px;
    overflow: visible;
    border-color: #c7d6ff;
}

.task-card-front {
    z-index: 2;
}

.task-card-back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    gap: 10px;
}

.task-card-back-head strong {
    display: block;
    font-size: 14px;
    color: #2a3e79;
}

.task-card-back-head small {
    color: #6375a1;
    font-size: 12px;
}

.task-card-back-note {
    margin: 0;
    font-size: 12px;
    color: #5f7099;
}

.task-card-back-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.task-card-back-actions .inline-form {
    margin: 0;
    width: 100%;
}

.task-card-back-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.task-board-card.is-mobile-expanded .task-owner-indicator {
    display: inline-flex;
    margin-bottom: 6px;
}

.task-board-card.is-mobile-expanded .task-board-desc {
    display: block;
    margin-bottom: 8px;
    min-height: 0;
}

.task-board-card.is-mobile-expanded .task-board-meta {
    display: grid;
    gap: 8px;
}

.task-board-card.is-mobile-expanded .task-card-lock-note {
    display: block;
    margin-top: 6px;
}

.table-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-action-group .inline-form {
    margin: 0;
}

.table td .table-action-group .inline-form {
    margin: 0;
}

.users-table .users-actions-cell {
    min-width: 312px;
}

.users-action-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
}

.users-action-group .btn {
    width: 100%;
    justify-content: center;
    min-height: 30px;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 9px;
}

.users-action-group .inline-form {
    margin: 0;
    display: block;
}

.users-action-group .inline-form .btn {
    width: 100%;
}

.users-container .search-form-inline {
    display: grid;
    grid-template-columns: minmax(210px, 300px) max-content minmax(120px, 150px);
    align-items: center;
    gap: 8px;
}

.users-container .search-form-inline .users-search-input,
.users-container .search-form-inline .users-search-state {
    height: 40px;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.users-container .search-form-inline .users-search-btn {
    height: 40px;
    min-height: 40px;
    min-width: 78px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 9px;
    justify-content: center;
    line-height: 1;
}

.users-container .search-form-inline .users-search-state {
    min-width: 0;
}

.task-board-card:hover .task-card-front {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.14);
}

.task-board-card.is-context-open:hover .task-card-front {
    transform: none;
}

.task-board-card.is-dragging {
    opacity: 0.6;
    transform: scale(0.98);
    cursor: grabbing;
}

.task-board-card.is-updating {
    opacity: 0.6;
    pointer-events: none;
}

.task-board-card.is-locked {
    cursor: not-allowed;
}

.task-board-card.is-locked .task-card-face {
    border-style: dashed;
    background: #f6f8ff;
}

.task-board-card.is-locked:hover .task-card-front {
    transform: none;
    box-shadow: 0 8px 18px rgba(57, 76, 132, 0.08);
}

.task-board-card.is-touch-dragging {
    cursor: grabbing;
    transition: none;
}

.task-board-card.is-touch-dragging .task-card-front {
    box-shadow: 0 18px 28px rgba(57, 76, 132, 0.3);
}

.task-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.task-board-card h4 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.35;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-owner-indicator {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid #cbe5ff;
    background: #ebf6ff;
    color: #1f4f72;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.task-owner-indicator strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #174564;
    font-weight: 700;
}

.task-owner-indicator.is-hidden {
    display: none;
}

.task-board-desc {
    margin: 0 0 10px;
    color: #61739d;
    font-size: 13px;
    line-height: 1.4;
    min-height: 54px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-board-meta {
    margin: 0;
    display: grid;
    gap: 8px;
}

.task-board-meta > div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: center;
}

.task-board-meta dt {
    margin: 0;
    font-weight: 700;
    font-size: 12px;
    color: #2f4ab3;
}

.task-board-meta dd {
    margin: 0;
    color: #31456f;
    font-size: 13px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-board-card-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.task-board-card-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.task-mobile-toggle-btn {
    display: none;
}

.task-card-lock-note {
    display: block;
    margin-top: 8px;
    color: #8a2c4d;
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
}

.task-note-panel {
    margin: 0 0 var(--space-3);
    border: 1px solid #d8e4ff;
    background: #f4f8ff;
    border-radius: 12px;
    padding: 10px 12px;
    color: #334b7a;
}

.task-detail-container {
    display: grid;
    gap: var(--space-4);
}

.task-detail-hero {
    display: grid;
    gap: 14px;
}

.task-detail-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.task-detail-title-wrap {
    min-width: 0;
    flex: 1 1 320px;
}

.task-detail-title-wrap h1 {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-detail-title-wrap .text-soft {
    margin: 0;
}

.task-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.task-detail-actions {
    margin: 0;
}

.task-detail-actions .inline-form {
    margin-left: 0;
}

.task-detail-progress-panel {
    border: 1px solid #dce4ff;
    border-radius: 14px;
    background: #fbfdff;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.task-detail-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.task-detail-progress-head h3 {
    margin: 0;
    font-size: 15px;
}

.task-detail-progress-head strong {
    color: #2a4697;
    font-size: 16px;
}

.task-detail-progress-panel p {
    margin: 0;
}

.task-detail-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.task-detail-kpi {
    border: 1px solid #e2eaff;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.task-detail-kpi small {
    color: #6678a2;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.task-detail-kpi strong {
    color: #2f4476;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-detail-deadline-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.task-detail-deadline-pill.is-none {
    background: #eef3ff;
    color: #4b6296;
    border-color: #d6e1ff;
}

.task-detail-deadline-pill.is-complete {
    background: #e9f8ef;
    color: #15744d;
    border-color: #bde4cd;
}

.task-detail-deadline-pill.is-overdue {
    background: #ffe8ed;
    color: #a32b4a;
    border-color: #f5c4d1;
}

.task-detail-deadline-pill.is-today {
    background: #fff3dd;
    color: #9a5d05;
    border-color: #ffd9a3;
}

.task-detail-deadline-pill.is-upcoming {
    background: #edf3ff;
    color: #3356a8;
    border-color: #cedcff;
}

.task-detail-description-box {
    border: 1px solid #dfe7ff;
    border-radius: 12px;
    background: #f9fbff;
    padding: 12px;
    line-height: 1.5;
    color: #334b7a;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-detail-meta-list {
    margin-top: 12px;
    grid-template-columns: 170px minmax(0, 1fr);
}

.task-history-transition {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-history-arrow {
    color: #5c6f9d;
    font-size: 13px;
    font-weight: 700;
}

.task-history-comment {
    margin: 10px 0 0;
    color: #334b7a;
    line-height: 1.45;
}

.methodology-container .forum-header-row .text-soft {
    margin: 6px 0 0;
}

.methodology-container .dashboard-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: var(--space-4);
    padding-bottom: 2px;
}

.methodology-container .dashboard-stats .stat-card {
    flex: 1 0 128px;
    min-width: 128px;
    padding: 12px 10px;
    border-radius: 14px;
}

.methodology-container .dashboard-stats .stat-card::after {
    width: 74px;
    height: 74px;
    top: -20px;
    right: -20px;
}

.methodology-container .dashboard-stats .stat-card h3 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1;
}

.methodology-container .dashboard-stats .stat-card p {
    font-size: 12px;
    line-height: 1.15;
}

.task-history {
    display: grid;
    gap: var(--space-3);
}

.task-interactions-section {
    border: 1px solid #d9e4ff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 28px rgba(44, 74, 132, 0.09);
}

.task-interactions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.task-interactions-head h3 {
    margin: 0;
}

.task-thread-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid #d7e2ff;
    border-radius: 999px;
    background: #f4f8ff;
    margin-bottom: 14px;
}

.task-thread-tab {
    border: 0;
    background: transparent;
    color: #355288;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.task-thread-tab:hover {
    background: #e7efff;
}

.task-thread-tab.is-active {
    background: #ffffff;
    color: #1f3e79;
    box-shadow: 0 6px 14px rgba(31, 62, 121, 0.14);
}

.task-thread-view {
    margin-top: 4px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.task-thread-list {
    display: grid;
    gap: 12px;
}

.task-thread-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.task-thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dce8ff;
    border: 1px solid #bcd0ff;
    color: #1f3f7a;
    font-size: 13px;
    font-weight: 700;
}

.task-thread-bubble {
    border: 1px solid #d7e4ff;
    border-radius: 14px;
    background: #f9fbff;
    padding: 10px 12px;
}

.task-thread-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.task-thread-header small {
    color: var(--text-soft);
    font-size: 12px;
}

.task-thread-comment {
    margin: 7px 0 0;
    color: #334b7a;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-thread-status-note {
    margin: 9px 0 0;
    font-size: 12px;
    color: #496398;
    background: #edf3ff;
    border: 1px solid #d7e4ff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
}

.task-history-item {
    border: 1px solid #dde5ff;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8faff;
}

.task-history-item header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.task-history-item header small {
    color: var(--text-soft);
}

.task-history-item p {
    margin: 8px 0 0;
}

.task-summary-composer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #dce7ff;
}

.task-summary-composer h4 {
    margin: 0 0 10px;
    color: #28467f;
    font-size: 16px;
}

#task-summary-form #task-estado-siguiente {
    width: clamp(170px, 30%, 240px);
    max-width: 100%;
}

.section-title-spaced {
    margin-top: 22px;
}

.reunion-item-actions {
    margin-top: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
    .header-container {
        grid-template-columns: 1fr;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-3);
    }

    .mobile-sidebar-toggle {
        display: inline-flex;
    }

    .header-container > .nav {
        display: none;
    }

    .mobile-sidebar-overlay {
        display: block;
    }

    .mobile-sidebar {
        display: flex;
        flex-direction: column;
    }

    .header-search-form {
        width: 100%;
    }

    .user-menu {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .profile-menu-trigger-row {
        flex-wrap: wrap;
    }

    .search-form,
    .filter-form {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .meetings-inline-search,
    .forum-inline-search,
    .task-inline-search,
    .chat-section-top-actions input[type="text"] {
        width: clamp(180px, 34vw, 280px);
    }

    .meetings-view-switch {
        width: 100%;
        justify-content: flex-start;
    }

    .task-detail-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-detail-meta-list {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {
    .header-container {
        padding: 0 var(--space-3);
        min-height: 56px;
        align-content: center;
    }

    .user-menu {
        width: 100%;
    }

    .profile-menu,
    .profile-menu-trigger-row {
        width: 100%;
    }

    .profile-menu-trigger-row {
        justify-content: space-between;
    }

    .main-container {
        margin-top: var(--space-5);
        padding: 0 var(--space-3) var(--space-6);
    }

    .task-detail-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    .task-detail-actions {
        width: 100%;
    }

    .task-detail-actions .btn,
    .task-detail-actions .inline-form,
    .task-detail-actions .inline-form .btn {
        width: 100%;
    }

    .task-detail-kpi-grid {
        grid-template-columns: 1fr;
    }

    .task-thread-switch {
        width: 100%;
        border-radius: 12px;
        justify-content: stretch;
    }

    .task-interactions-head {
        flex-direction: column;
        align-items: stretch;
    }

    .task-interactions-head .btn {
        width: 100%;
    }

    .task-thread-tab {
        flex: 1 1 0;
        text-align: center;
    }

    .task-thread-item {
        grid-template-columns: 1fr;
    }

    .task-thread-avatar {
        display: none;
    }

    .task-thread-view {
        max-height: 420px;
    }

    #task-summary-form #task-estado-siguiente {
        width: 100%;
    }

    @keyframes appMobileViewIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes appMobileViewOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    /* Tema app-mobile global */
    body.app-page {
        background:
            radial-gradient(circle at 12% 8%, rgba(128, 163, 255, 0.3) 0%, rgba(128, 163, 255, 0) 32%),
            radial-gradient(circle at 88% 6%, rgba(88, 203, 255, 0.22) 0%, rgba(88, 203, 255, 0) 30%),
            linear-gradient(180deg, #e8f0fb 0%, #deebf7 100%);
    }

    body.app-page .bg-orb {
        display: none;
    }

    body.app-page .header {
        border-bottom: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        padding-top: 0 !important;
    }

    body.app-page .header-container {
        max-width: none;
        margin: 0 8px;
        padding: 0 12px;
        padding-top: 0 !important;
        min-height: 56px;
        align-content: center;
        border: 1px solid #ccd9e8;
        border-radius: 18px;
        background: rgba(252, 254, 255, 0.94);
        box-shadow: 0 12px 24px rgba(44, 65, 102, 0.14);
        gap: 8px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "logo logo sections user";
        align-items: center;
    }

    body.app-page .logo {
        grid-area: logo;
        min-width: 0;
    }

    body.app-page .logo a {
        gap: 7px;
        font-size: 22px;
    }

    body.app-page .logo-mark {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    body.app-page .mobile-sidebar-toggle {
        grid-area: sections;
        display: inline-flex;
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
        white-space: nowrap;
        justify-self: end;
    }

    body.app-page .user-menu {
        grid-area: user;
        width: auto;
        justify-self: end;
        align-items: center;
        gap: 6px;
    }

    body.app-page .profile-menu,
    body.app-page .profile-menu-trigger-row {
        width: auto;
    }

    body.app-page .profile-menu-trigger-row {
        justify-content: flex-end;
        gap: 6px;
    }

    body.app-page .notification-link {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid #cdd8ea;
        background: #ffffff;
        color: #3b5487;
        box-shadow: 0 4px 10px rgba(39, 63, 104, 0.12);
    }

    body.app-page .notification-link:hover {
        border-color: #b7c9e8;
        background: #f3f7ff;
        color: #2f4ea1;
    }

    body.app-page .profile-toggle {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid #cdd8ea;
        background: #ffffff;
        color: #3b5487;
        justify-content: center;
        gap: 0;
        box-shadow: 0 4px 10px rgba(39, 63, 104, 0.12);
    }

    body.app-page .profile-toggle:hover {
        border-color: #b7c9e8;
        background: #f3f7ff;
        color: #2f4ea1;
    }

    body.app-page .profile-toggle .user-pill-avatar,
    body.app-page .profile-toggle .user-pill-name,
    body.app-page .profile-toggle .profile-toggle-caret {
        display: none;
    }

    body.app-page .profile-toggle::before {
        content: "\2699";
        font-size: 15px;
        line-height: 1;
    }

    body.app-page .main-container {
        margin-top: 10px;
        padding: 0 8px calc(env(safe-area-inset-bottom, 0px) + 92px);
        animation: appMobileViewIn 0.24s ease both;
    }

    body.app-page.app-view-transition-out .main-container {
        animation: appMobileViewOut 0.14s ease both;
        pointer-events: none;
    }

    body.app-page .dashboard-container,
    body.app-page .meetings-container,
    body.app-page .users-container,
    body.app-page .logs-container,
    body.app-page .profile-container,
    body.app-page .forum-container,
    body.app-page .chat-container,
    body.app-page .methodology-container,
    body.app-page .notifications-container,
    body.app-page .search-container,
    body.app-page .calendar-container,
    body.app-page .form-container,
    body.app-page .detail-container,
    body.app-page .section-proximas,
    body.app-page .section-actions,
    body.app-page .section-proyectos,
    body.app-page .profile-section {
        border: 1px solid #c9d7e8;
        border-radius: 20px;
        background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
        box-shadow: 0 10px 22px rgba(41, 62, 99, 0.12);
        padding: 14px;
    }

    body.app-page .main-container h1 {
        font-size: clamp(20px, 5.6vw, 24px);
        line-height: 1.2;
        margin-bottom: 10px;
    }

    body.app-page .main-container h2 {
        font-size: clamp(17px, 4.8vw, 20px);
        margin-bottom: 8px;
    }

    body.app-page .main-container .text-soft {
        font-size: 12px;
        line-height: 1.35;
    }

    body.app-page .forum-header-row,
    body.app-page .meetings-section-title-row,
    body.app-page .chat-section-title-row {
        gap: 8px;
        align-items: start;
    }

    body.app-page .forum-section-top-actions,
    body.app-page .meetings-section-top-actions,
    body.app-page .chat-section-top-actions,
    body.app-page .task-top-actions {
        gap: 8px;
    }

    body.app-page .form-group input,
    body.app-page .form-group textarea,
    body.app-page .form-group select,
    body.app-page .search-form input,
    body.app-page .search-form select,
    body.app-page .filter-form input,
    body.app-page .filter-form select {
        min-height: 40px;
        border-radius: 11px;
        border-color: #c8d7ea;
        background: #ffffff;
    }

    body.app-page .btn {
        min-height: 40px;
        border-radius: 12px;
        font-size: 13px;
    }

    body.app-page .btn-small {
        min-height: 34px;
        border-radius: 10px;
        font-size: 12px;
    }

    body.app-page .dashboard-stats {
        gap: 10px;
    }

    body.app-page .dashboard-hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
        margin-bottom: 12px;
    }

    body.app-page .dashboard-date-card {
        width: 100%;
        min-width: 0;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
    }

    body.app-page .dashboard-work-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    body.app-page .dashboard-work-panel {
        border-radius: 14px;
        padding: 12px;
    }

    body.app-page .dashboard-task-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.app-page .dashboard-task-due {
        grid-column: 2;
        justify-self: start;
    }

    body.app-page .stat-card,
    body.app-page .dashboard-work-panel,
    body.app-page .meeting-card,
    body.app-page .forum-topic-card,
    body.app-page .task-board-column,
    body.app-page .task-board-card .task-card-face {
        border-radius: 14px;
        border-color: #cbd9ea;
        background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
        box-shadow: 0 8px 16px rgba(49, 69, 107, 0.1);
    }

    body.app-page .table-scroll {
        border: 1px solid #cedbec;
        border-radius: 14px;
        background: #f5f9ff;
        padding: 4px;
    }

    body.app-page .table {
        border-radius: 10px;
        overflow: hidden;
    }

    body.app-page .footer {
        margin: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 4px);
        padding: 12px;
        border: 1px solid #ccd8e8;
        border-radius: 14px;
        background: rgba(250, 253, 255, 0.92);
        box-shadow: 0 8px 18px rgba(45, 63, 96, 0.1);
        font-size: 12px;
    }

    body.app-page .mobile-sidebar {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: min(76vh, 560px);
        border-right: 0;
        border-top: 1px solid #c8d5e8;
        border-radius: 18px 18px 0 0;
        padding: 12px;
        transform: translateY(104%);
    }

    body.mobile-sidebar-open .mobile-sidebar {
        transform: translateY(0);
    }

    body.app-page .mobile-bottom-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        z-index: 96;
        display: grid;
        grid-template-columns: repeat(var(--mobile-nav-count, 6), minmax(0, 1fr));
        gap: 6px;
        justify-content: center;
        padding: 8px;
        border: 1px solid #c7d5e8;
        border-radius: 16px;
        background: rgba(248, 252, 255, 0.94);
        box-shadow: 0 10px 24px rgba(39, 59, 96, 0.18);
        backdrop-filter: blur(10px);
    }

    body.app-page .mobile-bottom-nav-item {
        min-height: 46px;
        border: 1px solid transparent;
        border-radius: 12px;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        color: #4a5f82;
        transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
    }

    body.app-page .mobile-bottom-nav-item:active {
        transform: translateY(1px);
    }

    body.app-page .mobile-bottom-nav-icon {
        width: 30px;
        height: 27px;
        display: inline-grid;
        place-items: center;
        color: #42608f;
        background: #eef3ff;
        border: 1px solid #dce5fb;
        border-radius: 9px;
        line-height: 1;
    }

    body.app-page .mobile-bottom-nav-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.app-page .mobile-bottom-nav-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.01em;
    }

    body.app-page .mobile-bottom-nav-item.active {
        color: #ffffff;
        border-color: #2f4fd0;
        background: linear-gradient(135deg, #3f67ff, #2a49cb);
        box-shadow: 0 8px 14px rgba(42, 73, 203, 0.28);
    }

    body.app-page .mobile-bottom-nav-item.active .mobile-bottom-nav-icon {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .footer {
        white-space: normal;
        text-align: center;
        flex-wrap: wrap;
    }

    body.chat-page {
        overflow: hidden;
    }

    body.chat-page .mobile-bottom-nav {
        display: none;
    }

    body.chat-page .footer {
        display: none;
    }

    body.chat-page .main-container {
        margin-top: var(--space-3);
        padding: 0 var(--space-2) calc(env(safe-area-inset-bottom, 0px) + var(--space-2));
        overflow: hidden;
    }

    body.chat-page .chat-container {
        width: 100%;
        max-width: 100%;
        height: var(--chat-mobile-app-height, calc(100dvh - 58px));
        max-height: var(--chat-mobile-app-height, calc(100dvh - 58px));
        padding: 10px;
        border-radius: 16px;
        overflow: hidden;
    }

    body.chat-page .chat-header {
        margin-bottom: 10px;
    }

    .dashboard-container,
    .meetings-container,
    .users-container,
    .logs-container,
    .profile-container,
    .forum-container,
    .chat-container,
    .methodology-container,
    .notifications-container,
    .search-container,
    .calendar-container,
    .form-container,
    .detail-container,
    .section-proximas,
    .section-actions,
    .section-proyectos,
    .profile-section {
        padding: var(--space-4);
        border-radius: 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .profile-tabs {
        gap: 8px;
    }

    .profile-tab {
        flex: 1 1 calc(50% - 8px);
        min-width: 180px;
        text-align: center;
    }

    .profile-notification-channels {
        gap: 10px;
    }

    .dashboard-container .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dashboard-container .dashboard-quick-actions .btn {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .dashboard-container .dashboard-quick-actions .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .dashboard-hero,
    .dashboard-work-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-date-card {
        width: 100%;
        min-width: 0;
    }

    .calendar-share-panel,
    .calendar-share-grid {
        grid-template-columns: 1fr;
    }

    .calendar-share-actions {
        justify-content: flex-start;
    }

    .calendar-share-link {
        width: 100%;
        min-width: 0;
    }

    .calendar-request-meta {
        grid-template-columns: 1fr;
    }

    .dashboard-projects-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-project-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-projects-grid {
        grid-template-columns: 1fr;
    }

    .settings-section-lead {
        margin-bottom: var(--space-4);
    }

    .settings-back-btn {
        width: 100%;
    }

    .settings-container .detail-section {
        padding: var(--space-4);
    }

    .settings-container .checkbox-list {
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }

    .settings-container .checkbox-label {
        align-items: flex-start;
    }

    .settings-container .form-actions {
        width: 100%;
        gap: var(--space-2);
    }

    .settings-container .form-actions .btn,
    .settings-container .form-actions .inline-form,
    .settings-container .form-actions .inline-form .btn {
        width: 100%;
    }

    .search-form,
    .filter-form {
        grid-template-columns: 1fr;
    }

    .table-scroll {
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll .table {
        width: max-content;
        min-width: 100%;
    }

    .table-scroll .table th,
    .table-scroll .table td {
        white-space: nowrap;
    }

    .table-scroll .table th:first-child,
    .table-scroll .table td:first-child {
        min-width: 180px;
        white-space: normal;
    }

    .table td .inline-form {
        margin-left: 0;
        margin-top: 6px;
    }

    .table td .forum-topic-actions .inline-form {
        margin: 0;
    }

    .users-table td .users-action-group .inline-form {
        margin: 0;
    }

    .users-action-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-container .search-form-inline {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .users-container .search-form-inline .users-search-state {
        grid-column: 1 / -1;
    }

    .calendar {
        overflow-x: hidden;
    }

    .calendar-table {
        min-width: 100%;
        table-layout: fixed;
    }

    .calendar-table th {
        padding: 8px 2px;
        font-size: 10px;
        letter-spacing: 0.02em;
    }

    .detail-list {
        grid-template-columns: 1fr;
    }

    .meeting-detail-container .detail-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: var(--space-4);
    }

    .meeting-detail-container .detail-header .badge {
        align-self: flex-start;
    }

    .meeting-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: var(--space-4);
    }

    .meeting-detail-actions .btn,
    .meeting-detail-actions .inline-form,
    .meeting-detail-actions .inline-form .btn {
        width: 100%;
        margin: 0;
    }

    .meeting-detail-container #mi-asistencia-acciones {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .meeting-detail-container #mi-asistencia-acciones .btn {
        width: 100%;
    }

    .meeting-attendees-scroll .table {
        min-width: 560px;
    }

    .meeting-attendees-desktop {
        display: none;
    }

    .meeting-attendees-mobile {
        display: block;
    }

    .calendar-table td {
        height: 72px;
    }

    .calendar-day-btn {
        padding: 7px 4px;
        text-align: center;
    }

    .day-number {
        font-size: 12px;
    }

    .day-indicator {
        margin-top: 2px;
        font-size: 14px;
    }

    .calendar-day-markers {
        margin-top: 2px;
        justify-content: center;
    }

    .calendar-day-dot {
        width: 7px;
        height: 7px;
    }

    .calendar-day-total {
        margin-top: 2px;
        font-size: 10px;
    }

    .calendar-day-actions-top {
        justify-content: stretch;
    }

    .calendar-day-actions-top .btn {
        flex: 1 1 100%;
    }

    body.app-page .calendar-container {
        padding: 10px;
    }

    .calendar-navigation {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        padding: 10px 12px;
        margin-bottom: var(--space-3);
    }

    .calendar-navigation .btn,
    .calendar-navigation .btn-small {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 11px;
        border-radius: 9px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .calendar-nav-side .btn {
        min-width: 0;
    }

    .calendar-nav-next {
        gap: 5px;
    }

    .current-month {
        font-size: 15px;
        text-align: center;
        width: auto;
        min-width: 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

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

    .chat-layout {
        grid-template-columns: 1fr;
        position: relative;
    }

    body.chat-page .chat-layout {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .forum-inline-search {
        width: 100%;
        max-width: none;
    }

    .meetings-inline-search {
        width: 100%;
        max-width: none;
    }

    .forum-new-topic-btn {
        width: 100%;
    }

    .meetings-new-btn {
        width: 100%;
    }

    .forum-topic-cards {
        grid-template-columns: 1fr;
    }

    .forum-posts {
        gap: 8px;
    }

    .forum-topic-view .detail-section + .detail-section {
        margin-top: var(--space-3);
    }

    .forum-topic-view .forum-posts {
        gap: 12px;
    }

    .forum-post {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
    }

    .forum-post-side {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        padding-right: 0;
        padding-bottom: 7px;
        border-right: 0;
        border-bottom: 1px solid #e8eef9;
        text-align: left;
    }

    .forum-avatar,
    .forum-avatar-img img {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .forum-author-info {
        align-items: flex-start;
        gap: 1px;
    }

    .forum-author-info strong {
        font-size: 11px;
        line-height: 1.2;
    }

    .forum-author-info span {
        font-size: 10px;
    }

    .forum-post-main {
        gap: 7px;
    }

    .forum-post-meta {
        justify-content: space-between;
        align-items: center;
        font-size: 10px;
    }

    .forum-post-meta-actions {
        gap: 4px;
    }

    .forum-post-option-btn {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        font-size: 11px;
    }

    .forum-post-box {
        padding: 8px;
        border-radius: 12px;
        gap: 7px;
    }

    .forum-post-box > strong {
        font-size: 10px;
    }

    .forum-post-text {
        padding: 8px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.35;
    }

    .forum-attachments {
        padding: 8px;
        border-radius: 10px;
    }

    .forum-attachments strong {
        margin-bottom: 6px;
        font-size: 10px;
    }

    .attachment-list {
        gap: 5px;
    }

    .attachment-list li {
        padding: 7px 8px;
        border-radius: 9px;
        gap: 7px;
    }

    .attachment-list a {
        font-size: 11px;
    }

    .attachment-size {
        font-size: 10px;
    }

    .meetings-cards-grid {
        --meeting-card-fixed-width: min(100%, 270px);
        grid-template-columns: repeat(auto-fill, minmax(var(--meeting-card-fixed-width), var(--meeting-card-fixed-width)));
    }

    .meetings-scroll-shell {
        max-height: min(64vh, 620px);
        min-height: 240px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .task-board-scroll-shell,
    .task-list-scroll-shell {
        max-height: none;
        min-height: 0;
    }

.meetings-cards-grid .js-meeting-context-card {
    cursor: pointer;
}

.meetings-cards-grid .js-meeting-context-card.is-context-open {
    cursor: default;
}

    .task-board-grid {
        display: flex;
        gap: var(--space-2);
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .task-top-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .task-projects-btn {
        min-width: 140px;
    }

    .task-inline-search {
        width: 100%;
    }

    .task-inline-search input {
        width: 100%;
        max-width: none;
    }

    .task-board-column {
        min-width: 220px;
        padding: 10px;
        border-radius: 14px;
        scroll-snap-align: start;
    }

    .task-board-column-head h3 {
        font-size: 14px;
    }

    .task-board-dropzone {
        gap: 8px;
        min-height: 100px;
    }

    .task-board-card {
        min-height: 172px;
    }

    .task-card-inner {
        min-height: 172px;
    }

    .task-card-face {
        padding: 10px;
        border-radius: 12px;
    }

    .task-board-card h4 {
        margin-bottom: 6px;
        min-height: 0;
        font-size: 14px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .task-board-card .task-owner-indicator,
    .task-board-card .task-board-desc,
    .task-board-card .task-board-meta,
    .task-board-card .task-card-lock-note {
        display: none;
    }

    .task-board-card.is-mobile-expanded .task-owner-indicator {
        display: inline-flex;
        margin-bottom: 6px;
    }

    .task-board-card.is-mobile-expanded .task-card-front {
        min-height: 320px;
    }

    .task-board-card.is-mobile-expanded .task-board-desc {
        display: block;
        margin-bottom: 8px;
        min-height: 0;
        font-size: 12px;
    }

    .task-board-card.is-mobile-expanded .task-board-meta {
        display: grid;
        gap: 6px;
    }

    .task-board-card.is-mobile-expanded .task-board-meta > div {
        grid-template-columns: 72px 1fr;
        gap: 6px;
    }

    .task-board-card.is-mobile-expanded .task-card-lock-note {
        display: block;
        margin-top: 6px;
    }

    .task-board-card-footer {
        padding-top: 8px;
        gap: 6px;
    }

    .task-board-card-footer .badge {
        font-size: 11px;
        padding: 4px 7px;
    }

    .task-board-card-footer .btn {
        padding: 6px 8px;
    }

    .task-mobile-toggle-btn {
        display: inline-flex;
    }

    .task-board-dropzone.is-stacked {
        --task-stack-collapsed-height: 58px;
        --task-stack-overlap: 24px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active {
        min-height: 260px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-inner {
        min-height: 260px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active h4 {
        margin: 0 0 6px;
        min-height: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-desc {
        margin-bottom: 8px;
        min-height: 0;
        font-size: 12px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-meta {
        gap: 6px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-board-meta > div {
        grid-template-columns: 72px 1fr;
        gap: 6px;
    }

    .task-board-dropzone.is-stacked .task-board-card.is-stack-active .task-card-lock-note {
        margin-top: 6px;
    }

    .chat-main {
        min-height: clamp(480px, calc(100vh - 210px), 760px);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    body.chat-page .chat-main {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    body.chat-page .chat-messages-shell {
        height: 100%;
        min-height: 0;
    }

    .chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 90vw);
        max-width: 90vw;
        border-radius: 0 18px 18px 0;
        border-left: 0;
        border-top: 0;
        border-bottom: 0;
        background: #f9fbff;
        box-shadow: var(--shadow-md);
        transform: translateX(-104%);
        transition: transform var(--transition);
        z-index: 120;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .chat-mobile-directory-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        background: rgba(16, 31, 64, 0.44);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition), visibility var(--transition);
        z-index: 110;
    }

    .chat-mobile-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid #e4eaff;
        background: #ffffff;
    }

    .chat-mobile-sidebar-head strong {
        font-size: 14px;
        color: #314a7f;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .chat-mobile-sidebar-close {
        width: 30px;
        height: 30px;
        border: 1px solid #d1dcff;
        border-radius: 999px;
        background: #ffffff;
        color: #3c5389;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .chat-search {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .chat-search-row {
        order: 1;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .chat-section-selector {
        order: 2;
        margin-top: 0;
    }

    .chat-directory-section {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .chat-users {
        max-height: none;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .chat-peer {
        gap: 8px;
        padding: 12px;
    }

    .chat-mobile-directory-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        border: 1px solid #cfdbff;
        border-radius: 10px;
        background: #ffffff;
        color: #3151aa;
        font-size: 13px;
        font-weight: 700;
        padding: 0 10px;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .chat-peer-main h3 {
        font-size: 16px;
    }

    .chat-peer-actions {
        gap: 6px;
    }

    .chat-peer-context-btn {
        width: 32px;
        height: 32px;
    }

    .chat-bubble {
        max-width: 95%;
    }

    .chat-section-title-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .chat-header .text-soft {
        display: none;
    }

    .chat-section-top-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .chat-section-top-actions input[type="text"] {
        display: none;
    }

    .chat-new-chat-btn {
        width: 100%;
    }

    .chat-messages {
        padding: 68px 12px 12px;
    }

    body.chat-page .chat-users,
    body.chat-page .chat-messages {
        overscroll-behavior: contain;
    }

    body.chat-page .chat-messages {
        height: 100%;
        padding: 66px 10px 10px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: auto;
    }

    body.chat-page .chat-container {
        --chat-attachment-card-width: min(340px, 100%, calc(100vw - 112px));
        --chat-attachment-preview-height: 184px;
        --chat-document-card-width: min(300px, 100%, calc(100vw - 112px));
        --chat-document-preview-height: 236px;
        --chat-audio-note-width: min(300px, 100%, calc(100vw - 112px));
    }

    body.chat-page .chat-main,
    body.chat-page .chat-peer,
    body.chat-page .chat-peer-main,
    body.chat-page .chat-send-form,
    body.chat-page .chat-send-main,
    body.chat-page .chat-message-input-stack,
    body.chat-page .chat-bubble,
    body.chat-page .chat-bubble-attachments,
    body.chat-page .chat-message-content {
        min-width: 0;
    }

    body.chat-page .chat-main,
    body.chat-page .chat-layout,
    body.chat-page .chat-sidebar,
    body.chat-page .chat-messages,
    body.chat-page .chat-bubble,
    body.chat-page .chat-voice-note,
    body.chat-page .chat-audio-inline,
    body.chat-page .chat-attachment-link,
    body.chat-page .chat-attachment-preview-card,
    body.chat-page .chat-file-card,
    body.chat-page .chat-attachment-image-link,
    body.chat-page .chat-attachment-video-link,
    body.chat-page .chat-attachment-media {
        max-width: 100%;
    }

    body.chat-page .chat-bubble {
        max-width: calc(100% - 18px);
    }

    body.chat-page .chat-bubble header {
        padding-left: 0;
        padding-right: 0;
        gap: 8px;
        flex-wrap: wrap;
    }

    body.chat-page .chat-peer-main h3,
    body.chat-page .chat-peer-main small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.chat-page .chat-attachment-link {
        width: 100%;
        justify-content: flex-start;
    }

    body.chat-page .chat-attachment-image-link,
    body.chat-page .chat-attachment-video-link {
        width: 100%;
    }

    body.chat-page .chat-attachment-preview-card .chat-attachment-preview-media {
        height: var(--chat-attachment-preview-height, 184px);
    }

    body.chat-page .chat-attachment-image {
        max-height: 100%;
    }

    body.chat-page .chat-attachment-media {
        width: 100%;
    }

    body.chat-page .chat-attachment-video {
        max-height: 100%;
    }

    body.chat-page .chat-document-preview-media {
        height: var(--chat-document-preview-height, 236px);
    }

    body.chat-page .chat-document-preview-card.is-generated-preview .chat-document-preview-media {
        height: 112px;
    }

    body.chat-page .chat-voice-note {
        width: 100%;
    }

    body.chat-page .chat-audio-inline {
        width: 100%;
    }

    body.chat-page .chat-send-form {
        padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    .chat-send-main {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        gap: 6px;
        padding: 6px;
    }

    .chat-input-icon-btn,
    .chat-send-form textarea,
    .chat-send-submit {
        height: 40px;
        min-height: 40px;
    }

    .chat-input-icon-btn {
        width: 40px;
        border-radius: 10px;
        font-size: 16px;
    }

    .chat-send-form textarea {
        max-height: 40px;
        min-height: 40px;
        padding: 9px 10px;
    }

    .chat-send-submit {
        width: 40px;
        min-width: 40px;
        padding: 0;
    }

    .chat-send-extras {
        justify-content: stretch;
    }

    .chat-send-extras input[type="datetime-local"] {
        width: 100%;
    }

    .chat-attach-chip-text {
        max-width: calc(100vw - 200px);
    }

    .chat-send-form {
        padding-bottom: var(--space-4);
    }

    .chat-scheduled-overlay {
        left: 12px;
        right: 12px;
        bottom: 10px;
    }

    .chat-emoji-picker {
        left: 12px;
        bottom: 68px;
        width: calc(100% - 24px);
    }

    body.chat-directory-open {
        overflow: hidden;
    }

    body.chat-directory-open .chat-mobile-directory-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.chat-directory-open .chat-container .chat-sidebar {
        transform: translateX(0);
    }

    /* Chat mobile estilo app (referencia visual) */
    body.chat-page .chat-header {
        display: none;
    }

    body.chat-page .chat-container {
        --chat-attachment-card-width: min(340px, 100%, calc(100vw - 118px));
        --chat-attachment-preview-height: 176px;
        --chat-document-card-width: min(300px, 100%, calc(100vw - 118px));
        --chat-document-preview-height: 236px;
        --chat-audio-note-width: min(300px, 100%, calc(100vw - 118px));
        border: 1px solid #cfd9e6;
        border-radius: 24px;
        padding: 8px;
        background: linear-gradient(180deg, #e6eef5 0%, #d4e0e9 100%);
        box-shadow: 0 18px 36px rgba(33, 53, 92, 0.22);
    }

    body.chat-page .chat-main {
        border: 1px solid #bfcdde;
        border-radius: 18px;
        background: linear-gradient(180deg, #d7e3eb 0%, #cfdde7 100%);
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    body.chat-page .chat-peer {
        padding: 10px 12px;
        border-bottom: 1px solid #cad6e2;
        background: linear-gradient(180deg, #f9fcff 0%, #edf3f8 100%);
    }

    body.chat-page .chat-peer-main h3 {
        font-size: 14px;
        font-weight: 700;
        color: #2f4b72;
    }

    body.chat-page .chat-peer-main small {
        font-size: 11px;
        color: #6b7f96;
    }

    body.chat-page .chat-peer-context-btn {
        border-radius: 999px;
        border: 1px solid #cfdae5;
        background: #ffffff;
        color: #476182;
    }

    body.chat-page .chat-peer-context-btn:hover {
        border-color: #b8cadc;
        background: #f0f5fb;
        color: #2a4f86;
    }

    body.chat-page .chat-messages {
        padding: 58px 10px 8px;
        background:
            radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 38%),
            radial-gradient(circle at 82% 4%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 34%),
            linear-gradient(180deg, #d7e3eb 0%, #cfdde7 100%);
        scrollbar-color: #8ea5bc #c5d3df;
    }

    body.chat-page .chat-messages::-webkit-scrollbar-track {
        background: #c5d3df;
    }

    body.chat-page .chat-messages::-webkit-scrollbar-thumb {
        background: #8ea5bc;
        border-color: #c5d3df;
    }

    body.chat-page .chat-bubble {
        max-width: 86%;
        margin-bottom: 12px;
        border: 1px solid #d7dee6;
        border-radius: 15px 15px 15px 8px;
        background: #fdfefe;
        box-shadow: 0 5px 10px rgba(50, 72, 104, 0.1);
    }

    body.chat-page .chat-bubble.chat-bubble-media-card {
        max-width: calc(var(--chat-attachment-card-width, 340px) + 26px);
    }

    body.chat-page .chat-bubble.mine {
        border-color: #c2dea0;
        border-radius: 15px 15px 8px 15px;
        background: #d8efb6;
    }

    body.chat-page .chat-bubble.chat-bubble-audio-only,
    body.chat-page .chat-bubble.chat-bubble-audio-only.mine {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 4px 0 0;
    }

    body.chat-page .chat-bubble.chat-bubble-system,
    body.chat-page .chat-bubble.chat-bubble-system.mine {
        max-width: 100%;
        margin: 6px auto 12px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.chat-page .chat-system-alert-label {
        width: max-content;
        max-width: calc(100% - 18px);
        margin: 0 auto;
        font-size: 13px;
        border-color: rgba(172, 192, 215, 0.14);
        background: rgba(10, 17, 25, 0.36);
    }

    body.chat-page .chat-system-alert-label.is-buzz-alert {
        max-width: calc(100% - 10px);
        white-space: nowrap;
        overflow-wrap: normal;
    }

    body.chat-page .chat-bubble header {
        margin-bottom: 4px;
    }

    body.chat-page .chat-bubble header strong {
        font-size: 12px;
        color: #2f4a6d;
    }

    body.chat-page .chat-bubble header small {
        font-size: 11px;
        color: #69809a;
    }

    body.chat-page .chat-message-content {
        font-size: 13px;
        color: #2a415f;
    }

    body.chat-page .chat-bubble-reactions {
        bottom: -16px;
        padding: 2px 6px;
        border: 1px solid #d3dde8;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: none;
    }

    body.chat-page .chat-reaction-pill {
        min-height: 18px;
        padding: 0 2px;
        border: 0;
        background: transparent;
    }

    body.chat-page .chat-send-form {
        border-top: 1px solid #cad6e2;
        padding: 8px;
        background: linear-gradient(180deg, #eef3f8 0%, #e7eef5 100%);
    }

    body.chat-page .chat-send-main {
        gap: 6px;
        padding: 6px;
        align-items: center;
        border: 1px solid #c8d4e0;
        border-radius: 14px;
        background: #f7fbff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    body.chat-page .chat-input-icon-btn,
    body.chat-page .chat-send-form textarea,
    body.chat-page .chat-send-submit {
        height: 36px;
        min-height: 36px;
    }

    body.chat-page .chat-input-icon-btn {
        width: 36px;
        border: 1px solid #c6d2df;
        border-radius: 10px;
        background: #ffffff;
        color: #3d5e84;
        font-size: 15px;
        box-shadow: none;
    }

    body.chat-page .chat-send-form textarea {
        min-height: 36px;
        max-height: 36px;
        padding: 8px 10px;
        border: 1px solid #c4d2df;
        border-radius: 10px;
        background: #ffffff;
    }

    body.chat-page .chat-send-submit {
        width: 36px;
        min-width: 36px;
        padding: 0;
        border-radius: 999px;
        font-size: 13px;
    }

    body.chat-page .chat-send-icon {
        font-size: 15px;
    }

    body.chat-page .chat-voice-note {
        padding: 6px 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
    }

    body.chat-page .chat-bubble-attachments,
    body.chat-page .chat-attachment-item,
    body.chat-page .chat-attachment-preview-card,
    body.chat-page .chat-attachment-preview-media {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.chat-page .chat-attachment-item.is-image,
    body.chat-page .chat-attachment-item.is-video {
        width: var(--chat-attachment-card-width, 340px);
        max-width: 100%;
        min-width: 0;
    }

    body.chat-page .chat-voice-note-play {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    body.chat-page .chat-voice-wave {
        height: 22px;
    }

    body.chat-page .chat-pinned-overlay {
        top: 8px;
    }

    body.chat-page .chat-overlay-list {
        gap: 6px;
    }

    body.chat-page .chat-pinned-item,
    body.chat-page .chat-highlighted-item,
    body.chat-page .chat-scheduled-item {
        border: 1px solid #ccd8e6;
        background: rgba(248, 251, 255, 0.92);
        box-shadow: 0 4px 8px rgba(45, 67, 98, 0.12);
    }

    .meeting-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .dashboard-container .dashboard-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .dashboard-container .dashboard-quick-actions .btn {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .dashboard-container .dashboard-quick-actions .btn:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .calendar-table th {
        padding: 7px 1px;
        font-size: 9px;
        letter-spacing: 0.01em;
    }

    .calendar-table td {
        height: 62px;
    }

    .calendar-day-btn {
        padding: 6px 2px;
    }

    .day-number {
        font-size: 11px;
    }

    .day-indicator {
        font-size: 12px;
    }

    .calendar-day-dot {
        width: 6px;
        height: 6px;
    }

    .calendar-day-total {
        font-size: 9px;
    }

    .meeting-detail-actions {
        grid-template-columns: 1fr;
    }

    .meeting-detail-container #mi-asistencia-acciones {
        grid-template-columns: 1fr;
    }

    .meeting-attendee-row {
        grid-template-columns: 54px 1fr;
        gap: 6px;
    }

    .meeting-attendee-head strong {
        font-size: 13px;
    }

    .forum-post {
        padding: 8px;
        border-radius: 12px;
    }

    .forum-post-side {
        gap: 6px;
        padding-bottom: 6px;
    }

    .forum-avatar,
    .forum-avatar-img img {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .forum-post-box,
    .forum-post-text,
    .forum-attachments {
        border-radius: 9px;
    }

    .forum-post-box,
    .forum-post-text,
    .forum-attachments,
    .attachment-list li {
        padding: 7px;
    }
}

.chat-load-older {
    position: absolute;
    z-index: 8;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #334155);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(43, 68, 140, 0.14);
    white-space: nowrap;
}

.chat-messages-shell.has-pinned-messages .chat-load-older {
    top: 54px;
}

.chat-messages-shell.has-double-overlay .chat-load-older {
    top: 92px;
}

.chat-load-older:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
}

.chat-load-older.is-hidden {
    display: none;
}

.chat-attachment-retention {
    display: block;
    margin-top: 5px;
    padding: 5px 7px;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.08);
    color: #475569;
    font-size: 11px;
    line-height: 1.35;
}

.chat-attachment-retention.is-urgent,
.chat-media-retention-notice.is-urgent {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.chat-media-retention-notice {
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(59, 130, 246, 0.10);
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.chat-bubble.chat-bubble-deleted {
    opacity: 0.72;
    box-shadow: none;
}

.chat-bubble.chat-bubble-deleted .chat-message-content {
    color: #64748b;
    font-style: italic;
}

/* Chat UX refresh */
body.chat-page .chat-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: 16px;
}

body.chat-page .chat-sidebar,
body.chat-page .chat-main {
    border-color: #dfe5f2;
    box-shadow: 0 10px 30px rgba(31, 51, 89, 0.07);
}

body.chat-page .chat-main {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    min-height: min(760px, calc(100vh - 190px));
}

.chat-user-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
}

.chat-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e7edff, #cddaff);
    color: #2949b8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(62, 89, 180, .12);
}

.chat-avatar.is-group {
    border-radius: 14px;
    background: linear-gradient(145deg, #e4f8f2, #c9eee2);
    color: #14745b;
}

.chat-presence-dot {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8;
}

.chat-avatar.online .chat-presence-dot { background: #22c55e; }
.chat-avatar.away .chat-presence-dot { background: #f59e0b; }
.chat-avatar.recent .chat-presence-dot { background: #60a5fa; }

.chat-user-copy {
    min-width: 0;
}

.chat-user-copy strong,
.chat-user-copy small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-user-copy small {
    display: block;
    margin-top: 3px;
    max-width: 190px;
    font-size: 12px;
}

.chat-user-meta {
    align-self: center;
    display: grid;
    justify-items: end;
    gap: 6px;
}

.chat-user-meta .badge {
    min-width: 20px;
    height: 20px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #3156ff;
    color: #fff;
    font-size: 11px;
}

.chat-user-row.is-updated .chat-user-item {
    animation: chat-directory-update .85s ease;
}

@keyframes chat-directory-update {
    0% { background: rgba(49, 86, 255, .18); }
    100% { background: transparent; }
}

.chat-peer-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.chat-peer-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.chat-peer-copy {
    min-width: 0;
}

.chat-peer-copy h3,
.chat-peer-copy small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-connection-status {
    display: block;
    margin-top: 2px;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
}

.chat-connection-status.is-hidden { display: none; }

.chat-messages[aria-busy="true"] {
    cursor: progress;
}

.chat-message-search-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-bottom: 1px solid #e5eaf4;
    background: #fbfcff;
    transition: padding .18s ease, max-height .18s ease, opacity .18s ease;
}

.chat-message-search-bar.is-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    border-bottom: 0;
}

.chat-message-search-bar input {
    min-width: 0;
    flex: 1;
    border: 1px solid #d7dfef;
    border-radius: 10px;
    padding: 8px 10px;
    outline: none;
}

.chat-message-search-bar input:focus {
    border-color: #7894ff;
    box-shadow: 0 0 0 3px rgba(49, 86, 255, .11);
}

.chat-message-search-bar button,
.chat-message-search-bar a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #eef2ff;
    color: #3650a9;
    cursor: pointer;
    text-decoration: none;
}

.chat-date-separator,
.chat-unread-separator {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.chat-date-separator::before,
.chat-date-separator::after,
.chat-unread-separator::before,
.chat-unread-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

.chat-date-separator span {
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
}

.chat-unread-separator {
    color: #3156ff;
}

.chat-unread-separator::before,
.chat-unread-separator::after {
    background: rgba(49, 86, 255, .3);
}

.chat-message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 5px;
    color: #7b879e;
    font-size: 10px;
    line-height: 1;
}

.chat-delivery-state {
    font-weight: 800;
    letter-spacing: -3px;
    padding-right: 3px;
}

.chat-delivery-state.is-leido { color: #22c55e; }
.chat-delivery-state.is-recibido { color: #64748b; }
.chat-delivery-state.is-enviado { color: #94a3b8; }

.chat-scroll-latest {
    position: absolute;
    z-index: 25;
    left: 50%;
    right: auto;
    bottom: 16px;
    width: 44px;
    height: 44px;
    transform: translateX(-50%);
    border: 1px solid #d6dfef;
    border-radius: 50%;
    background: #fff;
    color: #3156ff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(38, 59, 110, .2);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.chat-scroll-latest:hover {
    transform: translateX(-50%) translateY(2px);
    background: #f8faff;
    box-shadow: 0 6px 18px rgba(38, 59, 110, .22);
}

.chat-scroll-latest:active {
    transform: translateX(-50%) translateY(4px) scale(0.96);
}

.chat-scroll-latest.is-scrolling > span:first-child {
    animation: chat-scroll-latest-arrow 0.38s ease-in-out infinite;
}

@keyframes chat-scroll-latest-arrow {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-scroll-latest,
    .chat-scroll-latest.is-scrolling > span:first-child {
        transition: none;
        animation: none;
    }
}

.chat-scroll-latest.is-hidden { display: none; }

.chat-scroll-latest-count {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #3156ff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.chat-scroll-latest-count.is-hidden { display: none; }

.chat-message-content mark {
    padding: 1px 2px;
    border-radius: 3px;
    background: #fde68a;
    color: #713f12;
}

.chat-empty-state {
    min-height: 300px;
    width: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 32px;
    color: #52617d;
    text-align: center;
}

.chat-empty-state p {
    max-width: 360px;
    margin: 0;
    color: #7a879e;
}

.chat-empty-state-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #eef2ff;
    color: #3156ff;
    font-size: 27px;
}

.chat-bubble.chat-search-current {
    outline: 3px solid rgba(49, 86, 255, .3);
    outline-offset: 3px;
}

.chat-bubble-pending {
    opacity: .78;
}

.chat-bubble-pending.is-error {
    opacity: 1;
    border: 1px solid rgba(220, 38, 38, .32);
}

.chat-send-state { color: #64748b; }
.chat-bubble-pending.is-error .chat-send-state { color: #b91c1c; }

.chat-send-spinner {
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 2px solid #cbd5e1;
    border-top-color: #3156ff;
    border-radius: 50%;
    animation: chat-send-spin .7s linear infinite;
}

@keyframes chat-send-spin { to { transform: rotate(360deg); } }

.chat-send-retry {
    border: 0;
    background: transparent;
    color: #b91c1c;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.chat-character-count {
    position: absolute;
    right: 8px;
    bottom: 3px;
    color: #64748b;
    font-size: 10px;
}

.chat-character-count.is-hidden { display: none; }
.chat-character-count.is-limit { color: #dc2626; font-weight: 800; }

.chat-role-list {
    display: grid;
    gap: 8px;
    max-height: min(520px, 65vh);
    overflow: auto;
}

.chat-role-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 140px auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e7f2;
    border-radius: 11px;
    background: #fbfcff;
}

.chat-role-row select {
    padding: 7px 8px;
    border: 1px solid #d5deed;
    border-radius: 8px;
    background: #fff;
}

.chat-role-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
}

.chat-message-input-stack { position: relative; }
.chat-emoji-toggle-icon { font-size: 0; }
.chat-emoji-toggle-icon::before { content: "\1F60A"; font-size: 18px; }

@media (max-width: 760px) {
    body.chat-page .chat-main {
        min-height: calc(100dvh - 135px);
        border-radius: 18px;
        overflow: hidden;
    }

    .chat-peer-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .chat-peer-actions {
        gap: 3px;
    }

    .chat-scroll-latest {
        left: 50%;
        right: auto;
        bottom: 10px;
        transform: translateX(-50%);
    }

    .chat-message-search-bar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-role-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Chat: paneles estables y scroll interno sin saltos al cambiar de conversación. */
body.chat-page .chat-main {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-page .chat-peer,
body.chat-page .chat-message-search-bar,
body.chat-page .chat-send-form {
    flex: 0 0 auto;
}

body.chat-page .chat-peer {
    min-height: 73px;
}

body.chat-page .chat-messages-shell {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

body.chat-page .chat-messages {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

body.chat-page .chat-typing-indicator {
    flex: 0 0 22px;
    height: 22px;
    min-height: 22px;
    overflow: hidden;
}

@media (min-width: 761px) {
    body.chat-page .chat-container {
        --chat-panel-height: clamp(620px, calc(100dvh - 180px), 760px);
        height: var(--chat-panel-height);
        min-height: var(--chat-panel-height);
        max-height: var(--chat-panel-height);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    body.chat-page .chat-layout {
        height: 100%;
        min-height: 0;
        align-items: stretch;
        overflow: hidden;
    }

    body.chat-page .chat-sidebar {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.chat-page .chat-search,
    body.chat-page .chat-mobile-sidebar-head {
        flex: 0 0 auto;
    }

    body.chat-page .chat-directory-section:not(.is-hidden) {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
    }

    body.chat-page .chat-users {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    body.chat-page .chat-main {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 760px) {
    body.chat-page .chat-container {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
    }

    body.chat-page .chat-layout,
    body.chat-page .chat-main {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    body.chat-page .chat-peer {
        min-height: 57px;
    }

    body.chat-page .chat-sidebar .chat-directory-section:not(.is-hidden) {
        flex: 1 1 0;
        min-height: 0;
    }

    body.chat-page .chat-sidebar .chat-users {
        min-height: 0;
        max-height: none;
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }
}

/* Topbar global compacto: más espacio útil en todas las secciones. */
.header {
    min-height: 46px;
}

.header-container {
    min-height: 46px;
    padding-right: 18px;
    padding-left: 18px;
    gap: 12px;
}

.logo a {
    gap: 8px;
    font-size: 26px;
}

.logo-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.nav ul {
    gap: 5px;
}

.nav a {
    height: 32px;
    padding: 0 11px;
    font-size: 15px;
}

.header-search-form input[type="search"],
.mobile-sidebar-toggle,
.user-action-icon,
.user-pill-btn {
    height: 32px;
    min-height: 32px;
}

.user-action-icon {
    width: 32px;
}

.user-pill-btn {
    padding-right: 10px;
    padding-left: 8px;
}

.user-pill-avatar {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

@media (min-width: 761px) and (max-width: 1020px) {
    .header,
    .header-container {
        min-height: 44px;
    }

    .header-container {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "logo sections user";
        align-content: center;
        align-items: center;
    }

    .header-container .logo {
        grid-area: logo;
        min-width: 0;
    }

    .header-container .mobile-sidebar-toggle {
        grid-area: sections;
        display: inline-flex;
        justify-self: start;
        width: auto;
    }

    .header-container .user-menu {
        grid-area: user;
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .header-container .profile-menu,
    .header-container .profile-menu-trigger-row {
        width: auto;
        flex-wrap: nowrap;
    }
}

@media (max-width: 760px) {
    body.app-page .header {
        min-height: 42px;
    }

    body.app-page .header-container {
        min-height: 40px;
        margin-right: 6px;
        margin-left: 6px;
        padding-right: 10px;
        padding-left: 10px;
        border-radius: 14px;
        gap: 6px;
    }

    body.app-page .logo a {
        gap: 6px;
        font-size: 22px;
    }

    body.app-page .logo-mark {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

    body.app-page .mobile-sidebar-toggle,
    body.app-page .notification-link,
    body.app-page .profile-toggle {
        height: 32px;
        min-height: 32px;
    }

    body.app-page .notification-link,
    body.app-page .profile-toggle {
        width: 32px;
        min-width: 32px;
    }
}

@media (min-width: 761px) {
    body.chat-page .chat-container {
        --chat-panel-height: clamp(620px, calc(100dvh - 158px), 790px);
    }
}

/* Footer compacto con la misma altura visual del topbar. */
.footer {
    height: 46px;
    min-height: 46px;
    padding: 0 var(--space-4);
}

@media (min-width: 761px) and (max-width: 1020px) {
    .footer {
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 760px) {
    .footer {
        height: 42px;
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* Chat expandido: ocupar el viewport sin quedar debajo del topbar o el footer. */
body.chat-page.chat-expanded {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

body.chat-page.chat-expanded > .header,
body.chat-page.chat-expanded > .footer,
body.chat-page.chat-expanded > .mobile-bottom-nav {
    display: none;
}

body.chat-page.chat-expanded > .main-container {
    position: relative;
    z-index: 250;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

body.chat-page.chat-expanded .chat-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

body.chat-page.chat-expanded .chat-header {
    min-height: 0;
    margin-bottom: 10px;
}

body.chat-page.chat-expanded .chat-layout,
body.chat-page.chat-expanded .chat-main,
body.chat-page.chat-expanded .chat-messages-shell {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

body.chat-page.chat-expanded .chat-directory-section.is-hidden {
    display: none;
}

body.chat-page.chat-expanded .chat-directory-section:not(.is-hidden) {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
}

body.chat-page.chat-expanded .chat-users,
body.chat-page.chat-expanded .chat-messages {
    min-height: 0;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 760px) {
    body.chat-page.chat-expanded .chat-container {
        padding: 0;
        border-radius: 0;
    }

    body.chat-page.chat-expanded .chat-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body.chat-page.chat-expanded .chat-main {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    body.chat-page.chat-expanded .chat-sidebar {
        width: min(340px, 90vw);
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* Chat compacto: más altura disponible para el historial. */
body.chat-page .chat-header {
    gap: 6px;
    margin-bottom: 10px;
}

body.chat-page .chat-peer {
    min-height: 60px;
    padding: 8px 14px;
}

body.chat-page .chat-peer-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

body.chat-page .chat-peer-context-btn {
    width: 32px;
    height: 32px;
}

body.chat-page .chat-message-search-bar {
    padding: 6px 12px;
}

/* Una busqueda cerrada no debe reservar espacio entre cabecera e historial. */
body.chat-page .chat-message-search-bar.is-collapsed {
    display: none;
}

body.chat-page .chat-message-search-bar input {
    padding-top: 6px;
    padding-bottom: 6px;
}

body.chat-page .chat-message-search-bar button,
body.chat-page .chat-message-search-bar a {
    width: 30px;
    height: 30px;
}

body.chat-page .chat-send-form {
    gap: 6px;
    padding: 8px 12px 6px;
}

body.chat-page .chat-send-main {
    gap: 6px;
    align-items: center;
    padding: 6px;
}

body.chat-page .chat-input-icon-btn,
body.chat-page .chat-send-form textarea,
body.chat-page .chat-send-submit {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

body.chat-page .chat-input-icon-btn {
    width: 40px;
}

body.chat-page .chat-send-submit {
    width: 40px;
    min-width: 40px;
}

body.chat-page .chat-typing-indicator {
    flex-basis: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0 12px 4px;
}

@media (min-width: 761px) {
    body.chat-page .chat-container {
        padding: 18px;
    }

    body.chat-page.chat-expanded .chat-container {
        padding: 10px 12px;
    }
}

@media (max-width: 760px) {
    body.chat-page .chat-peer {
        min-height: 52px;
        padding: 7px 10px;
    }

    body.chat-page .chat-peer-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    body.chat-page .chat-send-form {
        padding: 6px 8px 4px;
    }

    body.chat-page .chat-input-icon-btn,
    body.chat-page .chat-send-form textarea,
    body.chat-page .chat-send-submit {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
    }

    body.chat-page .chat-input-icon-btn {
        width: 36px;
    }

    body.chat-page .chat-send-submit {
        width: 36px;
        min-width: 36px;
    }
}

/* Chat ultracompacto: sin reservas vacías y compositor de hasta tres líneas. */
body.chat-page .chat-peer {
    min-height: 48px;
    padding: 5px 12px;
}

body.chat-page .chat-peer-main {
    gap: 8px;
}

body.chat-page .chat-peer-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

body.chat-page .chat-peer-actions {
    gap: 5px;
}

body.chat-page .chat-peer-context-btn {
    width: 30px;
    height: 30px;
}

body.chat-page .chat-messages {
    padding: 10px 12px;
}

body.chat-page .chat-messages-shell.has-pinned-messages .chat-messages {
    padding-top: 58px;
}

body.chat-page .chat-messages-shell.has-double-overlay .chat-messages {
    padding-top: 102px;
}

body.chat-page .chat-send-form {
    gap: 3px;
    padding: 3px 8px 2px;
}

body.chat-page .chat-send-main {
    gap: 5px;
    padding: 3px;
    border-radius: 11px;
    box-shadow: 0 4px 10px rgba(57, 76, 132, 0.06);
}

body.chat-page .chat-input-icon-btn,
body.chat-page .chat-send-submit {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

body.chat-page .chat-send-form textarea {
    height: 34px;
    min-height: 34px;
    max-height: none;
    padding: 7px 10px;
    line-height: 18px;
    overflow-y: hidden;
}

body.chat-page .chat-typing-indicator:empty {
    display: none;
}

body.chat-page .chat-typing-indicator:not(:empty) {
    display: block;
    flex: 0 0 16px;
    height: 16px;
    min-height: 16px;
    padding: 0 10px 2px;
    font-size: 11px;
}

@media (max-width: 760px) {
    body.chat-page .chat-peer {
        min-height: 46px;
        padding: 5px 8px;
    }

    body.chat-page .chat-peer-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    body.chat-page .chat-peer-context-btn {
        width: 30px;
        height: 30px;
    }

    body.chat-page .chat-messages {
        padding: 8px;
    }

    body.chat-page .chat-messages-shell.has-pinned-messages .chat-messages {
        padding-top: 52px;
    }

    body.chat-page .chat-messages-shell.has-double-overlay .chat-messages {
        padding-top: 92px;
    }

    body.chat-page .chat-send-form {
        padding: 3px 6px 2px;
    }

    body.chat-page .chat-input-icon-btn,
    body.chat-page .chat-send-submit {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
    }

    body.chat-page .chat-send-form textarea {
        height: 32px;
        min-height: 32px;
        padding: 6px 9px;
    }
}

/* Chat estable y minimo: dimensiones finales desde el primer fotograma. */
body.chat-page .chat-layout,
body.chat-page .chat-sidebar,
body.chat-page .chat-main,
body.chat-page .chat-peer,
body.chat-page .chat-messages-shell,
body.chat-page .chat-send-form,
body.chat-page .chat-send-main {
    transition-property: none;
}

body.chat-page .chat-header {
    gap: 4px;
    margin-bottom: 6px;
}

body.chat-page .chat-section-top-actions input[type="text"] {
    height: 34px;
    padding: 6px 10px;
}

body.chat-page .chat-new-chat-btn {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.chat-page .chat-peer {
    min-height: 42px;
    padding: 3px 10px;
}

body.chat-page .chat-peer-main {
    gap: 7px;
}

body.chat-page .chat-peer-copy {
    position: relative;
}

body.chat-page .chat-peer-copy h3 {
    font-size: 18px;
    line-height: 20px;
}

body.chat-page .chat-peer-copy small {
    display: block;
    margin-top: 0;
    font-size: 12px;
    line-height: 14px;
}

/* El estado de conexion reemplaza el subtitulo sin sumar una tercera linea. */
body.chat-page .chat-peer-copy:has(.chat-connection-status:not(.is-hidden)) #chat-presence-text {
    visibility: hidden;
}

body.chat-page .chat-connection-status {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.chat-page .chat-peer-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

body.chat-page .chat-peer-actions {
    gap: 4px;
}

body.chat-page .chat-peer-context-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

body.chat-page .chat-send-form {
    gap: 2px;
    padding: 2px 6px 1px;
}

body.chat-page .chat-send-main {
    gap: 4px;
    padding: 2px;
    border-radius: 10px;
}

body.chat-page .chat-send-main.chat-send-main-astra {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

body.chat-page .chat-input-icon-btn,
body.chat-page .chat-send-submit {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    border-radius: 9px;
}

body.chat-page .chat-send-form textarea {
    height: 30px;
    min-height: 30px;
    padding: 5px 9px;
    line-height: 18px;
}

/* El indicador se superpone al historial y no modifica la altura del panel. */
body.chat-page .chat-typing-indicator:not(:empty) {
    position: absolute;
    z-index: 4;
    right: 8px;
    bottom: 39px;
    left: 8px;
    pointer-events: none;
}

@media (max-width: 760px) {
    body.chat-page .chat-peer {
        min-height: 42px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "menu actions"
            "peer peer";
        align-items: start;
        gap: 6px 8px;
        padding: 6px 7px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

    body.chat-page .chat-peer,
    body.chat-page .chat-message-search-bar,
    body.chat-page .chat-messages-shell,
    body.chat-page .chat-send-form {
        width: 100%;
    }

    body.chat-page .chat-mobile-directory-btn {
        grid-area: menu;
        min-width: 0;
        max-width: 100%;
        align-self: center;
    }

    body.chat-page .chat-peer-main {
        grid-area: peer;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body.chat-page .chat-peer-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    body.chat-page .chat-peer-copy {
        min-width: 0;
    }

    body.chat-page .chat-peer-copy h3 {
        font-size: 15px;
        line-height: 17px;
    }

    body.chat-page .chat-peer-copy small {
        display: -webkit-box;
        white-space: normal;
        line-height: 13px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.chat-page .chat-peer-actions {
        grid-area: actions;
        gap: 5px;
        justify-content: flex-end;
        flex-wrap: nowrap;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    body.chat-page .chat-peer-actions::-webkit-scrollbar {
        display: none;
    }

    body.chat-page .chat-peer-context-btn {
        flex: 0 0 auto;
    }

    body.chat-page .chat-main > .chat-peer {
        order: 1;
    }

    body.chat-page .chat-main > .chat-message-search-bar {
        order: 2;
    }

    body.chat-page .chat-main > .chat-messages-shell {
        order: 3;
        flex: 1 1 auto;
        min-height: 180px;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    body.chat-page .chat-main > .chat-send-form {
        order: 4;
        margin-top: 0;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        overflow: hidden;
    }

    body.chat-page .chat-messages {
        padding-top: 18px;
        padding-bottom: 10px;
    }

    body.chat-page .chat-messages-shell.has-pinned-messages .chat-messages {
        padding-top: 66px;
    }

    body.chat-page .chat-messages-shell.has-double-overlay .chat-messages {
        padding-top: 108px;
    }

    .chat-emoji-picker {
        left: 10px;
        right: 10px;
        bottom: 58px;
        width: auto;
        max-height: min(320px, calc(100dvh - 180px));
        padding: 8px;
    }

    .chat-emoji-drawer-head {
        padding: 5px 7px;
    }

    .chat-emoji-drawer-head strong {
        font-size: 12px;
    }

    .chat-emoji-drawer-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 7px;
        max-height: min(220px, 32vh);
    }

    .chat-emoji-btn {
        height: 38px;
        font-size: 18px;
    }

    body.chat-page .chat-input-icon-btn,
    body.chat-page .chat-send-submit {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
    }

    body.chat-page .chat-send-form textarea {
        height: 32px;
        min-height: 32px;
        padding: 6px 9px;
    }
}

@media (max-width: 420px) {
    body.chat-page .chat-mobile-directory-btn {
        height: 32px;
        padding: 0 9px;
        font-size: 12px;
    }

    body.chat-page .chat-peer-context-btn {
        width: 30px;
        height: 30px;
    }

    .chat-emoji-drawer-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-height: min(210px, 30vh);
    }
}

@media (min-width: 761px) {
    body.chat-page .chat-container {
        padding: 12px;
    }

    body.chat-page.chat-expanded .chat-container {
        padding: 8px 10px;
    }
}

/* ================================================================
   Secciones internas compactas y estables
   Base comun para Escritorio, Calendario, Reuniones, Foro, Tareas y Admin.
   ================================================================ */
body.app-page:not(.chat-page) {
    --app-content-gap: 12px;
    --app-surface-padding: 16px;
    --app-page-topbar-height: 46px;
    --app-page-footer-height: 46px;
    --app-panel-min-height: calc(
        100dvh
        - var(--app-page-topbar-height)
        - var(--app-page-footer-height)
        - (var(--app-content-gap) * 2)
    );
}

body.app-page:not(.chat-page) .main-container {
    margin-top: var(--app-content-gap);
    padding-bottom: var(--app-content-gap);
}

body.app-page:not(.chat-page) .main-container > :is(
    .dashboard-container,
    .meetings-container,
    .users-container,
    .logs-container,
    .profile-container,
    .forum-container,
    .methodology-container,
    .notifications-container,
    .search-container,
    .calendar-container,
    .form-container,
    .detail-container,
    .admin-layout
) {
    min-height: var(--app-panel-min-height);
}

body.app-page:not(.chat-page) .main-container > .admin-layout {
    align-items: stretch;
}

body.app-page:not(.chat-page) .main-container > .admin-layout > .admin-sidebar,
body.app-page:not(.chat-page) .main-container > .admin-layout > .admin-content {
    min-height: var(--app-panel-min-height);
}

body.app-page:not(.chat-page) :is(
    .dashboard-container,
    .meetings-container,
    .users-container,
    .logs-container,
    .profile-container,
    .forum-container,
    .methodology-container,
    .notifications-container,
    .search-container,
    .calendar-container,
    .form-container,
    .detail-container
) {
    padding: var(--app-surface-padding);
}

body.app-page:not(.chat-page) .app-section-header {
    min-width: 0;
    min-height: 48px;
    margin-bottom: 10px;
    gap: 12px;
    align-items: center;
}

body.app-page:not(.chat-page) .app-section-header-simple {
    display: flex;
    justify-content: space-between;
}

body.app-page:not(.chat-page) .app-section-header > div {
    min-width: 0;
}

body.app-page:not(.chat-page) .app-section-header h1 {
    margin: 0;
    font-size: clamp(26px, 2.4vw, 30px);
    line-height: 1.08;
}

body.app-page:not(.chat-page) .app-section-header .text-soft {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.3;
}

body.app-page:not(.chat-page) .app-section-header .dashboard-kicker {
    margin-bottom: 2px;
}

body.app-page:not(.chat-page) .app-section-header :is(
    .forum-section-top-actions,
    .meetings-section-top-actions,
    .task-top-actions
) {
    gap: 7px;
}

body.app-page:not(.chat-page) .app-section-header :is(
    .forum-inline-search,
    .task-inline-search
) input {
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

body.app-page:not(.chat-page) .app-section-toolbar {
    min-height: 38px;
    margin-bottom: 12px;
    padding: 4px 6px;
    border: 1px solid #e0e7f5;
    border-radius: 12px;
    background: #f8faff;
}

body.app-page:not(.chat-page) .app-section-toolbar .btn {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.app-page:not(.chat-page) .dashboard-hero {
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .dashboard-date-card {
    min-width: 138px;
    padding: 8px 12px;
}

body.app-page:not(.chat-page) .dashboard-date-card strong {
    font-size: 18px;
}

body.app-page:not(.chat-page) .dashboard-work-grid {
    gap: 12px;
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .dashboard-work-panel {
    padding: 12px;
    gap: 9px;
}

body.app-page:not(.chat-page) .calendar-share-panel {
    margin-bottom: 12px;
    padding: 10px 12px;
}

body.app-page:not(.chat-page) .calendar-share-panel h2 {
    font-size: 18px;
}

body.app-page:not(.chat-page) .calendar-navigation.app-section-toolbar {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

body.app-page:not(.chat-page) :is(.forum-topic-cards, .meetings-cards-grid, .projects-grid) {
    gap: 12px;
}

body.app-page:not(.chat-page) .admin-home-grid {
    gap: 12px;
    margin-top: 12px;
}

body.app-page:not(.chat-page) .admin-card {
    padding: 14px;
}

body.app-page:not(.chat-page) .admin-analytics-section {
    margin-top: 16px;
}

body.app-page:not(.chat-page) .calendar-requests-container {
    padding: var(--app-surface-padding);
}

body.app-page:not(.chat-page) .detail-content,
body.app-page:not(.chat-page) .task-detail-container {
    gap: 12px;
}

body.app-page:not(.chat-page) .detail-section {
    padding: 16px;
}

body.app-page:not(.chat-page) .detail-section > :first-child {
    margin-top: 0;
}

body.app-page:not(.chat-page) .detail-section > :last-child {
    margin-bottom: 0;
}

body.app-page:not(.chat-page) .detail-actions {
    gap: 8px;
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .form-group {
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .form-actions {
    margin-top: 14px;
}

body.app-page:not(.chat-page) .pagination {
    margin-top: 12px;
}

body.app-page:not(.chat-page) .profile-tabs.app-section-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
}

body.app-page:not(.chat-page) .profile-tabs.app-section-toolbar .profile-tab {
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
}

body.app-page:not(.chat-page) .calendar-request-filters.app-section-toolbar {
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .global-search-page-form.app-section-toolbar {
    margin-bottom: 12px;
}

body.app-page:not(.chat-page) .table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.app-page:not(.chat-page) .table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.app-page:not(.chat-page) :is(.toolbar, .forum-toolbar, .meetings-toolbar) {
    gap: 8px;
}

body.app-page:not(.chat-page) :is(.toolbar, .forum-toolbar) {
    align-items: center;
    justify-content: space-between;
}

body.app-page:not(.chat-page) :is(.toolbar, .app-section-header, .app-section-toolbar) {
    transition-property: none;
}

@media (max-width: 760px) {
    body.app-page:not(.chat-page) {
        --app-content-gap: 8px;
        --app-surface-padding: 12px;
        --app-page-topbar-height: 58px;
        --app-page-footer-height: 0px;
        --app-panel-min-height: calc(100dvh - 92px);
    }

    body.app-page:not(.chat-page) .main-container {
        margin-top: var(--app-content-gap);
        padding-right: 7px;
        padding-left: 7px;
    }

    body.app-page:not(.chat-page) .app-section-header,
    body.app-page:not(.chat-page) .app-section-header-simple {
        min-height: 0;
        margin-bottom: 8px;
        align-items: stretch;
    }

    body.app-page:not(.chat-page) .app-section-header h1 {
        font-size: clamp(22px, 6vw, 26px);
    }

    body.app-page:not(.chat-page) .app-section-header .text-soft {
        font-size: 12px;
    }

    body.app-page:not(.chat-page) .app-section-toolbar {
        margin-bottom: 9px;
    }

    body.app-page:not(.chat-page) .calendar-share-panel {
        padding: 10px;
    }

    body.app-page:not(.chat-page) .detail-section {
        padding: 12px;
    }

    body.app-page:not(.chat-page) .profile-tabs.app-section-toolbar {
        align-items: center;
    }

    body.app-page:not(.chat-page) :is(.toolbar, .forum-toolbar) {
        align-items: stretch;
    }
}

/* Chat normal: mismo margen exterior que el resto de las secciones. */
@media (min-width: 761px) {
    body.chat-page {
        --chat-page-edge-gap: 12px;
        --chat-page-topbar-height: 46px;
        --chat-page-footer-height: 46px;
    }

    body.chat-page > .main-container {
        flex: 0 0 auto;
        width: 100%;
        margin-top: var(--chat-page-edge-gap);
        padding-bottom: var(--chat-page-edge-gap);
    }

    body.chat-page:not(.chat-expanded) .chat-container {
        --chat-panel-height: calc(
            100dvh
            - var(--chat-page-topbar-height)
            - var(--chat-page-footer-height)
            - (var(--chat-page-edge-gap) * 2)
        );
        height: var(--chat-panel-height);
        min-height: 0;
        max-height: var(--chat-panel-height);
    }
}

@media (min-width: 761px) and (max-width: 1020px) {
    body.chat-page {
        --chat-page-topbar-height: 44px;
        --chat-page-footer-height: 44px;
    }
}

/* Ajuste final mobile del chat: ancho util completo y composer fijo al final del panel. */
@media (max-width: 760px) {
    body.chat-page > .main-container {
        margin-top: 8px;
        padding-right: 6px;
        padding-left: 6px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        overflow: hidden;
    }

    body.chat-page:not(.chat-expanded) .chat-container {
        width: 100%;
        height: calc(100dvh - 88px);
        min-height: 0;
        max-height: calc(100dvh - 88px);
        padding: 6px;
        border-radius: 22px;
        overflow: hidden;
    }

    body.chat-page .chat-layout {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.chat-page .chat-main {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.chat-page .chat-main > .chat-peer,
    body.chat-page .chat-main > .chat-message-search-bar,
    body.chat-page .chat-main > .chat-send-form {
        flex: 0 0 auto;
    }

    body.chat-page .chat-main > .chat-messages-shell {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    body.chat-page .chat-messages {
        height: 100%;
        min-height: 0;
        padding: 16px 9px 12px;
        overflow-y: auto;
    }

    body.chat-page .chat-bubble {
        max-width: min(92%, 330px);
    }

    body.chat-page .chat-bubble.mine {
        margin-left: auto;
    }

    body.chat-page .chat-bubble.chat-bubble-media-card {
        max-width: min(92%, 340px);
    }

    body.chat-page .chat-send-form {
        padding: 6px;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        background: linear-gradient(180deg, #eef3f8 0%, #e7eef5 100%);
    }

    body.chat-page .chat-send-main {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        align-items: end;
        gap: 5px;
        padding: 4px;
    }

    body.chat-page .chat-send-form textarea {
        height: 34px;
        min-height: 34px;
        max-height: 92px;
        resize: none;
    }

    body.chat-page .chat-scroll-latest {
        left: 50%;
        right: auto;
        bottom: 10px;
        transform: translateX(-50%);
    }
}

/* ---------- Consistencia de titulos principales por seccion ---------- */
body.app-page {
    --app-section-title-size: clamp(28px, 2.35vw, 32px);
    --app-section-title-line-height: 1.08;
}

body.app-page .main-container :is(
    .app-section-header,
    .chat-header,
    .forum-header-row,
    .meetings-section-title-row,
    .task-detail-hero-head
) h1 {
    font-size: var(--app-section-title-size);
    line-height: var(--app-section-title-line-height);
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 760px) {
    body.app-page {
        --app-section-title-size: clamp(22px, 6vw, 26px);
    }
}

/* ---------- Consistencia interna de titulos del Escritorio ---------- */
body.app-page .dashboard-container {
    --dashboard-block-title-size: clamp(20px, 1.55vw, 22px);
    --dashboard-card-title-size: 16px;
}

body.app-page .dashboard-container :is(
    .dashboard-projects-head h2,
    .section-proximas > h2,
    .section-actions > h2,
    .dashboard-collapsible-section > summary span
) {
    font-size: var(--dashboard-block-title-size);
    line-height: 1.16;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 900;
}

body.app-page .dashboard-container .dashboard-work-panel-head h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    font-weight: 800;
}

body.app-page .dashboard-container :is(
    .dashboard-task-progress-head h3,
    .dashboard-project-card-head h3,
    .proxima-reunion-title
) {
    font-size: var(--dashboard-card-title-size);
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 800;
}

@media (max-width: 760px) {
    body.app-page .dashboard-container {
        --dashboard-block-title-size: 19px;
        --dashboard-card-title-size: 15px;
    }
}

/* ---------- Cards unificadas estilo Reuniones ---------- */
body.app-page :is(
    .forum-topic-card,
    .dashboard-project-card,
    .admin-card,
    .stat-card,
    .calendar-share-panel
) {
    border: 1px solid #dbe5ff;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(57, 76, 132, 0.08);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

body.app-page :is(
    .forum-topic-card,
    .dashboard-project-card,
    .admin-card,
    .stat-card,
    .calendar-share-panel
):hover {
    border-color: #becfff;
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.14);
}

body.app-page :is(
    .forum-topic-card,
    .dashboard-project-card,
    .admin-card,
    .stat-card
):hover {
    transform: translateY(-2px);
}

body.app-page .forum-topic-card {
    min-height: 300px;
    padding: var(--space-5);
}

body.app-page .forum-topic-card:not(.is-details-open) {
    height: 300px;
}

body.app-page .forum-topic-card.is-details-open,
body.app-page .forum-topic-card.is-context-open {
    border-color: #9fb6ff;
    box-shadow: 0 0 0 2px rgba(72, 105, 210, 0.14), 0 14px 28px rgba(57, 76, 132, 0.14);
}

body.app-page .forum-topic-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

body.app-page .forum-topic-head-badges {
    order: -1;
    justify-content: center;
}

body.app-page .forum-topic-head h3 {
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.app-page .forum-topic-hint {
    margin-top: auto;
    border: 1px dashed #d4e1ff;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 10px;
}

body.app-page .forum-topic-card.is-details-open .forum-topic-hint {
    display: none;
}

body.app-page .dashboard-project-card {
    padding: var(--space-5);
}

body.app-page .admin-card {
    min-height: 150px;
    text-decoration: none;
}

@media (max-width: 760px) {
    body.app-page .forum-topic-card,
    body.app-page .forum-topic-card:not(.is-details-open) {
        height: auto;
        min-height: 240px;
    }

    body.app-page .admin-card {
        min-height: 0;
    }
}

/* Foro en modo cards: misma interaccion visual que Reuniones. */
body.app-page .forum-cards-scroll-shell {
    margin-top: 0;
}

body.app-page .forum-topic-cards.proximas-cards-grid.meetings-cards-grid {
    --meeting-card-fixed-width: 270px;
    --forum-card-fixed-width: var(--meeting-card-fixed-width);
    grid-template-columns: repeat(auto-fill, minmax(var(--meeting-card-fixed-width), var(--meeting-card-fixed-width)));
    justify-content: center;
    align-items: start;
    gap: var(--space-4);
}

body.app-page .forum-topic-cards .forum-topic-card.proxima-reunion-card {
    padding: 0;
    display: block;
    min-height: 148px;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    perspective: 1200px;
}

body.app-page .forum-topic-cards .forum-topic-card.proxima-reunion-card:not(.is-details-open) {
    height: 148px;
}

body.app-page .forum-topic-cards .forum-topic-card.proxima-reunion-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

body.app-page .forum-topic-cards .forum-topic-card .proxima-card-inner {
    min-height: 148px;
}

body.app-page .forum-topic-cards .forum-topic-card.is-details-open,
body.app-page .forum-topic-cards .forum-topic-card.is-details-open .proxima-card-inner {
    min-height: 430px;
    height: 430px;
}

body.app-page .forum-topic-cards .forum-topic-card .proxima-card-front {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    overflow: visible;
}

body.app-page .forum-topic-cards .forum-topic-card.is-details-open .proxima-card-front {
    min-height: 430px;
    z-index: 9;
    border-color: #c7d6ff;
    box-shadow: 0 20px 42px rgba(45, 66, 128, 0.22);
}

body.app-page .forum-topic-cards .forum-topic-card.is-context-open {
    z-index: 24;
}

body.app-page .forum-topic-cards .forum-topic-card.is-context-open .proxima-card-inner {
    transform: rotateY(180deg);
}

body.app-page .forum-topic-cards .forum-topic-card:hover .proxima-card-front {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(57, 76, 132, 0.14);
}

body.app-page .forum-topic-cards .forum-topic-card.is-context-open:hover .proxima-card-front,
body.app-page .forum-topic-cards .forum-topic-card.is-details-open:hover .proxima-card-front {
    transform: none;
}

body.app-page .forum-topic-cards .forum-topic-card .forum-topic-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

body.app-page .forum-topic-cards .forum-topic-card .forum-topic-actions .btn-small,
body.app-page .forum-topic-cards .forum-topic-card .forum-topic-actions .inline-form .btn-small {
    min-height: 38px;
}

@media (max-width: 760px) {
    body.app-page .forum-topic-cards.proximas-cards-grid.meetings-cards-grid {
        --meeting-card-fixed-width: min(100%, 270px);
    }

    body.app-page .forum-topic-cards .forum-topic-card.proxima-reunion-card,
    body.app-page .forum-topic-cards .forum-topic-card.proxima-reunion-card:not(.is-details-open) {
        height: 148px;
        min-height: 148px;
    }

    body.app-page .forum-topic-cards .forum-topic-card .proxima-card-inner {
        min-height: 148px;
    }

    body.app-page .forum-topic-cards .forum-topic-card.is-details-open .proxima-card-front {
        min-height: 430px;
    }
}

/* Chat: documentos adjuntos con tamano uniforme estilo Excel. */
body.chat-page .chat-container,
.chat-container {
    --chat-document-card-width: var(--chat-attachment-card-width, 340px);
}

body.chat-page .chat-bubble.chat-bubble-document-card,
.chat-bubble.chat-bubble-document-card {
    max-width: calc(var(--chat-document-card-width, 340px) + 26px);
}

body.chat-page .chat-attachment-item.is-document,
.chat-attachment-item.is-document {
    width: var(--chat-document-card-width, 340px);
    max-width: 100%;
    min-width: 0;
}

body.chat-page .chat-document-preview-card.is-generated-preview .chat-document-preview-media,
.chat-document-preview-card.is-generated-preview .chat-document-preview-media {
    height: 132px;
}

body.chat-page .chat-document-preview-card.is-generated-preview .chat-document-page,
.chat-document-preview-card.is-generated-preview .chat-document-page {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 26px 28px;
}

@media (max-width: 760px) {
    body.chat-page .chat-container,
    .chat-container {
        --chat-document-card-width: var(--chat-attachment-card-width, min(340px, 100%, calc(100vw - 112px)));
    }

    body.chat-page .chat-document-preview-card.is-generated-preview .chat-document-preview-media,
    .chat-document-preview-card.is-generated-preview .chat-document-preview-media {
        height: 112px;
    }
}

/* Chat: jerarquia tipografica de burbujas. */
body.chat-page .chat-bubble header,
.chat-bubble header {
    align-items: baseline;
    gap: 8px;
}

body.chat-page .chat-bubble header strong,
.chat-bubble header strong {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}

body.chat-page .chat-bubble header small,
.chat-bubble header small {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
}

body.chat-page .chat-message-content,
.chat-message-content {
    font-size: 15px;
    line-height: 1.42;
}

body.chat-page .chat-message-meta,
.chat-message-meta,
body.chat-page .chat-bubble-status small,
.chat-bubble-status small,
body.chat-page .chat-delivery-state,
.chat-delivery-state {
    font-size: 11px;
    line-height: 1.2;
}

@media (max-width: 760px) {
    body.chat-page .chat-bubble header strong,
    .chat-bubble header strong {
        font-size: 12px;
    }

    body.chat-page .chat-message-content,
    .chat-message-content {
        font-size: 14px;
    }
}

/* Chat: preferencias visuales por usuario. */
body.chat-page #chat-app {
    --chat-theme-accent: #3156ff;
    --chat-theme-accent-2: #159ce4;
    --chat-canvas-start: #d7e3eb;
    --chat-canvas-end: #cfdde7;
    --chat-canvas-solid: #d4e0e9;
    --chat-pattern-color: rgba(68, 96, 124, 0.14);
    --chat-scroll-track-theme: #c5d3df;
    --chat-scroll-thumb-theme: #8ea5bc;
    --chat-incoming-bg: #fdfefe;
    --chat-incoming-border: #d7dee6;
    --chat-incoming-text: #2a415f;
    --chat-incoming-meta: #69809a;
    --chat-outgoing-bg: #d8efb6;
    --chat-outgoing-border: #c2dea0;
    --chat-outgoing-text: #28435c;
    --chat-outgoing-meta: #647f91;
}

body.chat-page #chat-app.chat-theme-ocean {
    --chat-theme-accent: #137aa5;
    --chat-theme-accent-2: #20a8d5;
    --chat-canvas-start: #d7eaf1;
    --chat-canvas-end: #c8dce7;
    --chat-canvas-solid: #d1e2ea;
    --chat-pattern-color: rgba(31, 104, 140, 0.16);
    --chat-scroll-track-theme: #bfd4de;
    --chat-scroll-thumb-theme: #6f9fb4;
    --chat-incoming-bg: #f9fdff;
    --chat-incoming-border: #bed9e6;
    --chat-incoming-text: #23465e;
    --chat-incoming-meta: #5c7e91;
    --chat-outgoing-bg: #bfe5f2;
    --chat-outgoing-border: #89c8dc;
    --chat-outgoing-text: #1e4556;
    --chat-outgoing-meta: #55798a;
}

body.chat-page #chat-app.chat-theme-mint {
    --chat-theme-accent: #23845a;
    --chat-theme-accent-2: #44ad78;
    --chat-canvas-start: #dcebe3;
    --chat-canvas-end: #cfdfd5;
    --chat-canvas-solid: #d7e6dd;
    --chat-pattern-color: rgba(48, 115, 80, 0.14);
    --chat-scroll-track-theme: #c7dacf;
    --chat-scroll-thumb-theme: #79a38a;
    --chat-incoming-bg: #fbfffc;
    --chat-incoming-border: #c8dfd0;
    --chat-incoming-text: #294b3a;
    --chat-incoming-meta: #688476;
    --chat-outgoing-bg: #ccefcf;
    --chat-outgoing-border: #9bd3a4;
    --chat-outgoing-text: #274a34;
    --chat-outgoing-meta: #5d8069;
}

body.chat-page #chat-app.chat-theme-lavender {
    --chat-theme-accent: #7651b5;
    --chat-theme-accent-2: #9b70d2;
    --chat-canvas-start: #e8e2f2;
    --chat-canvas-end: #dcd3ea;
    --chat-canvas-solid: #e3dced;
    --chat-pattern-color: rgba(103, 76, 145, 0.14);
    --chat-scroll-track-theme: #d5cce4;
    --chat-scroll-thumb-theme: #9b88b8;
    --chat-incoming-bg: #fffefe;
    --chat-incoming-border: #dcd0eb;
    --chat-incoming-text: #46375d;
    --chat-incoming-meta: #7c6d91;
    --chat-outgoing-bg: #e2d1f5;
    --chat-outgoing-border: #c6abe7;
    --chat-outgoing-text: #49335f;
    --chat-outgoing-meta: #75668a;
}

body.chat-page #chat-app.chat-theme-sand {
    --chat-theme-accent: #a66c2b;
    --chat-theme-accent-2: #d49a4e;
    --chat-canvas-start: #f0e6d8;
    --chat-canvas-end: #e5d7c4;
    --chat-canvas-solid: #ebe0d1;
    --chat-pattern-color: rgba(134, 91, 46, 0.14);
    --chat-scroll-track-theme: #ded0bd;
    --chat-scroll-thumb-theme: #ae9272;
    --chat-incoming-bg: #fffdf9;
    --chat-incoming-border: #e2d3bf;
    --chat-incoming-text: #59452f;
    --chat-incoming-meta: #8a765f;
    --chat-outgoing-bg: #f3dfb7;
    --chat-outgoing-border: #dcbc7d;
    --chat-outgoing-text: #594328;
    --chat-outgoing-meta: #856f52;
}

body.chat-page #chat-app.chat-bg-mist .chat-messages {
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 82% 4%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, var(--chat-canvas-start) 0%, var(--chat-canvas-end) 100%);
}

body.chat-page #chat-app.chat-bg-solid .chat-messages {
    background: var(--chat-canvas-solid);
}

body.chat-page #chat-app.chat-bg-dots .chat-messages {
    background-color: var(--chat-canvas-solid);
    background-image:
        radial-gradient(circle, var(--chat-pattern-color) 1.15px, transparent 1.25px),
        linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
    background-size: 18px 18px, 100% 100%;
}

body.chat-page #chat-app.chat-bg-grid .chat-messages {
    background-color: var(--chat-canvas-solid);
    background-image:
        linear-gradient(var(--chat-pattern-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--chat-pattern-color) 1px, transparent 1px),
        linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
    background-size: 24px 24px, 24px 24px, 100% 100%;
}

body.chat-page #chat-app .chat-messages {
    scrollbar-color: var(--chat-scroll-thumb-theme) var(--chat-scroll-track-theme);
}

body.chat-page #chat-app .chat-messages::-webkit-scrollbar-track {
    background: var(--chat-scroll-track-theme);
}

body.chat-page #chat-app .chat-messages::-webkit-scrollbar-thumb {
    background: var(--chat-scroll-thumb-theme);
    border-color: var(--chat-scroll-track-theme);
}

body.chat-page #chat-app .chat-section-selector-btn.is-active,
body.chat-page #chat-app .chat-new-chat-btn,
body.chat-page #chat-app .chat-send-submit,
body.chat-page #chat-app .chat-expand-btn.is-active {
    border-color: var(--chat-theme-accent);
    background: linear-gradient(135deg, var(--chat-theme-accent), var(--chat-theme-accent-2));
}

body.chat-page #chat-app .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-astra):not(.chat-bubble-scheduled):not(.chat-bubble-pinned):not(.chat-bubble-highlighted) {
    border-color: var(--chat-incoming-border);
    background: var(--chat-incoming-bg);
    color: var(--chat-incoming-text);
}

body.chat-page #chat-app .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-scheduled):not(.chat-bubble-pinned):not(.chat-bubble-highlighted) {
    border-color: var(--chat-outgoing-border);
    background: var(--chat-outgoing-bg);
    color: var(--chat-outgoing-text);
}

body.chat-page #chat-app .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-astra):not(.chat-bubble-scheduled) :is(.chat-message-content, header strong) {
    color: var(--chat-incoming-text);
}

body.chat-page #chat-app .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-astra):not(.chat-bubble-scheduled) header small {
    color: var(--chat-incoming-meta);
}

body.chat-page #chat-app .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-scheduled) :is(.chat-message-content, header strong) {
    color: var(--chat-outgoing-text);
}

body.chat-page #chat-app .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only):not(.chat-bubble-scheduled) header small {
    color: var(--chat-outgoing-meta);
}

body.chat-page #chat-app.chat-bubbles-soft .chat-bubble:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    padding: 10px 12px;
    border-radius: 15px 15px 15px 8px;
    box-shadow: 0 5px 10px rgba(50, 72, 104, 0.1);
}

body.chat-page #chat-app.chat-bubbles-soft .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    border-radius: 15px 15px 8px 15px;
}

body.chat-page #chat-app.chat-bubbles-compact .chat-bubble:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    padding: 7px 10px;
    border-radius: 10px 10px 10px 5px;
    box-shadow: 0 3px 8px rgba(50, 72, 104, 0.08);
}

body.chat-page #chat-app.chat-bubbles-compact .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    border-radius: 10px 10px 5px 10px;
}

body.chat-page #chat-app.chat-bubbles-square .chat-bubble:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    padding: 9px 11px;
    border-radius: 5px;
    box-shadow: none;
}

/* Sidebar compacta: cambio visible sin reducir el area tactil movil. */
@media (min-width: 761px) {
    body.chat-page #chat-app.chat-global-compact .chat-layout,
    body.chat-page.chat-expanded #chat-app.chat-global-compact .chat-layout {
        grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    }

    body.chat-page #chat-app.chat-global-compact .chat-search {
        padding: 8px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-search-row {
        gap: 5px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-search-row .chat-icon-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-section-selector {
        gap: 4px;
        margin-top: 7px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-section-selector-btn {
        padding: 6px 3px;
        font-size: 10.5px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-users-header {
        padding: 8px 10px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-user-item {
        min-height: 54px;
        padding: 7px 9px;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 8px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-avatar:not(.chat-peer-avatar) {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 11px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-user-copy strong {
        font-size: 13px;
    }

    body.chat-page #chat-app.chat-global-compact .chat-user-copy small,
    body.chat-page #chat-app.chat-global-compact .chat-user-meta small {
        font-size: 10px;
    }
}

/* Modal de preferencias y vista previa. */
.app-modal.chat-preferences-modal .app-modal-dialog {
    width: min(720px, calc(100vw - 28px));
    max-width: 720px;
}

.chat-settings-check > small {
    margin-left: auto;
    color: #7180a1;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.chat-appearance-settings {
    display: grid;
    gap: 12px;
    margin-top: 2px;
    padding: 14px;
    border: 1px solid #dbe5ff;
    border-radius: 14px;
    background: #f8faff;
}

.chat-settings-group-title {
    display: grid;
    gap: 2px;
}

.chat-settings-group-title strong {
    color: #2f4372;
    font-size: 14px;
}

.chat-settings-group-title small,
.chat-settings-field-label {
    color: #6d7da2;
    font-size: 11px;
}

.chat-settings-field-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.chat-theme-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.chat-theme-option {
    position: relative;
    cursor: pointer;
}

.chat-theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chat-theme-option-card {
    min-height: 60px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid #d8e1f6;
    border-radius: 11px;
    background: #ffffff;
    color: #41537c;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.chat-theme-option:hover .chat-theme-option-card {
    transform: translateY(-1px);
    border-color: #aebee9;
}

.chat-theme-option input:checked + .chat-theme-option-card {
    border-color: #3156ff;
    box-shadow: 0 0 0 3px rgba(49, 86, 255, 0.13);
}

.chat-theme-option input:focus-visible + .chat-theme-option-card {
    outline: 2px solid #3156ff;
    outline-offset: 2px;
}

.chat-theme-option-card strong {
    font-size: 11px;
}

.chat-theme-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
}

.chat-theme-option-astra .chat-theme-swatches i:nth-child(1) { background: #3156ff; }
.chat-theme-option-astra .chat-theme-swatches i:nth-child(2) { background: #d8efb6; }
.chat-theme-option-astra .chat-theme-swatches i:nth-child(3) { background: #d7e3eb; }
.chat-theme-option-ocean .chat-theme-swatches i:nth-child(1) { background: #137aa5; }
.chat-theme-option-ocean .chat-theme-swatches i:nth-child(2) { background: #bfe5f2; }
.chat-theme-option-ocean .chat-theme-swatches i:nth-child(3) { background: #d7eaf1; }
.chat-theme-option-mint .chat-theme-swatches i:nth-child(1) { background: #23845a; }
.chat-theme-option-mint .chat-theme-swatches i:nth-child(2) { background: #ccefcf; }
.chat-theme-option-mint .chat-theme-swatches i:nth-child(3) { background: #dcebe3; }
.chat-theme-option-lavender .chat-theme-swatches i:nth-child(1) { background: #7651b5; }
.chat-theme-option-lavender .chat-theme-swatches i:nth-child(2) { background: #e2d1f5; }
.chat-theme-option-lavender .chat-theme-swatches i:nth-child(3) { background: #e8e2f2; }
.chat-theme-option-sand .chat-theme-swatches i:nth-child(1) { background: #a66c2b; }
.chat-theme-option-sand .chat-theme-swatches i:nth-child(2) { background: #f3dfb7; }
.chat-theme-option-sand .chat-theme-swatches i:nth-child(3) { background: #f0e6d8; }

.chat-appearance-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.chat-appearance-controls select {
    width: 100%;
    min-height: 38px;
}

.chat-theme-live-preview {
    --preview-canvas-start: #d7e3eb;
    --preview-canvas-end: #cfdde7;
    --preview-pattern: rgba(68, 96, 124, 0.14);
    --preview-incoming: #fdfefe;
    --preview-outgoing: #d8efb6;
    min-height: 94px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid #d6dfef;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--preview-canvas-start), var(--preview-canvas-end));
}

.chat-theme-live-preview[data-theme="ocean"] { --preview-canvas-start: #d7eaf1; --preview-canvas-end: #c8dce7; --preview-pattern: rgba(31, 104, 140, 0.16); --preview-incoming: #f9fdff; --preview-outgoing: #bfe5f2; }
.chat-theme-live-preview[data-theme="mint"] { --preview-canvas-start: #dcebe3; --preview-canvas-end: #cfdfd5; --preview-pattern: rgba(48, 115, 80, 0.14); --preview-incoming: #fbfffc; --preview-outgoing: #ccefcf; }
.chat-theme-live-preview[data-theme="lavender"] { --preview-canvas-start: #e8e2f2; --preview-canvas-end: #dcd3ea; --preview-pattern: rgba(103, 76, 145, 0.14); --preview-incoming: #fffefe; --preview-outgoing: #e2d1f5; }
.chat-theme-live-preview[data-theme="sand"] { --preview-canvas-start: #f0e6d8; --preview-canvas-end: #e5d7c4; --preview-pattern: rgba(134, 91, 46, 0.14); --preview-incoming: #fffdf9; --preview-outgoing: #f3dfb7; }

.chat-theme-live-preview[data-background="solid"] {
    background: var(--preview-canvas-start);
}

.chat-theme-live-preview[data-background="dots"] {
    background-color: var(--preview-canvas-start);
    background-image: radial-gradient(circle, var(--preview-pattern) 1.1px, transparent 1.2px), linear-gradient(180deg, var(--preview-canvas-start), var(--preview-canvas-end));
    background-size: 16px 16px, 100% 100%;
}

.chat-theme-live-preview[data-background="grid"] {
    background-color: var(--preview-canvas-start);
    background-image: linear-gradient(var(--preview-pattern) 1px, transparent 1px), linear-gradient(90deg, var(--preview-pattern) 1px, transparent 1px), linear-gradient(180deg, var(--preview-canvas-start), var(--preview-canvas-end));
    background-size: 20px 20px, 20px 20px, 100% 100%;
}

.chat-theme-preview-bubble {
    width: fit-content;
    max-width: 76%;
    padding: 7px 10px;
    border: 1px solid rgba(65, 84, 111, 0.15);
    border-radius: 12px 12px 12px 5px;
    background: var(--preview-incoming);
    color: #334764;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(45, 63, 91, 0.09);
}

.chat-theme-preview-bubble.is-outgoing {
    margin-left: auto;
    border-radius: 12px 12px 5px 12px;
    background: var(--preview-outgoing);
}

.chat-theme-live-preview[data-bubbles="compact"] .chat-theme-preview-bubble {
    padding: 5px 8px;
    border-radius: 8px 8px 8px 4px;
}

.chat-theme-live-preview[data-bubbles="compact"] .chat-theme-preview-bubble.is-outgoing {
    border-radius: 8px 8px 4px 8px;
}

.chat-theme-live-preview[data-bubbles="square"] .chat-theme-preview-bubble {
    border-radius: 3px;
    box-shadow: none;
}

@media (max-width: 760px) {
    .app-modal.chat-preferences-modal .app-modal-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .chat-theme-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .chat-appearance-controls {
        grid-template-columns: 1fr;
    }

    .chat-settings-check {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .chat-settings-check > small {
        width: calc(100% - 25px);
        margin-left: 25px;
        text-align: left;
    }

    .app-modal.chat-preferences-modal .app-modal-footer {
        flex-wrap: wrap;
    }
}

/* ================================================================
   Apariencia global de la aplicacion
   La apariencia general no invade el lienzo, las burbujas ni los
   mensajes de #chat-app: el chat conserva sus preferencias propias.
   ================================================================ */
html:is(
    .app-theme-astra,
    .app-theme-ocean,
    .app-theme-mint,
    .app-theme-lavender,
    .app-theme-sand
) {
    color-scheme: light;
    --app-accent: #3156ff;
    --app-accent-strong: #233ed6;
    --app-accent-secondary: #0877b8;
    --app-accent-rgb: 49, 86, 255;
    --app-page-start: #f7f9ff;
    --app-page-middle: #f1f5ff;
    --app-page-end: #eef2ff;
    --app-glow-a: #dbe6ff;
    --app-glow-b: #d7f3ff;
    --app-glow-c: #d5dcff;
    --app-panel-bg: #ffffff;
    --app-panel-muted: #f8faff;
    --app-card-bg: #ffffff;
    --app-control-bg: #ffffff;
    --app-panel-border: #dbe5ff;
    --app-control-border: #d3ddfa;
    --app-text: #1f2a44;
    --app-text-soft: #64708b;
    --app-accent-soft: #edf2ff;
    --app-accent-soft-strong: #e0e8ff;
    --app-header-bg: rgba(255, 255, 255, 0.88);
    --app-footer-bg: rgba(255, 255, 255, 0.82);
    --app-pattern: rgba(49, 86, 255, 0.09);
    --app-focus-ring: rgba(49, 86, 255, 0.17);
    --app-panel-radius: 24px;
    --app-card-radius: 18px;
    --app-control-radius: 12px;
    --app-panel-shadow: 0 12px 30px rgba(38, 60, 116, 0.09);
    --app-card-shadow: 0 8px 22px rgba(57, 76, 132, 0.08);
}

html.app-theme-ocean {
    --app-accent: #126487;
    --app-accent-strong: #0b4f6d;
    --app-accent-secondary: #0d6f8f;
    --app-accent-rgb: 18, 100, 135;
    --app-page-start: #f3fbfd;
    --app-page-middle: #eaf6fa;
    --app-page-end: #e2f1f6;
    --app-glow-a: #c8e8f1;
    --app-glow-b: #c6f0ef;
    --app-glow-c: #d1e8f3;
    --app-panel-muted: #f4fafc;
    --app-panel-border: #cfe5ec;
    --app-control-border: #c6dfe8;
    --app-accent-soft: #e4f3f7;
    --app-accent-soft-strong: #d4eaf1;
    --app-pattern: rgba(18, 100, 135, 0.09);
    --app-focus-ring: rgba(18, 100, 135, 0.17);
}

html.app-theme-mint {
    --app-accent: #1c6a49;
    --app-accent-strong: #14523a;
    --app-accent-secondary: #237a54;
    --app-accent-rgb: 28, 106, 73;
    --app-page-start: #f5fcf8;
    --app-page-middle: #edf8f1;
    --app-page-end: #e7f3ec;
    --app-glow-a: #ceeada;
    --app-glow-b: #d4f0df;
    --app-glow-c: #cfe7da;
    --app-panel-muted: #f5fbf7;
    --app-panel-border: #d1e7da;
    --app-control-border: #c9e0d3;
    --app-accent-soft: #e5f4eb;
    --app-accent-soft-strong: #d6eadf;
    --app-pattern: rgba(28, 106, 73, 0.09);
    --app-focus-ring: rgba(28, 106, 73, 0.17);
}

html.app-theme-lavender {
    --app-accent: #6744a1;
    --app-accent-strong: #513381;
    --app-accent-secondary: #7550a8;
    --app-accent-rgb: 103, 68, 161;
    --app-page-start: #fbf8fd;
    --app-page-middle: #f5f0fa;
    --app-page-end: #eee8f6;
    --app-glow-a: #e3d7f2;
    --app-glow-b: #eadcf4;
    --app-glow-c: #ded5eb;
    --app-panel-muted: #faf7fc;
    --app-panel-border: #e1d7ec;
    --app-control-border: #dacfea;
    --app-accent-soft: #f0e9f8;
    --app-accent-soft-strong: #e5daf2;
    --app-pattern: rgba(103, 68, 161, 0.09);
    --app-focus-ring: rgba(103, 68, 161, 0.17);
}

html.app-theme-sand {
    --app-accent: #7f4b18;
    --app-accent-strong: #64380f;
    --app-accent-secondary: #8f5a21;
    --app-accent-rgb: 127, 75, 24;
    --app-page-start: #fdfaf5;
    --app-page-middle: #f9f3e9;
    --app-page-end: #f3ecdf;
    --app-glow-a: #ecddc6;
    --app-glow-b: #f4e3c7;
    --app-glow-c: #e8dccb;
    --app-panel-muted: #fcf8f2;
    --app-panel-border: #eadcc9;
    --app-control-border: #e2d3bf;
    --app-accent-soft: #f7ecdd;
    --app-accent-soft-strong: #eedfc9;
    --app-pattern: rgba(127, 75, 24, 0.09);
    --app-focus-ring: rgba(127, 75, 24, 0.17);
}

html.app-surfaces-soft {
    --app-panel-radius: 24px;
    --app-card-radius: 18px;
    --app-control-radius: 12px;
    --app-panel-shadow: 0 12px 30px rgba(38, 60, 116, 0.09);
    --app-card-shadow: 0 8px 22px rgba(57, 76, 132, 0.08);
}

html.app-surfaces-flat,
html.app-surfaces-compact {
    --app-panel-radius: 14px;
    --app-card-radius: 12px;
    --app-control-radius: 10px;
    --app-panel-shadow: 0 4px 12px rgba(38, 60, 116, 0.06);
    --app-card-shadow: 0 2px 7px rgba(57, 76, 132, 0.06);
}

html.app-surfaces-square {
    --app-panel-radius: 6px;
    --app-card-radius: 5px;
    --app-control-radius: 4px;
    --app-panel-shadow: none;
    --app-card-shadow: none;
}

/* Compatibilidad con los tokens historicos, limitada a secciones que no son chat. */
html:is(
    .app-theme-astra,
    .app-theme-ocean,
    .app-theme-mint,
    .app-theme-lavender,
    .app-theme-sand
) body.app-page:not(.chat-page) {
    --bg: var(--app-page-end);
    --bg-soft: var(--app-panel-muted);
    --panel: var(--app-panel-bg);
    --panel-border: var(--app-panel-border);
    --text: var(--app-text);
    --text-soft: var(--app-text-soft);
    --primary: var(--app-accent);
    --primary-strong: var(--app-accent-strong);
    --secondary: var(--app-accent-secondary);
}

html.app-bg-mist body.app-page {
    background:
        radial-gradient(circle at 15% 20%, var(--app-glow-a) 0%, transparent 30%),
        radial-gradient(circle at 85% 10%, var(--app-glow-b) 0%, transparent 28%),
        linear-gradient(180deg, var(--app-page-start) 0%, var(--app-page-middle) 45%, var(--app-page-end) 100%);
    background-attachment: fixed;
}

html.app-bg-solid body.app-page {
    background: var(--app-page-middle);
}

html.app-bg-dots body.app-page {
    background-color: var(--app-page-middle);
    background-image:
        radial-gradient(circle, var(--app-pattern) 1.2px, transparent 1.3px),
        linear-gradient(180deg, var(--app-page-start), var(--app-page-end));
    background-size: 20px 20px, 100% 100%;
    background-attachment: fixed;
}

html.app-bg-grid body.app-page {
    background-color: var(--app-page-middle);
    background-image:
        linear-gradient(var(--app-pattern) 1px, transparent 1px),
        linear-gradient(90deg, var(--app-pattern) 1px, transparent 1px),
        linear-gradient(180deg, var(--app-page-start), var(--app-page-end));
    background-size: 26px 26px, 26px 26px, 100% 100%;
    background-attachment: fixed;
}

html:is(.app-bg-solid, .app-bg-dots, .app-bg-grid) body.app-page .bg-orb {
    opacity: 0.28;
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page .orb-a {
    background: var(--app-glow-a);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page .orb-b {
    background: var(--app-glow-b);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page .orb-c {
    background: var(--app-glow-c);
}

/* Marco compartido: topbar, pie, menu movil y desplegables. */
html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page > .header {
    background: var(--app-header-bg);
    border-bottom-color: rgba(var(--app-accent-rgb), 0.2);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page > .footer {
    background: var(--app-footer-bg);
    border-top-color: rgba(var(--app-accent-rgb), 0.2);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(.logo a, .footer-admin-link) {
    color: var(--app-accent);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(
    .nav a.active,
    .mobile-sidebar-nav a.active,
    .mobile-bottom-nav-item.active
) {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--app-accent), var(--app-accent-secondary));
    box-shadow: 0 8px 20px rgba(var(--app-accent-rgb), 0.24);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(
    .nav a:not(.active):hover,
    .mobile-sidebar-nav a:not(.active):hover,
    .profile-drawer a:hover,
    .user-pill-btn:hover,
    .user-action-icon:hover
) {
    color: var(--app-accent);
    border-color: rgba(var(--app-accent-rgb), 0.2);
    background: var(--app-accent-soft);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(
    .mobile-sidebar,
    .mobile-bottom-nav,
    .profile-drawer,
    .notification-drawer
) {
    background: var(--app-panel-bg);
    border-color: var(--app-panel-border);
    box-shadow: var(--app-panel-shadow);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(
    .user-pill,
    .user-pill-btn,
    .mobile-sidebar-toggle,
    .header-search-form input[type="search"],
    .mobile-sidebar-search-row input[type="search"],
    .mobile-sidebar-search-submit
) {
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page :is(
    .header-search-form input[type="search"],
    .mobile-sidebar-search-row input[type="search"]
):focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px var(--app-focus-ring);
}

/* Superficies generales. Deliberadamente no hay selectores descendientes de #chat-app. */
html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .dashboard-container,
    .calendar-container,
    .calendar-requests-container,
    .meetings-container,
    .users-container,
    .logs-container,
    .profile-container,
    .forum-container,
    .methodology-container,
    .notifications-container,
    .search-container,
    .form-container,
    .detail-container,
    .admin-sidebar,
    .admin-content,
    .profile-section,
    .detail-section
) {
    background: var(--app-panel-bg);
    border-color: var(--app-panel-border);
    border-radius: var(--app-panel-radius);
    box-shadow: var(--app-panel-shadow);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .app-section-toolbar,
    .toolbar,
    .forum-toolbar,
    .meetings-toolbar,
    .calendar-navigation,
    .calendar-request-filters,
    .profile-tabs
) {
    background: var(--app-panel-muted);
    border-color: var(--app-panel-border);
    border-radius: var(--app-control-radius);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .forum-topic-card,
    .dashboard-project-card,
    .dashboard-work-panel,
    .admin-card,
    .stat-card,
    .calendar-share-panel,
    .notification-item,
    .profile-notification-item,
    .proxima-card-front,
    .proxima-card-back
) {
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .forum-topic-card,
    .dashboard-project-card,
    .admin-card,
    .stat-card,
    .calendar-share-panel
):hover {
    border-color: rgba(var(--app-accent-rgb), 0.35);
    box-shadow: 0 12px 26px rgba(var(--app-accent-rgb), 0.13);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select
) {
    background-color: var(--app-control-bg);
    border-color: var(--app-control-border);
    color: var(--app-text);
    border-radius: var(--app-control-radius);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select
):focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px var(--app-focus-ring);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .btn-primary,
    .profile-tab.is-active,
    .meetings-view-link.is-active,
    .task-view-btn.is-active,
    .task-thread-tab.is-active,
    .pagination .active,
    [data-view].is-active,
    [aria-pressed="true"].btn
) {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--app-accent), var(--app-accent-secondary));
    box-shadow: 0 8px 20px rgba(var(--app-accent-rgb), 0.24);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .profile-tab:not(.is-active):hover,
    .meetings-view-link:not(.is-active):hover,
    .task-view-btn:not(.is-active):hover,
    .task-thread-tab:not(.is-active):hover
) {
    color: var(--app-accent);
    border-color: rgba(var(--app-accent-rgb), 0.28);
    background: var(--app-accent-soft);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .btn-primary,
    .profile-tab,
    .meetings-view-link,
    .task-view-btn,
    .task-thread-tab,
    a,
    button,
    input,
    textarea,
    select
):focus-visible {
    outline: 3px solid var(--app-focus-ring);
    outline-offset: 2px;
}

/* ---------- Panel Mi Cuenta > Apariencia ---------- */
.profile-appearance-header,
.profile-appearance-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-appearance-header > div,
.profile-appearance-intro > div {
    min-width: 0;
}

.profile-appearance-header h2,
.profile-appearance-intro h2 {
    margin-bottom: 5px;
}

.profile-appearance-header p,
.profile-appearance-intro p {
    margin: 0;
    color: var(--app-text-soft, var(--text-soft));
}

.profile-appearance-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--app-accent-rgb, 49, 86, 255), 0.2);
    border-radius: 999px;
    background: var(--app-accent-soft, #edf2ff);
    color: var(--app-accent, #3156ff);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.profile-appearance-form {
    display: grid;
    gap: 18px;
}

.profile-appearance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.profile-appearance-controls {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.profile-appearance-group {
    min-width: 0;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--app-panel-border, #dbe5ff);
    border-radius: var(--app-card-radius, 16px);
    background: var(--app-panel-muted, #f8faff);
}

.profile-appearance-group > legend,
.profile-appearance-group-title {
    padding: 0 5px;
    color: var(--app-text, var(--text));
    font-size: 14px;
    font-weight: 800;
}

.profile-appearance-group-description {
    margin: 2px 0 12px;
    color: var(--app-text-soft, var(--text-soft));
    font-size: 12px;
    line-height: 1.4;
}

.appearance-options,
.profile-appearance-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.appearance-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.appearance-option > input[type="radio"],
.appearance-option > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.appearance-option-card {
    min-height: 72px;
    height: 100%;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--app-control-border, #d3ddfa);
    border-radius: var(--app-control-radius, 12px);
    background: var(--app-control-bg, #ffffff);
    color: var(--app-text, var(--text));
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.appearance-option:hover .appearance-option-card {
    transform: translateY(-1px);
    border-color: rgba(var(--app-accent-rgb, 49, 86, 255), 0.38);
}

.appearance-option > input:checked + .appearance-option-card {
    border-color: var(--app-accent, #3156ff);
    box-shadow: 0 0 0 3px var(--app-focus-ring, rgba(49, 86, 255, 0.17));
}

.appearance-option > input:focus-visible + .appearance-option-card {
    outline: 3px solid var(--app-focus-ring, rgba(49, 86, 255, 0.17));
    outline-offset: 2px;
}

.appearance-option-card strong,
.appearance-option-label {
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appearance-option-swatches,
.appearance-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2ff;
}

.appearance-option-swatches > *,
.appearance-swatches > * {
    min-width: 0;
    background: var(--appearance-swatch-1, #3156ff);
}

.appearance-option-swatches > :nth-child(2),
.appearance-swatches > :nth-child(2) {
    background: var(--appearance-swatch-2, #dbe6ff);
}

.appearance-option-swatches > :nth-child(3),
.appearance-swatches > :nth-child(3) {
    background: var(--appearance-swatch-3, #eef2ff);
}

.appearance-option-astra,
.appearance-option[data-value="astra"],
.appearance-option[data-theme="astra"] {
    --appearance-swatch-1: #3156ff;
    --appearance-swatch-2: #0ea5e9;
    --appearance-swatch-3: #dbe6ff;
}

.appearance-option-ocean,
.appearance-option[data-value="ocean"],
.appearance-option[data-theme="ocean"] {
    --appearance-swatch-1: #126487;
    --appearance-swatch-2: #72bfd5;
    --appearance-swatch-3: #d9eef4;
}

.appearance-option-mint,
.appearance-option[data-value="mint"],
.appearance-option[data-theme="mint"] {
    --appearance-swatch-1: #1c6a49;
    --appearance-swatch-2: #7fc99f;
    --appearance-swatch-3: #dff1e7;
}

.appearance-option-lavender,
.appearance-option[data-value="lavender"],
.appearance-option[data-theme="lavender"] {
    --appearance-swatch-1: #6744a1;
    --appearance-swatch-2: #b99bd8;
    --appearance-swatch-3: #ece3f6;
}

.appearance-option-sand,
.appearance-option[data-value="sand"],
.appearance-option[data-theme="sand"] {
    --appearance-swatch-1: #7f4b18;
    --appearance-swatch-2: #d7aa6d;
    --appearance-swatch-3: #f2e5d3;
}

.profile-appearance-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-appearance-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.profile-appearance-field label {
    color: var(--app-text, var(--text));
    font-size: 13px;
    font-weight: 800;
}

.profile-appearance-field select {
    width: 100%;
    min-height: 44px;
}

.profile-appearance-preview-wrap {
    min-width: 0;
    position: sticky;
    top: 66px;
}

.profile-appearance-preview-wrap > strong,
.profile-appearance-preview-title {
    display: block;
    margin-bottom: 9px;
    color: var(--app-text, var(--text));
    font-size: 14px;
    font-weight: 800;
}

.appearance-preview {
    --appearance-preview-primary: #3156ff;
    --appearance-preview-secondary: #0877b8;
    --appearance-preview-start: #f7f9ff;
    --appearance-preview-end: #eef2ff;
    --appearance-preview-pattern: rgba(49, 86, 255, 0.11);
    --appearance-preview-border: #dbe5ff;
    --appearance-preview-radius: 18px;
    --appearance-preview-card-radius: 12px;
    --appearance-preview-shadow: 0 10px 24px rgba(38, 60, 116, 0.12);
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-radius);
    background: linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    color: #243453;
    box-shadow: var(--appearance-preview-shadow);
}

.appearance-preview:is([data-theme="ocean"], [data-palette="ocean"]) { --appearance-preview-primary: #126487; --appearance-preview-secondary: #0d6f8f; --appearance-preview-start: #f3fbfd; --appearance-preview-end: #e2f1f6; --appearance-preview-pattern: rgba(18, 100, 135, 0.11); --appearance-preview-border: #cfe5ec; }
.appearance-preview:is([data-theme="mint"], [data-palette="mint"]) { --appearance-preview-primary: #1c6a49; --appearance-preview-secondary: #237a54; --appearance-preview-start: #f5fcf8; --appearance-preview-end: #e7f3ec; --appearance-preview-pattern: rgba(28, 106, 73, 0.11); --appearance-preview-border: #d1e7da; }
.appearance-preview:is([data-theme="lavender"], [data-palette="lavender"]) { --appearance-preview-primary: #6744a1; --appearance-preview-secondary: #7550a8; --appearance-preview-start: #fbf8fd; --appearance-preview-end: #eee8f6; --appearance-preview-pattern: rgba(103, 68, 161, 0.11); --appearance-preview-border: #e1d7ec; }
.appearance-preview:is([data-theme="sand"], [data-palette="sand"]) { --appearance-preview-primary: #7f4b18; --appearance-preview-secondary: #8f5a21; --appearance-preview-start: #fdfaf5; --appearance-preview-end: #f3ecdf; --appearance-preview-pattern: rgba(127, 75, 24, 0.11); --appearance-preview-border: #eadcc9; }

.appearance-preview:is([data-background="solid"], [data-bg="solid"]) {
    background: var(--appearance-preview-end);
}

.appearance-preview:is([data-background="dots"], [data-bg="dots"]) {
    background-color: var(--appearance-preview-start);
    background-image:
        radial-gradient(circle, var(--appearance-preview-pattern) 1.2px, transparent 1.3px),
        linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    background-size: 16px 16px, 100% 100%;
}

.appearance-preview:is([data-background="grid"], [data-bg="grid"]) {
    background-color: var(--appearance-preview-start);
    background-image:
        linear-gradient(var(--appearance-preview-pattern) 1px, transparent 1px),
        linear-gradient(90deg, var(--appearance-preview-pattern) 1px, transparent 1px),
        linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    background-size: 19px 19px, 19px 19px, 100% 100%;
}

.appearance-preview:is([data-surfaces="flat"], [data-surfaces="compact"], [data-surface="flat"], [data-surface="compact"]) {
    --appearance-preview-radius: 12px;
    --appearance-preview-card-radius: 9px;
    --appearance-preview-shadow: 0 3px 10px rgba(38, 60, 116, 0.07);
}

.appearance-preview:is([data-surfaces="square"], [data-surface="square"]) {
    --appearance-preview-radius: 5px;
    --appearance-preview-card-radius: 3px;
    --appearance-preview-shadow: none;
}

.appearance-preview-topbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--appearance-preview-border);
}

.appearance-preview-brand,
.appearance-preview-logo {
    color: var(--appearance-preview-primary);
    font-size: 15px;
    font-weight: 900;
}

.appearance-preview-nav {
    display: flex;
    gap: 5px;
}

.appearance-preview-nav > * {
    width: 24px;
    height: 8px;
    border-radius: 999px;
    background: var(--appearance-preview-border);
}

.appearance-preview-nav > .is-active,
.appearance-preview-nav > :first-child {
    background: var(--appearance-preview-primary);
}

.appearance-preview-content {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    min-height: 218px;
    padding: 12px;
}

.appearance-preview-sidebar,
.appearance-preview-panel,
.appearance-preview-card {
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-card-radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--appearance-preview-shadow);
}

.appearance-preview-sidebar {
    padding: 9px 7px;
}

.appearance-preview-sidebar::before,
.appearance-preview-sidebar::after {
    content: "";
    display: block;
    height: 8px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: var(--appearance-preview-border);
}

.appearance-preview-sidebar::before {
    background: var(--appearance-preview-primary);
}

.appearance-preview-panel {
    min-width: 0;
    padding: 12px;
}

.appearance-preview-panel > strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.appearance-preview-card {
    min-height: 72px;
    padding: 11px;
}

.appearance-preview-line {
    height: 7px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: var(--appearance-preview-border);
}

.appearance-preview-line.is-short {
    width: 64%;
}

.appearance-preview-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: var(--appearance-preview-card-radius);
    background: linear-gradient(120deg, var(--appearance-preview-primary), var(--appearance-preview-secondary));
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.profile-appearance-status {
    min-height: 20px;
    margin: 0;
    color: var(--app-text-soft, var(--text-soft));
    font-size: 12px;
}

.profile-appearance-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--app-panel-border, #dbe5ff);
}

.profile-appearance-actions .btn,
.appearance-option,
.profile-appearance-field select {
    min-height: 44px;
}

@media (max-width: 880px) {
    .profile-appearance-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-appearance-preview-wrap {
        position: static;
    }
}

@media (min-width: 421px) and (max-width: 760px) {
    .appearance-options,
    .profile-appearance-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .profile-appearance-header,
    .profile-appearance-intro {
        display: grid;
    }

    .profile-appearance-badge {
        justify-self: start;
    }

    .profile-appearance-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-appearance-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-appearance-actions .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .appearance-options,
    .profile-appearance-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-appearance-group {
        padding: 12px;
    }

    .appearance-preview-content {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 9px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .appearance-option-card {
        transition: none;
    }
}

/* Ajuste a la estructura real de Mi Cuenta > Apariencia. */
.profile-appearance-scope {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--app-accent-rgb, 49, 86, 255), 0.2);
    border-radius: 999px;
    background: var(--app-accent-soft, #edf2ff);
    color: var(--app-accent, #3156ff);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.profile-appearance-fieldset {
    min-width: 0;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--app-panel-border, #dbe5ff);
    border-radius: var(--app-card-radius, 16px);
    background: var(--app-panel-muted, #f8faff);
}

.profile-appearance-fieldset > legend {
    padding: 0 5px;
    color: var(--app-text, var(--text));
    font-size: 14px;
    font-weight: 800;
}

.profile-appearance-help {
    margin: 2px 0 12px;
    color: var(--app-text-soft, var(--text-soft));
    font-size: 12px;
    line-height: 1.4;
}

.profile-appearance-palettes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.profile-appearance-style-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-appearance-option {
    position: relative;
    min-width: 0;
    min-height: 44px;
    cursor: pointer;
}

.profile-appearance-option > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.profile-appearance-option-card {
    min-height: 72px;
    height: 100%;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--app-control-border, #d3ddfa);
    border-radius: var(--app-control-radius, 12px);
    background: var(--app-control-bg, #ffffff);
    color: var(--app-text, var(--text));
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.profile-appearance-option:hover .profile-appearance-option-card {
    transform: translateY(-1px);
    border-color: rgba(var(--app-accent-rgb, 49, 86, 255), 0.38);
}

.profile-appearance-option > input:checked + .profile-appearance-option-card {
    border-color: var(--app-accent, #3156ff);
    box-shadow: 0 0 0 3px var(--app-focus-ring, rgba(49, 86, 255, 0.17));
}

.profile-appearance-option > input:focus-visible + .profile-appearance-option-card {
    outline: 3px solid var(--app-focus-ring, rgba(49, 86, 255, 0.17));
    outline-offset: 2px;
}

.profile-appearance-palette-swatch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
}

.profile-appearance-palette-swatch i:nth-child(1) { background: var(--appearance-swatch-1, #3156ff); }
.profile-appearance-palette-swatch i:nth-child(2) { background: var(--appearance-swatch-2, #0ea5e9); }
.profile-appearance-palette-swatch i:nth-child(3) { background: var(--appearance-swatch-3, #dbe6ff); }

.profile-appearance-palette-option[data-appearance-value="astra"] { --appearance-swatch-1: #3156ff; --appearance-swatch-2: #0ea5e9; --appearance-swatch-3: #dbe6ff; }
.profile-appearance-palette-option[data-appearance-value="ocean"] { --appearance-swatch-1: #126487; --appearance-swatch-2: #72bfd5; --appearance-swatch-3: #d9eef4; }
.profile-appearance-palette-option[data-appearance-value="mint"] { --appearance-swatch-1: #1c6a49; --appearance-swatch-2: #7fc99f; --appearance-swatch-3: #dff1e7; }
.profile-appearance-palette-option[data-appearance-value="lavender"] { --appearance-swatch-1: #6744a1; --appearance-swatch-2: #b99bd8; --appearance-swatch-3: #ece3f6; }
.profile-appearance-palette-option[data-appearance-value="sand"] { --appearance-swatch-1: #7f4b18; --appearance-swatch-2: #d7aa6d; --appearance-swatch-3: #f2e5d3; }

.profile-appearance-option-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: left;
}

.profile-appearance-option-copy strong,
.profile-appearance-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-appearance-option-copy strong {
    font-size: 12px;
}

.profile-appearance-option-copy small {
    color: var(--app-text-soft, var(--text-soft));
    font-size: 10px;
}

.profile-appearance-style-option .profile-appearance-option-card {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    text-align: left;
}

.profile-appearance-style-sample,
.profile-appearance-surface-sample {
    width: 44px;
    height: 38px;
    display: block;
    border: 1px solid var(--app-control-border, #d3ddfa);
    border-radius: 10px;
    background: linear-gradient(145deg, #f7f9ff, #e7edfb);
}

.profile-appearance-option[data-appearance-value="solid"] .profile-appearance-style-sample {
    background: #eef2ff;
}

.profile-appearance-option[data-appearance-value="dots"] .profile-appearance-style-sample {
    background-color: #f2f5ff;
    background-image: radial-gradient(circle, rgba(49, 86, 255, 0.2) 1px, transparent 1.2px);
    background-size: 8px 8px;
}

.profile-appearance-option[data-appearance-value="grid"] .profile-appearance-style-sample {
    background-color: #f2f5ff;
    background-image: linear-gradient(rgba(49, 86, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 86, 255, 0.14) 1px, transparent 1px);
    background-size: 10px 10px;
}

.profile-appearance-option[data-appearance-value="soft"] .profile-appearance-surface-sample {
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 14px rgba(45, 67, 125, 0.17);
}

.profile-appearance-option[data-appearance-value="flat"] .profile-appearance-surface-sample {
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(45, 67, 125, 0.08);
}

.profile-appearance-option[data-appearance-value="square"] .profile-appearance-surface-sample {
    border-radius: 2px;
    background: #ffffff;
    box-shadow: none;
}

.profile-appearance-preview-column {
    min-width: 0;
    position: sticky;
    top: 66px;
}

.profile-appearance-preview-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.profile-appearance-preview-heading h3 {
    margin: 0;
    font-size: 15px;
}

.profile-appearance-preview-heading span {
    color: var(--app-text-soft, var(--text-soft));
    font-size: 11px;
    text-align: right;
}

.profile-appearance-preview {
    --appearance-preview-primary: #3156ff;
    --appearance-preview-secondary: #0877b8;
    --appearance-preview-start: #f7f9ff;
    --appearance-preview-end: #eef2ff;
    --appearance-preview-pattern: rgba(49, 86, 255, 0.11);
    --appearance-preview-border: #dbe5ff;
    --appearance-preview-radius: 18px;
    --appearance-preview-card-radius: 12px;
    --appearance-preview-shadow: 0 10px 24px rgba(38, 60, 116, 0.12);
    min-height: 280px;
    overflow: hidden;
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-radius);
    background: linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    color: #243453;
    box-shadow: var(--appearance-preview-shadow);
}

.profile-appearance-preview[data-theme="ocean"] { --appearance-preview-primary: #126487; --appearance-preview-secondary: #0d6f8f; --appearance-preview-start: #f3fbfd; --appearance-preview-end: #e2f1f6; --appearance-preview-pattern: rgba(18, 100, 135, 0.11); --appearance-preview-border: #cfe5ec; }
.profile-appearance-preview[data-theme="mint"] { --appearance-preview-primary: #1c6a49; --appearance-preview-secondary: #237a54; --appearance-preview-start: #f5fcf8; --appearance-preview-end: #e7f3ec; --appearance-preview-pattern: rgba(28, 106, 73, 0.11); --appearance-preview-border: #d1e7da; }
.profile-appearance-preview[data-theme="lavender"] { --appearance-preview-primary: #6744a1; --appearance-preview-secondary: #7550a8; --appearance-preview-start: #fbf8fd; --appearance-preview-end: #eee8f6; --appearance-preview-pattern: rgba(103, 68, 161, 0.11); --appearance-preview-border: #e1d7ec; }
.profile-appearance-preview[data-theme="sand"] { --appearance-preview-primary: #7f4b18; --appearance-preview-secondary: #8f5a21; --appearance-preview-start: #fdfaf5; --appearance-preview-end: #f3ecdf; --appearance-preview-pattern: rgba(127, 75, 24, 0.11); --appearance-preview-border: #eadcc9; }

.profile-appearance-preview[data-background="solid"] {
    background: var(--appearance-preview-end);
}

.profile-appearance-preview[data-background="dots"] {
    background-color: var(--appearance-preview-start);
    background-image: radial-gradient(circle, var(--appearance-preview-pattern) 1.2px, transparent 1.3px), linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    background-size: 16px 16px, 100% 100%;
}

.profile-appearance-preview[data-background="grid"] {
    background-color: var(--appearance-preview-start);
    background-image: linear-gradient(var(--appearance-preview-pattern) 1px, transparent 1px), linear-gradient(90deg, var(--appearance-preview-pattern) 1px, transparent 1px), linear-gradient(180deg, var(--appearance-preview-start), var(--appearance-preview-end));
    background-size: 19px 19px, 19px 19px, 100% 100%;
}

.profile-appearance-preview[data-surface="flat"] {
    --appearance-preview-radius: 12px;
    --appearance-preview-card-radius: 9px;
    --appearance-preview-shadow: 0 3px 10px rgba(38, 60, 116, 0.07);
}

.profile-appearance-preview[data-surface="square"] {
    --appearance-preview-radius: 5px;
    --appearance-preview-card-radius: 3px;
    --appearance-preview-shadow: none;
}

.profile-appearance-preview-topbar {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--appearance-preview-border);
}

.profile-appearance-preview-topbar strong {
    color: var(--appearance-preview-primary);
    font-size: 16px;
    font-weight: 900;
}

.profile-appearance-preview-topbar > span {
    width: 28px;
    height: 14px;
    border-radius: 999px;
    background: var(--appearance-preview-border);
}

.profile-appearance-preview-body {
    min-height: 236px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
}

.profile-appearance-preview-nav {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 9px 7px;
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-card-radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--appearance-preview-shadow);
}

.profile-appearance-preview-nav > span {
    min-height: 25px;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: max(3px, calc(var(--appearance-preview-card-radius) - 3px));
    color: #53617b;
    font-size: 9px;
    font-weight: 800;
}

.profile-appearance-preview-nav > span.is-active {
    color: #ffffff;
    background: linear-gradient(120deg, var(--appearance-preview-primary), var(--appearance-preview-secondary));
}

.profile-appearance-preview-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-card-radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--appearance-preview-shadow);
}

.profile-appearance-preview-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--appearance-preview-primary);
    font-size: 9px;
    font-weight: 900;
}

.profile-appearance-preview-panel > strong {
    display: block;
    font-size: 14px;
}

.profile-appearance-preview-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

.profile-appearance-preview-cards > span {
    min-height: 70px;
    border: 1px solid var(--appearance-preview-border);
    border-radius: var(--appearance-preview-card-radius);
    background: rgba(255, 255, 255, 0.88);
}

.profile-appearance-preview-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: var(--appearance-preview-card-radius);
    background: linear-gradient(120deg, var(--appearance-preview-primary), var(--appearance-preview-secondary));
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 880px) {
    .profile-appearance-preview-column {
        position: static;
    }
}

@media (min-width: 421px) and (max-width: 760px) {
    .profile-appearance-palettes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .profile-appearance-scope {
        justify-self: start;
    }

    .profile-appearance-preview-heading {
        display: grid;
    }

    .profile-appearance-preview-heading span {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .profile-appearance-palettes,
    .profile-appearance-style-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-appearance-fieldset {
        padding: 12px;
    }

    .profile-appearance-preview-body {
        grid-template-columns: 68px minmax(0, 1fr);
        padding: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-appearance-option-card {
        transition: none;
    }
}

/* Acentos heredados que aun usaban el azul fijo de Astra. */
html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    input[type="checkbox"],
    input[type="radio"]
) {
    accent-color: var(--app-accent);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .dashboard-kicker,
    .dashboard-work-panel-head strong,
    .dashboard-collapsible-section > summary::after,
    .calendar-share-window,
    .calendar-request-card-head strong
) {
    color: var(--app-accent);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .dashboard-notification-item.is-unread .dashboard-notification-dot,
    .calendar-share-availability,
    .calendar-share-slot input:checked + span
) {
    color: #ffffff;
    border-color: var(--app-accent);
    background: var(--app-accent);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) .dashboard-progress-track span {
    background: linear-gradient(90deg, var(--app-accent), var(--app-accent-secondary));
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) .calendar-navigation {
    background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.12), rgba(var(--app-accent-rgb), 0.05));
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) .calendar-day.selected .calendar-day-btn {
    outline-color: var(--app-accent);
    background: var(--app-accent-soft);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .admin-sidebar nav a.active,
    .admin-sidebar nav a:hover
) {
    color: var(--app-accent);
    border-color: rgba(var(--app-accent-rgb), 0.22);
    background: var(--app-accent-soft);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .notification-item.unread,
    .forum-topic-row.is-context-open td,
    .forum-topic-row.is-details-open td,
    .my-attendance-row
) {
    border-color: rgba(var(--app-accent-rgb), 0.34);
    background: rgba(var(--app-accent-rgb), 0.07);
}

/* Shell del chat y superficies comunes adicionales. */
html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.chat-page > .main-container > .chat-container {
    border-color: var(--app-panel-border);
    border-radius: var(--app-panel-radius);
    box-shadow: var(--app-panel-shadow);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page .app-modal-dialog {
    background: var(--app-panel-bg);
    border-color: var(--app-panel-border);
    border-radius: var(--app-panel-radius);
    box-shadow: var(--app-panel-shadow);
}

html:is(.app-theme-astra, .app-theme-ocean, .app-theme-mint, .app-theme-lavender, .app-theme-sand) body.app-page:not(.chat-page) :is(
    .meeting-card,
    .project-card,
    .task-board-column,
    .task-card-face,
    .table-scroll,
    .search-result-list li
) {
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
}

/* ================================================================
   Modo claro / oscuro de la aplicacion
   Se combina con las cinco paletas globales. Esta capa solo alcanza
   al marco del chat; no modifica el lienzo, burbujas ni mensajes de
   #chat-app, que conservan su apariencia independiente.
   ================================================================ */
html.app-mode-light {
    color-scheme: light;
    --app-action: var(--app-accent);
    --app-action-strong: var(--app-accent-strong);
    --app-action-secondary: var(--app-accent-secondary);
    --app-action-rgb: var(--app-accent-rgb);
    --app-overlay: rgba(20, 31, 55, 0.5);
    --app-table-stripe: rgba(var(--app-accent-rgb), 0.035);
    --app-table-hover: rgba(var(--app-accent-rgb), 0.07);
    --app-divider: var(--app-panel-border);
    --app-placeholder: #7a86a1;
}

html.app-mode-light.app-theme-astra {
    --app-action: #3156ff;
    --app-action-strong: #233ed6;
    --app-action-secondary: #0877b8;
    --app-action-rgb: 49, 86, 255;
}

html.app-mode-light.app-theme-ocean {
    --app-action: #126487;
    --app-action-strong: #0b4f6d;
    --app-action-secondary: #0d6f8f;
    --app-action-rgb: 18, 100, 135;
}

html.app-mode-light.app-theme-mint {
    --app-action: #1c6a49;
    --app-action-strong: #14523a;
    --app-action-secondary: #237a54;
    --app-action-rgb: 28, 106, 73;
}

html.app-mode-light.app-theme-lavender {
    --app-action: #6744a1;
    --app-action-strong: #513381;
    --app-action-secondary: #7550a8;
    --app-action-rgb: 103, 68, 161;
}

html.app-mode-light.app-theme-sand {
    --app-action: #7f4b18;
    --app-action-strong: #64380f;
    --app-action-secondary: #8f5a21;
    --app-action-rgb: 127, 75, 24;
}

html.app-mode-dark {
    color-scheme: dark;
    --app-accent: #91a7ff;
    --app-accent-strong: #b4c3ff;
    --app-accent-secondary: #69c5ef;
    --app-accent-rgb: 145, 167, 255;
    --app-action: #3553c9;
    --app-action-strong: #2943ad;
    --app-action-secondary: #246aa8;
    --app-action-rgb: 53, 83, 201;
    --app-page-start: #11192b;
    --app-page-middle: #0d1524;
    --app-page-end: #090f1c;
    --app-glow-a: #1b326b;
    --app-glow-b: #123b52;
    --app-glow-c: #28265a;
    --app-panel-bg: #151e30;
    --app-panel-muted: #111a2b;
    --app-card-bg: #192438;
    --app-control-bg: #101827;
    --app-panel-border: #2d3c58;
    --app-control-border: #3a4a68;
    --app-text: #f3f6fc;
    --app-text-soft: #aebad0;
    --app-accent-soft: rgba(145, 167, 255, 0.13);
    --app-accent-soft-strong: rgba(145, 167, 255, 0.2);
    --app-header-bg: rgba(9, 15, 28, 0.9);
    --app-footer-bg: rgba(9, 15, 28, 0.88);
    --app-pattern: rgba(145, 167, 255, 0.1);
    --app-focus-ring: rgba(145, 167, 255, 0.27);
    --app-overlay: rgba(2, 6, 15, 0.76);
    --app-table-stripe: rgba(255, 255, 255, 0.018);
    --app-table-hover: rgba(145, 167, 255, 0.09);
    --app-divider: #293751;
    --app-placeholder: #8591a9;
    --app-panel-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
    --app-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

html.app-mode-dark.app-theme-astra {
    --app-accent: #91a7ff;
    --app-accent-strong: #b4c3ff;
    --app-accent-secondary: #69c5ef;
    --app-accent-rgb: 145, 167, 255;
    --app-action: #3553c9;
    --app-action-strong: #2943ad;
    --app-action-secondary: #246aa8;
    --app-action-rgb: 53, 83, 201;
    --app-page-start: #11192b;
    --app-page-middle: #0d1524;
    --app-page-end: #090f1c;
    --app-glow-a: #1b326b;
    --app-glow-b: #123b52;
    --app-glow-c: #28265a;
    --app-panel-bg: #151e30;
    --app-panel-muted: #111a2b;
    --app-card-bg: #192438;
    --app-control-bg: #101827;
    --app-panel-border: #2d3c58;
    --app-control-border: #3a4a68;
}

html.app-mode-dark.app-theme-ocean {
    --app-accent: #72d4ef;
    --app-accent-strong: #a1e5f6;
    --app-accent-secondary: #72d8cb;
    --app-accent-rgb: 114, 212, 239;
    --app-action: #17617c;
    --app-action-strong: #104c64;
    --app-action-secondary: #176b76;
    --app-action-rgb: 23, 97, 124;
    --app-page-start: #0d2028;
    --app-page-middle: #09191f;
    --app-page-end: #071319;
    --app-glow-a: #16495d;
    --app-glow-b: #11504c;
    --app-glow-c: #183c50;
    --app-panel-bg: #10232b;
    --app-panel-muted: #0d1d24;
    --app-card-bg: #142a33;
    --app-control-bg: #0b1a21;
    --app-panel-border: #294650;
    --app-control-border: #355761;
    --app-accent-soft: rgba(114, 212, 239, 0.12);
    --app-accent-soft-strong: rgba(114, 212, 239, 0.19);
    --app-header-bg: rgba(7, 19, 25, 0.91);
    --app-footer-bg: rgba(7, 19, 25, 0.88);
    --app-pattern: rgba(114, 212, 239, 0.1);
    --app-focus-ring: rgba(114, 212, 239, 0.25);
}

html.app-mode-dark.app-theme-mint {
    --app-accent: #71d69f;
    --app-accent-strong: #9ce7bd;
    --app-accent-secondary: #7bd8c2;
    --app-accent-rgb: 113, 214, 159;
    --app-action: #256b4a;
    --app-action-strong: #1b563b;
    --app-action-secondary: #257256;
    --app-action-rgb: 37, 107, 74;
    --app-page-start: #102119;
    --app-page-middle: #0b1913;
    --app-page-end: #08130f;
    --app-glow-a: #1c4b35;
    --app-glow-b: #174d43;
    --app-glow-c: #244434;
    --app-panel-bg: #11251c;
    --app-panel-muted: #0e1e18;
    --app-card-bg: #162c22;
    --app-control-bg: #0c1b15;
    --app-panel-border: #2d4b3c;
    --app-control-border: #395b4a;
    --app-accent-soft: rgba(113, 214, 159, 0.12);
    --app-accent-soft-strong: rgba(113, 214, 159, 0.19);
    --app-header-bg: rgba(8, 19, 15, 0.91);
    --app-footer-bg: rgba(8, 19, 15, 0.88);
    --app-pattern: rgba(113, 214, 159, 0.1);
    --app-focus-ring: rgba(113, 214, 159, 0.25);
}

html.app-mode-dark.app-theme-lavender {
    --app-accent: #c3a3f2;
    --app-accent-strong: #dbc7f8;
    --app-accent-secondary: #d3a4dc;
    --app-accent-rgb: 195, 163, 242;
    --app-action: #6944a3;
    --app-action-strong: #543285;
    --app-action-secondary: #7550a8;
    --app-action-rgb: 105, 68, 163;
    --app-page-start: #21182d;
    --app-page-middle: #191222;
    --app-page-end: #120d19;
    --app-glow-a: #4a306d;
    --app-glow-b: #49305e;
    --app-glow-c: #3b315e;
    --app-panel-bg: #211a2c;
    --app-panel-muted: #1b1524;
    --app-card-bg: #282035;
    --app-control-bg: #18121f;
    --app-panel-border: #49395e;
    --app-control-border: #5a476f;
    --app-accent-soft: rgba(195, 163, 242, 0.12);
    --app-accent-soft-strong: rgba(195, 163, 242, 0.19);
    --app-header-bg: rgba(18, 13, 25, 0.91);
    --app-footer-bg: rgba(18, 13, 25, 0.88);
    --app-pattern: rgba(195, 163, 242, 0.1);
    --app-focus-ring: rgba(195, 163, 242, 0.25);
}

html.app-mode-dark.app-theme-sand {
    --app-accent: #efbd75;
    --app-accent-strong: #f6d6a4;
    --app-accent-secondary: #ddb67e;
    --app-accent-rgb: 239, 189, 117;
    --app-action: #87531f;
    --app-action-strong: #6d4017;
    --app-action-secondary: #936027;
    --app-action-rgb: 135, 83, 31;
    --app-page-start: #241a10;
    --app-page-middle: #1b140c;
    --app-page-end: #140f09;
    --app-glow-a: #553719;
    --app-glow-b: #574426;
    --app-glow-c: #463520;
    --app-panel-bg: #261e14;
    --app-panel-muted: #20180f;
    --app-card-bg: #2d2418;
    --app-control-bg: #1b150d;
    --app-panel-border: #50412e;
    --app-control-border: #62513a;
    --app-accent-soft: rgba(239, 189, 117, 0.12);
    --app-accent-soft-strong: rgba(239, 189, 117, 0.19);
    --app-header-bg: rgba(20, 15, 9, 0.91);
    --app-footer-bg: rgba(20, 15, 9, 0.88);
    --app-pattern: rgba(239, 189, 117, 0.1);
    --app-focus-ring: rgba(239, 189, 117, 0.25);
}

/* Los estilos de superficie conservan sombras legibles en modo oscuro. */
html.app-mode-dark.app-surfaces-soft {
    --app-panel-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
    --app-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

html.app-mode-dark:is(.app-surfaces-flat, .app-surfaces-compact) {
    --app-panel-shadow: 0 5px 15px rgba(0, 0, 0, 0.26);
    --app-card-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}

/* Acciones con texto blanco: se usa un tono mas profundo que el acento
   decorativo para mantener contraste AA en ambos modos. */
html:is(.app-mode-light, .app-mode-dark) body.app-page :is(
    .nav a.active,
    .mobile-sidebar-nav a.active,
    .mobile-bottom-nav-item.active
) {
    color: #ffffff;
    background: linear-gradient(120deg, var(--app-action), var(--app-action-secondary));
    box-shadow: 0 8px 20px rgba(var(--app-action-rgb), 0.3);
}

html:is(.app-mode-light, .app-mode-dark) body.app-page:not(.chat-page) :is(
    .btn-primary,
    .profile-tab.is-active,
    .meetings-view-link.is-active,
    .task-view-btn.is-active,
    .task-thread-tab.is-active,
    .pagination .active,
    [data-view].is-active,
    [aria-pressed="true"].btn
) {
    color: #ffffff;
    background: linear-gradient(120deg, var(--app-action), var(--app-action-secondary));
    box-shadow: 0 8px 20px rgba(var(--app-action-rgb), 0.3);
}

/* Marco autenticado compartido. Es seguro en la pagina de chat porque
   solo alcanza topbar, pie, menu movil y paneles de usuario/notificaciones. */
html.app-mode-dark body.app-page > .header {
    color: var(--app-text);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

html.app-mode-dark body.app-page > .footer {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page > .header :is(
    .nav a:not(.active),
    .user-pill,
    .user-pill-btn,
    .user-action-icon,
    .mobile-sidebar-toggle,
    .mobile-sidebar-header strong,
    .mobile-sidebar-close,
    .mobile-sidebar-nav a:not(.active),
    .profile-drawer a,
    .notification-drawer-item
) {
    color: var(--app-text);
}

/* El menu movil es hermano del header en el layout, no descendiente. */
html.app-mode-dark body.app-page :is(
    .mobile-sidebar-header strong,
    .mobile-sidebar-close,
    .mobile-sidebar-nav a:not(.active),
    .mobile-sidebar-search-submit
) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page :is(
    .header-search-form input[type="search"],
    .mobile-sidebar-search-row input[type="search"],
    .mobile-sidebar-search-submit
) {
    color: var(--app-text);
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page :is(
    .header-search-form input[type="search"],
    .mobile-sidebar-search-row input[type="search"]
)::placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

html.app-mode-dark body.app-page .mobile-sidebar-nav a:not(.active):hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.35);
}

html.app-mode-dark body.app-page > .header :is(
    .mobile-sidebar,
    .mobile-bottom-nav,
    .profile-drawer,
    .notification-drawer
) {
    background: var(--app-panel-bg);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page > .header :is(
    .notification-drawer-header,
    .notification-drawer-footer,
    .profile-drawer a
) {
    border-color: var(--app-divider);
}

html.app-mode-dark body.app-page > .header :is(
    .notification-drawer-item,
    .notification-drawer-empty
) {
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page > .header .notification-drawer-item:hover {
    color: var(--app-text);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.42);
}

html.app-mode-dark body.app-page > .header .notification-drawer-item.unread {
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.5);
}

html.app-mode-dark body.app-page > .header :is(
    .notification-drawer-item-message,
    .notification-drawer-item-date,
    .notification-drawer-empty
) {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page > .header .notification-drawer-counter {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.35);
}

html.app-mode-dark body.app-page .mobile-sidebar-overlay {
    background: var(--app-overlay);
}

/* Tipografia y divisores de las secciones. */
html.app-mode-dark body.app-page:not(.chat-page) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    h1,
    h2,
    h3,
    h4,
    .section-title,
    .detail-title,
    .dashboard-date-card strong,
    .dashboard-mini-main strong,
    .dashboard-project-card-head h3,
    .meeting-card-head h3,
    .calendar-list-item-head h3,
    .calendar-request-card-head h2,
    .forum-topic-head h3,
    .forum-author-info strong,
    .notification-header h3,
    .profile-notification-copy h3,
    .task-card-back-head strong,
    .project-card-metrics dd
) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .text-soft,
    .dashboard-mini-main small,
    .dashboard-empty-note,
    .dashboard-project-desc,
    .meeting-card-main p,
    .meeting-card-hint,
    .calendar-list-item-main p,
    .calendar-list-item-head span,
    .calendar-list-item-context-head small,
    .calendar-request-meta dt,
    .forum-topic-description,
    .forum-topic-hint,
    .forum-topic-meta dt,
    .forum-author-info span,
    .forum-post-meta,
    .search-result-list small,
    .profile-account-list dt,
    .profile-notification-copy p,
    .profile-notification-note,
    .task-card-back-head small,
    .task-card-back-note,
    .project-card-description,
    .project-card-metrics dt,
    .proxima-reunion-meta dd
) {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .form-group label,
    .checkbox-label,
    .profile-account-list dd,
    .profile-channel-switch-text,
    .profile-appearance-field label,
    .profile-appearance-fieldset > legend,
    .detail-list dt
) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(hr, .profile-account-divider) {
    border-color: var(--app-divider);
}

/* Controles y botones neutros. Las variantes de estado conservan sus
   colores success, danger y warning originales. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select
) {
    color: var(--app-text);
    background-color: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(input, textarea)::placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

html.app-mode-dark body.app-page:not(.chat-page) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
    color: var(--app-text);
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.42);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .profile-tab:not(.is-active),
    .meetings-view-link:not(.is-active),
    .task-view-btn:not(.is-active),
    .task-thread-tab:not(.is-active),
    .app-modal-close
) {
    color: var(--app-text);
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

/* Tablas y listas densas. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .table,
    .table-scroll,
    .task-list-table-scroll
) {
    color: var(--app-text);
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .table thead th {
    color: var(--app-text);
    background: var(--app-panel-muted);
    border-color: var(--app-divider);
}

html.app-mode-dark body.app-page:not(.chat-page) .table td {
    color: var(--app-text);
    background: transparent;
    border-color: var(--app-divider);
}

html.app-mode-dark body.app-page:not(.chat-page) .table tbody tr:nth-child(even) {
    background: var(--app-table-stripe);
}

html.app-mode-dark body.app-page:not(.chat-page) .table tbody tr:hover {
    background: var(--app-table-hover);
}

/* Superficies que historicamente tenian blancos o azules fijos. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-date-card,
    .dashboard-mini-item,
    .dashboard-project-mini-card,
    .dashboard-task-progress,
    .meeting-card,
    .calendar,
    .calendar-request-card,
    .calendar-list-item,
    .calendar-list-item-context,
    .calendar-agenda-section,
    .forum-topic-details,
    .forum-topic-list-details,
    .forum-post,
    .forum-post-box,
    .search-result-list li,
    .profile-recovery-stat,
    .profile-recovery-codes,
    .profile-notification-item,
    .task-board-column,
    .task-card-face,
    .project-card,
    .project-card-metrics div
) {
    color: var(--app-text);
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .checkbox-list,
    .checkbox-label
) {
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-mini-item:hover,
    .calendar-list-item.is-context-open,
    .forum-topic-row.is-context-open td,
    .forum-topic-row.is-details-open td,
    .notification-item.unread,
    .my-attendance-row
) {
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.4);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .calendar-navigation,
    .calendar-request-filters,
    .calendar-modal-toolbar,
    .task-board-column-head,
    .task-board-empty,
    .profile-recovery-codes code
) {
    color: var(--app-text);
    background: var(--app-panel-muted);
    border-color: var(--app-panel-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .calendar-day-btn,
    .calendar-share-slot span,
    .forum-post-option-btn,
    .task-board-count,
    .task-owner-indicator,
    .project-status-pill.status-empty
) {
    color: var(--app-text);
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-progress-track {
    background: var(--app-control-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .task-board-card.is-locked .task-card-face {
    background: var(--app-panel-muted);
}

/* Administracion y navegacion secundaria. */
html.app-mode-dark body.app-page:not(.chat-page) .admin-sidebar nav a:not(.active):not(:hover) {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .admin-card,
    .stat-card,
    .dashboard-work-panel,
    .dashboard-project-card
) {
    color: var(--app-text);
    background: var(--app-card-bg);
    border-color: var(--app-panel-border);
}

/* Chrome de modales globales. Tambien se aplica sobre chat para que el
   titulo y los controles conserven contraste; no alcanza sus mensajes. */
html.app-mode-dark body.app-page .app-modal-backdrop {
    background: var(--app-overlay);
}

html.app-mode-dark body.app-page .app-modal-dialog {
    color: var(--app-text);
    background: var(--app-panel-bg);
    border-color: var(--app-panel-border);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

html.app-mode-dark body.app-page :is(.app-modal-header, .app-modal-footer) {
    border-color: var(--app-divider);
}

html.app-mode-dark body.app-page :is(.app-modal-header h3, .app-modal-close) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page .app-modal-close {
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page .app-modal-close:hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.4);
}

/* Scrollbars visibles sin invadir el scroll interno del chat. */
html.app-mode-dark body.app-page {
    scrollbar-color: var(--app-control-border) var(--app-page-end);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .table-scroll,
    .task-board-scroll-shell,
    .task-list-scroll-shell,
    .app-modal-body,
    .profile-tabs
) {
    scrollbar-color: var(--app-control-border) transparent;
}

/* ---------- Selector Claro / Oscuro en Mi Cuenta ---------- */
.profile-appearance-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-appearance-mode-option {
    min-width: 0;
    min-height: 44px;
    cursor: pointer;
}

.profile-appearance-mode-option .profile-appearance-option-card {
    min-height: 78px;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    text-align: left;
}

:is(.profile-appearance-mode-sample, .profile-appearance-mode-preview) {
    position: relative;
    width: 52px;
    height: 42px;
    display: block;
    overflow: hidden;
    border: 1px solid #cbd7f1;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #eaf0ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

:is(.profile-appearance-mode-sample, .profile-appearance-mode-preview)::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    top: 7px;
    right: 7px;
    border-radius: 50%;
    background: #f4b942;
    box-shadow: 0 0 0 5px rgba(244, 185, 66, 0.16);
}

.profile-appearance-mode-sample > i {
    position: absolute;
    display: block;
    pointer-events: none;
}

.profile-appearance-mode-sample-topbar {
    inset: 0 0 auto;
    height: 9px;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid #d7e0f4;
}

.profile-appearance-mode-sample-panel {
    left: 6px;
    right: 20px;
    bottom: 6px;
    height: 18px;
    border: 1px solid #d7e0f4;
    border-radius: 5px;
    background: #ffffff;
}

.profile-appearance-mode-sample-accent {
    left: 10px;
    bottom: 11px;
    width: 15px;
    height: 4px;
    border-radius: 999px;
    background: #3156ff;
}

:is(
    .profile-appearance-mode-option[data-appearance-value="dark"],
    .profile-appearance-mode-dark
) :is(.profile-appearance-mode-sample, .profile-appearance-mode-preview) {
    border-color: #42516d;
    background: linear-gradient(145deg, #1a2437, #0b1220);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

:is(
    .profile-appearance-mode-option[data-appearance-value="dark"],
    .profile-appearance-mode-dark
) :is(.profile-appearance-mode-sample, .profile-appearance-mode-preview)::before {
    background: #a8b9ff;
    box-shadow: -5px 3px 0 1px #101827;
}

:is(
    .profile-appearance-mode-option[data-appearance-value="dark"],
    .profile-appearance-mode-dark
) .profile-appearance-mode-sample-topbar {
    background: #111a2b;
    border-color: #34445f;
}

:is(
    .profile-appearance-mode-option[data-appearance-value="dark"],
    .profile-appearance-mode-dark
) .profile-appearance-mode-sample-panel {
    background: #192438;
    border-color: #3a4a68;
}

:is(
    .profile-appearance-mode-option[data-appearance-value="dark"],
    .profile-appearance-mode-dark
) .profile-appearance-mode-sample-accent {
    background: #91a7ff;
}

html.app-mode-dark :is(.profile-appearance-mode-sample, .profile-appearance-mode-preview) {
    border-color: var(--app-control-border);
}

/* Las muestras de las cinco paletas tambien cambian al seleccionar oscuro,
   antes de confirmar la preferencia. */
.profile-appearance-form:has(input[name="color_mode"][value="dark"]:checked)
    .profile-appearance-palette-option[data-appearance-value="astra"] {
    --appearance-swatch-1: #91a7ff;
    --appearance-swatch-2: #3553c9;
    --appearance-swatch-3: #151e30;
}

.profile-appearance-form:has(input[name="color_mode"][value="dark"]:checked)
    .profile-appearance-palette-option[data-appearance-value="ocean"] {
    --appearance-swatch-1: #72d4ef;
    --appearance-swatch-2: #17617c;
    --appearance-swatch-3: #10232b;
}

.profile-appearance-form:has(input[name="color_mode"][value="dark"]:checked)
    .profile-appearance-palette-option[data-appearance-value="mint"] {
    --appearance-swatch-1: #71d69f;
    --appearance-swatch-2: #256b4a;
    --appearance-swatch-3: #11251c;
}

.profile-appearance-form:has(input[name="color_mode"][value="dark"]:checked)
    .profile-appearance-palette-option[data-appearance-value="lavender"] {
    --appearance-swatch-1: #c3a3f2;
    --appearance-swatch-2: #6944a3;
    --appearance-swatch-3: #211a2c;
}

.profile-appearance-form:has(input[name="color_mode"][value="dark"]:checked)
    .profile-appearance-palette-option[data-appearance-value="sand"] {
    --appearance-swatch-1: #efbd75;
    --appearance-swatch-2: #87531f;
    --appearance-swatch-3: #261e14;
}

/* ---------- Vista previa combinada: modo + paleta ---------- */
.profile-appearance-preview[data-mode="dark"] {
    --appearance-preview-primary: #91a7ff;
    --appearance-preview-secondary: #69c5ef;
    --appearance-preview-action: #3553c9;
    --appearance-preview-action-secondary: #246aa8;
    --appearance-preview-start: #11192b;
    --appearance-preview-end: #090f1c;
    --appearance-preview-pattern: rgba(145, 167, 255, 0.11);
    --appearance-preview-border: #2d3c58;
    --appearance-preview-panel: #151e30;
    --appearance-preview-card: #192438;
    --appearance-preview-text: #f3f6fc;
    --appearance-preview-text-soft: #aebad0;
    --appearance-preview-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    color: var(--appearance-preview-text);
}

.profile-appearance-preview[data-mode="dark"][data-theme="ocean"] {
    --appearance-preview-primary: #72d4ef;
    --appearance-preview-secondary: #72d8cb;
    --appearance-preview-action: #17617c;
    --appearance-preview-action-secondary: #176b76;
    --appearance-preview-start: #0d2028;
    --appearance-preview-end: #071319;
    --appearance-preview-pattern: rgba(114, 212, 239, 0.11);
    --appearance-preview-border: #294650;
    --appearance-preview-panel: #10232b;
    --appearance-preview-card: #142a33;
}

.profile-appearance-preview[data-mode="dark"][data-theme="mint"] {
    --appearance-preview-primary: #71d69f;
    --appearance-preview-secondary: #7bd8c2;
    --appearance-preview-action: #256b4a;
    --appearance-preview-action-secondary: #257256;
    --appearance-preview-start: #102119;
    --appearance-preview-end: #08130f;
    --appearance-preview-pattern: rgba(113, 214, 159, 0.11);
    --appearance-preview-border: #2d4b3c;
    --appearance-preview-panel: #11251c;
    --appearance-preview-card: #162c22;
}

.profile-appearance-preview[data-mode="dark"][data-theme="lavender"] {
    --appearance-preview-primary: #c3a3f2;
    --appearance-preview-secondary: #d3a4dc;
    --appearance-preview-action: #6944a3;
    --appearance-preview-action-secondary: #7550a8;
    --appearance-preview-start: #21182d;
    --appearance-preview-end: #120d19;
    --appearance-preview-pattern: rgba(195, 163, 242, 0.11);
    --appearance-preview-border: #49395e;
    --appearance-preview-panel: #211a2c;
    --appearance-preview-card: #282035;
}

.profile-appearance-preview[data-mode="dark"][data-theme="sand"] {
    --appearance-preview-primary: #efbd75;
    --appearance-preview-secondary: #ddb67e;
    --appearance-preview-action: #87531f;
    --appearance-preview-action-secondary: #936027;
    --appearance-preview-start: #241a10;
    --appearance-preview-end: #140f09;
    --appearance-preview-pattern: rgba(239, 189, 117, 0.11);
    --appearance-preview-border: #50412e;
    --appearance-preview-panel: #261e14;
    --appearance-preview-card: #2d2418;
}

.profile-appearance-preview[data-mode="dark"] :is(
    .profile-appearance-preview-topbar,
    .profile-appearance-preview-nav,
    .profile-appearance-preview-panel
) {
    color: var(--appearance-preview-text);
    background: var(--appearance-preview-panel);
    border-color: var(--appearance-preview-border);
}

.profile-appearance-preview[data-mode="dark"] .profile-appearance-preview-cards > span {
    background: var(--appearance-preview-card);
    border-color: var(--appearance-preview-border);
}

.profile-appearance-preview[data-mode="dark"] .profile-appearance-preview-nav > span {
    color: var(--appearance-preview-text-soft);
}

.profile-appearance-preview[data-mode="dark"] :is(
    .profile-appearance-preview-nav > span.is-active,
    .profile-appearance-preview-button
) {
    color: #ffffff;
    background: linear-gradient(120deg, var(--appearance-preview-action), var(--appearance-preview-action-secondary));
}

.profile-appearance-preview[data-mode="dark"] .profile-appearance-preview-topbar > span {
    background: var(--appearance-preview-border);
}

@media (max-width: 420px) {
    .profile-appearance-mode-option .profile-appearance-option-card {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 72px;
        padding: 8px;
    }

    :is(.profile-appearance-mode-sample, .profile-appearance-mode-preview) {
        width: 44px;
        height: 38px;
    }
}

@media (max-width: 350px) {
    .profile-appearance-mode-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-appearance-mode-option .profile-appearance-option-card {
        transition: none;
    }
}

/* ================================================================
   Modo oscuro propio del chat
   No depende de app-mode-light/app-mode-dark. Las variables viven en
   #chat-app y se combinan con las cinco paletas del chat.
   ================================================================ */
body.chat-page #chat-app:is(.chat-mode-light, [data-chat-mode="light"]) {
    color-scheme: light;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) {
    color-scheme: dark;
    --chat-dark-accent: #91a7ff;
    --chat-dark-accent-2: #69c5ef;
    --chat-dark-accent-rgb: 145, 167, 255;
    --chat-dark-action: #3553c9;
    --chat-dark-action-2: #246aa8;
    --chat-dark-action-rgb: 53, 83, 201;
    --chat-dark-shell: #0d1623;
    --chat-dark-sidebar: #111d2b;
    --chat-dark-panel: #142131;
    --chat-dark-panel-muted: #0f1927;
    --chat-dark-card: #182536;
    --chat-dark-control: #0b1522;
    --chat-dark-border: #2b3b50;
    --chat-dark-border-strong: #3a4e68;
    --chat-dark-text: #edf4fb;
    --chat-dark-soft: #a8b7c9;
    --chat-dark-subdued: #8495aa;
    --chat-dark-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
    --chat-dark-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    --chat-dark-accent-soft: rgba(145, 167, 255, 0.13);
    --chat-dark-accent-soft-strong: rgba(145, 167, 255, 0.2);
    --chat-dark-overlay: rgba(3, 8, 16, 0.78);
    --chat-dark-glow-a: rgba(61, 90, 177, 0.17);
    --chat-dark-glow-b: rgba(40, 137, 180, 0.12);

    --chat-theme-accent: #91a7ff;
    --chat-theme-accent-2: #69c5ef;
    --chat-canvas-start: #0f1b2b;
    --chat-canvas-end: #09131f;
    --chat-canvas-solid: #0c1723;
    --chat-pattern-color: rgba(145, 167, 255, 0.1);
    --chat-scroll-track-theme: #101b29;
    --chat-scroll-thumb-theme: #49637b;
    --chat-incoming-bg: #182638;
    --chat-incoming-border: #31455e;
    --chat-incoming-text: #edf5ff;
    --chat-incoming-meta: #a9bbcf;
    --chat-outgoing-bg: #254737;
    --chat-outgoing-border: #3c6b51;
    --chat-outgoing-text: #effaf3;
    --chat-outgoing-meta: #b7d1c0;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-ocean {
    --chat-dark-accent: #72d4ef;
    --chat-dark-accent-2: #72d8cb;
    --chat-dark-accent-rgb: 114, 212, 239;
    --chat-dark-action: #17617c;
    --chat-dark-action-2: #176b76;
    --chat-dark-action-rgb: 23, 97, 124;
    --chat-dark-shell: #07141a;
    --chat-dark-sidebar: #0c1d24;
    --chat-dark-panel: #10242c;
    --chat-dark-panel-muted: #0b1a21;
    --chat-dark-card: #142b34;
    --chat-dark-control: #08171d;
    --chat-dark-border: #294650;
    --chat-dark-border-strong: #38606b;
    --chat-dark-accent-soft: rgba(114, 212, 239, 0.12);
    --chat-dark-accent-soft-strong: rgba(114, 212, 239, 0.19);
    --chat-dark-glow-a: rgba(35, 139, 177, 0.17);
    --chat-dark-glow-b: rgba(41, 164, 153, 0.13);
    --chat-theme-accent: #72d4ef;
    --chat-theme-accent-2: #72d8cb;
    --chat-canvas-start: #0a2028;
    --chat-canvas-end: #061319;
    --chat-canvas-solid: #081a21;
    --chat-pattern-color: rgba(114, 212, 239, 0.1);
    --chat-scroll-track-theme: #0b1b22;
    --chat-scroll-thumb-theme: #3c6874;
    --chat-incoming-bg: #102831;
    --chat-incoming-border: #2b4b57;
    --chat-incoming-text: #e9f8fc;
    --chat-incoming-meta: #a7c7d0;
    --chat-outgoing-bg: #164453;
    --chat-outgoing-border: #2b6674;
    --chat-outgoing-text: #eaf9fc;
    --chat-outgoing-meta: #aad2da;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-mint {
    --chat-dark-accent: #71d69f;
    --chat-dark-accent-2: #7bd8c2;
    --chat-dark-accent-rgb: 113, 214, 159;
    --chat-dark-action: #256b4a;
    --chat-dark-action-2: #257256;
    --chat-dark-action-rgb: 37, 107, 74;
    --chat-dark-shell: #08140f;
    --chat-dark-sidebar: #0e1e17;
    --chat-dark-panel: #12251c;
    --chat-dark-panel-muted: #0c1b14;
    --chat-dark-card: #172c22;
    --chat-dark-control: #091710;
    --chat-dark-border: #2d4b3c;
    --chat-dark-border-strong: #3d624e;
    --chat-dark-accent-soft: rgba(113, 214, 159, 0.12);
    --chat-dark-accent-soft-strong: rgba(113, 214, 159, 0.19);
    --chat-dark-glow-a: rgba(40, 143, 89, 0.17);
    --chat-dark-glow-b: rgba(52, 154, 132, 0.13);
    --chat-theme-accent: #71d69f;
    --chat-theme-accent-2: #7bd8c2;
    --chat-canvas-start: #10251b;
    --chat-canvas-end: #08160f;
    --chat-canvas-solid: #0c1d15;
    --chat-pattern-color: rgba(113, 214, 159, 0.1);
    --chat-scroll-track-theme: #0c1b14;
    --chat-scroll-thumb-theme: #416b54;
    --chat-incoming-bg: #14271f;
    --chat-incoming-border: #304b3c;
    --chat-incoming-text: #eefaf3;
    --chat-incoming-meta: #adc9ba;
    --chat-outgoing-bg: #214737;
    --chat-outgoing-border: #3a6b50;
    --chat-outgoing-text: #effaf4;
    --chat-outgoing-meta: #b3d4c0;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-lavender {
    --chat-dark-accent: #c3a3f2;
    --chat-dark-accent-2: #d3a4dc;
    --chat-dark-accent-rgb: 195, 163, 242;
    --chat-dark-action: #6944a3;
    --chat-dark-action-2: #7550a8;
    --chat-dark-action-rgb: 105, 68, 163;
    --chat-dark-shell: #130e1a;
    --chat-dark-sidebar: #1a1423;
    --chat-dark-panel: #211a2d;
    --chat-dark-panel-muted: #181220;
    --chat-dark-card: #292036;
    --chat-dark-control: #15101c;
    --chat-dark-border: #49395e;
    --chat-dark-border-strong: #614b78;
    --chat-dark-accent-soft: rgba(195, 163, 242, 0.12);
    --chat-dark-accent-soft-strong: rgba(195, 163, 242, 0.19);
    --chat-dark-glow-a: rgba(117, 76, 177, 0.18);
    --chat-dark-glow-b: rgba(156, 93, 166, 0.13);
    --chat-theme-accent: #c3a3f2;
    --chat-theme-accent-2: #d3a4dc;
    --chat-canvas-start: #21172d;
    --chat-canvas-end: #120c19;
    --chat-canvas-solid: #191121;
    --chat-pattern-color: rgba(195, 163, 242, 0.1);
    --chat-scroll-track-theme: #1a1422;
    --chat-scroll-thumb-theme: #654e7e;
    --chat-incoming-bg: #251d31;
    --chat-incoming-border: #4c3d60;
    --chat-incoming-text: #f7f1fc;
    --chat-incoming-meta: #c4b5d0;
    --chat-outgoing-bg: #44325c;
    --chat-outgoing-border: #674d82;
    --chat-outgoing-text: #faf4ff;
    --chat-outgoing-meta: #d1bfdc;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-sand {
    --chat-dark-accent: #efbd75;
    --chat-dark-accent-2: #ddb67e;
    --chat-dark-accent-rgb: 239, 189, 117;
    --chat-dark-action: #87531f;
    --chat-dark-action-2: #936027;
    --chat-dark-action-rgb: 135, 83, 31;
    --chat-dark-shell: #151008;
    --chat-dark-sidebar: #1e170e;
    --chat-dark-panel: #261e14;
    --chat-dark-panel-muted: #1b150d;
    --chat-dark-card: #2e2418;
    --chat-dark-control: #181209;
    --chat-dark-border: #50412e;
    --chat-dark-border-strong: #69553a;
    --chat-dark-accent-soft: rgba(239, 189, 117, 0.12);
    --chat-dark-accent-soft-strong: rgba(239, 189, 117, 0.19);
    --chat-dark-glow-a: rgba(158, 99, 39, 0.18);
    --chat-dark-glow-b: rgba(168, 130, 66, 0.13);
    --chat-theme-accent: #efbd75;
    --chat-theme-accent-2: #ddb67e;
    --chat-canvas-start: #281d11;
    --chat-canvas-end: #150f08;
    --chat-canvas-solid: #1e160d;
    --chat-pattern-color: rgba(239, 189, 117, 0.1);
    --chat-scroll-track-theme: #1c150d;
    --chat-scroll-thumb-theme: #735b3c;
    --chat-incoming-bg: #2c241a;
    --chat-incoming-border: #514434;
    --chat-incoming-text: #fff8ec;
    --chat-incoming-meta: #d1c0aa;
    --chat-outgoing-bg: #493722;
    --chat-outgoing-border: #6e5434;
    --chat-outgoing-text: #fff8ec;
    --chat-outgoing-meta: #d7c09f;
}

/* Shell, directorio y cabecera de conversacion. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-shell);
    border-color: var(--chat-dark-border);
    box-shadow: var(--chat-dark-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-header h1,
    .chat-peer h3,
    .chat-user-copy strong,
    .chat-users-header strong,
    .chat-empty-state strong
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-header .text-soft,
    .chat-peer small,
    .chat-user-item small,
    .chat-user-meta small,
    .chat-empty-state,
    .chat-empty-state p,
    .chat-typing-indicator,
    .chat-character-count
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-sidebar,
    .chat-main
) {
    background: var(--chat-dark-panel);
    border-color: var(--chat-dark-border);
    box-shadow: var(--chat-dark-card-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-search,
    .chat-peer,
    .chat-message-search-bar,
    .chat-send-form
) {
    background: var(--chat-dark-panel-muted);
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-users-header {
    background: var(--chat-dark-card);
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-user-row {
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-user-item:hover {
    background: var(--chat-dark-accent-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-user-row.active .chat-user-item,
    .chat-user-item.active
) {
    background: var(--chat-dark-accent-soft-strong);
    box-shadow: inset 3px 0 0 var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-user-item.is-astra {
    background: linear-gradient(100deg, var(--chat-dark-accent-soft-strong), var(--chat-dark-card));
    border-left-color: var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-user-item.is-astra:hover,
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-user-item.is-astra.active {
    background: linear-gradient(100deg, rgba(var(--chat-dark-accent-rgb), 0.24), var(--chat-dark-card));
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-avatar {
    color: var(--chat-dark-accent);
    background: linear-gradient(145deg, var(--chat-dark-card), var(--chat-dark-panel-muted));
    box-shadow: inset 0 0 0 1px var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-avatar.is-group {
    color: #7edbb3;
    background: linear-gradient(145deg, #183128, #11251e);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-presence-dot {
    border-color: var(--chat-dark-panel);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-astra-badge {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.45);
}

/* Controles neutros. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-section-top-actions input[type="text"],
    .chat-search input,
    .chat-message-search-bar input,
    .chat-send-form textarea,
    .chat-settings-inline input,
    .chat-settings-inline textarea,
    .chat-settings-inline select
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-control);
    border-color: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-section-top-actions input[type="text"],
    .chat-search input,
    .chat-message-search-bar input,
    .chat-send-form textarea
)::placeholder {
    color: var(--chat-dark-subdued);
    opacity: 1;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-section-top-actions input[type="text"],
    .chat-search input,
    .chat-message-search-bar input,
    .chat-send-form textarea,
    .chat-settings-inline input,
    .chat-settings-inline textarea,
    .chat-settings-inline select
):focus {
    border-color: var(--chat-dark-accent);
    box-shadow: 0 0 0 3px rgba(var(--chat-dark-accent-rgb), 0.2);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-open-all-btn,
    .chat-section-selector-btn:not(.is-active),
    .chat-peer-context-btn:not(.chat-peer-buzz-btn),
    .chat-input-icon-btn,
    .chat-message-search-bar button,
    .chat-message-search-bar a,
    .chat-mobile-directory-btn,
    .chat-mobile-sidebar-close
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-control);
    border-color: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-open-all-btn,
    .chat-section-selector-btn:not(.is-active),
    .chat-peer-context-btn:not(.chat-peer-buzz-btn),
    .chat-input-icon-btn,
    .chat-message-search-bar button,
    .chat-message-search-bar a,
    .chat-mobile-directory-btn,
    .chat-mobile-sidebar-close
):hover {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.45);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-section-selector-btn.is-active,
    .chat-new-chat-btn,
    .chat-send-submit:not(.is-recording),
    .chat-expand-btn.is-active
) {
    color: #ffffff;
    border-color: var(--chat-dark-action);
    background: linear-gradient(135deg, var(--chat-dark-action), var(--chat-dark-action-2));
    box-shadow: 0 8px 20px rgba(var(--chat-dark-action-rgb), 0.32);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-send-submit.is-recording {
    color: #ffffff;
    border-color: #c73354;
    background: linear-gradient(140deg, #e44f6d, #b92f50);
    box-shadow: 0 0 0 3px rgba(226, 72, 111, 0.2);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-mobile-directory-backdrop {
    background: var(--chat-dark-overlay);
}

/* Canvas, mensajes y estados de entrega. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-messages {
    color: var(--chat-dark-text);
    background: linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
    scrollbar-color: var(--chat-scroll-thumb-theme) var(--chat-scroll-track-theme);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-bg-mist .chat-messages {
    background:
        radial-gradient(circle at 14% 14%, var(--chat-dark-glow-a) 0%, transparent 38%),
        radial-gradient(circle at 82% 4%, var(--chat-dark-glow-b) 0%, transparent 34%),
        linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-bg-solid .chat-messages {
    background: var(--chat-canvas-solid);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-bg-dots .chat-messages {
    background-color: var(--chat-canvas-solid);
    background-image:
        radial-gradient(circle, var(--chat-pattern-color) 1.15px, transparent 1.25px),
        linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-bg-grid .chat-messages {
    background-color: var(--chat-canvas-solid);
    background-image:
        linear-gradient(var(--chat-pattern-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--chat-pattern-color) 1px, transparent 1px),
        linear-gradient(180deg, var(--chat-canvas-start), var(--chat-canvas-end));
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-messages::-webkit-scrollbar-track {
    background: var(--chat-scroll-track-theme);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-messages::-webkit-scrollbar-thumb {
    background: var(--chat-scroll-thumb-theme);
    border-color: var(--chat-scroll-track-theme);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    color: var(--chat-incoming-text);
    background: var(--chat-incoming-bg);
    border-color: var(--chat-incoming-border);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only) {
    color: var(--chat-outgoing-text);
    background: var(--chat-outgoing-bg);
    border-color: var(--chat-outgoing-border);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only) :is(
    .chat-message-content,
    header strong
) {
    color: var(--chat-incoming-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble:not(.mine):not(.chat-bubble-system):not(.chat-bubble-audio-only) :is(
    header small,
    .chat-message-meta
) {
    color: var(--chat-incoming-meta);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only) :is(
    .chat-message-content,
    header strong
) {
    color: var(--chat-outgoing-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.mine:not(.chat-bubble-system):not(.chat-bubble-audio-only) :is(
    header small,
    .chat-message-meta
) {
    color: var(--chat-outgoing-meta);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.chat-bubble-astra:not(.mine) {
    color: var(--chat-incoming-text);
    background: linear-gradient(140deg, var(--chat-dark-accent-soft-strong), var(--chat-incoming-bg));
    border-color: rgba(var(--chat-dark-accent-rgb), 0.48);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.chat-bubble-astra:not(.mine) header strong {
    color: var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-bubble.chat-bubble-system,
    .chat-bubble.chat-bubble-system.mine,
    .chat-bubble.chat-bubble-audio-only,
    .chat-bubble.chat-bubble-audio-only.mine
) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-system-alert-label {
    color: var(--chat-dark-text);
    background: rgba(3, 8, 15, 0.62);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.2);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-scheduled,
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.mine.chat-bubble-scheduled {
    color: var(--chat-dark-text);
    background: linear-gradient(180deg, #29313d, #202833);
    border-color: #465363;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-scheduled :is(
    .chat-message-content,
    header strong
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-scheduled :is(
    header small,
    .chat-message-meta
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-scheduled-badge {
    color: #d5dde8;
    background: #303947;
    border-color: #536071;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-pinned {
    border-color: rgba(var(--chat-dark-accent-rgb), 0.62);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-message-flag-pinned {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.44);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-highlighted {
    border-color: #a37a2d;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-message-flag-highlighted {
    color: #f6cc72;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 190, 76, 0.38);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble.chat-bubble-deleted .chat-message-content {
    color: var(--chat-dark-subdued);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-date-separator,
    .chat-unread-separator
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-date-separator::before,
    .chat-date-separator::after
) {
    background: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-date-separator span {
    color: var(--chat-dark-soft);
    background: rgba(15, 25, 39, 0.9);
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-unread-separator {
    color: var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-unread-separator::before,
    .chat-unread-separator::after
) {
    background: rgba(var(--chat-dark-accent-rgb), 0.38);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-message-content mark {
    color: #2d2107;
    background: #f6cc72;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-delivery-state.is-leido {
    color: #62db91;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-delivery-state.is-recibido,
    .chat-delivery-state.is-enviado,
    .chat-send-state
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-pending.is-error {
    border-color: rgba(248, 113, 113, 0.62);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-pending.is-error .chat-send-state,
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-send-retry {
    color: #fda4af;
}

/* Composer, respuesta, adjuntos pendientes y acceso al ultimo mensaje. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-send-main,
    .chat-quick-templates,
    .chat-reply-composer-preview,
    .chat-attach-chip
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-card);
    border-color: var(--chat-dark-border);
    box-shadow: var(--chat-dark-card-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-quick-templates-label,
    .chat-reply-composer-copy span,
    .chat-attach-chip-text,
    .chat-character-count
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-reply-composer-copy strong,
    .chat-attachment-file-main strong,
    .chat-voice-title strong
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-quick-template-chip,
    .chat-reply-cancel,
    .chat-attach-chip-remove,
    .chat-scroll-latest,
    .chat-load-older
) {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-control);
    border-color: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-quick-template-chip,
    .chat-reply-cancel,
    .chat-attach-chip-remove,
    .chat-scroll-latest,
    .chat-load-older
):hover {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.5);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-scroll-latest-count {
    color: #ffffff;
    background: var(--chat-dark-action);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reply-composer-accent {
    background: var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reply-quote {
    color: inherit;
    background: rgba(0, 0, 0, 0.16);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.56);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reply-quote strong {
    color: var(--chat-dark-accent);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reply-quote span {
    color: inherit;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-drop-overlay {
    background: rgba(8, 16, 27, 0.92);
    border-color: var(--chat-dark-accent);
    box-shadow: inset 0 0 0 1px var(--chat-dark-accent-soft), var(--chat-dark-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-drop-panel {
    color: var(--chat-dark-text);
    background: var(--chat-dark-card);
    border-color: var(--chat-dark-border-strong);
    box-shadow: var(--chat-dark-card-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-drop-panel small {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-drop-icon {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.45);
}

/* Documentos, archivos, audio y controles multimedia. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-preview-card,
    .chat-file-card,
    .chat-document-preview-media,
    .chat-document-preview-fallback,
    .chat-attachment-caption,
    .chat-document-page,
    .chat-spreadsheet-page
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-card);
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-document-page,
    .chat-spreadsheet-page
) {
    background-image: linear-gradient(180deg, rgba(var(--chat-dark-accent-rgb), 0.08), rgba(0, 0, 0, 0.08));
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-document-page span:not(.chat-document-page-label),
    .chat-spreadsheet-page span:not(.chat-document-page-label)
) {
    background: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-document-page-label,
    .chat-file-icon,
    .chat-document-compact-type
) {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.42);
    box-shadow: none;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-file-main,
    .chat-attachment-file-main strong,
    .chat-document-compact-copy strong
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-file-main small,
    .chat-document-compact-copy small,
    .chat-voice-title small
) {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-download,
    .chat-file-action,
    .chat-document-preview-open
) {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-control);
    border-color: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-download,
    .chat-file-action,
    .chat-document-preview-open
):hover {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.5);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-attachment-retention {
    color: var(--chat-dark-soft);
    background: rgba(var(--chat-dark-accent-rgb), 0.1);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-attachment-retention.is-urgent,
    .chat-media-retention-notice.is-urgent
) {
    color: #f8d68b;
    background: rgba(245, 158, 11, 0.15);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-voice-note {
    background: linear-gradient(135deg, var(--chat-dark-action), var(--chat-dark-action-2));
    border-color: rgba(var(--chat-dark-accent-rgb), 0.42);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-voice-wave {
    background: repeating-linear-gradient(90deg, rgba(var(--chat-dark-accent-rgb), 0.48) 0 3px, transparent 3px 7px);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-voice-note .chat-voice-wave-fill {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 3px, transparent 3px 7px);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-voice-note :is(
    .chat-voice-note-play,
    .chat-voice-time
) {
    color: #ffffff;
}

/* Pickers, menus contextuales y superposiciones internas. */
body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-emoji-picker,
    .chat-reaction-menu,
    .chat-context-menu,
    .chat-context-menu.is-message-menu,
    .chat-user-actions-menu
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-panel);
    border-color: var(--chat-dark-border-strong);
    box-shadow: var(--chat-dark-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-emoji-drawer-head,
    .chat-emoji-btn,
    .chat-reaction-picker-btn,
    .chat-bubble-react-btn,
    .chat-bubble-menu-btn,
    .chat-reaction-pill,
    .chat-context-reaction-btn,
    .chat-context-item.chat-context-chip
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-control);
    border-color: var(--chat-dark-border-strong);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-emoji-btn,
    .chat-reaction-picker-btn,
    .chat-bubble-react-btn,
    .chat-bubble-menu-btn,
    .chat-context-reaction-btn,
    .chat-context-item:not(.is-danger),
    .chat-user-action-item:not(.is-danger)
):hover {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
    border-color: rgba(var(--chat-dark-accent-rgb), 0.48);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-emoji-drawer-head strong,
    .chat-context-item,
    .chat-context-menu.is-message-menu .chat-context-item,
    .chat-user-action-item
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-context-separator,
    .chat-user-actions-menu
) {
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-context-separator {
    background: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-bubble-reactions {
    background: rgba(15, 25, 39, 0.9);
    border-color: var(--chat-dark-border);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reaction-count {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-reaction-pill.is-active {
    color: #ffffff;
    background: var(--chat-dark-action);
    border-color: var(--chat-dark-action);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-context-item.is-danger,
    .chat-user-action-item.is-danger,
    .chat-context-menu.is-message-menu .chat-context-item.is-danger
) {
    color: #fda4af;
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-context-item.is-danger,
    .chat-user-action-item.is-danger,
    .chat-context-menu.is-message-menu .chat-context-item.is-danger
):hover {
    color: #fecdd3;
    background: rgba(244, 63, 94, 0.14);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) :is(
    .chat-pinned-item,
    .chat-highlighted-item,
    .chat-scheduled-item
) {
    color: var(--chat-dark-text);
    background: var(--chat-dark-card);
    border-color: var(--chat-dark-border-strong);
    box-shadow: var(--chat-dark-card-shadow);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-pinned-item {
    border-color: rgba(var(--chat-dark-accent-rgb), 0.48);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-highlighted-item {
    color: #f8d68b;
    background: rgba(82, 58, 17, 0.92);
    border-color: rgba(245, 190, 76, 0.4);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-scheduled-item :is(
    .chat-scheduled-item-head strong,
    .chat-scheduled-item-text
) {
    color: var(--chat-dark-text);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-scheduled-item-head small {
    color: var(--chat-dark-soft);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-scheduled-cancel {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(251, 113, 133, 0.42);
}

body.chat-page #chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]) .chat-empty-state-icon {
    color: var(--chat-dark-accent);
    background: var(--chat-dark-accent-soft);
}

/* El modal es hermano de #chat-app; :has mantiene su modo independiente. */
body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) {
    --chat-modal-accent: #91a7ff;
    --chat-modal-accent-2: #69c5ef;
    --chat-modal-accent-rgb: 145, 167, 255;
    --chat-modal-action: #3553c9;
    --chat-modal-action-2: #246aa8;
    --chat-modal-panel: #142131;
    --chat-modal-muted: #0f1927;
    --chat-modal-card: #182536;
    --chat-modal-control: #0b1522;
    --chat-modal-border: #2b3b50;
    --chat-modal-border-strong: #3a4e68;
    --chat-modal-text: #edf4fb;
    --chat-modal-soft: #a8b7c9;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-ocean) {
    --chat-modal-accent: #72d4ef;
    --chat-modal-accent-2: #72d8cb;
    --chat-modal-accent-rgb: 114, 212, 239;
    --chat-modal-action: #17617c;
    --chat-modal-action-2: #176b76;
    --chat-modal-panel: #10242c;
    --chat-modal-muted: #0b1a21;
    --chat-modal-card: #142b34;
    --chat-modal-control: #08171d;
    --chat-modal-border: #294650;
    --chat-modal-border-strong: #38606b;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-mint) {
    --chat-modal-accent: #71d69f;
    --chat-modal-accent-2: #7bd8c2;
    --chat-modal-accent-rgb: 113, 214, 159;
    --chat-modal-action: #256b4a;
    --chat-modal-action-2: #257256;
    --chat-modal-panel: #12251c;
    --chat-modal-muted: #0c1b14;
    --chat-modal-card: #172c22;
    --chat-modal-control: #091710;
    --chat-modal-border: #2d4b3c;
    --chat-modal-border-strong: #3d624e;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-lavender) {
    --chat-modal-accent: #c3a3f2;
    --chat-modal-accent-2: #d3a4dc;
    --chat-modal-accent-rgb: 195, 163, 242;
    --chat-modal-action: #6944a3;
    --chat-modal-action-2: #7550a8;
    --chat-modal-panel: #211a2d;
    --chat-modal-muted: #181220;
    --chat-modal-card: #292036;
    --chat-modal-control: #15101c;
    --chat-modal-border: #49395e;
    --chat-modal-border-strong: #614b78;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"]).chat-theme-sand) {
    --chat-modal-accent: #efbd75;
    --chat-modal-accent-2: #ddb67e;
    --chat-modal-accent-rgb: 239, 189, 117;
    --chat-modal-action: #87531f;
    --chat-modal-action-2: #936027;
    --chat-modal-panel: #261e14;
    --chat-modal-muted: #1b150d;
    --chat-modal-card: #2e2418;
    --chat-modal-control: #181209;
    --chat-modal-border: #50412e;
    --chat-modal-border-strong: #69553a;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal {
    color-scheme: dark;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    .app-modal-dialog,
    .chat-contacts-header,
    .chat-settings-header,
    .chat-contact-subgroup,
    .chat-contact-row,
    .chat-forward-preview,
    .chat-forward-target-row,
    .chat-settings-check,
    .chat-appearance-settings,
    .chat-theme-option-card,
    .chat-template-item,
    .chat-scheduled-modal-open,
    .chat-highlighted-modal-item,
    .chat-role-row
) {
    color: var(--chat-modal-text);
    background: var(--chat-modal-card);
    border-color: var(--chat-modal-border);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal .app-modal-dialog {
    background: var(--chat-modal-panel);
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.55);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    .app-modal-header,
    .app-modal-footer
) {
    border-color: var(--chat-modal-border);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    .app-modal-header h3,
    .chat-settings-header strong,
    .chat-contacts-header strong,
    .chat-settings-group-title strong,
    .chat-contact-main strong,
    .chat-forward-preview strong,
    .chat-forward-target-copy strong,
    .chat-template-item strong,
    .chat-scheduled-modal-copy strong
) {
    color: var(--chat-modal-text);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    .chat-settings-header small,
    .chat-contacts-header small,
    .chat-settings-group-title small,
    .chat-contact-main small,
    .chat-forward-target-copy small,
    .chat-forward-status,
    .chat-template-item p,
    .chat-scheduled-modal-copy small,
    .text-soft
) {
    color: var(--chat-modal-soft);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select,
    .app-modal-close,
    .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger)
) {
    color: var(--chat-modal-text);
    background: var(--chat-modal-control);
    border-color: var(--chat-modal-border-strong);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(input, textarea)::placeholder {
    color: var(--chat-modal-soft);
    opacity: 1;
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal :is(
    .btn-primary,
    #chat-apply-global-settings
) {
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-modal-action), var(--chat-modal-action-2));
    border-color: var(--chat-modal-action);
}

body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal input[type="checkbox"],
body.chat-page:has(#chat-app:is(.chat-mode-dark, [data-chat-mode="dark"])) #app-modal input[type="radio"] {
    accent-color: var(--chat-modal-accent);
}

/* Si la aplicacion es oscura pero el chat es claro, su modal vuelve a claro. */
body.chat-page:has(#chat-app:is(.chat-mode-light, [data-chat-mode="light"])) #app-modal {
    color-scheme: light;
}

body.chat-page:has(#chat-app:is(.chat-mode-light, [data-chat-mode="light"])) #app-modal .app-modal-dialog {
    color: #1f2a44;
    background: #ffffff;
    border-color: #dbe4ff;
}

body.chat-page:has(#chat-app:is(.chat-mode-light, [data-chat-mode="light"])) #app-modal :is(.app-modal-header, .app-modal-footer) {
    border-color: #e5ebff;
}

body.chat-page:has(#chat-app:is(.chat-mode-light, [data-chat-mode="light"])) #app-modal :is(.app-modal-header h3, .app-modal-close) {
    color: #253557;
}

body.chat-page:has(#chat-app:is(.chat-mode-light, [data-chat-mode="light"])) #app-modal .app-modal-close {
    background: #f4f7ff;
    border-color: #d6dffb;
}

/* ---------- Selector de modo del chat ---------- */
.chat-mode-fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--chat-modal-border, #dbe5ff);
    border-radius: 12px;
    background: var(--chat-modal-muted, #f8faff);
}

.chat-mode-fieldset > legend {
    padding: 0 5px;
}

.chat-mode-fieldset > small {
    display: block;
    margin: 0 0 9px;
}

.chat-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.chat-mode-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.chat-mode-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.chat-mode-option-card {
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 1px solid var(--chat-modal-border, #d8e1f6);
    border-radius: 11px;
    background: var(--chat-modal-card, #ffffff);
    color: var(--chat-modal-text, #41537c);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.chat-mode-option-card strong,
.chat-mode-option-card small {
    display: block;
}

.chat-mode-option-card strong {
    font-size: 12px;
}

.chat-mode-option-card small {
    margin-top: 2px;
    color: var(--chat-modal-soft, #7180a1);
    font-size: 10px;
}

.chat-mode-sample {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccd8ef;
    border-radius: 11px;
    background: linear-gradient(145deg, #ffffff, #eaf0ff);
    color: #d99316;
    font-size: 20px;
}

.chat-mode-option[data-chat-mode-value="dark"] .chat-mode-sample,
.chat-mode-option:has(input[value="dark"]) .chat-mode-sample {
    color: #b8c6ff;
    background: linear-gradient(145deg, #1b2639, #0b1320);
    border-color: #43536e;
}

.chat-mode-option:hover .chat-mode-option-card {
    transform: translateY(-1px);
    border-color: var(--chat-modal-accent, #9eb3ff);
}

.chat-mode-option > input:checked + .chat-mode-option-card {
    border-color: var(--chat-modal-accent, #3156ff);
    box-shadow: 0 0 0 3px rgba(var(--chat-modal-accent-rgb, 49, 86, 255), 0.18);
}

.chat-mode-option > input:focus-visible + .chat-mode-option-card {
    outline: 3px solid rgba(var(--chat-modal-accent-rgb, 49, 86, 255), 0.24);
    outline-offset: 2px;
}

/* Las muestras de paleta reflejan el modo antes de aplicarlo. */
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-astra .chat-theme-swatches i:nth-child(1) { background: #91a7ff; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-astra .chat-theme-swatches i:nth-child(2) { background: #254737; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-astra .chat-theme-swatches i:nth-child(3) { background: #0f1b2b; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-ocean .chat-theme-swatches i:nth-child(1) { background: #72d4ef; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-ocean .chat-theme-swatches i:nth-child(2) { background: #164453; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-ocean .chat-theme-swatches i:nth-child(3) { background: #0a2028; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-mint .chat-theme-swatches i:nth-child(1) { background: #71d69f; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-mint .chat-theme-swatches i:nth-child(2) { background: #214737; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-mint .chat-theme-swatches i:nth-child(3) { background: #10251b; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-lavender .chat-theme-swatches i:nth-child(1) { background: #c3a3f2; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-lavender .chat-theme-swatches i:nth-child(2) { background: #44325c; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-lavender .chat-theme-swatches i:nth-child(3) { background: #21172d; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-sand .chat-theme-swatches i:nth-child(1) { background: #efbd75; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-sand .chat-theme-swatches i:nth-child(2) { background: #493722; }
.chat-settings-modal:has(input[name="chat_color_mode"][value="dark"]:checked) .chat-theme-option-sand .chat-theme-swatches i:nth-child(3) { background: #281d11; }

/* Contrato de vista previa usado por chat.js. */
.chat-theme-live-preview[data-mode="dark"] {
    --preview-canvas-start: #0f1b2b;
    --preview-canvas-end: #09131f;
    --preview-pattern: rgba(145, 167, 255, 0.1);
    --preview-incoming: #182638;
    --preview-outgoing: #254737;
    --preview-incoming-text: #edf5ff;
    --preview-outgoing-text: #effaf3;
    border-color: #31455e;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.chat-theme-live-preview[data-mode="dark"][data-theme="ocean"] { --preview-canvas-start: #0a2028; --preview-canvas-end: #061319; --preview-pattern: rgba(114, 212, 239, 0.1); --preview-incoming: #102831; --preview-outgoing: #164453; --preview-incoming-text: #e9f8fc; --preview-outgoing-text: #eaf9fc; }
.chat-theme-live-preview[data-mode="dark"][data-theme="mint"] { --preview-canvas-start: #10251b; --preview-canvas-end: #08160f; --preview-pattern: rgba(113, 214, 159, 0.1); --preview-incoming: #14271f; --preview-outgoing: #214737; --preview-incoming-text: #eefaf3; --preview-outgoing-text: #effaf4; }
.chat-theme-live-preview[data-mode="dark"][data-theme="lavender"] { --preview-canvas-start: #21172d; --preview-canvas-end: #120c19; --preview-pattern: rgba(195, 163, 242, 0.1); --preview-incoming: #251d31; --preview-outgoing: #44325c; --preview-incoming-text: #f7f1fc; --preview-outgoing-text: #faf4ff; }
.chat-theme-live-preview[data-mode="dark"][data-theme="sand"] { --preview-canvas-start: #281d11; --preview-canvas-end: #150f08; --preview-pattern: rgba(239, 189, 117, 0.1); --preview-incoming: #2c241a; --preview-outgoing: #493722; --preview-incoming-text: #fff8ec; --preview-outgoing-text: #fff8ec; }

.chat-theme-live-preview[data-mode="dark"] .chat-theme-preview-bubble {
    color: var(--preview-incoming-text);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);
}

.chat-theme-live-preview[data-mode="dark"] .chat-theme-preview-bubble.is-outgoing {
    color: var(--preview-outgoing-text);
}

@media (max-width: 420px) {
    .chat-mode-option-card {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 7px;
    }

    .chat-mode-sample {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
}

@media (max-width: 340px) {
    .chat-mode-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-mode-option-card {
        transition: none;
    }
}

/* Contraste de los controles exclusivos de la navegacion movil. */
html.app-mode-dark body.app-page :is(
    .notification-link,
    .mobile-sidebar-close
) {
    color: var(--app-text);
    background: var(--app-control-bg);
    border-color: var(--app-control-border);
}

html.app-mode-dark body.app-page :is(
    .notification-link,
    .mobile-sidebar-close
):hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: rgba(var(--app-accent-rgb), 0.4);
}

html.app-mode-dark body.app-page .mobile-bottom-nav-item:not(.active) {
    color: var(--app-text-soft);
}

/* ================================================================
   Refinamiento de indicadores y estados en modo oscuro global
   Mantiene el chat interno fuera de alcance: su apariencia se
   controla de manera independiente desde #chat-app.
   ================================================================ */
html.app-mode-dark body.app-page:not(.chat-page) {
    --app-status-neutral-bg: rgba(148, 163, 184, 0.12);
    --app-status-neutral-border: rgba(148, 163, 184, 0.32);
    --app-status-neutral-text: #d4dce9;
    --app-status-info-bg: var(--app-accent-soft);
    --app-status-info-border: rgba(var(--app-accent-rgb), 0.38);
    --app-status-info-text: var(--app-accent-strong);
    --app-status-success-bg: rgba(34, 197, 94, 0.15);
    --app-status-success-border: rgba(74, 222, 128, 0.36);
    --app-status-success-text: #9aefb8;
    --app-status-warning-bg: rgba(245, 158, 11, 0.16);
    --app-status-warning-border: rgba(251, 191, 36, 0.38);
    --app-status-warning-text: #fbd77b;
    --app-status-danger-bg: rgba(244, 63, 94, 0.15);
    --app-status-danger-border: rgba(251, 113, 133, 0.38);
    --app-status-danger-text: #fda9b8;
}

/* Contadores y accesorios neutros vinculados a la paleta activa. */
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-work-panel-head > strong,
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-mini-time,
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-pending-summary span,
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-project-state,
html.app-mode-dark body.app-page:not(.chat-page) .task-board-count,
html.app-mode-dark body.app-page:not(.chat-page) .forum-topic-unread:not(.has-unread) {
    color: var(--app-status-info-text);
    background: var(--app-status-info-bg);
    border-color: var(--app-status-info-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-work-panel-head > strong,
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-mini-time,
html.app-mode-dark body.app-page:not(.chat-page) .task-board-count {
    box-shadow: inset 0 0 0 1px var(--app-status-info-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .forum-topic-unread.has-unread,
    .forum-priority-media,
    .project-status-pill.status-empty,
    .task-detail-deadline-pill.is-upcoming
) {
    color: var(--app-status-info-text);
    background: var(--app-status-info-bg);
    border-color: var(--app-status-info-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-total,
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-project-mini-card strong,
    .dashboard-task-progress-head strong
) {
    color: var(--app-status-info-text);
}

/* Estado neutro: datos ausentes, fechas sin limite e inactividad. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-task-due,
    .task-detail-deadline-pill.is-none,
    .badge-inactivo
) {
    color: var(--app-status-neutral-text);
    background: var(--app-status-neutral-bg);
    border-color: var(--app-status-neutral-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-task-due:not(.is-today):not(.is-overdue) {
    color: var(--app-status-neutral-text);
    background: var(--app-status-neutral-bg);
    border-color: var(--app-status-neutral-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .no-data {
    color: var(--app-text-soft);
    background: var(--app-panel-muted);
    border-color: var(--app-status-neutral-border);
}

/* Badges informativos. La base cubre cualquier estado no tipificado. */
html.app-mode-dark body.app-page:not(.chat-page) .badge {
    color: var(--app-status-neutral-text);
    background: var(--app-status-neutral-bg);
    border: 1px solid var(--app-status-neutral-border);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .badge-planificada,
    .badge-en_revision,
    .badge-prio-media
) {
    color: var(--app-status-info-text);
    background: var(--app-status-info-bg);
    border-color: var(--app-status-info-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-task-priority.badge-prio-media {
    color: var(--app-status-info-text);
    background: var(--app-status-info-bg);
    border-color: var(--app-status-info-border);
}

/* Exito / prioridad baja. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .badge-completada,
    .badge-confirmada,
    .badge-activo,
    .badge-prio-baja,
    .forum-priority-baja,
    .project-status-pill.status-done,
    .task-detail-deadline-pill.is-complete
) {
    color: var(--app-status-success-text);
    background: var(--app-status-success-bg);
    border-color: var(--app-status-success-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-task-priority.badge-prio-baja {
    color: var(--app-status-success-text);
    background: var(--app-status-success-bg);
    border-color: var(--app-status-success-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .project-status-pill.status-done .project-status-icon {
    background: rgba(74, 222, 128, 0.2);
}

/* Advertencia / prioridad alta. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-pending-summary span.is-today,
    .dashboard-task-priority.badge-prio-alta,
    .dashboard-task-due.is-today,
    .badge-en_progreso,
    .badge-aplazada,
    .badge-suspendida,
    .badge-pendiente,
    .badge-prio-alta,
    .forum-priority-alta,
    .project-status-pill.status-pending,
    .task-detail-deadline-pill.is-today
) {
    color: var(--app-status-warning-text);
    background: var(--app-status-warning-bg);
    border-color: var(--app-status-warning-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .project-status-pill.status-pending .project-status-icon {
    background: rgba(251, 191, 36, 0.2);
}

/* Peligro / vencimientos, bloqueos y prioridad critica. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-pending-summary span.is-overdue,
    .dashboard-pending-summary span.is-blocked,
    .dashboard-task-priority.badge-prio-critica,
    .dashboard-task-due.is-overdue,
    .badge-cancelada,
    .badge-rechazada,
    .badge-bloqueada,
    .badge-prio-critica,
    .forum-priority-critica,
    .project-status-pill.status-started,
    .task-detail-deadline-pill.is-overdue
) {
    color: var(--app-status-danger-text);
    background: var(--app-status-danger-bg);
    border-color: var(--app-status-danger-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .project-status-pill.status-started .project-status-icon {
    background: rgba(251, 113, 133, 0.2);
}

/* Texto secundario del Escritorio que conservaba colores del modo claro. */
html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-project-mini-card span,
    .dashboard-task-progress p,
    .dashboard-collapsible-section > summary small
) {
    color: var(--app-text-soft);
}

/* Control expandir/contraer: superficie oscura y acento visible. */
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-collapsible-section > summary::after {
    color: var(--app-status-info-text);
    background: var(--app-control-bg);
    border-color: var(--app-status-info-border);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-collapsible-section > summary:hover::after,
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-collapsible-section > summary:focus-visible::after {
    color: var(--app-accent-strong);
    background: var(--app-accent-soft-strong);
    border-color: var(--app-accent);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-collapsible-section > summary:focus-visible {
    outline: 3px solid var(--app-focus-ring);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Accion principal: tono profundo para conservar texto blanco con AA. */
html.app-mode-dark body.app-page:not(.chat-page) .btn-primary {
    color: #ffffff;
    background: linear-gradient(120deg, var(--app-action), var(--app-action-secondary));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(var(--app-action-rgb), 0.3);
}

html.app-mode-dark body.app-page:not(.chat-page) .btn-primary:hover,
html.app-mode-dark body.app-page:not(.chat-page) .btn-primary:focus-visible {
    color: #ffffff;
    background: linear-gradient(120deg, var(--app-action-strong), var(--app-action-secondary));
    box-shadow: 0 0 0 3px var(--app-focus-ring), 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* La marca es un span CSS; evita el antiguo cuadrado blanco del favicon. */
html.app-mode-dark body.app-page:not(.chat-page) .logo-mark {
    color: #ffffff;
    background: linear-gradient(135deg, var(--app-action), var(--app-action-secondary));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 5px 14px rgba(var(--app-action-rgb), 0.3);
}

/* ================================================================
   Accesos rapidos del Escritorio
   Las acciones de creacion son cards; las consultas quedan como
   accesos secundarios compactos y fluidos.
   ================================================================ */
body.app-page:not(.chat-page) .dashboard-quick-panel {
    --dashboard-quick-card-bg: color-mix(in srgb, var(--app-card-bg, #ffffff) 94%, var(--app-accent, #3156ff) 6%);
    --dashboard-quick-card-hover: color-mix(in srgb, var(--app-card-bg, #ffffff) 88%, var(--app-accent, #3156ff) 12%);
    --dashboard-quick-control-bg: color-mix(in srgb, var(--app-control-bg, #ffffff) 96%, var(--app-accent, #3156ff) 4%);
    --dashboard-quick-border: color-mix(in srgb, var(--app-panel-border, #dbe5ff) 78%, var(--app-accent, #3156ff) 22%);
    display: grid;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px 16px;
    overflow: hidden;
    color: var(--app-text, #25375f);
    background:
        linear-gradient(135deg, rgba(var(--app-accent-rgb, 49, 86, 255), 0.065), transparent 48%),
        var(--app-panel-bg, #ffffff);
    border-color: var(--app-panel-border, #dbe5ff);
}

body.app-page:not(.chat-page) .dashboard-quick-head {
    min-width: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px 24px;
}

body.app-page:not(.chat-page) .dashboard-quick-head > div {
    min-width: 0;
}

body.app-page:not(.chat-page) .dashboard-quick-head h2 {
    margin: 1px 0 0;
    color: var(--app-text, #25375f);
    font-size: var(--dashboard-block-title-size, clamp(20px, 1.55vw, 22px));
    line-height: 1.16;
    font-weight: 900;
}

body.app-page:not(.chat-page) .dashboard-quick-head p {
    max-width: 420px;
    margin: 0;
    color: var(--app-text-soft, #68789e);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

body.app-page:not(.chat-page) .dashboard-quick-create-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.app-page:not(.chat-page) .dashboard-quick-card {
    position: relative;
    min-width: 0;
    min-height: 74px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    overflow: hidden;
    color: var(--app-text, #25375f);
    text-decoration: none;
    background: var(--dashboard-quick-card-bg);
    border: 1px solid var(--dashboard-quick-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(42, 61, 104, 0.08);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

body.app-page:not(.chat-page) .dashboard-quick-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent, #3156ff);
    background: var(--app-accent-soft, rgba(49, 86, 255, 0.1));
    border: 1px solid rgba(var(--app-accent-rgb, 49, 86, 255), 0.24);
    border-radius: 12px;
}

body.app-page:not(.chat-page) .dashboard-quick-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.app-page:not(.chat-page) .dashboard-quick-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.app-page:not(.chat-page) .dashboard-quick-copy strong,
body.app-page:not(.chat-page) .dashboard-quick-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-page:not(.chat-page) .dashboard-quick-copy strong {
    color: var(--app-text, #25375f);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 850;
}

body.app-page:not(.chat-page) .dashboard-quick-copy small {
    color: var(--app-text-soft, #68789e);
    font-size: 11px;
    line-height: 1.25;
}

body.app-page:not(.chat-page) .dashboard-quick-arrow {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent, #3156ff);
    background: var(--app-accent-soft, rgba(49, 86, 255, 0.1));
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

body.app-page:not(.chat-page) .dashboard-quick-links {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid var(--app-divider, var(--app-panel-border, #dbe5ff));
}

body.app-page:not(.chat-page) .dashboard-quick-links-label {
    margin-right: 3px;
    color: var(--app-text-soft, #68789e);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body.app-page:not(.chat-page) .dashboard-quick-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    color: var(--app-text, #25375f);
    background: var(--dashboard-quick-control-bg);
    border: 1px solid var(--app-control-border, #cfdaf1);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 750;
    text-decoration: none;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

body.app-page:not(.chat-page) .dashboard-quick-link span {
    color: var(--app-accent, #3156ff);
    transition: transform 0.18s ease;
}

@media (hover: hover) {
    body.app-page:not(.chat-page) .dashboard-quick-card:hover {
        color: var(--app-text, #25375f);
        text-decoration: none;
        background: var(--dashboard-quick-card-hover);
        border-color: rgba(var(--app-accent-rgb, 49, 86, 255), 0.55);
        box-shadow: 0 11px 24px rgba(42, 61, 104, 0.14);
        transform: translateY(-2px);
    }

    body.app-page:not(.chat-page) .dashboard-quick-card:hover .dashboard-quick-arrow,
    body.app-page:not(.chat-page) .dashboard-quick-link:hover span {
        transform: translateX(3px);
    }

    body.app-page:not(.chat-page) .dashboard-quick-link:hover {
        color: var(--app-accent, #3156ff);
        text-decoration: none;
        background: var(--app-accent-soft, rgba(49, 86, 255, 0.1));
        border-color: rgba(var(--app-accent-rgb, 49, 86, 255), 0.48);
        transform: translateY(-1px);
    }
}

body.app-page:not(.chat-page) .dashboard-quick-card:focus-visible,
body.app-page:not(.chat-page) .dashboard-quick-link:focus-visible {
    outline: 3px solid var(--app-focus-ring, rgba(49, 86, 255, 0.24));
    outline-offset: 2px;
    border-color: var(--app-accent, #3156ff);
}

body.app-page:not(.chat-page) .dashboard-quick-card:active,
body.app-page:not(.chat-page) .dashboard-quick-link:active {
    transform: translateY(0);
}

/* Superficies oscuras teñidas con la paleta elegida. */
html.app-mode-dark body.app-page:not(.chat-page) .dashboard-quick-panel {
    --dashboard-quick-card-bg: color-mix(in srgb, var(--app-card-bg) 92%, var(--app-accent) 8%);
    --dashboard-quick-card-hover: color-mix(in srgb, var(--app-card-bg) 84%, var(--app-accent) 16%);
    --dashboard-quick-control-bg: color-mix(in srgb, var(--app-control-bg) 92%, var(--app-accent) 8%);
    --dashboard-quick-border: color-mix(in srgb, var(--app-panel-border) 78%, var(--app-accent) 22%);
    color: var(--app-text);
    background:
        linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.09), transparent 52%),
        var(--app-panel-bg);
    border-color: var(--app-panel-border);
    box-shadow: var(--app-card-shadow);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-quick-card {
    color: var(--app-text);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-quick-head h2,
    .dashboard-quick-copy strong,
    .dashboard-quick-link
) {
    color: var(--app-text);
}

html.app-mode-dark body.app-page:not(.chat-page) :is(
    .dashboard-quick-head p,
    .dashboard-quick-copy small,
    .dashboard-quick-links-label
) {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page:not(.chat-page) .dashboard-quick-link {
    background: var(--dashboard-quick-control-bg);
    border-color: var(--app-control-border);
}

@media (hover: hover) {
    html.app-mode-dark body.app-page:not(.chat-page) .dashboard-quick-card:hover {
        color: var(--app-text);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
    }
}

@media (max-width: 760px) {
    body.app-page:not(.chat-page) .dashboard-quick-panel {
        padding: 13px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-head {
        align-items: start;
    }

    body.app-page:not(.chat-page) .dashboard-quick-head p {
        max-width: 300px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-create-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-page:not(.chat-page) .dashboard-quick-links-label {
        grid-column: 1 / -1;
    }

    body.app-page:not(.chat-page) .dashboard-quick-link {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    body.app-page:not(.chat-page) .dashboard-quick-head {
        display: grid;
        gap: 3px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-head p {
        max-width: none;
        text-align: left;
    }

    body.app-page:not(.chat-page) .dashboard-quick-create-grid,
    body.app-page:not(.chat-page) .dashboard-quick-links {
        grid-template-columns: minmax(0, 1fr);
    }

    body.app-page:not(.chat-page) .dashboard-quick-card {
        min-height: 64px;
        grid-template-columns: 36px minmax(0, 1fr) 24px;
        padding: 8px 10px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    body.app-page:not(.chat-page) .dashboard-quick-link {
        min-height: 44px;
        justify-content: space-between;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-page:not(.chat-page) :is(
        .dashboard-quick-card,
        .dashboard-quick-arrow,
        .dashboard-quick-link,
        .dashboard-quick-link span
    ) {
        transition: none;
    }
}

/* ================================================================
   Calendario mensual en modo oscuro global
   Los dias fuera del mes usan una superficie atenuada propia; hoy,
   seleccion y eventos conservan jerarquias visuales independientes.
   ================================================================ */
html.app-mode-dark body.app-page:not(.chat-page) {
    --calendar-dark-header-bg: color-mix(in srgb, var(--app-panel-muted) 84%, var(--app-accent) 16%);
    --calendar-dark-cell-bg: var(--app-card-bg);
    --calendar-dark-outside-bg: color-mix(in srgb, var(--app-panel-muted) 88%, #000000 12%);
    --calendar-dark-weekend-bg: color-mix(in srgb, var(--app-card-bg) 95%, var(--app-accent) 5%);
    --calendar-dark-hover-bg: rgba(var(--app-accent-rgb), 0.16);
    --calendar-dark-event-bg: rgba(var(--app-accent-rgb), 0.11);
    --calendar-dark-available-bg: rgba(34, 197, 94, 0.14);
    --calendar-dark-selected-bg: rgba(var(--app-accent-rgb), 0.22);
    --calendar-dark-today-bg: rgba(245, 158, 11, 0.16);
    --calendar-dark-border: var(--app-panel-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar {
    color: var(--app-text);
    background: var(--app-panel-muted);
    border-color: var(--calendar-dark-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-table {
    color: var(--app-text);
    background: var(--app-panel-muted);
}

/* Fila LU-DO. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-table thead th {
    color: var(--app-text);
    background: var(--calendar-dark-header-bg);
    border-color: var(--calendar-dark-border);
    box-shadow: inset 0 -1px 0 var(--calendar-dark-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-table thead th:nth-child(6),
html.app-mode-dark body.app-page:not(.chat-page) .calendar-table thead th:nth-child(7) {
    color: var(--app-accent-strong);
    background: color-mix(in srgb, var(--calendar-dark-header-bg) 88%, var(--app-accent) 12%);
}

/* Dias del mes y fines de semana. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td {
    color: var(--app-text);
    background: var(--calendar-dark-cell-bg);
    border-color: var(--calendar-dark-border);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td:nth-child(6),
html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td:nth-child(7) {
    background: var(--calendar-dark-weekend-bg);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td.empty {
    background:
        linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.025), transparent 58%),
        var(--calendar-dark-outside-bg);
    border-color: color-mix(in srgb, var(--calendar-dark-border) 82%, transparent 18%);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-btn {
    color: var(--app-text);
    background: transparent;
    border-color: transparent;
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-btn:hover {
    color: var(--app-text);
    background: var(--calendar-dark-hover-bg);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-btn:focus-visible {
    position: relative;
    z-index: 1;
    color: var(--app-text);
    background: var(--calendar-dark-hover-bg);
    outline: 3px solid var(--app-accent);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 1px var(--app-control-bg);
}

/* Dias con agenda: tinte de paleta sin competir con hoy/seleccion. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.has-meetings .calendar-day-btn,
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.has-agenda-items .calendar-day-btn {
    color: var(--app-text);
    background: var(--calendar-dark-event-bg);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.has-agenda-items .calendar-day-btn:hover {
    background: color-mix(in srgb, var(--app-card-bg) 72%, var(--app-accent) 28%);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.has-available-slots .calendar-day-btn {
    color: var(--app-text);
    background: var(--calendar-dark-available-bg);
    box-shadow: inset 0 0 0 1px var(--app-status-success-border, rgba(74, 222, 128, 0.34));
}

/* Hoy conserva significado temporal con advertencia oscura accesible. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.today .calendar-day-btn {
    color: var(--app-text);
    background: var(--calendar-dark-today-bg);
    box-shadow: inset 0 0 0 2px var(--app-status-warning-border, rgba(251, 191, 36, 0.42));
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.today .calendar-day-btn:hover {
    background: color-mix(in srgb, var(--app-card-bg) 76%, #f59e0b 24%);
}

/* Seleccion gana sobre el resto y siempre muestra el acento de la paleta. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.selected .calendar-day-btn {
    color: var(--app-text);
    background: var(--calendar-dark-selected-bg);
    outline: 2px solid var(--app-accent);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb), 0.34);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.selected .calendar-day-btn:hover,
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.selected .calendar-day-btn:focus-visible {
    background: color-mix(in srgb, var(--app-card-bg) 66%, var(--app-accent) 34%);
}

/* Numeros, indicadores y contador de eventos. */
html.app-mode-dark body.app-page:not(.chat-page) .day-number {
    color: var(--app-text);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td:nth-child(6) .day-number,
html.app-mode-dark body.app-page:not(.chat-page) .calendar-table td:nth-child(7) .day-number {
    color: var(--app-text-soft);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.has-agenda-items .day-number,
html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.selected .day-number {
    color: var(--app-accent-strong);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day.today .day-number {
    color: var(--app-status-warning-text, #fbd77b);
}

html.app-mode-dark body.app-page:not(.chat-page) .day-indicator {
    color: var(--app-accent-strong);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-dot {
    border: 1px solid rgba(var(--app-accent-rgb), 0.46);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-dot.is-meeting {
    background: #78a9ff;
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-dot.is-task {
    background: #f6b968;
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-dot.is-reminder {
    background: #6ee7a8;
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-total {
    width: fit-content;
    min-width: 20px;
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    color: var(--app-accent-strong);
    background: var(--app-accent-soft);
    border: 1px solid rgba(var(--app-accent-rgb), 0.32);
    border-radius: 999px;
    line-height: 1;
}

/* Tooltip de la agenda mensual, agregado al final de body por JavaScript. */
html.app-mode-dark body.app-page:not(.chat-page) .calendar-hover-tooltip {
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-panel-bg) 92%, #000000 8%);
    border-color: rgba(var(--app-accent-rgb), 0.48);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
}

html.app-mode-dark body.app-page:not(.chat-page) .calendar-hover-tooltip span + span {
    border-color: var(--app-divider);
}

@media (max-width: 760px) {
    html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-total {
        min-width: 18px;
        min-height: 16px;
        padding: 1px 4px;
    }

    html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-btn:focus-visible {
        outline-width: 2px;
        outline-offset: -3px;
    }
}

@media (max-width: 480px) {
    html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-markers {
        gap: 3px;
    }

    html.app-mode-dark body.app-page:not(.chat-page) .calendar-day-total {
        min-width: 16px;
        padding-inline: 3px;
    }
}