/*
 * charts_caseros.css — CSS ÚNICO del proyecto caseros (IRPF 2026). Se sube tal cual.
 * -------------------------------------------------------------------
 * 1) Lo que se usa de shared/ (copiado de la plantilla): tokens --ed-*, base .ed-chart
 *    (cabecera, SVG, ejes, halo, resalte) y leyenda categórica.
 * 2) Lo específico del proyecto, scopeado bajo .chart-caseros.
 * -------------------------------------------------------------------
 */

/* ================= 1) DE SHARED/ ================= */

/* ---- Tokens (shared/styles/tokens.css): solo los que se usan ---- */
:root {
  --ed-rojo: #D0021B;
  --ed-negro: #1a1a1a;
  --ed-azul-principal: #005695;
  --ed-gris-500: #939393;
  --ed-gris-300: #c5c5c5;
  --ed-gris-200: #dedede;
  --ed-texto: #1a1a1a;
  --ed-texto-suave: #4a4a4a;
  --ed-fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Base (shared/styles/base.css) ---- */
/* Reset mínimo y reglas anti-CMS, solo dentro del gráfico */
.ed-chart, .ed-chart *, .ed-chart *::before, .ed-chart *::after { box-sizing: border-box; }
.ed-chart {
  font-family: var(--ed-fuente); color: var(--ed-texto); line-height: 1.4; margin: 24px 0;
  text-align: left;   /* el CMS suele forzar center */
  clear: left;        /* no pegarse a un elemento flotado del CMS */
}
/* Cabecera: título, subtítulo y fuente */
.ed-titulo { font-family: var(--ed-fuente); font-weight: 700; color: var(--ed-negro); font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.ed-subtitulo { font-family: var(--ed-fuente); color: var(--ed-texto-suave); font-size: 14px; margin: 0 0 16px; }
.ed-fuente { font-family: var(--ed-fuente); color: var(--ed-gris-500); font-size: 12px; margin-top: 8px; }
/* SVG y ejes: dominio oculto, texto gris, rejilla punteada en los ejes de valor */
.ed-chart .ed-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ed-chart .ed-svg text { font-family: var(--ed-fuente); }
.ed-chart .ed-eje text { font-size: 14px; fill: var(--ed-gris-500); }
.ed-chart .ed-eje path { stroke-width: 0; }
.ed-chart .ed-eje line { stroke: var(--ed-gris-500); stroke-width: 1; }
.ed-chart .ed-eje-grid line { stroke: var(--ed-gris-300); stroke-width: 0.5; stroke-dasharray: 3; }
/* Halo blanco para leer texto SVG sobre color */
.ed-chart .ed-halo { stroke: #fff; stroke-width: 3px; stroke-opacity: 0.9; paint-order: stroke; }
/* Capa de resalte (borde negro sobre el elemento activo) */
.ed-chart .ed-highlight-layer rect,
.ed-chart .ed-highlight-layer circle,
.ed-chart .ed-highlight-layer path { fill: none; stroke: var(--ed-negro); stroke-width: 2px; }

/* ---- Leyenda categórica (shared/components/leyenda.css) ---- */
.ed-leyenda { font-family: var(--ed-fuente); color: var(--ed-texto); margin: 8px 0; }
.ed-leyenda-items { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ed-leyenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ed-leyenda-muestra { width: 12px; height: 12px; display: inline-block; flex: none; }
.ed-leyenda-texto { color: var(--ed-texto); }

/* ================= 2) DEL PROYECTO ================= */

/* ---- Calculadora ---- */
.chart-caseros .caseros-slider { margin: 4px 0 14px; }
.chart-caseros .caseros-slider-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--ed-texto-suave); margin-bottom: 4px;
}
.chart-caseros .caseros-slider-valor { font-weight: 700; font-size: 18px; color: var(--ed-negro); white-space: nowrap; }
/* Slider dibujado a mano: colores fijos, sin los cambios de tono del navegador
   en hover, foco o clic. --caseros-slider-color cambia por cajita. */
.chart-caseros .caseros-slider { --caseros-slider-color: var(--ed-azul-principal); }
.chart-caseros .caseros-caja-casero .caseros-slider { --caseros-slider-color: var(--ed-rojo); }
.chart-caseros .caseros-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none;
}
/* Carril: la parte a la izquierda del botón va en color (--caseros-relleno lo pone el JS) */
.chart-caseros .caseros-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border: 0; border-radius: 2px;
  background: linear-gradient(to right, var(--caseros-slider-color) var(--caseros-relleno, 0%),
                              var(--ed-gris-200) var(--caseros-relleno, 0%));
}
.chart-caseros .caseros-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%;
  background: var(--caseros-slider-color);
}
.chart-caseros .caseros-slider input[type="range"]::-moz-range-track {
  height: 4px; border: 0; border-radius: 2px;
  background: linear-gradient(to right, var(--caseros-slider-color) var(--caseros-relleno, 0%),
                              var(--ed-gris-200) var(--caseros-relleno, 0%));
}
.chart-caseros .caseros-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--caseros-slider-color);
}
.chart-caseros .caseros-slider input[type="range"]::-moz-focus-outer { border: 0; }

/* Rejilla con subgrid: título, controles, reparto, cuota y gráfico quedan alineados
   entre las dos cajitas aunque sus textos ocupen distinto alto. */
.chart-caseros .caseros-cajas {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: 16px;
}
.chart-caseros .caseros-caja {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-width: 0;
  border: 1px solid var(--ed-gris-300); padding: 12px 12px 20px;
}
.chart-caseros .caseros-caja-titulo {
  font-family: var(--ed-fuente); font-size: 17px; font-weight: 700; margin: 0 0 6px;
  padding-bottom: 4px; border-bottom: 2px solid var(--ed-azul-principal); color: var(--ed-negro);
}
.chart-caseros .caseros-caja-casero .caseros-caja-titulo { border-bottom-color: var(--ed-rojo); }
/* El asalariado no tiene slider propio: texto en su lugar */
.chart-caseros .caseros-caja-asalariado .caseros-caja-controles:empty::before {
  content: "Todos sus ingresos vienen del salario";
  display: block; font-size: 14px; color: var(--ed-texto-suave); padding-top: 6px;
}
.chart-caseros .caseros-reparto { font-size: 14px; margin: 0 0 8px; color: var(--ed-texto-suave); }
/* Cuota: debajo del reparto de ingresos y encima del gráfico, en grande */
.chart-caseros .caseros-resultado { margin: 0 0 10px; padding-top: 8px; border-top: 1px solid var(--ed-gris-200); line-height: 1.3; }
.chart-caseros .caseros-cuota { display: block; font-size: 30px; font-weight: 700; color: var(--ed-negro); }
.chart-caseros .caseros-cuota-texto { display: block; font-size: 14px; color: var(--ed-texto-suave); }
.chart-caseros .caseros-nota { display: block; font-size: 12px; color: var(--ed-gris-500); margin-top: 2px; }

.chart-caseros .caseros-separador { stroke: #fff; stroke-width: 1.5; }
.chart-caseros .caseros-etiqueta { font-size: 12px; pointer-events: none; } /* color por contraste, en el JS */
.chart-caseros .caseros-etiqueta-tipo { font-size: 12px; font-weight: 700; fill: var(--ed-negro); pointer-events: none; }

/* ---- Evolución ---- */
.chart-caseros .caseros-linea { fill: none; stroke-width: 2.5; }
.chart-caseros .caseros-brecha { fill: var(--ed-rojo); opacity: 0.08; }
.chart-caseros .caseros-etiqueta-linea { font-size: 13px; }
.chart-caseros .caseros-titulo-eje { font-size: 11px; fill: var(--ed-gris-500); }
.chart-caseros .caseros-inicio { fill: var(--ed-negro); }
.chart-caseros .caseros-anotacion { font-size: 12px; fill: var(--ed-negro); }
.chart-caseros .caseros-anotacion-linea { stroke: var(--ed-negro); stroke-width: 1; }
.chart-caseros .caseros-guia { stroke: var(--ed-gris-500); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

/* ---- Recuadros (de lo cobrado a lo que tributa) ---- */
.chart-caseros .caseros-recuadros-lienzo { position: relative; }
/* Borde gris en cada recuadro: se lee como un cuadro dentro de otro */
.chart-caseros .caseros-recuadro { stroke: var(--ed-gris-500); stroke-width: 1.5; cursor: pointer; }
/* Total de cada recuadro (arriba de su franja) */
.chart-caseros .caseros-recuadro-etiqueta { position: absolute; pointer-events: none; line-height: 1.25; }
.chart-caseros .caseros-recuadro-cifra { font-size: 20px; font-weight: 700; color: var(--ed-negro); }
.chart-caseros .caseros-recuadro-texto { font-size: 14px; color: var(--ed-negro); }
.chart-caseros .caseros-recuadro-nota { font-size: 13px; color: var(--ed-texto-suave); margin-top: 4px; }
/* Lo que se resta (abajo de la franja): texto simple, solo el signo menos en rojo */
.chart-caseros .caseros-recuadro-resta {
  position: absolute; pointer-events: none; transform: translateY(-100%); line-height: 1.25;
}
/* Discreta frente al total de cada recuadro: más pequeña y semi-negrita */
.chart-caseros .caseros-recuadro-resta-cifra { font-size: 14px; font-weight: 600; color: var(--ed-texto-suave); white-space: nowrap; }
.chart-caseros .caseros-recuadro-menos { color: var(--ed-rojo); }
.chart-caseros .caseros-recuadro-resta-texto { font-size: 12px; color: var(--ed-texto-suave); }
.chart-caseros .caseros-recuadro-final .caseros-recuadro-cifra { font-size: 24px; }
@media (max-width: 600px) {
  .chart-caseros .caseros-recuadro-cifra { font-size: 17px; }
  .chart-caseros .caseros-recuadro-final .caseros-recuadro-cifra { font-size: 19px; }
  .chart-caseros .caseros-recuadro-texto { font-size: 13px; }
}

/* Tooltip del gráfico de evolución (el .ed-tooltip vive en <body>, fuera de .chart-caseros) */
.ed-tooltip .caseros-tip-titulo { font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--ed-gris-300); padding-bottom: 4px; margin-bottom: 6px; }
.ed-tooltip .caseros-tip-bloque { border-left: 3px solid; padding-left: 8px; margin: 6px 0; min-width: 220px; }
.ed-tooltip .caseros-tip-origen { font-weight: 700; margin-bottom: 2px; }
.ed-tooltip .caseros-tip-fila { display: flex; justify-content: space-between; gap: 14px; }
.ed-tooltip .caseros-tip-fila span { color: #666; }
.ed-tooltip .caseros-tip-diferencia { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ed-gris-200); }

/* ---- Móvil: las cajitas se apilan ---- */
@media (max-width: 600px) {
  .chart-caseros .caseros-cajas { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px; }
  .chart-caseros .caseros-caja { grid-row: auto; grid-template-rows: none; }
  .chart-caseros .caseros-slider input[type="range"] { height: 32px; }
}