/* Accesos separados de compañía y plataforma. */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.login-shell { min-height: 100dvh; display: grid; }
.context {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-lg) clamp(var(--space-md), 5vw, var(--space-3xl));
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; }
.wordmark:active { opacity: 0.75; }
.wordmark-mark { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-public-accent); color: var(--color-public-accent-ink); font-family: var(--font-display); }
.control-login .wordmark-mark { background: var(--color-accent); color: var(--color-paper); }
.context-copy { display: none; }
.context h1 { min-width: 0; max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 400; line-height: 0.98; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.context p { max-width: 50ch; margin: var(--space-md) 0 0; color: var(--color-rule); }
.context-note { margin-block-start: auto; color: var(--color-rule); font-size: var(--text-sm); }

.access { padding: clamp(var(--space-xl), 8vw, var(--space-3xl)) clamp(var(--space-md), 6vw, var(--space-3xl)); display: grid; align-content: center; }
.access-inner { width: min(100%, 28rem); margin-inline: auto; }
.access h2 { min-width: 0; margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.access-intro { margin: var(--space-sm) 0 var(--space-lg); color: var(--color-muted); }

.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); font-weight: 750; }
.field-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  outline: 2px solid transparent;
  outline-offset: 1px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.field-input::placeholder { color: var(--color-muted); }
.field-input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-soft); }
.field-input[aria-invalid="true"] { border-color: var(--color-error); }
.field-input:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .field-input:hover { background: var(--color-paper-strong); } }
.field-hint { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.password-wrap { position: relative; }
.password-wrap .field-input { padding-inline-end: 4.75rem; }
.password-toggle { position: absolute; inset-inline-end: 0; inset-block: 0; min-height: 2.75rem; padding-inline: var(--space-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.password-toggle:active { transform: translateY(1px); }
.password-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .password-toggle:hover { color: var(--color-ink); } }

.submit-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.control-login .submit-button { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.submit-button:active { transform: translateY(1px); }
.submit-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.submit-button[data-state="loading"] { cursor: wait; }
.submit-button[data-state="loading"]::before { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-round); animation: spin 700ms linear infinite; }
.submit-button[data-state="error"] { background: var(--color-error); color: var(--color-paper); border-color: var(--color-error); }
.submit-button[data-state="success"]::before { content: "✓"; }
@media (hover: hover) and (pointer: fine) { .submit-button:hover { background: var(--color-ink-soft); } }
.form-error { min-height: 1.5rem; color: var(--color-error); font-size: var(--text-sm); }
.back-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block-start: var(--space-lg); color: var(--color-muted); font-weight: 700; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-2xs); white-space: nowrap; }
.back-link:active { color: var(--color-ink); }

@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 52rem) {
  .login-shell { grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr); }
  .context { min-height: 100dvh; padding-block: var(--space-xl); }
  .context-copy { display: block; margin-block: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}