/* Panel de la parroquia: lectura de libro de ofrendas. Cifras tabulares, reglas
   finas, una sola tinta para el dato y la marca dorada solo en el día en curso. */
.panel{padding-top:32px;display:flex;flex-direction:column;gap:28px;container-type:inline-size}

.encabezado{display:flex;flex-direction:column;gap:20px}
.encabezado__titulo{min-width:0}
.controles{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-end}
.controles .campo:first-child{min-width:min(280px,100%)}
.controles .segmentos{min-width:270px}

.actualizado{display:flex;align-items:center;gap:8px;margin-top:-12px;font-size:13.5px;color:var(--texto-3)}
.punto{width:8px;height:8px;border-radius:50%;background:var(--verde)}
.actualizado.error .punto{background:var(--error)}

/* Cuatro indicadores de igual tamaño. Las filas internas comparten la retícula
   (subgrid), así las cifras quedan a la misma altura aunque un rótulo o un
   detalle ocupe más renglones que los demás. */
.indicadores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;border-top:2px solid var(--texto);border-bottom:1px solid var(--linea);background:var(--superficie)}
.indicador{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px;padding:18px 20px;min-width:0}
.indicador+.indicador{border-left:1px solid var(--linea)}
.indicador .valor{font-size:clamp(22px,4.2cqi,34px);font-weight:800;letter-spacing:-.015em;line-height:1.1;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.indicador .valor small{font-size:.55em;font-weight:700;letter-spacing:0;margin-right:.2em;color:var(--texto-2)}
.indicador .detalle{font-size:13.5px;color:var(--texto-3)}
.detalle .sube{color:var(--verde);font-weight:700}
.detalle .baja{color:var(--error);font-weight:700}
@container (max-width:680px){
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto auto auto}
  .indicador:nth-child(3){border-left:0}
  .indicador:nth-child(n+3){border-top:1px solid var(--linea)}
  .indicador{padding:14px 12px}
  .indicador .valor{font-size:clamp(18px,6.4cqi,28px)}
  .indicador .detalle{font-size:12.5px}
}

.bloque{min-width:0;display:flex;flex-direction:column;gap:12px}
.bloque__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.subtitulo{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}
.leyenda{font-size:13px;color:var(--texto-3)}

.grafico{min-height:240px;background:var(--superficie);border:1px solid var(--linea);padding:12px 12px 4px}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.g-rejilla{stroke:var(--linea);stroke-width:1}
.g-eje{fill:var(--texto-3);font:500 11px var(--fuente)}
.g-barra{fill:var(--verde)}
.g-barra--hoy{fill:var(--oro)}
.g-barra:hover{fill:var(--verde-profundo)}
:root[data-theme="dark"] .g-barra:hover{fill:#A6E3BF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g-barra:hover{fill:#A6E3BF}}

.columnas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px 36px;align-items:start}
@media (max-width:900px){.columnas{grid-template-columns:minmax(0,1fr)}}
.tabla-distribucion td:last-child{width:38%}
.participacion{display:flex;align-items:center;gap:10px}
.participacion i{display:block;height:8px;background:var(--verde);min-width:2px}
.participacion span{font-size:13px;color:var(--texto-3);min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.tabla-ultimas td{white-space:nowrap}
.tabla-ultimas .mono{font-size:12.5px;color:var(--texto-3)}
.monto{font-weight:700;color:var(--texto)}
.monto small{display:block;font-weight:400;font-size:12px;color:var(--texto-3)}
.vacio{padding:18px 0;color:var(--texto-3);font-size:14.5px}

@media (max-width:420px){
  .controles,.controles .campo{width:100%}
  .controles .segmentos{min-width:0}
}