/* Portal de datos — una herramienta de consulta: sobria, legible, con números alineados.
   Paleta: tinta azul pizarra sobre papel ligeramente cálido; acento cobre (latón de las carabinas). */
:root {
  --bg: #f6f5f2; --panel: #ffffff; --fg: #1d2430; --suave: #5b6472; --linea: #dcdad4;
  --acento: #a5562a; --acento-fg: #ffffff; --codigo-bg: #f0eee9;
  --fila-alt: #faf9f6; --separador: #b9b5ab;
  --ok: #2f7d4f; --aviso: #a36a00; --error: #b3261e;
  --s1: #a5562a; --s2: #2f5f8a; --s3: #6b8f3a; --s4: #8a5a9e; --s5: #c08a2d; --s6: #3d8a86; --s7: #b0505f; --s8: #7a7f88;
  --texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181d; --panel: #1d2128; --fg: #e6e8eb; --suave: #a2a9b4; --linea: #333a44;
    --acento: #d98a5c; --acento-fg: #15181d; --codigo-bg: #232831;
    --fila-alt: #20252d; --separador: #4a525e;
    --ok: #6cc28f; --aviso: #e0a84a; --error: #f07a72;
    --s1: #d98a5c; --s2: #6fa3d1; --s3: #9cc069; --s4: #b991cc; --s5: #e0b45e; --s6: #6cc1bc; --s7: #e08592; --s8: #a3a8b0;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--texto); }
a { color: var(--acento); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; text-wrap: balance; }
h2 { font-size: 1.05rem; margin: 0; }
.sub, .nota { color: var(--suave); }
.nota { font-size: .85rem; }

.barra { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  padding: .6rem max(16px, 2vw); background: var(--panel); border-bottom: 1px solid var(--linea); }
.marca { font-weight: 700; letter-spacing: .02em; }
.marca span, .login h1 span { color: var(--acento); font-weight: 600; }
.barra nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.barra nav a { padding: .3rem .7rem; border-radius: 6px; color: var(--fg); text-decoration: none; }
.barra nav a.activo, .barra nav a:hover { background: var(--codigo-bg); }
.quien { color: var(--suave); font-size: .9rem; }

.contenido { max-width: 1100px; margin: 0 auto; padding: 1.5rem max(16px, 2vw) 3rem; display: grid; gap: 1rem; }
.contenido > * { min-width: 0; }   /* sin esto un SQL o una tabla ancha ensanchan toda la página */

form { display: grid; gap: .5rem; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--linea);
  border-radius: 6px; padding: .5rem .6rem; }
textarea { resize: vertical; }
textarea.codigo, pre, code { font-family: var(--mono); font-size: .85rem; }
button { font: inherit; background: var(--acento); color: var(--acento-fg); border: 0; border-radius: 6px;
  padding: .5rem 1rem; cursor: pointer; justify-self: start; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; }
button.mini { padding: .2rem .7rem; }
.pregunta { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 600px) { .pregunta { grid-template-columns: 1fr; } }
.pregunta label.check { grid-column: 1 / -1; font-size: .85rem; display: flex; gap: .4rem; align-items: center; }

.ejemplos { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--panel); color: var(--fg); border: 1px solid var(--linea); border-radius: 999px;
  padding: .25rem .75rem; font-size: .85rem; }

.htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--suave); margin: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.respuesta { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.1rem;
  display: grid; gap: .6rem; min-width: 0; }
.respuesta header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.respuesta .texto { font-size: 1.05rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.prosa { white-space: pre-wrap; overflow-wrap: anywhere; }

.pill { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill-ok { color: var(--ok); }
.pill-aclaracion, .pill-sin_cobertura { color: var(--aviso); }
.pill-rechazada, .pill-error { color: var(--error); }
.aviso.error { color: var(--error); }
.aviso.ok { color: var(--ok); }

.tabla-wrap { overflow-x: auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 700; }
details summary { cursor: pointer; color: var(--suave); }
pre { background: var(--codigo-bg); padding: .7rem; border-radius: 6px; overflow-x: auto; margin: .5rem 0 0;
  white-space: pre-wrap; overflow-wrap: anywhere; }
td.pregunta { min-width: 18rem; max-width: 48rem; overflow-wrap: anywhere; }

.valorar form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.valorar input { flex: 1; min-width: 12rem; }
.valorado { color: var(--suave); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.filtros input[type=number] { width: 6rem; }
.grafico { width: 100%; height: 420px; background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; }

form.en-linea { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
form.en-linea input[type=password] { width: 11rem; }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.panel.estrecho { max-width: 420px; }
.panel h2 { margin-top: 0; }

.login { max-width: 360px; margin: 10vh auto 0; display: grid; gap: .75rem; }
.login form { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 1.25rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Matriz de captación por mercado y mes */
.matriz-sec { display: grid; gap: .6rem; margin-top: 1.5rem; }
.matriz-sec h3 { font-size: .95rem; margin: .6rem 0 0; }
.meses { display: flex; flex-wrap: wrap; gap: .3rem; }
.meses .chip[aria-pressed="true"] { background: var(--acento); color: var(--acento-fg); border-color: var(--acento); }
table.matriz { font-size: .85rem; }
table.matriz th, table.matriz td { padding: .25rem .45rem; white-space: nowrap; }
table.matriz th { text-transform: none; letter-spacing: 0; }
table.matriz tbody tr:nth-child(even) td { background: var(--fila-alt); }
table.matriz tbody tr:hover td { background: var(--codigo-bg); }
table.matriz tr.nuevo-anio td { border-top: 2px solid var(--separador); }
table.matriz tr.n0 td { font-weight: 600; }
.cabecera-tabla { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
table.matriz tr.n3 td { color: var(--suave); }
table.matriz td.tot { font-weight: 700; border-left: 1px solid var(--linea); }
button.desplegar { width: 1.3rem; height: 1.3rem; padding: 0; margin-right: .4rem; line-height: 1;
  background: transparent; color: var(--fg); border: 1px solid var(--linea); border-radius: 4px; font-weight: 700; }
.desplegar-hueco { display: inline-block; width: 1.7rem; }

/* ---- tesorería ---- */
.subnav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--linea); padding-bottom: .4rem; }
.subnav a { padding: .25rem .65rem; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: .92rem; }
.subnav a.activo, .subnav a:hover { background: var(--codigo-bg); }
.aviso.alerta { color: var(--aviso); border: 1px solid currentColor; border-radius: 6px; padding: .5rem .75rem; margin: 0; }
.aviso.alerta p { margin: 0 0 .3rem; }
label.check { display: inline-flex; gap: .4rem; align-items: center; }
button.secundario, a.boton.secundario { background: transparent; color: var(--fg); border: 1px solid var(--linea); }
a.boton { display: inline-block; background: var(--acento); color: var(--acento-fg); border-radius: 6px; text-decoration: none;
  padding: .2rem .7rem; font-size: .9rem; }
.negativo { color: var(--error); }
table.mantenimiento { font-size: .9rem; }
table.mantenimiento td { vertical-align: middle; }
table.mantenimiento input:not([type=checkbox]) { width: 100%; min-width: 7rem; padding: .25rem .4rem; }
table.mantenimiento input.importe { text-align: right; min-width: 8rem; }
table.mantenimiento input[type=date] { min-width: 9rem; }
table.mantenimiento tr.inactivo td { color: var(--suave); }
table.mantenimiento tr.inactivo input { opacity: .6; }
table.mantenimiento tr.nuevo-grupo td { border-top: 2px solid var(--separador); }
td.acciones { white-space: nowrap; }
td.acciones form, td.acciones a { display: inline-block; margin-right: .25rem; }
form.alta { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); align-items: end; }
form.alta h2, form.alta .aviso, form.alta > p, form.alta #gasto-fechas, form.alta .botones, form.alta fieldset { grid-column: 1 / -1; }
form.alta label:not(.check) { display: grid; gap: .2rem; font-size: .88rem; color: var(--suave); }
form.alta label:not(.check) > :is(input, select) { color: var(--fg); }
form.alta input.importe { text-align: right; }
form.alta fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
form.alta legend { float: left; margin-right: .5rem; color: var(--suave); font-size: .88rem; }
.botones { display: flex; gap: 1rem; align-items: center; }
h2.seccion { margin-top: 1rem; }
table.tesoreria th.acum, table.tesoreria td:nth-child(2) { border-right: 1px solid var(--linea); }
table.tesoreria tr.saldo td { color: var(--suave); }
table.tesoreria tr.total td { border-top: 2px solid var(--separador); }
table.tesoreria tr.excluida td { color: var(--suave); text-decoration: line-through; text-decoration-color: var(--linea); }
table.tesoreria tr.excluida td:first-child { text-decoration: none; }
table.tesoreria td.celda { cursor: pointer; text-decoration: underline dotted var(--separador); text-underline-offset: 3px; }
table.tesoreria td.celda:hover, table.tesoreria td.celda:focus-visible { background: var(--codigo-bg); outline: none; }
table.tesoreria td.vacia { color: var(--suave); }
.emergente { position: absolute; z-index: 10; max-width: min(36rem, calc(100vw - 16px)); background: var(--panel);
  border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .75rem; box-shadow: 0 6px 24px rgb(0 0 0 / .18);
  font-size: .82rem; pointer-events: none; }
.emergente table { margin-top: .35rem; }
.emergente th, .emergente td { padding: .15rem .4rem; }
.detalle { margin: 0; }

/* Gráfico de las respuestas (static/grafico.js) */
details.grafico { margin: .8rem 0; border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .8rem; }
details.grafico[open] summary { margin-bottom: .5rem; }
.g-controles { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem; }
.g-controles label { display: inline-flex; gap: .3rem; align-items: center; }
.g-controles fieldset { border: 0; padding: 0; margin: 0; display: inline-flex; flex-wrap: wrap; gap: .2rem .8rem; }
.g-controles legend { float: left; margin-right: .4rem; color: var(--suave); }
.g-controles .g-pref { margin-left: auto; color: var(--suave); }
.g-lienzo { width: 100%; height: 360px; margin-top: .6rem; }
.g-kpis { display: flex; flex-wrap: wrap; gap: .8rem; }
.g-kpi { background: var(--bg); border: 1px solid var(--linea); border-radius: 8px; padding: .6rem 1rem; min-width: 10rem; }
.g-kpi span { display: block; color: var(--suave); font-size: .85rem; }
.g-kpi strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* Niveles de respuesta */
.pregunta .nivel-linea { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center;
  font-size: .9rem; }
.pregunta label.nivel { display: inline-flex; gap: .4rem; align-items: center; }
#nivel-ayuda { margin: 0; }
.respuesta .texto { white-space: pre-line; }
.nivel-usado { margin-top: -.3rem; }