/* GRS · Webmail con la identidad de Grupo Rojas Silva — marino profundo, dorado como acento */
:root {
  --grs-navy: #0B1E38; --grs-navy2: #12305A; --grs-navy3: #1B3F70;
  --grs-oro: #C6A15B; --grs-oro-suave: #E9D9B4; --grs-crema: #FBF7EE;
  --grs-tx: #22303F; --grs-gris: #6B7685; --grs-linea: #E3E8EF;
}

/* ================= Pantalla de acceso ================= */
body.task-login { display: flex !important; min-height: 100vh; margin: 0; background: #fff !important; }
body.task-login #grs-marca { position: relative; flex: 1.15; min-height: 100vh; overflow: hidden; color: #fff;
  background: var(--grs-navy) url('fondo.jpg') center/cover no-repeat; }
body.task-login .grs-velo { position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(11,30,56,.94) 0%, rgba(11,30,56,.86) 45%, rgba(18,48,90,.78) 100%); }
body.task-login .grs-marca-in { position: relative; height: 100%; box-sizing: border-box; padding: 56px 64px;
  display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
body.task-login .grs-logo-claro { width: 230px; height: auto; margin-bottom: 44px; }
body.task-login .grs-eyebrow { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--grs-oro); margin-bottom: 14px; }
body.task-login #grs-marca h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; font-size: 38px; line-height: 1.18; margin: 0 0 18px; color: #fff; }
body.task-login #grs-marca p { font-size: 16px; line-height: 1.6; color: #C9D4E4; margin: 0 0 26px; max-width: 480px; }
body.task-login #grs-marca ul { list-style: none; padding: 0; margin: 0 0 40px; }
body.task-login #grs-marca li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #E3EAF4; margin-bottom: 12px; }
body.task-login #grs-marca li span { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 12px; border: 1px solid rgba(198,161,91,.7);
  color: var(--grs-oro); font-size: 12px; display: flex; align-items: center; justify-content: center; }
body.task-login .grs-marca-pie { font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,.5); border-top: 1px solid rgba(198,161,91,.35); padding-top: 18px; max-width: 420px; }

/* Panel del formulario */
body.task-login #layout { flex: 1; min-width: 380px; background: #fff !important; display: flex !important; align-items: center; justify-content: center; }
body.task-login #layout-content { background: #fff !important; width: 100%; max-width: 420px; padding: 40px 36px !important; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; }
body.task-login #layout-content > #logo { display: none !important; }
body.task-login .grs-hola { margin-bottom: 14px; text-align: left; }
body.task-login .grs-hola h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; font-size: 36px; color: var(--grs-navy); margin: 0 0 8px; }
body.task-login .grs-hola p { color: var(--grs-gris); font-size: 15px; line-height: 1.55; margin: 0; }
body.task-login .grs-hola p b { color: var(--grs-navy); }
body.task-login #login-form { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; top: 0 !important; }
body.task-login #login-form table { width: 100%; border-collapse: separate; border-spacing: 0 12px; }
body.task-login #login-form td.title { display: none; }
body.task-login #login-form td.input { display: flex !important; width: 100%; padding: 0; }
body.task-login #login-form .input-group-prepend .input-group-text, body.task-login #login-form .input-group-text { height: 48px; border-radius: 6px 0 0 6px; }
body.task-login #login-form .input-group-text { background: var(--grs-crema); border-color: var(--grs-linea); color: var(--grs-oro); min-width: 46px; justify-content: center; }
body.task-login #login-form input.form-control { height: 48px; border-color: var(--grs-linea); font-size: 15px; color: var(--grs-tx); }
body.task-login #login-form input.form-control:focus { border-color: var(--grs-navy3); box-shadow: 0 0 0 3px rgba(27,63,112,.14); }
body.task-login #login-form .formbuttons { margin-top: 8px; }
body.task-login #login-form .button.mainaction, body.task-login #login-form button.mainaction {
  width: 100%; height: 50px; border-radius: 6px; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  background: var(--grs-navy) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 22px rgba(11,30,56,.22); }
body.task-login #login-form .button.mainaction:hover, body.task-login #login-form button.mainaction:hover { background: var(--grs-navy2) !important; }
body.task-login .grs-ayuda { text-align: left; margin-top: 22px; font-size: 13.5px; color: var(--grs-gris); line-height: 1.5; }
body.task-login .grs-ayuda a, body.task-login .grs-legal a { color: var(--grs-navy2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--grs-oro-suave); }
body.task-login .grs-legal { text-align: left; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--grs-linea); font-size: 12px; color: #9AA4B2; }
body.task-login #login-footer { display: none !important; }
body.task-login #message { z-index: 10; }

@media (max-width: 900px) {
  body.task-login { flex-direction: column; }
  body.task-login #grs-marca { flex: none; min-height: 0; }
  body.task-login .grs-marca-in { padding: 28px 24px; }
  body.task-login .grs-logo-claro { width: 170px; margin-bottom: 0; }
  body.task-login #grs-marca .grs-eyebrow, body.task-login #grs-marca h2, body.task-login #grs-marca p,
  body.task-login #grs-marca ul, body.task-login .grs-marca-pie { display: none; }
  body.task-login #layout { min-width: 0; }
  body.task-login #layout-content { padding: 30px 22px !important; }
}

/* ================= Dentro del correo · diseño premium GRS ================= */
/* Sin rastros de Roundcube: "Acerca de" fuera del menú */
#layout-menu a.about, .popover a.about, #layout-menu .about { display: none !important; }

/* Tipografía: títulos en serif como el resto de la marca */
.header .header-title, .boxtitle, .ui-dialog-title, .formcontent legend, .subject h2 {
  font-family: Georgia, "Times New Roman", serif !important; font-weight: normal !important; letter-spacing: .2px; }

/* Menú lateral (igual en claro y oscuro) */
#layout-menu { background: linear-gradient(180deg, #0B1E38 0%, #0E2747 100%) !important; border-right: 1px solid rgba(198,161,91,.18) !important; }
#layout-menu .popover-header { background-color: #0B1E38 !important; }
#layout-menu #logo { display: block; width: auto !important; max-width: 86% !important; height: auto !important; max-height: 64px !important;
  margin: 14px auto 12px; padding: 0 !important; object-fit: contain; }
#layout-menu .menu a { color: #B9C6D8 !important; font-size: 12.5px; letter-spacing: .3px; }
#layout-menu .menu a:before { color: #8FA2BC !important; }
#layout-menu .menu a:hover, #layout-menu .menu a:focus { color: #fff !important; background-color: rgba(255,255,255,.06) !important; }
#layout-menu .menu a:hover:before { color: #fff !important; }
#layout-menu .menu a.selected { color: #fff !important; background-color: rgba(198,161,91,.14) !important; box-shadow: inset 3px 0 0 #C6A15B; }
#layout-menu .menu a.selected:before { color: #C6A15B !important; }
#layout-menu .menu a.compose { color: #0B1E38 !important; background: #C6A15B !important; margin: 6px 10px 10px; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
#layout-menu .menu a.compose:before { color: #0B1E38 !important; }
#layout-menu .menu a.compose:hover { background: #D4B373 !important; }

/* Botones y contadores */
.button.mainaction, button.mainaction, .btn-primary { background-color: #12305A !important; border-color: #12305A !important; color: #fff !important; border-radius: 6px !important; }
.button.mainaction:hover, button.mainaction:hover, .btn-primary:hover { background-color: #1B3F70 !important; border-color: #1B3F70 !important; }
.unreadcount, .listing li .unreadcount { background: #C6A15B !important; color: #0B1E38 !important; font-weight: 700; border-radius: 10px !important; }
.toolbar a.button:hover, .toolbar a.button:focus, .toolbar a.button:hover:before { color: #C6A15B !important; }
.searchbar, .searchbar input { border-radius: 8px !important; }
.msgicon.flagged:before, span.flag span.flagged:before { color: #C6A15B !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(127,142,163,.35); border-radius: 6px; }

/* ---------- Modo claro ---------- */
html:not(.dark-mode) body:not(.task-login) { background: #F4F6FA !important; }
html:not(.dark-mode) #layout-sidebar, html:not(.dark-mode) #layout-sidebar .header { background: #FBFAF6 !important; }
html:not(.dark-mode) #layout-list, html:not(.dark-mode) #layout-content { background: #FFFFFF !important; }
html:not(.dark-mode) .header, html:not(.dark-mode) .footer { background: #FFFFFF !important; border-color: #E6EAF0 !important; }
html:not(.dark-mode) #layout-sidebar, html:not(.dark-mode) #layout-list { border-right: 1px solid #E6EAF0 !important; }
html:not(.dark-mode) .header .header-title, html:not(.dark-mode) .header .header-title a { color: #0B1E38 !important; }
html:not(.dark-mode) .toolbar a.button, html:not(.dark-mode) .toolbar a.button:before { color: #4A5A70 !important; }
html:not(.dark-mode) .listing li a, html:not(.dark-mode) #folderlist-content li a { color: #2A3A50 !important; }
html:not(.dark-mode) .listing li:hover, html:not(.dark-mode) table.records-table tr:hover td { background-color: #F7F2E7 !important; }
html:not(.dark-mode) .listing li.selected, html:not(.dark-mode) table.records-table tr.selected td { background-color: #F3EAD6 !important; }
html:not(.dark-mode) .listing li.selected > a, html:not(.dark-mode) table.records-table tr.selected td,
html:not(.dark-mode) table.records-table tr.selected td a { color: #0B1E38 !important; }
html:not(.dark-mode) table.records-table tr.selected td:first-child, html:not(.dark-mode) .listing li.selected { box-shadow: inset 3px 0 0 #C6A15B; }
html:not(.dark-mode) table.messagelist tr td { border-bottom: 1px solid #EEF1F5 !important; }
html:not(.dark-mode) table.messagelist tr td, html:not(.dark-mode) table.messagelist tr td a, html:not(.dark-mode) table.messagelist .fromto { color: #5A6878 !important; }
html:not(.dark-mode) table.messagelist tr.unread td span.subject a, html:not(.dark-mode) table.messagelist tr.unread .fromto,
html:not(.dark-mode) table.messagelist tr.unread td a { color: #0B1E38 !important; font-weight: 700; }
html:not(.dark-mode) .searchbar { background: #F4F6FA !important; }
html:not(.dark-mode) .form-control:focus { border-color: #1B3F70 !important; box-shadow: 0 0 0 3px rgba(27,63,112,.14) !important; }

/* ---------- Modo oscuro ---------- */
html.dark-mode body:not(.task-login) { background: #0B1626 !important; }
html.dark-mode #layout-sidebar, html.dark-mode #layout-sidebar .header { background: #0F1E33 !important; }
html.dark-mode #layout-list, html.dark-mode #layout-content, html.dark-mode .header, html.dark-mode .footer { background: #12233A !important; }
html.dark-mode .header, html.dark-mode .footer, html.dark-mode #layout-sidebar, html.dark-mode #layout-list { border-color: rgba(255,255,255,.07) !important; }
html.dark-mode .header .header-title, html.dark-mode .header .header-title a { color: #E6ECF4 !important; }
html.dark-mode .toolbar a.button, html.dark-mode .toolbar a.button:before { color: #AFBDD0 !important; }
html.dark-mode .listing li a, html.dark-mode #folderlist-content li a { color: #D6DEE9 !important; }
html.dark-mode .listing li:hover, html.dark-mode table.records-table tr:hover td { background-color: rgba(255,255,255,.04) !important; }
html.dark-mode .listing li.selected, html.dark-mode table.records-table tr.selected td { background-color: rgba(198,161,91,.16) !important; }
html.dark-mode .listing li.selected > a, html.dark-mode table.records-table tr.selected td, html.dark-mode table.records-table tr.selected td a { color: #FFFFFF !important; }
html.dark-mode table.records-table tr.selected td:first-child, html.dark-mode .listing li.selected { box-shadow: inset 3px 0 0 #C6A15B; }
html.dark-mode table.messagelist tr td { border-bottom: 1px solid rgba(255,255,255,.05) !important; }
html.dark-mode table.messagelist tr td, html.dark-mode table.messagelist tr td a, html.dark-mode table.messagelist .fromto { color: #A9B7C9 !important; }
html.dark-mode table.messagelist tr.unread td span.subject a, html.dark-mode table.messagelist tr.unread .fromto, html.dark-mode table.messagelist tr.unread td a { color: #FFFFFF !important; font-weight: 700; }
html.dark-mode table.messagelist tr.unread .msgicon.status:before, html.dark-mode table.messagelist tr.unread span.unread { color: #C6A15B !important; }
html.dark-mode .searchbar { background: #0F1E33 !important; }
html.dark-mode .searchbar input { color: #E6ECF4 !important; }
html.dark-mode .form-control:focus { border-color: #C6A15B !important; box-shadow: 0 0 0 3px rgba(198,161,91,.2) !important; }
html.dark-mode a { color: #9CC3F0; }

/* ---------- Menú lateral en modo claro: claro, no azul ---------- */
html:not(.dark-mode) #layout-menu { background: #FFFFFF !important; border-right: 1px solid #E6EAF0 !important; }
html:not(.dark-mode) #layout-menu .popover-header { background-color: #FFFFFF !important; }
html:not(.dark-mode) #layout-menu .menu a { color: #4A5A70 !important; }
html:not(.dark-mode) #layout-menu .menu a:before { color: #7A8799 !important; }
html:not(.dark-mode) #layout-menu .menu a:hover, html:not(.dark-mode) #layout-menu .menu a:focus { color: #0B1E38 !important; background-color: #F7F2E7 !important; }
html:not(.dark-mode) #layout-menu .menu a:hover:before { color: #0B1E38 !important; }
html:not(.dark-mode) #layout-menu .menu a.selected { color: #0B1E38 !important; background-color: #F3EAD6 !important; }
html:not(.dark-mode) #layout-menu .menu a.selected:before { color: #A9843D !important; }
html:not(.dark-mode) #layout-menu .menu a.compose, html:not(.dark-mode) #layout-menu .menu a.compose:before { color: #0B1E38 !important; }
html:not(.dark-mode) #layout-menu .menu a.compose { box-shadow: 0 6px 14px rgba(198,161,91,.35); }
html:not(.dark-mode) #layout-menu .special-buttons, html:not(.dark-mode) #layout-menu .special-buttons a { background: #FFFFFF !important; }
#layout-menu #logo { max-width: 56px !important; max-height: 56px !important; margin: 12px auto 10px !important; }