/* 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;
}

/* Formulario de correo del login (GET nativo -> /api/auth/microsoft con login_hint) */
.login-form {
    margin-top: 0.5rem;
}

.login-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #582C83;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.login-input-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8B7BA8;
    pointer-events: none;
}

.login-input {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 44px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: #1e1a2e;
    background: #FFFFFF;
    border: 1.5px solid #DDD6EE;
    border-radius: 8px;
    outline: none;
    text-transform: none;
    transition: border-color .15s, box-shadow .15s;
}

.login-input::placeholder {
    color: #b3a9c9;
}

.login-input:focus {
    border-color: #582C83;
    box-shadow: 0 0 0 3px rgba(88, 44, 131, 0.15);
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: #FFFFFF;
    background: #582C83;
    border: none;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    transition: background .15s;
}

.login-submit:hover {
    background: #3d1d5c;
}

.login-submit .mud-icon-root {
    color: #FFFFFF;
}

.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 {
    /* 2026-09-22: mismo gradiente que .vesper-ui-hdr (paleta 02.09); el #7a45a8 anterior se veia demasiado brillante */
    background: linear-gradient(95deg, #582C83, #6E3699);
    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;
}

/* Los wizards de Alianza/Referenciador (clase vesper-refdlg) NO llevan la linea
   dorada del footer — su mockup usa un separador gris tenue. Se limita aca en vez
   de quitar la regla global (otros dialogos del CRM si la quieren). */
.vesper-refdlg .mud-dialog-actions {
    border-top: 1px solid #ece6f4;
}

/* Botones "secundarios" del footer (Regresar / Cerrar) estilo btn-secondary del
   mockup: fondo transparente + borde gris claro + texto gris. Sin esto, el
   MudButton por defecto muestra un fondo morado tenue. */
.vesper-btn-sec.mud-button-root {
    background: transparent;
    border: 1px solid #ddd6ee;
    color: #4a3a60;
    text-transform: none;
    font-weight: 600;
}

.vesper-btn-sec.mud-button-root:hover {
    background: #f4f1fa;
    border-color: #c9bfe0;
}

/* Pildoras de filtro por estado (Todos / Activos / ...) — replica exacta del
   .filter-pill del mockup: inactivo blanco con texto gris + borde tenue; se
   vuelve morado solido en hover y cuando esta activo. */
.vesper-filtro-pill {
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid #ddd6ee;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #4a3a60;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vesper-filtro-pill:hover,
.vesper-filtro-pill.activo {
    background: #582C83;
    color: #fff;
    border-color: #582C83;
}

/* Boton cerrar (X) de TODOS los dialogos. MudBlazor lo renderiza como un icono
   suelto; aca se convierte en un boton con cuerpo propio. Pensado para el header
   morado: reposa translucido y al hover se llena de blanco girando 90°.
   MudBlazor ya lo posiciona (position:absolute; top:8px; right:8px) — no tocar eso.
   Los dialogos con header claro (ej. .vesper-inbox-dialog) invierten los colores
   en su propio bloque de estilos.
   OJO con el selector: se apunta al `button` a secas, no a `.mud-button-close` ni a
   `.mud-icon-button`. Ir por clase se rompio dos veces (el X quedaba sin estilo y por
   herencia salia blanco sobre el header blanco del Inbox = invisible). El titulo no
   lleva ningun otro boton, asi que `button` es inequivoco y no depende de como
   MudBlazor nombre sus clases entre versiones. */
.mud-dialog .mud-dialog-title button {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.mud-dialog .mud-dialog-title button .mud-icon-root {
    font-size: 1.1rem;
    color: inherit !important;
}

.mud-dialog .mud-dialog-title button:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #582C83 !important;
    transform: rotate(90deg);
}

/* Accesibilidad: foco por teclado visible con el dorado de marca. */
.mud-dialog .mud-dialog-title button:focus-visible {
    outline: 2px solid #EAAA00;
    outline-offset: 2px;
}

/* ===== MAYUSCULAS en los combos de Alianzas / Referenciadores =====
   El UPPER global del CRM (la regla de mas abajo + vesper-uppercase.js) solo alcanza
   a input[type=text] y textarea, asi que los MudSelect / MudAutocomplete quedaban
   fuera: su valor se pinta en un input readonly que el JS ignora, y por eso el
   formulario mezclaba "Masculino" / "Avenida" con el resto en mayusculas.

   Acotado a los dialogs que declaran la clase (DialogReferenciador, DialogAlianza)
   — NO se generaliza a todo el CRM porque hay modulos que dependen del case original
   (composer de Correos, Teams).

   El :not([data-no-upper]) respeta el bypass estandar del CRM: es lo que mantiene el
   campo Email en minuscula. Su `text-transform: lowercase` va en el div raiz del
   MudTextField y se hereda; sin esta excepcion la regla le ganaria por apuntar al
   input directo, y el correo se veria en mayusculas.

   Es SOLO presentacion: lo que se persiste es el Nombre/Codigo del catalogo tal cual.
   El listado desplegado no lo cubre (MudBlazor monta el popover fuera del dialog),
   por eso los MudSelectItem llevan .ToUpperInvariant() en su texto. */
.vesper-refdlg input:not([data-no-upper]),
.vesper-refdlg .mud-input-slot:not([data-no-upper]) {
    text-transform: uppercase;
}

/* ===== Tabla compacta de sub-registros (representantes legales) =====
   Formato del mockup: UNA fila por registro con todos los campos en linea.
   Usa controles nativos (input/select) de 30px en vez de MudBlazor — los Mud*
   miden ~56px de alto y obligaban a partir cada representante en una card de
   varias lineas. Vive en app.css (no en el .razor) porque DialogReferenciador
   no declara bloque de estilos local: ver la nota al pie de ese archivo. */
.vesper-subtabla-scroll {
    overflow-x: auto;
}

.vesper-subtabla {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 11px;
}

.vesper-subtabla thead tr {
    background: #f7f5fa;
}

.vesper-subtabla th {
    padding: 6px 6px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #5c5672;
    white-space: nowrap;
}

.vesper-subtabla td {
    padding: 4px 3px;
    border-bottom: 1px solid #f0eef4;
    vertical-align: middle;
}

.vesper-subtabla-vacio {
    text-align: center;
    color: #9a93ab;
    padding: 14px;
    font-size: 11px;
}

/* El text-transform replica el UPPER global del CRM, que solo alcanza a los
   inputs de MudBlazor. */
.vesper-subtabla-input {
    font-size: 11px;
    padding: 4px 6px;
    height: 30px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1cce0;
    border-radius: 6px;
    background: #fff;
    color: #1e1a2e;
    font-family: inherit;
    text-transform: uppercase;
}

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

/* Campo de formulario NATIVO estilo mockup (#modalRef .form-label / .form-select):
   label encima + control blanco, para que no se pierda sobre los paneles lila de
   los wizards. Tamano de formulario (38px), no de celda — .vesper-subtabla-input
   es el equivalente para tablas fila-por-registro. */
.vesper-form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #4a3a60;
    margin: 6px 0 4px;
}

.vesper-form-select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ddd6ee;
    border-radius: 6px;
    background: #fff;
    color: #1a1025;
    font-size: 13px;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
}

.vesper-form-select:hover {
    border-color: #b9abd6;
}

.vesper-form-select:focus {
    outline: none;
    border-color: #582C83;
    box-shadow: 0 0 0 3px rgba(88, 44, 131, 0.12);
}

.vesper-subtabla-quitar {
    color: #dc2626;
    border: 1px solid #dc2626;
    background: transparent;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
}

.vesper-subtabla-quitar:hover {
    background: #fde7e7;
}

/* ===== Dialogs con HEADER CLARO (formularios largos) =====
   Variante del header: fondo blanco con titulo morado Georgia, en vez del gradiente
   morado. Se usa en los dialogs tipo formulario (Registrar/Editar Solicitud del Inbox,
   Editar Lead) donde el bloque morado pesaba de mas sobre un form largo.
   Uso: <MudDialog Class="vesper-dialog-claro"> + CloseButton=true en las DialogOptions.
   El titulo lo pone el caller via DialogService.ShowAsync("...").
   OJO: estas reglas empatan en especificidad con las globales de arriba y ganan por
   ir DESPUES en el archivo — no moverlas antes de la seccion DIALOGS VESPER. */
.vesper-dialog-claro .mud-dialog-title {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E0EF;
}

.vesper-dialog-claro .mud-dialog-title,
.vesper-dialog-claro .mud-dialog-title .mud-typography {
    color: #582C83 !important;
    font-family: Georgia, serif;
    font-weight: 700;
}

/* La X invertida: sobre header blanco reposa en lila y al hover se llena de morado
   (la version global es al reves porque asume el header morado). */
.vesper-dialog-claro .mud-dialog-title button {
    color: #8b8398 !important;
    background: #F5F2FA;
    border-color: #E5E0EF;
}

.vesper-dialog-claro .mud-dialog-title button:hover {
    background: #582C83;
    border-color: #582C83;
    color: #FFFFFF !important;
}

/* ========== 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;
}

/* Header sobrio (lila tenue + texto gris-morado) en vez del gradiente morado global.
   Override scoped a la tabla; misma especificidad que la regla global pero definido
   despues, asi gana el desempate. Lo usa el Inbox (.vesper-inbox-grid) y cualquier
   grilla que quiera el header claro del mockup (.vesper-grid-clara). */
.vesper-inbox-grid.mud-table .mud-table-head,
.vesper-grid-clara.mud-table .mud-table-head {
    background: #f7f4fb !important;
}

.vesper-inbox-grid.mud-table .mud-table-head .mud-table-cell,
.vesper-grid-clara.mud-table .mud-table-head .mud-table-cell {
    color: #582C83 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.4px !important;
    border-bottom: 1px solid #ece6f4 !important;
    background: #f7f4fb !important;
}

/* Inbox del Embudo: tabs de filtro como botones tipo pildora (estilo mockup).
   Inactivo = blanco con borde lila + punto de color; activo = morado solido. */
.vesper-inbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vesper-inbox-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 1px solid #e3d7ef;
    border-radius: 8px;
    background: #ffffff;
    color: #5c5672;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vesper-inbox-tab:hover {
    background: #f7f4fb;
    border-color: #d1cce0;
}

.vesper-inbox-tab.activo {
    background: #582C83;
    border-color: #582C83;
    color: #ffffff;
}

.vesper-inbox-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ========== 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: 100%;              /* la altura la fija el SfSplitter (Correos.razor AlturaPaneles) */
    overflow-y: auto;
    box-shadow: none !important;
}

/* Splitter de Correos (SfSplitter): barras finas lila, morado al pasar/arrastrar */
.vesper-correos-splitter.e-splitter { border: none !important; }
.vesper-correos-splitter .e-split-bar.e-split-bar-horizontal { background: #EEEBF5; width: 4px; }
.vesper-correos-splitter .e-split-bar.e-split-bar-horizontal:hover,
.vesper-correos-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active { background: #582C83; }
.vesper-correos-splitter .e-split-bar .e-resize-handler { color: #8B7BA8; }
.vesper-correos-splitter .e-pane { overflow: hidden; }

/* 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: 6px 12px;         /* mas compacto (2026-09-10) para que quepan los nombres largos */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    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;
}

/* Destino valido mientras se arrastra una carpeta encima (mover/anidar carpetas, 2026-09-10) */
.vesper-correo-folder-drop {
    outline: 2px dashed #582C83;
    outline-offset: -2px;
    background: #F0EBF8 !important;
}
/* Zona «entre carpetas» (solo visible mientras se arrastra): soltar = mismo nivel que la vecina */
.vesper-correo-dropzone {
    height: 10px;
    margin: 1px 8px 1px 0;
    border-radius: 3px;
    border-top: 2px solid transparent;
    transition: border-color .1s ease, background .1s ease;
}
.vesper-correo-dropzone.activa {
    border-top-color: #EAAA00;
    background: rgba(234, 170, 0, 0.12);
}
.vesper-correo-dropzone.final { height: 16px; }
/* Las zonas «entre carpetas» solo existen mientras se arrastra (clase que pone js/vesper-folder-dnd.js) */
.vesper-correo-arbol .vesper-correo-dropzone { display: none; }
.vesper-correo-arbol.arrastrando .vesper-correo-dropzone { display: block; }
.vesper-correo-arbol.arrastrando .vesper-correo-folder-arrastrada { opacity: .45; }
.vesper-correo-arbol.arrastrando .vesper-correo-misc-header.vesper-correo-folder-drop { background: rgba(88, 44, 131, 0.08); }
.vesper-correo-folder-custom[draggable="true"] { cursor: grab; }
.vesper-correo-folder-custom[draggable="true"]:active { cursor: grabbing; }

/* 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;
}

/* Chevron de plegado de subcarpetas (2026-09-18, como Outlook web) */
.vesper-correo-chevron { width: 14px; flex: none; text-align: center; font-size: 11px; color: #8B7BA8; cursor: pointer; border-radius: 4px; line-height: 16px; }
.vesper-correo-chevron:hover { background: rgba(88, 44, 131, 0.12); color: #582C83; }
.vesper-correo-chevron.vacio { cursor: default; }

.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;
}

/* ==================== Proteccion de datos confidenciales (componente ProteccionConfidencial) ==================== */
/* Bloquea seleccion/copia del contenido envuelto; los inputs siguen siendo editables. */
/* min-height = pantalla visible (misma formula que Correos: zoom 0.95 + appbar) para que en un
   monitor grande con contenido corto la marca cubra igual toda el area y no se apriete arriba. */
.vesper-data-protegida { position: relative; min-height: calc(100dvh / 0.95 - 80px); }
.vesper-data-protegida, .vesper-data-protegida * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.vesper-data-protegida input, .vesper-data-protegida textarea, .vesper-data-protegida .mud-input-slot {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* ==================== Marca de agua Vesper (svg <pattern> rotado -20deg; componente ProteccionConfidencial) ==================== */
/* La reticula completa se rota (no cada linea): arranca en la esquina superior izquierda y cubre
   cualquier alto/ancho con densidad uniforme. Sin JS. */
.vesper-watermark-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.vesper-watermark-svg { display: block; width: 100%; height: 100%; }

.vesper-watermark-text {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 3px;
    fill: rgba(88, 44, 131, 0.10);
    user-select: none;
    -webkit-user-select: none;
}

@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;
}

/* ---------- Jerarquía del menú: GRUPO (etiqueta) vs OPCIÓN (destino) ----------
   El grupo es una ETIQUETA (dorada, mayúsculas, pequeña, con tracking);
   la opción es un DESTINO navegable (blanca, mayor, legible, sangrada). */

/* Encabezado de grupo (MudNavGroup) */
.vesper-drawer .mud-nav-group > .mud-nav-link {
    color: #C9A227 !important;
    text-transform: uppercase;
    font-size: 0.6875rem !important;   /* 11px */
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 10px 20px 10px 16px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ícono y flecha del grupo: atenuados, no compiten con las opciones */
.vesper-drawer .mud-nav-group > .mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 1.125rem !important;    /* 18px */
}

/* Opciones hijas (MudNavLink dentro del grupo): blancas, normales, sangradas */
.vesper-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    text-transform: none;
    font-size: 0.875rem !important;    /* 14px */
    font-weight: 400;
    letter-spacing: 0;
    padding-left: 40px;
}

/* Mantener alineación de la opción activa (compensa el borde dorado de 3px) */
.vesper-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.mud-nav-link-active {
    padding-left: 37px;
}

/* Línea guía vertical que agrupa visualmente las opciones bajo su encabezado */
.vesper-drawer .mud-nav-group .mud-collapse-container {
    position: relative;
}

.vesper-drawer .mud-nav-group .mud-collapse-container::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}

/* 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;
}

/* Chip de estado (Pronto / Programada) en vencimientos Eisenhower —
   sin ancho fijo ni circulo de fondo, para que no se monte sobre el texto */
.vesper-notif-item-chip {
    flex-shrink: 0;
    display: flex;
    align-items: 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;
}

/* Popover del selector de codigo de pais del telefono (Inbox/Leads). Global
   porque los MudPopover se renderizan en la raiz (fuera del <style> del dialog). */
.vesper-pais-tel-popover { min-width: 260px !important; }
.vesper-pais-tel-popover .mud-list-item { white-space: nowrap; }

/* ========== CALENDARIO (MudDatePicker) COMPACTO — estilo mockup ==========
   El popover por defecto de MudBlazor es grande y abre con una franja morada
   enorme arriba (el toolbar que repite la fecha elegida). El mockup usa el
   date input nativo del navegador: un calendario chico y sobrio. Esto lo
   aproxima sin salir de MudBlazor.

   Va en app.css y NO en el <style> de una pagina porque los MudPopover se
   renderizan en la raiz del documento (fuera del DOM del componente), asi que
   ninguna regla descendiente de la pagina los alcanza. Por lo mismo aplica a
   TODOS los date pickers del CRM — que es lo que se busca: un solo calendario.

   Solo toca el DATE picker (`mud-picker-datepicker-toolbar`). El MudTimePicker
   conserva su toolbar porque ahi el reloj grande ES la lectura principal. */

/* Fuera la franja morada: el input de al lado ya muestra la fecha. */
.mud-picker-datepicker-toolbar {
    display: none !important;
}

/* Grilla mas chica: 310 -> 264px de ancho y celdas de 36 -> 30px. */
.mud-picker-calendar-container {
    width: 264px;
}

.mud-picker-calendar .mud-day {
    width: 30px;
    height: 30px;
    margin: 0 1px;
    font-size: 0.72rem;
}

.mud-picker-calendar-header-day .mud-day-label {
    width: 30px;
    margin: 0 1px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mud-picker-calendar-transition {
    margin-top: 6px;
    min-height: 186px;
}

/* Cabecera de navegacion (mes/anio + flechas) mas ajustada. */
.mud-picker-calendar-header-switch {
    margin-top: 0;
    margin-bottom: 2px;
}

.mud-picker-calendar-header-switch > .mud-icon-button {
    padding: 5px;
    margin: 2px;
}

/* Vistas de mes y anio, al mismo ancho que la grilla de dias. */
.mud-picker-month-container {
    width: 264px;
}

.mud-picker-month-container .mud-picker-month {
    height: 46px;
    font-size: 0.8rem;
}

.mud-picker-year-container {
    height: 232px;
}

.mud-picker-year-container .mud-picker-year {
    height: 32px;
    font-size: 0.85rem;
}

/* El papel del popover: menos padding y borde sutil Vesper en vez de solo sombra. */
.mud-picker-popover-paper .mud-picker-container {
    padding: 6px 8px 8px;
}

.mud-picker-popover-paper {
    border: 1px solid #e6dff0;
    border-radius: 10px;
}

/* ========== CAMPO DE FECHA VESPER (VesperDateField) ==========
   Input nativo type="date" viviendo dentro de un MudField outlined. El MudField
   pone el borde + la etiqueta flotante; el input pone el comportamiento que el
   MudDatePicker no da: segmentos dd/mm/aaaa con auto-avance y el calendario del
   navegador con "Borrar" / "Hoy".

   Por eso el input se despoja de TODO su chrome propio (borde, fondo, padding)
   y hereda la tipografia: visualmente es el slot de texto de un MudTextField. */
/* Etiqueta SIEMPRE arriba (encogida) + muesca abierta en el borde.
   Este control nunca se ve vacio: el input nativo muestra "dd/mm/aaaa" aunque no
   haya fecha, asi que una etiqueta "de placeholder" se solaparia con el dato
   (fue el bug al usar ShrinkLabel="true", que en MudBlazor significa justamente
   "no encoger"). Se replican las DOS reglas que MudBlazor aplica cuando el input
   lleva .mud-shrink: el transform de la etiqueta y el ancho del <legend> que
   abre el hueco en el trazo del borde. Sin la segunda, el texto quedaria
   montado sobre la linea. */
/* Una regla por variante de MudBlazor, calcadas de las que el framework aplica
   cuando el input lleva .mud-shrink. Ganan por especificidad (.vesper-date-field
   suma una clase) y no dependen de la logica interna de MudField. */
.vesper-date-field .mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.75);
    transform-origin: top left;
}

.vesper-date-field .mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(12px, 10px) scale(0.75);
    max-width: calc((100% - 12px) / 0.75);
}

.vesper-date-field .mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense {
    transform: translate(12px, 7px) scale(0.75);
}

.vesper-date-field .mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / 0.75);
}

.vesper-date-field .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    width: auto;
    padding: 0 5px;
}

.vesper-date-field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    /* La fecha NUNCA va en MAYUSCULA (el input ya lleva data-no-upper para el
       JS global; esto cubre el CSS por si alguna regla de dialogo lo alcanza). */
    text-transform: none;
}

.vesper-date-field input[type="date"]:disabled {
    color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.38));
}

/* Icono del calendario: mano + tono discreto que se aviva al pasar por encima.
   Es el unico adorno del control (no lleva Adornment de MudBlazor). */
.vesper-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    padding: 0;
    margin-left: 4px;
}

.vesper-date-field:hover input[type="date"]::-webkit-calendar-picker-indicator,
.vesper-date-field input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Segmento enfocado en lila Vesper en vez del azul del sistema — es la pista
   visual de "estas escribiendo el dia / el mes / el anio". */
.vesper-date-field input[type="date"]::-webkit-datetime-edit-day-field:focus,
.vesper-date-field input[type="date"]::-webkit-datetime-edit-month-field:focus,
.vesper-date-field input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background-color: #582C83;
    color: #fff;
    border-radius: 3px;
    outline: none;
}


/* ── Badge rojo en un item del Drawer (Alertas no leidas, F2 2026-09-15 — «nbadge r» del mockup) ── */
.vesper-nav-badge {
    display: inline-block; margin-left: 8px; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px;
    border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; text-align: center;
    vertical-align: middle;
}
/* Variante informativa (Noticias sin leer): dorado Vesper, no es una accion pendiente */
.vesper-nav-badge.vesper-nav-badge-dorado { background: #EAAA00; color: #3d1d5c; }