:root {
  --ink: #1f2a33;
  --muted: #64707a;
  --line: #d8dee3;
  --bg: #f3f5f7;
  --card: #ffffff;
  --accent: #1b6f8a;
  --accent-ink: #ffffff;
  --code-bg: #fff8dc;
  --green: #dff1e2;
  --violet: #ebe6f7;
  --soft: #f1f6f9;
  --danger: #b3261e;
  --ok: #1e7a3a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--danger); min-height: 1em; margin: .4rem 0; font-size: .9rem; }
.ok { color: var(--ok); font-size: .9rem; }
.num { text-align: right; white-space: nowrap; }
input, select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }

.btn { font: inherit; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: .5rem .9rem; border-radius: 6px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.link { border: 0; background: none; color: var(--accent); padding: .25rem .4rem; }
.btn.small { padding: .25rem .55rem; font-size: .85rem; }
.btn.danger { color: var(--danger); }

/* Ingreso */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { background: var(--card); padding: 2rem; border-radius: 12px; width: min(360px, 100%); display: grid; gap: .8rem; box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.auth-logo { width: 180px; margin: 0 auto .5rem; }

/* Barra superior */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .5rem 16px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar-logo { height: 34px; }
.topbar nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.tab, .subtab { font: inherit; border: 0; background: none; padding: .5rem .8rem; border-radius: 6px; cursor: pointer; color: var(--muted); }
.tab.active, .subtab.active { background: var(--soft); color: var(--accent); font-weight: 600; }
.who { font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.pill { background: var(--soft); color: var(--accent); border-radius: 99px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; }

.panel { max-width: 1100px; margin: 0 auto; padding: 16px; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.card { background: var(--card); border-radius: 10px; padding: 1.2rem; border: 1px solid var(--line); }
.card.narrow { max-width: 420px; display: grid; gap: .8rem; }
.subtabs { display: flex; gap: .25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.row-between input { flex: 1; min-width: 200px; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

/* Hoja del presupuesto */
.sheet { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px; overflow-x: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--accent); padding-bottom: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sheet-logo { width: 210px; mix-blend-mode: multiply; }
.sheet-title { text-align: right; }
.sheet-title h1 { font-size: 2rem; letter-spacing: .2em; color: var(--accent); margin: 0; }
.sheet-title p { margin: .2rem 0 0; font-size: .8rem; color: var(--muted); }
.meta { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.meta-field { display: grid; gap: .2rem; }
.meta-field span { font-size: .75rem; color: var(--muted); letter-spacing: .05em; }
.meta-field.grow { flex: 1; min-width: 200px; }
.meta-field b { font-size: 1.05rem; }
.meta-note { font-size: .8rem; color: var(--muted); max-width: 260px; text-align: right; }

.budget-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.budget-table th { background: var(--accent); color: #fff; font-size: .72rem; font-weight: 600; padding: .5rem .4rem; text-align: center; line-height: 1.25; }
.budget-table th small { display: block; font-weight: 400; opacity: .9; }
.budget-table td { border-bottom: 1px solid var(--line); padding: .45rem .4rem; vertical-align: top; }
.budget-table td.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget-table td.money small { display: block; color: var(--muted); font-size: .75rem; }
.budget-table tfoot td { border-top: 2px solid var(--accent); border-bottom: 0; font-weight: 700; padding-top: .6rem; }
.budget-table tfoot td.money small { font-weight: 400; }
.total-label { text-align: right; letter-spacing: .1em; color: var(--accent); }
.c-code { width: 90px; }
.c-x { width: 32px; background: transparent !important; }
.code-input { width: 76px; background: var(--code-bg); text-align: center; font-weight: 600; }
.notfound { color: var(--danger); font-style: italic; }
.hint { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }

.sheet-foot { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; margin-top: 22px; }
.badge { border-radius: 8px; padding: .8rem; font-weight: 700; text-align: center; font-size: .85rem; white-space: pre-line; display: grid; place-items: center; }
.badge.green { background: var(--green); }
.badge.violet { background: var(--violet); }
.validity { background: var(--soft); border-radius: 8px; padding: .8rem; margin: 0; font-size: .85rem; }

/* Búsqueda y listados */
.search { margin-top: 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; overflow-x: auto; }
.search > input { width: 100%; margin-bottom: .6rem; }
.list-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.list-table th { text-align: left; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: .4rem; }
.list-table td { border-bottom: 1px solid var(--line); padding: .4rem; }
.list-table tr.cat td { background: var(--soft); font-weight: 700; font-size: .8rem; color: var(--accent); }
#sub-treatments { overflow-x: auto; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.settings-grid .span2 { grid-column: 1 / -1; margin: 0; }
.suffix { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.suffix input { width: 100px; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }

dialog { border: 0; border-radius: 12px; padding: 1.5rem; width: min(520px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog form { display: grid; gap: .8rem; }
dialog::backdrop { background: rgba(20,30,40,.4); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.import-preview { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }

.print-only { display: none; }

/* Celular: las tablas pasan a tarjetas. No se aplica mientras se arma
   la impresión (.printing), así el PDF sale igual desde cualquier pantalla. */
@media screen and (max-width: 700px) {
  body:not(.printing) .topbar { gap: .4rem; padding: .4rem 12px; }
  body:not(.printing) .topbar-logo { height: 28px; }
  body:not(.printing) .topbar nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body:not(.printing) .who { margin-left: auto; }
  body:not(.printing) #who-name { display: none; }
  body:not(.printing) .panel { padding: 12px; }
  body:not(.printing) .toolbar .btn { flex: 1 1 auto; }
  body:not(.printing) .toolbar #print { flex-basis: 100%; padding: .75rem; }
  body:not(.printing) .card { padding: 12px; }

  body:not(.printing) .sheet { padding: 14px; overflow: visible; }
  body:not(.printing) .sheet-head { padding-bottom: 10px; margin-bottom: 12px; }
  body:not(.printing) .tab, body:not(.printing) .subtab { white-space: nowrap; }
  body:not(.printing) .sheet-head { flex-wrap: nowrap; }
  body:not(.printing) .sheet-logo { width: 110px; }
  body:not(.printing) .sheet-title { text-align: right; }
  body:not(.printing) .sheet-title h1 { font-size: 1.1rem; letter-spacing: .12em; }
  body:not(.printing) .sheet-title p { font-size: .5rem; white-space: nowrap; }
  body:not(.printing) .meta { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  body:not(.printing) .meta-field input { width: 100%; font-size: 16px; }
  body:not(.printing) .meta-note { text-align: left; max-width: none; }
  body:not(.printing) .sheet-foot { grid-template-columns: 1fr; }

  /* Presupuesto: cada fila es una tarjeta */
  body:not(.printing) .budget-table { min-width: 0; display: block; }
  body:not(.printing) .budget-table thead { display: none; }
  body:not(.printing) .budget-table tbody,
  body:not(.printing) .budget-table tfoot { display: block; }
  body:not(.printing) .budget-table tfoot[hidden] { display: none; }
  body:not(.printing) .budget-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem;
    grid-template-areas: "code x" "name name" "lista efectivo" "transf seis";
    border: 1px solid var(--line); border-radius: 8px; padding: .6rem; margin-bottom: .6rem;
  }
  body:not(.printing) .budget-table td { border: 0; padding: 0; }
  body:not(.printing) .budget-table .c-code { grid-area: code; width: auto; }
  body:not(.printing) .budget-table .c-name { grid-area: name; font-weight: 600; }
  body:not(.printing) .budget-table .c-x { grid-area: x; width: auto; text-align: right; }
  body:not(.printing) .budget-table [data-k="lista"], body:not(.printing) .budget-table [data-t="lista"] { grid-area: lista; }
  body:not(.printing) .budget-table [data-k="efectivo"], body:not(.printing) .budget-table [data-t="efectivo"] { grid-area: efectivo; }
  body:not(.printing) .budget-table [data-k="transf"], body:not(.printing) .budget-table [data-t="transf"] { grid-area: transf; }
  body:not(.printing) .budget-table [data-k="seis"], body:not(.printing) .budget-table [data-t="seis"] { grid-area: seis; }
  body:not(.printing) .budget-table td.money { text-align: left; white-space: normal; background: var(--soft); border-radius: 6px; padding: .4rem .5rem; }
  body:not(.printing) .budget-table td.money:empty { display: none; }
  body:not(.printing) .budget-table tr.empty .c-name:empty { display: none; }
  body:not(.printing) .code-input { width: 100%; font-size: 16px; }
  body:not(.printing) .budget-table tfoot tr { border: 2px solid var(--accent); }
  body:not(.printing) .budget-table tfoot td { border: 0; padding-top: 0; }
  body:not(.printing) .budget-table tfoot td.money { padding: .4rem .5rem; }
  body:not(.printing) .budget-table tfoot .c-code, body:not(.printing) .budget-table tfoot .c-x { display: none; }
  body:not(.printing) .total-label { text-align: left; }

  /* Listados (buscador, tratamientos, usuarios) como tarjetas */
  body:not(.printing) .search { padding: 12px; }
  body:not(.printing) .search > input { font-size: 16px; }
  body:not(.printing) .list-table.cards thead { display: none; }
  body:not(.printing) .list-table.cards, body:not(.printing) .list-table.cards tbody { display: block; }
  body:not(.printing) .list-table.cards tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem;
    border: 1px solid var(--line); border-radius: 8px; padding: .6rem; margin-bottom: .5rem;
  }
  body:not(.printing) .list-table.cards tr.cat { border: 0; padding: .4rem 0 0; margin: .4rem 0 .2rem; }
  body:not(.printing) .list-table.cards tr.cat td { background: none; padding: 0; }
  body:not(.printing) .list-table.cards td { border: 0; padding: 0; grid-column: 1 / -1; }
  body:not(.printing) .list-table.cards td[data-label] { grid-column: auto; text-align: left; }
  body:not(.printing) .list-table.cards td.card-title:first-child { font-size: .8rem; color: var(--muted); }
  body:not(.printing) .list-table.cards td.card-title + td.card-title { font-weight: 600; margin-top: -.25rem; }
  body:not(.printing) .list-table.cards td.card-sub { font-size: .8rem; margin-top: -.25rem; }
  body:not(.printing) .list-table.cards td.card-sub:empty { display: none; }
  body:not(.printing) .list-table.cards td.card-actions { text-align: left; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
  body:not(.printing) .list-table.cards td.card-actions .btn { flex: 1; padding: .55rem; }
  body:not(.printing) .list-table.cards td[colspan] { grid-column: 1 / -1; }

  body:not(.printing) [data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--muted); font-weight: 600; }

  body:not(.printing) .row-between input { min-width: 0; width: 100%; font-size: 16px; }
  body:not(.printing) .actions { justify-content: stretch; width: 100%; }
  body:not(.printing) .actions .btn { flex: 1 1 auto; }
  body:not(.printing) .inline-form > * { flex: 1 1 100%; font-size: 16px; }
  body:not(.printing) .settings-grid { grid-template-columns: 1fr; }
}

/* Impresión: el presupuesto ocupa como máximo media hoja A4 (A5 apaisado,
   210 × 148,5 mm) en la mitad de arriba, para imprimir dos por hoja y cortar.
   La clase .printing la pone app.js antes de imprimir; si el contenido no
   entra, app.js lo achica con --print-zoom. */
body.printing .no-print, body.printing .hint { display: none !important; }
body.printing .print-only { display: inline; }
body.printing .sheet { width: 210mm; height: 148.5mm; padding: 7mm 10mm; border: 0; border-radius: 0; border-bottom: 1px dashed #b8c0c6; overflow: hidden; font-size: 8.5pt; }
body.printing .sheet-inner { width: calc(190mm / var(--print-zoom, 1)); zoom: var(--print-zoom, 1); }
body.printing .sheet-head { padding-bottom: 2.5mm; margin-bottom: 3mm; border-bottom-width: 2px; flex-wrap: nowrap; }
body.printing .sheet-logo { width: 40mm; }
body.printing .sheet-title h1 { font-size: 17pt; }
body.printing .sheet-title p { font-size: 6.5pt; }
body.printing .meta { margin-bottom: 2.5mm; gap: 6mm; flex-wrap: nowrap; }
body.printing .meta-field span { font-size: 6.5pt; }
body.printing .meta-field b { font-size: 9.5pt; }
body.printing .meta-note { font-size: 6.5pt; max-width: 60mm; }
body.printing .budget-table { min-width: 0; }
body.printing .budget-table th { font-size: 6.5pt; padding: 1.3mm 1mm; }
body.printing .budget-table td { padding: 1.2mm 1mm; font-size: 8pt; }
body.printing .budget-table td.money small { font-size: 6.5pt; }
body.printing .budget-table tfoot td { padding-top: 1.6mm; }
body.printing .budget-table tr.empty { display: none; }
body.printing .c-code { width: 13mm; }
body.printing .code-input { width: 100%; border: 0; background: none; padding: 0; font-size: 8pt; }
body.printing .sheet-foot { margin-top: 4mm; gap: 2.5mm; grid-template-columns: 1fr 1fr 2fr; }
body.printing .badge, body.printing .validity { padding: 2mm; font-size: 7pt; border-radius: 4px; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: #fff; }
  .no-print, .topbar, .search, .hint { display: none !important; }
  .print-only { display: inline; }
  .panel { padding: 0; margin: 0; max-width: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}