/* Etiquetas QR · estilos del panel y de las páginas públicas.
   Basado en la demo de referencia (docs/demo/app/static/style.css): se copia
   tal cual y las diferencias van al final, en "Ajustes para celular".
   Fuente Inter servida desde nuestro servidor (licencia OFL en fonts/). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens */
:root {
  --bg: #ffffff;
  --bg-subtle: #f7f8f9;
  --bg-hover: #f3f5f7;
  --text: #1d2125;
  --text-2: #464d55;
  --muted: #6b7280;
  --faint: #9aa1a9;
  --border: #e6e8eb;
  --border-strong: #d5d9de;

  --accent: #2e5c8a;
  --accent-hover: #244b72;
  --accent-weak: #eef3f8;
  --accent-soft: #c9d8e7;

  --st-asignada: #a3abb4;
  --st-completada: #c49030;
  --st-recibida: #3e8c62;
  --danger: #b42318;
  --danger-weak: #fdf1f0;
  --warn-weak: #fbf6ea;

  --radius: 8px;
  --radius-sm: 6px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-2); word-break: break-all; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: 0.02em; }
.icon { flex: none; }

/* ------------------------------------------------------------ brand */
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand .brandmark { color: var(--accent); }

.client-logo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 22%; background: var(--logo); color: #fff; font-weight: 600; letter-spacing: 0.02em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ------------------------------------------------------------ status / plan pills */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  padding: 1px 8px 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  white-space: nowrap;
}
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-asignada); }
.status-completada i { background: var(--st-completada); }
.status-recibida i { background: var(--st-recibida); }
.status-lote i { background: var(--accent); }

.plan { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.plan-premium { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-weak); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--st-asignada); }
.dot-completada { background: var(--st-completada); }
.dot-recibida { background: var(--st-recibida); }
.dot-total { background: var(--accent); }

/* ------------------------------------------------------------ buttons & forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-hover); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-block { width: 100%; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--muted); border: 0; background: none; cursor: pointer; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field-label .opt { font-weight: 400; color: var(--faint); }
input[type=text], input[type=number], input[type=tel], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; height: 38px; padding: 0 11px;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
textarea { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; }
select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input[readonly] { background: var(--bg-subtle); color: var(--text-2); }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-error { font-size: 12.5px; color: var(--danger); }
.form-error { font-size: 13px; color: var(--danger); background: var(--danger-weak); border: 1px solid #f3d3cf; padding: 9px 12px; border-radius: var(--radius-sm); }
.hint { font-size: 12.5px; color: var(--muted); }
.hint-warn { color: #8a6116; background: var(--warn-weak); border: 1px solid #efe1bd; padding: 8px 10px; border-radius: var(--radius-sm); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12.5px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); cursor: pointer; }
.chip:hover { border-color: var(--border-strong); background: var(--bg-hover); }

/* ------------------------------------------------------------ panel shell */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 12px 16px; border-right: 1px solid var(--border); background: var(--bg);
}
.sidebar-brand { padding: 2px 10px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500;
}
.nav a .icon { color: var(--faint); }
.nav a:hover { background: var(--bg-hover); color: var(--text); }
.nav a.active { background: var(--accent-weak); color: var(--accent); }
.nav a.active .icon { color: var(--accent); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.live { display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; color: var(--muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-recibida); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.user { display: flex; align-items: center; gap: 9px; padding: 10px 6px 0 10px; border-top: 1px solid var(--border); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-subtle); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
.user-name { flex: 1; font-weight: 500; }

.main { padding: 32px 40px 56px; max-width: 1240px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; }
.actions { display: flex; gap: 8px; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }

.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 20px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 14px; font-weight: 600; }
.card > .card-title + .form { margin-top: 18px; }
.card-sub { font-size: 12.5px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 20px; }

.notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 20px; border: 1px solid var(--accent-soft); background: var(--accent-weak); color: var(--accent); border-radius: var(--radius-sm); font-size: 13px; }
.notice-warn { border-color: #efe1bd; background: var(--warn-weak); color: #8a6116; }

/* ------------------------------------------------------------ tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); white-space: nowrap; }
.table td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th.num, .table td.num { text-align: right; }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--bg-hover); }
.table tr.sel td { background: var(--accent-weak); }
.table tr.flash td { background: #f2f8f4; }
.table tr.flash td:first-child { box-shadow: inset 2px 0 0 var(--st-recibida); }
.client-cell { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; white-space: nowrap; }
.table td.mono { white-space: nowrap; }
.route { color: var(--text-2); }
.route .arrow { color: var(--faint); margin: 0 4px; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.table-foot { padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); }
.table-mov td:first-child { width: 150px; }
.table-mov td:nth-child(3) { width: 200px; }
.link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }

/* ------------------------------------------------------------ resumen */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.kpi-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--faint); }
.kpi.bump { border-color: var(--accent-soft); }

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .baseline { stroke: var(--border-strong); stroke-width: 1; }
.chart .tick { fill: var(--faint); font-size: 11px; }
.chart .xlabel { fill: var(--muted); font-size: 11px; }
.chart .vlabel { fill: var(--text-2); font-size: 12px; font-weight: 600; }
.chart .bar { fill: var(--accent); }
.chart .bar.partial { fill: var(--accent-soft); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover { fill: rgba(46, 92, 138, .05); }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.chart-legend i.partial { background: var(--accent-soft); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

.event { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------ etiquetas: filtros + drawer */
.filters { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.filters .search { position: relative; flex: 1 1 260px; }
.filters .search .icon { position: absolute; left: 10px; top: 10px; color: var(--faint); }
.filters .search input { padding-left: 34px; }
.filters select { width: auto; min-width: 170px; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(29, 33, 37, .12); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 50;
  background: var(--bg); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(29, 33, 37, .05);
}
body.drawer-open .drawer { transform: none; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-body { flex: 1; overflow-y: auto; }
.det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.det-code { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.det-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.det-section:last-child { border-bottom: 0; }
.det-section h3 { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13.5px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: start; position: relative; padding-bottom: 12px; font-size: 13.5px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; border: 1.5px solid var(--border-strong); background: var(--bg); position: relative; z-index: 1; }
.timeline li.done .tl-dot { border-color: var(--accent); background: var(--accent); }
.timeline li.pending { color: var(--faint); }
.timeline .tl-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.signature { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); padding: 8px; display: flex; justify-content: center; }
.signature img { max-width: 100%; max-height: 120px; }
.det-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.det-qr { display: flex; gap: 14px; align-items: center; }
.det-qr img { width: 84px; height: 84px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }

/* ------------------------------------------------------------ generar */
.gen-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.preview-box { display: flex; justify-content: center; padding: 28px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); }

/* ------------------------------------------------------------ clientes */
.client-head { display: flex; align-items: center; gap: 16px; }
.client-head h1 { display: flex; align-items: center; gap: 10px; }
.kpis.compact .kpi-value { font-size: 24px; }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: 13px; }
.hbar-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { height: 14px; }
.hbar-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 3px; }
.hbar-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
#mapa { height: 340px; border-radius: var(--radius-sm); border: 1px solid var(--border); z-index: 0; }
.leaflet-container { font-family: var(--font); background: var(--bg-subtle); }
.leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(.92); }

/* ------------------------------------------------------------ tooltip */
.tip {
  position: fixed; z-index: 100; pointer-events: none; padding: 6px 9px;
  background: var(--text); color: #fff; font-size: 12px; line-height: 1.35; border-radius: 5px;
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.tip.show { opacity: 1; }

/* ------------------------------------------------------------ login */
.login-page { background: var(--bg-subtle); }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; }
.login-card { width: 100%; max-width: 360px; padding: 28px; }
.login-card h1 { font-size: 18px; }
.login-brand .brand { font-size: 17px; }

/* ------------------------------------------------------------ etiqueta dibujada desde una plantilla (label.js) */
.lbl { position: relative; overflow: hidden; color: #111; font-family: var(--font); line-height: 1.25;
       -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lbl-el { position: absolute; box-sizing: border-box; }
.lbl-text { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1em; outline: none; }
.lbl-qr img, .lbl-image img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.lbl-logo { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; font-weight: 600; letter-spacing: .02em; }
.lbl-field { display: flex; align-items: flex-end; gap: 2.5mm; }
.lbl-field span { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; line-height: 1; padding-bottom: .4mm; outline: none; }
.lbl-field i { flex: 1; align-self: stretch; display: block; }
.lbl-line i { position: absolute; display: block; }
.lbl-empty { display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9aa1a9; font-size: 9pt; border: 1px dashed #d5d9de; }

.labels-grid { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 20px; }
.label-wrap { display: flex; flex-direction: column; gap: 10px; }
.label-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.label-sheet.lbl { box-shadow: 0 0 0 1px var(--border-strong); border-radius: 2mm; }

.preview-fit { position: relative; width: 100%; height: 600px; }
.preview-fit .lbl, .tpl-thumb .lbl { box-shadow: 0 0 0 1px var(--border-strong), 0 1px 3px rgba(29, 33, 37, .06); }
.field-foot { display: flex; gap: 16px; font-size: 13px; margin-top: 2px; }

/* ------------------------------------------------------------ formulario de cliente */
.seg-form label { flex: 1; position: relative; cursor: pointer; }
.seg-form label + label { border-left: 1px solid var(--border-strong); }
.seg-form input { position: absolute; opacity: 0; pointer-events: none; }
.seg-form span { display: flex; align-items: center; justify-content: center; height: 36px; font-size: 13.5px; color: var(--text-2); }
.seg-form input:checked + span { background: var(--accent-weak); color: var(--accent); font-weight: 500; }
.seg-form input:focus-visible + span { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.logo-edit { display: flex; gap: 16px; align-items: flex-start; }
.logo-edit-fields { display: flex; flex-direction: column; gap: 10px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px transparent; transition: box-shadow .15s; }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent-soft); outline-offset: 4px; }
.form-actions { display: flex; gap: 8px; }
.danger-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.client-preview { justify-content: flex-start; }
.client-preview-head { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 16px 18px; width: 100%; max-width: 380px; }
.notice a { font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------------------ galería de plantillas */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.tpl-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.tpl-thumb { position: relative; display: block; height: 260px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); overflow: hidden; }
.tpl-thumb:hover { background: var(--bg-hover); }
.tpl-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.tpl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-title a { color: var(--text); }
.tpl-meta { font-size: 12.5px; color: var(--muted); }
.tpl-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tpl-actions form { display: contents; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-weak); border-color: #f3d3cf; color: var(--danger); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-weak); }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }

/* ------------------------------------------------------------ editor de plantillas */
.editor-page .main { padding: 0; max-width: none; height: 100vh; overflow: hidden; }
.ed { display: grid; grid-template-columns: 208px minmax(0, 1fr) 272px; grid-template-rows: 56px minmax(0, 1fr); height: 100vh; }
.ed-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ed-name { font: inherit; font-size: 15px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 8px; width: 260px; color: var(--text); background: transparent; }
.ed-name:hover { border-color: var(--border); }
.ed-name:focus { border-color: var(--accent); outline: none; }
.ed-status { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ed-status.is-dirty { color: #8a6116; }
.ed-status.is-error { color: var(--danger); }
.ed-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ed-zoom { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 6px; }
.ed-zoom .icon-btn { font-size: 17px; width: 28px; height: 28px; }
.ed-zoom-val { font: inherit; font-size: 12.5px; min-width: 50px; height: 28px; border: 0; background: none; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.ed-zoom-val:hover { color: var(--accent); }

.ed-tools, .ed-props { overflow-y: auto; background: var(--bg); padding: 16px 14px 24px; }
.ed-tools { border-right: 1px solid var(--border); }
.ed-props { border-left: 1px solid var(--border); padding: 0 0 24px; }
.ed-section-title { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 4px 0 10px; }
.ed-section-title:not(:first-child) { margin-top: 22px; }
.ed-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-tool-grid button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 66px;
  font: inherit; font-size: 12px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s;
}
.ed-tool-grid button .icon { color: var(--muted); }
.ed-tool-grid button:hover { border-color: var(--accent-soft); background: var(--accent-weak); color: var(--accent); }
.ed-tool-grid button:hover .icon { color: var(--accent); }
.ed-help { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.ed-vars, .ed-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.ed-vars code { margin-right: 4px; }
.ed-keys li { display: flex; justify-content: space-between; gap: 8px; }
kbd { font-family: var(--font); font-size: 11px; color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

.ed-canvas {
  display: flex; overflow: auto; padding: 48px;
  background-color: #f1f3f5;
  background-image: radial-gradient(#dfe3e7 1px, transparent 1px); background-size: 18px 18px;
}
.ed-sizer { position: relative; margin: auto; flex: none; }
.ed-paper { position: absolute; left: 0; top: 0; transform-origin: 0 0; --z: 1; box-shadow: 0 0 0 calc(1px / var(--z)) #d5d9de, 0 calc(2px / var(--z)) calc(10px / var(--z)) rgba(29, 33, 37, .07); }
.ed-paper.lbl { overflow: visible; }
.ed-paper .lbl-el { cursor: move; }
.ed-paper .lbl-el:hover:not(.is-sel) { outline: calc(1px / var(--z)) solid var(--accent-soft); }
.ed-paper .lbl-el.is-editing { cursor: text; outline: calc(1.5px / var(--z)) solid var(--accent); }
.ed-paper .lbl-el.is-editing .lbl-text { user-select: text; }
.ed-sel { position: absolute; outline: calc(1.5px / var(--z)) solid var(--accent); pointer-events: none; z-index: 1000; }
.ed-handle {
  position: absolute; width: calc(10px / var(--z)); height: calc(10px / var(--z)); transform: translate(-50%, -50%);
  background: #fff; border: calc(1.5px / var(--z)) solid var(--accent); border-radius: 50%; pointer-events: auto;
}
.ed-h-nw { left: 0; top: 0; cursor: nwse-resize; }   .ed-h-n { left: 50%; top: 0; cursor: ns-resize; }
.ed-h-ne { left: 100%; top: 0; cursor: nesw-resize; } .ed-h-e { left: 100%; top: 50%; cursor: ew-resize; }
.ed-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .ed-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.ed-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .ed-h-w { left: 0; top: 50%; cursor: ew-resize; }
.ed-h-n, .ed-h-s { width: calc(16px / var(--z)); height: calc(7px / var(--z)); border-radius: calc(4px / var(--z)); }
.ed-h-e, .ed-h-w { width: calc(7px / var(--z)); height: calc(16px / var(--z)); border-radius: calc(4px / var(--z)); }
.ed-guide { position: absolute; display: none; background: #d6457a; z-index: 999; pointer-events: none; }
.ed-guide-v { top: -100vh; bottom: -100vh; width: calc(1px / var(--z)); }
.ed-guide-h { left: -100vw; right: -100vw; height: calc(1px / var(--z)); }

.ps { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ps-title { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.ps-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--border); }
.ps-type { font-weight: 600; }
.ps-help { font-size: 12.5px; color: var(--muted); margin: 0; }
.ps-warn { margin: 12px 16px 0; font-size: 12.5px; color: #8a6116; background: var(--warn-weak); border: 1px solid #efe1bd; padding: 8px 10px; border-radius: var(--radius-sm); }
.ps .ps-warn { margin: 0; }
.ps-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px 16px; }
.pf { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pf > span { font-size: 12px; color: var(--muted); }
.pf input[type=number], .pf input[type=text], .pf select, .pf textarea { height: 32px; font-size: 13px; padding: 0 8px; }
.pf textarea { height: auto; min-height: 64px; padding: 7px 8px; }
.pf select { padding-right: 26px; background-position: right 8px center; }
.pf-row { display: flex; gap: 8px; }
.pf-color input[type=color] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.pf-none { height: 32px; display: flex; align-items: center; font-size: 13px; color: var(--faint); }
.pf input[type=range] { width: 100%; accent-color: var(--accent); }
.pf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.pf-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.seg { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { flex: 1; font: inherit; font-size: 12.5px; height: 30px; border: 0; background: var(--bg); color: var(--text-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.on { background: var(--accent-weak); color: var(--accent); font-weight: 500; }
.chips-var { display: flex; gap: 4px; flex-wrap: wrap; }
.chips-var button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-subtle); color: var(--text-2); cursor: pointer; }
.chips-var button:hover { border-color: var(--accent-soft); color: var(--accent); }
.capas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.capas button { width: 100%; display: flex; gap: 8px; align-items: baseline; text-align: left; font: inherit; font-size: 13px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; color: var(--text-2); }
.capas button:hover { background: var(--bg-hover); }
.cap-tipo { flex: none; }
.cap-txt { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ vistas móviles (escaneo) */
.public { background: var(--bg-subtle); font-size: 16px; }
.m-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
@media (min-width: 520px) { .m-wrap { min-height: auto; margin: 24px auto; border: 1px solid var(--border); border-radius: 12px; } }
.m-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.m-client { font-weight: 600; font-size: 16px; line-height: 1.25; }
.m-code { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.m-body { padding: 22px 20px 28px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.m-body h1 { font-size: 22px; }
.m-intro { color: var(--muted); font-size: 15px; margin-top: 6px; }
.m-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; justify-content: center; }
.m-foot .brand { font-size: 13px; color: var(--muted); font-weight: 500; }
.m-foot .brandmark { width: 15px; height: 15px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px 20px 0; }
.step { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--faint); }
.step::before { content: ""; height: 3px; border-radius: 2px; background: var(--border); }
.step.done { color: var(--text-2); }
.step.done::before { background: var(--accent); }
.step.current { color: var(--accent); font-weight: 600; }
.step.current::before { background: var(--accent); }

.public .form { gap: 18px; }
.public fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.public legend { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 0; margin-bottom: 12px; }
.public hr.sep { border: 0; border-top: 1px solid var(--border); margin: 6px 0 2px; width: 100%; }
.public .field-label { font-size: 14px; }
.public input[type=text], .public input[type=tel], .public input[type=date], .public select, .public textarea { height: 48px; font-size: 16px; padding: 0 14px; border-radius: var(--radius); }
.public select { padding-right: 36px; }
.public textarea { height: auto; padding: 12px 14px; }
.btn-lg { height: 54px; font-size: 16px; font-weight: 600; border-radius: var(--radius); }
.m-note { font-size: 13px; color: var(--muted); text-align: center; }

.m-summary { border: 1px solid var(--border); border-radius: var(--radius); }
.m-summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 15px; }
.m-summary .row:last-child { border-bottom: 0; }
.m-summary .row span:first-child { color: var(--muted); }
.m-summary .row span:last-child { font-weight: 500; text-align: right; }

.m-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.m-done .badge { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #edf6f0; color: var(--st-recibida); border: 1px solid #cfe6d8; }
.m-done .badge.accent { background: var(--accent-weak); color: var(--accent); border-color: var(--accent-soft); }
.m-done p { color: var(--muted); font-size: 15px; max-width: 34ch; }
.m-done .big { font-size: 17px; color: var(--text); font-weight: 500; }

.sig-box { position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); }
.sig-box canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sig-box .sig-hint { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 13px; color: var(--faint); pointer-events: none; }
.sig-box .sig-line { position: absolute; left: 20px; right: 20px; bottom: 30px; border-bottom: 1px dashed var(--border-strong); pointer-events: none; }
.sig-box.signed .sig-hint { display: none; }
.sig-head { display: flex; justify-content: space-between; align-items: baseline; }
.sig-clear { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; }

/* ------------------------------------------------------------ responsive panel */
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .gen-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .nav a { flex: none; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .user { border-top: 0; padding: 0; }
  .main { padding: 20px 16px 40px; }
  .table-wrap { overflow-x: auto; }
  .hbar { grid-template-columns: 120px minmax(0, 1fr) 28px; }
  .chart-scroll { overflow-x: auto; }
  .chart { min-width: 640px; }
}

/* ------------------------------------------------------------ impresión */
@media print {
  html, body { background: #fff !important; }
  .sidebar, .no-print, .drawer, .drawer-backdrop, .tip { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .labels-grid { display: block; margin: 0; }
  .label-wrap { display: block; }
  .label-sheet.lbl { box-shadow: none; border-radius: 0; break-after: page; page-break-after: always; }
  .label-wrap:last-child .label-sheet { break-after: auto; page-break-after: auto; }
}

/* ============================================================ Ajustes para celular
   Diferencias con la demo, solo en pantallas de hasta 760 px (en escritorio es idéntica):
   - El menú se reparte en varias filas en vez de cortarse por la derecha.
   - La cabecera no se estira para llenar la pantalla.
   - Campos con texto de 16 px (con menos, el iPhone hace zoom al tocarlos) y controles de 44 px.
   - Las tablas con la clase .table-stack se muestran como tarjetas (cada celda con su
     título en data-label) en vez de salirse por la derecha. */
@media (max-width: 760px) {
  .shell { align-content: start; }
  .sidebar { align-items: center; }
  .nav { overflow-x: visible; flex-wrap: wrap; gap: 4px; }
  .nav a { height: 40px; }
  .icon-btn { width: 40px; height: 40px; }

  input[type=text], input[type=email], input[type=number], input[type=tel], input[type=date],
  input[type=password], input[type=search], select, textarea { height: 44px; font-size: 16px; }
  textarea { height: auto; }
  .btn { height: 44px; }
  .btn-sm { height: 36px; }
  .seg-form span { height: 44px; }
  .form-actions .btn { flex: 1; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }

  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 5px 16px; border-bottom: 0; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .table-stack td:first-child { padding-bottom: 8px; justify-content: flex-start; text-align: left; }
  .table-stack td.empty { display: block; text-align: center; }
  .table-stack td.right { justify-content: flex-end; }
}

/* La demo no tenía estilo para campos de tipo email (el login usa uno). */
input[type=email] {
  width: 100%; height: 38px; padding: 0 11px;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
@media (max-width: 760px) {
  input[type=email] { height: 44px; font-size: 16px; }
}

/* ============================================================ Componentes que la demo no tenía */

/* Correo del usuario en el menú: un correo largo se recorta con "…" en vez de romper el menú. */
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Casilla con título y explicación (ej. "Evidencia obligatoria"). */
.check-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-field input { accent-color: var(--accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.check-field .field-label { display: block; }
.check-field .hint { display: block; margin-top: 2px; }
.check-field[hidden] { display: none; }

/* Segunda línea bajo el nombre del cliente (la demo lo hacía con un estilo en línea). */
.client-sub { font-size: 12.5px; font-weight: 400; }

/* Cliente inactivo en las listas. */
.inactive { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--muted); }

/* Texto solo para lectores de pantalla (accesibilidad): no se ve, pero se lee en voz alta. */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nombre del cliente como enlace en la tabla: se ve como texto, se subraya al pasar. */
.client-link { color: var(--text); }
.client-link:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 760px) {
  .filters .search .icon { top: 14px; }
  .filters select { width: 100%; }
}

/* Formulario de cliente. */
input.input-iniciales { width: 90px; text-transform: uppercase; }
.preview-sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.aviso-desactivar { margin-top: 8px; }

/* ============================================================ Etiquetas (Fase 2) */

/* El QR se genera en el servidor como SVG (la demo usaba una imagen). */
.lbl-qr-svg, .lbl-qr-svg svg { display: block; width: 100%; height: 100%; }

/* En el celular la etiqueta (10 cm de ancho) se reduce para caber en pantalla. Solo en pantalla. */
@media screen and (max-width: 760px) {
  .preview-box .lbl, .labels-grid .lbl { zoom: .78; }
}

.preview-box.preview-etiqueta { padding: 20px; }
.label-meta .link { white-space: nowrap; }

/* Etiqueta anulada (la demo no tenía este estado). */
.status-anulada { color: var(--muted); border-style: dashed; }
.status-anulada i { background: transparent; border: 1px solid var(--faint); }

@media (max-width: 760px) {
  .chip { height: 36px; padding: 0 16px; }
}

/* Foto del paquete (pantalla del destinatario). */
.foto-box { position: relative; display: flex; align-items: center; justify-content: center; min-height: 120px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); cursor: pointer; overflow: hidden; }
.foto-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-box img { display: block; max-width: 100%; max-height: 260px; }
.foto-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; pointer-events: none; }
/* "hidden" debe ganar a los display de arriba (si no, se ve una imagen rota antes de elegir foto). */
.foto-box img[hidden], .foto-hint[hidden] { display: none; }

/* ============================================================ Fase 3 */
.seccion-cliente { margin-top: 20px; }
.formulario-campo { max-width: 560px; }
.orden { display: inline-flex; gap: 2px; }
.orden .icon-btn[disabled] { opacity: .3; cursor: default; }
.acciones-fila { display: inline-flex; align-items: center; gap: 14px; }
.link-btn { font: inherit; font-weight: 500; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }
.field[hidden] { display: none; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.paginacion .paginas { display: flex; gap: 16px; }
.det-qr-svg { width: 84px; height: 84px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }
.det-qr-svg svg { display: block; width: 100%; height: 100%; }
.det-nota { margin-top: 10px; }
.det-anulada { background: var(--warn-weak); }
.det-anulada p { margin-bottom: 8px; }
.evidencia { display: block; margin-top: 12px; }
.evidencia img { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.correccion { margin-bottom: 12px; font-size: 13px; }
.correccion ul { margin: 4px 0 0; padding-left: 18px; }
.correccion .antes { color: var(--muted); text-decoration: line-through; }
.formulario-correccion { max-width: 620px; }
.formulario-correccion .section-label { margin: 8px 0 -4px; }

/* ============================================================ Fase 4 */
/* Miniatura de plantilla dibujada en el servidor y reducida con zoom. */
.tpl-thumb { display: flex; align-items: center; justify-content: center; }
.tpl-escala { display: block; }
.tpl-inactiva .tpl-thumb { opacity: .55; }
.tpl-aviso { margin: 6px 0 0; }
/* Editor: un mensaje de estado largo se recorta en vez de empujar los botones fuera de la pantalla. */
.ed-status { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-top-actions { flex: none; }
.preview-etiqueta { flex-direction: column; align-items: center; gap: 10px; }
.preview-etiqueta .preview-size { margin: 0; font-size: 12.5px; }
/* Botones de PDF: en el celular saltan de línea (dos por fila) en vez de salirse de la pantalla. */
@media (max-width: 760px) {
  .page-head .actions { flex-wrap: wrap; }
  .page-head .actions .btn { flex: 1 1 calc(50% - 4px); }
}

/* ============================================================ Fase 5 */
/* Resumen: filtros de cliente y período bajo el título, y títulos de sección. */
.filtros-resumen { display: flex; gap: 10px; flex-wrap: wrap; margin: -6px 0 20px; }
.filtros-resumen select { width: auto; min-width: 200px; }
.section-title { font-size: 15px; font-weight: 600; margin: 28px 0 14px; }
.kpis.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 760px) {
  .filtros-resumen select { flex: 1 1 100%; }
  /* La gráfica no se encoge hasta ser ilegible: se desplaza de lado. */
  .chart-scroll .chart { min-width: 620px; }
  /* Movimientos como tarjetas: estado y hora arriba, cliente debajo; el código se ve al tocar. */
  .table-mov, .table-mov tbody { display: block; }
  .table-mov tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .table-mov tbody tr:last-child { border-bottom: 0; }
  .table-mov td { display: block; padding: 0; border: 0; width: auto !important; }
  .table-mov td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .table-mov td:nth-child(3) { display: none; }
  .table-mov td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; }
}

/* Menú: grupo Etiquetas con submenú (Ver etiquetas, Generar etiquetas). */
.nav-grupo summary {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; list-style: none; user-select: none;
}
.nav-grupo summary::-webkit-details-marker { display: none; }
.nav-grupo summary .icon { color: var(--faint); }
.nav-grupo summary .icon:last-child { margin-left: auto; transition: transform .15s; }
.nav-grupo[open] summary .icon:last-child { transform: rotate(90deg); }
.nav-grupo summary:hover { background: var(--bg-hover); color: var(--text); }
.nav-grupo summary.en-grupo, .nav-grupo summary.en-grupo .icon:first-child { color: var(--accent); }
.nav-grupo summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-sub a { padding-left: 38px; font-weight: 450; }
@media (max-width: 760px) {
  .nav-grupo summary { height: 40px; }
  .nav-grupo[open] { flex: 1 1 100%; }
  .nav-sub { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav-sub a { padding-left: 14px; }
}

/* Generar etiquetas: número de serie (prefijo, primer número y cifras en una fila). */
.serie-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.serie-campos legend { padding: 0; margin-bottom: 6px; }
.serie-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 76px; gap: 10px; }
.serie-fila label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.serie-rotulo { font-size: 12px; color: var(--muted); }
.serie-fila input { text-transform: uppercase; }
.serie-fila input::placeholder { text-transform: none; }
.serie-aviso { margin: 0; font-size: 13px; color: var(--text-2); text-align: center; }
.serie-aviso .chip { margin-left: 6px; }
.serie-aviso-error { color: #8a6116; background: var(--warn-weak); border: 1px solid #efe1bd; padding: 8px 10px; border-radius: var(--radius-sm); text-align: left; }

/* Logo de cliente con imagen (si no tiene, se ven sus iniciales sobre su color). */
.client-logo.client-logo-img { background: #fff; box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.client-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-archivo { margin-top: 12px; }
.logo-archivo input[type=file] { font-size: 13px; max-width: 100%; }
/* En la etiqueta, la imagen del logo cabe entera en su recuadro (sin recortarla). */
.lbl-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Doble autenticación (pantallas del login). */
.login-card-ancha { max-width: 440px; }
.input-codigo { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.pasos-2fa { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--text-2); }
.pasos-2fa .input-codigo { margin-top: 8px; }
.qr-2fa { width: 168px; height: 168px; margin: 10px 0; }
.qr-2fa svg { width: 100%; height: 100%; display: block; }
.clave-2fa { display: block; margin-top: 4px; font-size: 13px; word-break: break-all; }
.login-otra { margin-top: 14px; text-align: center; }
.login-otra .link { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--accent); }

/* Filas alternas (blanco / gris claro) para seguir una fila con la vista. Clientes. */
.table-cebra tbody tr:nth-child(even) td { background: var(--bg-subtle); }
@media (max-width: 760px) {
  .table-cebra tbody tr:nth-child(even) { background: var(--bg-subtle); }
}

/* Formulario de cliente: RNC y cédula en una fila (en el celular, uno debajo del otro). */
.fila-documentos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .fila-documentos { grid-template-columns: 1fr; } }