/* ── Tema ─────────────────────────────────────────────────────────────────────
   La misma paleta de la consola de Gastos (index.html): azul sobre fondo gris azulado, en tripletas HSL al estilo shadcn. Se escribe una vez
   aquí y una vez en [data-theme="dark"]; nada más en la hoja lleva un color literal,
   así que el modo oscuro no se puede romper en silencio desde otra regla.

   El tema NO es `prefers-color-scheme` como antes: lo pone `tema.js` en el <html>
   antes de pintar, leyendo la llave `admin-theme` de localStorage (la misma que la
   consola de Apps Script) y cayendo al claro si nadie ha elegido. */
:root {
  color-scheme: light;
  --background: 201 40% 97%;         /* el fondo de la consola de Gastos (--bg) */
  --foreground: 213 24% 12%;
  --surface: 0 0% 100%;              /* tarjetas, riel lateral, cabeceras de tabla */
  --primary: 201 78% 38%;            /* el azul de la consola (rellenos) */
  --primary-ink: 201 78% 32%;        /* el mismo azul, como texto */
  --primary-foreground: 0 0% 100%;
  --muted-fg: 212 12% 44%;
  --line: 201 32% 88%;
  --line-strong: 201 26% 80%;
  --ok-h: 142 72% 26%;
  --bad-h: 0 72% 45%;
  --warn-h: 32 81% 29%;
  --shadow: 201 60% 20%;
  --shadow-a: 0.10;                  /* sube en oscuro: al 10% no se vería */
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: 213 28% 8%;
  --foreground: 0 0% 98%;
  --surface: 213 24% 11%;
  --primary: 201 80% 69%;            /* el azul aclarado */
  --primary-ink: 201 80% 69%;
  --primary-foreground: 213 40% 10%;
  --muted-fg: 211 14% 66%;
  --line: 213 18% 20%;
  --line-strong: 213 18% 28%;
  --ok-h: 142 69% 58%;
  --bad-h: 0 84% 65%;
  --warn-h: 43 96% 60%;
  --shadow: 0 0% 0%;
  --shadow-a: 0.55;
}

/* Los nombres que ya usaba el resto de la hoja (y bd.css, datos.css, cfdi.css,
   conciliar*.css), ahora servidos desde las tripletas de arriba: cambiar la paleta
   no obligó a tocar ninguna otra regla. */
:root, [data-theme="dark"] {
  --bg: hsl(var(--background));
  --card: hsl(var(--surface));
  --ink: hsl(var(--foreground));
  --muted: hsl(var(--muted-fg));
  --accent: hsl(var(--primary-ink));
  --ok: hsl(var(--ok-h));
  --bad: hsl(var(--bad-h));
  --warn: hsl(var(--warn-h));
  --radius: 0.625rem;                /* 10px — el radio de la consola de Apps Script */
  --radius-sm: 0.375rem;             /* 6px — botones, campos, fichas */
  --radius-pill: 999px;
  /* Escala tipográfica: seis tamaños bastan. El cuerpo es --fs-base. */
  --fs-xs: 0.6875rem;                /* 11px — pies, insignias, rótulos */
  --fs-sm: 0.75rem;                  /* 12px — texto secundario, tablas densas */
  --fs-base: 0.8125rem;              /* 13px — cuerpo */
  --fs-md: 0.875rem;                 /* 14px — campos, énfasis */
  --fs-lg: 1rem;                     /* 16px — subtítulos */
  --fs-xl: 1.125rem;                 /* 18px — títulos de tarjeta */
  --fs-2xl: 1.5rem;                  /* 24px — cifras y títulos de página */
  /* Espacios: múltiplos de 4px para huecos y rellenos nuevos. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
/* El fondo de rejilla, la tipografía y la transición al cambiar de tema son los de la
   consola de Apps Script. Las fuentes Geist no se descargan (la CSP sólo permite 'self'):
   si están instaladas en el equipo se usan, y si no cae al stack del sistema. */
body {
  margin: 0; font: 13px/1.45 var(--font-sans); background-color: var(--bg); color: var(--ink);
  background-image: linear-gradient(hsl(var(--line) / .6) 1px, transparent 1px),
                    linear-gradient(90deg, hsl(var(--line) / .6) 1px, transparent 1px);
  background-size: 64px 64px; background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
/* La barra de la pantalla se queda arriba igual que la marca del riel: al desplazar una
   tabla larga, el título, el ☰ y quién eres siguen a la vista. */
.bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid hsl(var(--line)); background: var(--card); flex-wrap: wrap; }
.bar strong { letter-spacing: -.01em; }
/* Igual que el riel (ver nav.css): sin sesión no hay cromo, sólo la tarjeta de entrar. */
body.nav-shell:not(.nav-sesion) .bar { display: none; }
/* Sin sesión no hay cromo alrededor: la tarjeta se queda sola en el centro exacto
   de la ventana, no colgando de arriba. */
/* Ojo: nav.js envuelve todo el cuerpo en `.nav-main`, así que el centrado va ahí,
   no en el <main> (que es su hijo). */
body.nav-shell:not(.nav-sesion) .nav-main { display: flex; min-height: 100vh; min-height: 100dvh; }
body.nav-shell:not(.nav-sesion) .nav-main > main { display: flex; flex-direction: column; justify-content: center;
  align-items: center; flex: 1; max-width: none; }
body.nav-shell:not(.nav-sesion) .nav-main > main > .narrow { width: 100%; margin: 0; }
.spacer { flex: 1; }
main { padding: 1rem; max-width: 1200px; margin: 0 auto; }
/* `hidden` gana a cualquier clase. Un `.cn-panel { display: flex }` o un `.row { display: flex }`
   tienen más peso que la regla `[hidden] { display: none }` del navegador, así que sin esto un
   panel marcado como oculto se seguía viendo: las pestañas de Conciliar cambiaban de estado y no
   pasaba nada en pantalla, porque los siete paneles estaban puestos a la vez. */
[hidden] { display: none !important; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: var(--card); border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0;
  box-shadow: 0 1px 2px hsl(var(--shadow) / var(--shadow-a)); }
.narrow { max-width: 420px; margin: 3rem auto; }
/* La tarjeta de entrada: sola en el centro, con más aire y más sombra — es la única
   pantalla sin barra lateral, así que es lo único que hay que mirar. */
.card.narrow { padding: 1.6rem 1.7rem; box-shadow: 0 24px 60px -12px hsl(var(--shadow) / calc(var(--shadow-a) * 2.5)); }

/* Título + icono «i»: la explicación larga de una tarjeta vive en un popover, no estorbando el resumen. */
.titulo-row { display: flex; align-items: center; gap: .3rem; }
.titulo-row h2 { margin: 0; }
button.info-btn, button.info-btn:hover, button.info-btn:focus-visible { border: 0; background: none; box-shadow: none;
  padding: 0 .25rem; line-height: 1; color: var(--muted); cursor: pointer; }
button.info-btn:hover { color: var(--ink); }
.info-pop { position: fixed; inset: 4.5rem auto auto 50%; transform: translateX(-50%); margin: 0;
  width: calc(100% - 2rem); max-width: 34rem; padding: 1rem 1.1rem; border: 1px solid hsl(var(--line));
  border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .2); }
.info-pop p { margin: 0; font-size: var(--fs-md); line-height: 1.55; }
/* La marca en la pantalla de entrada: el mismo cuadro verde del riel, en grande. */
.marca-login { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; }
.marca-login .logo { width: 38px; height: 38px; border-radius: var(--radius); background: hsl(var(--primary));
  color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-lg);
  flex: 0 0 auto; box-shadow: 0 2px 8px hsl(var(--primary) / .35); }
.marca-login .marca-txt b { font-size: var(--fs-xl); letter-spacing: .04em; display: block; }
.wide { grid-column: 1 / -1; }
.row > label { margin-bottom: 0; }
#datos-body td.num, #sel-lista .num { text-align: right; font-variant-numeric: tabular-nums; }
.estado { font-size: var(--fs-base); padding: .05rem .4rem; border-radius: var(--radius-pill); border: 1px solid hsl(var(--line)); }
.estado-conciliado, .estado-asignado { color: var(--ok); border-color: var(--ok); }
.estado-parcial, .estado-vinculado { color: var(--accent); border-color: var(--accent); }
.estado-cancelado { color: var(--bad); border-color: var(--bad); }
.estado-traspaso { color: var(--muted); border-color: var(--muted); }
tr.sel { background: var(--bg); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-lg); margin-top: 1rem; }
a { color: hsl(var(--primary-ink)); text-underline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-md); }
.error { color: var(--bad); }
.ok { color: var(--ok); }
label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; font-size: var(--fs-md); }
label.check { flex-direction: row; align-items: center; gap: .4rem; }
input, select, textarea, button { font: inherit; color: inherit; }
/* Campos: fondo de tarjeta (no el del papel) y un borde con contraste propio, para
   que se lean como campos en claro y en oscuro. Nace en la BD de precios; global. */
input, select, textarea { padding: .45rem .55rem; border-radius: var(--radius);
  background: var(--card); border: 1px solid hsl(var(--foreground) / .22);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { border-color: hsl(var(--foreground) / .3); }

input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: hsl(var(--foreground) / .4); }

/* Enfocado: el borde engorda (anillo interior) y toma el verde de marca. */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: none; border-color: hsl(var(--primary));
  box-shadow: inset 0 0 0 1px hsl(var(--primary)), 0 0 0 3px hsl(var(--primary) / .18); }

/* Casillas y radios no son campos de texto: sin caja, sin anillo. */
input[type="checkbox"], input[type="radio"] {
  background: none; border: none; box-shadow: none; padding: 0; accent-color: hsl(var(--primary)); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid hsl(var(--primary) / .55); outline-offset: 2px; box-shadow: none; }
button { padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid transparent; font-weight: 600;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); cursor: pointer;
  transition: background-color .12s ease, color .12s ease; }
button:hover { background: hsl(var(--primary) / .88); }
button.ghost { background: transparent; color: hsl(var(--primary-ink)); border-color: hsl(var(--line-strong)); }
button.ghost:hover { background: hsl(var(--primary) / .12); }
/* Borrar / Cancelar: siempre en rojo, también sobre .ghost. */
button.danger { background: var(--bad); color: hsl(var(--primary-foreground)); border-color: transparent; }
button.danger:hover { background: var(--bad); filter: brightness(.92); }
/* Cancelar / Borrar en segundo plano: contorno rojo, y sólo se rellena al pasar el cursor. */
button.ghost.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
button.ghost.danger:hover { background: var(--bad); color: hsl(var(--primary-foreground)); border-color: var(--bad); }
button:focus-visible { outline: 2px solid hsl(var(--primary) / .55); outline-offset: 2px; }
/* Un botón apagado (nada que confirmar, rol de sólo lectura…) se ve gris y no clickeable en vez
   de quedarse con el color de acción normal, que invita a pulsarlo igual. */
button:disabled, button[disabled] { background: hsl(var(--line-strong)); color: var(--muted); cursor: not-allowed; opacity: .7; }
button:disabled:hover, button[disabled]:hover { background: hsl(var(--line-strong)); }
button.ghost:disabled, button.ghost[disabled] { background: transparent; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Botones de un diálogo: a la derecha, con aire respecto al cuerpo. */
.dlg-acts { justify-content: flex-end; margin-top: 1rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid hsl(var(--line)); white-space: nowrap; }
.out { background: var(--bg); border: 1px solid hsl(var(--line)); border-radius: var(--radius-sm); padding: .6rem; overflow: auto; max-height: 340px; font-size: var(--fs-base); }
.events { padding-left: 1.2rem; margin: 0; font-size: var(--fs-md); max-height: 340px; overflow: auto; }
.events time { color: var(--muted); font-variant-numeric: tabular-nums; }
code { font-size: .85em; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .5rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius-pill); }
.chip button { padding: 0 .2rem; }
.ficha { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; margin: auto; }
.ficha::backdrop { background: rgb(0 0 0 / .35); }
.ficha { --ficha-py: 1rem; --ficha-px: 1.1rem; padding: 0 var(--ficha-px) var(--ficha-py); }
/* Cabecera (título + ✕) fija arriba mientras el cuerpo se desplaza; el relleno superior vive en la cabecera (no en el diálogo) para que nada asome por encima. */
.ficha-cab { align-items: center; position: sticky; top: 0; z-index: 5; background: var(--card);
  margin: 0 calc(-1 * var(--ficha-px)) .5rem; padding: var(--ficha-py) var(--ficha-px) .6rem;
  border-bottom: 1px solid hsl(var(--line)); }
.ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0; font-size: var(--fs-md); }
.ficha dt { color: var(--muted); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha td { white-space: normal; }
.ficha .num { text-align: right; font-variant-numeric: tabular-nums; }
.avisos { margin: 0; padding: .5rem .8rem .5rem 1.6rem; border: 1px solid var(--bad); border-radius: var(--radius-sm); color: var(--bad); }
.aviso-flag { color: var(--bad); cursor: help; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }
tr.prop-fila > td { background: var(--bg); border-left: 3px solid var(--accent); }
.spark { width: 100%; max-width: 600px; height: 120px; display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark circle { fill: var(--accent); }
.spark circle.fuera { fill: var(--card); stroke: var(--bad); stroke-width: 1.5; }
#bd-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Resumen: la fila de KPIs y las barras de cada canal de flujo. */
.kpis { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: .6rem 0; }
.kpi { border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: .5rem .7rem; }
.kpi b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: var(--fs-base); }
#res-flujo td.num, #res-backlog td.num, #res-er td.num, #res-ret td.num { text-align: right; font-variant-numeric: tabular-nums; }
.barra { display: flex; height: .5rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg); min-width: 90px; }
.barra i { display: block; }
.barra i[class*="fg-"] { flex: 0 0 auto; }
.fg-0 { width: 0%; }
.fg-1 { width: 1%; }
.fg-2 { width: 2%; }
.fg-3 { width: 3%; }
.fg-4 { width: 4%; }
.fg-5 { width: 5%; }
.fg-6 { width: 6%; }
.fg-7 { width: 7%; }
.fg-8 { width: 8%; }
.fg-9 { width: 9%; }
.fg-10 { width: 10%; }
.fg-11 { width: 11%; }
.fg-12 { width: 12%; }
.fg-13 { width: 13%; }
.fg-14 { width: 14%; }
.fg-15 { width: 15%; }
.fg-16 { width: 16%; }
.fg-17 { width: 17%; }
.fg-18 { width: 18%; }
.fg-19 { width: 19%; }
.fg-20 { width: 20%; }
.fg-21 { width: 21%; }
.fg-22 { width: 22%; }
.fg-23 { width: 23%; }
.fg-24 { width: 24%; }
.fg-25 { width: 25%; }
.fg-26 { width: 26%; }
.fg-27 { width: 27%; }
.fg-28 { width: 28%; }
.fg-29 { width: 29%; }
.fg-30 { width: 30%; }
.fg-31 { width: 31%; }
.fg-32 { width: 32%; }
.fg-33 { width: 33%; }
.fg-34 { width: 34%; }
.fg-35 { width: 35%; }
.fg-36 { width: 36%; }
.fg-37 { width: 37%; }
.fg-38 { width: 38%; }
.fg-39 { width: 39%; }
.fg-40 { width: 40%; }
.fg-41 { width: 41%; }
.fg-42 { width: 42%; }
.fg-43 { width: 43%; }
.fg-44 { width: 44%; }
.fg-45 { width: 45%; }
.fg-46 { width: 46%; }
.fg-47 { width: 47%; }
.fg-48 { width: 48%; }
.fg-49 { width: 49%; }
.fg-50 { width: 50%; }
.fg-51 { width: 51%; }
.fg-52 { width: 52%; }
.fg-53 { width: 53%; }
.fg-54 { width: 54%; }
.fg-55 { width: 55%; }
.fg-56 { width: 56%; }
.fg-57 { width: 57%; }
.fg-58 { width: 58%; }
.fg-59 { width: 59%; }
.fg-60 { width: 60%; }
.fg-61 { width: 61%; }
.fg-62 { width: 62%; }
.fg-63 { width: 63%; }
.fg-64 { width: 64%; }
.fg-65 { width: 65%; }
.fg-66 { width: 66%; }
.fg-67 { width: 67%; }
.fg-68 { width: 68%; }
.fg-69 { width: 69%; }
.fg-70 { width: 70%; }
.fg-71 { width: 71%; }
.fg-72 { width: 72%; }
.fg-73 { width: 73%; }
.fg-74 { width: 74%; }
.fg-75 { width: 75%; }
.fg-76 { width: 76%; }
.fg-77 { width: 77%; }
.fg-78 { width: 78%; }
.fg-79 { width: 79%; }
.fg-80 { width: 80%; }
.fg-81 { width: 81%; }
.fg-82 { width: 82%; }
.fg-83 { width: 83%; }
.fg-84 { width: 84%; }
.fg-85 { width: 85%; }
.fg-86 { width: 86%; }
.fg-87 { width: 87%; }
.fg-88 { width: 88%; }
.fg-89 { width: 89%; }
.fg-90 { width: 90%; }
.fg-91 { width: 91%; }
.fg-92 { width: 92%; }
.fg-93 { width: 93%; }
.fg-94 { width: 94%; }
.fg-95 { width: 95%; }
.fg-96 { width: 96%; }
.fg-97 { width: 97%; }
.fg-98 { width: 98%; }
.fg-99 { width: 99%; }
.fg-100 { width: 100%; }
.barra .b-conciliado { background: var(--ok); }
.barra .b-parcial { background: var(--accent); }
.barra .b-pendiente { background: var(--bad); }

/* ── Descarga masiva ──────────────────────────────────────────────────────────
   Manual y Automático viven en la misma tarjeta, separados por pestañas. El aire
   (cabecera, descripción, sub-tarjetas, pestañas tipo «segmented control») está
   copiado de la consola de Apps Script, que a su vez sigue a shadcn: un borde
   suave, radios grandes y el texto de apoyo en gris. Todo va prefijado `dm-` y
   colgado de `.dm` para no tocar el resto de la consola. */
.dm { padding: 0; overflow: hidden; }
.dm > * { padding-left: 1.1rem; padding-right: 1.1rem; }
.dm-head { padding-top: 1rem; padding-bottom: .9rem; border-bottom: 1px solid hsl(var(--line)); display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.dm-head h2 { margin: 0 0 .25rem; font-size: var(--fs-xl); letter-spacing: -.01em; }
.dm-desc { color: var(--muted); font-size: var(--fs-md); margin: 0; max-width: 78ch; }

/* Pestañas: una pista gris con la activa en blanco, como el tabs de shadcn. */
.dm-tabs { display: inline-flex; gap: .15rem; margin: .9rem 1.1rem .2rem; padding: .2rem; background: var(--bg); border: 1px solid hsl(var(--line)); border-radius: var(--radius); }
.dm-tab { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--radius-sm); padding: .35rem 1rem; font-size: var(--fs-md); font-weight: 500; }
.dm-tab[aria-selected="true"] { background: var(--card); border-color: hsl(var(--line)); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.dm-panel { display: grid; gap: .9rem; padding-top: .9rem; padding-bottom: 1.1rem; }

/* Sub-tarjeta: cada bloque del panel (e.firma, pedir, consultas, periodo…). */
.dm-sub { border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: .9rem 1rem 1rem; min-width: 0; }
.dm-sub-head { margin-bottom: .7rem; }
.dm-sub-head h3 { margin: 0 0 .2rem; font-size: var(--fs-lg); }
.dm-sub-head h4 { margin: .2rem 0; font-size: var(--fs-md); }
.dm-sub-head-row { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.dm-sub .scroll { margin-top: .6rem; }
.dm-form { margin-top: .8rem; }
.dm-grid { display: grid; gap: .1rem .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.dm-grid > label.check { grid-column: 1 / -1; margin-bottom: .6rem; }
.dm-actions { align-self: end; margin-bottom: .6rem; }
.dm-list { margin: .2rem 0 .8rem; padding-left: 1.1rem; color: var(--muted); font-size: var(--fs-md); }
.dm-list li { margin: .15rem 0; }
.dm-list b { color: var(--ink); }
.dm-nota { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid hsl(var(--line)); }
.dm-nota p { margin: 0 0 .3rem; font-size: var(--fs-md); color: var(--muted); }

/* Distintivo de estado (activa / apagada / no disponible). */
.dm-badge { font-size: var(--fs-sm); padding: .1rem .6rem; border-radius: var(--radius-pill); border: 1px solid hsl(var(--line)); color: var(--muted); white-space: nowrap; }
.dm-badge.on { color: var(--ok); border-color: var(--ok); }
.dm-badge.off { color: var(--bad); border-color: var(--bad); }
.dm button[disabled] { opacity: .5; cursor: not-allowed; }

/* La consola partida en pantallas (paginas.js). `.fuera` es «esta tarjeta no es de esta
   pantalla»; el atributo `hidden` sigue siendo «no te toca». Son dos cosas distintas a
   propósito: si el router escribiera en `hidden` borraría la decisión de permisos. */
.card.fuera { display: none; }
.pag-titulo { margin: 0 0 1rem; font-size: var(--fs-2xl); }

/* ── Cifras ───────────────────────────────────────────────────────────────────
   Toda cifra de la plataforma se pinta con la misma tipografía de la consola de
   Apps Script: Geist Mono con cifras tabulares, para que las columnas alineen y
   un importe se lea igual en cualquier pantalla. Se declara una sola vez aquí
   (app.css lo carga toda página) y alcanza a las clases de bd.css, datos.css,
   conciliar.css y conciliar-panels.css, que ya marcaban las celdas numéricas. */
.num, td.num, .bd-num, .dt-num, .dt-chip .dt-n, .cn-chip-n, .cn-pc-total, .cn-fac-monto,
.kpi b, .bd-kpis b, .events time, .cf-linea > input, .cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Tabla de Reglas: columnas ajustadas al ancho, dimensiones como etiquetas, acciones sólo con icono. */
#reglas-card .scroll { overflow-x: visible; }
#reglas-card table { table-layout: fixed; width: 100%; }
#reglas-card th, #reglas-card td { white-space: normal; overflow-wrap: anywhere; vertical-align: middle; padding: .5rem .6rem; }
#reglas-card th:nth-child(1) { width: 20%; }
#reglas-card th:nth-child(2) { width: 22%; }
#reglas-card th:nth-child(3) { width: 9%; }
#reglas-card th:nth-child(4) { width: 9%; }
#reglas-card th:nth-child(5) { width: 15%; }
#reglas-card th:nth-child(6) { width: 15%; }
#reglas-card th:nth-child(7) { width: 5.5rem; }
.rg-dims { display: flex; flex-wrap: wrap; gap: .25rem; }
.rg-chip { display: inline-block; padding: .1rem .5rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius-pill); background: hsl(var(--foreground) / .05); font-size: var(--fs-sm); }
.rg-acts { text-align: right; white-space: nowrap; }
.rg-acts > span { display: inline-flex; gap: .1rem; }
button.rg-ico, button.rg-ico:hover, button.rg-ico:focus-visible { display: inline-flex; border: 0; background: none; box-shadow: none; padding: .3rem; color: var(--muted); }
button.rg-ico:hover { color: var(--ink); }
button.rg-ico.danger { color: var(--muted); }
button.ghost.rg-ico.danger:hover { background: none; border: 0; color: var(--bad); filter: none; }
.rg-nueva td { background: hsl(var(--foreground) / .03); }
.rg-nueva input:not([type=checkbox]), .rg-nueva select { width: 100%; min-width: 0; margin: 0; }
.rg-nueva label.check { display: flex; gap: .3rem; align-items: center; margin: 0 0 .3rem; font-size: var(--fs-md); }
.rg-dims-ed { display: flex; flex-direction: column; gap: .3rem; }

/* Tabla con marco (la de «Estado de cuenta» de Pagos): borde redondeado, encabezado en versalitas, filas con línea tenue. */
.tbl-marco { border: 1px solid hsl(var(--foreground) / .12); border-radius: var(--radius); overflow: hidden; }
.tbl-marco table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl-marco th { text-align: left; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; padding: 8px 10px; border-bottom: 1px solid hsl(var(--foreground) / .12); background: var(--card, Canvas); }
.tbl-marco td { padding: 7px 10px; border-bottom: 1px solid hsl(var(--foreground) / .06); vertical-align: middle; }
.tbl-marco tbody tr:last-child td, .tbl-marco tfoot td { border-bottom: 0; }
.tbl-marco tbody tr:hover { background: hsl(var(--foreground) / .04); }

/* Encabezado de tabla fijo: al bajar, el <thead> se queda pegado bajo la barra superior.
   `.scroll` (overflow-x:auto) volvería a la tabla su propio contenedor de scroll y `sticky` dejaría
   de mirar la ventana; en pantallas donde la tabla cabe completa se usa `clip`, que recorta sin
   crear contenedor. En pantallas angostas queda el scroll horizontal (y ahí el encabezado no se pega). */
.dt-tbl th, .pg-tbl th { position: sticky; top: var(--pg-bar-h, 0px); z-index: 3; background: var(--bg); }
@media (min-width: 1500px) {
  .dt-tbl-wrap, .pg-tbl-wrap { overflow-x: clip; }
}
.tbl-marco:not(.scroll) { overflow: clip; }
.tbl-marco:not(.scroll) th { position: sticky; top: var(--pg-bar-h, 0px); z-index: 3; }
/* Mismo tipo de letra de encabezado que Base de precios. */
.dt-tbl thead th, .pg-tbl thead th, .tbl-marco:not(.scroll) thead th { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }

/* Listas (Ajustes): la misma tabla que la lista de roles de Contactos. */
.li-tbl td { vertical-align: middle; }
.li-tbl input.li-edit, .li-tbl tfoot input { width: 100%; }
.li-tbl .li-acc { text-align: right; white-space: nowrap; width: 12rem; }
.li-ico, .li-ico:hover { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: .2rem .4rem; color: var(--muted); cursor: pointer; }
.li-ico:hover { color: var(--ink); }
.li-tbl tr.li-off .li-edit { color: var(--muted); }

/* Usuarios (Ajustes): la misma tabla con marco y acciones con icono que Listas. */
.us-tbl td { vertical-align: middle; }
.us-tbl .li-acc { text-align: right; white-space: nowrap; }
.us-tbl tr.li-off td:not(.li-acc) { color: var(--muted); }
.us-tbl .li-ico.us-del:hover { color: var(--bad); }
.us-form { margin-top: 1rem; padding-top: .25rem; border-top: 1px solid hsl(var(--line)); }
.us-form fieldset { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: .5rem .8rem; margin: 0 0 .6rem; }
.us-form .row > label { flex: 1 1 14rem; }
#dims-lista { display: flex; flex-direction: column; gap: 2.2rem; margin-bottom: 1.4rem; }
.li-dim h3 { margin: 0 0 .5rem; }
.li-dim-cab { margin-bottom: .5rem; }
#dim-form { margin: 1.2rem 0 0; }
#dim-form td:nth-child(2) { width: 8rem; }
.li-dim-cab { align-items: center; gap: .15rem; }
.li-dim-cab h3 { margin: 0 0 0 .4rem; }
.li-ico:disabled { opacity: .3; cursor: default; }
.li-oblig.on { color: var(--bad, #c0392b); }

/* Resumen con la disposición de la consola de Apps Script: título y filtros en una fila, tarjetas
   de cifras, y secciones con cabecera (Flujo · Pendientes | Cierre · Estado de resultados). */
body[data-pagina="resumen"] main { max-width: none; width: 100%; padding-inline: 1.25rem; }
body[data-pagina="resumen"] .pag-titulo { display: none; }
body[data-pagina="resumen"] #res-card, body[data-pagina="resumen"] #ctrl-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 1.25rem; }
.resumen-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.resumen-h1 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -.02em; }
.resumen-sub { margin: 3px 0 0; }
.resumen-ctx { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#res-card .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 18px; }
#res-card .kpi { border-radius: var(--radius); padding: 15px 16px; background: var(--card); }
#res-card .kpi b { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; margin: 8px 0 1px; }
#res-card .kpi span:first-child { font-size: var(--fs-base); }
.res-sec { background: var(--card); border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; min-width: 0; overflow-x: auto; }
.res-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.res-sec-head b { font-size: var(--fs-lg); }
.res-sec-head .hint { color: var(--muted); font-size: var(--fs-base); }
.res-agrupar { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); margin-bottom: 0; }
.resumen-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.resumen-cols .kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; }
@media (max-width: 1050px) { .resumen-cols { grid-template-columns: 1fr; } }
#res-form.resumen-ctx { margin-left: .5rem; }
body:not([data-pagina="resumen"]) #res-form { display: none; }
button.res-refresh, button.res-refresh:hover, button.res-refresh:focus-visible { border: 0; background: none; box-shadow: none; padding: .3rem; color: var(--muted); }
button.res-refresh:hover { color: var(--ink); }

/* Componentes compartidos por todas las pantallas (antes uno por página: bd-/cf-/dt-/cp-icon-btn,
   bd-/dt-/pg-/msel-empty). */
/* Botón de sólo icono, sin caja ni texto: apagado hasta pasar el ratón. `.danger` lo tiñe de rojo. */
button.icon-btn { background: transparent; border: 0; padding: .3rem; border-radius: var(--radius-sm); color: var(--muted); line-height: 0; }
button.icon-btn:hover { background: transparent; color: var(--ink); }
button.icon-btn svg { display: block; }
button.icon-btn.danger { color: var(--bad); }
button.icon-btn.danger:hover { background: hsl(0 72% 45% / .12); color: hsl(0 72% 45%); }
/* Estado vacío de una lista o tabla; `.centrado` para el que ocupa un panel entero. */
.empty { color: var(--muted); padding: 14px 2px; }
.empty[hidden] { display: none; }
.empty.centrado { padding: 28px 10px; text-align: center; }
/* Confirmación compartida (nav.js `confirmar`): modal propio, encima del que la abre. */
.dlg-confirm { width: min(440px, calc(100vw - 2rem)); padding: 1.1rem 1.2rem; border: 1px solid hsl(var(--line));
  border-radius: var(--radius); background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px -12px hsl(var(--shadow) / calc(var(--shadow-a) * 2)); }
.dlg-confirm::backdrop { background: rgb(0 0 0 / .45); }
.dlg-confirm h3 { margin: 0 0 .5rem; font-size: var(--fs-lg); }
.dlg-confirm p { margin: 0 0 1rem; color: var(--muted); font-size: var(--fs-md); }
.dlg-confirm p.dlg-confirm-det { margin-top: -.5rem; color: var(--ink); font-family: var(--font-mono); }
.dlg-confirm-acts { display: flex; justify-content: flex-end; gap: .5rem; }

/* Campos de clave (p. ej. país de 3 letras): se ven en mayúsculas sin tocar lo que se teclea. */
.mayus { text-transform: uppercase; }

/* Resumen · cifras, flujo, pendientes y Estado de resultados (disposición de Apps Script). */
#res-card .kpi { display: flex; flex-direction: column; gap: .15rem; }
#res-card .kpi .kpi-cap { align-self: flex-start; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: var(--bg); }
#res-card .kpi .kpi-cap.t-amber { color: var(--accent); }
#res-card .kpi .kpi-cap.t-green { color: var(--ok); }
#res-card .kpi .kpi-cap.t-blue { color: var(--accent); }
#res-card .kpi .kpi-num { margin: .5rem 0 .1rem; font-size: 1.6rem; }
#res-card .kpi .kpi-sub { color: var(--muted); font-size: .8rem; }
.cash-total-row { display: flex; gap: 26px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.cash-total-item { flex: 1 1 140px; min-width: 120px; }
.cash-total-lbl, .cash-lbl { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cash-total-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cash-total-num.neg, .cash-chan-neto b.neg, .er-table .neg { color: var(--bad); }
.er-table .pos { color: var(--ok); }
.cash-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding-top: 14px; }
.cash-chan { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cash-chan-hd { font-weight: 700; margin-bottom: 10px; }
.cash-row { display: flex; gap: 14px; }
.cash-block { flex: 1 1 0; min-width: 0; }
.cash-num { font-size: 1.15rem; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.cash-sub { font-size: .72rem; color: var(--muted); margin-top: 5px; }
.cash-chan-neto { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .85rem; }
.cash-chan-neto b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ri-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.ri-row:last-child { border-bottom: 0; }
.ri-body { flex: 1; min-width: 0; }
.ri-body b, .ri-body small { display: block; }
.ri-body small { color: var(--muted); font-size: .78rem; }
.ri-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-lbl { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .9rem; }
.prog-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; }
.prog-legend .acento { color: var(--accent); }
#res-progress .barra { height: .7rem; }
.er-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.er-ctl { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; color: var(--muted); }
.er-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.er-chips:empty { display: none; }
.er-chip { font-size: .78rem; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; }
.er-chip.off { opacity: .45; text-decoration: line-through; }
.er-chip.act { border-style: dashed; color: var(--muted); }
.er-table { width: 100%; border-collapse: collapse; }
.er-table th.num, .er-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-table tfoot td { border-top: 2px solid var(--line); font-weight: 800; padding-top: .7rem; }
.er-table .er-nil { color: var(--muted); }
.er-table .er-tot { border-left: 2px solid var(--line); font-weight: 700; }
.er-table.er-comp td:first-child, .er-table.er-comp th:first-child { position: sticky; left: 0; background: var(--card); }
@media (max-width: 700px) { .cash-row { flex-direction: column; } }

/* Verificar gastos: las dimensiones del gasto, en su propia fila bajo las señales. */
.dimsfila { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.dimsfila .chip.dim { background: hsl(var(--line) / .5); font-size: .8em; }
.dimsfila .chip.dim small { color: var(--muted); font-size: 1em; }