/* La Palma · página de la finca
   Sistema visual: manual de marca Longs Peak (colores, letras, esquinas).
   Los nombres de los colores son los del manual. */

:root {
  /* Colores del manual Longs Peak (v2: paleta del logo original) */
  --verde-longs: #075829;  /* color insignia */
  --pasto: #459843;        /* verde medio: solo rellenos y gráficos */
  --pasto-texto: #2F7A35;  /* verde para texto sobre claro: enlaces, datos destacados */
  --brote: #CBDB7B;        /* verde claro: fondos de etiquetas, lote listo */
  --heno: #D9A441;         /* acento cálido: solo rellenos (el arete), ≤10% */
  --heno-texto: #8A5F0E;
  --monte: #151F15;        /* tinta principal */
  --monte-suave: #56634F;  /* texto secundario */
  --leche: #F4F6EE;        /* fondo de página */
  --superficie: #FFFFFF;   /* tarjetas y tablas */
  --niebla: #D6DDCF;       /* líneas y bordes */
  --on-verde: #FFFFFF;     /* texto sobre verde-longs */
  --alerta: #A8461F;       /* solo alertas del sistema */
  /* Tintes de apoyo (calculados para contraste ≥ 4,5:1 con su texto) */
  --verde-tinte: #E4EEDF;
  --brote-tinte: #EFF4D6;
  --heno-tinte: #F6E9C9;
  --heno-oscuro: #5E4206;
  --alerta-tinte: #F8E7DF;

  /* Letras del manual */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-texto: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-datos: "IBM Plex Mono", Consolas, monospace;

  /* Esquinas: la marca es de ángulos rectos */
  --radio-0: 0;
  --radio-1: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--leche);
  color: var(--monte);
  font: 400 16px/1.55 var(--f-texto);
}
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.15; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.005em; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--pasto-texto); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--heno); outline-offset: 2px; }

/* Cifras: la mono del manual, números tabulares */
.dato, td.n, .cifra b, .vaca .litros b, .grafica text { font-family: var(--f-datos); font-variant-numeric: tabular-nums; }

.cargando { padding: 48px 16px; text-align: center; color: var(--monte-suave); }

/* ── Marco ─────────────────────────────────────────────── */
/* Arriba, siempre: el logo de Longs Peak y, en texto, la finca que se está viendo. */

.marco { min-height: 100vh; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; column-gap: 20px; flex-wrap: wrap;
  padding: 12px 24px 0; background: var(--superficie); border-bottom: 1px solid var(--niebla);
}
.marca { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--monte); }
.barra .logo { display: block; height: 36px; width: auto; }   /* el manual pide ≥ 32 px para la versión con degradado */
.finca { padding-left: 16px; border-left: 1px solid var(--niebla); font: 700 1.05rem/1.2 var(--f-display); color: var(--verde-longs); white-space: nowrap; }
.barra .quien { margin-left: auto; font-size: .9rem; color: var(--monte-suave); }
.barra .salir { background: none; border: 1px solid var(--niebla); border-radius: var(--radio-1);
  padding: 4px 12px; font-size: .88rem; cursor: pointer; color: var(--monte); }

.pestanas { display: flex; gap: 2px; flex-basis: 100%; order: 5; margin-top: 8px; margin-left: -14px; }
.pestanas a {
  padding: 10px 14px 12px; color: var(--monte-suave); text-decoration: none;
  font-weight: 600; border-bottom: 3px solid transparent;
}
.pestanas a:hover { color: var(--monte); }
.pestanas a[aria-current="page"] { color: var(--verde-longs); border-bottom-color: var(--verde-longs); }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 32px 24px 96px; }

@media (max-width: 860px) {
  .barra { padding: 10px 16px; gap: 12px; }
  .marca { flex-direction: column; align-items: flex-start; gap: 4px; }
  .barra .logo { height: 32px; }
  .finca { padding-left: 0; border-left: 0; font-size: .95rem; }
  .barra .quien { display: none; }
  .barra .salir { margin: 0 0 0 auto; }
  .pestanas { margin: 0;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; gap: 0;
    justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom);
    background: var(--superficie); border-top: 1px solid var(--niebla);
  }
  .pestanas a {
    flex: 1; text-align: center; padding: 11px 1px 13px; font-size: .76rem;
    border-bottom: 0; border-top: 3px solid transparent;
  }
  .pestanas a[aria-current="page"] { border-top-color: var(--verde-longs); }
  main { padding: 20px 16px 96px; }
  h1 { font-size: 1.65rem; }
}

/* ── Piezas comunes ────────────────────────────────────── */

.seccion { margin-top: 36px; }
.seccion > h2 { margin-bottom: 12px; }
.nota { color: var(--monte-suave); font-size: .9rem; }
.tenue { color: var(--monte-suave); }
.vacio { padding: 20px; border: 1px dashed var(--niebla); color: var(--monte-suave); background: var(--superficie); }

.panel { background: var(--superficie); border: 1px solid var(--niebla); }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-weight: 600; color: var(--monte-suave); font-size: .82rem; padding: 9px 12px; border-bottom: 1px solid var(--niebla); }
td { padding: 9px 12px; border-bottom: 1px solid var(--niebla); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.n { font-size: .9rem; }
.tabla { overflow-x: auto; }

.boton {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radio-1); border: 1px solid var(--verde-longs);
  background: var(--verde-longs); color: var(--on-verde); font-weight: 600;
}
.boton.secundario { background: var(--superficie); color: var(--verde-longs); }
.boton:disabled { opacity: .55; cursor: default; }

/* Etiquetas: rectas, como pide el manual */
.chip { display: inline-block; padding: 1px 8px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip.verde { background: var(--brote); color: var(--verde-longs); }
.chip.potrero { background: var(--verde-longs); color: var(--on-verde); }
.chip.amarillo { background: var(--heno-tinte); color: var(--heno-oscuro); }
.chip.rojo { background: var(--alerta-tinte); color: var(--alerta); }
.chip.gris { background: var(--verde-tinte); color: var(--verde-longs); }

/* El arete: el número de cada vaca en el arete de verdad. Es la única
   pieza redondeada aparte del símbolo: es un objeto real de la finca. */
.arete {
  position: relative; display: inline-grid; place-items: center;
  min-width: 46px; height: 40px; padding: 8px 6px 2px;
  background: var(--heno); border: 1.5px solid var(--heno-texto);
  border-radius: 12px 12px 16px 16px;
  font: 600 .9rem/1 var(--f-datos); color: var(--monte);
}
.arete::before {   /* el hueco por donde pasa el arete */
  content: ""; position: absolute; top: 4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--leche); border: 1.5px solid var(--heno-texto);
}
.arete.grande { min-width: 76px; height: 64px; padding-top: 16px; font-size: 1.4rem; border-radius: 16px 16px 22px 22px; }
.arete.grande::before { top: 6px; width: 10px; height: 10px; margin-left: -5px; }
.arete.baja { background: var(--niebla); border-color: var(--monte-suave); color: var(--monte-suave); }

/* ── Hoy ───────────────────────────────────────────────── */

.titular { max-width: 26ch; font: 700 clamp(1.7rem, 4.6vw, 2.6rem)/1.12 var(--f-display); letter-spacing: -.01em; }
.titular .baja { color: var(--alerta); }
.subtitular { margin-top: 10px; color: var(--monte-suave); max-width: 62ch; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border-top: 3px solid var(--verde-longs); }
.cifra { padding: 14px 16px; border-left: 1px solid var(--niebla); }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra b { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
.cifra span { font-size: .86rem; color: var(--monte-suave); }
@media (max-width: 720px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--niebla); }
}

.lista { list-style: none; margin: 0; padding: 0; }
.lista summary { list-style: none; }
.lista summary::-webkit-details-marker { display: none; }
.lista summary::before { content: "▸"; color: var(--monte-suave); }
.lista details[open] summary::before { content: "▾"; }
.lista li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--niebla); }
.lista li:last-child { border-bottom: 0; }
.lista .cuando { margin-left: auto; white-space: nowrap; color: var(--monte-suave); font-size: .86rem; align-self: flex-start; }
.alerta-txt { flex: 1; }
.alerta { border-color: #E9C3B2; }
.alerta li { background: var(--alerta-tinte); border-bottom-color: #E9C3B2; }
.alerta .alerta-txt > div:first-child::before { content: "⚠ "; color: var(--alerta); font-weight: 700; }

/* ── Gráfica de leche ──────────────────────────────────── */

.grafica { padding: 12px 8px 4px; }
.grafica svg { display: block; width: 100%; height: auto; }
.grafica .eje { stroke: var(--niebla); }
.grafica .linea { fill: none; stroke: var(--verde-longs); stroke-width: 2.25; }
.grafica .prom { fill: none; stroke: var(--pasto); stroke-width: 1.5; stroke-dasharray: 4 4; }
.grafica text { font-size: 11.5px; font-weight: 500; fill: var(--monte-suave); }
.grafica .punto { fill: var(--verde-longs); }
.leyenda { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px 12px; font-size: .85rem; color: var(--monte-suave); }
.leyenda i { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.25px solid var(--verde-longs); }
.leyenda i.prom { border-top: 1.5px dashed var(--pasto); }

/* ── Tablero ───────────────────────────────────────────── */

.cifra small { display: block; margin-top: 2px; font-size: .8rem; color: var(--monte-suave); line-height: 1.35; }
.cifra.baja b { color: var(--alerta); }

.semaforo li { align-items: baseline; }
.semaforo b { min-width: 9.5em; }
.luz { flex: none; width: 12px; height: 12px; align-self: center; border: 1.5px solid transparent; }
.luz.verde { background: var(--pasto); border-color: var(--verde-longs); }
.luz.amarillo { background: var(--heno); border-color: var(--heno-texto); }
.luz.rojo { background: var(--alerta); border-color: var(--alerta); }
.luz.gris { background: var(--niebla); border-color: var(--monte-suave); }
@media (max-width: 600px) {
  .semaforo li { flex-wrap: wrap; row-gap: 2px; }
  .semaforo b { min-width: 0; }
  .semaforo li > span:last-child { flex-basis: 100%; padding-left: 24px; }
}

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.dos-col h3 { margin-bottom: 8px; }
@media (max-width: 720px) { .dos-col { grid-template-columns: 1fr; } .ranking .r-txt .nota { display: none; } }
.ranking li { cursor: pointer; padding: 8px 14px; }
.ranking li:hover { background: var(--verde-tinte); }
.ranking .puesto { width: 1.2em; font: 600 .9rem var(--f-datos); color: var(--monte-suave); }
.ranking .r-txt b { font-family: var(--f-datos); font-weight: 600; }
.ranking .cuando { align-self: center; font-family: var(--f-datos); font-size: .82rem; }

/* ── Animales: para revisar + tabla del hato ───────────── */

.revisar li { align-items: flex-start; cursor: pointer; }
.revisar li:hover { background: var(--verde-tinte); }
.revisar-txt { display: grid; gap: 4px; padding-top: 4px; }
.revisar-txt > div, .revisar li > .luz + span { display: flex; gap: 8px; align-items: baseline; }
.revisar .luz { align-self: auto; margin-top: 4px; }
.filtros.chicos button { font-size: .84rem; padding: 4px 10px; }
.tabla-hato table { min-width: 640px; }
.tabla-hato th { padding: 0; white-space: nowrap; }
.tabla-hato th .ordenar { all: unset; display: block; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.tabla-hato th.n .ordenar { text-align: right; }
.tabla-hato th[aria-sort] { color: var(--verde-longs); }
.tabla-hato tbody tr { cursor: pointer; }
.tabla-hato tbody tr:hover, .tabla-hato tbody tr:focus-visible { background: var(--verde-tinte); outline: none; }
.tabla-hato td { padding: 7px 12px; }
.tabla-hato .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.tabla-hato .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.alerta-col { white-space: nowrap; text-align: right; }
.alerta-col .luz, .revisar .luz { display: inline-block; vertical-align: middle; }
.alerta-col small { margin-left: 4px; font: 600 .78rem var(--f-datos); color: var(--monte-suave); }
@media (max-width: 720px) {
  .tabla-hato td:first-child, .tabla-hato th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
}

.reglas { background: var(--superficie); border: 1px solid var(--niebla); padding: 10px 14px; margin-bottom: 14px; }
.reglas summary { cursor: pointer; font-weight: 600; color: var(--verde-longs); }
.reglas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.reglas-grid b { display: block; font-family: var(--f-display); }
.regla-n { display: inline-block; margin: 2px 0 4px; padding: 1px 8px; background: var(--brote-tinte); color: var(--verde-longs); font: 600 .8rem var(--f-datos); }
.reglas-grid p { font-size: .84rem; color: var(--monte-suave); line-height: 1.4; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.tema { background: var(--superficie); border: 1px solid var(--niebla); border-top: 3px solid var(--heno); padding: 12px 14px; }
.tema.urgente { border-top-color: var(--alerta); }
.tema-cabeza { display: flex; align-items: center; gap: 8px; }
.tema-cabeza h3 { flex: 1; }
.tema-n { font: 600 1.1rem var(--f-datos); color: var(--monte-suave); }
.tema .nota { margin: 4px 0 8px; font-size: .84rem; }
.tema ul { list-style: none; margin: 0; padding: 0; }
.tema li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--niebla); cursor: pointer; font-size: .92rem; }
.tema li:hover { background: var(--verde-tinte); }
.tema li .rojo { color: var(--alerta); font-weight: 600; }
.tema .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.tema .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.tema .luz { display: inline-block; }

/* ── Plata ─────────────────────────────────────────────── */

.grafica rect.ingreso { fill: var(--verde-longs); }
.grafica rect.gasto { fill: var(--heno); }
.leyenda i.cuadro { width: 12px; height: 12px; border: 0; vertical-align: -1px; }
.leyenda i.cuadro.ingreso { background: var(--verde-longs); }
.leyenda i.cuadro.gasto { background: var(--heno); }
.categorias { padding: 6px 16px; }
.cat { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr 7.5em 3.2em; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--niebla); }
.cat:last-child { border-bottom: 0; }
.cat-barra { height: 10px; background: var(--verde-tinte); }
.cat-barra i { display: block; height: 100%; background: var(--pasto); }
.cat-valor, .cat-pct { font-family: var(--f-datos); font-size: .9rem; text-align: right; }
.cat-pct { color: var(--monte-suave); }
.tabla-gastos td.fecha { white-space: nowrap; }
.solo-cel { display: none; }
@media (max-width: 600px) {
  .tabla-gastos .col-cat { display: none; }
  .tabla-gastos .solo-cel { display: block; }
  .tabla-gastos td { padding: 9px 8px; }
  .cat { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cat-barra { grid-column: 1 / -1; grid-row: 2; }
  .cat-pct { display: none; }
}

/* ── Potreros ──────────────────────────────────────────── */

.potreros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lote {
  padding: 12px 14px; border: 1px solid var(--niebla); background: var(--superficie);
  min-height: 112px; display: flex; flex-direction: column; gap: 3px;
}
.lote .num { font: 700 1.6rem/1 var(--f-display); }
.lote .estado { font-size: .84rem; font-weight: 700; }
.lote .detalle { font-size: .84rem; color: var(--monte-suave); margin-top: auto; }
.lote.ocupado { background: var(--verde-longs); border-color: var(--verde-longs); color: var(--on-verde); }
.lote.ocupado .detalle { color: var(--on-verde); opacity: .85; }
.lote.listo { background: var(--brote-tinte); border-color: var(--brote); }
.lote.listo .estado { color: var(--verde-longs); }
.lote.descansando .estado { color: var(--monte-suave); }
.lote.pasado { background: var(--heno-tinte); border-color: #EBCF8F; }
.lote.pasado .estado { color: var(--heno-oscuro); }
/* El lote que sigue: las líneas de ladera de la marca */
.lote.siguiente {
  border: 2px solid var(--verde-longs);
  background: repeating-linear-gradient(-60deg, var(--brote) 0 10px, var(--brote-tinte) 10px 20px);
}
.lote.siguiente .estado { color: var(--verde-longs); }

/* ── Animales ──────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filtros button {
  padding: 6px 12px; border: 1px solid var(--niebla); border-radius: var(--radio-1);
  background: var(--superficie); cursor: pointer; font-size: .9rem;
}
.filtros button[aria-pressed="true"] { background: var(--verde-longs); border-color: var(--verde-longs); color: var(--on-verde); }

.vacas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.vaca {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px; text-align: left; width: 100%;
  background: var(--superficie); border: 1px solid var(--niebla); cursor: pointer;
}
.vaca:hover { border-color: var(--verde-longs); }
.vaca .info { flex: 1; min-width: 0; }
.vaca .info .linea1 { display: flex; gap: 6px; flex-wrap: wrap; }
.vaca .info .linea2 { font-size: .86rem; color: var(--monte-suave); margin-top: 3px; }
.vaca .litros { text-align: right; }
.vaca .litros b { display: block; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.vaca .litros span { font-size: .76rem; color: var(--monte-suave); }

.ficha-cabeza { display: flex; gap: 18px; align-items: center; }
.datos-vaca { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); background: var(--superficie);
  border: 1px solid var(--niebla); overflow: hidden; margin: 20px 0 0; }
.datos-vaca div { padding: 10px 14px; box-shadow: 1px 1px 0 var(--niebla); }
.datos-vaca dt { font-size: .8rem; color: var(--monte-suave); }
.datos-vaca dd { margin: 2px 0 0; font-weight: 600; }
.volver { display: inline-block; margin-bottom: 14px; text-decoration: none; font-weight: 600; }

.historia { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--niebla); }
.historia li { position: relative; padding: 0 0 16px 16px; }
.historia li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px;
  background: var(--superficie); border: 2px solid var(--verde-longs); }
.historia li.repro::before { background: var(--heno); border-color: var(--heno-texto); }
.historia li.sanidad::before { background: var(--alerta); border-color: var(--alerta); }
.historia .fecha { font-size: .84rem; color: var(--monte-suave); }

.barras { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.barras span { flex: 1; background: var(--verde-longs); min-width: 6px; }

/* ── Actividad ─────────────────────────────────────────── */

.evento-texto { font-size: .86rem; color: var(--monte-suave); margin-top: 2px; max-width: 70ch; }
.anulado { text-decoration: line-through; opacity: .6; }
select { padding: 8px; border: 1px solid var(--niebla); border-radius: var(--radio-1); font: inherit; background: var(--superficie); color: var(--monte); }

/* ── Entrar ────────────────────────────────────────────── */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--leche); position: relative; }
.entrada::before {   /* las líneas de ladera de la marca, de borde a borde */
  content: ""; position: absolute; inset: 0 0 auto; height: 38vh;
  background: repeating-linear-gradient(-60deg, var(--verde-longs) 0 26px, var(--brote) 26px 32px);
}
.entrada .caja { position: relative; width: 100%; max-width: 400px; background: var(--superficie); padding: 28px 26px;
  border-top: 4px solid var(--brote); box-shadow: 0 2px 16px rgba(21, 31, 21, .12); }
.entrada .logo { display: block; width: 100%; max-width: 320px; height: auto; }
.finca-entrada { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--niebla); font: 700 1.1rem/1.2 var(--f-display); color: var(--verde-longs); }
.entrada form { display: grid; gap: 14px; margin-top: 20px; }
.entrada label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
.entrada input { padding: 10px 12px; border: 1px solid var(--niebla); border-radius: var(--radio-1); font: inherit; }
.entrada .alternar { background: none; border: 0; color: var(--pasto-texto); cursor: pointer; padding: 0; text-decoration: underline; font-size: .9rem; }
.error { color: var(--alerta); font-size: .9rem; }
.ok { color: var(--pasto-texto); font-size: .9rem; }

.aviso-flotante { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--monte); color: var(--leche);
  padding: 10px 16px; font-size: .92rem; z-index: 20; }

@media (prefers-reduced-motion: no-preference) {
  .titular { animation: aparecer .5s ease-out both; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Ficha: por qué baja la leche */
.por-que { background: var(--brote-tinte); border-left: 4px solid var(--verde-longs); padding: 10px 14px; margin-bottom: 12px; }
.por-que.ojo { background: var(--superficie); border-left-color: var(--alerta); }
.por-que b { display: block; margin-bottom: 4px; }
.por-que ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--monte-suave); line-height: 1.45; }

/* Plata: gastos por categoría */
.gc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.gc-graficas { display: grid; gap: 14px; }
.gc h3 { font-size: 1rem; margin: 0 0 8px; }
.gc-lista { padding: 14px 12px; }
.gc-fila { display: grid; grid-template-columns: 14px 1fr auto 34px; align-items: center; gap: 10px; width: 100%;
  padding: 10px 8px; background: none; border: 1px solid transparent; font: inherit; color: var(--monte); text-align: left; cursor: pointer; }
.gc-fila:first-of-type { grid-template-columns: 1fr auto; background: var(--leche); border-color: var(--niebla); margin-bottom: 6px; font-weight: 600; }
.gc-fila:hover { background: var(--leche); }
.gc-fila.activa { border-color: var(--verde-longs); background: var(--verde-tinte); }
.gc-punto { width: 12px; height: 12px; border-radius: 50%; }
.gc-valor { font-family: var(--f-datos); font-variant-numeric: tabular-nums; font-weight: 600; }
.gc-n { display: inline-block; margin-left: 8px; padding: 1px 7px; background: var(--leche); border: 1px solid var(--niebla);
  color: var(--monte-suave); font: 500 .78rem var(--f-datos); text-align: center; }
.gc-dona { padding: 14px; }
.gc-dona svg { display: block; width: 100%; max-width: 230px; margin: 0 auto; }
.gc-centro-t { font: 500 11px var(--f-texto); fill: var(--monte-suave); }
.gc-centro-v { font: 700 17px var(--f-datos); fill: var(--monte); }
.gc-barras { padding: 14px 10px 6px; }
@media (max-width: 760px) { .gc { grid-template-columns: 1fr; } }