/* ============================================================
   Brief de Campaña Público — Chedraui Media
   Extraído de cotizador-web/brief.php
   ============================================================ */

:root {
  --gr:        #0B1C3F;
  --gr2:       #132A55;
  --grl:       #EAF0FB;
  --grb:       #C8D5E8;
  --accent:    #FF6600;
  --accent-lt: #FFF4EF;
  --accent-br: #FFB380;
  --dk:        #0B1C3F;
  --g5:        #44506B;
  --g6:        #5A6B8C;
  --g7:        #8FA0C0;
  --gb:        #E1E8F2;
  --glt:       #F3F6FA;
  --r8:        8px;
  --r12:       12px;
  --warn:      #D97706;
  --err:       #E53E3E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito Sans', 'Aptos', 'Segoe UI', system-ui, sans-serif;
  background: #F0F4FA;
  min-height: 100vh;
  color: var(--dk);
}

/* ── HEADER ── */
.bh {
  background: var(--gr);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.bh-logo-img { height: 38px; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.bh-divider  { width: 1px; height: 32px; background: rgba(255,255,255,.25); flex-shrink: 0; }
.bh-text     { line-height: 1.3; }
.bh-title    { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.1px; }
.bh-sub      { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ── STEP BAR ── */
.step-bar  { background: #fff; border-bottom: 1px solid var(--gb); padding: 0 20px; overflow-x: auto; }
.steps     { display: flex; min-width: 560px; list-style: none; padding: 0; margin: 0; }
.step      { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 13px 6px; position: relative; }
.step::after {
  content: ''; position: absolute; top: 22px;
  left: calc(50% + 18px); right: calc(-50% + 18px);
  height: 2px; background: var(--gb); transition: background .3s;
}
.step:last-child::after { display: none; }
.sn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gb); color: var(--g6);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; position: relative; transition: all .25s; flex-shrink: 0;
}
.step.active .sn { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(255,102,0,.22); }
.step.done   .sn { background: var(--accent); color: #fff; }
.sl { font-size: 10px; color: var(--g7); margin-top: 4px; text-align: center; font-weight: 600; white-space: nowrap; }
.step.active .sl { color: var(--accent); font-weight: 800; }
.step.done   .sl,
.step.done::after { color: var(--accent); background: var(--accent); }

/* ── WRAP ── */
.bw { max-width: 780px; margin: 0 auto; padding: 28px 16px 100px; }

/* ── CARD ── */
.card  { background: #fff; border-radius: var(--r12); box-shadow: 0 1px 6px rgba(0,0,0,.08); margin-bottom: 18px; overflow: hidden; }
.ch    { padding: 16px 24px; color: #fff; }
.ch.green  { background: var(--gr); }
.ch.purple { background: #553C9A; }
.ch h2 { font-size: 15.5px; font-weight: 700; margin: 0; }
.ch p  { font-size: 11.5px; opacity: .75; margin-top: 3px; }
.cb    { padding: 22px 24px; }

/* ── FIELDS ── */
.f  { margin-bottom: 17px; }
.fl { display: block; font-size: 12px; font-weight: 700; color: var(--g5); margin-bottom: 5px; letter-spacing: .1px; }
.fl .req  { color: var(--err); margin-left: 1px; }
.fl .hint { font-weight: 400; color: var(--g6); font-size: 11px; }
input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--gb); border-radius: var(--r8);
  font-size: 13.5px; font-family: inherit; color: var(--dk); background: #fff;
  transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,102,0,.12);
}
input.err, select.err, textarea.err { border-color: var(--err); background: #FFF5F5; }
textarea { resize: vertical; min-height: 88px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fn     { font-size: 11.5px; color: var(--g6); margin-top: 5px; line-height: 1.5; }
.fn.red { color: #C05621; }

/* ── READ-ONLY ── */
.fro { padding: 10px 13px; background: var(--glt); border: 1.5px solid var(--gb); border-radius: var(--r8); font-size: 13.5px; color: var(--g5); }
.badge-pre {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-lt); color: var(--accent);
  font-size: 10.5px; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; margin-top: 4px; border: 1px solid var(--accent-br);
}

/* ── CHIPS ── */
.cg { display: flex; flex-wrap: wrap; gap: 8px; }
.co {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1.5px solid var(--gb); border-radius: var(--r8);
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--g5);
  transition: all .15s; user-select: none;
}
.co input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.co:has(input:checked) { border-color: var(--accent); background: var(--accent-lt); color: var(--accent); font-weight: 700; }

/* ── DURATION TOGGLE ── */
.dur-toggle { display: flex; border: 1.5px solid var(--gb); border-radius: var(--r8); overflow: hidden; margin-bottom: 16px; }
.dt {
  flex: 1; padding: 11px 10px; border: none; background: #fff;
  font-size: 13px; font-weight: 500; color: var(--g6);
  cursor: pointer; text-align: center; transition: all .15s;
  border-right: 1px solid var(--gb);
}
.dt:last-child { border-right: none; }
.dt.on { background: var(--gr); color: #fff; font-weight: 800; }

/* ── PRODUCTS TABLE (Paso 2) ── */
.ptbl-wrap { border: 1.5px solid var(--gb); border-radius: var(--r8); overflow: hidden; margin-bottom: 10px; }
.ptbl { width: 100%; border-collapse: collapse; }
.ptbl th { background: #EDF2F7; padding: 8px 10px; text-align: left; font-size: 11px; color: var(--g5); font-weight: 700; letter-spacing: .2px; }
.ptbl td { padding: 3px 5px; border-bottom: 1px solid #F3F6FA; }
.ptbl td input { width: 100%; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 6px; font-size: 13px; font-family: inherit; background: transparent; transition: all .15s; }
.ptbl td input:focus { outline: none; border-color: var(--accent); background: #fff; }
.ptbl tr:hover td input:not(:focus) { background: #F9FAFB; }
.btn-dr { background: none; border: none; cursor: pointer; color: #CBD5E0; font-size: 15px; padding: 5px 7px; border-radius: 4px; line-height: 1; transition: color .15s; }
.btn-dr:hover { color: var(--err); }
.btn-ar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent-lt); color: var(--accent);
  border: 1.5px dashed var(--accent-br); border-radius: var(--r8);
  padding: 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; width: 100%;
}
.btn-ar:hover { background: #FFE4D1; border-color: #FF8C42; }
.btn-ar-blue {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #EBF8FF; color: #2B6CB0;
  border: 1.5px dashed #90CDF4; border-radius: var(--r8);
  padding: 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; width: 100%;
}
.btn-ar-blue:hover { background: #BEE3F8; border-color: #63B3ED; }
.sku-paste-wrap { margin: 10px 0 4px; background: #F7FAFC; border: 1.5px dashed #90CDF4; border-radius: var(--r8); padding: 12px; }
.sku-paste-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #718096; flex-wrap: wrap; }
.sku-col-btn { padding: 4px 10px; border: 1.5px solid #CBD5E0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 600; color: #4A5568; transition: all .15s; }
.sku-col-btn.active { border-color: #4299E1; background: #EBF8FF; color: #2B6CB0; }
.sku-paste-wrap textarea { width: 100%; border: 1.5px solid #CBD5E0; border-radius: 6px; padding: 8px 10px; font-family: monospace; font-size: 12px; resize: vertical; color: #2D3748; line-height: 1.5; }
.sku-paste-wrap textarea:focus { outline: none; border-color: #4299E1; }
.sku-paste-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sku-import-ok { font-size: 12px; font-weight: 700; color: #276749; }

/* ── BARRA DE PRESUPUESTO ── */
#budget-bar {
  background: #fff; border: 1.5px solid var(--gb);
  border-radius: var(--r12); padding: 16px 20px;
  margin-bottom: 16px; transition: border-color .3s, box-shadow .25s;
}
#budget-bar.over { border-color: #FC8181; }
#budget-bar.bb-stuck {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  border-radius: 0; border-left: none; border-right: none; border-bottom: none;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
  padding: 10px 20px; margin-bottom: 0;
}
#budget-bar.bb-stuck.over { border-top-color: #E53E3E; }
#budget-bar.bb-stuck .bb-hint { display: none; }
#bb-spacer { display: none; }
.bb-top  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.bb-title { font-size: 12px; font-weight: 800; color: var(--g5); text-transform: uppercase; letter-spacing: .4px; }
.bb-total-val { font-size: 14px; font-weight: 700; color: var(--dk); }
.bb-track { background: #EDF2F7; border-radius: 20px; height: 10px; overflow: hidden; margin-bottom: 10px; position: relative; }
.bb-fill  { height: 100%; background: var(--accent); border-radius: 20px; transition: width .35s ease; max-width: 100%; }
.bb-fill.over { background: #E53E3E; }
.bb-bot   { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.bb-stat  { display: flex; flex-direction: column; gap: 2px; }
.bb-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--g7); }
.bb-stat-val { font-size: 14px; font-weight: 800; }
.bb-stat.asig .bb-stat-val  { color: var(--accent); }
.bb-stat.rest .bb-stat-val  { color: var(--dk); }
.bb-stat.over-stat .bb-stat-val { color: var(--err); }
.bb-hint { font-size: 11.5px; color: var(--g7); padding: 8px 0 2px; font-style: italic; }

/* ── ZONA CARD (Medios) ── */
.mi { border: 1.5px solid var(--gb); border-radius: 10px; overflow: hidden; margin-bottom: 10px; transition: border-color .2s, box-shadow .2s; }
.mi.on { border-color: var(--accent); box-shadow: 0 2px 10px rgba(255,102,0,.12); }
.mhd { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; transition: background .15s; border-bottom: 1.5px solid transparent; }
.mi.on .mhd { background: var(--accent-lt); border-bottom-color: var(--accent-br); }
.mhd:hover { background: #F7F9FC; }
.mi.on .mhd:hover { background: #FFE4D1; }
.mhd-ico  { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.mhd-lbl  { font-size: 14px; font-weight: 700; color: var(--dk); line-height: 1.2; }
.mhd-sub  { font-size: 11.5px; font-weight: 400; color: var(--g6); margin-top: 2px; }
.mhd-chk  { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.mbd { padding: 16px 18px 18px; display: none; background: #FDFFFE; }
.mi.on .mbd { display: block; }

/* ── CATEGORÍAS dentro de zona ── */
.cats-lbl { font-size: 10.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cats-lbl::after { content: ''; flex: 1; height: 1px; background: var(--gb); }

/* ── TABLA DE PRODUCTOS POR CATEGORÍA ── */
.cat-section { margin-top: 14px; border: 1.5px solid var(--gb); border-radius: 10px; overflow: hidden; transition: border-color .2s; }
.cat-section.has-budget { border-color: var(--accent); }
.cs-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F7FAFC; border-bottom: 1px solid var(--gb); cursor: pointer; user-select: none; }
.cs-hdr:hover { background: #EDF2F7; }
.cat-section.has-budget .cs-hdr { background: var(--accent-lt); border-bottom-color: var(--accent-br); }
.cs-ico  { font-size: 13px; flex-shrink: 0; }
.cs-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--g5); }
.cat-section.has-budget .cs-name { color: var(--accent); }
.cs-badge { font-size: 11px; font-weight: 800; color: var(--accent); background: #FFE4D1; padding: 2px 10px; border-radius: 20px; display: none; }
.cat-section.has-budget .cs-badge { display: inline-block; }
.cs-arr { font-size: 11px; color: var(--g7); transition: transform .2s; }
.cat-section.open .cs-arr { transform: rotate(180deg); }
.cs-body { display: none; }
.cat-section.open .cs-body { display: block; }

/* Tabla de productos */
.prod-tbl { width: 100%; border-collapse: collapse; }
.prod-tbl th { background: #FAFAFA; padding: 7px 12px; text-align: left; font-size: 10.5px; font-weight: 800; color: var(--g5); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--gb); }
.prod-tbl td { padding: 8px 12px; border-bottom: 1px solid #F3F6FA; vertical-align: middle; }
.prod-tbl tr:last-child td { border-bottom: none; }
.prod-tbl tr:hover td { background: #F9FAFB; }
.prod-name { font-size: 13px; font-weight: 600; color: var(--dk); }
.prod-loc  { font-size: 11px; color: var(--g7); margin-top: 2px; }
.cobro-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #553C9A; background: #FAF5FF; border: 1px solid #D6BCFA; padding: 2px 9px; border-radius: 12px; }
.ppto-cell { width: 150px; }
.ppto-cell input { padding: 8px 10px; font-size: 13px; font-family: monospace; text-align: right; border-radius: 6px; min-width: 0; }
.ppto-cell input:focus { border-color: var(--accent); }
.ppto-cell input.filled { border-color: var(--accent); background: var(--accent-lt); font-weight: 700; color: var(--accent); }
/* precio referencia */
.precio-ref-cell  { width: 170px; vertical-align: middle; padding: 8px 10px; }
.precio-chip      { display: inline-flex; align-items: center; gap: 3px; background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; border-radius: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; white-space: nowrap; margin: 2px 2px 2px 0; }
.precio-chip small { font-weight: 400; opacity: .8; }
.precio-tbd       { font-size: 11px; color: var(--warn); font-style: italic; }
.precio-na        { font-size: 11px; color: var(--g7); }
.precio-inversion { font-size: 11px; color: #553C9A; font-style: italic; }
.precio-sin-fmt   { font-size: 10.5px; color: var(--g7); font-style: italic; line-height: 1.4; }
.empty-prods      { font-size: 12.5px; color: var(--g7); font-style: italic; padding: 12px 14px; }
/* Modo cliente */
.prod-tbl-cliente input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.prod-tbl-cliente tr:hover td { background: #FFF9F6; }
.prod-tbl-cliente tr.prod-sel td { background: var(--accent-lt); }
.prod-tbl-cliente tr.prod-sel .prod-name { color: var(--accent); }
.aprox-notice { background: #FFFBEB; border: 1px solid #F6E05E; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #744210; margin-top: 10px; line-height: 1.5; }
.aprox-notice strong { color: #92400E; }
.cli-budget-banner { background: #EBF8FF; border: 1px solid #90CDF4; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #2A4365; line-height: 1.6; margin-bottom: 14px; }
.cli-budget-banner strong { color: #2B6CB0; }
.nav-hint { text-align: center; font-size: 11.5px; color: #718096; margin-top: 8px; font-style: italic; }
.prod-aprox-tag { font-size: 10.5px; color: #B45309; font-weight: 600; margin-top: 3px; display: none; }
.prod-sel .prod-aprox-tag { display: block; }

/* Modo agencia */
.prod-tbl-agencia .prod-chk-ag { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.prod-tbl-agencia tr:hover td { background: #F9FAFB; }
.prod-tbl-agencia tr.prod-sel-ag td { background: var(--accent-lt); }
.prod-tbl-agencia tr.prod-sel-ag .prod-name { color: var(--accent); font-weight: 700; }
.precio-sugerido { font-size: 11px; color: var(--g5); margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--gb); line-height: 1.4; }
.precio-sugerido strong { color: var(--accent); font-size: 12px; }

/* ── Tag-input marcas ── */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 10px; border: 1.5px solid var(--gb); border-radius: var(--r8);
  background: #fff; cursor: text; min-height: 44px;
  transition: border-color .15s, box-shadow .15s; position: relative;
}
.tag-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,102,0,.12); }
.tag-input-wrap.err { border-color: var(--err); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid var(--accent-br); border-radius: 20px;
  padding: 3px 10px 3px 12px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; max-width: 200px;
}
.tag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chip-del { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 14px; line-height: 1; padding: 0 0 1px; opacity: .7; font-family: inherit; }
.tag-chip-del:hover { opacity: 1; }
.tag-inp { border: none; outline: none; font-size: 13.5px; font-family: inherit; color: var(--dk); background: transparent; min-width: 160px; flex: 1; padding: 2px 4px; }
.tag-inp::placeholder { color: var(--g7); }
.tag-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1.5px solid var(--gb); border-radius: var(--r8);
  box-shadow: 0 8px 28px rgba(11,28,63,.14);
  z-index: 300; overflow: hidden; display: none; max-height: 240px; overflow-y: auto;
}
.tag-dropdown.open { display: block; }
.tag-dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13.5px; color: var(--dk); transition: background .1s; border-bottom: 1px solid #F3F6FA; }
.tag-dd-item:last-child { border-bottom: none; }
.tag-dd-item:hover, .tag-dd-item.focused { background: var(--accent-lt); }
.tag-dd-item .dd-ico    { font-size: 11px; color: #fff; background: var(--gr); padding: 2px 7px; border-radius: 12px; flex-shrink: 0; font-weight: 700; opacity: .8; }
.tag-dd-item .dd-manual { color: var(--accent); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.tag-dd-sep   { padding: 6px 14px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--g7); background: var(--glt); border-bottom: 1px solid var(--gb); }
.tag-dd-empty { padding: 12px 14px; font-size: 13px; color: var(--g6); font-style: italic; }

.nota-medio { margin-top: 14px; border-top: 1px solid var(--gb); padding-top: 14px; }
.nota-medio label { display: block; font-size: 11px; font-weight: 700; color: var(--g5); margin-bottom: 5px; }
.nota-medio textarea { min-height: 60px; font-size: 13px; }

/* ── DIVIDER / SECTION TITLE ── */
.sdiv   { border: none; border-top: 1px solid var(--gb); margin: 18px 0; }
.stitle { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }
.stitle::after { content: ''; flex: 1; height: 1px; background: var(--gb); }

/* ── NAV ── */
.nav      { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
.btn      { padding: 12px 28px; border-radius: var(--r8); font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .15s; letter-spacing: -.1px; }
.btn-next { background: var(--accent); color: #fff; }
.btn-next:hover { background: #E05500; }
.btn-back { background: #EDF2F7; color: var(--g5); }
.btn-back:hover { background: #E1E8F2; }
.btn-send { background: var(--accent); color: #fff; padding: 14px 40px; font-size: 15px; }
.btn-send:hover { background: #E05500; }
.btn-send:disabled { background: #A0AEC0; cursor: not-allowed; }

/* ── REVIEW ── */
.rv  { border: 1.5px solid var(--gb); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.rvh { background: var(--glt); padding: 9px 16px; font-size: 10.5px; font-weight: 800; color: var(--g5); text-transform: uppercase; letter-spacing: .4px; }
.rvr { display: flex; padding: 9px 16px; border-top: 1px solid #F3F6FA; font-size: 12.5px; flex-wrap: wrap; gap: 4px; }
.rvl { color: var(--g6); min-width: 160px; flex-shrink: 0; font-weight: 500; }
.rvv { color: var(--dk); font-weight: 600; flex: 1; }

/* Tabla de medios en resumen */
.rv-med-tbl { width: 100%; border-collapse: collapse; }
.rv-med-tbl th { padding: 7px 14px; font-size: 10px; font-weight: 800; color: var(--g5); text-transform: uppercase; letter-spacing: .4px; background: #F0F4F8; border-top: 1px solid var(--gb); border-bottom: 1px solid var(--gb); white-space: nowrap; }
.rv-th-ppto { text-align: right; width: 130px; }
.rv-zone-hd td { padding: 10px 14px 5px; border-top: 1.5px solid var(--gb); background: #FAFBFC; }
.rv-zone-hd:first-child td { border-top: none; }
.rv-zone-nm  { font-size: 13.5px; font-weight: 700; color: var(--dk); }
.rv-zone-int { font-size: 11px; color: var(--g7); font-style: italic; text-align: right; vertical-align: middle; }
.rv-cat-hd td { padding: 5px 14px 3px 26px; }
.rv-cat-nm   { font-size: 11.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; }
.rv-cat-sub  { font-size: 11.5px; font-weight: 700; color: var(--accent); text-align: right; }
.rv-prod td  { padding: 6px 14px 6px 36px; border: none; }
.rv-prod.rv-odd  td { background: #fff; }
.rv-prod.rv-even td { background: #EEF2F7; }
.rv-prod-nm  { font-size: 12.5px; color: var(--g5); }
.rv-prod-pp  { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--dk); font-family: monospace; white-space: nowrap; }
.rv-nota td  { padding: 3px 14px 8px 26px; font-size: 11px; color: var(--g6); font-style: italic; }
.rv-total td { padding: 10px 14px; border-top: 2px solid var(--accent-br); background: var(--accent-lt); }
.rv-total-nm { font-size: 13px; font-weight: 800; color: var(--accent); }
.rv-total-pp { text-align: right; font-size: 14px; font-weight: 900; color: var(--accent); font-family: monospace; white-space: nowrap; }
.rv-balance td { padding: 4px 14px 10px; font-size: 11.5px; color: var(--g6); background: var(--accent-lt); }
.rv-balance .rv-bal-pp { text-align: right; white-space: nowrap; }
.rv-balance.excede td, .rv-balance.excede .rv-bal-pp { color: #C53030; font-weight: 700; }

/* ── SUCCESS ── */
#success { display: none; }
.sico    { font-size: 64px; margin-bottom: 16px; text-align: center; }
.stit    { font-size: 24px; font-weight: 800; color: var(--accent); margin-bottom: 8px; text-align: center; }
.smsg    { font-size: 14px; color: var(--g6); max-width: 440px; margin: 0 auto 22px; line-height: 1.65; text-align: center; }
.folio-box   { display: block; background: var(--accent-lt); color: var(--accent); border: 2px solid var(--accent-br); border-radius: 12px; padding: 14px 36px; margin: 0 auto 20px; text-align: center; max-width: 280px; }
.folio-lbl   { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .7; margin-bottom: 4px; }
.folio-num   { font-size: 28px; font-weight: 900; letter-spacing: 2px; }

/* ── DRAFT BANNER ── */
#draft-banner { display: none; background: #FFFBEB; border: 1.5px solid #F6E05E; border-radius: 10px; padding: 12px 18px; margin-bottom: 18px; align-items: center; gap: 12px; flex-wrap: wrap; }
#draft-banner.vis { display: flex; }
.db-btn { padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: all .15s; }

/* ── SAVE INDICATOR ── */
#save-ind { position: fixed; bottom: 18px; right: 18px; background: rgba(45,55,72,.9); color: #fff; font-size: 12px; padding: 8px 16px; border-radius: 20px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 200; }
#save-ind.show { opacity: 1; }

/* ── TIENDAS ── */
.tienda-actions   { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tienda-act-btn   { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--r8); font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid; transition: all .15s; white-space: nowrap; }
.tienda-act-btn.primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.tienda-act-btn.primary:hover { background: #E05500; border-color: #E05500; }
.tienda-act-btn.secondary { background: #fff; color: var(--g5); border-color: var(--gb); }
.tienda-act-btn.secondary:hover { background: var(--glt); border-color: #B0BEC5; }
.tienda-bar   { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; margin-bottom: 8px; }
.tienda-count { font-size: 12px; font-weight: 700; color: var(--accent); }
.tienda-clear-btn { background: none; border: none; font-size: 12px; color: #A0AEC0; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all .15s; }
.tienda-clear-btn:hover { background: #FFF5F5; color: #C53030; }
.tienda-list  { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.tienda-row   { display: flex; align-items: center; gap: 10px; background: #F7FAFC; border: 1px solid #EDF2F7; border-radius: var(--r8); padding: 9px 13px; transition: background .15s; }
.tienda-row:hover { background: #EDF2F7; }
.tienda-codigo { background: var(--gr); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; opacity: .85; }
.tienda-nombre { flex: 1; font-size: 13px; color: var(--dk); font-weight: 500; }
.tienda-del { background: none; border: none; cursor: pointer; color: #CBD5E0; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; transition: all .15s; flex-shrink: 0; }
.tienda-del:hover { background: #FFF5F5; color: #FC8181; }
.tienda-empty { text-align: center; padding: 36px 20px; color: var(--g6); font-size: 13.5px; border: 2px dashed var(--gb); border-radius: var(--r12); margin-top: 4px; }
.tienda-paste-wrap { background: var(--glt); border: 1.5px dashed #90CDF4; border-radius: var(--r8); padding: 12px; margin-bottom: 12px; }
.tienda-paste-head { font-size: 12px; color: var(--g6); margin-bottom: 8px; line-height: 1.5; }
.tienda-paste-wrap textarea { width: 100%; border: 1.5px solid #CBD5E0; border-radius: 6px; padding: 8px 10px; font-family: monospace; font-size: 12px; resize: vertical; min-height: 80px; color: var(--dk); }
.tienda-paste-wrap textarea:focus { outline: none; border-color: var(--accent); }
.tienda-paste-footer { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

/* ── OVERLAY BUSCADOR ── */
#tienda-overlay { display: none; position: fixed; inset: 0; background: rgba(11,28,63,.6); z-index: 500; align-items: center; justify-content: center; padding: 20px 16px; }
#tienda-overlay.open { display: flex; }
.tov-card   { background: #fff; border-radius: 16px; box-shadow: 0 16px 60px rgba(11,28,63,.28); width: 100%; max-width: 760px; height: calc(100vh - 80px); max-height: 720px; display: flex; flex-direction: column; overflow: hidden; }
.tov-hdr    { padding: 20px 24px 16px; border-bottom: 1px solid var(--gb); flex-shrink: 0; background: #fff; }
.tov-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tov-title  { font-size: 17px; font-weight: 800; color: var(--dk); }
.tov-close  { background: none; border: 1.5px solid var(--gb); border-radius: var(--r8); padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--g5); font-family: inherit; font-weight: 600; }
.tov-close:hover { background: var(--glt); }
.tov-search { width: 100%; padding: 11px 16px; border: 1.5px solid var(--gb); border-radius: var(--r8); font-size: 14px; font-family: inherit; box-sizing: border-box; }
.tov-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,102,0,.1); }
.tov-body   { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.tov-stats  { padding: 8px 24px; font-size: 11.5px; color: var(--g6); background: var(--glt); border-bottom: 1px solid var(--gb); flex-shrink: 0; }
.tov-list   { overflow-y: auto; flex: 1; }
.tov-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 560px) { .tov-grid { grid-template-columns: 1fr; } }
.tov-item   { display: flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer; transition: background .1s; border-bottom: 1px solid #F0F4FA; }
.tov-item:hover    { background: var(--accent-lt); }
.tov-item.selected { background: #FFF0E8; }
.tov-item.already  { opacity: .5; cursor: default; }
.tov-item-cod { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--gr); padding: 2px 8px; border-radius: 16px; flex-shrink: 0; opacity: .85; letter-spacing: .3px; min-width: 44px; text-align: center; }
.tov-item-nom { flex: 1; font-size: 13px; color: var(--dk); font-weight: 500; line-height: 1.3; }
.tov-item-chk { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.tov-empty    { text-align: center; padding: 48px 20px; color: var(--g6); font-size: 13.5px; grid-column: 1 / -1; }
.tov-footer   { padding: 14px 24px; border-top: 1px solid var(--gb); background: #fff; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.tov-sel-lbl  { font-size: 13px; color: var(--g6); }
.tov-sel-lbl strong { color: var(--accent); font-size: 15px; }
.tov-add-btn  { background: var(--accent); color: #fff; border: none; border-radius: var(--r8); padding: 11px 24px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; }
.tov-add-btn:hover    { background: #E05500; }
.tov-add-btn:disabled { background: #A0AEC0; cursor: not-allowed; }

/* ── VISTA BRIEF COMPLETADO ── */
#brief-done { background: #fff; border-radius: var(--r12); box-shadow: 0 2px 16px rgba(0,0,0,.09); overflow: hidden; }
.bd-hero     { background: linear-gradient(135deg,#0B1C3F 0%,#1E3560 100%); padding: 40px 28px 32px; text-align: center; color: #fff; }
.bd-hero-ico { font-size: 60px; margin-bottom: 12px; }
.bd-hero-tit { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.bd-hero-sub { font-size: 14px; opacity: .85; line-height: 1.6; max-width: 380px; margin: 0 auto 20px; }
.bd-folio    { display: inline-block; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.5); border-radius: 10px; padding: 10px 28px; font-size: 22px; font-weight: 900; letter-spacing: 2px; }
.bd-folio-lbl { font-size: 10px; font-weight: 700; letter-spacing: .8px; opacity: .75; margin-bottom: 3px; text-transform: uppercase; }
.bd-body     { padding: 28px; }
.bd-section  { margin-bottom: 20px; border: 1px solid #EDF2F7; border-radius: 10px; overflow: hidden; }
.bd-sec-hdr  { background: #F7FAFC; padding: 10px 16px; font-size: 11px; font-weight: 700; color: #718096; text-transform: uppercase; letter-spacing: .5px; }
.bd-sec-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.bd-row { display: flex; gap: 8px; font-size: 13.5px; align-items: baseline; }
.bd-key { color: #718096; min-width: 140px; flex-shrink: 0; font-size: 12px; }
.bd-val { color: #1B2A4A; font-weight: 600; word-break: break-word; }
.bd-note { font-size: 12.5px; color: #718096; text-align: center; padding: 20px 28px 28px; border-top: 1px solid #EDF2F7; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .frow { grid-template-columns: 1fr; }
  .bw   { padding: 16px 10px 100px; }
  .cb   { padding: 18px 16px; }
  .ch   { padding: 14px 16px; }
  .ppto-cell { width: 120px; }
}