/* =============================================================================
   CAPTA · Presupuestos — Sistema visual (cáscara CAPTA) + documento (consultorio)
   La cáscara usa la marca CAPTA. El documento (.doc-render) usa la marca del
   consultorio vía var(--verde/--marfil/--borde/--gris/--font-heading/--font-body),
   seteadas en el contenedor por applyDocVars(). No se mezclan.
   ============================================================================= */
:root {
  --navy: #112550; --cobalt: #1a387a; --teal: #2aa8a0; --bright: #38cdc4; --dark: #207f79;
  --white: #f9f9f9; --text: #0e1f3d; --sub: #3a5070; --muted: #7a90a8;
  --bg: #f4f6fa; --surface: #ffffff; --border: #e2e6ee; --border-strong: #c8cfdc;
  --danger: #c0392b; --success: #1f8a70;
  --font-serif: "DM Serif Display", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --topbar-h: 64px; --sidenav-w: 240px; --radius: 8px; --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(14,31,61,.06);
}
html, body { font-family: var(--font-sans); color: var(--text); background: var(--bg); }
body { font-size: 14px; }
h1 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; font-size: 26px; color: var(--navy); }

/* ---------- Layout (idéntico a los módulos) ---------- */
#app { min-height: 100vh; display: grid; grid-template-columns: var(--sidenav-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "topbar topbar" "sidenav main"; transition: grid-template-columns .2s ease; }
body.sidenav-collapsed { --sidenav-w: 0px; }
#iframe-tabs { display: none; grid-area: iframe-tabs; }
body.in-iframe #app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "tenant-band" "iframe-tabs" "main"; }
body.in-iframe #topbar, body.in-iframe #sidenav { display: none; }
body.in-iframe #iframe-tabs { display: flex !important; background: linear-gradient(135deg,#122a61 0%,#112550 60%,#0e1d42 100%); border-bottom: 1px solid rgba(56,205,196,.15); padding: 0 8px; min-height: 40px; align-items: center; overflow-x: auto; }
.iframe-tab { background: none; border: none; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: rgba(249,249,249,.75); padding: 8px 12px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.iframe-tab:hover { color: #fff; }
.iframe-tab.active { color: #fff; border-bottom-color: var(--teal); font-weight: 600; }
.module-title { color: var(--teal); font-size: 14px; font-weight: 600; padding: 0 16px 0 8px; border-right: 1px solid rgba(56,205,196,.3); margin-right: 8px; white-space: nowrap; display: inline-flex; align-items: center; height: 40px; }

#topbar { grid-area: topbar; background: var(--navy); color: var(--white); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cobalt); }
#topbar .brand { display: flex; align-items: center; gap: 12px; }
#topbar .brand img { height: 32px; width: auto; }
#topbar .brand .sep { color: var(--bright); margin: 0 4px; }
#topbar .brand .title { font-family: var(--font-serif); font-size: 18px; color: var(--white); }
#topbar .ctx { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
#topbar .ctx strong { color: var(--white); font-weight: 500; }
#sidenav { grid-area: sidenav; position: relative; }
.sidenav-inner { background: linear-gradient(180deg,#112550 0%,#0d1c3f 100%); padding: 16px 0; display: flex; flex-direction: column; height: 100%; box-shadow: 2px 0 8px rgba(17,37,80,.08); }
.sidenav-toggle { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 24px; height: 24px; background: #112550; border: .5px solid rgba(255,255,255,.15); border-radius: 50%; color: #38cdc4; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }
body.sidenav-collapsed .sidenav-toggle .chevron { transform: rotate(180deg); display: inline-block; }
#sidenav .nav-btn { padding: 12px 24px; color: rgba(255,255,255,.75); font-size: 14px; font-weight: 500; text-align: left; border-left: 3px solid transparent; transition: all .15s; }
#sidenav .nav-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
#sidenav .nav-btn.active { background: rgba(255,255,255,.08); color: var(--bright); border-left-color: var(--bright); }
#main { grid-area: main; padding: 24px 32px; overflow-y: auto; }

/* ---------- UI genérica ---------- */
.panel-header { margin-bottom: 24px; }
.panel-header h1 { color: var(--navy); }
.subtitle { color: var(--sub); font-size: 14px; margin-top: 4px; }
.panel-loading { color: var(--muted); padding: 40px; text-align: center; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
input[type="text"], input[type="date"], input[type="number"], select {
  height: 38px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 14px; color: var(--text); font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,168,160,.15); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; background: var(--teal); color: #fff; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background .2s; }
.btn-primary:hover { background: var(--dark); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; background: var(--surface); color: var(--sub); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: all .2s; }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn-light { background: var(--surface); color: var(--navy); border-radius: 6px; padding: 8px 18px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-light:hover { background: var(--bright); }
.btn-light:disabled { opacity: .6; cursor: default; }
.block { width: 100%; margin-top: 8px; }

/* ---------- Form Generar ---------- */
.trat-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.trat-table th { font-family: var(--font-sans); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 10px 12px; text-align: left; border: 1px solid var(--border); }
.trat-table td { border: 1px solid var(--border); padding: 6px 8px; }
.trat-table input, .trat-table select, .trat-table textarea { width: 100%; border: none; background: transparent; padding: 6px 4px; font-size: 13px; font-family: var(--font-sans); color: var(--text); height: auto; }
.trat-table input:focus, .trat-table textarea:focus { outline: none; background: rgba(56,205,196,.08); border-radius: 4px; box-shadow: none; }
.col-desc { width: 40%; } .col-cant { width: 12%; } .col-precio { width: 17%; } .col-precio2 { width: 19%; } .col-del { width: 6%; text-align: center; }
.desc-edit { display: block; font-size: 11px !important; color: var(--muted) !important; margin-top: 2px; resize: vertical; min-height: 18px; overflow: hidden; }
.btn-add-row { border: 1px dashed var(--border-strong); border-radius: 6px; padding: 9px 16px; font-size: 13px; color: var(--teal); cursor: pointer; width: 100%; transition: all .2s; }
.btn-add-row:hover { background: rgba(42,168,160,.06); border-color: var(--teal); }

/* ---------- Marco del documento (preview) ---------- */
.doc-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-top: 20px; overflow: hidden; }
.doc-actions { background: var(--navy); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.doc-actions > span { color: #fff; font-size: 13px; font-weight: 500; }
.doc-actions-btns { display: flex; gap: 10px; }
.marca-preview-label { font-family: var(--font-serif); font-size: 15px; color: var(--navy); margin-bottom: 10px; }
/* .doc-stage: fondo gris donde "flota" la hoja A4. La hoja se escala para entrar
   entera en el ancho; si el contenido excede A4, crece y scrollea por #main/iframe. */
.doc-stage { background: #e9ecf1; padding: 16px; overflow: hidden; }
.doc-stage > * { transform-origin: top left; }

/* ---------- Documento (marca del consultorio) — A4 ----------
   MODELO DE COLOR (cualquier paleta debe funcionar en cualquier plantilla):
   - Texto sobre fondos de COLOR de la plantilla → safeguard var(--ink) (claro/oscuro
     según el brillo del principal). Premium (documento) y Moderna (barra total).
   - Cuerpo (nombres, descripciones) sobre fondo NEUTRO → campo "Texto" var(--gris).
   - FUNCIONALES (precios, total, header de tabla): contraste GARANTIZADO siempre
     (var(--func-box) sobre fondo de cajas, var(--ink-paper) sobre papel). El paciente
     DEBE leerlos, no dependen del color elegido por la doctora.
   - DECORATIVOS (título "PRESUPUESTO", nombre del consultorio, labels): usan el color
     de marca (--verde) y pueden quedar sutiles con paletas muy claras, por diseño. */
.doc-render {
  /* La marca real la inyecta applyDocVars() inline donde se renderiza el documento.
     Los defaults NO se declaran acá (eso bloqueaba la herencia cuando applyDocVars
     setea sobre el contenedor padre, p.ej. el preview de "Mi marca"): viven como
     fallback en cada var(--x, default), así funciona setee donde setee. */
  width: 210mm; min-height: 297mm; padding: 14mm 16mm; margin: 0 auto;
  background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.15); color: var(--gris, #43493f); font-family: var(--font-body, 'Lato', sans-serif);
}
.pdf-header { display: flex; align-items: flex-start; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--borde, #b8985b); }
.pdf-logo-area { flex: 1; text-align: center; }
/* logo acotado + CENTRADO (reset.css fuerza img:block → centramos con margin auto). */
.pdf-logo-area img { max-width: 580px; max-height: 160px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.pdf-logo-text { font-family: var(--font-heading, 'Cinzel', serif); }
.pdf-logo-nombre { font-size: 26px; color: var(--verde, #162d25); font-weight: 700; line-height: 1.1; display: block; }
.pdf-titulo { font-family: var(--font-heading, 'Cinzel', serif); font-size: 32px; font-weight: 700; color: var(--verde, #162d25); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 28px; }
.pdf-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 36px; }
.pdf-meta-item { font-size: 12px; }
.pdf-meta-item strong { font-weight: 700; color: var(--verde, #162d25); text-transform: uppercase; letter-spacing: 1px; }
.pdf-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.pdf-table th { background: var(--verde-claro, #e9e0cf); font-family: var(--font-heading, 'Cinzel', serif); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--func-box, #162d25); padding: 12px 16px; text-align: left; border: 1px solid var(--borde, #b8985b); }
.pdf-table th:last-child, .pdf-table th:nth-child(3) { text-align: right; }
.pdf-table th:nth-child(2) { text-align: center; }
.pdf-table td { padding: 11px 16px; border: 1px solid #E8E8E8; font-size: 13px; vertical-align: middle; }
.pdf-table td:last-child, .pdf-table td:nth-child(3) { text-align: right; }
.pdf-table td:nth-child(2) { text-align: center; }
.pdf-table tr:nth-child(even) td { background: #FAFAF8; }
/* Funcionales (cant. + precios) sobre papel: contraste garantizado, no dependen de la paleta. */
.pdf-table td:nth-child(2), .pdf-table td:nth-child(3), .pdf-table td:last-child { color: var(--ink-paper, #1f2a22); }
.pdf-row-name { font-weight: 700; line-height: 1.3; }
.pdf-row-desc { font-size: 11px; color: var(--gris, #43493f); margin-top: 3px; line-height: 1.45; opacity: .9; }
.pdf-totales { display: flex; justify-content: flex-end; margin-bottom: 48px; }
.pdf-totales-box { width: 300px; border: 1px solid var(--borde, #b8985b); border-radius: 4px; overflow: hidden; }
.pdf-total-row { display: flex; justify-content: space-between; padding: 9px 16px; font-size: 13px; border-bottom: 1px solid #EEE; }
.pdf-total-row:last-child { border-bottom: none; background: var(--verde-claro, #e9e0cf); font-weight: 700; color: var(--func-box, #162d25); font-size: 14px; }
.pdf-legal { text-align: right; font-size: 10px; color: #888; margin-top: 8px; font-family: var(--font-body, 'Lato', sans-serif); }
.pdf-footer { display: flex; justify-content: flex-end; gap: 24px; padding-top: 24px; border-top: 1px solid var(--verde-claro, #e9e0cf); font-size: 11px; color: var(--gris, #43493f); margin-top: 8px; }
.pdf-footer-item { display: flex; align-items: center; gap: 6px; }

/* premium */
.doc-render.tpl-premium { padding: 0; color: var(--ink, #fff); background: var(--verde, #162d25); }
.pr-inner { padding: 44px 46px; }
.pr-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; gap: 20px; }
.pr-logo { max-height: 88px; max-width: 380px; height: auto; width: auto; object-fit: contain; }
.pr-name { font-family: var(--font-heading, 'Cinzel', serif); font-size: 22px; letter-spacing: 1px; color: var(--ink, #fff); }
.pr-badge { font-family: var(--font-heading, 'Cinzel', serif); font-size: 10px; letter-spacing: 4px; color: var(--borde, #b8985b); text-transform: uppercase; border: 1px solid var(--borde, #b8985b); padding: 8px 14px; border-radius: 2px; white-space: nowrap; }
.pr-title { font-family: var(--font-heading, 'Cinzel', serif); font-size: 44px; line-height: 1; color: var(--ink, #fff); margin-bottom: 6px; }
.pr-for { font-size: 12px; letter-spacing: 1px; color: var(--borde, #b8985b); margin-bottom: 36px; }
.pr-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--borde, #b8985b) 30%, transparent); }
.pr-row .rn { font-family: var(--font-heading, 'Cinzel', serif); font-size: 16px; color: var(--ink, #fff); }
.pr-row .rd { font-size: 11px; color: color-mix(in srgb, var(--ink, #fff) 45%, var(--verde, #162d25)); max-width: 340px; margin-top: 4px; line-height: 1.5; }
.pr-row .rp { font-family: var(--font-heading, 'Cinzel', serif); font-size: 17px; color: var(--ink, #fff); white-space: nowrap; padding-left: 20px; }
.pr-totwrap { margin-top: 34px; display: flex; justify-content: flex-end; }
.pr-tot { text-align: right; }
.pr-tot .l { font-size: 10px; letter-spacing: 3px; color: var(--borde, #b8985b); text-transform: uppercase; margin-bottom: 10px; }
.pr-tot .v { font-family: var(--font-heading, 'Cinzel', serif); font-size: 46px; color: var(--ink, #fff); line-height: 1.1; }
.pr-note { font-size: 10px; color: color-mix(in srgb, var(--ink, #fff) 40%, var(--verde, #162d25)); margin-top: 18px; }
.pr-foot { background: color-mix(in srgb, var(--verde, #162d25) 78%, #000); padding: 18px 46px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; letter-spacing: 1px; color: color-mix(in srgb, var(--ink, #fff) 48%, var(--verde, #162d25)); }

/* moderna */
.doc-render.tpl-moderna { padding: 12mm 14mm; color: #1f2a22; }
.mo-head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.mo-logo { width: 46px; height: 46px; border-radius: 50%; background: var(--verde, #162d25); color: var(--borde, #b8985b); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, 'Cinzel', serif); font-size: 20px; flex-shrink: 0; overflow: hidden; }
.mo-logo.mo-logo-img { width: auto; min-width: 46px; max-width: 240px; height: 68px; border-radius: 8px; background: transparent; }
.mo-logo.mo-logo-img img { width: auto; max-width: 240px; height: 100%; object-fit: contain; }
.mo-head .hn { font-size: 17px; font-weight: 600; color: var(--verde, #162d25); line-height: 1.2; }
.mo-pill { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--marfil, #e9e0cf); color: var(--verde, #162d25); padding: 6px 14px; border-radius: 20px; }
.mo-meta { display: flex; gap: 24px; font-size: 12px; color: #6a6f66; background: color-mix(in srgb, var(--marfil, #e9e0cf) 45%, #fff); border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; flex-wrap: wrap; }
.mo-meta b { color: var(--verde, #162d25); }
.mo-card { border: 1px solid color-mix(in srgb, var(--marfil, #e9e0cf) 55%, #fff); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mo-card .cn { font-size: 15px; font-weight: 600; color: var(--gris, #43493f); }
.mo-card .cd { font-size: 12px; color: var(--gris, #43493f); opacity: .65; margin-top: 4px; line-height: 1.5; }
.mo-card .cright { text-align: right; white-space: nowrap; }
.mo-card .cp { font-size: 15px; font-weight: 600; color: var(--ink-paper, #1f2a22); }
.mo-card .cl { font-size: 11px; color: #a8aca2; text-decoration: line-through; }
.mo-tot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; background: var(--verde, #162d25); border-radius: 12px; padding: 16px 20px; }
.mo-tot .l { font-size: 12px; letter-spacing: 1px; color: var(--borde, #b8985b); }
.mo-tot .v { font-size: 24px; font-weight: 600; color: var(--ink, #fff); }
.mo-note { font-size: 11px; color: #a8aca2; margin-top: 14px; text-align: center; }

/* ---------- Mi marca: dos columnas a ancho completo ---------- */
.marca-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; }
.marca-grid > * { min-width: 0; }
.marca-preview { position: sticky; top: 24px; }
.tpl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-card { border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 10px; cursor: pointer; text-align: center; transition: all .2s; display: flex; flex-direction: column; gap: 3px; }
.tpl-card:hover { border-color: var(--teal); }
.tpl-card.sel { border-color: var(--teal); background: rgba(42,168,160,.08); }
.tpl-card span { font-weight: 600; font-size: 13px; color: var(--navy); }
.tpl-card small { font-size: 10px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.seg button { background: var(--surface); border: none; padding: 8px 20px; font-size: 13px; cursor: pointer; color: var(--sub); }
.seg button.sel { background: var(--teal); color: #fff; }
.logo-drop { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 18px; text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; transition: all .2s; }
.logo-drop:hover, .logo-drop.drag { background: rgba(42,168,160,.06); border-color: var(--teal); }
.logo-thumb { max-height: 56px; max-width: 200px; margin: 10px auto 0; display: block; }
.color-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.color-ctl { display: flex; flex-direction: column; gap: 6px; }
.color-ctl .inrow { display: flex; gap: 8px; align-items: center; }
.color-ctl input[type="color"] { width: 40px; height: 34px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }
.color-ctl input.hex { flex: 1; text-transform: uppercase; }
.color-ctl .na-tag { display: none; font-size: 10px; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.color-ctl.na { opacity: .45; }
.color-ctl.na .na-tag { display: block; }

@media (max-width: 900px) { .marca-grid { grid-template-columns: 1fr; } .marca-preview { position: static; } }

/* ---------- Impresión (PDF por window.print) — A4 ---------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  #topbar, #sidenav, #iframe-tabs, #tenant-band, .panel-header, .card, .btn-primary, .btn-secondary,
  .doc-actions, .marca-form, .marca-preview-label { display: none !important; }
  /* En embebido, body.in-iframe #iframe-tabs tiene más especificidad y queda visible;
     lo ocultamos con la misma especificidad para que el PDF salga sin la barra de tabs. */
  body.in-iframe #topbar, body.in-iframe #sidenav, body.in-iframe #iframe-tabs,
    body.in-iframe #tenant-band { display: none !important; }
  #app { display: block !important; }
  #main { padding: 0 !important; overflow: visible !important; }
  .doc-frame { border: none !important; box-shadow: none !important; margin: 0 !important; }
  .doc-stage { background: #fff !important; padding: 0 !important; overflow: visible !important; }
  .doc-stage > * { transform: none !important; }
  .doc-render { width: auto !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important; padding: 14mm 16mm !important; }
  .doc-render.tpl-premium { padding: 0 !important; }
  .doc-render.tpl-moderna { padding: 12mm 14mm !important; }
}

/* ── Banda de identidad de consultorio (Pendientes §2.6) ────────────────────
   Solo se muestra embebido y solo para admin — ver components/tenant_band.js.
   Sistema de marca. Se descartó el ámbar del primer intento (no está en la
   paleta y competía con el teal, que acá significa acción) y después el navy
   plano con borde teal, que la leía como una barra aparte.
   Ahora usa el MISMO gradiente que #iframe-tabs y sin borde inferior: banda y
   tabs se leen como un solo header. La señal la carga íntegramente el nombre
   del consultorio — blanco 800 sobre navy, 14,4:1 — con la etiqueta en teal
   como ancla de marca. El hairline teal del bloque lo sigue poniendo
   #iframe-tabs en su borde inferior, que ahora cierra el header completo. */
#tenant-band[hidden] { display: none !important; }
#tenant-band {
  grid-area: tenant-band;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem 1rem;
  background: linear-gradient(135deg, #122a61 0%, #112550 60%, #0e1d42 100%);
  font-size: .95rem;
  letter-spacing: .01em;
}
#tenant-band .tb-label {
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--teal, #2aa8a0);
}
#tenant-band .tb-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}


/* ---------------------------------------------------------------------------
   Botón primario deshabilitado.
   El presupuestador nunca necesitó esta regla porque cuando deshabilita un botón
   le cambia el texto en el mismo gesto ("Guardando…"), y eso ya comunica. Acá el
   botón de confirmar queda bloqueado con su texto normal mientras falten datos:
   sin estilo se veía idéntico a uno activo, y un click sin respuesta ni
   explicación es peor que un error.
--------------------------------------------------------------------------- */
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Agenda del día en tarjetas (bloque E, pantalla 1).
   Estructura de la maqueta E sobre la marca: la tarjeta, las insignias y los
   botones son los de shared (.c-tarjeta, .c-insignia-*, .c-btn-*); acá va solo
   el acomodo. Todos los valores salen de shared/tokens.css.
--------------------------------------------------------------------------- */
.agenda-dia { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espacio-3); margin-bottom: var(--espacio-4); }
/* El título conserva los 28px de la convención (etapa 2, --titulo) y baja de
   peso con --sub: es una lista de trabajo y los turnos pesan más que el día. */
.agenda-fecha { font-family: var(--font-serif); font-weight: 400; color: var(--sub); }
.agenda-contador { font-size: var(--texto-chico); color: var(--sub); }
.agenda-nav { display: flex; gap: var(--espacio-1); margin-left: auto; }
.agenda-turno { margin-bottom: var(--espacio-2); }
.agenda-turno.abierta { border-color: var(--teal); }
.agenda-cabeza { display: flex; align-items: center; gap: var(--espacio-4); }
.agenda-hora { flex: none; width: var(--agenda-hora-w); color: var(--sub); font-variant-numeric: tabular-nums; }
.agenda-quien { flex: 1; min-width: 0; }
.agenda-quien b { display: block; font-weight: 600; color: var(--text); }
.agenda-quien small { font-size: var(--texto-chico); color: var(--muted); }
/* "Registrado" lleno y "Falta registrar" claro: se distinguen por contraste, no
   por intensidad. --dark y no --teal, para que no se lea como un botón. */
.agenda-chip-registrado { background: var(--dark); color: var(--white); }
.agenda-nota { font-size: var(--texto-chico); color: var(--muted); }
.agenda-aviso { margin-bottom: var(--espacio-3); }
.agenda-sin-turno { margin-top: var(--espacio-4); }
.agenda-descartar { margin-top: var(--espacio-3); }
.agenda-descartar .c-aviso { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.agenda-descartar-botones { display: flex; gap: var(--espacio-2); }
.agenda-hecho { margin-top: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success); font-size: var(--texto-chico); }
/* Registros del día sin turno, y lo anulado (bloque de corrección). */
.agenda-subtitulo { margin: var(--espacio-5) 0 var(--espacio-2); font-family: var(--font-serif); font-weight: 400; font-size: var(--texto); color: var(--sub); }
.agenda-anulado { margin-top: var(--espacio-2); font-size: var(--texto-chico); color: var(--muted); }
/* Lo anulado se ve atenuado y tachado, pero se ve: no se esconde. */
.agenda-anulada { opacity: .75; }
.agenda-anulada .agenda-quien b { text-decoration: line-through; }
.detalle-anulado { margin-bottom: var(--espacio-4); }
.detalle-motivo { display: grid; gap: var(--espacio-2); margin-top: var(--espacio-3); }
.detalle-motivo input { width: 100%; }
.detalle-motivo .registro-confirmar { margin-top: 0; }
.detalle.anulado .registro-total { color: var(--muted); text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   El registro dentro de la tarjeta (bloque E, pantallas 2 a 5). Estructura de
   la maqueta E: campos de a dos o tres por fila y el resumen de plata fijo al
   costado. Todos los valores salen de shared/tokens.css.
--------------------------------------------------------------------------- */
.registro { margin-top: var(--espacio-3); padding-top: var(--espacio-4); border-top: 1px solid var(--border); }
.registro-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--resumen-w); gap: var(--espacio-4); align-items: start; }
.registro-sec { margin-bottom: var(--espacio-4); }
.registro-titulo { margin: 0 0 var(--espacio-2); font-size: var(--texto-chico); font-weight: 400; color: var(--muted); }
.registro-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-3); }
.registro-fila.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.registro-fila select, .registro-fila input { width: 100%; }
.registro .contact-search-wrap input { width: 100%; } /* el buscador de "sin turno", a todo el ancho */
.registro-cuando { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-2); }
.registro-cuando b { font-weight: 600; color: var(--text); }
.registro-cuando-editor { display: flex; align-items: center; gap: var(--espacio-2); flex-basis: 100%; }
/* El display de arriba le gana al atributo hidden: sin esto, el editor se veía
   sin haber tocado "cambiar". */
.registro-cuando-editor[hidden], .registro-link[hidden] { display: none; }
.registro-dia { color: var(--text); }
.registro-hora { width: calc(var(--espacio-5) * 3); }
.registro-error-campo { flex-basis: 100%; font-size: var(--texto-chico); color: var(--danger); }
.registro-error-campo:empty { display: none; }
.registro-link { background: none; border: 0; padding: 0; color: var(--teal); font-size: var(--texto-chico); text-decoration: underline; cursor: pointer; }
.registro-nota { margin-top: var(--espacio-1); font-size: var(--texto-chico); color: var(--muted); }
.registro-nota-campo { display: flex; align-items: center; min-height: var(--control-h); margin: 0; }
.registro-atencion { padding: var(--espacio-3) 0; border-bottom: 1px dashed var(--border); }
.registro-atencion:first-child { padding-top: 0; }
.registro-detalles, .registro-atencion [data-usage] { margin-top: var(--espacio-2); }
.registro-quitar { justify-content: flex-end; }
.registro-linea { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-2); font-size: var(--texto-chico); color: var(--muted); }
.registro-acciones { display: flex; gap: var(--espacio-3); }
.registro-precio { color: var(--text); font-size: var(--texto); font-variant-numeric: tabular-nums; }
.registro-sin-precio { color: var(--danger); }
/* Lo de plata de cada atención, a la derecha: "ya estaba paga" y el precio. */
.registro-plata { display: flex; align-items: center; gap: var(--espacio-3); }
/* La casilla no es una etiqueta de campo: sin las mayúsculas chicas del panel. */
.registro-check { display: inline-flex; align-items: center; gap: var(--espacio-1); font-size: var(--texto-chico); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sub); cursor: pointer; }
.registro-pago + .registro-pago { margin-top: var(--espacio-3); }
.registro-resumen { position: sticky; top: var(--espacio-4); padding: var(--espacio-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.registro-total { margin: 0 0 var(--espacio-3); font-family: var(--font-serif); font-size: var(--titulo); color: var(--navy); font-variant-numeric: tabular-nums; }
.registro-kv { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2); padding: var(--espacio-1) 0; border-top: 1px solid var(--border); font-size: var(--texto-chico); color: var(--sub); }
.registro-kv label { font-size: var(--texto-chico); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sub); }
.registro-kv.fuerte { color: var(--text); font-weight: 600; }
.registro-desc { width: calc(var(--espacio-5) * 3); text-align: right; }
.registro-aviso { margin-top: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); font-size: var(--texto-chico); }

/* El cobro que ya entró (062). Este aviso BLOQUEA el confirmar, así que tiene
   que leerse distinto de los que solo avisan: las opciones van abajo, en
   botones, porque hay que elegir una. */
.registro-enganche-ops { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.registro-confirmar { width: 100%; margin-top: var(--espacio-3); }
.registro-falta { margin: var(--espacio-1) 0 0; font-size: var(--texto-chico); color: var(--muted); text-align: center; }
.registro-error { margin-top: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); font-size: var(--texto-chico); }
/* Corte de la maqueta: en pantallas angostas el resumen baja y los campos van de
   a uno. 820px queda como número a propósito: CSS no acepta variables en
   @media (aprobado por Felipe). */
@media (max-width: 820px) {
  .registro-split { grid-template-columns: 1fr; }
  .registro-resumen { position: static; }
  .registro-fila, .registro-fila.dos { grid-template-columns: 1fr; }
}

/* La línea fija de cobros que esperan atención (062). Va arriba de todo porque
   contesta una pregunta que no es del día que estás mirando: qué plata entró y
   todavía no se usó. Sin esto, un cobro de hace tres semanas no se encuentra. */
.agenda-pendientes-lista { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-4); }
.agenda-pendientes-lista li { margin-top: var(--espacio-1); }

/* Los DOS números del resumen (PLAN §3.8): lo que vale y lo que paga. "Paga el
   paciente" va inmediatamente debajo del total para que se lean juntos — si
   quedaran separados, alguien lee uno solo, que es lo que hay que evitar. */
.registro-paga { margin-top: calc(var(--espacio-1) * -1); }

/* La explicación del saldo va a lo ancho de la columna de campos, no en el
   resumen de 250px: ahí salía una palabra por renglón y se desbordaba justo
   donde hay que leerla para decidir si se cobra la diferencia. */
/* `display: block` a propósito: .c-aviso es flex con gap, así que cada trozo de
   texto y cada <b> se volvían un ítem y el párrafo salía en columnas. Se corrige
   acá y no en el componente compartido, que lo usan todos los módulos. */
.registro-porque { display: block; margin-top: var(--espacio-3); padding: var(--espacio-3); line-height: 1.55; font-size: var(--texto-chico); }