/* ------------------------------------------------------------------
   Deepdots — estilo de las páginas de login (admin y portal de cliente).
   Replica el aspecto del resto de sistemas: fondo DEEP BLUE con halo,
   wordmark encima y tarjeta blanca.

   Colores tomados de la paleta corporativa:
     DEEP BLUE  #09132B      azul 800  #132553     azul 700  #1C397D
     azul 600   #2544A7      PRIMARIO  #2E5DD1     azul 400  #5B7DDA
     DARK INK   #111720      MIST 200  #E7E7E8     MIST 300  #CED1D2
     MIST 400   #9FA2A6      MIST 600  #707479     MIST 700  #595D63

   Todo acotado con :has(.dd-card) para que solo afecte al login y nunca
   al panel de administración ya autenticado.
   ------------------------------------------------------------------ */

:root {
  --dd-deep-blue:   #09132B;
  --dd-blue-800:    #132553;
  --dd-blue-700:    #1C397D;
  --dd-blue-600:    #2544A7;
  --dd-blue:        #2E5DD1;
  --dd-blue-400:    #5B7DDA;
  --dd-ink:         #111720;
  --dd-mist-200:    #E7E7E8;
  --dd-mist-300:    #CED1D2;
  --dd-mist-400:    #9FA2A6;
  --dd-mist-700:    #595D63;
}

/* ---------------------------------------------------------- fondo */
body:has(.dd-card) {
  min-height: 100vh;
  background:
    radial-gradient(1000px 780px at 82% 14%, rgba( 91, 125, 218, .34), transparent 58%),
    radial-gradient( 820px 640px at 64% 42%, rgba( 46,  93, 209, .16), transparent 62%),
    linear-gradient(160deg, #09132B 0%, #0B1835 46%, #070F22 100%) !important;
  background-attachment: fixed !important;
}

body:has(.dd-card) .flex-root,
body:has(.dd-card) .flex-column-fluid { background: transparent !important; }

/* ------------------------------------------------------- wordmark */
.dd-brand {
  width: 100%;
  max-width: 500px;
  margin: 0 auto .95rem;
  padding-left: .15rem;
}
.dd-brand img { height: 30px; width: auto; display: block; }

/* Nombre del sistema bajo el wordmark, como en el CRM.
   En px a propósito: Keen fija el root en ~13px, así que los rem salen
   un 20% más pequeños de lo esperado. */
.dd-system {
  color: #ACBEEC;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1.2;
  margin-top: 7px;
  padding-left: 2px;
}

/* Los anchos siguen a los de la tarjeta (w-lg-500px / w-md-450px / w-sm-400px) */
@media (max-width: 991.98px) { .dd-brand { max-width: 450px; } }
@media (max-width: 767.98px) { .dd-brand { max-width: 400px; } }

/* Por debajo de sm la tarjeta no lleva clase de ancho y se encoge al contenido,
   lo que descuadraba el wordmark. Forzamos que ambos ocupen el contenedor. */
@media (max-width: 575.98px) {
  .dd-card  { width: 100% !important; }
  .dd-brand { max-width: 100%; }
  .dd-brand img { height: 26px; }
  .dd-system { font-size: 13px; }
}

/* --------------------------------------------------------- tarjeta */
.dd-card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(9, 19, 43, .55) !important;
  padding: 2.25rem 2rem !important;
}

/* El logo que SFTPGo mete dentro de la tarjeta: fuera, ya está arriba */
.dd-card form > .container.mb-10 { display: none !important; }

/* ---------------------------------------------------------- campos */
.dd-card .form-control,
.dd-card .form-control-solid {
  background-color: #fff !important;
  border: 1px solid var(--dd-mist-200) !important;
  color: var(--dd-ink) !important;
  border-radius: 10px !important;
  padding: .9rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd-card .form-control::placeholder { color: var(--dd-mist-400) !important; opacity: 1; }
.dd-card .form-control:hover,
.dd-card .form-control-solid:hover { border-color: var(--dd-mist-300) !important; }
.dd-card .form-control:focus,
.dd-card .form-control-solid:focus {
  background-color: #fff !important;
  border-color: var(--dd-blue) !important;
  box-shadow: 0 0 0 3px rgba(46, 93, 209, .16) !important;
}

.dd-card .fv-row.mb-10 { margin-bottom: 1rem !important; }

.dd-card [data-password-control="visibility"] i,
.dd-card [data-password-control="visibility"] i span { color: var(--dd-mist-400) !important; }

/* ---------------------------------------------------------- botón */
.dd-card .btn-primary {
  background-color: var(--dd-blue) !important;
  border-color: var(--dd-blue) !important;
  border-radius: 10px !important;
  padding: .9rem 1rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.dd-card .btn-primary:hover,
.dd-card .btn-primary:focus,
.dd-card .btn-primary:active {
  background-color: var(--dd-blue-600) !important;
  border-color: var(--dd-blue-600) !important;
}

/* ---------------------------------------------------------- enlaces */
.dd-card .link-primary {
  color: var(--dd-mist-700) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
}
.dd-card .link-primary:hover { color: var(--dd-blue) !important; }

.dd-card,
.dd-card .text-gray-900,
.dd-card .text-gray-800,
.dd-card label { color: var(--dd-ink) !important; }

/* Contenedor del enlace cruzado, desactivado: si queda vacío, fuera.
   El :not(:has(...)) evita ocultarlo si algún día lleva selector de idioma. */
/* Lleva dentro el selector de idioma, que va con .d-none mientras solo haya
   un idioma. Se oculta solo si no hay enlace NI un select visible; si algún
   día se añaden idiomas, el contenedor vuelve a aparecer por sí solo. */
.dd-card .d-flex.flex-stack:not(:has(a)):not(:has(select:not(.d-none))):not(:has(button)) {
  display: none !important;
}

/* El botón trae mb-5 de Keen; en la referencia el aire es menor */
.dd-card #sign_in_submit.mb-5 { margin-bottom: 0 !important; }

/* ---------------------------------------------- spinner de carga */
body:has(.dd-card) #app_loader .spinner-border { color: rgba(255, 255, 255, .65) !important; }