/* entrada.css — la PANTALLA DE ENTRADA de GN Facturas (0.12.42): ingreso, recuperar, contraseña nueva
   y rescate. Hoja PROPIA (no carga app.css: es la página pública y debe ser liviana).
   Dos mitades: a la izquierda la marca del cliente sobre SU color (las variables --c, --p1, --p2… las
   escribe el servidor en <html style>, calculadas por Lib/Entrada::paleta()); a la derecha el formulario,
   que sigue el tema claro/oscuro del sistema o el que eligió la persona (data-tema). Nada de color-mix
   (equipos viejos): todo valor de color llega ya calculado. */
[hidden]{display:none !important}
:root{
  --c:#4f46e5;--c-osc:#3932a5;--c-tx:#fff;--c-aro:rgba(79,70,229,.28);--c-som:rgba(79,70,229,.45);--c-enl:#4f46e5;--c-enlo:#9590ef;
  --p1:#141530;--p2:#262470;--p-tx:#fff;--p-tx2:rgba(255,255,255,.74);--p-chip:rgba(255,255,255,.09);--p-ln:rgba(255,255,255,.17);--p-ico:#fff;
  --logo-alto:72px;
  --fondo:#ffffff;--tinta:#1d1d1f;--tinta2:#3a3a3c;--tenue:#6e6e73;--linea:#e3e3e8;
  --campo:#f5f5f7;--campoBorde:#d2d2d7;--campoIco:#8e8e93;--enl:var(--c-enl);
  --malBg:#fdefef;--malTx:#a01218;--malLn:#f6d5d5;--bienBg:#eef8f1;--bienTx:#1d5c30;--bienLn:#cfe8d7;
}
:root[data-tema="oscuro"]{
  --fondo:#17181e;--tinta:#f2f2f5;--tinta2:#d1d1d6;--tenue:#98989f;--linea:#2b2d36;
  --campo:#1f2129;--campoBorde:#363945;--campoIco:#7c7c85;--enl:var(--c-enlo);
  --malBg:#3a1d20;--malTx:#ffb4b4;--malLn:#5a2a2e;--bienBg:#16301f;--bienTx:#a6e3b8;--bienLn:#24482f;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --fondo:#17181e;--tinta:#f2f2f5;--tinta2:#d1d1d6;--tenue:#98989f;--linea:#2b2d36;
  --campo:#1f2129;--campoBorde:#363945;--campoIco:#7c7c85;--enl:var(--c-enlo);
  --malBg:#3a1d20;--malTx:#ffb4b4;--malLn:#5a2a2e;--bienBg:#16301f;--bienTx:#a6e3b8;--bienLn:#24482f;
}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fondo);color:var(--tinta);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--enl)}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.en{display:grid;grid-template-columns:minmax(0,54fr) minmax(360px,46fr);min-height:100vh}

/* ---- la marca del cliente ---- */
.en-marca{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:clamp(36px,6vw,88px) clamp(24px,4vw,64px);color:var(--p-tx);
  background:var(--p1);background:linear-gradient(140deg,var(--p1) 0%,var(--p2) 100%)}
.en-marca::after{content:"";position:absolute;inset:auto -20% -35% auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),rgba(255,255,255,0));pointer-events:none}
.en-marca-in{position:relative;z-index:1;width:100%;max-width:560px;text-align:center}
.en-cab{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.en-logo{display:block;height:auto;max-height:var(--logo-alto);max-width:min(100%,360px);object-fit:contain}
.en-logo.placa{background:#fff;padding:10px 16px;border-radius:14px;box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.en-nombre{font-weight:800;font-size:clamp(36px,4.6vw,68px);line-height:1.02;letter-spacing:-.02em;overflow-wrap:break-word;min-width:0}
.en-eslogan{margin:clamp(30px,4.4vw,56px) 0 0;font-weight:650;font-size:clamp(16px,1.35vw,19px);line-height:1.35;overflow-wrap:break-word}
.en-linea{margin:8px 0 0;color:var(--p-tx2);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;overflow-wrap:break-word}
.en-iconos{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:flex;justify-content:center;gap:clamp(18px,2.8vw,40px);flex-wrap:wrap}
.en-iconos li{display:grid;justify-items:center;gap:11px;color:var(--p-tx2);font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.en-iconos .ch{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--p-chip);border:1px solid var(--p-ln);color:var(--p-ico)}
.en-iconos svg{width:23px;height:23px;stroke-width:1.6}

/* ---- el formulario ---- */
.en-acceso{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(56px,7vh,88px) clamp(20px,4vw,64px) 92px;background:var(--fondo)}
.en-caja{width:100%;max-width:420px}
.en-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:var(--c-tx);
  background:var(--c);background:linear-gradient(140deg,var(--c),var(--c-osc));box-shadow:0 12px 28px -10px var(--c-som)}
.en-ic svg{width:25px;height:25px;stroke-width:2}
.en-caja h1{margin:22px 0 4px;font-size:clamp(24px,2.3vw,30px);line-height:1.15;font-weight:750;letter-spacing:-.015em}
.en-sub{margin:0 0 26px;color:var(--tenue);font-size:14.5px}
.en-campo{margin:0 0 16px}
.en-campo label{display:block;margin:0 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.en-in{position:relative;display:flex;align-items:center}
.en-in>svg{position:absolute;left:14px;width:18px;height:18px;color:var(--campoIco);pointer-events:none}
.en-in input{width:100%;height:50px;padding:0 46px 0 44px;border-radius:11px;border:1px solid var(--campoBorde);
  background:var(--campo);color:var(--tinta);font:inherit;font-size:15.5px;transition:border-color .15s,box-shadow .15s}
.en-in input:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c-aro)}
/* la vista previa del módulo: cajas dibujadas, sin campos que un gestor de contraseñas pueda rellenar */
.en-falso{display:flex;align-items:center;width:100%;height:50px;padding:0 46px 0 44px;border-radius:11px;border:1px solid var(--campoBorde);background:var(--campo);color:var(--campoIco);font-size:15.5px;white-space:nowrap;overflow:hidden}
.en-campo .en-eti{display:block;margin:0 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.en-ojo{position:absolute;right:6px;width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:var(--campoIco);cursor:pointer;display:grid;place-items:center}
.en-ojo:hover,.en-ojo[aria-pressed="true"]{color:var(--tinta)}
.en-ojo svg{width:18px;height:18px}
.en-btn{width:100%;height:52px;margin-top:8px;border:0;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:15.5px;font-weight:700;color:var(--c-tx);background:var(--c);background:linear-gradient(95deg,var(--c),var(--c-osc));
  box-shadow:0 10px 24px -14px var(--c-som);text-decoration:none;transition:filter .15s,transform .05s}
.en-btn:hover{filter:brightness(1.07)}.en-btn:active{transform:translateY(1px)}
.en-btn svg{width:18px;height:18px;stroke-width:2.2}
.en-btn.sec{background:transparent;color:var(--tinta);border:1px solid var(--campoBorde);box-shadow:none}
.en-opc{display:flex;align-items:center;gap:14px;margin:clamp(30px,6vh,64px) 0 14px;color:var(--tenue);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.en-opc::before,.en-opc::after{content:"";flex:1;height:1px;background:var(--linea)}
.en-enlaces{margin:0;display:grid;justify-items:center;gap:8px;font-size:14px}
.en-enlaces a{display:inline-flex;align-items:center;gap:7px;color:var(--tinta2);text-decoration:none}
.en-enlaces a:hover{color:var(--enl);text-decoration:underline;text-underline-offset:3px}
.en-enlaces svg{width:16px;height:16px}
.en-nota{color:var(--tenue);font-size:13.5px;line-height:1.6;margin:0 0 16px}
.en-nota a{color:var(--enl)}
.en-nota code{background:var(--campo);border:1px solid var(--linea);border-radius:6px;padding:1px 6px;font-size:12.5px;color:var(--tinta)}
.en-nota ol,.en-nota ul{margin:6px 0 0 18px;padding:0}.en-nota li{margin:3px 0}
.en-nota summary{cursor:pointer;color:var(--tinta2)}
.en-error,.en-aviso{border-radius:11px;padding:11px 14px;font-size:14px;margin:0 0 18px;border:1px solid}
.en-error{background:var(--malBg);color:var(--malTx);border-color:var(--malLn)}
.en-aviso{background:var(--bienBg);color:var(--bienTx);border-color:var(--bienLn)}

/* tema (automático · claro · oscuro), discreto arriba a la derecha */
.en-tema{position:absolute;top:18px;right:18px}
.en-tema .tema{display:flex;gap:2px;margin:0;padding:3px;border:1px solid var(--linea);border-radius:999px}
.en-tema button{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tenue);cursor:pointer;display:grid;place-items:center}
.en-tema button.on{background:var(--campo);color:var(--tinta)}
.en-tema svg{width:15px;height:15px}

/* versión al centro y la firma del desarrollador en la esquina: pequeñas, pero ahí */
.en-ver{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;color:var(--tenue);font-size:11.5px;letter-spacing:.08em;opacity:.8}
.en-dev{position:absolute;right:18px;bottom:10px;margin:0;color:var(--tenue);font-size:11.5px}
.en-dev a{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;color:var(--tinta);font-weight:700;text-decoration:none}
.en-dev a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.en-dev a:hover{color:var(--enl)}
/* el escudo de GN Compu (su favicon). En oscuro, sobre una placa blanca: su contorno azul noche se pierde en el fondo */
.en-dev img{display:block;width:18px;height:18px;flex:none;border-radius:5px}
:root[data-tema="oscuro"] .en-dev img{background:#fff;padding:1px}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .en-dev img{background:#fff;padding:1px}}

/* ---- tableta y celular: la marca arriba, en franja; el formulario debajo ---- */
@media (max-width:900px){
  .en{grid-template-columns:1fr;min-height:0}
  .en-marca{padding:34px 20px 30px}
  .en-eslogan{margin-top:18px}
  .en-iconos{margin-top:24px;gap:14px 22px}
  .en-iconos .ch{width:46px;height:46px;border-radius:13px}
  .en-iconos svg{width:20px;height:20px}
  .en-iconos li{font-size:10.5px;gap:8px}
  .en-acceso{padding:34px 20px 24px;justify-content:flex-start}
  .en-opc{margin-top:28px}
  .en-tema{top:12px;right:12px}
  .en-ver,.en-dev{position:static;margin-top:26px;text-align:center}
  .en-dev{margin-top:6px;padding-bottom:4px}
}
@media (max-width:520px){
  .en-marca{padding:26px 16px 22px}
  .en-nombre{font-size:clamp(28px,9vw,40px)}
  .en-logo{max-height:min(var(--logo-alto),76px)}
  .en-iconos{display:none}
  .en-acceso{padding:28px 16px 20px}
  .en-caja h1{margin-top:16px}
}