/* ============================================================
   BUREAU LEDGER — dirección estética para el wizard principal
   ============================================================
   Un manifiesto aduanero como objeto de diseño: papel envejecido,
   tinta profunda, sellos de aduana, líneas de perforación entre
   los pasos. Nada de esto toca IDs, clases funcionales ni
   estructura del DOM — solo se redefinen las custom properties
   que ya usa styles.css y se añaden reglas nuevas, puramente
   visuales, sobre selectores existentes.
   ============================================================ */

:root{
  /* -- Tipografía -- */
  --display:"Fraunces",serif;
  --sans:"Archivo","IBM Plex Sans",sans-serif;
  --mono:"Space Mono","IBM Plex Mono",monospace;

  /* -- Paleta: tinta sobre papel envejecido -- */
  --navy:#211a12;          /* tinta principal / bloques oscuros */
  --navy-2:#3a2d1c;        /* tinta secundaria (hover) */
  --ink:#2c2213;           /* texto de cuerpo */
  --muted:#8a7a60;         /* texto secundario */
  --paper:#eee1c6;         /* fondo de página (papel envejecido) */
  --white:#faf3e2;         /* superficie de tarjetas (papel claro) */
  --line:#d8c49c;          /* líneas / bordes */

  --amber:#c1440e;         /* tinta de sello — naranja aduana */
  --amber-pale:#f5ddc4;
  --red:#9a2b1f;
  --red-pale:#f0dcd2;
  --green:#3f5b3a;
  --green-pale:#dfe6d3;
  --blue-pale:#e9dcb4;     /* reutilizado como "dorado pálido" (tag IA, chip activo) */

  --radius:3px;
  --shadow:0 18px 40px -12px rgba(33,26,18,.35);
}

/* ---------- Fondo: textura de papel ---------- */
html{background:var(--paper)}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse 900px 700px at 105% 10%, rgba(255,255,255,.35), transparent 55%),
    repeating-linear-gradient(0deg, rgba(33,26,18,.018) 0 1px, transparent 1px 3px),
    var(--paper);
  color:var(--ink);
}
/* grano sutil, superpuesto */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}
.topbar,.main,.footer{position:relative;z-index:1}

/* ---------- Layout general: barra lateral izquierda ---------- */
body{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:100vh;
}
.skip-link{z-index:20}
.topbar{grid-column:1;grid-row:1/3}
.main{grid-column:2;grid-row:1}
.footer{grid-column:2;grid-row:2}

/* ---------- Marca / barra lateral ---------- */
.topbar{
  background:var(--navy);
  border-bottom:none;
  box-shadow:2px 0 0 var(--amber), 5px 0 0 rgba(193,68,14,.15);
  position:relative;
  min-height:100vh;
  flex-direction:column;
  align-items:stretch;
  gap:30px;
  padding:26px 20px;
}
.topbar::after{
  content:"";
  position:absolute;top:0;bottom:0;right:-5px;width:5px;
  background:repeating-linear-gradient(135deg, var(--amber) 0 6px, transparent 6px 12px);
  opacity:.55;
}
.brand{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.01em;gap:11px}
.brand__mark{
  border:1.5px solid var(--amber);
  border-radius:50%;
  color:var(--amber);
  font-family:var(--mono);
  transform:rotate(-6deg);
  position:relative;
}
.brand em{font-family:var(--mono);letter-spacing:.12em;border-left:0!important;padding-left:0!important}

.topbar__actions{
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  flex:1;
}
.topbar__actions .eyebrow{color:#8a7256!important;margin:0 0 10px 2px!important;padding-top:6px;border-top:1px dashed #4a3c28}
.topbar .btn--quiet{
  position:relative;
  border:1px solid rgba(216,196,156,.16)!important;
  background:rgba(255,255,255,.03)!important;
  padding:9px 15px!important;
  margin:0!important;
  border-radius:999px;
  color:#d8c8a8;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:left;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.topbar .btn--quiet:hover{
  color:#fbead9;
  background:rgba(193,68,14,.22)!important;
  border-color:var(--amber)!important;
  transform:translateX(2px);
}
#current-user-email{
  display:block;
  margin-top:auto!important;
  padding-top:16px;
  border-top:1px dashed #4a3c28;
  font-family:var(--mono);
  font-size:10.5px;
  color:#8a7256!important;
  word-break:break-all;
}
#logout-btn{
  border:1px solid #5a4a34;
  background:transparent;
  color:#d8c8a8;
  border-radius:2px;
  padding:8px 11px;
  font:600 11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:pointer;
  width:100%;
}
#logout-btn:hover{border-color:var(--amber);color:#fbead9}

@media (max-width:900px){
  body{display:block}
  .topbar{min-height:0;box-shadow:0 1px 0 var(--amber), 0 4px 0 rgba(193,68,14,.15);flex-direction:row;flex-wrap:wrap;gap:10px;padding:10px 18px}
  .topbar::after{display:none}
  .topbar__actions{flex-direction:row;flex-wrap:wrap;gap:8px}
  #current-user-email{margin-top:0!important;border-top:0;padding-top:0}
  #logout-btn{width:auto}
  .sidebar-toggle{display:none}
}

/* ---------- Toggle de la barra lateral ---------- */
.sidebar-toggle{
  position:fixed;
  top:24px;left:234px;
  z-index:30;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:var(--amber);
  border:1.5px solid var(--amber);
  font:16px/1 var(--mono);
  cursor:pointer;
  box-shadow:0 3px 8px rgba(33,26,18,.35);
  transition:left .25s cubic-bezier(.16,1,.3,1), transform .16s ease;
}
.sidebar-toggle:hover{transform:scale(1.08)}
body.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr);transition:grid-template-columns .25s cubic-bezier(.16,1,.3,1)}
body.sidebar-collapsed .topbar{padding-left:0;padding-right:0;overflow:hidden;box-shadow:none}
body.sidebar-collapsed .topbar::after{display:none}
body.sidebar-collapsed .sidebar-toggle{left:10px}

/* ---------- Botones ---------- */
.btn{
  border-radius:var(--radius);
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{
  background:var(--amber);
  border-color:var(--amber);
  box-shadow:0 2px 0 #7c2c09;
}
.btn--primary:hover{background:#a83a0c;border-color:#a83a0c}
.btn--primary:active{transform:translateY(2px);box-shadow:0 0 0 #7c2c09}
.btn--quiet{color:var(--navy);border-color:var(--line)}
.btn--quiet:hover{border-color:var(--navy);background:rgba(33,26,18,.04)}

/* ---------- Encabezado del wizard ---------- */
.wizard-header{border-bottom:1px solid var(--line);align-items:end}
.wizard-header__title{
  font-family:var(--display);
  font-weight:600;
  font-style:normal;
  letter-spacing:-.01em;
}
.operation-phase{font-family:var(--mono)}
.eyebrow{font-family:var(--mono)}
.wizard-header__metrics{border-left-color:var(--line)}
.wizard-header__metrics strong{font-family:var(--mono);letter-spacing:-.02em}

/* ---------- Indicador de pasos: sellos de tinta ---------- */
.wizard-steps ol:before{background:var(--line);height:1px}
.wizard-step__num{
  border:2px solid var(--line);
  background:var(--white);
  font-family:var(--mono);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wizard-step.is-active .wizard-step__num{
  background:var(--navy);
  border-color:var(--navy);
  transform:rotate(-4deg) scale(1.08);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--navy), 0 6px 14px -4px rgba(33,26,18,.4);
}
.wizard-step.is-complete .wizard-step__num{
  background:transparent;
  border-color:var(--amber);
  color:var(--amber);
  position:relative;
}
.wizard-step.is-complete .wizard-step__num::after{
  content:"✓";
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:15px;
}
.wizard-step__label strong{font-family:var(--sans);font-weight:700}
.wizard-steps__hint{font-family:var(--mono)}

/* ---------- Fichas de producto ---------- */
.product-chips{padding-top:20px}
.product-chip{
  border-radius:2px;
  border-style:dashed;
  background:var(--white);
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.03em;
}
.product-chip.is-active{background:var(--blue-pale);border-color:var(--amber);border-style:solid;color:var(--navy)}
.product-chip__add{border-radius:2px;border-style:dashed}

/* ---------- Tarjetas / paneles ---------- */
.control-card{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  animation:ledger-rise .5s cubic-bezier(.16,1,.3,1) both;
}
.control-card__header{border-bottom:1px dashed var(--line);background:linear-gradient(180deg, rgba(193,68,14,.05), transparent)}
.control-card__header h3{font-family:var(--display);font-weight:600;font-size:19px}
.control-card__header span{font-family:var(--mono)}

@keyframes ledger-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.wizard-panel:not([hidden]) .control-card{animation:ledger-rise .5s cubic-bezier(.16,1,.3,1) both}

.wizard-subheading{font-family:var(--mono)}
.wizard-note{font-style:italic}
.wizard-panel__nav{border-top:1px dashed var(--line)}

/* perforación decorativa entre encabezado del wizard y los pasos */
.wizard-steps{position:relative}
.wizard-steps::before{
  content:"";
  display:block;
  height:0;
  border-top:1px dashed var(--line);
  margin-bottom:2px;
}

/* ---------- Campos ---------- */
.calculator-field span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.calculator-field__input{background:var(--paper);border-color:var(--line);border-radius:2px}
.calculator-field__input:focus-within{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-pale)}
.calculator-field input,.calculator-field select{color:var(--navy);font-family:var(--mono)}

.rate-card{background:var(--paper);border-color:var(--line);border-radius:2px}
.rate-card>span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.rate-card__input{background:var(--white);border-color:var(--line)}

.product-preview{background:var(--paper);border-color:var(--line);border-radius:2px}
.product-preview__thumb{background:var(--white);border-color:var(--line);border-radius:2px}
.tag--ai{background:var(--blue-pale);color:var(--navy);font-family:var(--mono);border:1px dashed var(--amber)}

.item-summary{border-color:var(--line);border-radius:2px}
.item-summary strong{font-family:var(--mono)}

/* ---------- Resultado: el sello final ---------- */
.result-hero{
  border-left:none;
  background:var(--navy);
  position:relative;
  overflow:visible;
}
.result-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
  mix-blend-mode:overlay;
  pointer-events:none;
}
.result-hero:after{border-color:rgba(193,68,14,.35)}
.result-hero .eyebrow{font-family:var(--mono);color:var(--amber-pale)}
.result-hero h2{font-family:var(--display);font-weight:600;font-style:italic}
.result-hero__amount{font-family:var(--mono)}
.result-hero>div{position:relative}
.result-hero>div::after{
  content:"PUESTO EN ARGENTINA";
  position:absolute;
  right:6px;top:2px;
  transform:rotate(8deg);
  border:2px solid var(--amber);
  color:var(--amber);
  font:700 9px/1 var(--mono);
  letter-spacing:.06em;
  padding:6px 10px;
  border-radius:50%/42%;
  opacity:.8;
  white-space:nowrap;
}
@media (max-width:760px){.result-hero>div::after{display:none}}

.breakdown-collapse{background:var(--white);border-color:var(--line);border-radius:2px}
.breakdown-collapse summary{font-family:var(--sans)}
.breakdown-collapse summary::marker{color:var(--amber)}
.queue-list li{border-bottom-color:var(--line)}
.queue-list strong{font-family:var(--sans)}
.status{font-family:var(--mono);border-radius:2px}
.status--progress{background:var(--blue-pale);color:var(--navy)}
.status--review{background:var(--amber-pale);color:#6e2c08}

.stat-tile{background:var(--white);border-color:var(--line);border-radius:2px}
.stat-tile span{font-family:var(--mono)}
.stat-tile strong{font-family:var(--mono)}

.final-callout{
  background:var(--white);
  border:1px dashed var(--green);
  border-radius:2px;
  color:var(--green);
  position:relative;
}
.final-callout::before{
  content:"✓ APROBADO";
  position:absolute;
  top:-11px;left:16px;
  background:var(--paper);
  padding:0 8px;
  font:700 10px var(--mono);
  letter-spacing:.06em;
  color:var(--green);
}

/* ---------- Pie ---------- */
.footer{background:var(--navy);border-top:1px solid var(--amber)}

/* ============================================================
   Componentes compartidos por los otros 9 módulos
   ============================================================ */

/* ---------- Tabs (Mis Courier / Calculadora de márgenes) ---------- */
.tabs{border-bottom:1px dashed var(--line);gap:4px}
.tab-btn{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  border-radius:2px 2px 0 0;
  padding:11px 16px;
}
.tab-btn[aria-selected="true"]{color:var(--navy);border-color:var(--amber);background:rgba(193,68,14,.06)}
.tab-btn:hover{color:var(--navy)}
.tab-panel{animation:ledger-rise .4s cubic-bezier(.16,1,.3,1) both}

/* ---------- Despachante virtual: chat ---------- */
.chat-sidebar,.chat-panel{background:var(--white);border-color:var(--line);box-shadow:var(--shadow);border-radius:2px}
.chat-sidebar__search input{background:var(--paper);border-color:var(--line);border-radius:2px;font-family:var(--mono);font-size:12.5px}
.chat-conv-item{border-radius:2px;font-family:var(--sans)}
.chat-conv-item:hover{background:var(--paper)}
.chat-conv-item.is-active{background:var(--blue-pale);border-color:var(--amber)}
.chat-conv-item small{font-family:var(--mono)}
.chat-disclaimer{background:var(--amber-pale);border:1px dashed var(--amber);border-radius:2px;color:#6e2c08}
.chat-disclaimer strong{color:#4a1c05}
.chat-msg{border-radius:4px}
.chat-msg--user{background:var(--navy)}
.chat-msg--assistant{background:var(--paper);border-color:var(--line)}
.chat-msg__attachment{font-family:var(--mono)}
.chat-composer{border-top:1px dashed var(--line)}
.chat-composer__input{background:var(--paper);border-color:var(--line);border-radius:2px;font-family:var(--sans)}
.chat-composer__attach{font-family:var(--mono);font-size:11px}

/* ---------- Comenzar importación: picker ---------- */
.picker-panel{box-shadow:var(--shadow)}
.picker-row--disabled{background:repeating-linear-gradient(135deg, transparent 0 8px, rgba(33,26,18,.03) 8px 16px)}

/* ---------- Panel de administración: tablas ---------- */
.data-table{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--sans)}
.data-table th{
  text-align:left;
  padding:10px 12px;
  background:var(--navy);
  color:#e7d9bd;
  font:600 10.5px var(--mono);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.data-table th:first-child{border-radius:2px 0 0 0}
.data-table th:last-child{border-radius:0 2px 0 0}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.data-table tbody tr:hover{background:var(--paper)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td:nth-child(2),.data-table td:nth-child(3){font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- login.html: portada ---------- */
body.auth-body{display:block;background:var(--navy)}
body.auth-body::before{opacity:.35}
.auth-shell{
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  padding:34px 32px;
  position:relative;
  animation:ledger-rise .5s cubic-bezier(.16,1,.3,1) both;
}
.auth-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(45deg, var(--amber) 0 8px, transparent 8px 16px);
}
.auth-card__brand{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.auth-card__brand .brand__mark{width:38px;height:38px;flex:none;font-size:12px}
.auth-card__brand h1{margin:0;font-family:var(--display);font-weight:600;font-size:24px;color:var(--navy)}
.auth-card__eyebrow{margin:2px 0 0;color:var(--muted);font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.auth-card__lead{margin:14px 0 22px;padding-top:14px;border-top:1px dashed var(--line);color:var(--muted);font-size:13.5px}
.auth-form{display:grid;gap:14px}
.auth-form__actions{display:flex;gap:10px;margin-top:6px}
.auth-form__actions .btn{flex:1;justify-content:center;display:inline-flex;align-items:center}
.auth-status{min-height:1.2em;margin:2px 0 0;color:var(--amber);font:600 12px var(--mono)}
.auth-shell__footnote{max-width:420px;text-align:center;color:#9a8567;font-size:11.5px;line-height:1.6}
.auth-shell__footnote strong{color:#d8c8a8}

/* ---------- Selección de texto / scrollbar, toque final ---------- */
::selection{background:var(--amber);color:#fff}