/* Estilo del instructivo: sigue la estética de Mercado Pago Developers (fondo blanco, menú
   lateral con secciones en mayúscula, tarjetas redondeadas con borde fino, azul de acción)
   para que administración sienta que es la misma pantalla que tiene abierta al lado. */

:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f5;
  --ink: rgba(0, 0, 0, .9); --muted: rgba(0, 0, 0, .55); --faint: rgba(0, 0, 0, .45);
  --border: rgba(0, 0, 0, .12); --border-strong: rgba(0, 0, 0, .25);
  --azul: #3483fa; --azul-hover: #2968c8; --azul-bg: rgba(65, 137, 230, .12);
  --marino: #2d3277;
  --pill: #ededed;
  --rojo: #f23d4f; --rojo-ink: #b3192b;
  --font-body: "Figtree", "Proxima Nova", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 16px; --radius-sm: 8px;
  --side: 280px; --head: 72px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #17181c; --surface: #1f2026; --surface-2: #272830;
  --ink: rgba(255, 255, 255, .92); --muted: rgba(255, 255, 255, .62); --faint: rgba(255, 255, 255, .48);
  --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .28);
  --azul: #5c9dff; --azul-hover: #82b4ff; --azul-bg: rgba(92, 157, 255, .16);
  --marino: #aab0ff; --pill: #2f3038; --rojo: #ff6b78; --rojo-ink: #ffb3ba; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #17181c; --surface: #1f2026; --surface-2: #272830;
  --ink: rgba(255, 255, 255, .92); --muted: rgba(255, 255, 255, .62); --faint: rgba(255, 255, 255, .48);
  --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .28);
  --azul: #5c9dff; --azul-hover: #82b4ff; --azul-bg: rgba(92, 157, 255, .16);
  --marino: #aab0ff; --pill: #2f3038; --rojo: #ff6b78; --rojo-ink: #ffb3ba; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
h1, h2 { text-wrap: balance; line-height: 1.2; margin: 0; font-weight: 600; }
h1 { font-size: clamp(1.6rem, 4.4vw, 2.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.2rem, 3.2vw, 1.45rem); }
p { margin: 0; }
a { color: var(--azul); text-decoration: none; font-weight: 600; }
a:hover { color: var(--azul-hover); }

/* Barra de arriba: amarilla con el logo, igual que la de la app de logística. Va amarilla
   también en modo oscuro: es la superficie de marca. */
.hero { position: sticky; top: 0; z-index: 10; background: #ffd257; border-bottom: 1px solid #e7b833; color: #1c1d21; }
.hero__inner { height: var(--head); display: flex; align-items: center; gap: 14px; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.brand { display: flex; align-items: center; gap: 16px; }
.brand__logo { height: 46px; width: auto; display: block; }
.brand__sep { width: 1px; height: 30px; background: rgba(0, 0, 0, .25); }
.brand__sub { font-weight: 700; font-size: 1.15rem; color: #1c1d21; }
@media (max-width: 860px) { .brand__logo { height: 38px; } }

/* Menú lateral pegado a la izquierda, a toda la altura. */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--head)); }
.side { flex: none; width: var(--side); position: sticky; top: var(--head); align-self: flex-start; height: calc(100vh - var(--head)); overflow-y: auto; border-right: 1px solid var(--border); padding: 28px 0; }
.side__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0 24px 10px; }
.side__nav { display: flex; flex-direction: column; }
.side__nav a { display: block; padding: 13px 24px; color: var(--ink); font-weight: 400; font-size: 1rem; }
.side__nav a:hover { background: var(--surface-2); color: var(--ink); }
.side__nav a.active { background: var(--azul-bg); color: var(--azul); font-weight: 600; }
/* Letra de cada etapa (A, B1, B2, C); B2 cuelga de B1, por eso va corrida. */
.side__nav a { display: flex; align-items: baseline; gap: 10px; }
.side__key { flex: none; min-width: 24px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.side__nav a.active .side__key { color: var(--azul); }
.side__nav a.side__sub { padding-left: 40px; }
.content { flex: 1 1 auto; min-width: 0; max-width: calc(860px + 2 * 64px); padding: 40px 64px 80px; }
/* Botón de menú: sólo en pantalla chica, a la izquierda del logo como en logística. */
.menu-btn { display: none; order: -1; margin-left: -8px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #1c1d21; cursor: pointer; }
.menu-btn:hover { background: rgba(0, 0, 0, .08); }
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .menu-btn { display: inline-flex; }
  /* La barra lateral queda escondida a la izquierda y entra deslizándose con el botón; la
     sombra gigante oscurece el resto de la página mientras está abierta. */
  .side { position: fixed; top: var(--head); left: 0; width: min(82vw, var(--side)); height: calc(100dvh - var(--head)); z-index: 9; background: var(--bg); transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s, box-shadow .25s ease; }
  .side.is-open { transform: none; visibility: visible; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .side__nav a { padding: 14px 20px; }
  .content { padding: 28px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
}

.intro, .top { padding-bottom: 6px; }
.sechead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
section { margin-top: 28px; }
section > h2 { margin-bottom: 6px; }
.sub { color: var(--muted); font-size: 1.1rem; margin: 6px 0 22px; }

.warn { margin-top: 22px; border: 1px solid color-mix(in srgb, var(--rojo) 45%, transparent); background: color-mix(in srgb, var(--rojo) 7%, var(--surface)); border-radius: var(--radius); padding: 16px 20px; }
.warn strong { color: var(--rojo-ink); }

/* Cada paso es una tarjeta como las de "Datos de integración". */
.steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: paso; }
.step { counter-increment: paso; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.step__num { align-self: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: var(--pill); border-radius: 999px; padding: 3px 11px; }
.step__num::before { content: "Paso " counter(paso); }
.step__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.step__body p { font-size: 1.05rem; }
.step__body strong { font-weight: 600; }
.val { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; overflow-wrap: anywhere; }
code { font-family: var(--font-mono); font-size: 0.88em; }

.shot { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); max-width: 720px; }
.shot img { display: block; width: 100%; height: auto; }
/* Recuadro rojo sobre la captura: dónde hacer clic, completar o copiar. Va en % para que
   acompañe a la imagen en cualquier ancho. */
.shot__img { position: relative; }
.marca { position: absolute; border: 4px solid #e01b1b; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); pointer-events: none; }
.shot figcaption { font-size: 0.8rem; color: var(--faint); padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface); }

/* Buscador de cajas: amarillo de marca con el botón negro, para que se lea como algo para usar y
   no se confunda con las capturas (que son blancas con borde gris). */
.tool { background: rgba(255, 210, 87, .16); border: 2px solid #ffd257; border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.tool label { font-weight: 700; }
.tool .btn { background: #1c1d21; color: #ffd257; }
.tool .btn:hover:not(:disabled) { background: #000; }
.tool .btn:disabled { background: #1c1d21; color: #ffd257; opacity: .45; }
.tool .btn--sm { height: 34px; background: #1c1d21; color: #ffd257; }
.tool input { font: inherit; font-family: var(--font-mono); font-size: 0.92rem; height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink); flex: 1 1 260px; min-width: 0; }
.tool input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.tool__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 600; background: var(--azul); color: #fff; border: 0; border-radius: 6px; height: 48px; padding: 0 22px; cursor: pointer; flex: none; transition: background-color .15s ease; }
.btn:hover:not(:disabled) { background: var(--azul-hover); }
.btn:disabled { background: var(--pill); color: var(--faint); cursor: not-allowed; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 0.88rem; background: var(--azul-bg); color: var(--azul); }
.btn--sm:hover:not(:disabled) { background: color-mix(in srgb, var(--azul) 22%, transparent); }
.res:empty { display: none; }
.res__msg { font-size: 0.95rem; color: var(--muted); }
.res__msg--error { color: var(--rojo-ink); }
.cajas { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.caja + .caja { border-top: 1px solid var(--border); }
.caja__nombre { font-weight: 600; }

/* "¿Cómo seguís?": una tarjeta con filas y chevron, como "Probar la integración ›". */
.chooser__q { font-weight: 600; font-size: 1.2rem; margin: 32px 0 12px; }
.chooser { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 720px; }
.chooser__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); padding: 20px 24px; transition: background-color .15s ease; }
.chooser__btn + .chooser__btn { border-top: 1px solid var(--border); }
.chooser__btn:hover { background: var(--surface-2); color: var(--ink); }
.chooser__btn strong { font-size: 1.05rem; font-weight: 600; }
.chooser__arrow { flex: none; font-size: 0; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; }

/* Usuario logueado, a la derecha del header (igual que en logística): iniciales, nombre, legajo
   y una flecha que despliega el menú con "Cerrar sesión". */
.user { position: relative; margin-left: auto; }
.user[hidden] { display: none; }
/* El recuadro queda siempre visible; al pasar el mouse o con el menú abierto se marca más. */
.user__btn { display: flex; align-items: center; gap: 10px; font: inherit; color: #1c1d21; background: rgba(255, 255, 255, .35); border: 1px solid rgba(0, 0, 0, .22); border-radius: 8px; padding: 5px 8px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.user__btn:hover, .user__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .4); }
.user__avatar { width: 34px; height: 34px; flex: none; border-radius: 999px; background: #1c1d21; color: #ffd257; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; }
.user__info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.user__nombre { font-weight: 700; font-size: 0.9rem; }
.user__legajo { font-size: 0.75rem; color: rgba(0, 0, 0, .65); }
.user__caret { color: rgba(0, 0, 0, .6); transition: transform .15s ease; }
.user__btn[aria-expanded="true"] .user__caret { transform: rotate(180deg); }
.user__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); padding: 6px; }
.user__menu[hidden] { display: none; }
.user__item { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 10px 12px; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.user__item:hover, .user__item:focus-visible { background: var(--azul-bg); color: var(--azul); }
@media (max-width: 600px) { .user__info { display: none; } }
/* Celular: ☰, logo, "Documentación" y el usuario tienen que entrar en una línea. */
@media (max-width: 440px) {
  .hero__inner { gap: 8px; padding-inline: max(10px, env(safe-area-inset-left, 0px)); }
  .brand { gap: 8px; }
  .brand__sep { display: none; }
  .brand__sub { font-size: 1rem; }
  .user__btn { gap: 6px; padding: 4px 6px; }
}

/* Login: una tarjeta centrada debajo de la barra amarilla. */
.login { min-height: calc(100dvh - var(--head)); display: flex; align-items: flex-start; justify-content: center; padding: clamp(32px, 10vh, 96px) 16px 48px; }
.login__card { width: 100%; max-width: 400px; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
/* Logo arriba de la tarjeta, del mismo tamaño que en el login de logística. */
.login__logo { display: flex; justify-content: center; margin: 0 0 8px; }
.login__logo img { display: block; width: auto; max-width: 82%; max-height: 118px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: 0.92rem; }
.campo input { font: inherit; height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.login__error:empty { display: none; }
.login__error { color: var(--rojo-ink); font-size: 0.95rem; }
.login .btn { width: 100%; }

.foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--faint); font-size: 0.86rem; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }