/* Servicios: what each outside service costs a month. Paid ones first, biggest bill of the month picked on top; the detail opens on tap. */
.services-fresh { display: flex; align-items: center; gap: 10px; margin: 0; color: #8b958f; font-size: 12.5px; white-space: nowrap; }
.services-refresh { padding: 6px 12px; border: 1px solid rgba(16, 32, 26, 0.1); border-radius: 999px; background: #fff; color: #143d2b; font: inherit; font-weight: 600; cursor: pointer; }
.services-refresh:hover { background: #f3f4f1; }
.services-refresh:disabled { color: #8b958f; cursor: default; background: #fff; }

/* One board: the month picked drives the total, the bar and every amount in the list below it. */
.services-board { overflow: hidden; border: 1px solid rgba(16, 32, 26, 0.06); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.03), 0 8px 24px rgba(16, 32, 26, 0.04); }
.services-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 18px 14px; }
.services-total { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.services-total > span { color: #7b867f; font-size: 13px; }
.services-total > strong { color: #10201a; font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.services-months { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 10px; background: #f0f1ee; }
.services-pick { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: #5f6b64; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.services-pick small { color: #8b958f; font-size: 11.5px; font-weight: 500; }
.services-pick:hover { color: #10201a; }
.services-pick[aria-pressed="true"] { background: #fff; color: #10201a; box-shadow: 0 1px 2px rgba(16, 32, 26, 0.08); }
.services-pick:focus-visible { outline: 2px solid #143d2b; outline-offset: 1px; }

/* Each tone is a service: the same in its slice of the bar and its row. */
[data-tone="0"] { --tone: #143d2b; }
[data-tone="1"] { --tone: #3f7a5c; }
[data-tone="2"] { --tone: #8fb98a; }
[data-tone="3"] { --tone: #c79a4b; }
[data-tone="4"] { --tone: #b9603f; }
[data-tone="5"] { --tone: #6f8a9a; }
[data-tone="6"] { --tone: #d8c9a0; }
[data-tone="7"] { --tone: #b7bdb8; }
.services-bars { display: grid; gap: 14px; padding: 0 18px 18px; border-bottom: 1px solid #f0f1ee; }
.services-bars:empty { display: none; }
.services-chart { position: relative; }
.services-chart-total { margin: 0 0 6px; color: #10201a; font-size: 13px; font-weight: 600; }
.services-bar { display: flex; gap: 2px; height: 18px; overflow: hidden; border-radius: 6px; background: #f0f1ee; }
.services-slice { flex: 1 1 0; min-width: 4px; padding: 0; border: 0; background: var(--tone); cursor: pointer; transition: opacity 0.15s ease; }
.services-slice:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #10201a; }
.has-spot .services-slice:not(.is-lit) { opacity: 0.3; }
.services-tip { position: absolute; top: calc(100% + 8px); z-index: 2; display: flex; align-items: baseline; gap: 8px; padding: 7px 11px; border-radius: 8px; background: #10201a; color: #fff; font-size: 12.5px; white-space: nowrap; box-shadow: 0 6px 18px rgba(16, 32, 26, 0.18); transform: translateX(-50%); pointer-events: none; }
.services-tip[hidden] { display: none; }
.services-tip::after { position: absolute; bottom: 100%; left: 50%; border: 5px solid transparent; border-bottom-color: #10201a; transform: translateX(-50%); content: ""; }
.services-tip span { font-variant-numeric: tabular-nums; }
.services-tip-share { color: #a9c4b4; }
.services-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); }
.services-title > .services-swatch { align-self: center; }

.services-list { margin: 0; padding: 0; list-style: none; }
.services-list:empty { display: none; }
.services-h { margin: 0; padding: 16px 18px 6px; border-top: 1px solid #f0f1ee; color: #7b867f; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.services-h[hidden] { display: none; }
.services-row.is-lit .services-summary { background: #f5f8f3; }
.services-row + .services-row { border-top: 1px solid #f0f1ee; }
.services-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 16px; width: 100%; padding: 14px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.services-summary:hover { background: #fafbf9; }
.services-summary:focus-visible { outline: 2px solid #143d2b; outline-offset: -2px; }
.services-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.services-title { display: flex; align-items: baseline; gap: 8px; }
.services-name { font-size: 15px; font-weight: 600; }
.services-plan { color: #8b958f; font-size: 13px; }
.services-use { margin: 0; overflow: hidden; color: #5f6b64; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.services-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.services-amount { color: #10201a; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.services-sub { color: #8b958f; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.services-row[data-kind="free"] .services-summary { padding-top: 11px; padding-bottom: 11px; }
.services-row[data-kind="free"] .services-amount { color: #8b958f; font-size: 14px; font-weight: 500; }
.services-row[data-kind="missing"] .services-amount { color: #a0712a; font-weight: 500; }
.services-chevron { width: 8px; height: 8px; border-right: 1.5px solid #a3aca6; border-bottom: 1.5px solid #a3aca6; transform: rotate(-45deg); transition: transform 0.15s ease; }
.services-summary[aria-expanded="true"] .services-chevron { transform: rotate(45deg); }

.services-setup { margin: -4px 18px 14px; padding: 8px 10px; border-radius: 10px; background: #fbf6ea; color: #5c4a22; font-size: 12.5px; line-height: 1.45; }
.services-setup strong { font-weight: 600; }
.services-detail { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; }
.services-detail[hidden] { display: none; }
.services-detail > .services-use { white-space: normal; }
.services-detail > .services-use-phone { display: none; }
.services-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f7f8f5; color: #3d4a43; font-size: 13px; line-height: 1.45; list-style: none; }
.services-actions { display: flex; gap: 16px; }
.services-link,
.services-edit { padding: 0; border: 0; background: none; color: #143d2b; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.services-link:hover,
.services-edit:hover { text-decoration: underline; }

.services-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #f7f8f5; }
.services-form-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 96px minmax(0, 2fr); gap: 10px; }
.services-field { display: flex; flex-direction: column; gap: 6px; color: #7b867f; font-size: 12.5px; }
.dash .services-field .control { height: 40px; min-height: 40px; margin: 0; }
.services-form-error { margin: 0; }
.services-form-error[hidden] { display: none; }
.services-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dash .services-form-actions .cta,
.dash .services-form-actions .cta-line { width: auto; height: 38px; margin: 0; padding: 0 18px; font-size: 13px; }

@media (max-width: 740px) {
  .services-fresh { margin-top: 10px; }
  .services-summary { gap: 12px; padding: 13px 14px; }
  .services-title { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .services-name { white-space: nowrap; }
  .services-who > .services-use { display: none; }
  .services-detail > .services-use-phone { display: block; }
  .services-setup { margin: -4px 14px 13px; }
  .services-detail { padding: 0 14px 14px; }
  .services-form-grid { grid-template-columns: 1fr 1fr; }
  .services-board-head { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 14px 12px; }
  .services-pick { flex: 1; justify-content: center; }
  .services-bars { padding: 0 14px 16px; }
  .services-h { padding: 14px 14px 6px; }
}