/* ===========================================================
   bp-tool — panel de administración (oscuro, redondeado, vivo)
   Todas las reglas están ancladas a .bp-tool para poder
   incrustar este módulo en otra web sin pisar sus estilos.
   =========================================================== */

.bp-tool,
.bp-tool *,
.bp-tool *::before,
.bp-tool *::after {
  box-sizing: border-box;
}

.bp-tool {
  /* --- superficies --- */
  --bp-bg: #211F1A;
  --bp-surface: #322F27;
  --bp-surface-soft: #211F1A;
  --bp-border: rgba(241, 239, 232, 0.08);

  /* --- texto --- */
  --bp-text: #F1EFE8;
  --bp-text-soft: #B4B2A9;
  --bp-text-faint: #888780;

  /* --- acentos semánticos --- */
  --bp-gain: #5DCAA5;
  --bp-gain-strong: #0F6E56;
  --bp-loss: #F09595;
  --bp-loss-strong: #A32D2D;
  --bp-amber: #FAC775;
  --bp-amber-strong: #854F0B;
  --bp-accent: #7F77DD;
  --bp-accent-strong: #534AB7;

  /* --- forma --- */
  --bp-radius-sm: 12px;
  --bp-radius-md: 16px;
  --bp-radius-lg: 20px;
  --bp-radius-xl: 28px;
  --bp-radius-pill: 999px;

  /* --- tipografía --- */
  --bp-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  display: block;
  font-family: var(--bp-font);
  color: var(--bp-text);
  background: var(--bp-bg);
  padding: 28px;
  border-radius: var(--bp-radius-xl);
}

.bp-tool button:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

.bp-tool input:focus,
.bp-tool select:focus,
.bp-tool textarea:focus {
  outline: none;
}

.bp-amount:focus-within {
  box-shadow: 0 0 0 1.5px var(--bp-accent);
}

.bp-row__name:focus {
  background: rgba(127, 119, 221, 0.10);
  border-radius: 8px;
}

.bp-row__category:focus,
.bp-row__category-custom:focus {
  box-shadow: 0 0 0 1.5px var(--bp-accent);
}

.bp-tool button,
.bp-tool input,
.bp-tool select {
  font-family: var(--bp-font);
}

/* ---------- cabecera ---------- */

.bp-tool__header {
  max-width: 1320px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bp-tool__storage-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--bp-text-faint);
}

.bp-tool__storage-note i {
  font-size: 14px;
}

/* ---------- (tarjetas de estadística viven dentro de cada panel de resumen, ver .bp-callout) ---------- */

/* ---------- formulario: rejilla de tarjetas, no una columna estrecha ---------- */

.bp-tool__form {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bp-section {
  border: 0;
  margin: 0;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-xl);
  padding: 20px 22px;
  position: relative;
}

.bp-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--bp-text);
}

.bp-section__title i {
  font-size: 16px;
  color: var(--bp-text-soft);
}

.bp-section__hint {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--bp-text-soft);
}

.bp-required { color: var(--bp-loss); }
.bp-optional { color: var(--bp-text-faint); font-weight: 400; font-size: 12.5px; }

/* ---------- campos simples (dinero actual / mensual / objetivo) ---------- */

.bp-field { margin-top: 14px; }
.bp-field:first-child { margin-top: 4px; }

.bp-field__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 13.5px;
  color: var(--bp-text-soft);
}

.bp-field__label i { font-size: 15px; color: var(--bp-text-faint); }

.bp-field__error {
  margin: 6px 0 0;
  min-height: 16px;
  font-size: 12.5px;
  color: var(--bp-loss);
}

.bp-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bp-surface-soft);
  border-radius: var(--bp-radius-md);
  padding: 9px 14px;
  max-width: 240px;
}

.bp-amount--row {
  max-width: 110px;
  flex: 0 0 auto;
  padding: 7px 12px;
}

.bp-amount__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--bp-text);
  text-align: right;
}

.bp-amount--row .bp-amount__input { font-size: 13.5px; }

.bp-amount__input::placeholder { color: var(--bp-text-faint); }

.bp-amount__suffix {
  font-size: 12.5px;
  color: var(--bp-text-faint);
}

.bp-field[data-invalid="true"] .bp-amount,
.bp-row[data-invalid="true"] .bp-amount,
.bp-row[data-invalid="true"] .bp-row__name {
  box-shadow: inset 0 0 0 1.5px var(--bp-loss);
}

/* ---------- filas de gasto / pérdida / ganancia ---------- */

.bp-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bp-surface-soft);
  border-radius: var(--bp-radius-lg);
  padding: 9px 10px;
  flex-wrap: wrap;
}

.bp-row__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--bp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.bp-row[data-row-type="expense"] .bp-row__icon { background: rgba(180, 178, 169, 0.16); color: var(--bp-text-soft); }
.bp-row[data-row-type="loss"] .bp-row__icon { background: rgba(240, 149, 149, 0.16); color: var(--bp-loss); }
.bp-row[data-row-type="income"] .bp-row__icon { background: rgba(93, 202, 165, 0.16); color: var(--bp-gain); }
.bp-row[data-row-type="extra-income"] .bp-row__icon { background: rgba(133, 183, 235, 0.16); color: #85B7EB; }
.bp-row[data-row-type="subscription"] .bp-row__icon { background: rgba(250, 199, 117, 0.16); color: var(--bp-amber); }
.bp-row[data-row-type="oneoff"] .bp-row__icon { background: rgba(240, 149, 149, 0.14); color: var(--bp-loss); }

/* Row de suscripción: columna para que el hint siempre esté debajo de la línea principal */
.bp-row--sub {
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.bp-row--sub .bp-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* selector de frecuencia en filas de suscripción */
/* wrapper de ancho fijo para el select de frecuencia — necesario porque
   Firefox y Safari ignoran width en <select> dentro de flex */
.bp-row__freq-wrap {
  flex: 0 0 140px;
  min-width: 140px;
  max-width: 140px;
  position: relative;
}

.bp-row__freq-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--bp-amber);
  pointer-events: none;
}

.bp-row__freq {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--bp-radius-pill);
  padding: 5px 26px 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(250, 199, 117, 0.16);
  color: var(--bp-amber);
}

.bp-row__freq option {
  background: var(--bp-surface);
  color: var(--bp-text);
  font-weight: 500;
}

/* etiqueta de coste mensual equivalente, pequeña, bajo la fila.
   min-height asegura que la línea existe incluso cuando está vacía (Mensual),
   así TODOS los rows de suscripción tienen la misma altura. */
.bp-row__freq-hint {
  min-height: 16px;
  margin: 2px 0 0 42px;
  font-size: 11px;
  color: var(--bp-text-faint);
}

.bp-row__name {
  flex: 1 1 140px;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bp-text);
  padding: 4px 2px;
}

.bp-row__name::placeholder { color: var(--bp-text-faint); font-weight: 400; }

.bp-row__category-wrap {
  position: relative;
  flex: 0 0 auto;
}

.bp-row__category {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: var(--bp-radius-pill);
  padding: 5px 26px 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  max-width: 150px;
  background: rgba(180, 178, 169, 0.16);
  color: var(--bp-text-soft);
}

/* el control cerrado sí muestra el color de la categoría (puesto en JS vía
   estilo inline), pero el desplegable abierto debe verse siempre neutro y
   legible — si no, todas las opciones heredan el color de fondo elegido. */
.bp-row__category option {
  background: var(--bp-surface);
  color: var(--bp-text);
  font-weight: 500;
}

.bp-row__category-wrap i {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  pointer-events: none;
  color: inherit;
  opacity: 0.85;
}

.bp-row__category-custom {
  flex: 0 1 150px;
  min-width: 0;
  border: 0;
  border-radius: var(--bp-radius-pill);
  background: var(--bp-bg);
  color: var(--bp-text);
  font-size: 12px;
  padding: 6px 12px;
}

.bp-row__category-custom[hidden] { display: none; }

.bp-row__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--bp-text-faint);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-row__remove:hover { background: rgba(240, 149, 149, 0.14); color: var(--bp-loss); }
.bp-row__remove[disabled] { visibility: hidden; }

.bp-empty-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--bp-text-faint);
}

.bp-empty-hint[hidden] { display: none; }

/* ---------- botones ---------- */

.bp-add-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--bp-accent);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--bp-radius-pill);
  cursor: pointer;
}

.bp-add-btn:hover { background: var(--bp-accent-strong); }
.bp-add-btn i { font-size: 13px; }

.bp-tool__actions {
  grid-column: 1 / -1;
  padding-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bp-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bp-border);
  background: transparent;
  color: var(--bp-text-soft);
  font-size: 13px;
  padding: 11px 16px;
  border-radius: var(--bp-radius-pill);
  cursor: pointer;
}

.bp-clear-btn:hover { border-color: var(--bp-loss); color: var(--bp-loss); }
.bp-clear-btn i { font-size: 14px; }

.bp-export-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--bp-border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bp-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--bp-border);
  background: var(--bp-surface-soft);
  color: var(--bp-text);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--bp-radius-pill);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.bp-export-btn:hover { border-color: var(--bp-accent); }
.bp-export-btn i { font-size: 15px; color: var(--bp-text-soft); }
.bp-export-btn:disabled { opacity: 0.6; cursor: default; }

.bp-export-btn .ti-loader-2 {
  animation: bp-spin 0.8s linear infinite;
}

@keyframes bp-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bp-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--bp-accent);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: var(--bp-radius-pill);
  cursor: pointer;
}

.bp-submit-btn:hover { background: var(--bp-accent-strong); }
.bp-submit-btn i { font-size: 16px; }

/* ---------- resumen ---------- */

.bp-summary {
  max-width: 1320px;
  margin: 14px auto 0;
}

.bp-summary[hidden] { display: none; }

.bp-summary-panel {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-xl);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

.bp-summary-panel + .bp-summary-panel { margin-top: 12px; }
.bp-summary-panel[hidden] { display: none; }

.bp-summary-panel__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bp-summary-panel__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.bp-summary__list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 8px;
  column-gap: 16px;
  font-size: 13.5px;
}

.bp-summary__list dt { color: var(--bp-text-soft); }
.bp-summary__list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  color: var(--bp-text);
}

.bp-summary__list dd.bp-gain { color: var(--bp-gain); }
.bp-summary__list dd.bp-loss { color: var(--bp-loss); }

.bp-callouts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-callout {
  background: var(--bp-surface-soft);
  border-radius: var(--bp-radius-lg);
  padding: 14px 16px;
}

.bp-callout__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bp-text-faint);
}

.bp-callout__label i { font-size: 14px; }

.bp-callout__value {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--bp-text);
}

.bp-callout--gain .bp-callout__value,
.bp-callout--gain .bp-callout__label { color: var(--bp-gain); }
.bp-callout--loss .bp-callout__value,
.bp-callout--loss .bp-callout__label { color: var(--bp-loss); }

.bp-callout__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--bp-text-soft);
}

.bp-callout__note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--bp-border);
  font-size: 11px;
  line-height: 1.4;
  color: var(--bp-text-faint);
}

/* gráficos */

.bp-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
  align-items: stretch;
}

.bp-chart-area {
  background: var(--bp-surface-soft);
  border-radius: var(--bp-radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.bp-chart-area__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bp-chart-area__title {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--bp-text);
}

.bp-chart-area__total {
  margin: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--bp-text-faint);
}

.bp-chart-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.bp-chart-wrap svg { flex: 0 0 auto; width: 130px; height: 130px; }

/* 1 solo gráfico (todo fijo, sin variables): bastante más grande, para no
   dejar la tarjeta medio vacía. Se centra un bloque de tamaño generoso en
   vez de estirar la leyenda a todo el ancho de la tarjeta (queda raro). */
.bp-charts-grid--1 .bp-chart-area { padding: 30px 30px; }
.bp-charts-grid--1 .bp-chart-wrap {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  gap: 36px;
}
.bp-charts-grid--1 .bp-chart-wrap svg { width: 220px; height: 220px; }
.bp-charts-grid--1 .bp-legend { flex: 0 1 240px; }
.bp-charts-grid--1 .bp-legend__item { font-size: 14.5px; }

/* 2 gráficos (una sola variable): el ancho ya está bien a 2 columnas;
   solo se agranda el alto para aprovechar mejor el espacio. */
.bp-charts-grid--2 .bp-chart-area { padding: 22px 22px; }
.bp-charts-grid--2 .bp-chart-wrap svg { width: 155px; height: 155px; }

/* 3 gráficos (las dos variables): el de gastos ocupa arriba el ancho de
   los otros dos + su separación (ver grid-column más abajo), así que
   también recibe un poco más de tamaño para no quedar desproporcionado. */
.bp-charts-grid--3 .bp-chart-area:first-child { padding: 22px 22px; }
.bp-charts-grid--3 .bp-chart-area:first-child .bp-chart-wrap {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.bp-charts-grid--3 .bp-chart-area:first-child .bp-chart-wrap svg { width: 160px; height: 160px; }

.bp-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.bp-legend__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.bp-legend__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--bp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-legend__value {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--bp-text-soft);
}

/* ---------- responsive ---------- */

@media (min-width: 860px) {
  .bp-tool__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bp-summary-panel {
    grid-template-columns: minmax(260px, 360px) 1fr;
  }
}

@media (min-width: 700px) {
  .bp-charts-grid--2,
  .bp-charts-grid--3 {
    grid-template-columns: 1fr 1fr;
  }

  /* 3 gráficos: el fijo (gastos) arriba, ocupando el ancho de los dos
     variables + el hueco entre ellos; los dos variables debajo, en fila. */
  .bp-charts-grid--3 .bp-chart-area:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .bp-tool { padding: 16px 12px; }
  .bp-section { padding: 18px 16px; }
  .bp-summary-panel { padding: 18px 16px; }
  .bp-summary__list { grid-template-columns: 1fr; }
  .bp-summary__list dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-tool * { transition: none !important; animation: none !important; }
}