/* 10/10 — Frutas Hemen: verde de la app (#15803d) sobre Elastic, al estilo de Outlook. */
:root {
  --hemen: #15803d;
  --hemen-oscuro: #166534;
  --hemen-claro: #dcfce7;
  --hemen-texto: #14532d;
}

/* ── Barra lateral de aplicaciones (como la barra de Outlook) ── */
#layout-menu {
  background: var(--hemen) !important;
  border-right: 0 !important;
}
#layout-menu #taskmenu a,
#layout-menu #taskmenu a:before,
#layout-menu #taskmenu a .inner,
#layout-menu .popover-header a,
#layout-menu .special-buttons a,
#layout-menu .special-buttons a:before {
  color: #fff !important;
}
#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a:hover,
#layout-menu #taskmenu a:focus {
  background: var(--hemen-oscuro) !important;
  color: #fff !important;
}
#layout-menu #logo {
  border-radius: 8px;
}

/* «Redactar»: botón blanco con letra e icono verdes (antes: blanco sobre blanco hasta pasar el ratón) */
#layout-menu #taskmenu a.compose,
#layout-menu #taskmenu a.compose:before,
#layout-menu #taskmenu a.compose .inner {
  background: #fff !important;
  color: var(--hemen) !important;
  font-weight: 600;
}
#layout-menu #taskmenu a.compose {
  border-radius: 8px;
  margin: 0.5rem 0.4rem;
}
#layout-menu #taskmenu a.compose:hover,
#layout-menu #taskmenu a.compose:hover:before,
#layout-menu #taskmenu a.compose:hover .inner,
#layout-menu #taskmenu a.compose.selected,
#layout-menu #taskmenu a.compose.selected:before,
#layout-menu #taskmenu a.compose.selected .inner {
  background: var(--hemen-claro) !important;
  color: var(--hemen-texto) !important;
}

/* Botón flotante de «Redactar» (móvil) */
.floating-action-buttons a.button,
.floating-action-buttons a.button:before {
  background-color: var(--hemen) !important;
  color: #fff !important;
}

/* ── Botones principales («Enviar», «Guardar», «Iniciar sesión») ── */
.btn-primary,
.button.mainaction,
.btn.mainaction,
.formbuttons .btn-primary,
#rcmloginsubmit {
  background-color: var(--hemen) !important;
  border-color: var(--hemen) !important;
  color: #fff !important;
}
.btn-primary:hover,
.button.mainaction:hover,
.btn.mainaction:hover,
#rcmloginsubmit:hover {
  background-color: var(--hemen-oscuro) !important;
  border-color: var(--hemen-oscuro) !important;
  color: #fff !important;
}

/* ── Carpetas y lista de correos: selección en verde claro ── */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div,
table.records-table tr.selected td,
table.records-table tr.selected td a,
table.records-table tr.selected td span {
  background-color: var(--hemen-claro) !important;
  color: var(--hemen-texto) !important;
}
table.records-table tr.focused > td:first-child,
.listing li.focused {
  box-shadow: inset 3px 0 0 var(--hemen) !important;
}
table.messagelist tr.unread td.subject span.subject a,
table.messagelist tr.unread .fromto,
table.messagelist tr.unread .subject a {
  color: var(--hemen-texto) !important;
}
.unreadcount,
.listing li .unreadcount {
  background-color: var(--hemen) !important;
  color: #fff !important;
}

/* ── Enlaces y campos activos ── */
#layout-content a:not(.button):not(.btn),
#layout-sidebar a.unread,
.popover a.active {
  color: var(--hemen);
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--hemen) !important;
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.2) !important;
}
.custom-control-input:checked ~ .custom-control-label:before,
input[type=checkbox]:checked {
  background-color: var(--hemen) !important;
  border-color: var(--hemen) !important;
  accent-color: var(--hemen);
}

/* ── Pantalla de entrada ── */
body.task-login {
  background: linear-gradient(135deg, var(--hemen) 0%, var(--hemen-oscuro) 100%) !important;
}
body.task-login #layout-content {
  background: transparent !important;
}
body.task-login #login-form {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
body.task-login #login-form,
body.task-login #login-form label,
body.task-login #login-form td {
  color: #18181b;
}
body.task-login #logo {
  max-height: 72px;
  border-radius: 12px;
}
body.task-login #login-footer,
body.task-login #login-footer a {
  color: #fff !important;
}

/* ── Modo oscuro de Roundcube: verde oscuro con letra blanca (el verde claro no se leía) ── */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div,
html.dark-mode table.records-table tr.selected td,
html.dark-mode table.records-table tr.selected td a,
html.dark-mode table.records-table tr.selected td span {
  background-color: var(--hemen-oscuro) !important;
  color: #fff !important;
}
html.dark-mode table.messagelist tr.unread td.subject span.subject a,
html.dark-mode table.messagelist tr.unread .fromto,
html.dark-mode table.messagelist tr.unread .subject a,
html.dark-mode #layout-content a:not(.button):not(.btn),
html.dark-mode .popover a.active {
  color: #86efac !important;
}
html.dark-mode body.task-login #login-form {
  background: #27272a;
}
html.dark-mode body.task-login #login-form,
html.dark-mode body.task-login #login-form label,
html.dark-mode body.task-login #login-form td {
  color: #f4f4f5;
}