/*
 * AR5 Mail — pantalla de acceso
 * Misma identidad que ar5.cl: carbón #0E0E10, naranja #FB5F02,
 * Space Grotesk para títulos e Inter para el resto.
 */

@font-face {
  font-family: 'AR5 Display';
  src: url('/skins/elastic/fonts/ar5/sg-700-latin.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'AR5 Display';
  src: url('/skins/elastic/fonts/ar5/sg-500-latin.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'AR5 Body';
  src: url('/skins/elastic/fonts/ar5/inter-400-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'AR5 Body';
  src: url('/skins/elastic/fonts/ar5/inter-500-latin.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'AR5 Body';
  src: url('/skins/elastic/fonts/ar5/inter-600-latin.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

body.task-login {
  font-family: 'AR5 Body', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: #0E0E10 !important;
  margin: 0 !important;
  min-height: 100vh !important;
}

/* el naranja entra como halo, no como fondo pleno */
body.task-login #layout {
  min-height: 100vh !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(251, 95, 2, .16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(251, 95, 2, .07) 0%, transparent 65%),
    #0E0E10 !important;
}

/* franja de marca al borde superior */
body.task-login #layout::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: #FB5F02; z-index: 10;
}

body.task-login #layout-content,
body.task-login #layout-content.no-navbar {
  background: transparent !important;
  border: 0 !important;
}

/* ---- logotipo ---- */
body.task-login #logo {
  max-width: 190px !important;
  height: auto !important;
  margin-bottom: 2.2rem !important;
}

/* ---- tarjeta del formulario ---- */
body.task-login .box-inner,
body.task-login #login-form .box-inner {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 4px !important;
  padding: 2rem 1.75rem !important;
  backdrop-filter: blur(8px);
}

body.task-login #login-form {
  max-width: 400px !important;
}

/* ---- campos ---- */
body.task-login #login-form input.form-control,
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-family: 'AR5 Body', sans-serif !important;
  font-size: 1rem !important;
  height: 48px !important;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
body.task-login #login-form input.form-control:focus,
body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus {
  background: rgba(255, 255, 255, .09) !important;
  border-color: #FB5F02 !important;
  box-shadow: 0 0 0 3px rgba(251, 95, 2, .22) !important;
  outline: none !important;
}
body.task-login #login-form input.form-control::placeholder {
  color: rgba(255, 255, 255, .42) !important;
}

/* iconos a la izquierda de cada campo */
body.task-login #login-form .input-group-prepend .input-group-text,
body.task-login #login-form .input-group-text {
  background: rgba(251, 95, 2, .14) !important;
  border: 1px solid rgba(251, 95, 2, .30) !important;
  border-right: 0 !important;
  border-radius: 3px 0 0 3px !important;
  color: #FB5F02 !important;
}
body.task-login #login-form .input-group-text a,
body.task-login #login-form .input-group-text span {
  color: #FB5F02 !important;
}

/* ---- botón ---- */
/* carbón sobre naranja: 6.1:1, mucho mejor que blanco sobre naranja (3.1:1) */
body.task-login #login-form button.btn,
body.task-login #rcmloginsubmit,
body.task-login button.btn.btn-primary {
  background: #FB5F02 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #0E0E10 !important;
  font-family: 'AR5 Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: .01em !important;
  height: 52px !important;
  text-transform: none !important;
  transition: background-color .2s, transform .2s;
}
body.task-login #login-form button.btn:hover,
body.task-login #rcmloginsubmit:hover,
body.task-login button.btn.btn-primary:hover {
  background: #FF7526 !important;
  transform: translateY(-1px);
}
body.task-login button.btn:focus-visible {
  outline: 3px solid #FB5F02 !important;
  outline-offset: 3px !important;
}

/* ---- pie "AR5 Mail" ---- */
body.task-login #login-form .product-name,
body.task-login .product-name {
  color: rgba(255, 255, 255, .55) !important;
  font-family: 'AR5 Display', sans-serif !important;
  font-weight: 500 !important;
  font-size: .78rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin-top: 1.6rem !important;
}

body.task-login label {
  color: rgba(255, 255, 255, .75) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
}

/* mensajes de error */
body.task-login .ui.alert {
  background: rgba(179, 38, 30, .16) !important;
  border: 1px solid rgba(179, 38, 30, .5) !important;
  color: #ffb4ab !important;
  border-radius: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.task-login * { transition: none !important; }
}

/* ------------------------------------------------------------------
   Ajustes sobre el marcado real de Roundcube 1.6 (tabla, no input-group)
   ------------------------------------------------------------------ */

/* La tabla no puede contener a un <td> puesto en flex, así que el ancho se
   desbordaba en móvil. Se saca del layout de tabla y todo pasa a bloques. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-spacing: 0 !important;
}
body.task-login #login-form tr { margin-bottom: .75rem !important; }
/* ui.js reescribe la tabla: oculta td.title y convierte td.input en un
   input-group (icono + campo). Debe quedar en fila, no apilado. */
body.task-login #login-form td.input {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 !important;
}
body.task-login #login-form .input-group-prepend {
  display: flex !important;
  flex: 0 0 auto !important;
}
body.task-login #login-form .input-group-text.icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 3px 0 0 3px !important;
}
/* el campo de contraseña viene envuelto por el plugin password_toggle */
body.task-login #login-form .pwd-toggle-wrap {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
}
body.task-login #login-form td.input > input.form-control,
body.task-login #login-form .pwd-toggle-wrap > input.form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  border-radius: 0 3px 3px 0 !important;
  border-left: 0 !important;
  padding-inline: .9rem !important;
}
body.task-login #login-form .pwd-toggle-btn {
  background: none !important;
  border: 0 !important;
  color: rgba(255, 255, 255, .55) !important;
  position: absolute !important;
  right: .6rem !important; top: 50% !important;
  transform: translateY(-50%) !important;
}
body.task-login #login-form .pwd-toggle-btn:hover { color: #FB5F02 !important; }

/* botón: el marcado real usa .button.mainaction, no .btn-primary */
body.task-login #login-form p.formbuttons {
  margin-top: .5rem !important;
}
body.task-login #rcmloginsubmit,
body.task-login #login-form button.button.mainaction {
  width: 100% !important;
  background: #FB5F02 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #0E0E10 !important;
  font-family: 'AR5 Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  height: 52px !important;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button.button.mainaction:hover {
  background: #FF7526 !important;
}

/* pie: el id real es #login-footer */
body.task-login #login-footer {
  color: rgba(255, 255, 255, .50) !important;
  font-family: 'AR5 Display', sans-serif !important;
  font-weight: 500 !important;
  font-size: .74rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin-top: 1.8rem !important;
  text-align: center !important;
}
body.task-login #login-footer a { color: rgba(255, 255, 255, .5) !important; }

/* el skin apaga el logotipo; devolverle el blanco pleno */
body.task-login #logo {
  filter: brightness(1.35) !important;
}

/* ---- móvil: el ancho fijo del formulario desbordaba el viewport ---- */
body.task-login #login-form,
body.task-login #login-form * { box-sizing: border-box !important; }

body.task-login #login-form {
  max-width: min(400px, calc(100vw - 2.5rem)) !important;
  margin-inline: auto !important;
}
body.task-login #login-form td.input {
  max-width: 100% !important;
  overflow: hidden !important;
}
body.task-login #layout-content {
  overflow-x: hidden !important;
  padding-inline: 1.25rem !important;
}

/* El <input size="40"> tiene ancho intrínseco de ~320px; sumado al icono
   desbordaba en pantallas angostas. Se ata todo al ancho del viewport. */
body.task-login { overflow-x: hidden !important; }

@media (max-width: 640px) {
  body.task-login #layout,
  body.task-login #layout-content,
  body.task-login #layout-content > *,
  body.task-login .box-inner {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  /* 100vw incluye la barra de scroll y desbordaba unos píxeles: el ancho
     lo da el contenedor con padding, y el formulario ocupa el 100% de él */
  body.task-login #layout-content {
    padding-inline: 1rem !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  body.task-login #login-form td.input { max-width: 100% !important; }
  body.task-login #login-form td.input > input.form-control,
  body.task-login #login-form .pwd-toggle-wrap,
  body.task-login #login-form .pwd-toggle-wrap > input.form-control {
    width: 100% !important;
    min-width: 0 !important;
    /* 16px evita que iOS haga zoom al enfocar el campo */
    font-size: 16px !important;
  }
}