/* Paleta oscura del Hub (login.html / interfaz.html): el aviso se ve como parte
   de la misma app. El Hub arranca en oscuro por omisión y este dominio no puede
   leer la preferencia de tema guardada en www, así que no hay tema claro. */
:root{color-scheme:dark;--bg:#000;--card:#131316;--card2:#1d1d20;--line:#303034;
  --txt:#fff;--dim:#9b9ba1;--mute:#66676d;--error:#dc8a82;--ambar:#e2b15b;--ok:#7fc8a0;
  --acc:#fff;--accTxt:#000;--foco:#73747a;--velo:rgba(0,0,0,.74)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--txt);
  font-family:'GBMSans','Helvetica Neue',Helvetica,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}

.barra{display:flex;justify-content:flex-end;padding:22px 28px}
.btnAdmin{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:transparent;color:var(--dim);border-radius:999px;padding:9px 15px 9px 13px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.btnAdmin:hover{border-color:var(--dim);color:var(--txt)}
.btnAdmin:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.btnAdmin svg{width:14px;height:14px;flex:none}
.btnAdmin .corto{display:none}

main{flex:1;display:grid;align-content:center;row-gap:clamp(30px,5vh,44px);
  padding:24px clamp(22px,7vw,96px) 40px;max-width:1100px}
.texto{display:flex;flex-direction:column}
/* Con espacio, la obra va a la derecha del texto (antes de 1120 px el
   titular quedaría en una columna demasiado angosta). */
@media(min-width:1120px){
  main{grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;
    column-gap:clamp(36px,5vw,72px);max-width:1320px}
  main .obra{justify-self:end;max-width:500px}
}
/* El logo viene en negro con alfa: invertido queda blanco sobre negro. */
.gbm{height:clamp(44px,7vw,74px);aspect-ratio:294/81;margin-bottom:clamp(28px,5vh,48px);
  background:url(/gbm-logo.png) no-repeat left center/contain;filter:invert(1)}
h1{font-size:clamp(34px,6vw,68px);line-height:1.02;letter-spacing:-.04em;font-weight:700}
h1 span{display:block;color:var(--mute)}
main .sub{font-size:clamp(14px,1.4vw,16px);line-height:1.6;color:var(--dim);max-width:520px;margin-top:22px}
.chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:30px;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 10px;font-size:10.5px;
  font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.punto{width:7px;height:7px;border-radius:50%;background:var(--ambar);animation:latido 2.4s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(226,177,91,.55)}70%,100%{box-shadow:0 0 0 7px rgba(226,177,91,0)}}
.pie{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);
  margin:0 28px;padding:16px 0 22px;color:var(--mute);font-size:10.5px;letter-spacing:.3px}

/* Panel de acceso: mismo patrón que el aviso de inactividad del Hub. El
   centrado va con margin:auto sobre la tarjeta para que, si es más alta que la
   ventana, el velo pueda scrollear en vez de dejar la mitad fuera de alcance. */
.velo{position:fixed;inset:0;z-index:10;display:flex;padding:22px;overflow-y:auto;
  overscroll-behavior:contain;background:var(--velo);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.panel{width:min(100%,410px);margin:auto;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:32px 30px 24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.45);
  display:flex;flex-direction:column}
.candado{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card2);
  display:grid;place-items:center;margin:0 auto 16px;color:var(--txt)}
.candado.abierto{color:var(--ok)}
.candado svg{width:18px;height:18px}
.panel h2{font-size:19px;letter-spacing:-.4px;margin-bottom:7px}
.panel .sub{font-size:12.5px;line-height:1.55;color:var(--dim);margin-bottom:22px}
label{display:block;text-align:left;text-transform:uppercase;color:var(--dim);
  font-size:10px;font-weight:700;letter-spacing:.9px;margin-bottom:7px}
.campo{position:relative}
label.sigue{margin-top:14px}
input{width:100%;padding:13px 42px 13px 14px;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;color:var(--txt);font:inherit;font-size:14px}
input:focus{outline:2px solid var(--foco);outline-offset:1px}
input:disabled{opacity:.5}
.conError input{border-color:var(--error)}
.ojo{position:absolute;right:8px;top:50%;translate:0 -50%;border:0;background:none;
  color:var(--dim);padding:7px;cursor:pointer;font-size:15px}
.entrar{display:block;width:100%;border:0;border-radius:999px;background:var(--acc);color:var(--accTxt);
  padding:13px;font:inherit;font-size:14px;font-weight:700;margin-top:16px;cursor:pointer;
  text-decoration:none;text-align:center}
.entrar:disabled{opacity:.4;cursor:default}
.entrar:focus-visible,.cancelar:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--accTxt);
  border-top-color:transparent;border-radius:50%;animation:giro .75s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes giro{to{rotate:360deg}}
.estado{min-height:19px;margin-top:12px;font-size:12.5px;color:var(--error);font-weight:600}
.cancelar{align-self:center;border:0;background:none;color:var(--dim);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;padding:6px 10px}
.cancelar:hover{color:var(--txt)}
.pieNota{border-top:1px solid var(--line);margin-top:14px;padding-top:14px;color:var(--mute);
  font-size:10.5px;line-height:1.55}

@media(max-width:560px){
  .barra{padding:16px 18px}
  .btnAdmin .largo{display:none}
  .btnAdmin .corto{display:inline}
  .pie{margin:0 18px;flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){.punto,.spin{animation:none}}