/* ============================================================
   Alphatracker · pantallas de acceso (login / logout)
   Todo va bajo .at-auth para no filtrar estilos al resto de la app.
   ============================================================ */

.at-auth{
  --sky-top:#12508F;
  --sky-mid:#5FA8DC;
  --sky-low:#FFC97A;
  --sun:#F9A825;
  --sun-hot:#FFC246;
  --crop:#4C8F42;
  --crop-deep:#2F6A2E;
  --steel:#243544;

  --night-top:#07162B;
  --night-low:#173A5E;

  --ink:#16202B;
  --ink-soft:#5A6675;
  --surface:#FFFFFF;
  --edge:#DCE3EA;
  --accent:#12508F;

  --vault:#0E1B2A;
  --vault-edge:#25384C;
  --vault-ink:#E6EDF4;
  --vault-soft:#8CA0B5;
  --danger:#C2504C;

  position:fixed; inset:0; z-index:1500;
  overflow-y:auto;
  background:linear-gradient(170deg,#DCEAF6 0%,#EEF3F7 45%,#F6F1E6 100%);
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.5;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.at-auth *{box-sizing:border-box}

.at-shell{width:100%; max-width:410px}

.at-card{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:0 2px 4px rgba(18,40,70,.06), 0 24px 48px -26px rgba(18,40,70,.55);
  overflow:hidden;
  transition:background-color .4s ease, border-color .4s ease;
}
.at-card[data-face="admin"]{background:var(--vault); border-color:var(--vault-edge); color:var(--vault-ink)}

/* ---------- Banda ilustrada: seguidores solares sobre cultivo ---------- */
.at-band{display:block; width:100%; height:124px}
.at-band svg{display:block; width:100%; height:100%}
.at-band img{display:block; width:100%; height:100%; object-fit:cover}
.at-auth .night-layer{opacity:0; transition:opacity .5s ease}
.at-auth .day-layer{opacity:1; transition:opacity .5s ease}
.at-card[data-face="admin"] .night-layer{opacity:1}
.at-card[data-face="admin"] .day-layer{opacity:0}

.at-auth .panel{transform-box:fill-box; transform-origin:50% 50%; transform:rotate(-24deg)}
@media (prefers-reduced-motion: no-preference){
  .at-auth .panel{animation:at-track 1.3s cubic-bezier(.25,.85,.35,1) both}
  .at-auth .panel--b{animation-delay:.08s}
  .at-auth .panel--c{animation-delay:.16s}
  .at-auth .panel--d{animation-delay:.24s}
  @keyframes at-track{from{transform:rotate(26deg)}}
}

/* ---------- Contenido ---------- */
.at-face{padding:26px 30px 24px; animation:at-fade .25s ease both}
@keyframes at-fade{from{opacity:0}}

/* Logo de marca. El PNG es transparente (ARGB) y sus colores —verde y ámbar—
   contrastan bien tanto sobre la tarjeta clara como sobre la de noche,
   así que NO se invierte en la cara "admin". */
.at-wordmark{height:70px; width:auto; display:block}

/* Alternativa de texto, por si algún día falta el PNG */
.at-wordmark-text{
  height:auto;
  font-size:1.28rem; font-weight:700; letter-spacing:-.02em; color:var(--accent);
}
.at-wordmark-text b{color:var(--sun); font-weight:700}
.at-card[data-face="admin"] .at-wordmark-text{color:var(--vault-ink)}

.at-auth h1{margin:20px 0 5px; font-size:1.35rem; font-weight:600; letter-spacing:-.015em}
.at-lede{margin:0; color:var(--ink-soft); font-size:.92rem}
.at-card[data-face="admin"] .at-lede{color:var(--vault-soft)}

/* Botón Microsoft según pautas de marca */
.at-ms-button{
  margin-top:24px; width:100%; min-height:46px;
  display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:0 14px;
  background:#fff; border:1px solid #8C8C8C; border-radius:2px;
  color:#5E5E5E; font:600 15px/1 "Segoe UI", system-ui, sans-serif; cursor:pointer;
  transition:background-color .15s ease;
}
.at-ms-button:hover:not(:disabled){background:#F3F3F3}
.at-ms-button:active:not(:disabled){background:#EAEAEA}
.at-ms-button:disabled{opacity:.6; cursor:default}

.at-helper{margin:14px 0 0; font-size:.82rem; color:var(--ink-soft)}
.at-helper a{color:var(--accent)}
.at-card[data-face="admin"] .at-helper{color:var(--vault-soft)}

.at-rule{margin:24px 0 0; border:0; border-top:1px solid var(--edge)}
.at-card[data-face="admin"] .at-rule{border-color:var(--vault-edge)}

.at-backdoor{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:13px; font-size:.79rem; color:var(--ink-soft)}
.at-card[data-face="admin"] .at-backdoor{color:var(--vault-soft)}
.at-link{
  background:none; border:0; padding:0; font:inherit; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--edge); cursor:pointer;
}
.at-link:hover{color:var(--accent); text-decoration-color:currentColor}
.at-card[data-face="admin"] .at-link{color:var(--vault-soft)}
.at-card[data-face="admin"] .at-link:hover{color:var(--sun-hot)}

/* ---------- Cara de administración ---------- */
.at-field{margin-top:16px}
.at-auth label{display:block; font-size:.79rem; color:var(--ink-soft); margin-bottom:6px}
.at-card[data-face="admin"] label{color:var(--vault-soft)}
.at-auth input{
  width:100%; min-height:42px; padding:0 12px;
  background:#fff; border:1px solid var(--edge); border-radius:6px;
  color:var(--ink); font:inherit;
}
.at-card[data-face="admin"] input{
  background:#08121E; border-color:var(--vault-edge); color:var(--vault-ink);
}
.at-auth input::placeholder{color:#9AA7B4}
.at-card[data-face="admin"] input::placeholder{color:#46596E}
.at-auth input:focus{border-color:var(--sun); outline:none; box-shadow:0 0 0 3px rgba(249,168,37,.22)}

.at-pw-wrap{position:relative}
.at-pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:6px 8px; color:var(--ink-soft); font:inherit; font-size:.79rem; cursor:pointer;
}
.at-card[data-face="admin"] .at-pw-toggle{color:var(--vault-soft)}
.at-pw-toggle:hover{color:var(--ink)}
.at-card[data-face="admin"] .at-pw-toggle:hover{color:var(--vault-ink)}

.at-submit{
  margin-top:20px; width:100%; min-height:46px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--sun); color:#1A1206; border:0; border-radius:6px;
  font:600 15px/1 inherit; cursor:pointer; transition:background-color .15s ease;
}
.at-submit:hover:not(:disabled){background:var(--sun-hot)}
.at-submit:disabled{opacity:.65; cursor:default}
.at-submit--calm{background:var(--accent); color:#fff}
.at-submit--calm:hover:not(:disabled){background:#17639F}

.at-alert{
  margin-top:16px; padding:10px 12px;
  border:1px solid rgba(194,80,76,.5); border-left:3px solid var(--danger);
  border-radius:6px; background:rgba(194,80,76,.10); color:#8E3532; font-size:.85rem;
}
.at-card[data-face="admin"] .at-alert{background:rgba(194,80,76,.14); color:#F3CFCD}

/* Indicador de proceso */
.at-spinner{
  width:16px; height:16px; flex:0 0 auto;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:at-spin .7s linear infinite;
}
@keyframes at-spin{to{transform:rotate(360deg)}}

.at-auth :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.at-card[data-face="admin"] :focus-visible{outline-color:var(--sun)}

@media (prefers-reduced-motion: reduce){
  .at-auth *{transition:none !important; animation:none !important}
}

/* Aviso neutro (p. ej. "has cerrado sesión") */
.at-note{
  margin-top:16px; padding:10px 12px;
  border:1px solid rgba(18,80,143,.28); border-left:3px solid var(--accent);
  border-radius:6px; background:rgba(18,80,143,.07); color:var(--accent); font-size:.85rem;
}
.at-card[data-face="admin"] .at-note{
  border-color:rgba(249,168,37,.4); border-left-color:var(--sun);
  background:rgba(249,168,37,.10); color:var(--sun-hot);
}