/* Hola.cr · habillage du webmail (Elastic) d'après le livre de marque (canevas du 19/10/2026).
   Bandera mate : azul #1F3A68, rojo #B03A3E, blanco #F5F3EE, noche #141C2B.
   L'app s'efface : fond uni, tuiles transparentes en feuille (3/40/3/40), halo, actions en rouge. */

:root {
  --hc-bg: #F5F3EE;
  --hc-fg: #141C2B;
  --hc-fg60: rgba(20, 28, 43, .62);
  --hc-line: rgba(20, 28, 43, .2);
  --hc-veil: rgba(255, 255, 255, .45);
  --hc-surface: #FBFAF7;
  --hc-deep: #ECE9E2;
  --hc-sel: rgba(31, 58, 104, .12);
  --hc-accent: #1F3A68;
  --hc-accent-hover: #2A4D88;
  --hc-accent-deep: #1F3A68;
  --hc-focus: rgba(31, 58, 104, .3);
  --hc-red: #B03A3E;
  --hc-red-hover: #9A3236;
  --hc-red-text: #B03A3E;
  --hc-on-red: #F5F3EE;
  --hc-halo: #1F3A68;
  --hc-halo-op: .22;
  --hc-leaf: 3px 40px 3px 40px;
  --hc-btn: 3px 14px 3px 14px;
}
html.dark-mode {
  --hc-bg: #141C2B;
  --hc-fg: #F5F3EE;
  --hc-fg60: rgba(245, 243, 238, .62);
  --hc-line: rgba(245, 243, 238, .2);
  --hc-veil: rgba(245, 243, 238, .07);
  --hc-surface: #1B2436;
  --hc-deep: #0F1522;
  --hc-sel: rgba(175, 192, 222, .16);
  --hc-accent: #AFC0DE;
  --hc-accent-hover: #C5D2E8;
  --hc-accent-deep: #2A3B5C;
  --hc-focus: rgba(175, 192, 222, .35);
  --hc-red-text: #E08A80;
  --hc-halo: #FFFFFF;
  --hc-halo-op: .16;
}

/* ---------- Fond, halo, lettres ---------- */
html, body { background: var(--hc-bg) !important; color: var(--hc-fg); }
body, input, select, textarea, button, .btn, .form-control, .popover, .ui-dialog, .tooltip {
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { font-weight: 300; }
b, strong, th, label, .bold, .font-weight-bold { font-weight: 500; }
h1, h2, .boxtitle, .header-title, #layout-content h2.subject, .formcontent legend, .ui-dialog-title, fieldset > legend {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: .01em;
}
#layout-content h2.subject { font-size: 1.6rem; line-height: 1.25; color: var(--hc-fg); }

body:not(.iframe)::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  width: 640px; height: 640px; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--hc-halo); opacity: var(--hc-halo-op); filter: blur(140px);
}
#layout { position: relative; z-index: 1; background: transparent !important; }
body.iframe, body.iframe #layout-content, body.iframe .formcontent, body.iframe .content { background: transparent !important; }

#layout-sidebar, #layout-list, #layout-content,
#layout-sidebar > .header, #layout-list > .header, #layout-content > .header,
#layout-sidebar > .footer, #layout-list > .footer, #layout-content > .footer,
#layout-sidebar .scroller, #layout-list .scroller, #layout-content .scroller,
.listing, .listing li, table.listing, table.listing td, table.records-table, table.records-table tr td,
#messagelist tr td, .searchbar, #layout-content .content.frame-content, iframe.contentframe {
  background-color: transparent !important;
}
.header, .footer { border-color: var(--hc-line) !important; }

/* ---------- Grand écran : les panneaux deviennent des tuiles ---------- */
@media screen and (min-width: 1201px) {
  html.layout-large #layout, html.layout-normal #layout { padding: 14px 14px 14px 0; gap: 12px; }
  #layout-sidebar, #layout-list, #layout-content {
    border: 1px solid var(--hc-line) !important; background-color: var(--hc-veil) !important; overflow: hidden;
  }
  #layout-sidebar { border-radius: 3px 3px 3px 40px; }
  #layout-list { border-radius: 3px; }
  #layout-content { border-radius: 3px 40px 40px 3px; }
  body.task-login #layout-content { border: 0 !important; background: transparent !important; border-radius: 0; }
}

/* ---------- Menu des applications (colonne de gauche) ---------- */
#layout-menu { background: transparent !important; border-right: 1px solid var(--hc-line) !important; }
#layout-menu .popover-header { background: transparent !important; }
#layout-menu #logo { width: 44px; height: 44px; max-width: 44px; margin: 18px auto 14px; display: block; object-fit: contain; }
#taskmenu a, #taskmenu a:hover, #taskmenu a:focus { color: var(--hc-fg60); background: transparent; }
#taskmenu a:hover { color: var(--hc-fg); background: var(--hc-sel); }
#taskmenu a.selected, #taskmenu a.selected:hover, html.dark-mode #taskmenu a.selected {
  color: var(--hc-on-red) !important; background: var(--hc-red) !important;
}
#taskmenu a.selected, #taskmenu a:hover { border-radius: var(--hc-btn); }
@media screen and (min-width: 769px) {
  #taskmenu a { margin: 2px 6px; width: auto; }
}
#layout-menu .special-buttons, #layout-menu .special-buttons a, html.dark-mode #layout-menu .special-buttons a { background: transparent !important; }
#taskmenu a.compose, #taskmenu a.compose:hover { color: var(--hc-red-text) !important; }
#taskmenu a.compose.selected, #taskmenu a.compose.selected:hover { color: var(--hc-on-red) !important; }
@media screen and (min-width: 769px) {
  #layout-menu { width: 100px !important; min-width: 100px; }
  #taskmenu a .inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.floating-action-buttons a.button, html.dark-mode .floating-action-buttons a.button {
  background: var(--hc-red) !important; color: var(--hc-on-red) !important; box-shadow: 0 2px 10px rgba(20, 28, 43, .25) !important;
  border-radius: 3px 24px 3px 24px;
}
.floating-action-buttons a.button.compose:before {
  content: 'edit_square'; font-family: 'Material Symbols Rounded' !important; font-weight: 400 !important;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-size: 1.7rem;
}
#taskmenu a.logout { color: var(--hc-red-text) !important; }

/* ---------- Pictos Collection Semilla (Material Symbols Rounded, trait) ---------- */
/* Seulement les icônes remplacées ci-dessous : les autres gardent la police d'Elastic. */
#taskmenu a.compose:before, #taskmenu a.mail:before, #taskmenu a.contacts:before, #taskmenu a.settings:before,
#taskmenu a.theme:before, #taskmenu a.about:before, #taskmenu a.logout:before,
#mailboxlist li > a:before,
.menu.toolbar a.compose:before, .menu.toolbar a.reply:before, .menu.toolbar a.reply-all:before, .menu.toolbar a.forward:before,
.menu.toolbar a.delete:before, .menu.toolbar a.archive:before, .menu.toolbar a.junk:before, .menu.toolbar a.notjunk:before,
.menu.toolbar a.markmessage:before, .menu.toolbar a.more:before, .menu.toolbar a.select:before, .menu.toolbar a.threads:before,
.menu.toolbar a.options:before, .menu.toolbar a.send:before, .menu.toolbar a.savedraft:before, .menu.toolbar a.save:before,
.menu.toolbar a.attach:before, .menu.toolbar a.signature:before, .menu.toolbar a.responses:before, .menu.toolbar a.refresh:before,
a.button.icon.refresh:before, a.button.icon.back-list-button:before, a.button.icon.back-sidebar-button:before,
a.button.icon.back-content-button:before, a.button.icon.task-menu-button:before, a.button.icon.toolbar-menu-button:before,
a.button.icon.sidebar-menu:before, .searchbar a.button.search:before, .searchbar a.button.options:before, .searchbar a.button.reset:before {
  font-family: 'Material Symbols Rounded' !important; font-weight: 400 !important; font-style: normal;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; word-wrap: normal;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#taskmenu a:before { font-size: 1.55rem; }
#taskmenu a.compose:before { content: 'edit_square'; }
#taskmenu a.mail:before { content: 'mail'; }
#taskmenu a.contacts:before { content: 'contacts'; }
#taskmenu a.settings:before { content: 'settings'; }
#taskmenu a.theme.dark:before { content: 'dark_mode'; }
#taskmenu a.theme.light:before { content: 'light_mode'; }
#taskmenu a.about:before { content: 'info'; }
#taskmenu a.logout:before { content: 'logout'; }

#mailboxlist li > a:before { font-size: 1.3rem; color: var(--hc-accent); content: 'folder'; }
#mailboxlist li.inbox > a:before { content: 'inbox'; }
#mailboxlist li.drafts > a:before { content: 'draft'; }
#mailboxlist li.sent > a:before { content: 'send'; }
#mailboxlist li.junk > a:before { content: 'report'; }
#mailboxlist li.trash > a:before { content: 'delete'; }
#mailboxlist li.archive > a:before { content: 'archive'; }

.menu.toolbar a:before { font-size: 1.45rem; }
.menu.toolbar a.compose:before { content: 'edit_square'; }
.menu.toolbar a.reply:before { content: 'reply'; }
.menu.toolbar a.reply-all:before { content: 'reply_all'; }
.menu.toolbar a.forward:before { content: 'forward'; }
.menu.toolbar a.delete:before { content: 'delete'; }
.menu.toolbar a.archive:before { content: 'archive'; }
.menu.toolbar a.junk:before { content: 'report'; }
.menu.toolbar a.notjunk:before { content: 'check_circle'; }
.menu.toolbar a.markmessage:before { content: 'flag'; }
.menu.toolbar a.more:before { content: 'more_horiz'; }
.menu.toolbar a.select:before { content: 'checklist'; }
.menu.toolbar a.threads:before { content: 'forum'; }
.menu.toolbar a.options:before { content: 'tune'; }
.menu.toolbar a.send:before { content: 'send'; }
.menu.toolbar a.savedraft:before, .menu.toolbar a.save:before { content: 'save'; }
.menu.toolbar a.attach:before { content: 'attach_file'; }
.menu.toolbar a.signature:before { content: 'signature'; }
.menu.toolbar a.responses:before { content: 'quickreply'; }
a.button.icon.refresh:before, .menu.toolbar a.refresh:before { content: 'refresh'; }
a.button.icon.back-list-button:before, a.button.icon.back-sidebar-button:before, a.button.icon.back-content-button:before { content: 'arrow_back'; }
a.button.icon.task-menu-button:before { content: 'menu'; }
a.button.icon.toolbar-menu-button:before, a.button.icon.sidebar-menu:before { content: 'more_vert'; }
.searchbar a.button.search:before { content: 'search'; }
.searchbar a.button.options:before { content: 'tune'; }
.searchbar a.button.reset:before { content: 'close'; }

/* ---------- Actions en rouge, boutons en feuille ---------- */
.btn { border-radius: var(--hc-btn); font-weight: 400; letter-spacing: 0; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled), button.mainaction, input.mainaction, a.button.mainaction, .formbuttons .btn-primary, #rcmloginsubmit {
  color: var(--hc-on-red) !important; background: var(--hc-red) !important; border-color: var(--hc-red) !important;
  border-radius: var(--hc-btn); text-transform: none; font-weight: 400; letter-spacing: 0;
}
.btn-primary:hover, .btn-primary:focus, button.mainaction:hover, #rcmloginsubmit:hover, #rcmloginsubmit:focus {
  background: var(--hc-red-hover) !important; border-color: var(--hc-red-hover) !important;
  box-shadow: 0 0 0 .2rem rgba(176, 58, 62, .3) !important;
}
.btn-secondary, .btn-secondary:not(:disabled) { color: var(--hc-red-text); background: transparent; border: 1.5px solid var(--hc-red-text); }
.btn-secondary:hover { color: var(--hc-on-red); background: var(--hc-red); border-color: var(--hc-red); }

/* Ce qui est nouveau : en rouge (pastilles, non lus) */
.unreadcount, .folderlist li .unreadcount, #taskmenu .unread-count, .badge-primary {
  color: var(--hc-on-red) !important; background: var(--hc-red) !important; border-radius: 10px;
}
#messagelist tr.unread td.subject span.subject a, #messagelist tr.unread .subject { color: var(--hc-fg); font-weight: 500; }
.folderlist li.mailbox.recent > a { color: var(--hc-red-text) !important; }
#messagelist tr.unread td.subject:before, #messagelist tr.unread span.msgicon.status { color: var(--hc-red-text) !important; }

/* Champs */
.form-control, .custom-select, input[type=text], input[type=password], input[type=email], textarea, select {
  color: var(--hc-fg); background-color: var(--hc-veil); border-color: var(--hc-line); border-radius: 3px;
}
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode input[type=text],
html.dark-mode input[type=password], html.dark-mode textarea, html.dark-mode select { background-color: rgba(0, 0, 0, .18); }
.form-control:focus, input:focus, textarea:focus, select:focus { border-color: var(--hc-accent) !important; box-shadow: 0 0 0 .2rem var(--hc-focus) !important; }

/* Menus surgissants et dialogues : opaques, en feuille */
.popover, .popupmenu, .ui-dialog, .modal-content, #messagestack div {
  background-color: var(--hc-surface) !important; border-color: var(--hc-line) !important;
}
#messagestack div { color: var(--hc-fg) !important; border: 1px solid var(--hc-line); border-radius: 3px 14px 3px 14px; }
#messagestack div.error { border-color: #ff5552; }
.popover, .ui-dialog, .modal-content { border-radius: var(--hc-leaf) !important; overflow: hidden; }

/* ---------- Page de connexion : « ¡Hola! » ---------- */
body.task-login #layout-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; box-sizing: border-box; }
body.task-login #logo {
  position: static !important; top: auto !important; opacity: 1 !important;
  width: min(320px, 78vw); height: auto; max-height: none; margin: 0 0 28px;
}
body.task-login #rcmloginsubmit, body.task-login #rcmloginsubmit.text-uppercase { text-transform: none !important; }
body.task-login #login-footer { display: none !important; }
body.task-login #login-form {
  top: auto; margin: 0; width: 100%; max-width: 380px; box-sizing: border-box;
  padding: 26px 26px 22px; background: var(--hc-veil); border: 1px solid var(--hc-line); border-radius: var(--hc-leaf);
}
body.task-login #login-form:before {
  content: '¡Hola!'; display: block; margin: 0 0 4px;
  font-family: 'Marcellus', Georgia, serif; font-size: 2.25rem; line-height: 1.1; color: var(--hc-fg);
}
body.task-login #login-form:after {
  content: 'Ingresá con tu correo @hola.cr o tu dirección completa.'; display: block; order: 0;
  margin-top: 14px; font-size: .8rem; line-height: 1.45; color: var(--hc-fg60); text-align: center;
}
body.task-login #login-form .input-group-text { background: transparent; border-color: var(--hc-line); color: var(--hc-accent); border-radius: 3px 0 0 3px; }
body.task-login #rcmloginsubmit { padding: .6rem 1rem; font-size: 1rem; margin-top: 6px; }
body.task-login #login-footer, body.task-login .formbuttons + div, body.task-login #layout-content > p { color: var(--hc-fg60); }
body.task-login #layout-content:after {
  content: 'Hola.cr · un servicio de Momentum'; margin-top: 22px; font-size: .78rem; color: var(--hc-fg60); letter-spacing: .02em;
}