/* dabbleam.css (30-10-2026): marca de Dabbleam en Roundcube 1.6 (Elastic). Entrada con el diseño estilizado de las
   páginas sueltas de la marca (el de dbl.am y las páginas de error), no el de la entrada de Plesk: fondo con el degradado
   de la barra de la web, tramado (fondo-web.png, tira de 128 px repetida; un degradado CSS hace franjas en Firefox); el
   logo blanco encima; y una caja blanca con el icono redondo del sobre, el nombre del correo como título y el botón con
   el degradado oscuro. El modo oscuro se deja como está. */
html:not(.dark-mode) body.task-login #layout-content {
  background: #007ac7 url("fondo-web.png") 0 0 / auto 100% repeat-x;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 48px;
}
/* el logo (skin_logo elastic:login, el blanco) encima de la caja */
html:not(.dark-mode) body.task-login #logo {
  display: block; position: static; top: auto; width: auto; height: 40px; max-height: none; margin: 0 0 28px;
}
html:not(.dark-mode) body.task-login #login-form {
  box-sizing: border-box; width: 100%; max-width: 420px; margin: 0; padding: 40px 36px 0; background: #fff;
  position: static; top: auto; /* Elastic lo baja con un desplazamiento relativo */
  border-radius: .5em; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 30, 60, .18), 0 18px 48px rgba(0, 30, 60, .28);
  display: flex; flex-direction: column; text-align: center;
}
/* el icono de estado, como los iconos redondos de servicios de la web: un elemento propio que mete el plugin
   (dabbleam.php), con el círculo y el glifo en dos capas; crece solo al pasar el ratón por él (guía, "Iconos redondos") */
html:not(.dark-mode) body.task-login .dabbleam-icono {
  position: relative; display: block; flex: none; width: 72px; height: 72px; margin: -4px auto 22px; border-radius: 50%;
  background: radial-gradient(#00b7ff 20%, #009dff 70%); box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 0 0 8px #e9f6ff;
  order: -2; transition: transform 0.4s ease-out; }
html:not(.dark-mode) body.task-login .dabbleam-icono::after { content: ""; position: absolute; inset: 0; margin: auto; width: 48%; height: 48%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSI1IiB3aWR0aD0iMTkiIGhlaWdodD0iMTQiIHJ4PSIyIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTMuNSA2LjRsOC41IDYuNCA4LjUtNi40IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDlkZmYiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") center / contain no-repeat; transition: transform 0.4s ease-out; }
html:not(.dark-mode) body.task-login .dabbleam-icono:hover, html:not(.dark-mode) body.task-login .dabbleam-icono:hover::after { transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { html:not(.dark-mode) body.task-login .dabbleam-icono, html:not(.dark-mode) body.task-login .dabbleam-icono::after { transition: none; transform: none !important; } }
/* el nombre del producto ("Correo de Dabbleam", product_name) sube y hace de título */
html:not(.dark-mode) body.task-login #login-footer {
  order: -1; margin: 0 0 22px; font-family: Objectivity, Roboto, sans-serif; font-weight: 700; font-size: 1.45em; color: #0b2a40;
}
html:not(.dark-mode) body.task-login #login-form table { margin: 0; }
html:not(.dark-mode) body.task-login #login-form .formbuttons { margin: 6px 0 32px; }
/* botones principales: #007ac7, el azul de Dabbleam más claro con el que el texto blanco llega a 4,5:1 */
html:not(.dark-mode) .btn-primary, html:not(.dark-mode) .button.mainaction {
  background-color: #007ac7; border-color: #007ac7; background-image: linear-gradient(to bottom, #007ac7, #005ca5); /* regla única de paneles */
}
/* Elastic pone el botón de entrar en mayúsculas (.text-uppercase, con !important) */
html:not(.dark-mode) body.task-login #rcmloginsubmit { text-transform: none !important; }
html:not(.dark-mode) .btn-primary:hover, html:not(.dark-mode) .button.mainaction:hover { background-image: none; background-color: #005ca5; border-color: #005ca5; }
/* columna del menú en la tinta, como la barra lateral del panel de Plesk (en Elastic es gris, #2f3a3f) */
html:not(.dark-mode) #layout-menu, html:not(.dark-mode) #taskmenu .special-buttons { background-color: #0b2a40; }
html:not(.dark-mode) #layout-menu .popover-header { background-color: #0b2a40 !important; }
/* la opción seleccionada y la que está bajo el ratón, en el azul de la opción activa de la barra de Plesk */
html:not(.dark-mode) #taskmenu a.selected, html:not(.dark-mode) #taskmenu a:hover, html:not(.dark-mode) #taskmenu a:focus { background-color: #174463; }