/* Proservis sobre el skin Elastic de Roundcube */
:root { --pv-teal:#11636F; --pv-teal-osc:#0B3F47; --pv-teal-claro:#E3F2F4; --pv-verde:#7CB518; }

html { font-size: 106%; }  /* letra un poco más grande para leer cómodo */
body, input, select, textarea, button { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

a, a:hover, .listing li.selected a, .popupmenu a.active:hover { color: var(--pv-teal); }

/* menú lateral */
#layout-menu { background-color: var(--pv-teal-osc); }
#layout-menu #taskmenu a, #layout-menu .special-buttons a { color: #dceff2; }
#layout-menu #taskmenu a.selected, #layout-menu #taskmenu a:hover { background-color: var(--pv-teal); color: #fff; }
#layout-menu #taskmenu a.selected { border-left: 4px solid var(--pv-verde); }
#layout-menu #logo { background: #fff; border-radius: 12px; padding: 6px; }

/* botones principales */
.btn-primary, .button.primary, .btn.btn-primary, .formbuttons .button.mainaction, button.mainaction, .button.mainaction {
  background-color: var(--pv-teal) !important; border-color: var(--pv-teal) !important; color: #fff !important;
}
.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover { background-color: var(--pv-teal-osc) !important; }
#messagelist-header + .compose, a.compose { }

/* elemento seleccionado en listas */
.listing li.selected, .listing tr.selected td, .listing li.focused, table.records-table tr.selected td {
  background-color: var(--pv-teal-claro) !important; color: #0b2a30;
}
.listing tr.unread td.subject span.subject a { font-weight: 700; }

/* botón «Contraseña» del menú: ícono de llave (Font Awesome de Elastic) */
#taskmenu a.proservis-clave:before { content: "\f084"; }

/* login */
body.task-login { background: linear-gradient(160deg, #0B3F47 0%, #072A31 60%, #0A3A2E 100%); }
body.task-login #layout-content { background: transparent; }
body.task-login #login-form { background: #fff; border-radius: 18px; padding: 2rem 1.75rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); max-width: 26rem; }
body.task-login #login-form input.form-control { font-size: 1.1rem; padding: .7rem .9rem; height: auto; }
body.task-login #login-form button.mainaction { font-size: 1.15rem; padding: .75rem; width: 100%; border-radius: 12px; }
body.task-login #logo { max-height: 64px; margin-bottom: 1rem; }
body.task-login #login-footer, body.task-login #login-footer a { color: #cfe7ea; }
.proservis-login-ayuda { text-align: center; margin: 1.25rem 0 0; font-size: 1rem; }
.proservis-login-ayuda a { color: var(--pv-teal); font-weight: 600; text-decoration: underline; }

/* login siempre claro dentro de la tarjeta, aunque el sistema esté en modo oscuro */
body.task-login #login-form .input-group-text { background: var(--pv-teal-claro) !important; color: var(--pv-teal) !important; border-color: #c9dfe2 !important; }
body.task-login #login-form input.form-control,
html.dark-mode body.task-login #login-form input.form-control { background: #fff !important; color: #1c2630 !important; border-color: #c9dfe2 !important; }
body.task-login #login-form input.form-control::placeholder { color: #6b7b80 !important; }
html.dark-mode body.task-login #login-form { background: #fff; }
body.task-login #login-footer { color: #9fc4c9 !important; }

body.task-login #login-form { width: min(26rem, calc(100vw - 2rem)); }