/**
 * Servijur SRL skin for Roundcube Elastic
 * Version 1.0.0
 * Palette: #bc3437, #2a2c34, #ffffff
 */

:root {
  --sj-red: #bc3437;
  --sj-red-dark: #92272b;
  --sj-red-soft: #f8e9ea;
  --sj-graphite: #2a2c34;
  --sj-graphite-dark: #1e2026;
  --sj-ink: #25272d;
  --sj-muted: #707580;
  --sj-canvas: #f4f6f8;
  --sj-line: #dfe3e8;
  --sj-white: #ffffff;
  --sj-radius: 12px;
  --sj-shadow: 0 12px 35px rgba(22, 24, 30, .12);
}

/* Base visual language */
html body {
  color: var(--sj-ink);
  background-color: var(--sj-canvas);
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

html body a,
html body .btn-link {
  color: var(--sj-red-dark);
}

html body a:hover,
html body a:focus,
html body .btn-link:hover,
html body .btn-link:focus {
  color: var(--sj-red);
}

html body ::selection {
  color: var(--sj-white);
  background: var(--sj-red);
}

html body .form-control:focus,
html body .custom-select:focus {
  color: var(--sj-ink);
  border-color: var(--sj-red);
  box-shadow: 0 0 0 .2rem rgba(188, 52, 55, .18);
}

html body input[type="checkbox"],
html body input[type="radio"] {
  accent-color: var(--sj-red);
}

/* Primary and floating actions */
html body .btn-primary,
html body button.btn-primary,
html body input.btn-primary,
html body .floating-action-buttons a.button {
  color: var(--sj-white);
  background: var(--sj-red);
  border-color: var(--sj-red);
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:not(:disabled):not(.disabled):active,
html body .btn-primary:not(:disabled):not(.disabled).active {
  color: var(--sj-white);
  background: var(--sj-red-dark);
  border-color: var(--sj-red-dark);
  box-shadow: 0 0 0 .2rem rgba(188, 52, 55, .22);
}

html body .floating-action-buttons a.button {
  box-shadow: 0 8px 22px rgba(188, 52, 55, .32);
}

/* Main navigation */
html body #layout-menu {
  background: linear-gradient(180deg, var(--sj-graphite) 0%, var(--sj-graphite-dark) 100%);
  box-shadow: 3px 0 18px rgba(22, 24, 30, .14);
}

html body #layout-menu .popover-header,
html body #taskmenu .special-buttons {
  background-color: transparent !important;
}

html body #layout-menu .popover-header img {
  max-height: 72px;
  padding: .7rem .35rem;
  object-fit: contain;
}

html body #taskmenu a {
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

html body #taskmenu a.selected {
  color: var(--sj-white);
  background: rgba(188, 52, 55, .30);
  box-shadow: inset 3px 0 0 var(--sj-red);
}

html body #taskmenu a:hover,
html body #taskmenu a.selected:hover {
  color: var(--sj-white);
  background: rgba(255, 255, 255, .10);
}

html body #taskmenu .action-buttons a {
  color: #f0a6a8;
}

html body #taskmenu .action-buttons a:hover {
  color: var(--sj-white);
  background: rgba(188, 52, 55, .30);
}

/* Panels, headers and message lists */
html body #layout-sidebar,
html body #layout-list,
html body #layout-content {
  border-color: var(--sj-line);
}

html body #layout > div > .header {
  color: var(--sj-ink);
  background: var(--sj-white);
  border-color: var(--sj-line);
  box-shadow: 0 1px 0 rgba(42, 44, 52, .03);
}

html body #layout > div > .footer {
  background: #fafbfc;
  border-color: var(--sj-line);
}

html body .listing li.selected,
html body .listing tr.selected td,
html body ul.treelist li.selected > a,
html body ul.treelist li.selected > div > a {
  color: var(--sj-ink);
  background-color: var(--sj-red-soft);
}

html:not(.touch) body .listing li > a:focus,
html:not(.touch) body .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) body .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
  border-left-color: var(--sj-red);
}

html body .folderlist li.mailbox .unreadcount,
html body .folderlist li.mailbox.recent > a > .unreadcount {
  color: var(--sj-white);
  background: var(--sj-red);
}

html body .folderlist li.mailbox.recent > a,
html body #messagelist tr.flagged td,
html body #messagelist tr.flagged td a {
  color: var(--sj-red-dark);
}

html body .popupmenu .listing li > a:not(.disabled):hover,
html body .popupmenu .listing li.selected,
html body .ui-menu .ui-menu-item-wrapper.ui-state-active {
  color: var(--sj-white);
  background-color: var(--sj-red);
}

html body .menu.toolbar .dropbutton a.dropdown:hover,
html body .menu.toolbar a.button:hover,
html body #layout > div > .header a.button:hover {
  color: var(--sj-red);
}

html body .searchbar input:focus {
  border-color: var(--sj-red);
}

html body .message.notice,
html body #messagestack .notice {
  border-left: 4px solid var(--sj-red);
}

/* Login: premium, restrained and fully responsive */
html body.task-login {
  min-height: 100%;
  color: var(--sj-white);
  background-color: var(--sj-graphite-dark);
  background-image:
    radial-gradient(circle at 16% 18%, rgba(188, 52, 55, .30), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(188, 52, 55, .18), transparent 30%),
    linear-gradient(135deg, #30323a 0%, #24262c 48%, #191b20 100%);
}

html body.task-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  background-image:
    linear-gradient(30deg, transparent 12%, rgba(255, 255, 255, .08) 12.5%, transparent 13%),
    linear-gradient(150deg, transparent 12%, rgba(255, 255, 255, .06) 12.5%, transparent 13%);
  background-size: 88px 152px;
}

html body.task-login #layout,
html body.task-login #layout-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
}

html body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  padding: 2rem 1rem;
  overflow: auto;
  background: transparent;
}

html body.task-login .servijur-login-brand {
  width: min(440px, 92vw);
  text-align: center;
}

html body.task-login #logo {
  display: block;
  position: static;
  width: min(410px, 86vw);
  height: auto;
  max-height: 118px;
  margin: 0 auto .65rem;
  object-fit: contain;
  filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .20));
}

html body.task-login .servijur-login-kicker {
  margin: 0;
  color: #f1b3b5;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

html body.task-login .servijur-login-copy {
  margin: .35rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
}

html body.task-login #login-form {
  position: static;
  width: min(400px, 92vw);
  max-width: 400px;
  margin: 0;
  padding: 2rem 2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html body.task-login #login-form table,
html body.task-login #login-form tbody {
  width: 100%;
}

html body.task-login #login-form .form-control {
  min-height: 48px;
  color: var(--sj-ink);
  background-color: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 10px;
}

html body.task-login #login-form .form-control::placeholder {
  color: #858a94;
}

html body.task-login #login-form .form-control:focus {
  color: var(--sj-ink);
  background: var(--sj-white);
  border-color: #efb1b3;
  box-shadow: 0 0 0 .22rem rgba(188, 52, 55, .28);
}

html body.task-login #login-form .input-group-text,
html body.task-login #login-form td.title {
  color: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
}

html body.task-login #rcmloginsubmit {
  width: 100%;
  min-height: 48px;
  margin-top: .35rem;
  border: 0;
  border-radius: 10px;
  color: var(--sj-white);
  background: linear-gradient(135deg, #c83b3f 0%, #a7292e 100%);
  box-shadow: 0 10px 24px rgba(188, 52, 55, .28);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body.task-login #rcmloginsubmit:hover,
html body.task-login #rcmloginsubmit:focus {
  background: linear-gradient(135deg, #d2474b 0%, #92272b 100%);
  box-shadow: 0 12px 28px rgba(188, 52, 55, .36);
  transform: translateY(-1px);
}

html body.task-login #login-footer {
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
}

html body.task-login #login-footer > div {
  background: transparent;
}

html body.task-login #login-footer a {
  color: #efb1b3;
}

html body.task-login .noscriptwarning {
  position: fixed;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  border-radius: 10px;
}

/* Dark mode keeps the brand accent without reducing readability */
html.dark-mode body #layout-menu {
  background: linear-gradient(180deg, #262830 0%, #181a1f 100%);
  border-color: #3b3e47;
}

html.dark-mode body .listing li.selected,
html.dark-mode body .listing tr.selected td,
html.dark-mode body ul.treelist li.selected > a,
html.dark-mode body ul.treelist li.selected > div > a {
  color: #f7f7f8;
  background-color: rgba(188, 52, 55, .34);
}

html.dark-mode body .btn-primary,
html.dark-mode body .floating-action-buttons a.button {
  color: var(--sj-white);
  background: var(--sj-red);
  border-color: var(--sj-red);
}

html.dark-mode body.task-login,
html.dark-mode body.task-login #layout-content {
  color: var(--sj-white);
  background-color: var(--sj-graphite-dark);
}

@media screen and (max-width: 480px) {
  html body.task-login #layout-content {
    justify-content: flex-start;
    gap: 1rem;
    padding-top: 7vh;
  }

  html body.task-login #logo {
    width: min(330px, 84vw);
    max-height: 94px;
  }

  html body.task-login #login-form {
    padding: 1.45rem 1.2rem 1rem;
    border-radius: 15px;
  }

  html body #taskmenu a.selected {
    color: var(--sj-ink);
    background: var(--sj-red-soft);
    box-shadow: inset 4px 0 0 var(--sj-red);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Ocultar el botón "Acerca de" de Roundcube */
#taskmenu .about {
    display: none !important;
}