/* Base administrativa DENTRO de la consola (index.html, `data-consola`): datos.css / fila-datos.css / conciliar-panels.css se escribieron
   contra app.css (tema de Sereno). Aquí se les da lo que esperan, servido desde los tokens de la consola, y las clases de Sereno
   (.ghost, .row, .scroll…) se visten como las de la consola (button.sec, .fila…). Nada de esto se carga en datos.html. */
:root[data-consola] {
  /* Tripletas que la consola define con otro significado (`--line` es allí un color). */
  --dt-line: var(--border); --dt-line-strong: var(--border); --dt-shadow: 201 60% 20%; --dt-shadow-a: .07;
  --ink: var(--txt);
  --accent: hsl(var(--primary));
  --ok: hsl(var(--success)); --bad: hsl(var(--destructive)); --warn: hsl(var(--warning));
  --bad-h: var(--destructive); --primary-ink: var(--primary);
  --radius-sm: calc(var(--radius) - 2px); --radius-pill: 999px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --parcial: 36 96% 46%; --parcial-ink: 30 92% 30%;
}
:root[data-consola][data-tema="oscuro"] {
  --dt-line: var(--border); --dt-shadow: 0 0% 0%; --dt-shadow-a: .55;
  --parcial: 40 96% 56%; --parcial-ink: 40 96% 66%;
}

/* ── Utilidades de Sereno que la consola no trae ── */
#vBase .row, dialog.ficha .row, .dt-sheet .row, .dt-modal .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#vBase .spacer, dialog.ficha .spacer, .dt-modal .spacer { flex: 1; }
#vBase .scroll, dialog.ficha .scroll, .dt-sheet .scroll { overflow-x: auto; }
#vBase .small, dialog.ficha .small { font-size: 12px; }
#vBase .muted, dialog.ficha .muted, .dt-sheet .muted { color: var(--muted); }
#vBase .empty { padding: 28px 12px; text-align: center; color: var(--muted); }
#vBase .barra, dialog.ficha .barra { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: hsl(var(--mutedbg)); min-width: 90px; }
.barra i { display: block; }
.barra i[class*="fg-"] { flex: 0 0 auto; }
.barra .b-parcial { background: hsl(var(--primary)); }

/* ── Botones: .ghost / .danger / .sm / .icon-btn → button.sec de la consola ── */
#vBase button.ghost, dialog.ficha button.ghost, .dt-sheet button.ghost, .dt-modal button.ghost, #vBase button.icon-btn {
  background: var(--card); color: var(--txt); border: 1px solid var(--line); box-shadow: var(--sombra); }
#vBase button.ghost:hover, dialog.ficha button.ghost:hover, .dt-sheet button.ghost:hover, .dt-modal button.ghost:hover, #vBase button.icon-btn:hover {
  background: hsl(var(--mutedbg)); opacity: 1; }
#vBase button.ghost.danger, dialog.ficha button.ghost.danger, .dt-sheet button.ghost.danger { border-color: var(--rojo); color: var(--rojo); }
#vBase button.ghost.danger:hover, dialog.ficha button.ghost.danger:hover, .dt-sheet button.ghost.danger:hover { background: var(--rojo); color: #fff; }
#vBase button.danger:not(.ghost), dialog.ficha button.danger:not(.ghost) { background: var(--rojo); color: #fff; }
#vBase button.sm, .dt-sheet button.sm { padding: 4px 10px; font-size: 13px; }
#vBase button.dt-btn-ico { display: inline-flex; align-items: center; gap: 6px; }
#vBase button:disabled, dialog.ficha button:disabled, .dt-sheet button:disabled { opacity: .5; cursor: default; }
.dt-sheet button.dt-sheet-x, .dt-modal button.dt-modal-x { background: none; box-shadow: none; border-color: transparent; color: var(--muted); }

/* ── Cabecera de la pantalla: el título es el de la pestaña, no un h1 de página ── */
#vBase #dt-pane { padding-inline: 0; }
#vBase .dt-sub { margin: 6px 0 0; }
#vBase .dt-top { display: block; }
#vBase .dt-top-acts { display: none; }                 /* los botones de la cabecera viven en la tarjeta de arriba (#baseAcciones) */

/* ── Orígenes (Facturas, Nóminas…) y fichas de estado: el look de .tabs y .chip de la consola ── */
#vBase .dt-srcs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 12px; background: hsl(var(--mutedbg)); border: 1px solid var(--line); border-radius: var(--radio); width: fit-content; max-width: 100%; }
#vBase .dt-src { background: transparent; color: var(--muted); border: 1px solid transparent; box-shadow: none; padding: 6px 12px; font-size: 14px; }
#vBase .dt-src:hover { color: var(--txt); opacity: 1; }
#vBase .dt-src.active { background: var(--card); color: var(--txt); box-shadow: var(--sombra); }
#vBase .dt-src.active:hover { background: var(--card); }
#vBase .dt-chip { background: var(--card); color: var(--txt); border: 1px solid var(--line); box-shadow: var(--sombra); height: auto; padding: 4px 10px; font-size: 13px; }
#vBase .dt-chip:hover { background: hsl(var(--mutedbg)); opacity: 1; }
#vBase .dt-chip.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
#vBase .dt-chip.active:hover { background: hsl(var(--primary) / .9); }
#vBase .dt-flagchip.active { background: hsl(var(--marca-bg)); border-color: hsl(var(--primary) / .5); color: var(--txt); }
#vBase .dt-filters { margin: 0 0 12px; }
#vBase .dt-filters select { width: auto; min-width: 150px; flex: 0 1 auto; }
#vBase .dt-filters .sx-trigger, dialog.ficha .dt-linea .sx-trigger { width: auto; min-width: 150px; flex: 0 1 auto; }
#vBase .dt-filters .dt-search { flex: 1 1 240px; width: auto; }

/* ── Tabla: la de la consola (encabezado 12px gris, hover) ── */
#vBase .dt-tbl { width: 100%; border-collapse: collapse; }
#vBase .dt-tbl th { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; background: transparent; position: static; }
#vBase .dt-tbl td { vertical-align: top; }
#vBase .dt-tbl tbody tr { cursor: pointer; }
#vBase .dt-tbl tbody tr:hover > td { background: hsl(var(--primary) / .08); }
#vBase .dt-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }

/* ── Diálogos: los <dialog> de Sereno (.ficha) con la caja .mbox de la consola ── */
dialog.card.ficha, dialog.ficha {
  position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: var(--radio); padding: 20px;
  box-shadow: 0 20px 50px -12px hsl(240 10% 4% / .35); }
dialog.ficha::backdrop, .dt-sheet::backdrop, .dt-modal::backdrop { background: hsl(240 10% 3.9% / .6); }
dialog.ficha .ficha-cab { position: static; background: none; margin-bottom: 8px; padding: 0; }
dialog.ficha h2 { font-size: 16px; margin: 0; }
dialog.ficha.narrow-dlg { width: min(420px, 100vw - 2rem); }
dialog.ficha .dt-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
dialog.ficha .dt-linea label { margin: 0; }
dialog.ficha .dt-linea select, dialog.ficha .dt-linea input { width: auto; flex: 1 1 140px; }
dialog.ficha table { width: 100%; border-collapse: collapse; }
dialog.ficha th, dialog.ficha td { white-space: normal; }
.dt-sheet, .dt-modal { background: var(--card); color: var(--txt); border-color: var(--line); }
.dt-sheet-body, .dt-modal-body { background: var(--bg); }
.dt-modal { border: 1px solid var(--line); border-radius: var(--radio); }

/* El detalle usa tablas propias (conceptos): sin el nowrap de td de otras hojas. */
.dt-det table, .dt-det td, .dt-det th { white-space: normal; }

/* El título de Base: el «?» junto al nombre y el engrane de Cuentas bancarias en el extremo derecho. */
#vBase h2.base-tit { display: flex; align-items: center; }
#vBase h2.base-tit #btnBaseAjustes { margin-left: auto; }