/* ==========================================================
   CIMAR CORPORATE WEBMAIL - LIGHT UI
   Roundcube Elastic 1.6.x
   Objetivo: limpio, legible, estilo OX Mail sin alterar estructura
   ========================================================== */

body:not(.task-login) {
    --cimar-bg: #f4f7fb;
    --cimar-surface: #ffffff;
    --cimar-surface-soft: #f8fafc;
    --cimar-line: #e4e9f0;
    --cimar-line-strong: #d6dde7;
    --cimar-text: #1f2937;
    --cimar-muted: #667085;
    --cimar-subtle: #98a2b3;
    --cimar-primary: #0f78c8;
    --cimar-primary-strong: #0b66ad;
    --cimar-primary-soft: #eaf5ff;
    --cimar-orange: #f59a00;
    --cimar-navy: #0b2946;
    --cimar-navy-2: #103b62;
    --cimar-success: #16a36a;

    color: var(--cimar-text) !important;
    background: var(--cimar-bg) !important;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color-scheme: light !important;
}

/* Base */
body:not(.task-login) #layout {
    background: var(--cimar-bg) !important;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list {
    border-right: 1px solid var(--cimar-line) !important;
}

body:not(.task-login) #layout > div > .header,
body:not(.task-login) .header,
body:not(.task-login) .footer {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line) !important;
    box-shadow: none !important;
}

/* ==========================================================
   BARRA LATERAL PRINCIPAL
   ========================================================== */

body:not(.task-login) #layout-menu {
    background:
        linear-gradient(180deg, var(--cimar-navy), #071d33) !important;
    border-right: 0 !important;
    box-shadow: 4px 0 18px rgba(15, 39, 67, .08) !important;
}

body:not(.task-login) #layout-menu a,
body:not(.task-login) #layout-menu button {
    color: rgba(255,255,255,.80) !important;
}

body:not(.task-login) #layout-menu a:hover,
body:not(.task-login) #layout-menu button:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}

body:not(.task-login) #layout-menu .selected,
body:not(.task-login) #layout-menu a.selected {
    color: #fff !important;
    background: rgba(15,120,200,.38) !important;
}

body:not(.task-login) #layout-menu .selected::before,
body:not(.task-login) #layout-menu a.selected::before {
    color: #fff !important;
}

/* Logo de la barra lateral, si Roundcube usa el objeto logo */
body:not(.task-login) #layout-menu img,
body:not(.task-login) #taskmenu img {
    max-width: 46px !important;
    max-height: 42px !important;
    object-fit: contain !important;
}

/* ==========================================================
   TIPOGRAFIA Y TITULOS
   ========================================================== */

body:not(.task-login) h1,
body:not(.task-login) h2,
body:not(.task-login) h3,
body:not(.task-login) .header-title {
    color: #172033 !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
}

body:not(.task-login) a {
    color: var(--cimar-primary) !important;
}

body:not(.task-login) .text-muted,
body:not(.task-login) .secondary,
body:not(.task-login) small {
    color: var(--cimar-muted) !important;
}

/* ==========================================================
   CABECERAS / TOOLBARS
   ========================================================== */

body:not(.task-login) .header {
    min-height: 52px !important;
}

body:not(.task-login) .toolbar,
body:not(.task-login) .toolbar-menu {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) .toolbar a,
body:not(.task-login) .toolbar button,
body:not(.task-login) .header a,
body:not(.task-login) .header button {
    color: #475467 !important;
}

body:not(.task-login) .toolbar a:hover,
body:not(.task-login) .toolbar button:hover,
body:not(.task-login) .header a:hover,
body:not(.task-login) .header button:hover {
    color: var(--cimar-primary) !important;
}

/* ==========================================================
   LISTADOS: CARPETAS, MENSAJES, AJUSTES
   ========================================================== */

body:not(.task-login) .listing,
body:not(.task-login) .listing ul,
body:not(.task-login) .listing li,
body:not(.task-login) .treelist,
body:not(.task-login) .treelist li {
    background: transparent !important;
    color: var(--cimar-text) !important;
}

body:not(.task-login) .listing li,
body:not(.task-login) .treelist li {
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) .listing li > a,
body:not(.task-login) .treelist li > a {
    color: #344054 !important;
}

body:not(.task-login) .listing li:hover,
body:not(.task-login) .treelist li:hover {
    background: #f7fafe !important;
}

body:not(.task-login) .listing li.selected,
body:not(.task-login) .treelist li.selected,
body:not(.task-login) .listing .selected,
body:not(.task-login) .treelist .selected {
    background: var(--cimar-primary-soft) !important;
    color: var(--cimar-primary-strong) !important;
}

body:not(.task-login) .listing li.selected > a,
body:not(.task-login) .treelist li.selected > a {
    color: var(--cimar-primary-strong) !important;
    font-weight: 650 !important;
}

/* Buzones */
body:not(.task-login) #mailboxlist li > a {
    min-height: 40px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body:not(.task-login) #mailboxlist li.selected > a {
    background: var(--cimar-primary-soft) !important;
    border-left: 3px solid var(--cimar-primary) !important;
}

/* ==========================================================
   LISTA DE MENSAJES
   ========================================================== */

body:not(.task-login) #messagelist,
body:not(.task-login) .messagelist {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
}

body:not(.task-login) #messagelist tr,
body:not(.task-login) .messagelist tr {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) #messagelist tr:hover,
body:not(.task-login) .messagelist tr:hover {
    background: #f7fbff !important;
}

body:not(.task-login) #messagelist tr.selected,
body:not(.task-login) .messagelist tr.selected {
    background: var(--cimar-primary-soft) !important;
}

body:not(.task-login) #messagelist tr.unread,
body:not(.task-login) .messagelist tr.unread {
    font-weight: 650 !important;
}

body:not(.task-login) #messagelist td,
body:not(.task-login) .messagelist td {
    color: #344054 !important;
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) #messagelist .subject,
body:not(.task-login) .messagelist .subject {
    color: #1f2937 !important;
    font-size: 14.5px !important;
}

body:not(.task-login) #messagelist .fromto,
body:not(.task-login) .messagelist .fromto,
body:not(.task-login) #messagelist .date,
body:not(.task-login) .messagelist .date {
    color: var(--cimar-muted) !important;
}

/* ==========================================================
   BUSCADOR
   ========================================================== */

body:not(.task-login) .searchbar,
body:not(.task-login) #mailsearchform {
    background: var(--cimar-surface) !important;
}

body:not(.task-login) input[type="search"],
body:not(.task-login) .searchbar input,
body:not(.task-login) #quicksearchbox {
    background: #f8fafc !important;
    color: var(--cimar-text) !important;
    border: 1px solid var(--cimar-line-strong) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body:not(.task-login) input[type="search"]:focus,
body:not(.task-login) .searchbar input:focus,
body:not(.task-login) #quicksearchbox:focus {
    background: #fff !important;
    border-color: #72b8e8 !important;
    box-shadow: 0 0 0 3px rgba(15,120,200,.10) !important;
}

/* ==========================================================
   FORMULARIOS
   ========================================================== */

body:not(.task-login) input,
body:not(.task-login) select,
body:not(.task-login) textarea,
body:not(.task-login) .form-control {
    background: #fff !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line-strong) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body:not(.task-login) input:focus,
body:not(.task-login) select:focus,
body:not(.task-login) textarea:focus,
body:not(.task-login) .form-control:focus {
    border-color: #72b8e8 !important;
    box-shadow: 0 0 0 3px rgba(15,120,200,.10) !important;
}

body:not(.task-login) label {
    color: #475467 !important;
    font-weight: 550 !important;
}

/* ==========================================================
   BOTONES
   ========================================================== */

body:not(.task-login) .btn-primary,
body:not(.task-login) button.btn-primary,
body:not(.task-login) input.btn-primary {
    background: var(--cimar-primary) !important;
    border-color: var(--cimar-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 650 !important;
}

body:not(.task-login) .btn-primary:hover,
body:not(.task-login) button.btn-primary:hover {
    background: var(--cimar-primary-strong) !important;
    border-color: var(--cimar-primary-strong) !important;
}

body:not(.task-login) .btn-secondary,
body:not(.task-login) button.btn-secondary {
    background: #fff !important;
    border-color: var(--cimar-line-strong) !important;
    color: #344054 !important;
    border-radius: 8px !important;
}

body:not(.task-login) .btn-secondary:hover,
body:not(.task-login) button.btn-secondary:hover {
    background: #f8fafc !important;
    color: var(--cimar-primary) !important;
}

/* ==========================================================
   PANELES Y CONFIGURACION
   ========================================================== */

body:not(.task-login) .formcontent,
body:not(.task-login) .propform,
body:not(.task-login) .boxcontent,
body:not(.task-login) .boxfooter,
body:not(.task-login) .preferences-box,
body:not(.task-login) .iframe-wrapper {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) table,
body:not(.task-login) th,
body:not(.task-login) td {
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) th {
    color: #475467 !important;
    background: #f8fafc !important;
}

/* ==========================================================
   MENUS EMERGENTES Y DIALOGOS
   ========================================================== */

body:not(.task-login) .popupmenu,
body:not(.task-login) .menu,
body:not(.task-login) .dropdown-menu,
body:not(.task-login) .ui-dialog,
body:not(.task-login) .ui-widget-content {
    background: #fff !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line-strong) !important;
    box-shadow: 0 12px 32px rgba(16,24,40,.14) !important;
}

body:not(.task-login) .popupmenu a,
body:not(.task-login) .menu a,
body:not(.task-login) .dropdown-menu a {
    color: #344054 !important;
}

body:not(.task-login) .popupmenu a:hover,
body:not(.task-login) .menu a:hover,
body:not(.task-login) .dropdown-menu a:hover {
    background: var(--cimar-primary-soft) !important;
    color: var(--cimar-primary-strong) !important;
}

/* ==========================================================
   PANE DE LECTURA
   ========================================================== */

body:not(.task-login) #message-header,
body:not(.task-login) .message-partheaders,
body:not(.task-login) .message-partheaders + .message-part {
    background: #fff !important;
    color: var(--cimar-text) !important;
    border-color: var(--cimar-line) !important;
}

body:not(.task-login) #messagecontframe,
body:not(.task-login) iframe {
    background: #fff !important;
    color-scheme: light !important;
}

/* ==========================================================
   WATERMARK CIMAR
   ========================================================== */

body:not(.task-login) .cimar-watermark {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
    box-sizing: border-box;
    color: var(--cimar-muted);
    background: #fff;
}

body:not(.task-login) .cimar-watermark img {
    width: min(290px, 58%);
    height: auto;
    opacity: .78;
    filter: saturate(.92);
}

body:not(.task-login) .cimar-watermark span {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #98a2b3;
}

/* ==========================================================
   BADGES / CUOTAS
   ========================================================== */

body:not(.task-login) .badge,
body:not(.task-login) .count {
    background: #edf2f7 !important;
    color: #475467 !important;
    border-radius: 999px !important;
}

body:not(.task-login) .quota {
    color: var(--cimar-muted) !important;
}

/* ==========================================================
   SCROLLBARS
   ========================================================== */

body:not(.task-login) * {
    scrollbar-width: thin;
    scrollbar-color: #c6d2df transparent;
}

body:not(.task-login) *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body:not(.task-login) *::-webkit-scrollbar-thumb {
    background: #c6d2df;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body:not(.task-login) *::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================
   MODO OSCURO DE ELASTIC: FORZAMOS LOOK CLARO PARA CIMAR
   ========================================================== */

html.dark-mode body:not(.task-login),
html.dark-mode body:not(.task-login) #layout,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content,
body.dark-mode:not(.task-login),
body.dark-mode:not(.task-login) #layout,
body.dark-mode:not(.task-login) #layout-sidebar,
body.dark-mode:not(.task-login) #layout-list,
body.dark-mode:not(.task-login) #layout-content {
    background: var(--cimar-surface) !important;
    color: var(--cimar-text) !important;
}

/* ==========================================================
   RESPONSIVE
   No cambia la estructura nativa de Elastic
   ========================================================== */

@media (max-width: 1024px) {
    body:not(.task-login) {
        font-size: 14.5px !important;
    }

    body:not(.task-login) .header {
        min-height: 50px !important;
    }
}

@media (max-width: 680px) {
    body:not(.task-login) {
        font-size: 15px !important;
    }

    body:not(.task-login) #layout-sidebar,
    body:not(.task-login) #layout-list,
    body:not(.task-login) #layout-content {
        box-shadow: none !important;
    }

    body:not(.task-login) .listing li > a,
    body:not(.task-login) .treelist li > a {
        min-height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.task-login) *,
    body:not(.task-login) *::before,
    body:not(.task-login) *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
/* ==========================================================
   CIMAR WEBMAIL - POLISH 2
   Ajustes visuales sobre cimar-webmail.css
   ========================================================== */

/* Tipografía general un poco más cómoda */
body:not(.task-login) {
    font-size: 15.5px !important;
}

/* Cabeceras más limpias */
body:not(.task-login) #layout > div > .header,
body:not(.task-login) .header {
    min-height: 54px !important;
    border-bottom: 1px solid #e7ecf2 !important;
}

body:not(.task-login) .header-title,
body:not(.task-login) .header-title.username {
    color: #1f2937 !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
}

/* Logo superior CIMAR */
body:not(.task-login) #layout-menu .popover-header {
    min-height: 58px !important;
    padding: 8px 6px !important;
    background: #0b2946 !important;
}

body:not(.task-login) #layout-menu #logo {
    display: block !important;
    width: 62px !important;
    max-width: 62px !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Menú lateral principal */
body:not(.task-login) #taskmenu a .inner {
    font-size: 11.5px !important;
    line-height: 1.18 !important;
}

body:not(.task-login) #taskmenu a {
    border-radius: 0 !important;
}

/* Carpetas */
body:not(.task-login) #mailboxlist li > a {
    min-height: 43px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14.5px !important;
}

body:not(.task-login) #mailboxlist li.selected > a {
    color: #0b66ad !important;
    background: #eaf5ff !important;
    border-left: 3px solid #0f78c8 !important;
    font-weight: 700 !important;
}

/* Buscador */
body:not(.task-login) #quicksearchbox,
body:not(.task-login) .searchbar input {
    min-height: 42px !important;
    font-size: 14.5px !important;
}

/* Toolbar */
body:not(.task-login) .toolbar a .inner,
body:not(.task-login) .toolbar button .inner {
    font-size: 12px !important;
    color: #475467 !important;
}

body:not(.task-login) .toolbar a:hover .inner,
body:not(.task-login) .toolbar button:hover .inner {
    color: #0f78c8 !important;
}

/* Lista de mensajes: lectura más natural */
body:not(.task-login) #messagelist tr > td,
body:not(.task-login) .messagelist tr > td {
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f5 !important;
    color: #344054 !important;
}

/* Selección: elimina el gris oscuro heredado */
body:not(.task-login) #messagelist tr.selected > td,
body:not(.task-login) .messagelist tr.selected > td {
    background: #eaf5ff !important;
    color: #172033 !important;
}

body:not(.task-login) #messagelist tr:hover > td,
body:not(.task-login) .messagelist tr:hover > td {
    background: #f7fbff !important;
}

/* Asuntos: no todo azul */
body:not(.task-login) #messagelist .subject a,
body:not(.task-login) .messagelist .subject a {
    color: #253449 !important;
    font-size: 14.5px !important;
    font-weight: 550 !important;
}

body:not(.task-login) #messagelist tr.unread .subject a,
body:not(.task-login) .messagelist tr.unread .subject a {
    color: #0b66ad !important;
    font-weight: 720 !important;
}

body:not(.task-login) #messagelist tr.selected .subject a,
body:not(.task-login) .messagelist tr.selected .subject a {
    color: #075c9e !important;
}

/* Remitente y fecha */
body:not(.task-login) #messagelist .fromto,
body:not(.task-login) .messagelist .fromto {
    color: #667085 !important;
    font-size: 13px !important;
}

body:not(.task-login) #messagelist .date,
body:not(.task-login) .messagelist .date {
    color: #7a8699 !important;
    font-size: 12.5px !important;
}

/* Pane de lectura */
body:not(.task-login) #layout-content {
    background: #fff !important;
}

body:not(.task-login) #message-header,
body:not(.task-login) .message-partheaders {
    background: #fff !important;
    border-bottom: 1px solid #edf1f5 !important;
}

/* Configuración: filas más cómodas */
body.task-settings .listing li > a,
body.task-settings .treelist li > a {
    min-height: 42px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14.5px !important;
}

body.task-settings .listing li.selected,
body.task-settings .treelist li.selected {
    background: #eaf5ff !important;
}

/* Dialogos */
body:not(.task-login) .ui-dialog-titlebar {
    background: #fff !important;
    color: #1f2937 !important;
    border-bottom: 1px solid #e7ecf2 !important;
}

/* Mantener el correo renderizado en blanco */
body:not(.task-login) #messagecontframe {
    background: #fff !important;
}

/* ==========================================================
   CIMAR - ISOTIPO SUPERIOR + MARCA DE AGUA CENTRAL
   ========================================================== */

/* Logo superior izquierdo: mostrar solo el isotipo */
body:not(.task-login) #layout-menu #logo,
body:not(.task-login) #taskmenu #logo,
body:not(.task-login) #layout-menu img,
body:not(.task-login) #taskmenu img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    object-fit: cover !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
}

/* Si el contenedor del logo existe, centrado y limpio */
body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #taskmenu .popover-header,
body:not(.task-login) #layout-menu .header,
body:not(.task-login) #taskmenu .header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Watermark central */
body:not(.task-login) .cimar-watermark {
    min-height: 100%;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    pointer-events: none !important;
}

body:not(.task-login) .cimar-watermark img {
    width: min(420px, 62%) !important;
    height: auto !important;
    opacity: .16 !important;
    filter: grayscale(8%) saturate(.92) !important;
    object-fit: contain !important;
}

/* Un poco más visible en pantallas medianas */
@media (max-width: 1200px) {
    body:not(.task-login) .cimar-watermark img {
        width: min(340px, 60%) !important;
        opacity: .14 !important;
    }
}

@media (max-width: 680px) {
    body:not(.task-login) .cimar-watermark img {
        width: min(250px, 70%) !important;
        opacity: .12 !important;
    }
}
/* ==========================================================
   CIMAR WEBMAIL - FIX 3
   1) isotipo superior izquierdo sin imagen rota
   2) logo central como marca de agua real
   3) etiquetas del menu lateral mas legibles
   ========================================================== */

/* ----------------------------------------------------------
   ISOTIPO SUPERIOR IZQUIERDO
   Ocultamos el <img> de Roundcube y recortamos visualmente
   el extremo izquierdo del logo corporativo.
   ---------------------------------------------------------- */

body:not(.task-login) #layout-menu {
    position: relative !important;
}

body:not(.task-login) #layout-menu #logo,
body:not(.task-login) #layout-menu img {
    opacity: 0 !important;
    visibility: hidden !important;
}

body:not(.task-login) #layout-menu::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    width: 42px !important;
    height: 42px !important;
    transform: translateX(-50%) !important;
    background-image: url("/skins/cimar/images/cimar-logo-light.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: auto 42px !important;
    z-index: 20 !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------
   MARCA DE AGUA CENTRAL
   ---------------------------------------------------------- */

body:not(.task-login) #layout-content {
    position: relative !important;
}

body:not(.task-login) .cimar-watermark {
    position: absolute !important;
    top: 54px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: auto !important;
    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 32px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    background: transparent !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body:not(.task-login) .cimar-watermark img {
    display: block !important;
    width: min(360px, 46%) !important;
    max-width: 360px !important;
    height: auto !important;

    margin: 0 !important;

    opacity: .085 !important;
    filter: grayscale(8%) saturate(.85) !important;

    object-fit: contain !important;
}

/* ----------------------------------------------------------
   MENU LATERAL: evitar textos cortados
   ---------------------------------------------------------- */

body:not(.task-login) #taskmenu a .inner {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;

    font-size: 10.5px !important;
    line-height: 1.12 !important;
    text-align: center !important;
}

body:not(.task-login) #taskmenu a {
    min-height: 54px !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {
    body:not(.task-login) .cimar-watermark img {
        width: min(300px, 48%) !important;
        max-width: 300px !important;
        opacity: .075 !important;
    }
}

@media (max-width: 680px) {
    body:not(.task-login) #layout-menu::before {
        width: 36px !important;
        height: 36px !important;
        background-size: auto 36px !important;
        top: 8px !important;
    }

    body:not(.task-login) .cimar-watermark {
        top: 50px !important;
        padding: 20px !important;
    }

    body:not(.task-login) .cimar-watermark img {
        width: min(230px, 62%) !important;
        max-width: 230px !important;
        opacity: .07 !important;
    }
}

/* ==========================================================
   FIX ICONOS MENU LATERAL
   ========================================================== */

body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu a::before,
body:not(.task-login) #taskmenu a:before {
    color: #27435f !important;
}

body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu a:hover::before,
body:not(.task-login) #taskmenu a:hover:before {
    color: #0f78c8 !important;
    background-color: #f2f8fd !important;
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu a.selected::before,
body:not(.task-login) #taskmenu a.selected:before {
    color: #0b66ad !important;
    background-color: #dceffd !important;
}

body:not(.task-login) #taskmenu a .inner {
    color: inherit !important;
    font-weight: 500 !important;
}
/* ==========================================================
   CIMAR WEBMAIL - SPECIAL BUTTONS
   Modo claro/oscuro, Acerca de y Cerrar sesión
   ========================================================== */

/* Contenedor inferior */
body:not(.task-login) #taskmenu .special-buttons {
    background: #0b2946 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding: 8px 0 10px !important;
}

/* Botones inferiores */
body:not(.task-login) #taskmenu .special-buttons > a {
    min-height: 56px !important;
    color: #d8e6f2 !important;
    background: transparent !important;
    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease !important;
}

/* Iconos */
body:not(.task-login) #taskmenu .special-buttons > a::before {
    color: #d8e6f2 !important;
    font-size: 1.35rem !important;
    opacity: .95 !important;
}

/* Etiquetas */
body:not(.task-login) #taskmenu .special-buttons > a .inner {
    color: #c7d8e6 !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
    text-align: center !important;
}

/* Hover general */
body:not(.task-login) #taskmenu .special-buttons > a:hover {
    background: rgba(255,255,255,.075) !important;
    color: #ffffff !important;
}

body:not(.task-login) #taskmenu .special-buttons > a:hover::before,
body:not(.task-login) #taskmenu .special-buttons > a:hover .inner {
    color: #ffffff !important;
}

/* Botón de tema */
body:not(.task-login) #taskmenu .special-buttons > a.theme {
    color: #5ad7ff !important;
}

body:not(.task-login) #taskmenu .special-buttons > a.theme::before,
body:not(.task-login) #taskmenu .special-buttons > a.theme .inner {
    color: #5ad7ff !important;
}

body:not(.task-login) #taskmenu .special-buttons > a.theme:hover {
    background: rgba(49,188,235,.13) !important;
}

/* En modo oscuro: el botón representa volver a claro */
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme::before,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme .inner {
    color: #ffd36b !important;
}

/* Acerca de */
body:not(.task-login) #taskmenu .special-buttons > a.about::before {
    color: #b8c9d8 !important;
}

/* Cerrar sesión */
body:not(.task-login) #taskmenu .special-buttons > a.logout,
body:not(.task-login) #taskmenu .special-buttons > a.logout::before,
body:not(.task-login) #taskmenu .special-buttons > a.logout .inner {
    color: #ff9b87 !important;
}

body:not(.task-login) #taskmenu .special-buttons > a.logout:hover {
    background: rgba(255,94,80,.12) !important;
}

body:not(.task-login) #taskmenu .special-buttons > a.logout:hover,
body:not(.task-login) #taskmenu .special-buttons > a.logout:hover::before,
body:not(.task-login) #taskmenu .special-buttons > a.logout:hover .inner {
    color: #ffb0a0 !important;
}

/* Consistencia en dark mode */
html.dark-mode body:not(.task-login) #taskmenu .special-buttons {
    background: #081f36 !important;
    border-top-color: rgba(255,255,255,.08) !important;
}

/* Móvil */
@media (max-width: 680px) {
    body:not(.task-login) #taskmenu .special-buttons > a {
        min-height: 52px !important;
    }

    body:not(.task-login) #taskmenu .special-buttons > a::before {
        font-size: 1.25rem !important;
    }

    body:not(.task-login) #taskmenu .special-buttons > a .inner {
        font-size: 10px !important;
    }
}

/* ==========================================================
   BANDEJA DE MENSAJES - FILAS INTERCALADAS
   ========================================================== */

/* Base */
body:not(.task-login) #messagelist tbody tr > td,
body:not(.task-login) .messagelist tbody tr > td {
    background: #ffffff !important;
    border-bottom: 1px solid #e9eef4 !important;
}

/* Zebra suave */
body:not(.task-login) #messagelist tbody tr:nth-child(even) > td,
body:not(.task-login) .messagelist tbody tr:nth-child(even) > td {
    background: #f6f8fb !important;
}

body:not(.task-login) #messagelist tbody tr:nth-child(odd) > td,
body:not(.task-login) .messagelist tbody tr:nth-child(odd) > td {
    background: #ffffff !important;
}

/* Hover */
body:not(.task-login) #messagelist tbody tr:hover > td,
body:not(.task-login) .messagelist tbody tr:hover > td {
    background: #eef7ff !important;
}

/* Seleccionado */
body:not(.task-login) #messagelist tbody tr.selected > td,
body:not(.task-login) .messagelist tbody tr.selected > td {
    background: #dfefff !important;
    color: #17324d !important;
}

/* No leídos un poco más notorios */
body:not(.task-login) #messagelist tbody tr.unread .subject a,
body:not(.task-login) .messagelist tbody tr.unread .subject a {
    font-weight: 700 !important;
}

/* Remitente / fecha */
body:not(.task-login) #messagelist .fromto,
body:not(.task-login) .messagelist .fromto {
    color: #6b7280 !important;
}

body:not(.task-login) #messagelist .date,
body:not(.task-login) .messagelist .date {
    color: #7b8794 !important;
}
/* ==========================================================
   CIMAR WEBMAIL - SIDEBAR SOFT GRAY + REAL DARK MODE
   Append after existing cimar-webmail.css
   ========================================================== */

/* LIGHT MODE - LEFT TASK MENU */
html:not(.dark-mode) body:not(.task-login) #taskmenu,
html:not(.dark-mode) body:not(.task-login) #layout-menu {
    background: #eef1f4 !important;
    border-right: 1px solid #d8dee6 !important;
    box-shadow: none !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu a {
    color: #334155 !important;
    background: transparent !important;
    border-right: 3px solid transparent !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu a::before,
html:not(.dark-mode) body:not(.task-login) #taskmenu a .inner {
    color: #334155 !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu a:hover {
    background: #e4e9ef !important;
    color: #0f78c8 !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu a.selected,
html:not(.dark-mode) body:not(.task-login) #taskmenu a.active {
    background: #dbeaf6 !important;
    border-right-color: #0f78c8 !important;
    color: #0b66ad !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu a.selected::before,
html:not(.dark-mode) body:not(.task-login) #taskmenu a.selected .inner,
html:not(.dark-mode) body:not(.task-login) #taskmenu a.active::before,
html:not(.dark-mode) body:not(.task-login) #taskmenu a.active .inner {
    color: #0b66ad !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons {
    background: #e4e9ef !important;
    border-top: 1px solid #d3dae3 !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a,
html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a::before,
html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a .inner {
    color: #526071 !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a:hover {
    background: #d9e1e9 !important;
}

html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a.logout,
html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a.logout::before,
html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons > a.logout .inner {
    color: #c75b4f !important;
}

/* DARK MODE */
html.dark-mode body:not(.task-login) {
    --dm-bg: #0b1220;
    --dm-surface: #111827;
    --dm-surface-2: #172033;
    --dm-surface-3: #1d2939;
    --dm-line: #273449;
    --dm-line-2: #334155;
    --dm-text: #e6edf5;
    --dm-muted: #9aa9ba;
    --dm-primary: #38bdf8;
    --dm-primary-2: #0ea5e9;
    --dm-selected: #15324a;
    --dm-hover: #162538;
    --dm-navy: #071a2d;

    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    color-scheme: dark !important;
}

html.dark-mode body:not(.task-login) #layout {
    background: var(--dm-bg) !important;
}

html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) #taskmenu,
html.dark-mode body:not(.task-login) #layout-menu {
    background: var(--dm-navy) !important;
    border-right: 1px solid #0e2a45 !important;
}

html.dark-mode body:not(.task-login) #taskmenu a,
html.dark-mode body:not(.task-login) #taskmenu a::before,
html.dark-mode body:not(.task-login) #taskmenu a .inner {
    color: #c9d7e5 !important;
}

html.dark-mode body:not(.task-login) #taskmenu a:hover {
    background: rgba(56,189,248,.10) !important;
    color: #ffffff !important;
}

html.dark-mode body:not(.task-login) #taskmenu a.selected,
html.dark-mode body:not(.task-login) #taskmenu a.active {
    background: rgba(56,189,248,.18) !important;
    border-right: 3px solid var(--dm-primary) !important;
}

html.dark-mode body:not(.task-login) #taskmenu a.selected::before,
html.dark-mode body:not(.task-login) #taskmenu a.selected .inner,
html.dark-mode body:not(.task-login) #taskmenu a.active::before,
html.dark-mode body:not(.task-login) #taskmenu a.active .inner {
    color: #ffffff !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons {
    background: #0a2239 !important;
    border-top: 1px solid #18334d !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a::before,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a .inner {
    color: #b9c8d8 !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme::before,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.theme .inner {
    color: #ffd36b !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.logout,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.logout::before,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons > a.logout .inner {
    color: #ff9b87 !important;
}

html.dark-mode body:not(.task-login) #layout > div > .header,
html.dark-mode body:not(.task-login) .header,
html.dark-mode body:not(.task-login) .footer,
html.dark-mode body:not(.task-login) .toolbar {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) .header a,
html.dark-mode body:not(.task-login) .header button,
html.dark-mode body:not(.task-login) .toolbar a,
html.dark-mode body:not(.task-login) .toolbar button,
html.dark-mode body:not(.task-login) .toolbar .inner {
    color: #b8c6d5 !important;
}

html.dark-mode body:not(.task-login) .header a:hover,
html.dark-mode body:not(.task-login) .header button:hover,
html.dark-mode body:not(.task-login) .toolbar a:hover,
html.dark-mode body:not(.task-login) .toolbar button:hover {
    color: var(--dm-primary) !important;
}

html.dark-mode body:not(.task-login) .listing,
html.dark-mode body:not(.task-login) .listing ul,
html.dark-mode body:not(.task-login) .listing li,
html.dark-mode body:not(.task-login) .treelist,
html.dark-mode body:not(.task-login) .treelist li {
    background: transparent !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) .listing li > a,
html.dark-mode body:not(.task-login) .treelist li > a {
    color: #d9e2ec !important;
}

html.dark-mode body:not(.task-login) .listing li:hover,
html.dark-mode body:not(.task-login) .treelist li:hover {
    background: var(--dm-hover) !important;
}

html.dark-mode body:not(.task-login) .listing li.selected,
html.dark-mode body:not(.task-login) .treelist li.selected,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a {
    background: var(--dm-selected) !important;
    color: #ffffff !important;
    border-color: var(--dm-primary) !important;
}

html.dark-mode body:not(.task-login) input[type="search"],
html.dark-mode body:not(.task-login) .searchbar input,
html.dark-mode body:not(.task-login) #quicksearchbox {
    background: #0f172a !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line-2) !important;
}

html.dark-mode body:not(.task-login) input[type="search"]::placeholder,
html.dark-mode body:not(.task-login) .searchbar input::placeholder,
html.dark-mode body:not(.task-login) #quicksearchbox::placeholder {
    color: #748398 !important;
}

html.dark-mode body:not(.task-login) #messagelist tbody tr:nth-child(odd) > td,
html.dark-mode body:not(.task-login) .messagelist tbody tr:nth-child(odd) > td {
    background: #111827 !important;
}

html.dark-mode body:not(.task-login) #messagelist tbody tr:nth-child(even) > td,
html.dark-mode body:not(.task-login) .messagelist tbody tr:nth-child(even) > td {
    background: #151e2c !important;
}

html.dark-mode body:not(.task-login) #messagelist tbody tr:hover > td,
html.dark-mode body:not(.task-login) .messagelist tbody tr:hover > td {
    background: #1a2a3d !important;
}

html.dark-mode body:not(.task-login) #messagelist tbody tr.selected > td,
html.dark-mode body:not(.task-login) .messagelist tbody tr.selected > td {
    background: #173653 !important;
}

html.dark-mode body:not(.task-login) #messagelist .subject a,
html.dark-mode body:not(.task-login) .messagelist .subject a {
    color: #dfe7f0 !important;
}

html.dark-mode body:not(.task-login) #messagelist tr.unread .subject a,
html.dark-mode body:not(.task-login) .messagelist tr.unread .subject a {
    color: #7dd3fc !important;
}

html.dark-mode body:not(.task-login) #messagelist .fromto,
html.dark-mode body:not(.task-login) .messagelist .fromto,
html.dark-mode body:not(.task-login) #messagelist .date,
html.dark-mode body:not(.task-login) .messagelist .date {
    color: var(--dm-muted) !important;
}

html.dark-mode body:not(.task-login) input,
html.dark-mode body:not(.task-login) select,
html.dark-mode body:not(.task-login) textarea,
html.dark-mode body:not(.task-login) .form-control {
    background: #0f172a !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line-2) !important;
}

html.dark-mode body:not(.task-login) input:focus,
html.dark-mode body:not(.task-login) select:focus,
html.dark-mode body:not(.task-login) textarea:focus,
html.dark-mode body:not(.task-login) .form-control:focus {
    border-color: var(--dm-primary-2) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.12) !important;
}

html.dark-mode body:not(.task-login) .formcontent,
html.dark-mode body:not(.task-login) .propform,
html.dark-mode body:not(.task-login) .boxcontent,
html.dark-mode body:not(.task-login) .boxfooter,
html.dark-mode body:not(.task-login) .preferences-box,
html.dark-mode body:not(.task-login) table,
html.dark-mode body:not(.task-login) td {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) th {
    background: var(--dm-surface-2) !important;
    color: #c9d7e5 !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) .popupmenu,
html.dark-mode body:not(.task-login) .menu,
html.dark-mode body:not(.task-login) .dropdown-menu,
html.dark-mode body:not(.task-login) .ui-dialog,
html.dark-mode body:not(.task-login) .ui-widget-content {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line-2) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.32) !important;
}

html.dark-mode body:not(.task-login) .popupmenu a,
html.dark-mode body:not(.task-login) .menu a,
html.dark-mode body:not(.task-login) .dropdown-menu a {
    color: #d9e2ec !important;
}

html.dark-mode body:not(.task-login) .popupmenu a:hover,
html.dark-mode body:not(.task-login) .menu a:hover,
html.dark-mode body:not(.task-login) .dropdown-menu a:hover {
    background: #213147 !important;
    color: #ffffff !important;
}

html.dark-mode body:not(.task-login) #message-header,
html.dark-mode body:not(.task-login) .message-partheaders {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-line) !important;
}

html.dark-mode body:not(.task-login) .cimar-watermark {
    background: var(--dm-surface) !important;
}

html.dark-mode body:not(.task-login) .cimar-watermark img {
    opacity: .12 !important;
    filter: brightness(1.1) saturate(.8) !important;
}

html.dark-mode body:not(.task-login) * {
    scrollbar-color: #435269 transparent;
}

html.dark-mode body:not(.task-login) *::-webkit-scrollbar-thumb {
    background: #435269 !important;
}

/* ==========================================================
   ICONO DE USUARIO JUNTO AL CORREO
   ========================================================== */

body:not(.task-login) .header-title.username {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body:not(.task-login) .header-title.username::before {
    content: "" !important;
    display: inline-block !important;

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    background:
        url("/skins/cimar/images/user-icon.png")
        center / contain
        no-repeat !important;
}

@media (max-width: 680px) {
    body:not(.task-login) .header-title.username::before {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }
}