html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ════════════════════════════════════════════════════════════════
   SHELL VESPER (estilo Kalos Comercial) — topbar blanco + sidebar
   morado con marca arriba y tarjeta de usuario al pie.
   ════════════════════════════════════════════════════════════════ */

/* ---------- App bar (barra superior blanca) ---------- */
.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 morado) ---------- */
.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%;
}

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

/* Nav menu ocupa el espacio libre entre marca 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;
}

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

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

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

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

.vesper-drawer .mud-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

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

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

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

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

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

/* ════════════════════════════════════════════════════════════════
   ZOOM GLOBAL (igual que Kalos Comercial): escala visual del 95% en
   todo el sistema para una sensación más compacta/legible estilo
   Outlook en pantallas Full HD. `zoom` es nativo en Chrome/Edge;
   Firefox lo ignora y muestra el sistema a tamaño normal (aceptable).
   Si se quiere más grande/chico, ajustar este único valor.
   ════════════════════════════════════════════════════════════════ */
body {
    zoom: 0.95;
}

/* ════════════════════════════════════════════════════════════════
   ESTILOS DEL MODULO CORREOS (portados tal cual de Kalos Comercial)
   Clases vesper-correo-* / vesper-color-* usadas por Pages/Principal/Correos.razor
   ════════════════════════════════════════════════════════════════ */
/* ========== 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;
}

`). */
.vesper-correo-panel {
    height: calc(100dvh / 0.95 - 80px);
    overflow-y: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ════════════════════════════════════════════════════════════════
   CORREOS: que SOLO el panel central (lista) haga scroll, no la página.
   Se aplica únicamente cuando la página de Correos está en pantalla
   (detectada por .vesper-correo-panel vía :has), para no afectar el
   scroll normal del resto de páginas de KalosTI. Igual que Kalos Comercial.
   ════════════════════════════════════════════════════════════════ */
html:has(.vesper-correo-panel),
body:has(.vesper-correo-panel) {
    height: 100%;
    overflow: hidden;
}

/* FIX scroll interno (flexbox): un hijo flex necesita min-height:0 para poder
   encoger y mostrar su propio scroll en vez de desbordar el panel. Sin esto,
   la lista del medio (y el cuerpo del correo) crecen al tamaño del contenido. */
.vesper-correo-lista-scroll,
.vesper-correo-body {
    min-height: 0;
}

/* FIX altura del panel de Correos en Edge/Chrome modernos:
   'zoom' ya es estándar y 100dvh YA tiene en cuenta el zoom, así que el '/0.95'
   que usa Kalos Comercial (hecho cuando zoom no era estándar) sobre-compensa y
   hace el panel ~5% más alto que el viewport → desborda y no scrollea.
   Quitamos el /0.95: el panel se acota al viewport y la lista scrollea internamente. */
.vesper-correo-panel {
    height: calc(100dvh - 80px);
}


/* ════════════════════════════════════════════════════════════════
   ESTILOS DEL MODULO TEAMS (portados tal cual de Kalos Comercial)
   Grid de 3 columnas (sidebar chats | conversacion | reuniones).
   Clases vesper-teams-* usadas por Pages/Principal/Teams.razor
   ════════════════════════════════════════════════════════════════ */
/* ========== 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;
}

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



/* ════════════════════════════════════════════════════════════════
   EDITOR ENRIQUECIDO DE CORREO (vesper-rich-*) — portado de Kalos Comercial.
   Hace la barra de formato horizontal (vesper-rich-toolbar) y el editor.
   ════════════════════════════════════════════════════════════════ */
/* 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;
}

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

/* ════════════════════════════════════════════════════════════════
   ENCABEZADO DE DIÁLOGOS (estilo Kalos Comercial): título morado con
   gradiente + texto blanco + borde dorado en las acciones. Global a
   todos los MudDialog para un look Vesper consistente (ej. redactor de Correos).
   ════════════════════════════════════════════════════════════════ */
.mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #582C83 0%, #7a45a8 100%);
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 14px 24px;
}

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

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