/* =========================================================
   features/login/login.css
   Pantalla de ingreso unificado — Agromonte ERP
   Paleta derivada del logo (crema · carmesí · verde), superficies en
   verde oscuro, tarjetas de 16px, controles de 6px, sin sombras.
   ========================================================= */
:root{
  /* Paleta derivada del logo de Agromonte (reporting.png) */
  --cream:#f4f1e1;      /* pétalos del clavel */
  --crimson:#a5234d;    /* contorno del clavel */
  --green:#4b8148;      /* palabra AGROMONTE */
  --blush:#efb9c9;      /* carmesí aclarado, solo para el botón y el brillo */
  /* Pila de superficies: verde de marca oscurecido */
  --abyss:#0c1a10; --deep:#08130c; --kelp:#14291b;
  --sage:#b7c2b0; --slate:#6f7f6b;
  --cta:linear-gradient(90deg,#f4f1e1 0%,#fbf8ec 48%,#efb9c9 100%);
  --hair:rgba(244,241,225,.12); --hair-strong:rgba(244,241,225,.35);
  --font:'DM Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ui:Arial,ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--abyss);color:var(--sage);min-height:100dvh;
  display:flex;flex-direction:column;line-height:1.4;
  background-image:radial-gradient(60% 55% at 28% 36%,rgba(75,129,72,.20) 0%,rgba(12,26,16,0) 70%);
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}


.shell{flex:1;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;max-width:1200px;width:100%;margin:0 auto;padding:20px 0 28px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
#orb{display:block;width:clamp(270px,86vw,400px);aspect-ratio:2/1;margin:0 0 10px}
h1{font-size:clamp(2.5rem,11vw,3.4rem);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--cream)}
.lead{font-size:16px;margin-top:16px;max-width:30ch;color:var(--sage)}
.panel{width:100%;max-width:460px;justify-self:center}
@media (min-width:960px){
  .shell{grid-template-columns:1.15fr 1fr;gap:64px}
  #orb{width:min(40vw,540px);margin:0 0 14px}
  h1{font-size:clamp(3.6rem,6.2vw,5.4rem)}
  .lead{font-size:18px;max-width:34ch}
}

.card{background:var(--kelp);border-radius:16px;padding:28px 22px;display:flex;flex-direction:column;gap:20px}
@media (min-width:480px){.card{padding:40px 36px}}
.card h2{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--cream)}
.field{display:flex;flex-direction:column;gap:8px}
label,.lbl{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.input-wrap{position:relative}
input[type=email],input[type=password],input[type=text]{
  width:100%;min-height:54px;padding:0 16px;background:var(--abyss);color:var(--cream);
  border:1px solid var(--hair);border-radius:6px;font:400 16px/1.2 var(--font);
  -webkit-appearance:none;appearance:none;transition:border-color .2s
}
input::placeholder{color:var(--slate)}
input:hover{border-color:var(--hair-strong)}
input:focus{border-color:var(--cream);outline:none}
input[aria-invalid="true"]{border:2px solid var(--blush)}
#pass{padding-right:88px}
.toggle{position:absolute;right:0;top:0;height:54px;min-width:56px;padding:0 14px;background:none;border:0;cursor:pointer;
  font:400 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.hint{font-size:12px;color:var(--sage)}
.remember{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--sage);min-height:44px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.remember input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:0;background:var(--abyss);border:1px solid var(--hair-strong);border-radius:6px;cursor:pointer;display:grid;place-items:center}
.remember input:checked{background:var(--cream);border-color:var(--cream)}
.remember input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--abyss);border-bottom:2px solid var(--abyss);transform:rotate(-45deg) translate(1px,-1px)}

/* Botón principal: único uso del degradado crema → rosa */
.cta{min-height:56px;width:100%;border:0;border-radius:6px;background:var(--cta);color:#10210f;
  font:400 14px var(--ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:filter .2s}
.cta:hover{filter:brightness(1.04)}
.cta:disabled{filter:saturate(.3) brightness(.55);cursor:progress}
.link{align-self:center;color:var(--sage);font-size:13px;text-decoration:underline;text-underline-offset:4px;
  background:none;border:0;cursor:pointer;min-height:44px;padding:0 8px}
.link:hover{color:var(--cream)}
.ghost{min-height:48px;padding:0 20px;background:rgba(75,129,72,.35);border:0;border-radius:6px;color:var(--cream);
  font:400 12px var(--ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ghost:hover{background:rgba(75,129,72,.65)}

.msg{display:flex;gap:12px;align-items:flex-start;background:var(--deep);border:1px solid var(--hair-strong);border-radius:6px;padding:14px;font-size:14px;color:var(--cream)}
.msg b{flex:none;width:22px;height:22px;border:1px solid var(--cream);border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:500}
.msg .body{flex:1}
.msg .retry{margin-top:10px;min-height:40px;padding:0 14px;font-size:11px}
.msg.err{background:rgba(165,35,77,.22);border:1px solid rgba(239,185,201,.7)}
.msg.err b{background:var(--crimson);border-color:var(--blush)}

.rolehead{display:flex;flex-direction:column;gap:6px}
.rolehead h2{font-size:36px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--cream)}
.who{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.who strong{display:block;color:var(--cream);font-weight:500;word-break:break-all;margin-top:2px}
.roles{display:flex;flex-direction:column;gap:12px}
.role{display:flex;align-items:center;gap:16px;width:100%;min-height:84px;padding:18px 20px 18px 24px;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--hair);border-radius:16px;transition:background .2s,border-color .2s}
.role:hover,.role:focus-visible{background:var(--kelp);border-color:var(--hair-strong)}
.role .txt{flex:1}
.role .t{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--cream)}
.role .d{display:block;font-size:14px;color:var(--sage);margin-top:4px}
.role .tag{display:inline-block;margin:0 0 8px;padding:3px 8px;border:1px solid rgba(239,185,201,.6);border-radius:6px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--blush)}
.arrow{flex:none;width:32px;height:32px;border-radius:6px;background:rgba(75,129,72,.35);display:grid;place-items:center;transition:background .2s}
.role:hover .arrow,.role:focus-visible .arrow{background:rgba(75,129,72,.8)}
.arrow svg{width:14px;height:14px}

footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1200px;width:100%;margin:0 auto;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cream);margin-right:8px}
.dot.off{background:transparent;border:1px solid var(--cream)}


/* ---------- Utilidades de la pantalla de ingreso ---------- */
.view{display:flex;flex-direction:column;gap:22px}
.card .sub-actions{display:flex;flex-direction:column;align-items:center;gap:0}
.link.small{font-size:12px;color:var(--slate);min-height:40px}
.link.small:hover{color:var(--cream)}
.cta:disabled{cursor:progress}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.msg .retry[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}



/* ---------- Móvil: menos texto y menos altura para evitar scroll ---------- */
@media (max-width:959px){
  .wide-only,.card-head{display:none}
  body{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .shell{gap:8px;padding:4px 0 8px}
  #orb{width:clamp(240px,74vw,320px);margin:0}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
  .card{padding:20px 18px;gap:14px}
  .field{gap:6px}
  input[type=email],input[type=password],input[type=text]{min-height:50px}
  .toggle{height:50px}
  .cta{min-height:52px}
  .remember{min-height:36px}
  .link.small{min-height:36px}
  footer{font-size:9px}
}
@media (max-width:959px) and (max-height:700px){
  #orb{width:clamp(200px,60vw,260px)}
  .card{padding:16px;gap:10px}
}