/* Kalos Inversionista - Estilos globales con tema Vesper */

html, body {
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ========== INPUTS EN MAYUSCULAS (excepto correos electronicos) ========== */
/* Feedback visual mientras se escribe — el JS vesper-uppercase.js convierte
   el valor real al disparar el evento input en fase de captura. */
input[type="text"]:not([data-no-upper="true"]),
input:not([type]):not([data-no-upper="true"]),
textarea:not([data-no-upper="true"]) {
    text-transform: uppercase;
}

input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[data-no-upper="true"],
[data-no-upper="true"] input,
[data-no-upper="true"] textarea {
    text-transform: none !important;
}

h1:focus {
    outline: none;
}

/* ========== OPCIONES DE DROPDOWNS EN MAYUSCULAS ========== */
/* Aplica a MudSelect / MudAutocomplete: las opciones en el panel desplegable
   (mud-popover con mud-list-item adentro) se renderizan en UPPER. Refuerza
   la convencion visual del CRM ("CORPORATIVO" en vez de "Corporativo").
   Excluye explicitamente menus contextuales del shell (vesper-user-menu-popover,
   vesper-header-menu-popover) y los items del FAQ para no romper su layout. */
.mud-popover .mud-list-item:not(.vesper-user-menu-popover .mud-list-item):not(.vesper-header-menu-popover .mud-list-item) {
    text-transform: uppercase;
}

/* ========== TABS — slider mas grueso para indicar tab activo ========== */
/* Aplica a Noticias, Directorio Externo, Comites & Acuerdos y cualquier
   otro MudTabs del sistema. Default MudBlazor = 2px; aqui = 4px. */
.mud-tabs-toolbar .mud-tab-slider {
    height: 4px !important;
}

:root {
    --vesper-purple: #582C83;
    --vesper-gold: #EAAA00;
    --vesper-purple-dark: #3d1d5c;
    --vesper-purple-light: #7a45a8;
    --vesper-purple-xlight: #f0eaf8;
    --vesper-gold-light: #ffd84d;
    --vesper-text: #1e1a2e;
    --vesper-text-muted: #5c5672;
}

/* ========== LOGIN PAGE ========== */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.login-left {
    flex: 1;
    background: linear-gradient(135deg, #582C83 0%, #3d1d5c 50%, #1A0A33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(234, 170, 0, 0.15) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.login-brand {
    text-align: center;
    z-index: 1;
    position: relative;
}

.brand-icon {
    margin-bottom: 1.5rem;
}

.brand-title {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 300;
    margin-top: 0.5rem;
}

.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #FAFAFA;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: #FFFFFF !important;
    border-radius: 12px !important;
}

.login-title {
    color: #582C83;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}

.login-subtitle-text {
    color: #666666;
}

.login-btn {
    height: 48px;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 8px !important;
}

.login-footer {
    text-align: center;
}

.text-muted {
    color: #999999 !important;
}

/* ========== RESPONSIVE LOGIN ========== */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-left {
        min-height: 200px;
        flex: 0;
    }

    .brand-title {
        font-size: 1.8rem;
    }

    .login-right {
        padding: 1rem;
    }

    .login-card {
        padding: 1.5rem;
    }
}

/* ========== DIALOGS VESPER ========== */
.mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #582C83 0%, #7a45a8 100%);
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 14px 24px;
}

.mud-dialog .mud-dialog-title .mud-typography {
    color: #FFFFFF !important;
}

.mud-dialog .mud-dialog-actions {
    border-top: 2px solid #EAAA00;
    padding: 12px 24px;
}

/* ========== PAGE TITLES VESPER ========== */
.vesper-page-title {
    color: #582C83 !important;
    font-weight: 700 !important;
    padding-bottom: 10px;
    border-bottom: 3px solid #EAAA00;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px !important;
}

.vesper-page-title .mud-icon-root {
    color: #EAAA00 !important;
}

/* ========== TABLE HEADERS VESPER ========== */
.mud-table:not(.mud-simple-table) .mud-table-head {
    background: linear-gradient(135deg, #582C83 0%, #7a45a8 100%);
}

.mud-table:not(.mud-simple-table) .mud-table-head .mud-table-cell {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.8rem;
    border-bottom: 2px solid #EAAA00 !important;
    background: linear-gradient(135deg, #582C83 0%, #7a45a8 100%) !important;
}

/* ========== MUDPAPER VESPER ========== */
.vesper-paper {
    border-top: 3px solid #582C83;
    border-radius: 8px !important;
}

/* ========== HOME CARDS VESPER ========== */
.vesper-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 12px !important;
    cursor: pointer;
}

.vesper-card:hover {
    border-color: #EAAA00;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(88, 44, 131, 0.2) !important;
}

.vesper-card .mud-card-content {
    padding: 24px 16px;
}

/* ========== HOME USER INFO ========== */
.vesper-user-info {
    border-top: 3px solid #582C83;
    border-radius: 8px !important;
}

.vesper-user-info td:first-child {
    color: #582C83;
    font-weight: 600;
    width: 140px;
}

/* ========== SECTION HEADER VESPER ========== */
.vesper-section-header {
    color: #582C83 !important;
    font-weight: 600 !important;
}

/* ========== KPI CARDS ========== */
.vesper-kpi-card {
    border-radius: 12px !important;
    transition: all 0.3s ease;
    border-left: 4px solid #582C83;
}

.vesper-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(88, 44, 131, 0.15) !important;
}

/* ========== CORREOS MODULE (Outlook-style) ========== */
/* Tipografia alineada a Outlook web: Segoe UI sans en todo el modulo (en vez
   del 'Inter' global). Se aplica al panel raiz para que cascadee a carpetas,
   lista y panel de lectura; las clases que forzaban Georgia serif abajo
   tambien se migraron a esta familia para replicar el look de Outlook. */
.vesper-correo-outlook-font,
.vesper-correo-panel {
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Los 3 paneles ocupan todo el alto disponible bajo el AppBar.
   IMPORTANTE — compensacion del zoom: el body global lleva `zoom: 0.95`
   (ver final del archivo). `100dvh` se resuelve contra el viewport REAL (en px
   sin escalar), pero el panel SI se escala despues por 0.95, por lo que un
   `calc(100dvh - Npx)` se renderiza a 0.95x y deja un hueco al fondo. Para que
   el panel llene visualmente la pantalla dividimos entre el factor de zoom y
   restamos el offset superior del MudMainContent en espacio de layout:
   pt-16 (64px) + mt-4 (16px) = 80px. Si cambia el zoom global o el padding del
   main, ajustar aqui (el divisor debe coincidir con el valor de `body { zoom }`). */
.vesper-correo-panel {
    height: calc(100dvh / 0.95 - 80px);
    overflow-y: auto;
}

/* Panel izquierdo de carpetas: fondo tenue (lila-gris) estilo Outlook web,
   que lo separa visualmente de la lista central blanca y evita que el espacio
   vacio del fondo se vea "flotando" en blanco. Tono mas neutro/claro que el
   highlight de la carpeta activa (#f0eaf8) para que la activa siga resaltando. */
.vesper-correo-panel-carpetas {
    background: #f7f5fa;
}

.vesper-correo-folder {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
    margin: 2px 4px;
}

.vesper-correo-folder:hover {
    background: rgba(88, 44, 131, 0.06);
}

.vesper-correo-folder-active {
    background: #f0eaf8 !important;
    color: #582C83 !important;
    font-weight: 600;
}

.vesper-correo-folder-active .mud-icon-root {
    color: #582C83 !important;
}

/* Header de la seccion "Mis carpetas" con boton "+" alineado a la derecha. */
.vesper-correo-misc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 4px 16px;
    margin-top: 4px;
}

.vesper-correo-misc-titulo {
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Las carpetas custom dejan espacio reservado a la derecha para el boton de
   acciones que aparece al hover, evitando que el badge "salte" cuando el menu
   se hace visible. */
.vesper-correo-folder-custom {
    position: relative;
}

.vesper-correo-folder-acciones {
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-left: 4px;
}

.vesper-correo-folder-custom:hover .vesper-correo-folder-acciones,
.vesper-correo-folder-acciones:focus-within {
    opacity: 1;
}

/* ----- Paleta de "Cambiar color" del menu contextual de carpetas custom.
   Vive dentro del MudMenu como markup libre (no MudMenuItems) para
   permitir layout en grid. El click en un swatch propaga y MudMenu se
   cierra automaticamente. ----- */
.vesper-color-picker-label {
    padding: 6px 14px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vesper-color-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 4px 14px 10px;
    min-width: 180px;
}

.vesper-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.vesper-color-swatch:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.vesper-color-swatch.selected {
    box-shadow: 0 0 0 2px #582C83;
    transform: scale(1.1);
}

.vesper-color-swatch-reset {
    grid-column: span 5;
    width: 100%;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    font-size: 0.72rem;
    color: #5c5672;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vesper-color-swatch-reset:hover {
    background: #f0eaf8;
    border-color: #582C83;
    color: #582C83;
}

/* Barra contextual sobre la lista de correos. Muestra master checkbox + conteo
   (modo normal) o conteo + acciones masivas (modo seleccion). */
.vesper-correo-listheader {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    min-height: 40px;
}

.vesper-correo-listheader-label {
    font-size: 0.75rem;
    color: #666;
    margin-left: 4px;
}

.vesper-correo-listheader-label-activo {
    color: #582C83;
    font-weight: 600;
}

/* Checkbox por correo: oculto por defecto, aparece al hover del row o cuando
   el correo esta marcado. El padding compensa el tamano del MudCheckBox para
   no romper la alineacion del avatar. */
.vesper-correo-item-checkbox {
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    margin-top: -2px;
}

.vesper-correo-item:hover .vesper-correo-item-checkbox,
.vesper-correo-item-checkbox-activo {
    opacity: 1;
}

/* Resalte sutil de fila marcada (independiente del row seleccionado para
   abrir detalle). */
.vesper-correo-item-marcado {
    background: rgba(88, 44, 131, 0.04);
}

/* ----------- Item de correo (rediseno 2026-05-27 estilo Outlook) ----------- */

.vesper-correo-lista-scroll {
    flex: 1;
    overflow-y: auto;
}

/* Override del row del correo: layout horizontal compacto sin avatar.
   La clase base .vesper-correo-item (definida arriba) ya tiene padding,
   hover y selected. Aqui solo extiendo el inner layout. */
.vesper-correo-item {
    position: relative;
    padding: 10px 12px 10px 18px;
    gap: 0;
    align-items: stretch;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #f5f0f8;
}

.vesper-correo-item:hover {
    background: #faf7fc;
}

.vesper-correo-item-selected {
    background: #f0eaf8 !important;
}

/* Bullet morado lateral para no leidos — reemplaza al avatar como pista visual. */
.vesper-correo-item-bullet {
    display: block;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease;
}

.vesper-correo-item-unread .vesper-correo-item-bullet {
    background: #582C83;
}

.vesper-correo-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 4px;
}

.vesper-correo-item-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vesper-correo-item-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.vesper-correo-item-de {
    flex: 1;
    font-size: 0.95rem;
    color: #1e1a2e;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-correo-item-unread .vesper-correo-item-de {
    font-weight: 700;
    color: #582C83;
}

.vesper-correo-item-hora {
    font-size: 0.78rem;
    color: #999;
    flex-shrink: 0;
    white-space: nowrap;
}

.vesper-correo-item-unread .vesper-correo-item-hora {
    color: #582C83;
    font-weight: 600;
}

.vesper-correo-item-asunto {
    flex: 1;
    font-size: 0.9rem;
    color: #5c5672;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.vesper-correo-item-asunto strong {
    color: #1e1a2e;
    font-weight: 500;
}

.vesper-correo-item-unread .vesper-correo-item-asunto strong {
    font-weight: 700;
    color: #582C83;
}

.vesper-correo-item-preview {
    color: #999;
    font-weight: 400;
}

.vesper-correo-item-icon {
    font-size: 0.95rem !important;
    color: #999;
    flex-shrink: 0;
}

.vesper-correo-item-icon-urgente {
    color: #dc2626 !important;
}

.vesper-correo-item-icon-alta {
    color: #EAAA00 !important;
}

/* Acciones rapidas a la derecha del row (estilo Outlook web).
   Siempre visibles pero atenuadas (opacity 0.65) cuando el row no esta
   en hover; al hacer hover o seleccionar el row pasan a opacity 1 + color
   morado vivo. Asi son discoverable sin saturar visualmente la lista. */
.vesper-correo-item-acciones {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    opacity: 0.65;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.vesper-correo-item:hover .vesper-correo-item-acciones,
.vesper-correo-item-selected .vesper-correo-item-acciones,
.vesper-correo-item-acciones:focus-within {
    opacity: 1;
}

.vesper-correo-item-accion-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #5c5672;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.vesper-correo-item-accion-btn:hover {
    background: #f0eaf8;
    color: #582C83;
}

.vesper-correo-item-accion-btn:active {
    transform: scale(0.92);
}

.vesper-correo-item-accion-btn-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Flag activo (mensaje marcado): bandera roja siempre visible. */
.vesper-correo-item-accion-btn-flagged {
    color: #dc2626;
    opacity: 1 !important;
}

.vesper-correo-item-accion-btn-flagged:hover {
    background: #fee2e2;
}

/* Pin activo (anclado arriba): pin dorado Vesper siempre visible. */
.vesper-correo-item-accion-btn-pinned {
    color: #EAAA00;
    opacity: 1 !important;
}

.vesper-correo-item-accion-btn-pinned:hover {
    background: #fff7e0;
}

.vesper-correo-item-accion-btn .mud-icon-root {
    font-size: 1.05rem !important;
    color: inherit;
}

/* Empty state de la LISTA (centro) — antes era inline simple. */
.vesper-correo-lista-empty {
    padding: 4rem 2rem;
    text-align: center;
}

.vesper-correo-lista-empty-icon {
    font-size: 3.5rem !important;
    color: #d8d0e2;
    margin-bottom: 8px;
}

.vesper-correo-lista-empty-titulo {
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #5c5672;
    margin-top: 8px;
}

.vesper-correo-lista-empty-sub {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 4px;
}

/* Header de la carpeta activa dentro de la barra de seleccion. Estilo
   Outlook web: nombre Segoe UI semibold + estrella dorada + conteo en gris. */
.vesper-correo-carpeta-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.vesper-correo-carpeta-nombre {
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #582C83;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-correo-carpeta-star {
    color: #EAAA00 !important;
    font-size: 1rem !important;
    flex-shrink: 0;
}

.vesper-correo-carpeta-conteo {
    font-size: 0.72rem;
    color: #888;
    flex-shrink: 0;
    margin-left: 2px;
}

/* Menu "Filtrar" del header de la lista (estilo Outlook). El MudMenu
   renderiza internamente un MudButton; sobreescribimos su estilo para que
   se vea como un boton compacto morado con icono + label + chevron.
   La clase `.vesper-correo-filtrar-menu` se aplica al MudMenu y baja al
   button interno via descendant selector. */
.vesper-correo-filtrar-menu {
    margin-left: auto;
}

.vesper-correo-filtrar-menu .mud-button-root {
    text-transform: none;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 8px;
    min-width: 0;
    height: auto;
    color: #5c5672;
    border-radius: 4px;
}

.vesper-correo-filtrar-menu .mud-button-root:hover {
    background: #f5f0fa;
    color: #582C83;
}

.vesper-correo-filtrar-menu.mud-icon-color-primary .mud-button-root {
    color: #582C83;
    background: #f0eaf8;
    font-weight: 600;
}

.vesper-correo-filtrar-menu .mud-icon-root {
    font-size: 1rem !important;
}

/* Chip de adjunto clickeable: dispara descarga del archivo via JS interop.
   Estilo borde sutil + hover lila Vesper + icono de descarga al final.
   Deshabilitado (sin contenido binario) se ve atenuado y sin cursor. */
.vesper-correo-adjunto-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    color: #1e1a2e;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    max-width: 320px;
}

.vesper-correo-adjunto-chip:hover:not(.deshabilitado) {
    background: #f5f0fa;
    border-color: #582C83;
}

.vesper-correo-adjunto-chip:active:not(.deshabilitado) {
    transform: translateY(1px);
}

.vesper-correo-adjunto-chip .nombre {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vesper-correo-adjunto-chip .tamano {
    color: #999;
    font-size: 0.72rem;
}

.vesper-correo-adjunto-chip .download-icon {
    margin-left: auto;
    color: #582C83;
    font-size: 1rem !important;
}

.vesper-correo-adjunto-chip:hover:not(.deshabilitado) .download-icon {
    color: #EAAA00;
}

.vesper-correo-adjunto-chip .mud-icon-root {
    font-size: 1rem !important;
    color: #5c5672;
}

.vesper-correo-adjunto-chip.deshabilitado {
    opacity: 0.55;
    cursor: not-allowed;
    background: #fafafa;
}

/* Empty state del DETALLE (panel derecho) con tipografia Vesper. */
.vesper-correo-detalle-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.vesper-correo-detalle-empty-icon-wrap {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #f5f0fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(88, 44, 131, 0.08);
}

.vesper-correo-detalle-empty-icon {
    font-size: 3rem !important;
    color: #582C83;
}

.vesper-correo-detalle-empty-titulo {
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #582C83;
    margin: 0 0 6px;
}

.vesper-correo-detalle-empty-sub {
    font-size: 0.85rem;
    color: #5c5672;
    margin: 0;
    max-width: 320px;
}

.vesper-correo-detalle-empty-sub strong {
    color: #582C83;
    font-weight: 600;
}

/* Popover de filtros avanzados (Tune). Layout estilo Outlook web pero con
   marca Vesper: header con icono morado + divider dorado, secciones con
   micro-labels, campos agrupados en bloques con respiracion vertical
   consistente, footer separado con borde superior sutil. */
.vesper-correo-filtros-popover {
    padding: 20px 22px;
    width: 440px;
    max-width: 92vw;
    background: white;
}

.vesper-filtros-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.vesper-filtros-titulo {
    font-family: Georgia, 'Americana TOT', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #582C83;
    margin: 0;
    line-height: 1.2;
}

/* Divider dorado tipo paginas Vesper (debajo del header) */
.vesper-filtros-divider {
    height: 2px;
    background: linear-gradient(90deg, #EAAA00 0%, #EAAA00 36px, transparent 36px);
    margin-bottom: 14px;
}

/* Micro-label sobre cada seccion (uppercase pequeno, color secundario) */
.vesper-filtros-seccion-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 12px 0 6px;
}

.vesper-filtros-seccion-label:first-of-type {
    margin-top: 0;
}

/* Contenedor del grupo: leve fondo lila + padding para que la seccion
   se perciba como una unidad visual (estilo Outlook web). */
.vesper-filtros-grupo {
    background: #fafaf7;
    border: 1px solid #f0eaf8;
    border-radius: 8px;
    padding: 12px;
}

/* Row del switch alineado a la izquierda con padding consistente con los
   campos. El MudSwitch trae su propio padding asi que aqui solo se ajusta
   la alineacion del label. */
.vesper-filtros-switch-row {
    margin-top: 8px;
    padding: 4px 0 0 4px;
}

.vesper-filtros-switch-label {
    font-size: 0.875rem;
    color: #1e1a2e;
    margin-left: 4px;
}

/* Footer del popover: divider superior + flex space-between. El boton
   "Buscar" queda morado solido alineado a la derecha; "Borrar filtros"
   queda como link a la izquierda. */
.vesper-filtros-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f0eaf8;
}

/* Selector de alcance de busqueda (dropdown a la izquierda del input,
   tipo Outlook web). El MudMenu renderiza internamente un MudButton;
   estilamos `.mud-button-root` descendiente para que se vea pill morado.
   Antes usabamos ActivatorContent + <button> pero el wrapper HTML
   interceptaba el click — mismo gotcha del boton Filtrar/Tune. */
.vesper-correo-alcance-menu .mud-button-root {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px 6px 10px;
    border: 1px solid #d1cce0;
    border-radius: 6px;
    background: white;
    color: #582C83;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    max-width: 180px;
    min-width: 0;
    height: auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vesper-correo-alcance-menu .mud-button-root:hover {
    background: #f5f0fa;
    border-color: #582C83;
}

.vesper-correo-alcance-menu .mud-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-correo-alcance-menu .mud-icon-root {
    color: #582C83;
    font-size: 1rem !important;
}

/* Chip mini que indica cuantos filtros avanzados estan activos. Se posiciona
   sobre la esquina superior derecha del icono Tune del MudMenu sin
   interceptar el click (pointer-events:none). */
.vesper-correo-filtros-conteo {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #582C83;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Dropdown de busquedas recientes. Se ancla al input via position:absolute
   dentro del wrapper relative. z-index alto para superponerse a la lista. */
.vesper-correo-recientes {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0d9eb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(88, 44, 131, 0.12);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}

.vesper-correo-recientes-titulo {
    padding: 8px 12px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vesper-correo-reciente-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: #1e1a2e;
}

.vesper-correo-reciente-item:hover {
    background: #f5f0fa;
}

.vesper-correo-reciente-item .mud-icon-root {
    color: #888;
    font-size: 1rem;
}

.vesper-correo-reciente-limpiar {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-top: 1px solid #f0eaf8;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    color: #582C83;
    font-weight: 600;
}

.vesper-correo-reciente-limpiar:hover {
    background: #f5f0fa;
}

.vesper-correo-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.vesper-correo-item:hover {
    background: #fafafa;
}

.vesper-correo-item-unread {
    background: #f0eaf8;
    border-left: 3px solid #582C83;
}

.vesper-correo-item-unread:hover {
    background: #e8ddf5;
}

.vesper-correo-item-selected {
    background: #EDE7F6 !important;
    border-left: 3px solid #EAAA00;
}

/* Barra de opciones del correo (Responder/Reenviar/Archivar/Eliminar/Mover).
   Tonalidad estilo Outlook web: un fondo tenue que separa la barra de comandos
   del cuerpo blanco del mensaje. En vez del gris neutro de Outlook usamos un
   lila casi blanco derivado de --vesper-purple-xlight para mantener la marca. */
.vesper-correo-toolbar {
    background: #f6f3fb;
    border-bottom: 1px solid #ece6f4;
    padding: 8px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.vesper-correo-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    line-height: 1.6;
}

.vesper-correo-body p {
    margin-bottom: 0.8rem;
}

.vesper-correo-body ul {
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
}

.vesper-correo-compose-field {
    border-bottom: 1px solid #eee;
    padding: 4px 16px;
}

/* Editor enriquecido del composer (/correos). Replica visualmente el toolbar
   de Outlook con los formatos mas comunes (negrita/cursiva/listas/alineacion
   /color). Implementado con contenteditable + document.execCommand via
   wwwroot/js/vesper-rich-editor.js. */
.vesper-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid #d6d3e0;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #fafafa;
}

.vesper-rich-toolbar .mud-icon-button {
    width: 32px;
    height: 32px;
    color: #582C83;
}

.vesper-rich-toolbar .mud-icon-button:hover {
    background: rgba(88, 44, 131, 0.10);
}

.vesper-rich-divider {
    width: 1px;
    height: 22px;
    background: #d6d3e0;
    margin: 0 4px;
}

/* Toggle de Alta importancia en el composer de Correos — icono "!" estilo
   Outlook web. El color, background y border los aplica inline el componente.

   2026-05-28: cambiado de MudIconButton+MudTooltip a <button> HTML nativo
   porque MudFileUpload (sibling en el mismo MudStack) absorbia los clicks
   con su <input type="file"> posicionado absoluto + <label> de overlap. El
   boton HTML nativo gana el hit-test y dispara @onclick siempre. */
.vesper-correo-prioridad-btn-html {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
    line-height: 1;
}
.vesper-correo-prioridad-btn-html:hover {
    transform: scale(1.06);
    filter: brightness(0.97);
}
.vesper-correo-prioridad-btn-html:focus-visible {
    outline: 2px solid var(--vesper-purple);
    outline-offset: 1px;
}
.vesper-correo-prioridad-btn-html .mud-icon-root {
    pointer-events: none;
}

/* Botones del MudMenu Fuente / Tamano dentro del toolbar — ancho fijo para
   que el label "Aptos" / "12" se vea bien sin saltar. text-transform:none
   evita el UPPER global. */
.vesper-rich-fuente-btn .mud-button,
.vesper-rich-tamano-btn .mud-button {
    text-transform: none !important;
    font-size: 0.82rem;
    padding: 4px 8px;
    min-height: 30px;
    color: #1e1a2e;
}
.vesper-rich-fuente-btn .mud-button { min-width: 110px; justify-content: space-between; }
.vesper-rich-tamano-btn .mud-button { min-width: 56px; justify-content: space-between; }
.vesper-rich-fuente-btn .mud-button:hover,
.vesper-rich-tamano-btn .mud-button:hover {
    background: #f5f0fa;
}

.vesper-rich-editor {
    border: 1px solid #d6d3e0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 14px 16px;
    min-height: 240px;
    max-height: 420px;
    overflow-y: auto;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    /* Color por defecto del texto = morado Vesper, igual que la firma personal,
       para que el correo se lea como un unico bloque tipografico. Si el usuario
       cambia el color desde el picker, el inline style del <span> gana sobre
       este default. */
    color: #582C83;
    outline: none;
    background: #ffffff;
    cursor: text;
    /* Bypass del CSS global de mayusculas (app.css) — el cuerpo del correo
       respeta el case real que el usuario tipea. */
    text-transform: none !important;
}

.vesper-rich-editor:focus {
    border-color: #582C83;
    box-shadow: 0 0 0 2px rgba(88, 44, 131, 0.12);
}

.vesper-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

.vesper-rich-editor p { margin: 0 0 8px 0; }
.vesper-rich-editor ul,
.vesper-rich-editor ol { margin: 8px 0; padding-left: 28px; }
.vesper-rich-editor blockquote {
    border-left: 3px solid #ccc;
    padding-left: 12px;
    color: #555;
    margin: 8px 0;
}
.vesper-rich-editor a { color: #582C83; text-decoration: underline; }

/* Paleta de color tipo Outlook (popover de MudMenu en el toolbar del composer) */
.vesper-color-popover {
    padding: 0 !important;
}

.vesper-color-panel {
    width: 260px;
    padding: 12px;
    background: #ffffff;
    border-radius: 6px;
}

.vesper-color-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e1a2e;
    margin-bottom: 8px;
}

.vesper-color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.vesper-color-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.vesper-color-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(88, 44, 131, 0.25);
    border-color: #582C83;
}

.vesper-color-swatch:focus {
    outline: 2px solid #582C83;
    outline-offset: 2px;
}

.vesper-color-extra {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #1e1a2e;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.vesper-color-extra:hover {
    background: #f0eaf8;
    color: #582C83;
}

/* ========== BLAZOR ERROR BOUNDARY ========== */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}

/* ========================================
   Syncfusion SfSchedule — Tema Vesper
   ======================================== */

/* Header / Toolbar — morado mas tenue (gradiente suave), borde dorado sutil abajo */
.e-schedule .e-schedule-toolbar,
.e-schedule .e-schedule-toolbar .e-toolbar-items,
.e-schedule .e-schedule-toolbar .e-toolbar-item,
.e-schedule .e-toolbar .e-toolbar-items {
    background: linear-gradient(180deg, #7c4dab 0%, #6e3d9a 100%) !important;
    background-color: #6e3d9a !important;
}
.e-schedule .e-schedule-toolbar {
    border-bottom: 2px solid rgba(234, 170, 0, 0.55) !important;
}
/* Botones: fondo transparente para que se vea el texto blanco */
.e-schedule .e-schedule-toolbar .e-tbar-btn,
.e-schedule .e-schedule-toolbar .e-btn,
.e-schedule .e-toolbar .e-tbar-btn {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* Todo el texto e iconos en blanco */
.e-schedule .e-schedule-toolbar *,
.e-schedule .e-schedule-toolbar .e-tbar-btn,
.e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text,
.e-schedule .e-schedule-toolbar .e-btn .e-tbar-btn-text,
.e-schedule .e-schedule-toolbar .e-btn-icon,
.e-schedule .e-schedule-toolbar .e-icons,
.e-schedule .e-toolbar .e-tbar-btn .e-icons,
.e-schedule .e-toolbar .e-tbar-btn .e-tbar-btn-text,
.e-schedule .e-schedule-toolbar .e-date-range .e-tbar-btn-text {
    color: white !important;
}
/* Vista activa en dorado */
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn,
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text {
    color: #EAAA00 !important;
    font-weight: 600;
}
/* Boton "Hoy" con borde */
.e-schedule .e-schedule-toolbar .e-today .e-tbar-btn-text {
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 4px;
    padding: 2px 8px;
}

/* Dia actual */
.e-schedule .e-month-view .e-current-date .e-date-header {
    background: #582C83 !important;
    color: white !important;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
}

/* Celdas del mes — dejar que Syncfusion maneje el layout, solo estilo visual */

/* Cabecera dias de la semana */
.e-schedule .e-month-view .e-header-cells {
    color: #582C83 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Fondo fin de semana */
.e-schedule .e-month-view .e-other-month {
    color: #9d97b0 !important;
}

/* Eventos "tenue" tipo Outlook: texto oscuro legible sobre el tinte suave,
   sin sombra, hora un poco mas tenue. El fondo/borde-acento los pone OnEventRendered. */
.e-schedule .e-appointment,
.e-schedule .e-appointment .e-subject,
.e-schedule .e-appointment .e-time,
.e-schedule .e-appointment .e-appointment-details,
.e-schedule .e-month-view .e-appointment .e-subject,
.e-schedule .e-month-view .e-appointment .e-time {
    color: #3d2b57 !important;
    font-weight: 500;
}
.e-schedule .e-appointment .e-time,
.e-schedule .e-month-view .e-appointment .e-time {
    opacity: 0.75;
    font-weight: 400;
}
/* Evento hover: intensifica el tinte en vez de bajar opacidad (se veia lavado) */
.e-schedule .e-appointment:hover {
    filter: brightness(0.96);
}

/* Quick info popup */
.e-schedule .e-quick-popup-wrapper .e-popup-header {
    background: #582C83 !important;
}
.e-schedule .e-quick-popup-wrapper .e-subject {
    color: white !important;
}
.e-schedule .e-quick-popup-wrapper .e-popup-footer .e-event-details,
.e-schedule .e-quick-popup-wrapper .e-popup-footer .e-event-edit {
    color: #582C83 !important;
}

/* Editor dialog */
.e-schedule .e-schedule-dialog .e-dlg-header {
    color: #582C83 !important;
    font-family: Georgia, serif;
}
.e-schedule .e-schedule-dialog .e-primary {
    background: #582C83 !important;
    border-color: #582C83 !important;
}

/* ==================== Marca de agua Vesper (solo pagina Data /reportes) ==================== */
.vesper-watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.vesper-watermark-line {
    display: block;
    font-family: 'Segoe UI', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: rgba(88, 44, 131, 0.10);
    letter-spacing: 3px;
    white-space: nowrap;
    transform: rotate(-20deg);
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 0 0 1px rgba(88, 44, 131, 0.04);
}

.vesper-watermark-line.top    { margin-top: 60px; }
.vesper-watermark-line.middle { margin: auto 0; }
.vesper-watermark-line.bottom { margin-bottom: 60px; }

@media print {
    .vesper-watermark-overlay { display: none !important; }
}

/* ========== APPBAR (header claro) ========== */
.vesper-appbar.mud-appbar {
    background: #FFFFFF !important;
    color: #1e1a2e !important;
    border-bottom: 1px solid #e8e3f0;
}

.vesper-page-title-inline {
    font-family: Georgia, 'Americana TOT', serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    line-height: 1.2 !important;
}

.vesper-page-title-inline .vesper-title-star {
    color: #EAAA00 !important;
    font-size: 0.9em;
    margin-right: 8px;
    vertical-align: 2px;
}

/* ========== DRAWER (sidebar purpura con brand arriba + usuario abajo) ========== */
.vesper-drawer.mud-drawer {
    background: linear-gradient(180deg, #582C83 0%, #3d1d5c 100%) !important;
    color: #FFFFFF !important;
    display: flex;
    flex-direction: column;
}

.vesper-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Brand header dentro del drawer */
.vesper-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.vesper-drawer-brand-text {
    font-family: Georgia, 'Americana TOT', serif;
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

/* Nota: el texto (Vesper, nombre usuario, rol, version) se oculta naturalmente por
   el overflow del drawer cuando esta en modo mini. No forzamos opacity:0. */

/* ══════════════════════════════════════════
   Banner de simulacion de rol (admin)
   ══════════════════════════════════════════ */
.vesper-simulacion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px 12px 12px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #F57C00 0%, #DC2626 100%);
    color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
    animation: pulse-simulacion 2.5s ease-in-out infinite;
}

@keyframes pulse-simulacion {
    0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 2px 14px rgba(245, 124, 0, 0.7); }
}

.vesper-simulacion-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.vesper-simulacion-banner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    overflow: hidden;
}

.vesper-simulacion-banner-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    opacity: 0.85;
}

.vesper-simulacion-banner-perfil {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-simulacion-banner-salir {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    padding: 2px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.vesper-simulacion-banner-salir:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ══════════════════════════════════════════
   Tabs del dialog de Nueva/Editar Acta
   Header purpura con tab activo destacado en dorado.
   ══════════════════════════════════════════ */
.vesper-acta-tabs .mud-tabs-toolbar {
    background: linear-gradient(135deg, #582C83 0%, #7a45a8 100%);
    border-radius: 4px;
}

.vesper-acta-tabs .mud-tab {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600;
    text-transform: none;
    transition: all 0.2s ease;
    min-height: 48px;
}

.vesper-acta-tabs .mud-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08);
}

.vesper-acta-tabs .mud-tab.mud-tab-active {
    color: #ffffff !important;
    background: rgba(234, 170, 0, 0.18);
    border-bottom: 3px solid #EAAA00;
}

.vesper-acta-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: #EAAA00 !important;
}

/* El slider (linea inferior animada) ya viene en dorado por SliderColor=Secondary,
   pero lo reforzamos por si el theme la sobrescribe */
.vesper-acta-tabs .mud-tab-slider {
    background-color: #EAAA00 !important;
    height: 3px !important;
}

/* Nav menu ocupa el espacio libre entre brand y footer */
.vesper-nav-menu.mud-nav-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0;
}

.vesper-drawer .mud-nav-link,
.vesper-drawer .mud-nav-group .mud-nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
    padding: 10px 20px;
    transition: background 0.15s, color 0.15s;
}

.vesper-drawer .mud-nav-link .mud-nav-link-icon,
.vesper-drawer .mud-nav-group .mud-nav-link .mud-nav-link-icon {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Hover */
.vesper-drawer .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

.vesper-drawer .mud-nav-link:hover .mud-nav-link-icon {
    color: #EAAA00 !important;
}

/* Item activo: fondo mas oscuro + icono dorado */
.vesper-drawer .mud-nav-link.active,
.vesper-drawer .mud-nav-link.mud-nav-link-active {
    background: rgba(0, 0, 0, 0.25) !important;
    color: #FFFFFF !important;
    border-left: 3px solid #EAAA00;
    padding-left: 17px;
}

.vesper-drawer .mud-nav-link.active .mud-nav-link-icon,
.vesper-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: #EAAA00 !important;
}

/* NavGroup header */
.vesper-drawer .mud-nav-group .mud-nav-link.mud-nav-link-disabled,
.vesper-drawer .mud-nav-group > .mud-nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Flecha de expansion del NavGroup */
.vesper-drawer .mud-nav-group .mud-icon-root {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Footer del drawer: usuario + version */
.vesper-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 16px 12px;
    background: rgba(0, 0, 0, 0.12);
}

/* User button nativo: apariencia de card, no de boton HTML default */
.vesper-drawer-user-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    transition: background 0.15s;
}

.vesper-drawer-user-btn:hover {
    background: rgba(0, 0, 0, 0.28);
}

.vesper-drawer-user-btn:focus {
    outline: 2px solid rgba(234, 170, 0, 0.5);
    outline-offset: 2px;
}

/* Menu inline por encima del user button (floating card blanco) */
.vesper-user-inline-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 16px;
    right: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
    z-index: 10;
}

.vesper-user-inline-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #1e1a2e;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.vesper-user-inline-menu-item:hover {
    background: #f0eaf8;
    color: #582C83;
}

/* Footer debe ser position: relative para anclar el menu inline absoluto */
.vesper-drawer-footer {
    position: relative;
}

/* Popover del menu de usuario: aparece ENCIMA del user card, blanco redondeado */
.vesper-user-menu-popover.mud-popover {
    background: #FFFFFF !important;
    color: #1e1a2e !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    min-width: 220px;
    padding: 4px;
    margin-bottom: 8px;
}

.vesper-user-menu-popover .mud-list-item {
    border-radius: 8px;
    color: #1e1a2e;
    font-weight: 500;
    padding: 10px 14px;
}

.vesper-user-menu-popover .mud-list-item:hover {
    background: #f0eaf8;
    color: #582C83;
}

.vesper-user-menu-popover .mud-list-item-icon {
    color: #582C83 !important;
    min-width: 32px;
}

.vesper-drawer-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity 0.2s;
}

.vesper-drawer-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.vesper-drawer-user-role {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.vesper-drawer-version {
    margin-top: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

/* ========== HEADER MENUS (idioma / user / etc) ========== */
.vesper-header-menu-popover.mud-popover {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    min-width: 200px;
    padding: 4px;
    margin-top: 6px;
}

.vesper-header-menu-popover .mud-list-item {
    border-radius: 8px;
    font-size: 14px;
    padding: 10px 14px;
}

.vesper-header-menu-popover .mud-list-item:hover {
    background: #f0eaf8;
    color: #582C83;
}

/* =========================================================
   DARK MODE — ajustes Vesper (purpura oscuro + dorado)
   MudBlazor agrega '.mud-theme-dark' al body cuando IsDarkMode = true
   ========================================================= */

/* Drawer: gradiente purpura muy oscuro manteniendo identidad Vesper */
body.mud-theme-dark .vesper-drawer.mud-drawer {
    background: linear-gradient(180deg, #1a0a33 0%, #0d0519 100%) !important;
    color: #ede4fa !important;
    border-right: 1px solid rgba(234, 170, 0, 0.12);
}

body.mud-theme-dark .vesper-drawer-brand {
    border-bottom: 1px solid rgba(234, 170, 0, 0.10);
}

body.mud-theme-dark .vesper-drawer-brand-text {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-drawer .mud-nav-link,
body.mud-theme-dark .vesper-drawer .mud-nav-group .mud-nav-link {
    color: rgba(237, 228, 250, 0.82) !important;
}

body.mud-theme-dark .vesper-drawer .mud-nav-link .mud-nav-link-icon,
body.mud-theme-dark .vesper-drawer .mud-nav-group .mud-nav-link .mud-nav-link-icon {
    color: rgba(237, 228, 250, 0.75) !important;
}

body.mud-theme-dark .vesper-drawer .mud-nav-link:hover {
    background: rgba(234, 170, 0, 0.08) !important;
    color: #ffffff !important;
}

body.mud-theme-dark .vesper-drawer .mud-nav-link:hover .mud-nav-link-icon {
    color: #EAAA00 !important;
}

/* Item activo sigue con borde dorado (mas visible en dark) */
body.mud-theme-dark .vesper-drawer .mud-nav-link.active,
body.mud-theme-dark .vesper-drawer .mud-nav-link.mud-nav-link-active {
    background: rgba(234, 170, 0, 0.12) !important;
    color: #ffffff !important;
    border-left: 3px solid #EAAA00;
}

body.mud-theme-dark .vesper-drawer .mud-nav-link.active .mud-nav-link-icon,
body.mud-theme-dark .vesper-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: #EAAA00 !important;
}

body.mud-theme-dark .vesper-drawer-footer {
    border-top: 1px solid rgba(234, 170, 0, 0.10);
    background: rgba(0, 0, 0, 0.35);
}

body.mud-theme-dark .vesper-drawer-user-btn {
    background: rgba(234, 170, 0, 0.06);
    color: #ede4fa;
}

body.mud-theme-dark .vesper-drawer-user-btn:hover {
    background: rgba(234, 170, 0, 0.12);
}

body.mud-theme-dark .vesper-drawer-user-name {
    color: #ffffff;
}

body.mud-theme-dark .vesper-drawer-user-role {
    color: rgba(237, 228, 250, 0.55);
}

body.mud-theme-dark .vesper-drawer-version {
    color: rgba(237, 228, 250, 0.35);
}

/* Popover user menu inline en dark: card oscura con texto claro */
body.mud-theme-dark .vesper-user-inline-menu {
    background: #2a1e3d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(234, 170, 0, 0.15);
}

body.mud-theme-dark .vesper-user-inline-menu-item {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-user-inline-menu-item:hover {
    background: rgba(234, 170, 0, 0.12);
    color: #EAAA00;
}

/* AppBar oscuro con borde sutil dorado */
body.mud-theme-dark .vesper-appbar.mud-appbar {
    background: #1a1528 !important;
    color: #ede4fa !important;
    border-bottom: 1px solid rgba(234, 170, 0, 0.12);
}

body.mud-theme-dark .vesper-page-title-inline span:first-child {
    color: #b388d9 !important;
}

body.mud-theme-dark .vesper-page-title-inline span:last-child {
    color: #ede4fa !important;
}

/* Chip USD (verde) en dark: mantener contraste */
body.mud-theme-dark .mud-chip.mud-chip-outlined[style*="#16a34a"] {
    border-color: #22c55e !important;
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.08);
}

/* Chip fecha en dark: purpura claro sobre fondo oscuro */
body.mud-theme-dark .vesper-chip-fecha.mud-chip.mud-chip-outlined {
    border-color: #b388d9 !important;
    color: #cfb3e8 !important;
    background: rgba(179, 136, 217, 0.08);
}

body.mud-theme-dark .vesper-chip-fecha.mud-chip .mud-chip-icon {
    color: #cfb3e8 !important;
}

/* Popover header menu (idioma) en dark */
body.mud-theme-dark .vesper-header-menu-popover.mud-popover {
    background: #2a1e3d !important;
    color: #ede4fa !important;
    border: 1px solid rgba(234, 170, 0, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

body.mud-theme-dark .vesper-header-menu-popover .mud-list-item {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-header-menu-popover .mud-list-item:hover {
    background: rgba(234, 170, 0, 0.12);
    color: #EAAA00;
}

/* Iconos del appbar en dark: visibles */
body.mud-theme-dark .vesper-appbar .mud-icon-button {
    color: #ede4fa !important;
}

body.mud-theme-dark .vesper-appbar .mud-icon-button:hover {
    background: rgba(234, 170, 0, 0.12) !important;
    color: #EAAA00 !important;
}

/* Scrollbar dark en el drawer */
body.mud-theme-dark .vesper-nav-menu.mud-nav-menu::-webkit-scrollbar {
    width: 6px;
}

body.mud-theme-dark .vesper-nav-menu.mud-nav-menu::-webkit-scrollbar-thumb {
    background: rgba(234, 170, 0, 0.20);
    border-radius: 3px;
}

/* MudPaper y cards en dark: superficie Vesper */
body.mud-theme-dark .vesper-paper {
    border-top: 3px solid #b388d9;
    background: #1a1528 !important;
}

body.mud-theme-dark .vesper-card {
    background: #1a1528 !important;
    border: 2px solid transparent;
}

body.mud-theme-dark .vesper-card:hover {
    border-color: #EAAA00;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

body.mud-theme-dark .vesper-kpi-card {
    background: #1a1528 !important;
    border-left: 4px solid #b388d9;
}

body.mud-theme-dark .vesper-user-info {
    background: #1a1528 !important;
    border-top: 3px solid #b388d9;
}

body.mud-theme-dark .vesper-user-info td:first-child {
    color: #b388d9;
}

/* Titulos de pagina en dark */
body.mud-theme-dark .vesper-page-title {
    color: #cfb3e8 !important;
    border-bottom-color: #EAAA00;
}

body.mud-theme-dark .vesper-page-title .mud-icon-root {
    color: #EAAA00 !important;
}

body.mud-theme-dark .vesper-section-header {
    color: #cfb3e8 !important;
}

/* Dialogs: mantienen gradiente purpura, se ven bien tanto light como dark */

/* ========== NOTIFICACIONES (panel popover bajo la campanita) ========== */
.vesper-notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.vesper-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 360px;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    border: 1px solid #ede7f6;
    z-index: 1301;
    overflow: hidden;
}

.vesper-notif-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0eaf8;
    background: #FFFFFF;
}

.vesper-notif-title {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    color: #1e1a2e;
    flex: 1;
}

.vesper-notif-action {
    background: transparent;
    border: none;
    color: #582C83;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.vesper-notif-action:hover {
    background: #f0eaf8;
}

.vesper-notif-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    color: #5c5672;
    transition: background 0.15s;
}

.vesper-notif-close:hover {
    background: #f0eaf8;
    color: #582C83;
}

.vesper-notif-list {
    max-height: 400px;
    overflow-y: auto;
}

.vesper-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f7f5fa;
    cursor: default;
    transition: background 0.15s;
}

.vesper-notif-item:last-child {
    border-bottom: none;
}

.vesper-notif-item:hover {
    background: #faf8fd;
}

.vesper-notif-item-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f0eaf8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vesper-notif-item-body {
    flex: 1;
    min-width: 0;
}

.vesper-notif-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e1a2e;
    line-height: 1.35;
    margin-bottom: 2px;
}

.vesper-notif-item-subtitle {
    font-size: 12px;
    color: #5c5672;
    line-height: 1.3;
}

.vesper-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: #5c5672;
    font-size: 13px;
}

/* Notif panel en dark mode */
body.mud-theme-dark .vesper-notif-panel {
    background: #2a1e3d;
    border-color: rgba(234, 170, 0, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

body.mud-theme-dark .vesper-notif-header {
    background: #2a1e3d;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .vesper-notif-title {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-notif-action {
    color: #cfb3e8;
}

body.mud-theme-dark .vesper-notif-action:hover {
    background: rgba(234, 170, 0, 0.12);
    color: #EAAA00;
}

body.mud-theme-dark .vesper-notif-close {
    color: #a89fc4;
}

body.mud-theme-dark .vesper-notif-close:hover {
    background: rgba(234, 170, 0, 0.12);
    color: #EAAA00;
}

body.mud-theme-dark .vesper-notif-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.mud-theme-dark .vesper-notif-item:hover {
    background: rgba(234, 170, 0, 0.06);
}

body.mud-theme-dark .vesper-notif-item-icon {
    background: rgba(234, 170, 0, 0.12);
}

body.mud-theme-dark .vesper-notif-item-title {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-notif-item-subtitle {
    color: #a89fc4;
}

body.mud-theme-dark .vesper-notif-empty {
    color: #a89fc4;
}

/* ========== TEAMS MODULE (Microsoft Teams-style) ========== */
.vesper-teams-shell {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 16px;
    height: calc(100vh - 180px);
    min-height: 600px;
}

@media (max-width: 1200px) {
    .vesper-teams-shell {
        grid-template-columns: 280px 1fr 280px;
    }
}

/* ----- Sidebar de chats ----- */
.vesper-teams-sidebar {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vesper-teams-sidebar-header {
    padding: 12px 16px 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
}

.vesper-teams-sidebar-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e1a2e;
}

.vesper-teams-sidebar-actions {
    display: flex;
    gap: 2px;
}

.vesper-teams-sidebar-actions .mud-icon-button {
    color: #5c5672 !important;
}

.vesper-teams-search {
    padding: 8px 12px;
}

.vesper-teams-search .mud-input-control {
    background: #f3f0f7;
    border-radius: 6px;
}

.vesper-teams-search .mud-input-slot {
    font-size: 0.85rem;
}

.vesper-teams-section-header {
    padding: 8px 16px 4px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.vesper-teams-section-header-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #5c5672;
    text-transform: none;
    letter-spacing: 0.02em;
}

.vesper-teams-chip-tipo {
    margin: 4px 12px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 14px;
    background: #f0eaf8;
    color: #582C83;
    font-size: 0.72rem;
    font-weight: 600;
    width: fit-content;
}

.vesper-teams-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 8px 4px;
}

.vesper-teams-chat-list::-webkit-scrollbar {
    width: 6px;
}

.vesper-teams-chat-list::-webkit-scrollbar-thumb {
    background: #d8d2e0;
    border-radius: 3px;
}

.vesper-teams-chat-item {
    position: relative;
    padding: 8px 12px 8px 14px;
    margin: 1px 4px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s ease;
}

.vesper-teams-chat-item:hover {
    background: #f6f3f9;
}

.vesper-teams-chat-item.activo {
    background: #ebe6f0;
}

.vesper-teams-chat-item.activo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: #582C83;
}

.vesper-teams-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.vesper-teams-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #582C83;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
}

.vesper-teams-presence-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.vesper-teams-chat-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.vesper-teams-chat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.vesper-teams-chat-name {
    font-size: 0.86rem;
    font-weight: 500;
    color: #1e1a2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.vesper-teams-chat-item.activo .vesper-teams-chat-name,
.vesper-teams-chat-item.no-leido .vesper-teams-chat-name {
    font-weight: 600;
}

.vesper-teams-chat-time {
    font-size: 0.7rem;
    color: #8b859e;
    flex-shrink: 0;
}

.vesper-teams-chat-preview {
    font-size: 0.76rem;
    color: #6c6585;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vesper-teams-chat-badge {
    background: #582C83;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9px;
    min-width: 18px;
    text-align: center;
}

.vesper-teams-fav-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #b0a8c4;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.vesper-teams-chat-item:hover .vesper-teams-fav-btn,
.vesper-teams-fav-btn.activo,
.vesper-teams-fav-btn:focus-visible {
    opacity: 1;
}

.vesper-teams-fav-btn:hover {
    background: rgba(234, 170, 0, 0.12);
    color: #EAAA00;
}

.vesper-teams-fav-btn.activo {
    color: #EAAA00;
}

.vesper-teams-fav-btn.activo:hover {
    color: #c79100;
}

.vesper-teams-link-btn {
    background: none;
    border: none;
    color: #582C83;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 2px;
    margin-top: 4px;
}

.vesper-teams-link-btn:hover {
    color: #3d1d5c;
}

/* === Modo composicion (nuevo chat) === */
.vesper-teams-compose-header {
    background: #faf7fc;
}

.vesper-teams-compose-para {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
    min-height: 56px;
}

.vesper-teams-compose-para-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: #582C83;
    flex-shrink: 0;
}

.vesper-teams-compose-search {
    flex: 1;
}

.vesper-teams-compose-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: #f0eaf8;
    border: 1px solid #d8caea;
    border-radius: 20px;
    max-width: 100%;
}

.vesper-teams-compose-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #582C83;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.vesper-teams-compose-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vesper-teams-compose-chip-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-teams-compose-chip-email {
    font-size: 0.7rem;
    color: #5c5672;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-teams-compose-chip-close {
    background: transparent;
    border: none;
    color: #5c5672;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.vesper-teams-compose-chip-close:hover {
    background: rgba(244, 67, 54, 0.12);
    color: #d32f2f;
}

.vesper-teams-compose-body {
    background: #fafafa;
}

/* Dark mode soporte basico */
body.mud-theme-dark .vesper-teams-compose-header,
body.mud-theme-dark .vesper-teams-compose-para {
    background: #1f1b2b;
    border-color: #2c2640;
}

body.mud-theme-dark .vesper-teams-compose-body {
    background: #1a1626;
}

body.mud-theme-dark .vesper-teams-compose-chip {
    background: #352c4d;
    border-color: #4a3d6b;
}

body.mud-theme-dark .vesper-teams-compose-chip-name {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-teams-compose-chip-email {
    color: #a89fc4;
}

/* ----- Conversación ----- */
.vesper-teams-conversation {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vesper-teams-conv-header {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
}

.vesper-teams-conv-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vesper-teams-conv-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vesper-teams-conv-tabs {
    display: flex;
    gap: 18px;
    margin-left: 8px;
}

.vesper-teams-conv-tab {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.86rem;
    color: #5c5672;
    cursor: pointer;
    position: relative;
    font-family: 'Segoe UI', sans-serif;
}

.vesper-teams-conv-tab:hover {
    color: #1e1a2e;
}

.vesper-teams-conv-tab.activo {
    color: #582C83;
    font-weight: 600;
}

.vesper-teams-conv-tab.activo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11px;
    height: 2px;
    background: #582C83;
    border-radius: 1px;
}

.vesper-teams-conv-header-right {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.vesper-teams-conv-header-right .mud-icon-button {
    color: #5c5672 !important;
}

.vesper-teams-conv-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Barra de busqueda dentro del chat (toggle del icono lupa del header). */
.vesper-teams-chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f7f5fa;
    border-bottom: 1px solid #ece6f4;
}

.vesper-teams-chat-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1e1a2e;
    padding: 4px 0;
}

.vesper-teams-chat-search-input::placeholder {
    color: #9b95ad;
}

.vesper-teams-chat-search-count {
    font-size: 0.78rem;
    color: #582C83;
    font-weight: 600;
    white-space: nowrap;
}

.vesper-teams-conv-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b859e;
    flex-direction: column;
    gap: 8px;
}

.vesper-teams-msg-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vesper-teams-msg-grupo.mine {
    align-items: flex-end;
}

.vesper-teams-msg-grupo.other {
    align-items: flex-start;
}

.vesper-teams-msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 42px;
    margin-bottom: 2px;
}

.vesper-teams-msg-grupo.mine .vesper-teams-msg-meta {
    margin-left: 0;
    margin-right: 4px;
}

.vesper-teams-msg-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e1a2e;
}

.vesper-teams-msg-time {
    font-size: 0.7rem;
    color: #8b859e;
}

.vesper-teams-msg-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 75%;
}

.vesper-teams-msg-grupo.mine .vesper-teams-msg-row {
    flex-direction: row-reverse;
}

.vesper-teams-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #b0a8c4;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.vesper-teams-msg-burbuja {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.vesper-teams-msg-burbuja.other {
    background: #f5f0f8;
    color: #1e1a2e;
    border-top-left-radius: 2px;
}

.vesper-teams-msg-burbuja.mine {
    background: #ebe6f0;
    color: #1e1a2e;
    border-top-right-radius: 2px;
}

.vesper-teams-msg-quote {
    border-left: 3px solid #582C83;
    background: rgba(88, 44, 131, 0.06);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: #5c5672;
}

.vesper-teams-msg-quote-author {
    font-weight: 600;
    color: #582C83;
    font-size: 0.72rem;
    margin-bottom: 2px;
}

.vesper-teams-msg-reactions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    margin-left: 42px;
}

.vesper-teams-msg-grupo.mine .vesper-teams-msg-reactions {
    margin-left: 0;
    margin-right: 4px;
}

.vesper-teams-msg-reaction {
    background: #ffffff;
    border: 1px solid #e0d8ec;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ----- Composer ----- */
.vesper-teams-composer {
    border-top: 1px solid #f0f0f0;
    padding: 10px 16px;
    background: #ffffff;
}

.vesper-teams-composer-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.vesper-teams-composer-toolbar .mud-icon-button {
    color: #5c5672 !important;
}

.vesper-teams-composer-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.vesper-teams-composer-input .mud-input-control {
    background: #f7f5f9;
    border-radius: 6px;
}

.vesper-teams-composer-send {
    background: #582C83 !important;
    color: #ffffff !important;
}

.vesper-teams-composer-send:hover {
    background: #3d1d5c !important;
}

.vesper-teams-composer-send:disabled {
    background: #d8d2e0 !important;
    color: #ffffff !important;
}

/* Dark mode soporte basico */
body.mud-theme-dark .vesper-teams-sidebar,
body.mud-theme-dark .vesper-teams-conversation {
    background: #1f1b2b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.mud-theme-dark .vesper-teams-sidebar-header,
body.mud-theme-dark .vesper-teams-conv-header,
body.mud-theme-dark .vesper-teams-composer {
    border-color: #2c2640;
}

body.mud-theme-dark .vesper-teams-sidebar-title,
body.mud-theme-dark .vesper-teams-chat-name,
body.mud-theme-dark .vesper-teams-conv-title,
body.mud-theme-dark .vesper-teams-msg-author {
    color: #ede4fa;
}

body.mud-theme-dark .vesper-teams-chat-item:hover {
    background: #2a2440;
}

body.mud-theme-dark .vesper-teams-chat-item.activo {
    background: #352c4d;
}

body.mud-theme-dark .vesper-teams-search .mud-input-control,
body.mud-theme-dark .vesper-teams-composer-input .mud-input-control {
    background: #2a2440;
}

body.mud-theme-dark .vesper-teams-msg-burbuja.other,
body.mud-theme-dark .vesper-teams-msg-burbuja.mine {
    background: #2a2440;
    color: #ede4fa;
}

body.mud-theme-dark .vesper-teams-msg-reaction {
    background: #1f1b2b;
    border-color: #352c4d;
    color: #ede4fa;
}

/* Login page: siempre con fondo purpura (no cambia en dark — login siempre antes de auth) */

/* ========== ZOOM GLOBAL DEL CRM ==========
   Escala visual del 95% para todo el sistema (antes 90%). Se subio a 0.95 para
   que la letra se vea mas grande/legible en todo el CRM (estilo Outlook),
   manteniendo control de la sensacion de "demasiado espacio" en pantallas
   Full HD estandar (1920x1080).

   `zoom` es soportado nativo por Chrome/Edge (Blink). Firefox lo ignora y deja
   el CRM a tamano normal — aceptable porque la app corre mayoritariamente en
   Edge corporativo.

   IMPORTANTE: si cambias este valor, actualiza tambien el divisor de
   `.vesper-correo-panel` (height: calc(100dvh / 0.95 - 80px)) — debe coincidir
   con este factor para que los 3 paneles de Correos lleguen al fondo.

   Si el cliente quiere mas grande o mas chico, basta ajustar este valor
   o cambiar el zoom propio del navegador (se acumulan multiplicativamente).
   No usar en una pagina especifica con `.vesper-correo-shell` y similares —
   se acumularia. */
body {
    zoom: 0.95;
}

/* ===== Sugerencias de contacto del composer de Correos =====
   El popover se ancla debajo del input via position:absolute en un wrapper
   con position:relative. Cada item es un <div> clickeable (no <button>) para
   poder atrapar el mousedown antes del blur del MudTextField — sino la
   sugerencia se cerraria sin alcanzar a procesar el click.
*/
.vesper-correo-sugerencias-wrapper {
    position: relative;
}

.vesper-correo-sugerencias-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1500;
    background: #ffffff;
    border: 1px solid #e0d7ec;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(88, 44, 131, 0.15);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 2px;
    padding: 4px;
}

.vesper-correo-sugerencia-item {
    position: relative;
    padding: 8px 56px 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.vesper-correo-sugerencia-item:hover {
    background-color: #f5f0fa;
}

.vesper-correo-sugerencia-nombre {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e1a2e;
    line-height: 1.3;
}

.vesper-correo-sugerencia-email {
    font-size: 0.8rem;
    color: #582C83;
    line-height: 1.3;
}

.vesper-correo-sugerencia-detalle {
    font-size: 0.72rem;
    color: #5c5672;
    line-height: 1.3;
    margin-top: 2px;
}

.vesper-correo-sugerencia-chip {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
}