:root{
  --tinta:#1B2B27; --papel:#F3F6F2; --hoja:#FFFFFF;
  --verde:#0E5A4F; --verde-osc:#0A453D; --verde-claro:#D6E8E2;
  --lapiz:#E3A81D; --rojo:#B3261E; --linea:#D3DBD6; --suave:#5B6B66;
  --fuente-titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --fuente:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);color:var(--tinta);line-height:1.5}

/* Papel rayado: la marca visual del login */
.pagina-login{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:
    linear-gradient(90deg,transparent 0 calc(50% - 1px),transparent 0),
    repeating-linear-gradient(to bottom,var(--papel) 0 31px,#DCE5E0 31px 32px);
}
.hoja{
  width:100%;max-width:400px;background:var(--hoja);
  border:1px solid var(--linea);border-left:8px solid var(--lapiz);border-radius:6px;
  padding:28px 24px 26px;box-shadow:0 1px 0 var(--linea);
}
.encabezado h1{font-family:var(--fuente-titulo);font-size:2rem;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em;color:var(--verde)}
.encabezado p{margin:0 0 22px;color:var(--suave)}

.campo{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
input{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);background:#fff;
  border:1.5px solid var(--linea);border-radius:6px;padding:12px 12px;min-height:48px;
}
input:focus{outline:3px solid var(--verde-claro);border-color:var(--verde)}
.con-boton{position:relative}
.con-boton input{padding-right:92px}
.con-boton button{
  position:absolute;right:6px;top:6px;bottom:6px;min-width:76px;border:0;background:transparent;
  color:var(--verde);font:inherit;font-weight:600;cursor:pointer;border-radius:4px;
}
.con-boton button:focus-visible{outline:3px solid var(--verde-claro)}

.mensaje{min-height:1.5em;margin:0 0 12px;color:var(--rojo);font-weight:500;font-size:.95rem}
.principal{
  width:100%;min-height:50px;border:0;border-radius:6px;background:var(--verde);color:#fff;
  font:inherit;font-weight:600;font-size:1.05rem;cursor:pointer;
}
.principal:hover{background:var(--verde-osc)}
.principal:focus-visible{outline:3px solid var(--lapiz);outline-offset:2px}
.principal[disabled]{opacity:.65;cursor:progress}

@media (prefers-reduced-motion:no-preference){
  .hoja{animation:entra .35s ease-out both}
  @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}