:root {
  color-scheme: light;
  --bg: #f5f6f8; --surface: #fff; --text: #1a1d23; --muted: #626b7a; --line: #e2e5ea;
  --accent: #1d4ed8; --accent-text: #fff; --danger: #b42318; --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12141a; --surface: #1b1e26; --text: #eceef2; --muted: #9aa3b2; --line: #2b303b;
    --accent: #5b8cff; --accent-text: #0b1020; --danger: #ff7b6e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 1.35rem; margin: 0; }
.muted { color: var(--muted); }

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar-in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .01em; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.nav a.on { background: var(--bg); color: var(--text); font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: .85rem; }

input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 80px; resize: vertical; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 3px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.row { cursor: pointer; }
tbody tr.row:hover { background: var(--bg); }
.badge { font-size: .75rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dlg-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.dlg-body { padding: 18px 20px; overflow: auto; }
.dlg-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.grid .full { grid-column: 1 / -1; }
.err { color: var(--danger); min-height: 1.3em; font-size: .9rem; }

.auth { max-width: 380px; margin: 12vh auto; padding: 28px; }
.auth h1 { margin-bottom: 4px; }
.auth form > div { margin-top: 12px; }
.auth .btn { width: 100%; margin-top: 16px; }

@media (max-width: 680px) {
  .grid { grid-template-columns: 1fr; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  td { border: 0; padding: 2px 14px; }
  tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
  .nav { order: 3; flex-basis: 100%; }
}

/* Cotizaciones y facturas */
.pad { padding: 18px 20px; }
.r { text-align: right; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.row-inline { display: flex; gap: 8px; align-items: center; }
.pre { white-space: pre-wrap; }
.big { font-size: 1.05rem; }
.warn { border-color: var(--danger); color: var(--danger); margin-bottom: 14px; }
.card + .card { margin-top: 14px; }
.items { margin: 14px 0; }
.items th, .items td { padding: 8px 10px; }
.items.edit td { padding: 4px 6px; border: 0; }
.items.edit input { padding: 6px 8px; }
.items.edit .qty { width: 80px; text-align: right; }
.items.edit .pr { width: 120px; text-align: right; }
.totals { margin-left: auto; width: min(320px, 100%); }
.totals > div { display: flex; justify-content: space-between; padding: 4px 10px; }
.totals .grand { border-top: 1px solid var(--line); font-weight: 700; font-size: 1.1rem; margin-top: 4px; padding-top: 8px; }
.radios label { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 1rem; padding: 4px 0; }
.radios input { width: auto; }
tr.voided td { text-decoration: line-through; color: var(--muted); }
.badge.st-accepted, .badge.st-paid { color: #067647; border-color: #067647; }
.badge.st-sent, .badge.st-partial { color: var(--accent); border-color: var(--accent); }
.badge.st-rejected, .badge.st-void { color: var(--danger); border-color: var(--danger); }
a.btn { text-decoration: none; display: inline-block; color: inherit; }
a.btn.primary { color: var(--accent-text); }

.printbar { max-width: 820px; margin: 16px auto; padding: 0 16px; display: flex; justify-content: space-between; }
.doc { max-width: 820px; margin: 0 auto 40px; background: #fff; color: #111; padding: 40px; border: 1px solid var(--line); }
.doc header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.doc h2 { margin: 0 0 4px; font-size: 1.3rem; }
.doc h3 { margin: 22px 0 6px; font-size: 1rem; }
.doc .muted, .doc th { color: #555; }
.doc th, .doc td { border-bottom: 1px solid #ddd; }
.doc .totals .grand { border-color: #bbb; }
@media print {
  .noprint { display: none !important; }
  body { background: #fff; }
  .doc { border: 0; padding: 0; margin: 0; max-width: none; }
}

/* Kanban y tareas */
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 160px; }
.col.over { outline: 2px dashed var(--accent); outline-offset: -4px; }
.col h3 { margin: 2px 4px 10px; font-size: .95rem; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.kcard { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: grab; }
.kcard:hover, .kcard:focus-visible { border-color: var(--accent); outline: none; }
.kcard.drag { opacity: .45; }
.kcard .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.av { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; }
.late { color: var(--danger); font-weight: 600; }
.small { font-size: .85rem; }
.task { display: flex; gap: 12px; align-items: center; color: var(--text); font-size: 1rem; padding: 8px 0; flex-wrap: wrap; }
.task .tmain { flex: 1 1 220px; min-width: 0; }
.task .tside { display: flex; gap: 8px; align-items: center; }
.task .tbtns { display: flex; gap: 6px; }
.task.pad { border-bottom: 1px solid var(--line); }
.task.done .tmain strong { text-decoration: line-through; color: var(--muted); }
@media (max-width: 680px) { .task .tbtns { width: 100%; } .task .tbtns .btn { flex: 1; min-height: 44px; } }
@media (max-width: 680px) { .board { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; } .col { scroll-snap-align: start; } }

/* Avisos y pagina publica */
.bellwrap { position: relative; }
.count { background: var(--danger); color: #fff; border-radius: 99px; padding: 0 6px; font-size: .75rem; margin-left: 2px; }
.bellpanel { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, 90vw); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 20; }
.nitem { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.nitem:last-child { border-bottom: 0; }
.nitem.new { background: var(--bg); border-left: 3px solid var(--accent); }
.nitem:hover { background: var(--bg); }
.pub { margin-top: 24px; }
.pubmsg { border: 1px solid #999; border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; background: #f4f4f4; }
.pubmsg.ok { border-color: #067647; background: #ecfdf3; color: #054f31; }
.respond { margin-top: 28px; padding-top: 18px; border-top: 2px solid #ddd; max-width: 420px; }
.respond label { color: #555; }
.respond input[type=text], .respond input:not([type=checkbox]) { background: #fff; color: #111; border-color: #bbb; }
.respond .chk { display: flex; gap: 8px; align-items: center; margin: 12px 0; color: #111; font-size: 1rem; }
.respond .chk input { width: auto; }
.respond .btn.primary { width: 100%; padding: 12px; }
.pub .err { color: #b42318; }
@media print { .bellwrap { display: none; } }

body.pubpage { background: #eef0f3; }
.totals .net { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; font-weight: 600; }

/* Detalle de linea, textos predeterminados y disenos */
.detail { white-space: pre-wrap; font-size: .88em; color: var(--muted); margin-top: 4px; }
.doc .detail { color: #555; }
.items.edit .det { margin-top: 6px; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 0; font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.atts { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
figure.att { margin: 0; width: 170px; display: flex; flex-direction: column; gap: 6px; }
figure.att img { width: 100%; height: 120px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
figure.att figcaption { font-size: .8rem; color: var(--muted); }
figure.att.new img { border-style: dashed; border-color: var(--accent); }
.artwork figure { margin: 14px 0; break-inside: avoid; text-align: center; }
.artwork img { max-width: 100%; max-height: 7.5in; border: 1px solid #ddd; }
.artwork figcaption { font-size: .85rem; color: #555; margin-top: 4px; }

/* Reportes y metas (colores de serie validados: azul y naranja, claro y oscuro) */
:root { --series-1: #2a78d6; --series-2: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --series-2: #d95926; } }
:root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi-l { color: var(--muted); font-size: .85rem; }
.kpi-v { font-size: 1.6rem; font-weight: 650; margin: 2px 0 8px; }
.kpi-s { font-size: .85rem; margin-top: 6px; }
.kpi-h { margin-top: 6px; }
.meter { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--series-1) 20%, var(--surface)); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--series-1); border-radius: 99px; }
.chartcard { margin-bottom: 16px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: 4px 0 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.sw.s1 { background: var(--series-1); } .sw.s2 { background: var(--series-2); }
.chartwrap { position: relative; }
.chartwrap svg { width: 100%; height: auto; display: block; }
.chartwrap .gl { stroke: var(--line); stroke-width: 1; }
.chartwrap .ax { fill: var(--muted); font-size: 11px; }
.chartwrap .dv { fill: var(--text); font-size: 11px; font-weight: 600; }
.chartwrap .b1 { fill: var(--series-1); } .chartwrap .b2 { fill: var(--series-2); }
.chartwrap .hit { fill: transparent; outline: none; }
.chartwrap .hit:hover, .chartwrap .hit:focus { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .85rem; box-shadow: 0 4px 16px rgba(0,0,0,.14); white-space: nowrap; z-index: 3; }
.hbar { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.hbar .hl { color: var(--text); font-size: .9rem; }
.hbar .ht { height: 18px; }
.hbar .hf { height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 0; }
.hbar .hv { font-size: .85rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 680px) { .hbar { grid-template-columns: 90px 1fr; } .hbar .hv { grid-column: 1 / -1; } }

/* Comparacion con meses anteriores y graficas circulares */
:root { --series-3: #1baf7a; --series-4: #eda100; --ok: #006300; --bad: #b42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-3: #199e70; --series-4: #c98500; --ok: #0ca30c; --bad: #ff7b6e; } }
:root[data-theme="dark"] { --series-3: #199e70; --series-4: #c98500; --ok: #0ca30c; --bad: #ff7b6e; }
.kpi-d { font-size: .85rem; font-weight: 600; margin: -2px 0 6px; color: var(--muted); }
.kpi-d.up { color: var(--ok); }
.kpi-d.down { color: var(--bad); }
.chartwrap .b1.dim, .chartwrap .b2.dim { opacity: .38; }
.chartwrap .axs { fill: var(--text); font-weight: 700; }
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.seg-toggle button { background: var(--surface); border: 0; padding: 5px 14px; cursor: pointer; color: var(--muted); font-size: .85rem; }
.seg-toggle button.on { background: var(--bg); color: var(--text); font-weight: 650; }
.seg-toggle button:disabled { opacity: .45; cursor: not-allowed; }
.sw.sc { background: color-mix(in srgb, var(--series-1) 38%, var(--surface)); }
.sw.c1b { background: var(--series-1); } .sw.c2b { background: var(--series-2); } .sw.c3b { background: var(--series-3); } .sw.c4b { background: var(--series-4); }
.hbar .ht { display: flex; flex-direction: column; gap: 3px; height: auto; }
.hbar .hf { height: 14px; }
.hbar .hf.cmp { background: color-mix(in srgb, var(--series-1) 38%, var(--surface)); }
.donuts { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.donut { margin: 0; width: 190px; text-align: center; }
.donut svg { width: 100%; height: auto; display: block; }
.donut figcaption { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.donut .dtrack { stroke: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.donut .seg { outline: none; cursor: default; }
.donut .seg:hover, .donut .seg:focus { stroke-width: 34; }
.donut .c1 { stroke: var(--series-1); } .donut .c2 { stroke: var(--series-2); } .donut .c3 { stroke: var(--series-3); } .donut .c4 { stroke: var(--series-4); }
.donut .dc { fill: var(--text); font-size: 22px; font-weight: 650; }
.donut .ds { fill: var(--muted); font-size: 11px; }
.dleg { flex: 1; min-width: 260px; border-collapse: collapse; }
.dleg th, .dleg td { padding: 6px 8px; font-size: .88rem; }
.dleg th { font-weight: 600; }
@media (max-width: 680px) { .donut { width: 150px; } .dleg { display: table; width: 100%; min-width: 0; } .dleg thead { display: table-header-group; } .dleg tbody { display: table-row-group; } .dleg tr { display: table-row; padding: 0; border: 0; } .dleg td, .dleg th { display: table-cell; border-bottom: 1px solid var(--line); } }

/* Ojito de contraseñas */
.pwwrap { position: relative; }
.pwwrap input { padding-right: 46px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 8px; }
.eye:hover, .eye:focus-visible { color: var(--text); background: var(--bg); }

.morewrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }

/* ---------- Telefono / app instalada ---------- */
html { -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: env(safe-area-inset-top); }
main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.who { flex-wrap: wrap; }
@media (max-width: 680px) {
  /* fuentes de 16px en campos: evita el zoom automatico de iPhone al tocar un campo */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 42px; }
  .btn.small { min-height: 38px; padding: 6px 12px; }
  .topbar-in { padding: 8px 12px; gap: 8px; }
  .brand { font-size: .95rem; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; padding: 9px 12px; }
  .who { margin-left: auto; font-size: .85rem; }
  .who > span:not(.bellwrap) { display: none; }
  main { padding: 14px 12px calc(60px + env(safe-area-inset-bottom)); }
  .head { gap: 8px; }
  .head .tools { width: 100%; }
  .head .tools > input[type=search], .head .tools > select { flex: 1 1 140px; width: auto !important; }
  .grid .full, .grid > div { min-width: 0; }
  dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .dlg-foot { flex-wrap: wrap; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-v { font-size: 1.3rem; }
  .totals { width: 100%; }
}
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr; } }
@media (display-mode: standalone) { .auth { margin-top: 8vh; } }
@media (max-width: 680px) {
  .brand { white-space: nowrap; font-size: .9rem; }
  .who { gap: 6px; }
  .who .btn.small { padding: 4px 9px; font-size: .8rem; min-height: 34px; }
  .topbar-in { row-gap: 4px; }
}

.stack { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
@media (max-width: 680px) {
  /* encabezado de app: solo marca y avisos; clave / instalar / salir viven en la pestaña Cuenta */
  .who #pw, .who #inst, .who #out, .who > span:not(.bellwrap) { display: none; }
  /* tarjetas de reportes en dos columnas, compactas */
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-l { font-size: .78rem; }
  .kpi-v { font-size: 1.15rem; margin: 2px 0 4px; }
  .kpi-d { font-size: .75rem; margin: 0 0 4px; }
  .kpi-s { font-size: .74rem; }
  .kpi-h { display: none; }
  .prevv { display: none; }
  .kpi-d + .meter, .kpi-v + .meter { margin-top: 4px; }
}
@media (max-width: 340px) { .kpis { grid-template-columns: 1fr; } }

/* Barra inferior estilo app (solo telefono) */
.tabbar { display: none; }
dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.sheetlist { display: flex; flex-direction: column; }
.sheetlist a { padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1.05rem; }
.sheetlist a.on { color: var(--accent); font-weight: 650; }
.sheetlist a:last-child { border-bottom: 0; }
@media (max-width: 680px) {
  .topbar .nav { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--surface); border-top: 1px solid var(--line); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px 7px; min-height: 58px; background: none; border: 0; color: var(--muted); text-decoration: none; font: inherit; font-size: .68rem; cursor: pointer; }
  .tab svg { width: 24px; height: 24px; flex: none; }
  .tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab.on { color: var(--accent); font-weight: 650; }
  .tab:active { background: var(--bg); }
  main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .topbar-in { flex-wrap: nowrap; justify-content: space-between; }
}

/* Editor de cotizacion en telefono: cada linea es una tarjeta con campos etiquetados */
@media (max-width: 680px) {
  .items.edit, .items.edit tbody { display: block; }
  .items.edit thead { display: none; }
  .items.edit tr.line { display: grid; grid-template-columns: 1fr 1.3fr auto; grid-template-areas: 'd d d' 'q p x' 'a a a'; gap: 8px 8px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .items.edit tr.line td { display: block; padding: 0; border: 0; }
  .items.edit tr.line td:nth-child(1) { grid-area: d; }
  .items.edit tr.line td:nth-child(2) { grid-area: q; }
  .items.edit tr.line td:nth-child(3) { grid-area: p; }
  .items.edit tr.line td:nth-child(4) { grid-area: a; text-align: right; font-weight: 600; }
  .items.edit tr.line td:nth-child(5) { grid-area: x; }
  .items.edit td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; font-weight: 400; color: var(--muted); margin-bottom: 3px; text-align: left; }
  .items.edit td.amt::before { display: inline; margin-right: 8px; }
  .items.edit .qty, .items.edit .pr { width: 100%; text-align: right; }
}

/* Lineas de la cotizacion en telefono */
@media (max-width: 680px) {
  /* dentro del CRM: tarjeta por linea con etiquetas */
  .items:not(.edit):not(.doc .items) tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 10px; padding: 10px 0; }
  .items:not(.edit):not(.doc .items) td { padding: 0 0 2px; }
  .items:not(.edit):not(.doc .items) td:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .items:not(.edit):not(.doc .items) td[data-l]::before { content: attr(data-l); display: block; font-size: .7rem; color: var(--muted); }
  .items:not(.edit):not(.doc .items) td.r { text-align: left; }
  /* documento (lo que ve el cliente en su telefono y la impresion): tabla normal, mas compacta */
  .doc { padding: 18px 14px; margin-bottom: 24px; }
  .doc header { flex-wrap: wrap; gap: 14px; }
  .doc .items { display: table; width: 100%; }
  .doc .items thead { display: table-header-group; }
  .doc .items tbody { display: table-row-group; }
  .doc .items tr { display: table-row; padding: 0; border: 0; }
  .doc .items th, .doc .items td { display: table-cell; padding: 8px 4px; font-size: .85rem; border-bottom: 1px solid #ddd; }
  .doc .items td[data-l]::before { content: none; }
  .doc .items td.r, .doc .items th.r { text-align: right; }
  .doc .items td:first-child { width: 46%; }
  .doc .totals { width: 100%; }
  .printbar { padding: 0 12px; }
}

/* Formularios en linea de tareas (clase .wrapform): en pantallas chicas cada campo ocupa su renglon */
.row-inline.wrapform { flex-wrap: wrap; }
.row-inline.wrapform > input:not([type=date]) { flex: 1 1 220px; min-width: 0; }
@media (max-width: 680px) { .row-inline.wrapform > * { flex: 1 1 100%; width: 100%; max-width: none; } .row-inline.wrapform > .btn { min-height: 44px; } }
.task .tside .who { font-size: .85rem; color: var(--muted); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--danger); }

/* Ajustes > Impuestos */
.taxrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.taxrow .btn { min-height: 38px; }
.taxprev { display: grid; grid-template-columns: 1fr auto; gap: 4px 0; margin: 16px 0 6px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; max-width: 420px; }
.taxprev dt { color: var(--muted); font-size: .9rem; }
.taxprev dd { margin: 0; text-align: right; padding-left: 16px; }
.taxprev .tot { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
@media (max-width: 680px) { .taxrow { grid-template-columns: 1fr 1fr; } .taxrow .btn { grid-column: 1 / -1; justify-self: start; } .taxprev { max-width: none; } }

/* Diálogo de permisos */
.permlist { display: grid; gap: 4px; }
.permopt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; margin: 0; }
.permopt:hover { border-color: var(--muted); }
.permopt input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.permopt:has(input:disabled) { opacity: .7; cursor: default; }

/* Catálogo */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Estimador */
.estgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.estside { position: sticky; top: 76px; }
.estprice { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 4px; }
.estinputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.estlines td, .estlines th { vertical-align: middle; }
.estlines tr.off td { opacity: .55; }
.qtycell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qtycell .qty { width: 84px; }
.estlines input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.estadd { display: grid; grid-template-columns: minmax(0, 2fr) 110px auto; gap: 10px 12px; align-items: end; margin-top: 10px; }
.estadd.custom { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.badge.pend { color: #8a5a00; border-color: #c98500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.pend { color: #e6b04d; border-color: #c98500; } }
.estnote { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.estnote.bad { border-color: var(--danger); margin: 12px 0 0; }
.small.bad, .estnote.bad { color: var(--danger); }
@media (max-width: 980px) { .estgrid { grid-template-columns: 1fr; } .estside { position: static; } }
@media (max-width: 680px) {
  .estlines thead { display: none; }
  .estlines, .estlines tbody { display: block; }
  .estlines tr.line { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'i c r' 'q q q' 'k m p'; gap: 6px 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .estlines tr.line td { display: block; padding: 0; border: 0; }
  .estlines tr.line td:nth-child(1) { grid-area: i; }
  .estlines tr.line td:nth-child(2) { grid-area: c; }
  .estlines tr.line td:nth-child(3) { grid-area: q; }
  .estlines tr.line td::before { content: none !important; }
  .estadd { grid-template-columns: 1fr 100px; }
  .estadd .btn { grid-column: 1 / -1; }
  .estprice { font-size: 1.8rem; }
}

@media (max-width: 680px) {
  .estlines tr.line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .estlines tr.line td:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .estlines tr.line td:nth-child(3) { flex: 1 1 100%; order: 3; }
  .estlines tr.line td[data-l="Costo"], .estlines tr.line td[data-l="Margen %"] { order: 4; }
  .estlines tr.line td[data-l="Costo"]::before, .estlines tr.line td[data-l="Margen %"]::before { content: attr(data-l) ": " !important; color: var(--muted); font-size: .78rem; }
  .estlines tr.line td[data-l="Precio"] { order: 5; margin-left: auto; }
  .estlines tr.line td:last-child { order: 6; }
}

.estmain { min-width: 0; }
#e_lines { overflow-x: auto; }
.estmini { display: none; }
@media (max-width: 1100px) {
  .estgrid { grid-template-columns: 1fr; }
  .estside { position: static; order: -1; }
  .estmini:not([hidden]) { display: flex; position: sticky; bottom: 0; z-index: 10; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); }
  .estminiprice { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
}
@media (max-width: 680px) { .estmini:not([hidden]) { bottom: calc(62px + env(safe-area-inset-bottom)); } }

/* Botones desactivados: se ven apagados y no parecen clicables */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); }

.estmerge{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.estmerge[hidden]{display:none}
.estmerge span{font-size:14px}
td.pick{width:36px}
td.pick input{width:18px;height:18px;cursor:pointer}

/* Estimador: casillas sí/no y nota de conversión */
.esttoggle { display: flex; align-items: flex-end; padding-bottom: 6px; }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; min-height: 40px; }
.chk input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.convnote { flex-basis: 100%; }

/* Navegación por secciones */
.nav a { font-weight: 500; }
.subbar { border-top: 1px solid var(--line); background: var(--bg); }
.subnav { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 10px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.usermenu { position: relative; }
.userpanel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); z-index: 20; padding: 4px; }
.menuitem { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer; font: inherit; }
.menuitem:hover, .menuitem:focus-visible { background: var(--bg); }
.sheethead { margin: 0; padding: 14px 20px 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 680px) { .subbar { display: none; } }
/* Barras de desplazamiento en el tema de la app (la del tablero se veía blanca en modo oscuro) */
* { scrollbar-color: var(--line) transparent; }

/* ===== Pulido de interacción =====
   Reglas: transiciones solo de propiedades concretas (nunca "all"), curva ease-out fuerte, menos de 300 ms, el botón responde al
   presionar, lo que se repite mil veces no se anima, y todo respeta «reducir movimiento». */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); accent-color: var(--accent); }
.btn, .tab, .nav a, .subnav a, .menuitem, .kcard, tbody tr.row, .permopt, .nitem, .linkbtn, .eye {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out), opacity 150ms ease;
}
.btn:active:not(:disabled), .tab:active, .menuitem:active { transform: scale(0.97); }
tbody tr.row:active { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
/* En pantallas táctiles el «hover» se queda pegado después de tocar: se anula */
@media (hover: none) {
  .btn:not(.primary):hover { border-color: var(--line); }
  tbody tr.row:hover, .nitem:hover, .menuitem:hover, .eye:hover { background: transparent; }
  .kcard:hover { border-color: var(--line); }
  .permopt:hover { border-color: var(--line); }
  .subnav a:hover { color: var(--muted); }
}
/* Diálogos: entran con un ligero escalado desde 0.96 (nunca desde 0) y el fondo se oscurece; en el teléfono la hoja sube desde abajo.
   Al cerrar desaparecen al instante: lo que el sistema responde es rápido. */
dialog[open] { opacity: 1; transform: none; transition: opacity 180ms ease-out, transform 220ms var(--ease-out); }
@starting-style { dialog[open] { opacity: 0; transform: scale(0.96) translateY(8px); } }
dialog.sheet[open] { transition: transform 260ms var(--ease-drawer), opacity 160ms ease-out; }
@starting-style { dialog.sheet[open] { opacity: 1; transform: translateY(100%); } }
dialog[open]::backdrop { transition: background-color 200ms ease; }
@starting-style { dialog[open]::backdrop { background-color: rgba(0, 0, 0, 0); } }
/* Menús (avisos y usuario): nacen desde su botón, arriba a la derecha */
.bellpanel, .userpanel { transform-origin: top right; transition: opacity 140ms ease-out, transform 160ms var(--ease-out); }
@starting-style { .bellpanel:not([hidden]), .userpanel:not([hidden]) { opacity: 0; transform: scale(0.97) translateY(-4px); } }
/* Teclado: el foco siempre se ve, también en enlaces y menús */
.nav a:focus-visible, .subnav a:focus-visible, .tab:focus-visible, .menuitem:focus-visible, a.btn:focus-visible, .linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* Superficies del navegador que también llevan el diseño */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
input, textarea, select { caret-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; }
/* Cifras alineadas en columnas y totales */
table, .totals, .kpi-v, .estprice, .estminiprice, .amt { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .btn:active:not(:disabled), .tab:active, .menuitem:active { transform: none; }
}
/* Estimador: bloques «en el estimado» y «opcionales» */
.estlines tr.grouprow td { padding: 14px 16px 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.estlines tr.grouprow td .gh-note { text-transform: none; letter-spacing: 0; margin-left: 6px; }
@media (max-width: 680px) { .estlines tr.grouprow { display: block; } .estlines tr.grouprow td { display: block; } }

/* ---------- Limpieza: estimador de llamada, solicitudes, agenda, administración ---------- */
.h2s { font-size: 1.05rem; margin: 22px 0 8px; }
.btn.big { min-height: 48px; padding: 10px 20px; font-size: 1rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.reqtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reqrow { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-height: 56px; }
.reqrow:hover { border-color: var(--accent); }
.callstart { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.callwarn { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border: 1px solid var(--danger); color: var(--text); border-radius: 8px; padding: 10px 12px; }
.call { max-width: 640px; margin: 0 auto; padding-bottom: 150px; }
.callhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.callprog { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.callprog i { display: block; height: 100%; background: var(--accent); transition: width 220ms cubic-bezier(.22, 1, .36, 1); }
.callh { font-size: 1.5rem; line-height: 1.2; margin-bottom: 12px; }
.callsay { margin: 0 0 18px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.callsay p { margin: 4px 0 0; font-size: 1.1rem; line-height: 1.45; }
.callbody input, .callbody textarea, .callbody select { font-size: 16px; min-height: 46px; }
.callopts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.callopts.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 54px; padding: 10px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; }
.callopt small { color: var(--muted); }
.callopt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.callopt:active { transform: scale(0.98); }
.cstep { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cstep small { display: block; }
.cstepctl { display: flex; align-items: center; gap: 10px; }
.cstepctl .btn { width: 48px; height: 48px; font-size: 1.3rem; padding: 0; }
.cstepctl output { min-width: 28px; text-align: center; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.covmsg { margin-top: 10px; min-height: 1.4em; }
.covmsg.ok { color: var(--text); font-weight: 600; }
.covmsg.bad { color: var(--danger); font-weight: 600; }
.callnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.callnav .btn.primary { flex: 1; max-width: 70%; }
.calltotal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
.calltotal .r { text-align: right; }
.calltotalv { display: block; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) { .calltotal { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 10px; } .call { padding-bottom: 210px; } .grid4 { grid-template-columns: 1fr 1fr; } }
.callsum td { padding: 8px 4px; }
.callsum td.r { text-align: right; font-variant-numeric: tabular-nums; }
.callsum tr.grand td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--line); }
.calldone { font-size: 1.1rem; }
.cards .req, .agday { margin: 0; }
.appt { padding: 10px 0; border-top: 1px solid var(--line); }
.appt.cancelled { opacity: .5; text-decoration: line-through; }
.pricerow.off { opacity: .6; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.hrow .hl { min-width: 120px; margin: 0; color: var(--text); }
.hrow input[type=time] { width: auto; }
.proppanel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.propitem { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bizgroup { margin-bottom: 14px; }
.bizgroup input[type=color] { height: 44px; padding: 2px; }
@media (max-width: 680px) {
  table.callsum { display: table; width: 100%; }
  table.callsum tbody { display: table-row-group; }
  table.callsum tr { display: table-row; border: 0; padding: 0; margin: 0; background: none; }
  table.callsum td { display: table-cell; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  table.callsum td::before { content: none; }
}