/* app/public/css/account.css — lote cuenta.
   Cuenta en tres pestañas: Plan y uso · Claves de API · Ajustes.
   Maqueta: mockups/app/cuenta.html (su <style>, sin la tira «Maqueta · vista»).
   Prefijo propio .acc-*; el resto son clases del kit (base.css). Sin capa. */

/* ---- Panel: columna con scroll propio ---- */
.acc-view { display: block; min-height: 0; overflow-y: auto; }
.acc-view:focus { outline: none; }

/* ---- Cabecera y pestañas ---- */
.acc { padding-top: 28px; }
.acc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.acc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgb(var(--c-soft)); font-size: var(--fs-small); min-width: 0; }
.acc-who > span:first-child { overflow-wrap: anywhere; }
.acc-who > span:empty { display: none; }
.acc-tabs { position: sticky; top: 0; z-index: 5; background: rgb(var(--c-bg)); margin-bottom: 28px; }
.acc-tabs [role='tab'] { font-size: var(--fs-ui); padding-inline: 16px; }
[data-panel='account'] [role='tabpanel']:focus { outline: none; }
[data-panel='account'] [role='tabpanel']:focus-visible { outline: 2px solid rgb(var(--c-coral)); outline-offset: 4px; border-radius: var(--r-sm); }

/* ---- Plan y uso ---- */
[data-planview] > .acc-loading { min-height: 22rem; }
.acc-pago { margin-bottom: 20px; }
.acc-pago > .spinner { margin-top: 4px; color: rgb(var(--c-live)); }
.acc-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.acc-plan__main { min-width: 0; }
.acc-use { padding: 20px 24px 8px; }
.acc-use .acc-more { margin-top: 12px; }
.acc-plan__name { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font: 600 1.75rem / 1.1 var(--font-serif); color: rgb(var(--c-text)); }
.acc-plan__name small { font: 400 var(--fs-ui) / 1.3 var(--font-sans); color: rgb(var(--c-soft)); }
.acc-plan__name.is-pro { color: rgb(var(--c-coral)); }
.acc-plan__line { margin-top: 6px; color: rgb(var(--c-soft)); font-size: var(--fs-small); line-height: 1.5; max-width: 44em; }
.acc-plan__line.is-warn { display: flex; gap: 8px; color: rgb(var(--c-warn)); }
.acc-plan__line.is-warn .icon { flex: none; margin-top: 3px; }
.acc-plan__act { display: flex; flex-wrap: wrap; gap: 8px; }

.acc-block { margin-top: 32px; }
.acc-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.acc-h3 { font: 600 1.125rem / 1.25 var(--font-serif); color: rgb(var(--c-text)); }
.acc-h3:focus { outline: none; }
.acc-h3:focus-visible { outline: 2px solid rgb(var(--c-coral)); outline-offset: 3px; border-radius: 4px; }
.acc-block__meta { color: rgb(var(--c-muted)); font-size: var(--fs-xs); }
.acc-block__meta.is-warn { color: rgb(var(--c-warn)); }

.acc-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; }
.acc-meters .meter__note { line-height: 1.45; }
.acc-meters .meter__note.is-warn { color: rgb(var(--c-warn)); }

/* Desplegables «Cómo se cuenta» / «Revocadas» */
.acc-more { margin-top: 16px; }
.acc-more > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; list-style: none;
  color: rgb(var(--c-soft)); font-size: var(--fs-small); border-radius: var(--r-sm);
}
.acc-more > summary::-webkit-details-marker { display: none; }
.acc-more > summary:hover { color: rgb(var(--c-text)); }
.acc-more > summary .icon { transition: transform var(--dur) ease; }
.acc-more[open] > summary .icon { transform: rotate(180deg); }
.acc-more__body { display: grid; gap: 6px; max-width: 46em; padding: 4px 0 4px 22px; color: rgb(var(--c-soft)); font-size: var(--fs-small); line-height: 1.55; }

.acc-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 32px; }
.acc-two > .panel { padding: 20px 24px; }
.acc-two .acc-h3 { margin-bottom: 12px; }
.acc-cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.acc-cmp th, .acc-cmp td { padding: 9px 0; text-align: left; border-top: 1px solid var(--line); vertical-align: baseline; }
.acc-cmp thead th { border-top: 0; padding-top: 0; color: rgb(var(--c-muted)); font: 600 var(--fs-label) / 1.2 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.acc-cmp tbody th { color: rgb(var(--c-soft)); font-weight: 400; padding-right: 12px; }
.acc-cmp td { color: rgb(var(--c-soft)); padding-right: 12px; }
.acc-cmp td:last-child { color: rgb(var(--c-text)); padding-right: 0; }
.acc-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
.acc-pay p { color: rgb(var(--c-muted)); font-size: var(--fs-xs); line-height: 1.5; }
.acc-short { display: none; }
.acc-text { color: rgb(var(--c-soft)); font-size: var(--fs-small); line-height: 1.55; }
.acc-text + .acc-text { margin-top: 8px; }
.acc-text.is-muted { color: rgb(var(--c-muted)); font-size: var(--fs-xs); }
.acc-tester .btn { margin-top: 16px; }
.acc-tester .field-error { margin-top: 8px; }
.acc-chip-gap { margin-right: 8px; }

/* Confirmación en dos pasos, en línea (sustituye a confirm()) */
.acc-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px; border: 1px solid rgb(var(--c-warn) / 0.45); border-radius: var(--r-sm);
  background: rgb(var(--c-panel-2)); color: rgb(var(--c-text)); font-size: var(--fs-small); line-height: 1.5;
}
.acc-confirm p { flex: 1 1 18rem; min-width: 0; }
.acc-confirm .row { flex: none; }
.acc-plan .acc-confirm { flex: 1 1 100%; }
.acc-set__body > .acc-confirm { align-self: stretch; }

/* ---- Claves de API ---- */
.acc-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.acc-sechead .sect-sub { margin-bottom: 0; }
.acc-keyform { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 20px 24px; margin-bottom: 20px; }
.acc-keyform .check { padding-block: 6px 10px; margin-top: 20px; }
.acc-keyform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.acc-keyform__foot .field-help { margin: 0; }
.acc-keyform__foot .acc-kerr { flex: 1 1 100%; margin: 0; }

.acc-conn .panel__head { flex-wrap: wrap; }
.acc-conn__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 46rem; }
.acc-conn__grid > .is-wide { grid-column: 1 / -1; }
.acc-conn .copyfield-value { font-size: 0.875rem; }
.acc-conn__foot { justify-content: flex-start; }
.acc-keynew .copyfield-value { color: rgb(var(--c-text)); border-color: rgb(var(--c-live) / 0.5); }
.acc-keyhint { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; color: rgb(var(--c-soft)); font-size: var(--fs-xs); line-height: 1.45; }
.acc-keyhint .icon { flex: none; margin-top: 1px; color: rgb(var(--c-warn)); }
.acc-keyempty { grid-column: 1 / -1; display: flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: rgb(var(--c-muted)); font-size: var(--fs-small); }
.acc-ctx { font: 400 0.875rem / 1.55 var(--font-mono); color: rgb(var(--c-text)); padding-block: 9px; }
.acc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-small); color: rgb(var(--c-muted)); }
.acc-links a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.acc-status { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--c-muted)); font-size: var(--fs-xs); }

.acc-keys .rows > li { gap: 8px 16px; }
.acc-keys .rows__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.acc-keys .rows__meta { font-family: var(--font-mono); font-size: 0.8125rem; }
.acc-keys .rows__meta span + span::before { content: '·'; margin-inline: 8px; color: rgb(var(--c-muted)); }
.acc-keys .rows > li.is-confirm { background: rgb(var(--c-panel-2)); }
.acc-keys .rows > li .acc-confirm { flex: 1 1 100%; }
.acc-keys .rows--off { margin-top: 8px; }
.acc-keys .rows--off .rows__title { color: rgb(var(--c-muted)); }
.acc-keynote { margin-top: 10px; }

/* ---- Ajustes ---- */
.acc-set { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.acc-set > li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.acc-set > li.acc-set__full { grid-template-columns: minmax(0, 1fr); }
.acc-set__label { color: rgb(var(--c-text)); font-size: var(--fs-ui); font-weight: 500; padding-top: 10px; }
.acc-set__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 44em; }
.acc-set__body > p { color: rgb(var(--c-soft)); font-size: var(--fs-small); line-height: 1.55; }
.acc-set__body > p.is-muted { color: rgb(var(--c-muted)); font-size: var(--fs-xs); }
.acc-set__body .row { --gap: 8px; }
.acc-safe-confirm { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgb(var(--c-panel-2)); }
.acc-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgb(var(--c-text)); font-size: var(--fs-ui); padding-top: 10px; overflow-wrap: anywhere; }
.acc-set__body > p.acc-email { color: rgb(var(--c-text)); font-size: var(--fs-ui); }
.acc-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Táctil a 44 px: .btn-sm y .seg ya lo hacen en base.css (pointer: coarse). */

/* ---- Estrecho ---- */
@media (max-width: 899.98px) {
  .acc-meters { grid-template-columns: 1fr; gap: 20px; }
  .acc-two { grid-template-columns: 1fr; }
  .acc-keyform { grid-template-columns: 1fr; }
  .acc-keyform .check { margin-top: 8px; }
  .acc-conn__grid { grid-template-columns: 1fr; }
  .acc-set > li { grid-template-columns: 1fr; gap: 8px; }
  .acc-set__label { padding-top: 0; }
  .acc-email { padding-top: 0; }
}
@media (max-width: 559.98px) {
  .acc { padding-top: 20px; }
  .acc-tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: calc(var(--gutter) - 8px); margin-bottom: 20px; }
  .acc-tabs [role='tab'] { padding-inline: 10px; }
  .acc-plan, .acc-use, .acc-two > .panel, .acc-keyform { padding: 16px; }
  .acc-plan__act, .acc-plan__act .btn { width: 100%; }
  .acc-pay .btn { width: 100%; }
  .acc-sechead > .btn { width: 100%; }
  .acc-keys .rows > li > .btn { width: 100%; }
  .acc-long { display: none; }
  .acc-short { display: inline; }
  .acc-cmp tbody th { white-space: normal; }
  .acc-conn .copy { min-height: var(--tap); min-width: var(--tap); }
}