/* =============================================================================
   Matrícula V3 · Web — Abonados (suscriptores)
   ============================================================================= */
.ab-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ab-add .vig-input { flex: 1; min-width: 150px; }
.ab-add .vig-input.plate { flex: 0 0 auto; width: 160px; }
.ab-date-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ab-date-lbl .vig-input { width: auto; }

.ab-statusfilter { display: inline-flex; gap: 4px; }
.ab-statusfilter button {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 12px;
}
.ab-statusfilter button:hover { background: var(--white); color: var(--ink); }
.ab-statusfilter button.active { background: var(--titlebar); color: #fff; border-color: var(--titlebar); }

.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ab-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 #fff inset;
}
.ab-card.st-activa   { border-left-color: var(--green); }
.ab-card.st-vencer   { border-left-color: var(--yellow-deep); }
.ab-card.st-expirada { border-left-color: var(--red); }

.ab-top { display: flex; align-items: center; gap: 11px; }
.ab-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ab-identity { flex: 1; min-width: 0; }
.ab-name { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-store { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-status { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.ab-status.activa   { background: #dcfce7; color: #166534; }
.ab-status.vencer   { background: #fef9c3; color: #92400e; }
.ab-status.expirada { background: #fee2e2; color: #991b1b; }

.ab-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 13px; align-items: baseline; }
/* Etiqueta y valor de cada fila deben ser celdas del grid (col1/col2) para que
   respeten el hueco de 12px; envueltos en .ab-row se pegaban. */
.ab-row { display: contents; }
.ab-lbl { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.ab-val { font-weight: 600; color: var(--ink); }
.ab-plate { font-family: var(--mono); font-weight: 800; letter-spacing: .04em; background: var(--titlebar); color: var(--yellow); padding: 2px 9px; border-radius: var(--r-sm); width: fit-content; }

.ab-actions { display: flex; gap: 6px; margin-top: auto; }
.ab-actions .vig-mini { flex: 1; text-align: center; }

@media (max-width: 680px) { .ab-add .vig-input.plate { width: 100%; } }

/* Pestañas Lista / Historial */
.ab-views { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.ab-views button {
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: none; background: transparent; color: var(--ink-soft); padding: 7px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ab-views button:hover { color: var(--ink); }
.ab-views button.active { background: var(--titlebar); color: #fff; }
.ab-vnum { font-size: 11px; font-weight: 800; min-width: 18px; text-align: center; background: rgba(0,0,0,.12); color: inherit; border-radius: 9px; padding: 1px 6px; }
.ab-views button.active .ab-vnum { background: rgba(255,255,255,.22); }

/* Estado "Renovada" (registro antiguo sustituido por uno más nuevo) */
.ab-card.st-renovada { border-left-color: var(--line); opacity: .9; }
.ab-status.renovada { background: var(--panel-2); color: var(--ink-soft); }

/* Historial agrupado por trabajador (plegable) */
.ab-hlist { display: flex; flex-direction: column; gap: 6px; max-width: 920px; }
.ab-hgroup { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ab-hsum { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.ab-hsum::-webkit-details-marker { display: none; }
.ab-hsum:hover { background: var(--panel-2); }
.ab-hname { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-hstore { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ab-hcount { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; flex: 0 0 auto; }
.ab-hchev { flex: 0 0 auto; color: var(--ink-soft); font-size: 12px; transition: transform .15s; }
.ab-hgroup[open] .ab-hchev { transform: rotate(180deg); }
.ab-hbody { border-top: 1px solid var(--line); padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.ab-hrow { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: var(--r-sm); background: var(--white); }
.ab-hperiodo { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-hrow-store { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-hrow .ab-status { margin-left: auto; }

/* Contador de abonados dentro */
.ab-inside { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--steel); border-radius: var(--r-md); margin-bottom: 16px; overflow: hidden; }
.ab-inside.has { border-left-color: var(--green); }
.ab-inside-sum { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; user-select: none; }
.ab-inside-sum::-webkit-details-marker { display: none; }
.ab-inside-sum:hover { background: var(--panel-2); }
.ab-inside-num { font-size: 30px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; line-height: 1; }
.ab-inside.has .ab-inside-num { color: var(--green); }
.ab-inside-lbl { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.ab-inside-reset { margin-left: auto; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-sm); padding: 6px 12px; }
.ab-inside-reset:hover { background: var(--panel-2); }
.ab-inside-chev { color: var(--ink-soft); font-size: 12px; transition: transform .15s; }
.ab-inside[open] .ab-inside-chev { transform: rotate(180deg); }
.ab-inside-body { border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.ab-inside-empty { color: var(--ink-soft); font-size: 13px; padding: 8px 4px; }
.ab-inside-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; background: var(--white); border-radius: var(--r-sm); }
.ab-inside-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ab-inside-since { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }