/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: gastos
   --------------------------------------------------------------------------
   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 de la pestaña: título, recuento y botón de alta ------------ */
.gastos-cab{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--esp-3);margin-bottom:var(--esp-4);
}
.gastos-cab h2{display:flex;align-items:center;gap:var(--esp-2)}

/* ---- Franja de importes resumen (bajo la cinta de indicadores) ----------- */
.gastos-resumen{margin-bottom:var(--esp-4)}
.gastos-resumen .chip strong{color:var(--texto);font-weight:var(--peso-fuerte)}

/* ---- Filtro por fechas: el único control que no cubre .filter-select ----- */
.filter-dates{display:flex;align-items:center;gap:var(--esp-2)}
.filter-date{width:150px}
.date-separator{color:var(--texto-3)}

/* ---- Botón flotante de alta (portal de contraparte) -----------------------
   `--soporte-alto` y `--fab-alto` eran del CSS antiguo y ya no existen: se
   redefine aquí el hueco que deja libre el widget de soporte externo (Encina),
   que se ancla a la misma esquina. */
.gastos-fab{
  position:fixed;right:var(--esp-6);bottom:calc(var(--esp-8) + var(--esp-4));
  width:52px;height:52px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  color:var(--acento-solido-txt);font-size:var(--t-l);
  box-shadow:var(--sombra-btn);z-index:var(--z-cab);
  transition:transform var(--micro),box-shadow var(--micro);
}
.gastos-fab:hover{transform:scale(1.06)}
.gastos-fab:active{transform:scale(.95)}

/* ---- Formulario de alta/edición ------------------------------------------ */

/* El asterisco de obligatorio solo tiene estilo dentro de <label> en
   components.css; el grupo de radios de «Ubicación» usa <legend>. */
.form-group legend.etiqueta-campo .obligatorio{color:var(--mal);text-decoration:none;margin-left:2px}

/* Importe imputable calculado: el dato que resume la sección de importes. */
.imputable-display{
  display:flex;align-items:center;gap:var(--esp-3);margin-top:var(--esp-3);
  padding:var(--esp-3) var(--esp-4);border-radius:var(--r-s);background:var(--acento-suave);
}
.imputable-label{font-size:var(--t-s);color:var(--texto)}
.imputable-value{
  font-family:var(--mono);font-size:var(--t-l);font-weight:var(--peso-fuerte);
  color:var(--acento);font-variant-numeric:tabular-nums;
}

/* Documento ya adjunto (modo edición). */
.document-info{
  display:flex;align-items:center;gap:var(--esp-2);
  padding:var(--esp-3) var(--esp-4);border-radius:var(--r-s);
  background:var(--sup-2);border:1px solid var(--borde);
}
.document-info .doc-icon{font-size:var(--t-l);color:var(--texto-3);display:flex}
.document-info .doc-name{font-size:var(--t-s);color:var(--texto);word-break:break-all}

/* ---- Tabla: recorte del concepto ------------------------------------------
   El texto ya llega recortado desde la plantilla (evita mandar de más al
   HTML), pero conserva el título completo en el atributo `title`. */
.concept-text{display:inline-block;max-width:100%}