/*
 * The console front-end, styled from `Consola.dc.html`.
 *
 * The design ships as inline styles on every element because that is what a design tool emits.
 * They are lifted into classes here for one reason that matters and one that is merely tidy:
 * the design's hover states live in a `style-hover` attribute its own runtime interprets, which
 * no browser does, so they would silently not exist; and a stylesheet is cacheable where a
 * hundred kilobytes of repeated inline declarations are not.
 *
 * The palette is the design's, transcribed literally. Every hex below appears in
 * `Consola.dc.html`; none was invented, adjusted or "improved".
 */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f5f5f1;
  --surface-3: #fafaf8;
  --ink: #17161b;
  --ink-2: #4a5666;
  --muted: #7b8492;
  --muted-2: #a6adb8;
  --line: #edede8;
  --line-2: #e4e2da;
  --divider: #f1f0eb;

  /*
   * El morado del diseno tiene TRES tonos y cada uno hace un trabajo distinto. Mezclarlos fue
   * la tentacion al transcribirlo y habria borrado la jerarquia: `--brand-deep` es la marca y
   * el fondo de PRODUCCION, `--brand` es la accion, `--brand-ink` es el texto sobre el tinte.
   */
  --brand-deep: #1b1147;
  --brand: #4a3e86;
  --brand-hover: #3a3070;
  --brand-ink: #2e1d6e;
  --brand-mute: #8e86b8;
  --brand-soft: #edeaf7;
  --brand-line: #dcd5f0;
  --brand-on-deep: #b8afe0;

  /*
   * El durazno rayado es el motivo de marca: la franja de 5px que corona la ventana y el fondo
   * de la tarjeta de BETA. Que BETA sea calido y PRODUCCION sea oscuro no es decoracion --
   * quien mira de reojo tiene que notar el momento en que deja de ser un ensayo.
   */
  --stripe-a: #f0c9a3;
  --stripe-b: #f8dfc5;
  --beta-line: #f0dcc4;
  --beta-ink: #6e4a21;
  --beta-ink-2: #8a6538;

  --ok-bg: #e9f0e8;
  --ok-fg: #4a6b45;
  --bad-bg: #f7e8ec;
  --bad-fg: #8a4257;
  --warn-bg: #fdebdd;
  --warn-fg: #8a5423;
  --warn-line: #f0d9be;
  --warn-surface: #fff8f0;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;

  --radius-card: 18px;
  --radius-ctl: 11px;
  --shadow-card: 0 1px 3px rgba(23, 22, 27, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-hover);
}
button {
  font-family: inherit;
}
::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

.mono {
  font-family: var(--mono);
}
.hidden {
  display: none !important;
}
.spacer {
  flex: 1;
}

/* Screen-reader-only: the design has icon-only controls whose meaning is carried by the icon
   alone. An icon is not an accessible name, so each carries one of these. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: 15px;
  height: 15px;
}
.icon-xs {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------------------------------- */
/* Shell                                                                                      */
/* ---------------------------------------------------------------------------------------- */

.shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.aside {
  width: 262px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s ease;
}
.shell.mini .aside {
  width: 78px;
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 18px;
}
.shell.mini .logo-row {
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 14px;
}
.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.logo-word {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.shell.mini .lbl {
  display: none;
}
.shell.mini .logo-row .spacer {
  display: none;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--surface-2);
}
.toggle-icon {
  display: flex;
  transition: transform 0.22s ease;
}
.shell.mini .toggle-icon {
  transform: rotate(180deg);
}

.search-pad {
  padding: 0 16px 16px;
}
.shell.mini .search-pad {
  padding: 0 14px 16px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-ctl);
  background: var(--surface-2);
  border: none;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  color: var(--muted-2);
  font-size: 14px;
  text-align: left;
}
.shell.mini .search-box {
  justify-content: center;
  gap: 0;
  padding: 0;
}

.nav-group {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sec-lbl {
  padding: 22px 24px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--muted-2);
}
.shell.mini .sec-lbl {
  height: 1px;
  min-height: 1px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 16px 18px 12px;
  padding: 0;
  background: var(--line);
  font-size: 0;
  overflow: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-ctl);
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nav-item:hover {
  background: var(--surface-3);
}
.nav-item[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.shell.mini .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0;
}

.badge-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warn-bg);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--warn-fg);
}
.badge-soon {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.shell.mini .badge-count,
.shell.mini .badge-soon {
  display: none;
}

.aside-foot {
  padding: 16px 12px 0;
  border-top: 1px solid var(--line);
  margin: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-pad {
  padding: 12px;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.user-row:hover {
  background: #f9f9f6;
}
.shell.mini .user-row {
  justify-content: center;
  gap: 0;
  padding: 9px;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar.grey {
  background: var(--surface-2);
  color: var(--muted);
}
.user-name {
  font-size: 13.5px;
  font-weight: 600;
}
.user-sub {
  font-size: 11.5px;
  color: var(--muted-2);
}
.user-chev {
  margin-left: auto;
  color: var(--muted-2);
  display: flex;
}
.shell.mini .user-chev {
  display: none;
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(247, 247, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.company-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-ctl);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
}
.company-pick:hover {
  border-color: #d8d6ce;
}
.company-ruc {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
}
.env-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.env-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7822f;
  display: block;
}
.env-pill.prod {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.env-pill.prod .env-dot {
  background: var(--ok-fg);
}
.topbar-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.view {
  padding: 28px 32px 48px;
}
.view.narrow {
  max-width: 1080px;
}
.view.narrower {
  max-width: 860px;
}

h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.view-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.view-sub {
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------------------- */
/* Cards, tables, chips                                                                       */
/* ---------------------------------------------------------------------------------------- */

.card {
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.card-pad {
  padding: 22px 24px 24px;
}
.card-scroll {
  overflow: hidden;
  overflow-x: auto;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.kpi {
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.kpi.attention {
  border: 1px solid var(--warn-line);
}
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-label {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.kpi-value {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.thead,
.trow {
  display: grid;
  gap: 16px;
  align-items: center;
}
.thead {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.trow {
  padding: 16px 22px;
  border-bottom: 1px solid var(--divider);
  font-size: 13.5px;
}
.trow:last-child {
  border-bottom: none;
}
.trow.revoked {
  opacity: 0.6;
}

.pill {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 999px;
  justify-self: start;
  white-space: nowrap;
}
.pill.ok {
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.pill.bad {
  background: var(--bad-bg);
  color: var(--bad-fg);
}
.pill.warn {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.pill.neutral {
  background: var(--surface-2);
  color: var(--ink-2);
}
.pill.brand {
  background: var(--brand-soft);
  color: var(--brand);
}

.scope-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
}
.scope-tag.sharp {
  background: var(--brand-soft);
  color: var(--brand);
}
.scope-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}
.scope-chip {
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.scope-chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

/* ---------------------------------------------------------------------------------------- */
/* Buttons                                                                                    */
/* ---------------------------------------------------------------------------------------- */

.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-ctl);
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}
.btn.primary {
  border: none;
  background: var(--brand);
  color: #fff;
}
.btn.primary:hover:not(:disabled) {
  background: var(--brand-hover);
  color: #fff;
}
.btn.danger {
  border: none;
  background: var(--bad-fg);
  color: #fff;
}
.btn.danger:hover:not(:disabled) {
  background: #733746;
  color: #fff;
}
.btn.sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 9px;
}
.btn.md {
  height: 36px;
  padding: 0 15px;
  font-size: 13.5px;
  border-radius: 10px;
}
.btn.revoke {
  justify-self: end;
  color: var(--bad-fg);
}
.btn.revoke:hover:not(:disabled) {
  border-color: #c98fa0;
  background: #fdf6f7;
  color: var(--bad-fg);
}
.btn:disabled {
  cursor: not-allowed;
  background: #edece6;
  color: var(--muted-2);
  border-color: transparent;
}
.btn.primary:disabled {
  background: #edece6;
  color: var(--muted-2);
}

label.field {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 7px;
}
.input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-ctl);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
.input.mono {
  font-family: var(--mono);
  font-size: 13.5px;
}
.input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}
.hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------------------- */
/* Notices                                                                                    */
/* ---------------------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.notice.brand {
  background: var(--brand-soft);
  color: var(--brand);
}
.notice.warn {
  background: var(--warn-surface);
  border: 1px solid var(--warn-line);
  color: var(--ink-2);
}
.notice.ok {
  background: #f2f7f1;
  border: 1px solid #cfe0cb;
  color: #3f5c39;
}
.notice.bad {
  background: #fdf6f7;
  border: 1px solid #f0d9de;
  color: var(--bad-fg);
}
.notice strong {
  font-weight: 600;
}

.empty {
  padding: 44px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--divider);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
}

pre.raw {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: #e6e3ee;
  overflow-x: auto;
}
.raw-wrap {
  border-radius: 12px;
  background: #1b1a20;
  overflow: hidden;
}
.raw-key {
  color: #c4b5fd;
}
.raw-str {
  color: #9fd8b4;
}

/* ---------------------------------------------------------------------------------------- */
/* Activity                                                                                   */
/* ---------------------------------------------------------------------------------------- */

.act-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  align-items: start;
}
.act-row {
  display: grid;
  grid-template-columns: 86px 132px 52px minmax(0, 1fr);
  gap: 14px;
  min-width: 600px;
  align-items: center;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-bottom: 1px solid var(--divider);
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  color: inherit;
}
.act-row:hover {
  background: var(--surface-3);
}
.act-row[aria-selected="true"] {
  border-left-color: var(--brand);
  background: #f5f3fb;
}
.act-head {
  display: grid;
  grid-template-columns: 86px 132px 52px minmax(0, 1fr);
  gap: 14px;
  min-width: 600px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
}
.kv > span:first-child {
  color: var(--muted);
}
.kv > span:last-child {
  font-family: var(--mono);
  font-size: 12.5px;
  word-break: break-all;
}

.artifact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 12.5px;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.artifact-row:hover {
  background: var(--brand-soft);
}
.artifact-row:disabled {
  cursor: not-allowed;
  color: var(--muted-2);
}

/* ---------------------------------------------------------------------------------------- */
/* Modal                                                                                      */
/* ---------------------------------------------------------------------------------------- */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(23, 22, 27, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.modal {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(23, 22, 27, 0.4);
  overflow: hidden;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-head {
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 5px;
}
.modal-body {
  padding: 24px 26px;
}
.modal-foot {
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface-3);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.token-strip {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-3);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13.5px;
  overflow-x: auto;
  white-space: nowrap;
}
.checkline {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: inherit;
}
.checkline:hover {
  border-color: var(--brand);
}
.checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d3c9;
  background: #fff;
  color: #fff;
}
.checkline[aria-checked="true"] .checkbox {
  border-color: var(--brand);
  background: var(--brand);
}

/* ---------------------------------------------------------------------------------------- */
/* Sign-in                                                                                    */
/* ---------------------------------------------------------------------------------------- */

.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg);
}
.gate-card {
  width: 100%;
  max-width: 430px;
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
}
.gate-panel {
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.gate-panel h2 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.gate-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.stack {
  display: grid;
  gap: 16px;
}

/* ==========================================================================================
   KEYBOARD FOCUS
   ==========================================================================================

   `.input:focus` was the ONLY focus style in this file. Every other control on the console --
   the sidebar navigation, the filter chips, the scope pickers, the revoke buttons, the clickable
   comprobante rows, the modal's own buttons -- reset or inherited a `background: none` button
   style and drew nothing, so tabbing through the alta or the certificate form moved an invisible
   caret. That is not a cosmetic gap: the certificate form asks for four secrets, and typing the
   Clave SOL into the wrong field because you could not see where you were is a real way to be
   refused with no idea why.

   `:focus-visible` and not `:focus`, so a mouse click on a button does not draw a ring the mouse
   user did not ask for; a keyboard tab to the same button does. The colour is the design's brand
   violet, unchanged, and the offset keeps the ring outside rounded corners rather than clipped by
   them. Nothing here changes a hover state or a resting colour.

   The rule is broad on purpose: an allow-list of selectors is a list that the next control gets
   left off. `:focus-visible` on everything focusable, with the input keeping its inset variant
   because a ring outside a field inside a card reads as the card being selected. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.input:focus-visible {
  outline-offset: -1px;
}

/* ==========================================================================================
   LOADING
   ==========================================================================================

   The bars `skeletonRows` and `skeletonBlock` draw. They exist because a table that had not
   answered yet and a table that is genuinely empty rendered identically -- see the comment on
   `state.data` in `app.js` -- so the console asserted "Ninguna credencial todavía" before the
   server had said anything.

   The animation is suppressed under `prefers-reduced-motion`: the bars still say "not yet",
   because their SHAPE is the message and the shimmer is only decoration. A loading indicator that
   vanishes for somebody who asked for less motion would take the information away with it. */
.skel {
  display: block;
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 240% 100%;
  animation: skel-sweep 1.4s ease-in-out infinite;
}
.trow.skeleton {
  align-items: center;
}
@keyframes skel-sweep {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background: var(--surface-2);
  }
}

/* The enrolment QR. Bordered and on white regardless of the surface behind it, because a QR
   scanner needs the quiet zone to be light -- the PNG carries its own margin, and this makes sure
   nothing tints it. `image-rendering: pixelated` keeps the modules square if the browser scales
   the image; a smoothed QR is a QR that a phone camera has to work harder to read. */
.qr {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  image-rendering: pixelated;
}

@media (max-width: 720px) {
  .aside {
    display: none;
  }
  .view,
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================================================================ */
/* Lo que anade el diseno nuevo                                                                  */
/* ============================================================================================ */

/*
 * La franja rayada que corona la ventana. Cinco pixeles y ninguna funcion salvo que la consola
 * se reconozca de un vistazo.
 */
.stripe-bar {
  height: 5px;
  flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 7px, var(--stripe-b) 7px 14px);
}

/*
 * La tarjeta de entorno, al pie de la barra lateral.
 *
 * Reemplaza a una pildora de una linea, y el cambio es de fondo: el entorno de una empresa
 * decide contra que SUNAT se emite y merece ocupar sitio. BETA lleva el rayado calido y dice
 * que nada entra al registro de ventas; PRODUCCION es morado solido y dice lo contrario. El
 * texto es distinto en cada uno a proposito -- un color que cambia sin que cambie la frase se
 * lee como un adorno.
 */
.env-card {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 12px;
}
.env-card .env-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.env-card .env-name {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.env-card .env-note {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}
.env-card.beta {
  background: repeating-linear-gradient(135deg, #fbf1e6 0 8px, #fdf7f1 8px 16px);
  border: 1px solid var(--beta-line);
}
.env-card.beta .env-eyebrow,
.env-card.beta .env-name {
  color: var(--beta-ink);
}
.env-card.beta .env-note {
  color: var(--beta-ink-2);
}
.env-card.prod {
  background: var(--brand-deep);
}
.env-card.prod .env-eyebrow,
.env-card.prod .env-note {
  color: var(--brand-on-deep);
}
.env-card.prod .env-name {
  color: #ffffff;
}
.shell.mini .env-card {
  display: none;
}

/*
 * Los siete tonos de estado del diseno, y el mapa a los estados REALES de
 * `packages/domain/src/document-state.ts`. No son siete colores bonitos: son siete cosas
 * distintas que le pueden pasar a un comprobante.
 *
 * `.amb` lleva borde de 1.5px y el morado de la marca porque AMBIGUOUS no es un fallo mas --
 * significa que no se puede establecer si el envio ocurrio, nunca se reenvia, y quien lo vea
 * tiene que distinguirlo de un rechazo sin leer la etiqueta. `.retry` lleva borde DISCONTINUO
 * por lo mismo: dice "esto sigue en movimiento" sin depender de que se lea la palabra.
 */
.chip-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chip-state.proc {
  background: #eef0f2;
  color: #4a5666;
  border: 1px solid #e0e4e8;
}
.chip-state.ok {
  background: #e6efe4;
  color: #3f5c39;
  border: 1px solid #cfe0cb;
}
.chip-state.obs {
  background: #f6ead6;
  color: #6e5320;
  border: 1px solid #e8d3ae;
}
.chip-state.rej {
  background: #f6e3e0;
  color: #7a2f27;
  border: 1px solid #e8c9c4;
}
.chip-state.retry {
  background: #fbf0de;
  color: #6e4a21;
  border: 1px dashed #d9a96f;
}
.chip-state.amb {
  background: #edeaf7;
  color: var(--brand-ink);
  border: 1.5px solid var(--brand);
}
.chip-state.done {
  background: #f1f1eb;
  color: #8e8e84;
  border: 1px solid #e4e4dc;
}

/* ============================================================================================ */
/* Puesta en marcha: el raíl de seis pasos                                                       */
/* ============================================================================================ */

/*
 * El diseño le da al onboarding su propio marco, y tiene razón: quien lo recorre no tiene
 * todavía ninguna de las cosas que la barra lateral de la consola enumera -- ni empresa, ni
 * credenciales, ni certificado -- de modo que enseñarle esa barra es enseñarle nueve puertas
 * cerradas. El raíl dice en cambio cuántos pasos quedan.
 *
 * Seis pasos y siete pantallas: el token de la credencial aparece DESPUÉS de acuñarla y no es un
 * paso propio, porque no hay nada que decidir en él. Es una consecuencia que hay que leer.
 */
.onb {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}
.onb-rail {
  width: 288px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
}
.onb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 22px;
}
.onb-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--brand-deep);
}
.onb-word {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.onb-steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.onb-step {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.onb-step:disabled {
  cursor: default;
}
.onb-step.cur {
  background: var(--brand-soft);
}
.onb-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  background: #f1f1eb;
  color: var(--muted-2);
}
.onb-step.cur .onb-num {
  background: var(--brand-deep);
  color: #ffffff;
}
.onb-step.done .onb-num {
  background: #ddd8ee;
  color: var(--brand);
}
.onb-lbl {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-2);
}
.onb-step.cur .onb-lbl {
  font-weight: 600;
  color: var(--brand-ink);
}
.onb-step.done .onb-lbl {
  color: var(--ink-2);
}
.onb-rail-foot {
  margin-top: auto;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--surface-3);
}
.onb-pane {
  flex: 1;
  min-width: 0;
  padding: 46px 52px;
  display: flex;
  flex-direction: column;
}
.onb-title {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.onb-sub {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56em;
}
.onb-body {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 46em;
}
/*
 * Las acciones van DEBAJO del contenido, no al fondo de la ventana.
 *
 * El diseño las ancla abajo porque su marco mide 720px y ahí queda equilibrado. Un navegador
 * real es más alto, y `margin-top: auto` dejaba el botón a media pantalla del texto que explica
 * lo que hace. La barra lateral sí conserva su anclaje: la tarjeta de sesión es una nota al pie,
 * no el siguiente paso.
 */
.onb-foot {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .onb {
    flex-direction: column;
  }
  .onb-rail {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .onb-pane {
    padding: 30px 22px;
  }
}

/*
 * La marca del diseño nuevo: un cuadrado del morado profundo y la palabra al lado.
 *
 * Sustituye al par `.logo-mark`/`.logo-word`, que dibujaba una «f» dentro del cuadrado y decía
 * «fact360». Las dos cosas eran de otra época: el diseño no lleva letra dentro, y el producto se
 * llama fac-360 en la documentación, en el dominio y en el propio lienzo del que sale esto.
 */
.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--brand-deep);
  flex-shrink: 0;
}
.brand-word {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
  white-space: nowrap;
}

/*
 * Los formularios de la guía van en columna estrecha, no a lo ancho del panel.
 *
 * Un campo de correo de mil píxeles no ayuda a escribir un correo: solo separa la etiqueta de su
 * contenido. El panel es ancho para que quepa la explicación; el formulario no lo necesita.
 */
.onb-body .stack {
  max-width: 420px;
}

/* La puerta, en el vocabulario nuevo: título grande y tarjeta con borde en vez de sombra sola. */
.gate-panel {
  border: 1px solid var(--line);
}
.gate-panel h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
}

/* Quién está entrando, en el segundo paso: la cuenta ya se eligió y conviene verla. */
.gate-who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}