/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: presupuesto
   --------------------------------------------------------------------------
   Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de
   una va en components.css. Prohibido escribir colores, radios o sombras
   literales: se consumen con var(--token) de tokens.css.
   ========================================================================== */

/* ---- Cabecera y avisos del financiador ------------------------------------ */
.budget-info-linea{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-4)}
.budget-info-item{white-space:nowrap}

/* components.css no define un tono neutro para .tag (solo ok/avisa/mal/info);
   lo añado aquí para la fuente «otro», que no encaja en ningún estado. */
.tag--neutro{background:var(--neutro-bg);color:var(--neutro)}

/* ---- Financiación por fuente ---------------------------------------------- */
/* Dos cajas por fila siempre, a cualquier ancho: con `auto-fit` el número de
   columnas cambiaba con la ventana y el bloque se leía distinto en cada
   pantalla. Para que las dos quepan también en un móvil, las tres cifras de
   dentro pasan a una sola columna por debajo de 780px. */
.budget-fuentes{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--esp-4);margin-bottom:var(--esp-4);
}
.budget-fuente{
  background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r-s);
  padding:var(--esp-4);display:flex;flex-direction:column;gap:var(--esp-3);
  /* Sin esto las dos columnas salen desiguales: el mínimo automático de un
     elemento de rejilla es su contenido mínimo, y el nombre de la fuente
     —que puede ser muy largo— ensancha su columna a costa de la otra. */
  min-width:0;
}
.budget-fuente--total{background:var(--acento-suave);border-color:var(--acento-borde)}
.budget-fuente-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.budget-fuente-nombre{font-size:var(--t-s);font-weight:var(--peso-fuerte);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budget-fuente-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-3)}
.budget-fuente-pct{display:flex;flex-direction:column;gap:5px}
.budget-fuente-pct-txt{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--texto-3);
  font-variant-numeric:tabular-nums}

@media (max-width:780px){
  .budget-fuentes{gap:var(--esp-3)}
  .budget-fuente{padding:var(--esp-3);gap:var(--esp-2)}
  /* Aprobado, ejecutado y disponible en columna: en media pantalla de móvil no
     caben tres importes uno al lado del otro. */
  .budget-fuente-cifras{grid-template-columns:1fr;gap:var(--esp-2)}
  .budget-fuente-cifras .v{font-size:var(--t-m)}
}

/* ---- Resumen frente a la subvención ---------------------------------------- */
.budget-progreso-global{margin-top:var(--esp-3)}
.icon-mal{background:var(--mal-bg);color:var(--mal)}

/* ---- Inicialización del presupuesto ---------------------------------------- */
.budget-init{max-width:460px;margin:0 auto;text-align:center}
.budget-init-form{
  width:100%;max-width:360px;margin:var(--esp-2) auto 0;text-align:left;
  display:flex;flex-direction:column;gap:var(--esp-4);
}
.budget-init-form .help-text{text-align:center}

/* ---- Tabla de partidas: columnas propias ----------------------------------- */
.budget-col-nombre{min-width:220px}
.budget-col-pct{width:130px;text-align:right}
.tabla thead th.budget-col-pct{text-align:right}

/* Filas de categoría y de subtotal: fondo hundido, código en mono, negrita.
   El selector repite .tabla tbody para pesar más que la regla genérica de
   components.css y poder quitar el borde inferior de la fila de categoría. */
.tabla tbody tr.budget-fila-categoria td{background:var(--sup-2);border-bottom:none}
.budget-categoria-titulo{
  font-family:var(--mono);font-size:var(--t-eti);letter-spacing:var(--track-eti);
  text-transform:uppercase;font-weight:var(--peso-fuerte);color:var(--acento);
}
.tabla tbody tr.budget-fila-subtotal td{background:var(--sup-2);font-weight:var(--peso-fuerte)}
.budget-fila-subtotal .col-code{font-family:var(--mono)}

/* Fila con desviación o con exceso sobre el máximo del financiador: todo el
   renglón se tiñe, pero el icono y el texto siguen ahí — el color no va solo. */
.tabla tbody tr.budget-fila-alerta,
.tabla tbody tr.budget-fila-excedida{background:var(--mal-bg)}
.tabla tbody tr.budget-fila-alerta:hover,
.tabla tbody tr.budget-fila-excedida:hover{background:var(--mal-bg)}
.tabla tbody tr.budget-fila-opcional{opacity:.7}

/* Campos numéricos editables: a la derecha, en mono, compactos. */
.budget-input{
  text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  padding:7px 10px;min-width:100px;
}

/* Valor calculado (no es un campo): mismo tratamiento hundido que un campo
   deshabilitado, para que la fila se lea como una unidad. */
.budget-calculated{
  display:inline-flex;align-items:center;justify-content:flex-end;width:100%;
  min-width:100px;padding:7px 10px;border-radius:var(--r-s);background:var(--sup-3);
  font-family:var(--mono);font-weight:var(--peso-medio);font-variant-numeric:tabular-nums;
}
.budget-calculated--neg{color:var(--mal)}

/* Columna % ejecución: barra fina + cifra, con los avisos de desviación al lado. */
.budget-pct-celda{display:flex;flex-direction:column;gap:5px;min-width:96px}
.budget-pct-txt{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--texto-2);
  font-variant-numeric:tabular-nums;
}
.budget-alerta-desviacion{color:var(--avisa);display:inline-flex}
.budget-alerta-excedida{color:var(--mal);display:inline-flex}

/* Leyenda bajo la tabla */
.budget-legend{
  display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-5);
  padding:var(--esp-3) var(--esp-5);border-top:1px solid var(--borde);
}
.budget-legend-item{display:flex;align-items:center;gap:6px;font-size:var(--t-s);
  color:var(--texto-3)}

/* ---- Modal de distribución por financiador --------------------------------- */
.budget-dist-info{
  display:flex;align-items:baseline;gap:var(--esp-2);flex-wrap:wrap;
  padding:var(--esp-3);background:var(--sup-2);border-radius:var(--r-s);
  margin-bottom:var(--esp-4);
}
.budget-dist-info .codigo{font-family:var(--mono);font-weight:var(--peso-fuerte);color:var(--acento)}
.budget-dist-info .nombre{color:var(--texto-2);font-size:var(--t-s)}
.budget-dist-filas{display:flex;flex-direction:column;gap:var(--esp-3)}
.budget-dist-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3)}
.budget-dist-fila label{flex:1;font-size:var(--t-s);font-weight:var(--peso-medio);min-width:0}
.budget-dist-fila .budget-input{width:150px;flex:none}
.budget-dist-total{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--esp-2);
  margin-top:var(--esp-4);padding-top:var(--esp-3);border-top:1px solid var(--borde-2);
}
.budget-dist-total .total-label{color:var(--texto-3);font-size:var(--t-s)}
.budget-dist-total .total-value{
  font-family:var(--mono);font-size:var(--t-l);font-weight:var(--peso-fuerte);
  font-variant-numeric:tabular-nums;
}
.budget-dist-total .total-currency{color:var(--texto-3);font-size:var(--t-s)}


/* ---- Desglose por concepto (sublineas de una partida) ---------------------- */
.subline-toggle{
  background:none;border:none;padding:0;margin-right:var(--esp-2);width:1rem;
  color:var(--texto-3);cursor:pointer;font-size:var(--t-xs);
  transition:color var(--micro);
}
.subline-toggle:hover{color:var(--acento)}
.subline-count{
  display:inline-block;font-size:var(--t-xs);color:var(--texto-3);
  background:var(--fondo);padding:2px var(--esp-2);border-radius:var(--r-xs);
  margin-left:var(--esp-1);vertical-align:middle;
}
.budget-subline-row{background:var(--fondo);font-size:var(--t-s)}
.budget-subline-row td{padding-top:var(--esp-1);padding-bottom:var(--esp-1)}
.subline-name{padding-left:calc(var(--esp-4) * 2.5) !important}
.subline-detail{display:block;font-size:var(--t-xs);color:var(--texto-3)}