/* ------------------------------------------------------------------
   Delphi Control — tema derivado de Elastic
   Solo superpone; no modifica ningún archivo del tema original.
   Paleta tomada del portal de gdatacenter.net.
   ------------------------------------------------------------------ */
@import url("../../elastic/styles/styles.min.css");

:root{
  --dc-ground:#0E1621;
  --dc-surface:#17212E;
  --dc-line:#263443;
  --dc-text:#E9EEF5;
  --dc-muted:#8CA0B6;
  --dc-accent:#7BA0CC;
  --dc-accent-fuerte:#8FB2DA;
}

/* ========== Pantalla de acceso ========== */
body.task-login,
body.task-login #layout,
body.task-login #layout-content{
  background:var(--dc-ground) !important;
}

body.task-login #layout-content > .content,
body.task-login #layout-content > .formcontent{
  background:transparent !important;
}

body.task-login #logo{
  max-width:min(330px,78vw);
  height:auto;
  margin-bottom:1.75rem;
}

body.task-login #login-form{
  background:var(--dc-surface);
  border:1px solid var(--dc-line);
  border-radius:6px;
  padding:1.75rem 1.5rem .5rem;
  box-shadow:0 10px 34px rgba(0,0,0,.34);
}

body.task-login #login-form input.form-control{
  background:var(--dc-ground);
  border-color:var(--dc-line);
  color:var(--dc-text);
}
body.task-login #login-form input.form-control:focus{
  border-color:var(--dc-accent);
  box-shadow:0 0 0 2px rgba(123,160,204,.24);
}
body.task-login #login-form input.form-control::placeholder{color:var(--dc-muted)}
body.task-login #login-form label{color:var(--dc-muted)}

/* Elastic pinta este boton con una regla muy especifica; se usa su id */
body.task-login #rcmloginsubmit,
body.task-login #login-form .btn-primary,
body.task-login button.btn.btn-primary{
  background:var(--dc-accent);
  border-color:var(--dc-accent);
  color:#0B121B !important;
  font-weight:600;
  background-color:var(--dc-accent) !important;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #login-form .btn-primary:hover,
body.task-login button.btn.btn-primary:hover{
  background:var(--dc-accent-fuerte);
  border-color:var(--dc-accent-fuerte);
}

body.task-login #login-footer,
body.task-login .footer{color:var(--dc-muted)}
body.task-login a{color:var(--dc-accent)}

/* ========== Interfaz de trabajo ==========
   Se conserva el diseño claro de Elastic, que es el legible para uso
   diario; solo se cambia el azul del acento por el de la marca.       */
#layout > .header,
.menu .listing li > a.selected,
#taskmenu a.selected{color:var(--dc-accent)}

a{color:#5C86B4}
a:hover{color:var(--dc-accent)}

.btn.btn-primary{
  background:var(--dc-accent);
  border-color:var(--dc-accent);
  color:#0B121B;
}
.btn.btn-primary:hover{background:var(--dc-accent-fuerte);border-color:var(--dc-accent-fuerte)}

.listing li.selected > a,
.listing tr.selected > td{border-left-color:var(--dc-accent) !important}

input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--dc-accent) !important;
  box-shadow:0 0 0 2px rgba(123,160,204,.2) !important;
}

/* ---------- Enlace a la guia de configuracion ----------
   Roundcube lo rotula "Obtener soporte", que no dice nada. Se sustituye
   el texto visible; el original permanece en el DOM para lectores de
   pantalla que no anuncien pseudoelementos.                            */
body.task-login #login-footer{
  margin-top:1.4rem;
  display:flex;justify-content:center;
}
body.task-login #login-footer .support-link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border:1px solid var(--dc-line);border-radius:5px;
  color:var(--dc-accent);text-decoration:none;font-weight:600;
  font-size:0;                      /* oculta el rotulo original */
  transition:border-color .14s,background .14s;
}
body.task-login #login-footer .support-link:hover{
  border-color:var(--dc-accent);
  background:rgba(123,160,204,.08);
}
body.task-login #login-footer .support-link::before{
  content:"";
  width:16px;height:16px;flex:none;
  background-color:currentColor;
  -webkit-mask:var(--icono-movil) center/contain no-repeat;
          mask:var(--icono-movil) center/contain no-repeat;
}
body.task-login #login-footer .support-link::after{
  content:"Configurar el correo en tu móvil";
  font-size:.92rem;
}
:root{
  --icono-movil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2.5'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}