:root {
  color-scheme: light;
  --font: 'Manrope', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --bg: #f1f2ee;
  --surface: #ffffff;
  --surface-2: #f6f7f2;
  --border: #e3e6dc;
  --text: #161814;
  --muted: #596053;
  --ink: #161816;
  --ink-2: #242720;
  --ink-text: #f3f5ee;
  --ink-muted: #a8ae9f;
  --accent: #d9a948;
  --accent-soft: #f7edd3;
  --accent-ink: #1a1305;
  --accent-strong: #8a6314;
  --navy: #0d3b73;
  --navy-soft: #e3ebf6;
  --header: var(--ink);
  --primary: #161816;
  --primary-dark: #000000;
  --primary-soft: #f7edd3;
  --ok: #176b3a;
  --ok-soft: #e3f4e6;
  --warn: #8a5607;
  --warn-soft: #fdf1d3;
  --orange: #a3470a;
  --orange-soft: #fde6d6;
  --bad: #b02e22;
  --bad-soft: #fde4e1;
  --na: #5d6976;
  --na-soft: #eceee8;
  --c1: #0d3b73;
  --c2: #161816;
  --c3: #d9a948;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(22, 24, 16, .05), 0 8px 24px rgba(22, 24, 16, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--ink);
}
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 800; }
h3.sub { font-size: 15px; font-weight: 800; margin: 22px 0 10px; }
.muted { color: var(--muted); }
p { margin: 4px 0; }

/* Estructura: barra lateral + área principal */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.main-col { min-width: 0; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto;
  padding: 22px 14px 16px; background: var(--ink); color: var(--ink-text);
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 22px; }
.side-brand b { display: block; font-size: 17px; font-weight: 800; line-height: 1.1; }
.side-brand small { color: var(--ink-muted); font-size: 12px; }
.side-x { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--ink-2); color: var(--ink-text); cursor: pointer; }
.logo { width: 50px; height: 50px; flex: none; display: block; }
img.logo { object-fit: contain; border-radius: 0; }
.side-t { margin: 18px 12px 6px; color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.side-t.hidden { display: none; }
.tabs { display: flex; flex-direction: column; gap: 2px; }
.tabs button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-muted); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.tabs button:hover { background: var(--ink-2); color: var(--ink-text); }
.tabs button.active { background: var(--ink-2); color: var(--accent); }
.tabs button .ico { width: 20px; height: 20px; }
.side-foot { margin-top: auto; padding-top: 18px; }
.user-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--ink-2); }
.user-info { display: flex; flex-direction: column; line-height: 1.25; }
.user-info strong { font-size: 14px; }
.rol { color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.user-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.side .btn.ghost { background: transparent; color: var(--ink-text); border-color: #3b3f35; }
.side .btn.ghost:hover { background: #31342b; }
.side :focus-visible { outline-color: var(--accent); }
.side-scrim { display: none; }

/* Encabezado de la pantalla */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 28px 14px; background: var(--bg);
}
.hola h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.hola p { margin: 2px 0 0; color: var(--muted); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; }
.visita-sel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.visita-sel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.visita-sel input {
  min-width: 340px; max-width: 100%; height: 46px; padding: 0 18px 0 46px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596053' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 16px center / 20px no-repeat;
}

main { padding: 6px 28px 48px; max-width: 1560px; margin: 0 auto; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px;
}
.card-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctx {
  display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-dark); font-size: 13px;
}
.hero { text-align: center; padding: 48px 18px; }
.hero .actions { justify-content: center; margin-top: 16px; }

/* Buttons & inputs */
.btn {
  font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--primary); background: var(--primary); color: #fff; white-space: nowrap;
}
.btn:hover { background: var(--primary-dark); }
.btn.ghost { background: var(--surface); color: var(--primary); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.icon-btn {
  border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
}
.icon-btn:hover { background: var(--bad-soft); color: var(--bad); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.search { width: 200px; }
textarea { width: 100%; resize: vertical; }

/* Stats chips */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip {
  display: flex; flex-direction: column; min-width: 110px; padding: 8px 12px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}
.chip b { font-size: 20px; }
.chip span { font-size: 12px; color: var(--muted); }
.chip.good { background: var(--ok-soft); border-color: transparent; } .chip.good b { color: var(--ok); }
.chip.mid { background: var(--warn-soft); border-color: transparent; } .chip.mid b { color: var(--warn); }
.chip.bad { background: var(--bad-soft); border-color: transparent; } .chip.bad b { color: var(--bad); }
.chip.orange { background: var(--orange-soft); border-color: transparent; } .chip.orange b { color: var(--orange); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
thead th {
  position: sticky; top: 0; background: var(--surface-2); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
th.calc, td.calc { background: var(--surface-2); white-space: nowrap; }
td.num, th.num { color: var(--muted); width: 36px; text-align: right; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
tr.empty td { text-align: center; color: var(--muted); padding: 28px; }
tr.sel td { background: var(--primary-soft); }
.grid td { padding: 3px 4px; }
.grid td input, .grid td select { border-color: transparent; background: transparent; padding: 5px 6px; }
.grid td input:hover, .grid td select:hover { border-color: var(--border); background: var(--surface); }
.grid td input[type=number] { text-align: right; }
.list td { padding: 9px 10px; }

.neg { color: var(--bad); font-weight: 700; }
.pos { color: var(--warn); font-weight: 700; }
.zero { color: var(--ok); }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-alerta { background: var(--warn-soft); color: var(--warn); }
.b-critico { background: var(--orange-soft); color: var(--orange); }
.b-vencido { background: var(--bad-soft); color: var(--bad); }
.b-na { background: var(--na-soft); color: var(--na); }
.pct { font-weight: 700; }
.pct.good { color: var(--ok); } .pct.mid { color: var(--warn); } .pct.bad { color: var(--bad); }

/* Checklist */
.checklist td.q { min-width: 280px; }
.checklist thead th { text-transform: none; }
.checklist .lab-name { font-weight: 700; width: 140px; }
.checklist select.cl { width: 90px; font-weight: 600; }
.grid td select.cl.v-si { background: var(--ok-soft); color: var(--ok); }
.grid td select.cl.v-no { background: var(--bad-soft); color: var(--bad); }
.grid td select.cl.v-na { background: var(--na-soft); color: var(--na); }
.cat-row th { background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; text-transform: none; position: static; }
tfoot td, tfoot th { background: var(--surface-2); font-weight: 600; border-top: 2px solid var(--border); }
.obs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.obs-grid label span { display: block; font-weight: 600; margin-bottom: 4px; }

/* Dashboard */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filters label span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
  border-top: 4px solid var(--primary);
}
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.kpi-value { font-size: 28px; font-weight: 800; }
.kpi-sub { font-size: 12px; color: var(--muted); }
.kpi.good { border-top-color: var(--ok); } .kpi.good .kpi-value { color: var(--ok); }
.kpi.mid { border-top-color: var(--warn); } .kpi.mid .kpi-value { color: var(--warn); }
.kpi.bad { border-top-color: var(--bad); } .kpi.bad .kpi-value { color: var(--bad); }
.charts { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.chart-box { position: relative; height: 290px; }

/* Config */
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edit-list { list-style: none; padding: 0; margin: 0 0 10px; }
.edit-list li { display: flex; gap: 6px; margin-bottom: 6px; }
.edit-list input { flex: 1; }
.inline { display: flex; gap: 6px; }
.block { display: block; width: 100%; margin-bottom: 6px; }
.wide { width: 100%; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.field input { width: 100%; }

/* Modal & toast */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 32, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal.hidden, .toast.hidden { display: none; }
.modal-box { background: var(--surface); border-radius: 12px; padding: 20px; width: min(560px, 100%); max-height: 90vh; overflow: auto; }
.modal-box h3 { margin-bottom: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cols-order { margin: 6px 0 10px; padding-left: 20px; columns: 2; font-size: 13px; }
.chk { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff;
  padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: var(--shadow);
}

/* Sucursales */
.ctx-sub { font-size: 12px; margin-top: 4px; }
.scroll-y { max-height: 420px; overflow: auto; }
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; padding: 10px 12px; background: var(--primary-soft); border-radius: 8px; font-size: 13px; }
.ficha dt { color: var(--muted); font-weight: 600; }
.ficha dd { margin: 0; }

/* Reporte sin rotación */
.sr-panel { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: 8px; background: var(--accent-soft); border: 1px solid #dfe8a8; }
.ro { display: block; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro.wrap { white-space: normal; line-height: 1.3; }
.tag-grupo { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--na-soft); color: var(--text); font-size: 12px; font-weight: 700; }
th.cap { background: var(--accent-soft); color: var(--primary-dark); }
td.cap { background: #fffbea; }
.grid td.cap input, .grid td.cap select { background: var(--surface); border-color: var(--border); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: gira .8s linear infinite; vertical-align: -2px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Checklist Intervención PDV — diseño CIAS */
.cl2 { --k-navy: #161816; --k-navy3: #2c3025; --k-gold: #8fb30f; --k-gold-d: #5c7a00; --k-panel2: #f6f7f2; --k-border: #e3e6dc; --k-ok: #1e7a4a; --k-bad: #b23a3a; }
.cl-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.cl-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--k-border); background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-tab small { font-weight: 600; font-size: 12px; opacity: .8; }
.cl-tab.active { background: var(--k-navy); color: #fff; border-color: var(--k-navy); }
.cl-tab:disabled { cursor: pointer; opacity: 1; }
.cl-lab-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cl-lab-name { flex: 1; min-width: 220px; font-size: 16px; font-weight: 800; color: var(--k-navy); border: 0; border-bottom: 2px solid var(--k-gold); border-radius: 0; background: transparent; padding: 6px 0; }
.cl-lab-name:focus { outline: none; border-bottom-color: var(--k-navy3); }
.cl-sec { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: var(--k-navy); text-transform: uppercase; letter-spacing: .4px; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--k-border); }
.cl-item { border: 1px solid var(--k-border); border-left: 4px solid var(--k-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--k-panel2); }
.cl-item.ok { border-left-color: var(--k-ok); background: #f3faf6; }
.cl-item.bad { border-left-color: var(--k-bad); background: #fcf4f4; }
.cl-item-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-item-t { font-size: 13.5px; }
.cl-item-t b { color: var(--k-navy); margin-right: 4px; }
.cl-tg { display: flex; gap: 6px; flex: none; }
.cl-tg button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--k-border); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.cl-tg button.si.on { background: rgba(30, 122, 74, .12); border-color: var(--k-ok); color: var(--k-ok); }
.cl-tg button.no.on { background: rgba(178, 58, 58, .12); border-color: var(--k-bad); color: var(--k-bad); }
.cl-tg button:disabled { cursor: default; }
.cl-subs { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--k-border); }
.cl-subs-t { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cl-subrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
.cl-subrow input { width: 18px; height: 18px; accent-color: var(--k-bad); }
.cl-coment { margin-top: 8px; font-size: 13px; }
.cl-obs { font-size: 14px; }
.cl-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cl-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--k-border); background: #dfe4ea; }
.cl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-foto-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(11, 31, 58, .75); color: #fff; cursor: pointer; }
.cl-foto-add { display: inline-flex; }
.cl-foto-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-picados { margin-top: 12px; padding: 14px; border: 1px dashed var(--k-gold); border-radius: 8px; background: var(--k-panel2); }
#pfFechas { display: flex; flex-direction: column; gap: 6px; max-width: 220px; }
@media (max-width: 800px) {
  .cl-item-h { flex-direction: column; align-items: stretch; }
  .cl-tg button { flex: 1; padding: 11px 8px; font-size: 14px; }
  .cl-lab-name { min-width: 0; width: 100%; }
}

/* Adjuntos y almacenamiento */
.adj-visor { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.adj-visor img { max-width: 100%; max-height: 70vh; border-radius: 8px; }
.adj-visor iframe { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; }
.almacen-opts { display: flex; flex-direction: column; gap: 4px; }
.pasos { padding-left: 20px; line-height: 2; }
.codigo-ms { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 800; letter-spacing: 2px; background: var(--primary-soft); color: var(--primary-dark); padding: 2px 10px; border-radius: 6px; }
.cl-foto.err { background: var(--bad-soft); }

/* Informe */
.btn.inf-gen { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 15px; padding: 10px 18px; }
.inf-check { list-style: none; padding: 0; margin: 0 0 10px; }
.inf-check li { padding: 7px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.inf-check li.ok { background: var(--ok-soft); }
.inf-check li.pend { background: var(--warn-soft); }
.inf textarea { font-size: 14px; }
.inf-foto { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.inf-foto-img { width: 180px; aspect-ratio: 16 / 9; }

/* Modo captura (celular) — diseño CIAS */
.btn.cap-start { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.cap-start:hover { background: #c8962f; }
.captura {
  --c-navy: #161816; --c-navy2: #2c3025; --c-navy3: #4a4f44; --c-gold: #d9a948; --c-bg: #f1f2ee; --c-soft: #eceee8;
  --c-border: #dcdfd2; --c-text: #161814; --c-muted: #596053; --c-ok: #176b3a; --c-okbg: #e3f4e6; --c-bad: #b02e22; --c-badbg: #fde4e1;
  --c-warn: #8F5509; --c-warnbg: #FDF1DC; --c-info: #6b4c0d; --c-infobg: #fbf3df;
  position: fixed; inset: 0; z-index: 40; background: var(--c-bg); overflow-y: auto;
  font-family: 'Manrope', system-ui, sans-serif; color: var(--c-text);
}
.captura .cap-mono, .captura .cap-code, .captura .cap-index, .captura .cap-saldo-v, .captura .cap-diff-v, .captura .cap-fecha { font-family: 'DM Mono', ui-monospace, monospace; }
.cap-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(135deg, var(--c-navy), var(--c-navy2)); color: #fff; border-bottom: 3px solid var(--c-gold); }
.cap-x { background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; cursor: pointer; flex: none; }
.cap-brand { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.cap-brand b { font-size: 15px; }
.cap-brand span { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; flex: none; }
.cap-track { width: 80px; height: 5px; background: rgba(255, 255, 255, .15); border-radius: 10px; overflow: hidden; }
.cap-track div { height: 100%; background: var(--c-gold); transition: width .4s; }
.cap-sync { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.cap-sync.pending { background: #FBBF24; }
.cap-sync.error { background: #F87171; }
.cap-body { max-width: 560px; margin: 0 auto; padding: 12px 12px 40px; }
.cap-over { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--c-soft); border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; }
.cap-over-l { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--c-muted); }
.cap-over-l span { display: flex; align-items: center; gap: 5px; }
.captura i.d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.captura i.d.ok { background: var(--c-ok); } .captura i.d.om { background: var(--c-warn); } .captura i.d.pe { background: var(--c-border); }
.cap-over-r { display: flex; gap: 6px; }
.cap-chipbtn { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 20px; border: 1.5px solid var(--c-border); background: var(--surface); color: var(--c-head, var(--c-navy)); cursor: pointer; }
.cap-chipbtn.warn { border-color: var(--c-warn); color: var(--c-warn); background: var(--c-warnbg); }
.cap-volver { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #FFF3CD; border: 1px solid #F4D38A; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.cap-volver button { font: inherit; font-size: 12px; border: 1px solid #ccc; background: var(--surface); border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.cap-card { background: var(--surface); border: 1px solid var(--c-soft); border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(22, 24, 16, .05), 0 8px 24px rgba(22, 24, 16, .07); }
.cap-head { display: flex; gap: 12px; align-items: flex-start; }
.cap-head-t { flex: 1; min-width: 0; }
.cap-foto { flex: none; width: clamp(104px, 30vw, 136px); height: clamp(104px, 30vw, 136px); padding: 0; border: 1px solid var(--c-soft); border-radius: 12px; background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.cap-foto img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface); }
.cap-foto.sin { cursor: default; }
.cap-foto.sin img { display: none; }
.cap-foto.sin::after { content: 'Sin foto'; display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--c-muted); }
.cap-foto-big { width: 100%; max-height: 62vh; object-fit: contain; display: block; margin: 10px 0 14px; background: var(--surface); }
.cap-index { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .8px; }
.cap-index .okt { color: var(--c-ok); } .cap-index .omt { color: var(--c-warn); }
.cap-code { font-size: 13px; color: var(--c-navy3); font-weight: 500; margin-top: 4px; }
.cap-name { font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--c-head, var(--c-navy)); margin: 4px 0 10px; }
.cap-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cap-meta span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--c-soft); color: var(--c-muted); }
.cap-meta span.lab { background: var(--c-infobg); color: var(--c-info); }
.cap-meta span.sd { background: var(--c-badbg); color: var(--c-bad); }
.cap-saldo { position: relative; overflow: hidden; margin-top: 14px; padding: 14px 18px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--c-navy), var(--c-navy2)); color: #fff; }
.cap-saldo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); opacity: .7; }
.cap-lbl { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }
.cap-saldo-v { font-size: 40px; font-weight: 500; line-height: 1; margin-top: 2px; letter-spacing: -1.5px; }
.cap-saldo-s { font-size: 12px; opacity: .8; margin-top: 3px; }
.cap-costo { text-align: right; display: flex; flex-direction: column; font-size: 12px; }
.cap-costo span { opacity: .6; } .cap-costo b { font-size: 15px; color: #F0E0B0; }
.cap-diff { margin-top: 10px; border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.cap-diff .cap-lbl { opacity: 1; color: var(--c-muted); }
.cap-diff-t { font-size: 13px; font-weight: 600; }
.cap-diff-v { font-size: 24px; font-weight: 500; }
.cap-diff.igual { background: var(--c-infobg); color: var(--c-info); }
.cap-diff.falta { background: var(--c-badbg); color: var(--c-bad); }
.cap-diff.sobra { background: var(--c-warnbg); color: var(--c-warn); }
.cap-field { margin-top: 16px; }
.cap-field > label { display: block; font-size: 12px; font-weight: 700; color: var(--c-head, var(--c-navy)); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.cap-field > label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-muted); }
.cap-input { width: 100%; font: inherit; font-size: 18px; color: var(--c-head, var(--c-navy)); background: var(--c-soft); border: 1.5px solid var(--c-border); border-radius: 10px; padding: 12px 14px; outline: none; }
.cap-input:focus { border-color: var(--c-navy3); background: var(--surface); box-shadow: 0 0 0 3px rgba(211, 242, 60, .45); }
#capFisico { font-family: 'DM Mono', monospace; font-size: 26px; text-align: center; }
.cap-toggle { display: flex; gap: 10px; }
.cap-toggle button { flex: 1; font: inherit; font-size: 17px; font-weight: 800; padding: 14px 8px; border-radius: 10px; border: 1.5px solid var(--c-border); background: var(--c-soft); color: var(--c-muted); cursor: pointer; }
.cap-toggle button.si { border-color: var(--c-ok); background: var(--c-okbg); color: var(--c-ok); }
.cap-toggle button.no { border-color: var(--c-bad); background: var(--c-badbg); color: var(--c-bad); }
.cap-toggle.warn { animation: capShake .4s; }
.cap-toggle.warn button { border-color: var(--c-bad); box-shadow: 0 0 0 3px rgba(168, 25, 43, .12); }
@keyframes capShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cap-req { display: none; font-size: 12px; color: var(--c-bad); font-weight: 600; margin-top: 6px; }
.cap-req.show { display: block; }
.cap-frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cap-frow .cap-fecha { flex: 1; min-width: 0; font-size: 18px; }
.cap-fb { flex: none; }
.cap-fbadge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cap-fbadge.ok { background: var(--c-okbg); color: var(--c-ok); }
.cap-fbadge.alerta { background: var(--c-warnbg); color: var(--c-warn); }
.cap-fbadge.critico { background: #FDE8DA; color: #C2570F; }
.cap-fbadge.vencido, .cap-fbadge.bad { background: var(--c-badbg); color: var(--c-bad); }
.cap-fdel { border: 0; background: none; font-size: 22px; color: var(--c-muted); cursor: pointer; }
.cap-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-small { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1.5px dashed var(--c-border); background: var(--surface); color: var(--c-navy2); cursor: pointer; }
.cap-small.on { background: var(--c-navy); color: #fff; border-style: solid; border-color: var(--c-navy); }
.cap-nav { display: flex; gap: 10px; margin-top: 20px; }
.cap-back { font: inherit; font-size: 15px; font-weight: 700; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--c-border); background: var(--surface); color: var(--c-muted); cursor: pointer; }
.cap-next { flex: 1; font: inherit; font-size: 17px; font-weight: 800; padding: 15px; border-radius: 12px; border: 0; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--c-navy), var(--c-navy2)); box-shadow: 0 4px 14px rgba(22, 24, 16, .22); }
.cap-next.fin { background: var(--c-gold); color: var(--accent-ink); box-shadow: none; }
.cap-next.warn { background: linear-gradient(135deg, var(--c-warn), #8A4E08); }
.cap-next.word { background: linear-gradient(135deg, #8a1f3d, #5a1428); }
.cap-next.full, .cap-back.full { display: block; width: 100%; margin-top: 10px; }
.cap-skip { text-align: center; margin-top: 10px; }
.cap-skip button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--c-muted); text-decoration: underline; cursor: pointer; padding: 6px; }
.cap-sheet-bg { position: fixed; inset: 0; z-index: 45; background: rgba(11, 30, 50, .5); display: flex; align-items: flex-end; justify-content: center; }
.cap-sheet { background: var(--surface); width: min(560px, 100%); max-height: 85vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 18px 16px 22px; }
.cap-sheet-h { font-size: 18px; font-weight: 800; color: var(--c-head, var(--c-navy)); }
.cap-muted { font-size: 13px; color: var(--c-muted); margin: 4px 0 10px; }
.cap-list { margin-top: 10px; }
.cap-li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--c-soft); }
.cap-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.cap-li-t span { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-fin { text-align: center; }
.cap-fin-ico { font-size: 40px; }
.cap-fin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.cap-fin-stats div { background: var(--c-bg); border-radius: 10px; padding: 10px 4px; display: flex; flex-direction: column; }
.cap-fin-stats b { font-family: 'DM Mono', monospace; font-size: 24px; color: var(--c-head, var(--c-navy)); }
.cap-fin-stats b.ok { color: var(--c-ok); } .cap-fin-stats b.om { color: var(--c-warn); } .cap-fin-stats b.pe { color: var(--c-muted); }
.cap-fin-stats span { font-size: 12px; color: var(--c-muted); }

/* En vivo */
.small { font-size: 12px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 8px; }
.live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live-on { background: var(--ok-soft); color: var(--ok); }
.live-on::before { animation: pulso 1.6s infinite; }
.live-off { background: var(--na-soft); color: var(--na); }
.live-error { background: var(--warn-soft); color: var(--warn); }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.acc { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; background: var(--surface); }
.acc > summary, .acc-fila { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: '▾'; color: var(--muted); font-size: 14px; transition: transform .15s; flex: none; }
.acc[open] > summary::after { transform: rotate(180deg); }
.acc > summary:hover { background: var(--primary-soft); border-radius: 10px; }
.acc > summary b, .acc-fila b { flex: none; }
.acc > summary span, .acc-fila span { color: var(--muted); font-size: 13px; text-align: right; flex: 1; min-width: 0; }
.acc[data-sec=sku] { --acc-bg: #fbf3df; --acc-bd: #ecd9a3; --acc-tx: #6b4c0d; --acc-bar: #d9a948; }
.acc[data-sec=insp] { --acc-bg: #eff0ea; --acc-bd: #dcdfd2; --acc-tx: #33372d; --acc-bar: #6f7766; }
.acc[data-sec=cedis] { --acc-bg: #fbf4d8; --acc-bd: #eee0a4; --acc-tx: #6f5300; --acc-bar: #d6b53a; }
.acc[data-sec] { border-color: var(--acc-bd); }
.acc[data-sec] > summary, .acc[data-sec] > summary:hover { background: var(--acc-bg); border-radius: 10px; }
.acc[data-sec][open] > summary { border-radius: 10px 10px 0 0; }
.acc[data-sec] > summary b { color: var(--acc-tx); }
.acc[data-sec] .acc-body { border-top-color: var(--acc-bd); background: color-mix(in srgb, var(--acc-bg) 28%, #fff); border-radius: 0 0 10px 10px; padding-top: 12px; }
.acc[data-sec] .bar { background: color-mix(in srgb, var(--acc-bar) 30%, #fff); }
.acc[data-sec] .bar span { background: var(--acc-bar); }
.acc-body .chip { background: var(--surface); border-color: #e3eaf3; }
.acc-body .chip.good { background: #e3f4e8; } .acc-body .chip.mid { background: #fff3d6; }
.acc-body .chip.bad { background: #fce3e3; } .acc-body .chip.orange { background: #fde7d9; }
.acc-body .table-wrap { background: var(--surface); }
.acc-vacio .acc-fila { cursor: default; }
.acc-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.cr-charts { grid-template-columns: 1fr 1fr; }
.cr-charts .chart-box { height: 230px; }
.cr-eri-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 6px 0; }
.cr-eri { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; background: var(--surface); }
.cr-eri.tot { background: #fbf3df; border-color: #ecd9a3; } .cr-eri.tot .cr-eri-t { color: #6b4c0d; }
.cr-eri.mue { background: #eff0ea; border-color: #dcdfd2; } .cr-eri.mue .cr-eri-t { color: #33372d; }
.cr-eri-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.cr-eri-v { display: flex; gap: 32px; margin: 6px 0 4px; }
.cr-eri-v span { display: block; font-size: 12px; color: var(--muted); }
.cr-eri-v b { font-size: 30px; line-height: 1.15; }
.cr-eri-v b.good { color: var(--ok); } .cr-eri-v b.mid { color: var(--warn); } .cr-eri-v b.bad, .cr-eri-v b.neg { color: var(--bad); } .cr-eri-v b.pos { color: var(--ok); }
.cr-eri small { color: var(--muted); font-size: 12px; }
.cr-lista-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
.cr-lista-cab h3.sub { margin: 0; }
.cr-vacio { padding: 18px 4px; }
.cr-vacio ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.9; color: var(--muted); }
.cr-meta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 4px 0 6px; }
.cr-meta input { width: 72px; text-align: right; }
.cr-meta-bar { display: flex; flex-direction: column; gap: 4px; min-width: 260px; flex: 1; max-width: 480px; }
tr.cr-opc td { color: var(--muted); }
.cr-tabla .cr-cod { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-tabla input.cr-fis { width: 96px; text-align: right; }
.cr-tabla .cr-res { white-space: nowrap; }
.cr-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; }
.hist-row { cursor: pointer; }
.hist-row:hover td { background: var(--primary-soft); }
.hist-row .chev { width: 24px; color: var(--muted); }
.hist-det > td { background: var(--surface-2); padding: 14px 16px; }
.hist-detalle h4.sub { margin: 16px 0 8px; }
.hz-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; }
.hz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vivo-strip { padding: 10px 14px; margin-bottom: 14px; }
.vivo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vivo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vivo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.vivo-chip:hover { border-color: var(--primary); background: var(--primary-soft); }
.bodega-panel h4.sub { margin: 16px 0 8px; }
.resp-acciones { margin-bottom: 10px; flex-wrap: wrap; }
.live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
.op-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.op-name { flex: 1; min-width: 0; }
.op-count { text-align: center; line-height: 1.1; }
.op-count b { display: block; font-size: 22px; }
.op-count span { font-size: 12px; color: var(--muted); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot-on { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.dot-mid { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.dot-off { background: var(--na); }
.bodega { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 10px; transition: background .6s; }
.bodega.flash { background: var(--primary-soft); border-color: var(--primary); }
.bod-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mod { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mod > span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.mod small { color: var(--muted); font-size: 12px; }
.bar { height: 6px; background: var(--na-soft); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.feed { position: sticky; top: 60px; max-height: 70vh; overflow: auto; }
.ev { display: flex; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ev:last-child { border-bottom: 0; }
.ev-t { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Login y usuario */
.hidden { display: none !important; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--login-bg, linear-gradient(160deg, #161816 0%, #0b0d09 100%)); }
.login-card { background: var(--surface); border-radius: 14px; padding: 28px; width: min(380px, 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); text-align: center; }
.login-card h1 { font-size: 20px; margin-top: 12px; }
.login-card .field { text-align: left; margin-top: 12px; }
.logo.big { width: 96px; height: 96px; margin: 0 auto; }
.login-msg { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); text-align: left; font-size: 13px; }
.login-msg.error { background: var(--bad-soft); color: var(--bad); }
.btn.full { width: 100%; margin-top: 16px; padding: 10px; }
.btn:disabled { opacity: .6; cursor: wait; }
.sync { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.sync.pending { background: var(--warn-soft); color: var(--warn); }
.sync.error { background: var(--bad-soft); color: var(--bad); cursor: help; }
.rol-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rol-admin { background: #ede4f7; color: var(--c3); }
.rol-jefe { background: #e1ecf8; color: var(--c2); }
.rol-operador { background: var(--primary-soft); color: var(--primary-dark); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.form-row .field { margin: 0; }
.roles-help { margin: 0 0 14px; padding-left: 18px; }
.roles-help li { margin-bottom: 4px; }

@media (max-width: 800px) {
  .top { padding: 10px 16px; }
  main { padding: 14px 16px 32px; }
  .charts, .cfg-grid, .live-grid { grid-template-columns: 1fr; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed { position: static; }
  .visita-sel select, .visita-sel input { min-width: 0; flex: 1; }
  .search { width: 100%; }
  .kpi-value { font-size: 24px; }
}

/* ---------- Accesibilidad y uso táctil ---------- */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, #fff); outline-offset: 2px; }
.cap-input:focus-visible, .cl-lab-name:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, #fff); outline-offset: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: 0 0 8px 8px; z-index: 100; }
.skip:focus { left: 12px; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
td.r, .kpi-value, .chip b, .cr-eri-v b, .cap-saldo-v, .cap-diff-v, .num { font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  .btn, .btn.sm, .tabs button, select, .vivo-chip, .cl-tab, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) { min-height: 44px; }
  .icon-btn, .cl-foto-del { min-width: 44px; min-height: 44px; }
  .actions, .resp-acciones { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 800px) {
  .top { padding: 10px 12px; gap: 8px; }
  .brand small { display: none; }
  .brand h1 { font-size: 16px; }
  .logo { width: 42px; height: 42px; }
  .visita-sel { width: 100%; gap: 8px; }
  .visita-sel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .visita-sel input, .visita-sel select { flex: 1 1 100%; min-width: 0; }
  .visita-sel .btn { flex: 1; }
  .user-box { width: 100%; justify-content: flex-end; }
}

/* Captura: barra inferior fija con las acciones del producto */
.cap-dock { position: sticky; bottom: 0; z-index: 3; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--c-border); box-shadow: 0 -6px 18px rgba(11, 46, 79, .08); }
.cap-dock-in { max-width: 560px; margin: 0 auto; display: flex; gap: 8px; }
.cap-dock .cap-back, .cap-dock .cap-skipbtn, .cap-dock .cap-next { min-height: 52px; }
.cap-dock .cap-back, .cap-dock .cap-skipbtn { flex: none; }
.cap-dock .cap-next { flex: 1; padding: 0 12px; }
.cap-skipbtn { font: inherit; font-size: 15px; font-weight: 700; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--c-border); background: var(--surface); color: var(--c-muted); cursor: pointer; }

.cap-match { width: 100%; min-height: 52px; margin-top: 10px; font: inherit; font-size: 16px; font-weight: 800; border-radius: 12px; border: 1.5px solid var(--c-ok); background: var(--c-okbg); color: var(--c-ok); cursor: pointer; }
.cap-match:active { transform: scale(.98); }
.cap-sheet select.cap-input { appearance: auto; }

/* Captura: la barra inferior queda siempre pegada al borde, aunque el contenido sea corto */
.captura { display: flex; flex-direction: column; }
.captura > .cap-body { width: 100%; flex: 1 0 auto; }
.captura > .cap-dock { margin-top: auto; }

/* Captura CEDIS: buscar por código y escáner */
.cc-etq { display: block; margin-bottom: 8px; }
.cc-busca { display: flex; gap: 8px; align-items: stretch; }
.cc-busca .cap-input { flex: 1; min-width: 0; }
.cc-scan { flex: none; min-height: 52px; padding: 0 14px; font: inherit; font-weight: 800; font-size: 15px; border-radius: 10px; border: 0; background: var(--c-navy); color: #fff; cursor: pointer; }
.cc-res { margin-top: 10px; }
.cc-vacio { color: var(--c-muted); padding: 10px 2px; margin: 0; line-height: 1.5; }
.cc-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; text-align: left; padding: 10px 12px; margin-top: 8px; font: inherit; color: var(--c-text); background: var(--surface); border: 1.5px solid var(--c-soft); border-radius: 12px; cursor: pointer; }
.cc-row:active { background: var(--c-soft); }
.cc-t { flex: 1; min-width: 0; }
.cc-t b { display: block; font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; color: var(--c-navy3); }
.cc-t span { display: block; font-size: 13px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-r { flex: none; font-size: 13px; font-weight: 800; color: var(--c-head, var(--c-navy)); }
.cc-nf { margin-top: 8px; padding: 12px; border: 1.5px dashed var(--c-warn); border-radius: 12px; background: var(--c-warnbg); }
.cc-nf p { margin: 0 0 8px; }
.cc-video { width: 100%; max-height: 50vh; background: #000; border-radius: 12px; display: block; }

/* Daños y mal estado en la carga certificada */
.cap-dano { width: 100%; min-height: 48px; margin-top: 10px; font: inherit; font-size: 15px; font-weight: 700; border-radius: 12px; border: 1.5px dashed var(--c-warn); background: var(--surface); color: var(--c-warn); cursor: pointer; }
.cap-dano.on { border-style: solid; background: var(--c-warnbg); }
.btn.on-dano { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.cr-dano-t { color: var(--warn); font-size: 12px; font-weight: 700; margin-top: 2px; }
.cr-keeper-t { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--text); }

/* ===== Rediseño: componentes base en la línea negro + lima ===== */
.card { border-radius: 20px; border-color: var(--border); box-shadow: none; padding: 20px; }
.btn { border-radius: 999px; padding: 9px 18px; background: var(--ink); border-color: var(--ink); color: var(--ink-text); transition: background .15s, transform .15s; }
.btn:hover { background: #2c3025; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent-strong); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.btn.sm { padding: 6px 13px; }
.top .btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.top .btn:not(.ghost):hover { background: #c8962f; }
input, select, textarea { border-radius: 12px; padding: 8px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }
thead th { background: var(--surface-2); color: var(--muted); font-weight: 700; }
tbody tr:hover { background: var(--surface-2); }
.top .visita-sel .btn { height: 46px; }
.bar { background: var(--border); }
.bar > span { background: var(--ink); }
.bar.thin { height: 8px; }
.bar.thin > span { background: var(--ink); }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }
.sync { background: #31342b; color: var(--ink-text); align-self: flex-start; }
.sync.pending { background: var(--warn-soft); color: var(--warn); }
.sync.error { background: var(--bad-soft); color: var(--bad); }
.vk-l, .pn-head h3 { font-weight: 800; }

/* Tarjetas KPI */
.vks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.vk { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.vk-l { color: var(--muted); font-size: 13px; }
.vk-v { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vk-s { color: var(--muted); font-size: 12.5px; }
.vk.lead { background: var(--accent); border-color: var(--accent); }
.vk.lead .vk-l, .vk.lead .vk-s { color: #3f4a10; }
.vk.lead .vk-v { color: var(--accent-ink); }
.vk.good .vk-v { color: var(--ok); }
.vk.mid .vk-v { color: var(--warn); }
.vk.bad .vk-v { color: var(--bad); }

/* Controles segmentados y chips */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--ink); color: var(--accent); }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pchip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pchip:hover { border-color: var(--ink); color: var(--text); }
.pchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Cuadrícula del panel */
.pn-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pn-grid.eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pn-grid > div:empty { display: none; }
.pn-grid.eq:has(> div:empty) { grid-template-columns: minmax(0, 1fr); }
.pn-a .card, .pn-b .card { margin-bottom: 18px; }
.pn-head { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pn-head h3 { font-size: 16px; }
.pn-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }

/* Regionales y vencimientos */
.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rl-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.rl-top span { color: var(--muted); }
.dona-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.chart-box.dona { height: 190px; width: 190px; flex: none; }
.dona-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dona-c b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.dona-c span { color: var(--muted); font-size: 12px; }
.leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.leyenda li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.leyenda b { margin-left: auto; font-variant-numeric: tabular-nums; }
.lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg0 { background: var(--bad); } .lg1 { background: var(--orange); } .lg2 { background: #e0b317; } .lg3 { background: var(--accent-strong); } .lg4 { background: #b4baa9; }

/* Móvil: menú lateral como cajón y tablas como tarjetas */
@media (max-width: 960px) {
  .pn-grid, .pn-grid.eq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .side-x, .menu-btn { display: grid; place-items: center; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15, 17, 12, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-abierto .side-scrim { opacity: 1; pointer-events: auto; }
  body.menu-abierto { overflow: hidden; }
  .top { padding: 14px 16px 10px; gap: 10px; }
  .hola { flex: 1; min-width: 0; }
  .hola h1 { font-size: 22px; }
  .visita-sel { width: 100%; margin-left: 0; }
  .visita-sel input { min-width: 0; width: 100%; flex: 1 1 100%; }
  main { padding: 4px 16px 40px; }
  .vks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vk { padding: 14px; }
  .vk-v { font-size: 26px; }
  table.cards-m thead { display: none; }
  table.cards-m, table.cards-m tbody, table.cards-m tr, table.cards-m td { display: block; width: 100%; }
  table.cards-m tr { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
  table.cards-m td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  table.cards-m td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: 12.5px; text-align: left; }
  table.cards-m td:first-child { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .side, .side-scrim { transition: none; } }
@media (min-width: 861px) { table.cards-m td:first-child { white-space: nowrap; } }
.user-info { text-align: left; }

/* Panel lateral plegable (escritorio) */
.side-min-btn { margin-left: auto; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: var(--ink-2); color: var(--ink-text); cursor: pointer; display: grid; place-items: center; }
.side-min-btn:hover { background: #31342b; color: var(--accent); }
.side-min-btn .ico { width: 18px; height: 18px; transition: transform .2s; }
@media (min-width: 861px) {
  .app { transition: grid-template-columns .2s ease; }
  body.side-min .app { grid-template-columns: 76px minmax(0, 1fr); }
  body.side-min .side { padding: 18px 10px 14px; align-items: stretch; }
  body.side-min .side-brand { flex-direction: column; gap: 10px; padding: 2px 0 14px; align-items: center; }
  body.side-min .side-brand > div { display: none; }
  body.side-min .side-min-btn { margin: 0; }
  body.side-min .side-min-btn .ico { transform: rotate(180deg); }
  body.side-min .side-t { display: none; }
  body.side-min .tabs button { font-size: 0; gap: 0; justify-content: center; padding: 12px 0; }
  body.side-min .tabs button .ico { width: 22px; height: 22px; }
  body.side-min .user-box { padding: 10px 6px; align-items: center; }
  body.side-min .user-info, body.side-min #syncState { display: none; }
  body.side-min .user-acts { flex-direction: column; }
  body.side-min .user-acts .btn { font-size: 0; gap: 0; padding: 9px; }
}
@media (max-width: 860px) { .side-min-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }
@media (min-width: 861px) { body.side-min .user-acts .btn .ico { width: 18px; height: 18px; } }

/* Velocímetro y paneles de gráficas */
.gauge { position: relative; height: 150px; max-width: 280px; margin: 8px auto 0; }
.gauge-c { position: absolute; inset: auto 0 6px 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gauge-c b { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.gauge-c span { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.gauge-n { text-align: center; margin-top: 10px; }
.pn-tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.pn-tri .card { margin-bottom: 18px; }
.graf { margin: 4px 0 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.graf > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.graf > summary::-webkit-details-marker { display: none; }
.graf > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.graf[open] > summary::after { transform: rotate(180deg); }
.graf > summary span { color: var(--muted); font-size: 13px; }
.graf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 16px 16px; }
.graf-c { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); min-width: 0; }
.graf-c.wide { grid-column: 1 / -1; }
.graf-c h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.graf-c .chart-box { height: 200px; }
.graf-c .chart-box.tall { height: 300px; }
.graf-c .chart-box.dona { width: 100%; height: 190px; }
@media (max-width: 960px) { .pn-tri, .graf-grid { grid-template-columns: minmax(0, 1fr); } }

.graf-grid.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0 4px; }
@media (max-width: 960px) { .graf-grid.dos { grid-template-columns: minmax(0, 1fr); } }
.graf-c .dona-wrap .chart-box.dona { width: 170px; height: 170px; }

/* Ojo de contraseña */
.pw-shell { position: relative; display: block; }
.pw-shell > input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }
.pw-slash, .pw-cut { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.2, .7, .2, 1); }
.pw-eye[aria-pressed="true"] .pw-slash, .pw-eye[aria-pressed="true"] .pw-cut { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .pw-slash, .pw-cut { transition: none; } }

/* Captura SKU: foto grande, bloque sistema contra físico, FEFO y vencimiento */
.cap-body { padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 10px; }
.cap-hero { background: var(--surface); border: 1px solid var(--c-soft); border-radius: 16px; padding: 10px; }
.cap-hero .cap-over { border: 0; padding: 0 0 8px; margin: 0; }
.cap-photo { display: block; width: 100%; height: clamp(120px, 24vh, 190px); padding: 0; border: 0; border-radius: 12px; background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.cap-photo img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.cap-photo.sin { cursor: default; display: grid; place-items: center; }
.cap-photo.sin img { display: none; }
.cap-photo.sin::after { content: 'Sin foto'; font-size: 13px; color: var(--c-muted); }
.cap-hero .cap-index { margin-top: 10px; }
.cap-hero .cap-name { margin: 2px 0 8px; font-size: 18px; }
.cap-cmp { display: grid; grid-template-columns: 1fr 1.3fr; background: var(--c-navy); border-radius: 16px; overflow: hidden; color: #f3f5ee; }
.cap-cmp > div { padding: 12px 14px; }
.cap-cmp-s { border-right: 1px solid #3b3f35; }
.cap-cmp .cap-lbl { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #a8ae9f); font-weight: 700; }
.cap-cmp .cap-saldo-v { font-size: 38px; line-height: 1.1; margin-top: 4px; }
.cap-cmp .cap-saldo-s { opacity: 1; color: #a8ae9f; }
.cap-cmp #capFisico { width: 100%; margin-top: 2px; padding: 0; height: 48px; background: transparent; border: 0; border-bottom: 2px solid var(--c-gold); border-radius: 0; color: var(--c-gold); font-size: 38px; text-align: left; box-shadow: none; outline: none; }
.cap-dd { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--c-gold); }
.cap-dd.falta { color: #ff9b91; }
.cap-box { background: var(--surface); border: 1px solid var(--c-soft); border-radius: 16px; padding: 12px 14px; }
.cap-box-l { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--c-head, var(--c-navy)); text-transform: uppercase; letter-spacing: .5px; }
.cap-box-l small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-muted); }
.cap-box .cap-toggle button { padding: 11px 8px; font-size: 16px; }
.cap-box .cap-frow .cap-fecha { padding: 10px 12px; }

/* Compactar para que la captura quepa sin desplazarse */
.cap-body { padding: 8px 10px 12px; gap: 8px; }
.cap-hero { padding: 8px 10px; }
.cap-hero .cap-over { padding: 0 0 6px; }
.cap-photo { height: clamp(88px, 15vh, 130px); }
.cap-hero .cap-index { margin-top: 6px; font-size: 10.5px; letter-spacing: .5px; }
.cap-hero .cap-code { margin-top: 1px; font-size: 12px; }
.cap-hero .cap-name { font-size: 16px; margin: 1px 0 6px; line-height: 1.25; }
.cap-hero .cap-meta span { font-size: 11px; padding: 2px 8px; }
.cap-cmp > div { padding: 9px 12px; }
.cap-cmp .cap-saldo-v { font-size: 32px; margin-top: 2px; }
.cap-cmp #capFisico { height: 42px; font-size: 32px; }
.cap-box { padding: 9px 12px; }
.cap-box-l { margin-bottom: 6px; }
.cap-box .cap-toggle button { padding: 9px 8px; font-size: 15px; }
.cap-box .cap-frow { margin-bottom: 6px; }
.cap-box .cap-frow .cap-fecha { padding: 8px 12px; font-size: 16px; }
.cap-box .cap-small { padding: 6px 12px; }

@media (max-height: 700px) {
  .cap-body { gap: 6px; padding-top: 6px; }
  .cap-photo { height: 72px; }
  .cap-hero .cap-index { display: none; }
  .cap-cmp .cap-saldo-v { font-size: 28px; }
  .cap-cmp #capFisico { height: 38px; font-size: 28px; }
  .cap-box { padding: 7px 12px; }
  .cap-box-l { margin-bottom: 4px; }
}

/* Búsqueda de producto y aviso de FEFO en picados */
.pf-prod { position: relative; }
.pf-sug { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; }
.pf-sug.hidden { display: none; }
.pf-sug-i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.pf-sug-i:hover, .pf-sug-i:focus-visible { background: var(--accent-soft); }
.pf-sug-i b { font-weight: 700; font-size: 13.5px; }
.pf-sug-i span { font-size: 12px; color: var(--muted); }
.pf-sug-v { padding: 10px; font-size: 13px; color: var(--muted); }
.pf-hint { margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-hint.warn { background: var(--warn-soft); color: var(--warn); }
.pf-hint.ok { background: var(--ok-soft); color: var(--ok); }

.pic-prof { margin-top: 6px; }
.pic-prof .cl-foto { width: 96px; }
.acc-body tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }

/* Inspección BPA y FEFO cómoda en el celular: se revisa el estante completo y se marca lo que estuvo mal */
@media (max-width: 860px) {
  .cl2 { padding: 12px 10px 96px; border-radius: 16px; }
  .cl2 .card-head { margin-bottom: 8px; gap: 8px; }
  .cl2 .card-head h2 { font-size: 18px; }
  .cl2 .card-head .muted { font-size: 12px; }
  .cl2 .card-head .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cl2 .card-head .actions .btn { width: 100%; padding-inline: 8px; font-size: 13px; }
  .cl2 .card-head .actions .btn:last-child { grid-column: 1 / -1; }
  #clSummary.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  #clSummary .chip { padding: 8px 6px; text-align: center; }
  #clSummary .chip b { font-size: 17px; }
  #clSummary .chip span { font-size: 11px; }
  .cl-tabs { flex-wrap: nowrap; scroll-snap-type: x proximity; margin: 0 -10px 10px; padding: 0 10px 6px; }
  .cl-tab { scroll-snap-align: start; padding: 8px 14px; max-width: 70vw; }
  .cl-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cl-lab-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .cl-lab-name { font-size: 15px; }
  /* "Marcar pendientes como Cumple" queda fijo abajo, a mano del pulgar */
  .cl-lab-head > .btn[data-act="cl-todo-cumple"] { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; min-height: 50px; background: var(--ink); color: var(--ink-text); border-color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(22, 24, 16, .28); }
  .cl-sec { margin: 16px 0 6px; font-size: 12px; position: sticky; top: 0; background: var(--surface); z-index: 2; padding-top: 6px; }
  .cl-item { padding: 10px 12px; margin-bottom: 8px; border-left-width: 6px; }
  .cl-item-t { font-size: 13.5px; line-height: 1.4; }
  .cl-item-h { gap: 8px; }
  .cl-tg { gap: 8px; }
  .cl-tg button { min-height: 46px; font-size: 14px; border-radius: 12px; }
  /* el comentario solo aparece cuando algo estuvo mal o ya tiene texto */
  .cl-item:not(.bad) .cl-coment:placeholder-shown { display: none; }
  .cl-subrow { padding: 9px 0; font-size: 14px; }
  .cl-subrow input { width: 22px; height: 22px; flex: none; }
  .cl-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-foto-pie { gap: 8px; }
  .cl-foto-add { width: 100%; justify-content: center; }
  .cl-picados .form-row { grid-template-columns: minmax(0, 1fr); }
  #pfFechas { max-width: none; }
  .cl-picados .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cl-picados .actions .btn:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 860px) {
  .cl2 .card-head .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cl2 .card-head .actions .btn { padding: 8px 4px; font-size: 12px; min-height: 40px; }
  .cl2 .card-head .actions .btn:last-child { grid-column: auto; }
  #clSummary.stats { display: flex; overflow-x: auto; gap: 6px; margin: 0 -10px 10px; padding: 0 10px 4px; scrollbar-width: none; }
  #clSummary .chip { flex: none; min-width: 84px; padding: 7px 8px; }
}
@media (max-width: 860px) {
  .top { position: static; }
  .cl-sec { top: 0; }
}
@media (max-width: 860px) {
  #clSummary.stats { flex-wrap: nowrap; }
  .cl2 .card-head .actions .btn { white-space: normal; line-height: 1.15; }
}

/* Carga certificada: formulario de entrega rediseñado, respaldo de hoja de ruta y fotos de incidencias */
.crp { margin: 14px 0; }
.crp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; padding-top: 10px; }
.crp-blk { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.crp-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.crp-bh b { font-size: 15px; }
.crp-n, .crh-n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 13px; font-weight: 800; }
.crp-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.crp-row:first-of-type { border-top: 0; }
.crp-row > span { flex: 1; min-width: 0; color: var(--text); }
.crp-row input { width: 130px; flex: none; }
.crp-row.col { flex-direction: column; align-items: stretch; gap: 6px; }
.crp-row.col input { width: 100%; }
.crp-val { font-size: 18px; font-variant-numeric: tabular-nums; }
.crp-sn button { min-width: 52px; }
.seg.crp-sn button.on.si { background: var(--ok); color: #fff; }
.seg.crp-sn button.on.no { background: var(--bad); color: #fff; }
.crp-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crp-tl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.crp-tt { display: flex; align-items: center; gap: 6px; }
.crp-tt input { flex: 1; min-width: 0; width: auto; }
.crp-tt i { font-style: normal; color: var(--muted); font-size: 12px; }
.crp-times em { display: inline-block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.crh { border: 1.5px dashed var(--accent-strong); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-radius: 16px; padding: 14px 16px; margin: 12px 0; }
.crh.ok { border-style: solid; border-color: var(--border); background: var(--surface); }
.crh-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crh-t { flex: 1; min-width: 220px; }
.crh-t b { font-size: 15px; }
.crh-t p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.crh-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.crh-badge.pend { background: var(--warn-soft); color: var(--warn); }
.crh-badge.ok { background: var(--ok-soft); color: var(--ok); }
.crh-grid { margin-top: 12px; }
.crh-pdf { display: flex; align-items: center; gap: 4px; grid-column: span 2; }
.crh-paso { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
  .crp-grid { grid-template-columns: minmax(0, 1fr); }
  .crp-row { flex-wrap: wrap; }
  .crp-row input { width: 100%; }
  .crp-times { grid-template-columns: minmax(0, 1fr); }
  .crh-h .btn { width: 100%; justify-content: center; }
}

/* Verificación de la entrega: todo conforme + excepciones */
.crp-grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; padding-top: 10px; align-items: start; }
.crp-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.crp-todo { border: 0; border-radius: 12px; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; cursor: pointer; }
.crp-todo:hover { background: #c8962f; }
.crp-estado { font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.crp-estado.ok { background: var(--ok-soft); color: var(--ok); }
.crp-estado.bad { background: var(--bad-soft); color: var(--bad); }
.crp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.crp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.crp-chip u { text-decoration: none; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .07); }
.crp-chip.ok { background: var(--ok-soft); border-color: #b9dfc1; color: var(--ok); }
.crp-chip.bad { background: var(--bad-soft); border-color: #f0b6b0; color: var(--bad); }
.crp-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 960px) { .crp-grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .crp-chip { width: 100%; justify-content: space-between; min-height: 46px; } .crp-todo { width: 100%; min-height: 46px; } }
.crp-grid2 .crp-times { grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
.crp-tt input[type=time] { min-width: 0; }

/* Exportar a Excel consolidado */
.expo-lista { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.expo-it { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; margin-bottom: 6px; }
.expo-it:hover { border-color: var(--ink); }
.expo-it input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.expo-it span { display: flex; flex-direction: column; gap: 1px; }
.expo-it small { color: var(--muted); font-size: 12.5px; }

/* Consolidados */
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cons-rep { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--surface); margin-top: 6px; }
.cons-acc { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cons-n { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.cons-n input { width: 100px; }
.cons-prox { margin-top: 14px; padding: 12px 16px; border: 1.5px dashed var(--border); border-radius: 14px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.cons-prox b { color: var(--text); }

/* Selector de bodegas */
.cons-bod-acc { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.cons-bod-lista { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.cons-bod { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cons-bod[hidden] { display: none; }
.cons-bod input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.cons-bod b { min-width: 52px; }

/* Paleta CIAS: negro + marino + dorado */
a, .link { color: var(--navy); }

.login-alt { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.login-alt a { color: var(--navy); font-weight: 700; }

/* Espacio ocupado */
.esp-fila { margin: 10px 0 14px; }
.esp-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.esp-bar { height: 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-top: 6px; }
.esp-bar i { display: block; height: 100%; background: var(--navy); }
.esp-bar i.mid { background: var(--accent); }
.esp-bar i.bad { background: var(--bad); }

.live-nuevo { background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.live-nuevo::before { animation: pulso 1.6s infinite; }

/* Resumen por trabajo */
.rt { margin-bottom: 14px; }
.rt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rt-top h3 { margin: 0; font-size: 17px; }
.rt-top h3 .muted { font-weight: 500; font-size: 14px; }
.rt-top .qs { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.rt-c { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.rt-c h4 { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rt-row { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.rt-big { font-size: 28px; font-weight: 800; line-height: 1.1; }
.rt-big.nv { color: var(--navy); } .rt-big.bad, .rt-mini .bad { color: var(--bad); } .rt-mini .go { color: var(--accent-strong); }
.rt-de { font-size: 15px; font-weight: 600; color: var(--muted); }
.rt-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rt-bar { height: 8px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; margin-top: 10px; }
.rt-bar i { display: block; height: 100%; background: var(--navy); }
.rt-mini { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
.rt-mini b { text-align: right; }
.rt-cmp { margin-top: 14px; }
.rt-cmp td, .rt-cmp th { text-align: right; } .rt-cmp td:first-child, .rt-cmp th:first-child { text-align: left; }
.rt-cmp tr.sel td { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }

.rt-med { font-size: 20px; font-weight: 800; line-height: 1.1; } .rt-med.nv { color: var(--navy); } .rt-med.bad { color: var(--bad); }
.rt-et { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin: 0 0 4px; }

/* Aviso de archivos base */
.aviso-base { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); margin-bottom: 14px; }
.aviso-base.rojo { border-color: var(--bad); background: var(--bad-soft); }
.aviso-base ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }


/* ---------- Navegación: visita de trabajo, consulta, pasos y barra inferior ---------- */
.trabajo-chip { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 520px; padding: 8px 12px; border-radius: 12px; border: 1px solid #e8d29b; background: var(--accent-soft); color: #5a420c; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.trabajo-chip i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(23, 107, 58, .15); }
.trabajo-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trabajo-chip b { font-weight: 600; color: var(--text); }
.trabajo-chip em { font-style: normal; font-weight: 600; color: var(--accent-strong); white-space: nowrap; display: none; }
.trabajo-chip.fuera em { display: inline; }
.trabajo-chip:hover { border-color: var(--accent); }
.pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: thin; }
.paso { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; font: inherit; cursor: pointer; color: var(--text); overflow: hidden; }
.paso b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso span { font-size: 12.5px; color: var(--muted); }
.paso i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), var(--border) var(--p)); }
.paso.listo span { color: var(--ok); font-weight: 600; }
.paso.listo i { background: linear-gradient(90deg, var(--ok) var(--p), var(--border) var(--p)); }
.paso.cur { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.paso:hover { border-color: var(--accent); }
.consulta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--navy); background: var(--navy-soft); color: var(--navy); font-size: 13.5px; }
.consulta-bar b { font-weight: 600; }
.tareas-cel .chk, .reg-sel .chk { display: flex; gap: 6px; align-items: center; font-size: 12.5px; white-space: nowrap; }
.reg-sel summary { cursor: pointer; font-size: 12.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-sel > div { display: grid; gap: 4px; padding: 8px 0; }
.bottom-nav { display: none; }
@media (max-width: 860px) {
  .trabajo-chip { order: 3; width: 100%; max-width: none; }
  .trabajo-chip em { display: inline; margin-left: auto; }
  .pasos { grid-auto-columns: minmax(140px, 46%); }
  .bottom-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0, 0, 0, .06); }
  .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
  .bottom-nav button .ico { width: 22px; height: 22px; }
  .bottom-nav button.active { color: var(--accent-strong); font-weight: 600; }
  .bottom-nav button.hidden { display: none; }
  main { padding-bottom: 96px; }
  body.menu-abierto .bottom-nav, body:has(.captura:not(.hidden)) .bottom-nav { display: none; }
}

/* ---------- OKR trimestral (Panel) ---------- */
.okr { margin-bottom: 14px; }
.okr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.okr-top h3 { margin: 0; flex: 1; min-width: 200px; }
.okr-est { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--na-soft); color: var(--na); }
.okr-est.ok { background: var(--ok-soft); color: var(--ok); } .okr-est.mid { background: var(--warn-soft); color: var(--warn); }
.okr-ks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.okr-k { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.okr-k > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.okr-k b { font-size: 26px; font-weight: 800; line-height: 1.15; }
.okr-k small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.okr .ok { color: var(--ok); } .okr .mid { color: var(--warn); } .okr .bad { color: var(--bad); }
.okr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.okr-grid h4 { margin: 0 0 8px; font-size: 13px; }
.okr-fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) 130px; gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 6px; color: var(--muted); }
.okr-fila.sel { color: var(--text); font-weight: 700; }
.okr-bar { height: 8px; border-radius: 4px; background: var(--na-soft); overflow: hidden; }
.okr-bar i { display: block; height: 8px; border-radius: 4px; }
.okr-fila em { font-style: normal; }
.okr-ops { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
.okr-crono td, .okr-crono th { font-size: 12.5px; }
.okr-crono tr.sel td { background: var(--accent-soft); }
.okr-labs { margin-top: 14px; }
.okr-labs summary { cursor: pointer; font-weight: 700; font-size: 13.5px; padding: 6px 0; }
.okr-labs tr.tot td { border-top: 1.5px solid var(--border); }
@media (max-width: 860px) {
  .okr-ks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okr-k b { font-size: 21px; }
  .okr-grid { grid-template-columns: minmax(0, 1fr); }
  .okr-fila { grid-template-columns: 26px minmax(0, 1fr) 110px; }
  body.rol-jefe .bottom-nav { display: none; }
  body.rol-jefe main { padding-bottom: 40px; }
}

/* =================== Temas: actual (por defecto), claro y oscuro =================== */
/* ---- Claro: también la barra lateral y el inicio de sesión en tonos claros ---- */
:root[data-theme="claro"] { --login-bg: linear-gradient(160deg, #f7f3e7 0%, #ece6d3 100%); }
[data-theme="claro"] .side { background: #fbf8ef; color: var(--text); border-right: 1px solid var(--border); }
[data-theme="claro"] .side-brand small, [data-theme="claro"] .side-t, [data-theme="claro"] .rol { color: var(--muted); }
[data-theme="claro"] .tabs button { color: #4a5145; }
[data-theme="claro"] .tabs button:hover { background: #f1ead6; color: var(--text); }
[data-theme="claro"] .tabs button.active { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="claro"] .user-box { background: #f3eedf; }
[data-theme="claro"] .side .btn.ghost { color: var(--text); border-color: #d9d2bd; }
[data-theme="claro"] .sync { background: #e8e1cc; color: var(--text); }
[data-theme="claro"] .side-x, [data-theme="claro"] .side-min-btn { background: #efe8d4; color: var(--text); }
[data-theme="claro"] .side-min-btn:hover { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="claro"] .login-card { box-shadow: 0 10px 30px rgba(90, 70, 20, .12); }

/* ---- Oscuro: misma estética (negro, dorado, tarjetas redondeadas) con el contenido en tonos oscuros ---- */
:root[data-theme="oscuro"] {
  color-scheme: dark;
  --bg: #0e100c; --surface: #181b15; --surface-2: #1f231b; --border: #2e3328;
  --text: #eceee6; --muted: #a2a997;
  --ink: #0a0b08; --ink-2: #23271f; --ink-text: #f3f5ee; --ink-muted: #8f9686;
  --accent: #d9a948; --accent-soft: #33291a; --accent-ink: #1a1305; --accent-strong: #e9c46f;
  --navy: #9cbcea; --navy-soft: #1a2638;
  --primary: #23271f; --primary-soft: #33291a;
  --ok: #5ec98d; --ok-soft: #15301f; --warn: #e6b34e; --warn-soft: #36290f; --orange: #f0955a; --orange-soft: #3a2214;
  --bad: #ff7d70; --bad-soft: #3d1714; --na: #a9b2bb; --na-soft: #262a22;
  --c1: #9cbcea; --c2: #eceee6; --c3: #d9a948; --chart-ink: #e6e9de;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --login-bg: linear-gradient(160deg, #161816 0%, #050604 100%);
}
[data-theme="oscuro"] .side { border-right: 1px solid #1c1f19; }
[data-theme="oscuro"] .btn { background: var(--ink-2); border-color: #3a4033; color: var(--ink-text); }
[data-theme="oscuro"] .btn.ghost { background: transparent; border-color: #3a4033; color: var(--text); }
[data-theme="oscuro"] input, [data-theme="oscuro"] select, [data-theme="oscuro"] textarea { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-theme="oscuro"] input:focus, [data-theme="oscuro"] select:focus, [data-theme="oscuro"] textarea:focus, [data-theme="oscuro"] :focus-visible { outline-color: var(--accent); border-color: var(--accent); }
[data-theme="oscuro"] .bar > span, [data-theme="oscuro"] .bar.thin > span { background: var(--accent); }
[data-theme="oscuro"] .seg button.on { background: var(--accent); color: var(--accent-ink); }
[data-theme="oscuro"] th.calc, [data-theme="oscuro"] td.calc { background: var(--surface-2); }
[data-theme="oscuro"] td.cap { background: #2a2414; }
[data-theme="oscuro"] .trabajo-chip { border-color: #5a4a22; color: #e9d7a6; }
[data-theme="oscuro"] .rol-admin { background: #2c2240; } [data-theme="oscuro"] .rol-jefe { background: #1c2a3d; }
[data-theme="oscuro"] .cl2 { --k-navy: #0a0b08; --k-navy3: #2c3025; --k-panel2: var(--surface-2); --k-border: var(--border); --k-ok: #5ec98d; --k-bad: #ff7d70; }
[data-theme="oscuro"] .cl-item.ok { background: #14261b; } [data-theme="oscuro"] .cl-item.bad { background: #2c1615; }
[data-theme="oscuro"] .captura, [data-theme="oscuro"] .cap-sheet { --c-bg: #0e100c; --c-soft: #2e3328; --c-border: #3a4033; --c-text: #eceee6; --c-muted: #a2a997; --c-okbg: #15301f; --c-badbg: #3d1714; --c-warnbg: #36290f; --c-infobg: #2a2414; --c-ok: #5ec98d; --c-bad: #ff7d70; --c-warn: #e6b34e; --c-info: #e9c46f; }
[data-theme="oscuro"] .cap-volver button { border-color: var(--border); color: var(--text); }
[data-theme="oscuro"] .acc[data-sec=sku] { --acc-bg: #2a2414; --acc-bd: #4a3d1e; --acc-tx: #e9c46f; }
[data-theme="oscuro"] .acc[data-sec=insp] { --acc-bg: #20241c; --acc-bd: #3a4033; --acc-tx: #d5d9cc; }
[data-theme="oscuro"] .acc[data-sec=cedis] { --acc-bg: #2b2611; --acc-bd: #4d431c; --acc-tx: #e8cf73; }
[data-theme="oscuro"] .acc-body .chip { border-color: var(--border); }
[data-theme="oscuro"] .acc-body .chip.good { background: #15301f; } [data-theme="oscuro"] .acc-body .chip.mid { background: #36290f; }
[data-theme="oscuro"] .acc-body .chip.bad { background: #3d1714; } [data-theme="oscuro"] .acc-body .chip.orange { background: #3a2214; }
[data-theme="oscuro"] .cr-eri.tot { background: #2a2414; border-color: #4a3d1e; } [data-theme="oscuro"] .cr-eri.tot .cr-eri-t { color: #e9c46f; }
[data-theme="oscuro"] .cr-eri.mue { background: #20241c; border-color: #3a4033; } [data-theme="oscuro"] .cr-eri.mue .cr-eri-t { color: #d5d9cc; }
[data-theme="oscuro"] .okr-crono tr.sel td, [data-theme="oscuro"] .rt-cmp tr.sel td { background: #2a2414; }
[data-theme="oscuro"] img.foto, [data-theme="oscuro"] .cap-foto img, [data-theme="oscuro"] .cap-foto-big { background: #fff; }   /* las fotos de producto siguen sobre blanco */

/* Selector de tema */
.tema-opts { display: grid; gap: 8px; margin-top: 10px; }
.tema-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tema-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.tema-opt i { width: 44px; height: 30px; border-radius: 8px; flex: none; border: 1px solid var(--border); }
.tema-opt small { display: block; color: var(--muted); font-size: 12px; }
.login-tema { margin-top: 14px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }

[data-theme="oscuro"] .captura, [data-theme="oscuro"] .cap-sheet { --c-head: #eceee6; }
[data-theme="oscuro"] .cap-dock { background: rgba(14, 16, 12, .97); }
[data-theme="oscuro"] .cap-input { background: var(--c-soft); color: var(--c-text); }
[data-theme="oscuro"] .cap-small.on, [data-theme="oscuro"] .cl-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* oscuro: textos que usaban --primary-dark (negro) sobre fondos suaves */
:root[data-theme="oscuro"] .ctx, :root[data-theme="oscuro"] .cat-row th, :root[data-theme="oscuro"] th.cap, :root[data-theme="oscuro"] .codigo-ms, :root[data-theme="oscuro"] .rol-operador { color: var(--text); }

/* ---------- Panel del rol Jefe (OKR 2 y 3) ---------- */
.jf-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px; }
.jf-okrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jf-okrs .okr-k b { font-size: 30px; }
.jf-okrs .okr-k b small { font-size: 14px; font-weight: 600; color: var(--muted); }
.jf-bar { height: 10px; margin: 6px 0 4px; }
.jf-bar i { height: 10px; }
.jf-graf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jf .okr-fila { grid-template-columns: 26px minmax(0, 1fr) 150px; }
.jf-h { margin: 16px 0 8px; font-size: 13px; }
.jf-ult > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.jf-ult em { font-style: normal; font-size: 12.5px; font-weight: 600; }
.jf-ult .ok { color: var(--ok); } .jf-ult .bad { color: var(--bad); }
@media (max-width: 860px) {
  .jf-okrs, .jf-graf { grid-template-columns: minmax(0, 1fr); }
  .jf .okr-fila { grid-template-columns: 26px minmax(0, 1fr) 120px; }
  .jf-ult > div { grid-template-columns: minmax(0, 1fr) auto; }
  .jf-ult > div span { grid-column: 1 / -1; }
}

/* ---------- Cambio de contraseña (Equipo y roles) ---------- */
.clave-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 150px; }
.clave-est { font-size: 12px; font-weight: 600; color: var(--muted); }
.clave-est.ok { color: var(--ok); } .clave-est.bad { color: var(--bad); }

/* ---------- Captura CEDIS: código de barras por vincular ---------- */
.cc-pend { background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.cc-pend p { margin: 0 0 8px; color: var(--c-head, var(--text)); }
.cc-pend-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-vin-cod { font-family: ui-monospace, monospace; font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--c-head, var(--text)); }
.cc-vin-prod { margin: 0 0 10px; color: var(--c-head, var(--text)); }
td.mono { font-family: ui-monospace, monospace; }

/* ---------- Checklist: qué muestra cada foto de observación ---------- */
.cl-foto-w { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-foto-que { width: 100%; font-size: 12px; padding: 4px 6px; min-height: 30px; }
.cl-sec-ayuda { margin: -4px 0 8px; }
#clFotos-obs .cl-fotos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 860px) { #clFotos-obs .cl-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }