/* Personalización local: pantalla de inicio de sesión (estilo Carbonio).
   Para cambiar el fondo, sustituye ../images/login-bg.svg o edita la URL. */

/* --- Lienzo con la imagen de fondo --- */
body.task-login #layout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* el padding inferior extra sube la tarjeta sin llegar a recortarla arriba */
  padding: 2rem 8vw 25vh;
  overflow: auto;
  background-color: #062a3d;
  background-image: url(../images/login-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --- Tarjeta blanca que contiene logotipo, formulario y pie --- */
body.task-login #layout-content {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 400px;
  margin: auto 0;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

/* El logotipo y el formulario ya no se desplazan con vh */
body.task-login #logo {
  position: static;
  top: auto;
  display: inline-block;
  max-width: 80%;
  max-height: 200px;
  margin-bottom: 1.75rem;
}

body.task-login #login-form {
  position: static;
  top: auto;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.task-login #login-footer {
  margin-top: .5rem;
  font-size: .85rem;
}

body.task-login #login-footer > div {
  background: transparent;
  padding: .5rem 0 0;
  margin-top: .5rem;
}

/* --- Pantallas pequeñas: tarjeta centrada --- */
@media screen and (max-width: 768px) {
  body.task-login #layout {
    justify-content: center;
    padding: 1.5rem 1rem 25vh;
  }
}

/* --- Modo oscuro: tarjeta oscura sobre el mismo fondo --- */
html.dark-mode body.task-login #layout-content {
  background-color: rgba(20, 28, 36, .95);
}

/* --- Sobres en vez de puntos para leído / no leído --- */
.messagelist td.subject span.msgicon.status:before {
  content: "\f2b6";        /* envelope-open: leído */
  font-weight: 400;        /* contorno */
  font-size: .95rem;
  width: 1.4rem;
  color: #7d868c;
}

.messagelist td.subject span.msgicon.status.unread:before {
  content: "\f0e0";        /* envelope: no leído */
  font-weight: 900;        /* relleno */
  font-size: .95rem;
  width: 1.4rem;
  color: #0067b9;          /* el azul de tu logo */
}

/* --- Botón destacado a cPanel en el menú de Configuración --- */
#settings-menu li.cpanel-link {
  border: 0 !important;
  margin: .6rem .7rem;
}

#settings-menu li.cpanel-link > a {
  background: linear-gradient(135deg, #0067b9 0%, #4ca3e8 100%);
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(0, 103, 185, .45);
  transition: filter .15s ease, transform .15s ease;
}

#settings-menu li.cpanel-link > a:before {
  content: "\f0ad";        /* llave inglesa, en vez del engranaje por defecto */
  color: #fff;
}

#settings-menu li.cpanel-link > a:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}