/* Presupuestos: lo propio de la vista. Formularios, modales, líneas, totales y
   botones vienen de finance.css (compartido con Finanzas). */

/* Resumen: una franja con separadores de 1px */
#view-budgets .bud-summary {
  display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 768px) { #view-budgets .bud-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#view-budgets .bud-summary-cell { background: var(--card); padding: 1rem 1.25rem; }
#view-budgets .bud-summary-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
#view-budgets .bud-summary-label .ui-icon { font-size: 0.9375rem; }
#view-budgets .bud-summary-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); margin-top: 0.25rem; }

/* Filtros dentro del panel */
#view-budgets .bud-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1rem 0; margin-bottom: 1rem; }
#view-budgets .bud-search { flex: 1 1 220px; }
#view-budgets .bud-search > .ui-icon {
  position: absolute; left: 0.75rem; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 1rem; color: var(--muted-foreground); pointer-events: none; z-index: 1;
}
#app-layout #view-budgets .bud-search input { padding-left: 2.25rem; }
#app-layout #view-budgets .bud-toolbar .fin-field { padding-left: 0.75rem; padding-right: 2rem; }
#app-layout #view-budgets .bud-toolbar input[type="date"].fin-field { padding-right: 0.5rem; }
#app-layout #view-budgets .bud-toolbar .bud-search input.fin-field { padding-left: 2.25rem; padding-right: 0.75rem; }

/* Margen: punto + cifra */
#view-budgets .bud-margin {
  display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500;
  color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap;
}
#view-budgets .bud-margin::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--tone-neutral-bar); }
#view-budgets .bud-margin.is-good::before { background: var(--tone-good-bar); }
#view-budgets .bud-margin.is-warn::before { background: var(--tone-warn-bar); }
#view-budgets .bud-margin.is-bad::before { background: var(--tone-bad-bar); }
#view-budgets .bud-expired { color: var(--tone-bad); }

/* Estado editable en la tabla: píldora con tono que envuelve al <select> */
#view-budgets .bud-status {
  position: relative; display: inline-flex; align-items: center; border-radius: 999px;
  color: var(--tone-neutral); background: var(--tone-neutral-soft);
}
#view-budgets .bud-status::before {
  content: ''; position: absolute; left: 0.5rem; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 999px; background: var(--tone-neutral-bar); pointer-events: none;
}
#view-budgets .bud-status.is-good { color: var(--tone-good); background: var(--tone-good-soft); }
#view-budgets .bud-status.is-good::before { background: var(--tone-good-bar); }
#view-budgets .bud-status.is-warn { color: var(--tone-warn); background: var(--tone-warn-soft); }
#view-budgets .bud-status.is-warn::before { background: var(--tone-warn-bar); }
#view-budgets .bud-status.is-bad { color: var(--tone-bad); background: var(--tone-bad-soft); }
#view-budgets .bud-status.is-bad::before { background: var(--tone-bad-bar); }
#view-budgets .bud-status.is-info { color: var(--tone-info); background: var(--tone-info-soft); }
#view-budgets .bud-status.is-info::before { background: var(--tone-info-bar); }
#app-layout #view-budgets .bud-status select {
  appearance: none; -webkit-appearance: none; height: 24px; min-height: 0; cursor: pointer;
  padding: 0 1.5rem 0 1.125rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: inherit; font-size: 0.6875rem; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.375rem center; background-size: 0.875rem;
}
#app-layout #view-budgets .bud-status select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Modal */
#view-budgets .bud-modal-title { display: flex; align-items: center; gap: 0.5rem; }
#view-budgets .bud-modal-title .ui-icon { font-size: 1.125rem; color: var(--muted-foreground); }

/* Líneas: ojo · descripción · cant. · precio · costo · margen · total · quitar */
#view-budgets .fin-line.bud-line { grid-template-columns: 34px minmax(0, 1fr) 4.5rem 6.5rem 6.5rem 4.5rem 6.5rem 34px; }
#view-budgets .bud-items { max-height: 18rem; overflow-y: auto; }
#view-budgets .bud-items > .fin-line + .fin-line, #view-budgets .bud-items > .fin-line:first-child { border-top: 1px solid var(--border); }
#view-budgets .bud-line.is-hidden { background: var(--muted); }
#view-budgets .bud-line.is-hidden > :not(.bud-eye) { opacity: 0.55; }
#view-budgets .bud-line-margin { text-align: right; font-size: 0.8125rem; }
#view-budgets .bud-eye[aria-pressed="true"] { color: var(--foreground); }
#view-budgets .fin-line > button:disabled { opacity: 0.35; cursor: not-allowed; }
#view-budgets .bud-hint { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
#view-budgets .bud-hint .ui-icon { font-size: 0.875rem; }
/* coste = dato interno: fondo rayado sutil en vez del naranja */
#app-layout #view-budgets .fin-field.bud-internal {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted-foreground) 8%, transparent) 6px 7px);
}
@media (max-width: 767px) {
  #view-budgets .fin-line.bud-line { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 34px; }
  #view-budgets .bud-line .fin-line-desc { grid-column: 2 / -1; }
  #view-budgets .bud-line-margin { text-align: left; }
  #view-budgets .bud-line > .fin-btn.is-danger { grid-column: 4; }
  #view-budgets .bud-line.fin-line-head { display: none; }
  #view-budgets .bud-items > .fin-line:first-child { border-top: 0; }
}

/* Vista cliente / análisis interno */
#view-budgets .bud-box { padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
#view-budgets .bud-box.is-internal { background: var(--muted); border-style: dashed; }
#view-budgets .bud-box h5 { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.875rem; }
#view-budgets .bud-box h5 .ui-icon { font-size: 1rem; color: var(--muted-foreground); }
#view-budgets .bud-box-rows { max-width: none; margin: 0; }

/* Confirmar conversión */
#view-budgets .bud-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding-top: 1.75rem; }
#view-budgets .bud-confirm h3 { margin-top: 0.5rem; }
#view-budgets .bud-confirm p { font-size: 0.875rem; color: var(--muted-foreground); max-width: 22rem; }

#view-budgets .fin-f > label .ui-icon { font-size: 0.9375rem; color: var(--muted-foreground); }

@media (max-width: 639px) {
  /* filtros a ancho completo, de dos en dos */
  #view-budgets .bud-toolbar > :not(.bud-search) { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
  /* pie: rejilla 2×2 (Guardar · Borrador / Cancelar · Enviar) en vez de tres filas */
  #view-budgets #budget-modal .fin-dialog-foot { display: grid; grid-template-columns: 1fr 1fr; }
  #view-budgets #budget-modal .fin-dialog-foot > div { display: contents; }
  #view-budgets #budget-modal .fin-dialog-foot .fin-btn { width: 100%; }
  #view-budgets #budget-modal .fin-dialog-foot > .fin-btn-ghost { order: 3; }
  #view-budgets #budget-modal .fin-dialog-foot .fin-btn-primary { order: 4; }
}