/* Portal del productor · lo común y las páginas de entrada · AURA-OS
   ==================================================================
   Lo que comparten «entrar», «cambiar la clave» y la cuenta del productor, y las dos primeras páginas. Los
   cimientos (paleta, tipografía, botones) están en base.css y el vocabulario de movimiento (duraciones,
   curva, sombras, radios) en motion.css; la vista enlaza las dos antes. El tablero de la cuenta está en
   portal-cuenta.css (la vista de la cuenta carga las dos hojas; las páginas de entrar, solo esta).

   2026-10-09 · «suave, sobria, viva» (barra de vidrio, pestañas con subrayado que se desliza, tarjetas que
   aparecen, esqueletos de carga), sin cambiar ni un dato ni un texto clínico. Las reglas de esta hoja:
   · Nada de letra bajo 12 px (.75rem) y nada que se toque con menos de 44 px.
   · El color de la marca para TEXTO es --m-tx (la marca clara sobre fondo oscuro): la marca de un cliente
     puede ser oscura y el texto de un enlace no se leería.
*/
/* ---------- La página de entrar ---------- */
/*
   ⚠️ TODO lo de este bloque va prefijado con `.entrar`, y lo de la cuenta con
   `.cuenta`. No es estilo: es lo que impide que una página le pegue a la otra.

   Hasta el 2026-09-22 estas reglas eran genéricas —`body`, `form`, `.caja`— y
   esta hoja la cargaban LAS DOS páginas (desde el 2026-10-10 cada una carga la
   suya, y los prefijos se mantienen por si alguien las junta de nuevo).
   `.caja` estaba definida dos veces (la
   tarjeta de login acá, la caja de una tabla en la cuenta) con la misma
   especificidad, así que las propiedades se SUMAN en vez de pisarse: la caja
   de la tabla heredaba `max-width:400px` y `display:flex` de la tarjeta de
   entrar. Medido en el navegador: la tabla «Vaca por vaca» mide 1.042 px
   dentro de una caja de 400 y se salía por 642. Y `place-items:center` sobre
   `body` centraba verticalmente una página más alta que la pantalla.

   Es el riesgo NUEVO de haber separado los lenguajes (2026-09-20): antes cada
   página llevaba su CSS adentro y no podían chocar. Una hoja compartida
   necesita que cada página se quede dentro de su prefijo.
*/

/* El vocabulario de esta hoja. Los valores de reserva son los de motion.css: si esa
   hoja no cargara, la página se ve igual. */
body.entrar,body.cuenta{
  --r-1:var(--radio-1,6px);--r-2:var(--radio-2,10px);--r-3:var(--radio-3,16px);
  --sb-1:var(--sombra-1,0 1px 2px rgba(14,27,36,.08));
  --sb-2:var(--sombra-2,0 4px 14px rgba(14,27,36,.12));
  --sb-3:var(--sombra-3,0 16px 38px rgba(14,27,36,.2));
  /* El color de la marca para TEXTO. Sobre fondo claro es la marca; sobre fondo
     oscuro, su versión clara (la marca de un cliente puede ser oscura: 2,8:1 sobre
     el fondo oscuro no se lee). Mismas dos puertas que base.css. */
  --m-tx:var(--marca);
  /* Las tres duraciones y la curva de motion.css, con su valor de reserva. */
  --ux-rapido:var(--mov-rapido,160ms);--ux-medio:var(--mov-medio,220ms);--ux-lento:var(--mov-lento,380ms);
  --ux-ease:var(--mov-ease,cubic-bezier(.2,.7,.2,1));
  /* El empujón del imán (motion.js lo pone en el botón que lleva data-magnetico; sin él, 0). */
  --mx:0px;--my:0px;
  /* El gris de los textos chicos: algo más oscuro que --tinta-3 sobre fondo claro
     (3,6:1 no alcanza para letra de 12 px) y algo más claro sobre fondo oscuro. */
  --t3:color-mix(in srgb,var(--tinta-3) 66%,var(--tinta));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.entrar,
  :root:not([data-theme="light"]) body.cuenta{--m-tx:var(--marca-2,var(--marca))}}
:root[data-theme="dark"] body.entrar,:root[data-theme="dark"] body.cuenta{--m-tx:var(--marca-2,var(--marca))}

/* Lo que se lee con un lector de pantalla y no se ve. */
.entrar .sr-solo,.cuenta .sr-solo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

body.entrar{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px;
  background:radial-gradient(760px 460px at 50% -140px,color-mix(in srgb,var(--marca) 16%,transparent),transparent 72%),var(--papel)}
.entrar .caja{width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px}
.entrar .marca{display:flex;flex-direction:column;gap:4px}
.entrar .marca b{font-family:var(--f-tit);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.entrar .marca span{font-family:var(--f-num);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3)}
.entrar form{display:flex;flex-direction:column;gap:16px;background:var(--sup);
  border:1px solid var(--linea);border-radius:var(--r-3);padding:28px 26px 26px;box-shadow:var(--sb-2)}
.entrar h1,.entrar h2{font-size:1.25rem;letter-spacing:-.02em}
.entrar .campo-fila{display:flex;flex-direction:column;gap:7px}
.entrar label{font-size:.9rem;font-weight:600}
.entrar label small{font-weight:400;color:var(--t3);font-size:.8125rem}
.entrar .campo{position:relative}
.entrar input{width:100%;font:inherit;min-height:48px;padding:0 14px;border:1px solid var(--linea);
  border-radius:calc(var(--r-1) + 2px);background:var(--papel);color:var(--tinta);
  transition:border-color var(--mov-rapido,160ms) ease,box-shadow var(--mov-rapido,160ms) ease}
/* El foco se ve de verdad: borde de la marca y un halo suave (y un contorno
   transparente, que es lo que el modo de alto contraste de Windows pinta). */
.entrar input:focus{border-color:var(--marca);outline:2px solid transparent;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 26%,transparent)}
.entrar .campo input{padding-right:96px}
/* Edge pinta SU propio ojo (y una «x») dentro de un campo de clave: con el botón «Mostrar» de
   la página quedaban dos controles para lo mismo, uno encima del otro. Se queda el nuestro, que
   también funciona en el teléfono y se lee como botón. */
.entrar input::-ms-reveal,.entrar input::-ms-clear{display:none}
/* «Mostrar» la clave: dentro del campo, a la derecha, con su toque de 44 px. */
.entrar .ver-clave{position:absolute;right:3px;top:50%;transform:translateY(-50%);min-height:44px;
  min-width:44px;padding:0 14px;border:0;border-radius:var(--r-1);background:none;color:var(--m-tx);
  font-weight:600;font-size:.875rem;cursor:pointer}
.entrar .btn{width:100%;min-height:48px;margin-top:4px;border-radius:calc(var(--r-1) + 2px);
  font-size:1rem;box-shadow:var(--sb-1)}
.entrar .btn:disabled{cursor:progress}
.entrar .error{background:color-mix(in srgb,var(--grave) 10%,transparent);
  border-left:3px solid var(--grave);padding:10px 13px;font-size:.9rem;border-radius:0 var(--r-1) var(--r-1) 0}
.entrar .pie{font-size:.875rem;color:var(--t3);text-align:center}
.entrar .pie a{color:var(--m-tx);display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){
  .entrar input:hover:not(:focus){border-color:var(--tinta-3)}
  .entrar .ver-clave:hover{background:var(--sup-2)}
}
/* La guarda de `hidden` (L17): cualquier `display` del autor le gana al atributo. */
.entrar [hidden]{display:none!important}