/* ============================================================================
   ANOMALIAS.CSS — capa de página de "Anomalías de sufijo".
   ----------------------------------------------------------------------------
   NO redefine tokens ni reinventa componentes: la pantalla se construye con las
   clases canónicas de Atlas ya existentes en el proyecto:
     · .dtable-card / .dtable-head / .dwrap / .dtable / .pager / .pgbtn   (matriculas.css)
     · .modal / .modal__*                                                  (base.css)
     · .field / .select / .seg / .seg__btn                                 (base.css)
     · .badge--warn / .badge--pos / .toast                                 (pages.css)
   Aquí solo viven: el layout de la barra de filtros, el realce del sufijo, el
   semáforo de estado (.sem, canónico) y el estado vacío (.empty, canónico),
   reproducidos para que la página sea autosuficiente sin cargar el Catálogo.
   ============================================================================ */

/* —— barra de filtros → migrada al canónico .fb-* (index.html; adopta .seg repo-estándar). P5.
   El contador es específico del módulo y se conserva. —— */
.anom-count { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-body); color: var(--text-2); white-space: nowrap; }
.anom-count b { font-family: var(--font-num); font-size: 18px; font-weight: 600; color: var(--text); }

/* —— sufijo: badge ámbar canónico, en cifra mono —— */
.anom-sufijo { font-family: var(--font-num); font-weight: 600; letter-spacing: .03em; }

/* —— clase P&G / Excluida: badge informativo (lee es_pyg del endpoint; sin cálculo en cliente) —— */
.anom-clase { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-pill, 999px); letter-spacing: .02em; white-space: nowrap; }
.anom-clase--pyg  { color: var(--accent-strong); background: var(--accent-weak); }
.anom-clase--excl { color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }

/* la fila no es clicable aquí (la acción es el botón) */
#anomTable.dtable tbody tr { cursor: default; }
.anom-saldo--neg { color: var(--neg); }

/* —— acción por fila: botón primario compacto (estilo Atlas) —— */
.anom-action {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--accent-strong); background: var(--accent-weak);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: background .14s, color .14s;
}
.anom-action:hover { background: var(--accent); color: #fff; }
.anom-action:disabled { opacity: .5; cursor: default; }
.anom-action:disabled:hover { background: var(--accent-weak); color: var(--accent-strong); }

/* —— semáforo de estado (canónico Atlas; reproducido desde catalogo.css) —— */
.sem { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sem__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; position: relative; }
.sem__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; opacity: .18; background: inherit; }
.sem--ok   .sem__dot { background: var(--sem-ok, var(--pos)); }
.sem--warn .sem__dot { background: var(--sem-warn, var(--warn)); }
.sem--ok   { color: var(--pos); }
.sem--warn { color: var(--warn); }

/* —— estado vacío (canónico Atlas; reproducido desde catalogo.css) —— */
.empty { text-align: center; padding: var(--s-6) var(--s-5); color: var(--text-3); display: none; }
.empty__ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; background: var(--pos-bg, var(--accent-weak)); color: var(--pos); display: grid; place-items: center; font-size: 26px; }
.empty__t { font-size: 16px; font-weight: 700; color: var(--text); }
.empty__s { font-size: 13px; color: var(--text-2); margin-top: 6px; }
#anomCard.is-empty .dwrap,
#anomCard.is-empty .pager { display: none; }
#anomCard.is-empty .empty { display: block; }

/* —— modal: campos (sobre .modal canónico) —— */
/* Blindaje del estado abierto (id-scoped): el contenedor .modal ya oculta vía
   visibility, así que mantenemos el panel opaco y animamos solo el transform.
   Evita un bug de transición opacity+visibility que dejaba el panel invisible. */
#anomModal .modal__panel { opacity: 1; transition: transform .2s var(--ease, cubic-bezier(.4,0,.2,1)); }
#anomModal.is-open .modal__panel { transform: translate(-50%, -50%); }
.anom-modal__desc { font-size: 13px; color: var(--text-2); line-height: 1.55; background: var(--warn-bg); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
.anom-modal__desc b { color: var(--text); }
.anom-modal__desc .mono { font-family: var(--font-num); }
.anom-form { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.anom-form label.lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 6px; }
.anom-textarea { width: 100%; font-family: var(--font-sans); font-size: 13.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; resize: vertical; min-height: 90px; }
.anom-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.anom-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; }
.anom-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.anom-modal__foot { display: flex; justify-content: flex-end; gap: 9px; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); }
.anom-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: var(--radius-sm); transition: all .14s; }
.anom-btn--ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.anom-btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.anom-btn--primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.anom-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

@media (max-width: 720px) {
  .anom-count { width: 100%; }
}

/* ============================================================================
   BASE REPRODUCIDA — el proyecto AVISA aún no carga base.css/pages.css del bundle.
   Estas reglas (idénticas al canon Atlas: base.css .field/.modal, pages.css .badge--warn)
   se reproducen aquí para que la página sea AUTOSUFICIENTE, igual que .sem/.empty arriba.
   Si en el futuro se porta base.css al proyecto, estas pueden retirarse (son las mismas).
   ============================================================================ */
.field { display: flex; flex-direction: column; gap: 2px; }
.field__lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.badge--warn { color: var(--warn); background: var(--warn-bg); }

.modal { position: fixed; inset: 0; z-index: 85; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,12,16,.5); opacity: 0; transition: opacity .2s; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-46%); width: 760px; max-width: 94vw; max-height: 86vh; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(0,0,0,.34); display: flex; flex-direction: column; opacity: 0; transition: opacity .2s, transform .2s; }
.modal.is-open .modal__panel { opacity: 1; transform: translate(-50%,-50%); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.modal__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.modal__head h3 { font-size: 17px; font-weight: 700; }
.modal__close { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.modal__body { padding: 0; overflow-y: auto; }

/* Segmento de estado (.seg) y selector (.select): el proyecto SOLO los define scopeados a
   #page-matriculaciones (matriculas.css), por lo que en #page-anomalias salían sin estilo.
   Reproducidos aquí del canon base.css (mismos tokens --emp-*/--select-arrow). */
.seg { display: flex; gap: 2px; padding: 3px; background: var(--emp-track); border: var(--emp-track-border); border-radius: var(--emp-radius); }
.seg__btn { border: 0; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--emp-btn-radius); transition: all .15s; cursor: pointer; }
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active { background: var(--emp-active-bg); color: var(--emp-active-fg); box-shadow: var(--emp-active-shadow); }

.select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); background: var(--surface) var(--select-arrow) no-repeat right 9px center;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 28px 6px 11px; border-radius: var(--radius-sm); min-width: 132px; cursor: pointer;
}
.select:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }

/* ============================================================================
   TABLA — el canon (.dtable-card/.dtable/.pager/.pgbtn) está SCOPEADO a
   #page-matriculaciones en matriculas.css, por lo que en #page-anomalias salía SIN
   estilo (mismo motivo que .seg/.select/.modal de arriba). Reproducido aquí 1:1 con
   los tokens Atlas, scopeado a #page-anomalias.
   ============================================================================ */
#page-anomalias .dtable-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
#page-anomalias .dtable-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; }
#page-anomalias .dtable-head h2 { font-size:15px; font-weight:700; color:var(--text); }
#page-anomalias .dtable-head__meta { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); }
#page-anomalias .dwrap { overflow-x:auto; }
#page-anomalias .dtable { width:100%; border-collapse:collapse; font-size:12.5px; }
#page-anomalias .dtable thead th { position:sticky; top:0; background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--border-strong); user-select:none; }
#page-anomalias .dtable thead th.num { text-align:right; }
#page-anomalias .dtable tbody td { padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--row-border); color:var(--text-2); vertical-align:middle; }
#page-anomalias .dtable tbody td.num { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); }
#page-anomalias .dtable tbody tr { transition:background .12s; }
#page-anomalias .dtable tbody tr:hover { background:var(--row-hover); }
/* "Nombre cuenta" (col 4) es la única que puede ser larga → permitir 2 líneas y acotar ancho */
#page-anomalias .dtable tbody td:nth-child(4) { white-space:normal; max-width:260px; line-height:1.35; color:var(--text); }
#page-anomalias .pager { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-top:1px solid var(--border); flex-wrap:wrap; }
#page-anomalias .pager__info { font-size:12px; color:var(--text-3); font-family:var(--font-num); }
#page-anomalias .pager__ctrls { display:flex; gap:4px; align-items:center; }
#page-anomalias .pgbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; min-width:32px; height:32px; padding:0 12px; border-radius:var(--radius-sm); font-family:var(--font-num); transition:all .12s; cursor:pointer; }
#page-anomalias .pgbtn:hover:not(:disabled) { background:var(--hover); color:var(--text); border-color:var(--border-strong); }
#page-anomalias .pgbtn:disabled { opacity:.4; cursor:not-allowed; }

/* estado RESUELTA (semáforo neutro) + columna de acciones (botones redondos icono-solo) */
.sem--done .sem__dot { background: var(--text-3); }
.sem--done { color: var(--text-3); }
.anom-acciones { white-space:nowrap; }
#page-anomalias .dtable tbody td.anom-acciones { display:flex; gap:6px; justify-content:flex-end; }
.anom-iconbtn {
  width:28px; height:28px; flex:0 0 28px; padding:0; border-radius:50%;
  display:inline-grid; place-items:center; font-size:14px; line-height:1; cursor:pointer;
  color:var(--accent-strong); background:var(--accent-weak);
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  transition:background .14s, color .14s, transform .1s;
}
.anom-iconbtn:hover { background:var(--accent); color:#fff; }
.anom-iconbtn:active { transform:scale(.92); }
.anom-iconbtn.is-on { background:var(--accent); color:#fff; }   /* ya en seguimiento */
.anom-iconbtn--ok { color:var(--pos); background:var(--pos-bg); border-color:color-mix(in srgb, var(--pos) 22%, transparent); }
.anom-iconbtn--ok:hover { background:var(--pos); color:#fff; }
/* tooltip inmediato al pasar el ratón (a la IZQUIERDA del botón → no se recorta en la tabla
   con scroll ni en la columna derecha; mismo nivel vertical de la fila). */
.anom-iconbtn { position:relative; }
.anom-iconbtn::after {
  content: attr(data-tip);
  position:absolute; top:50%; right:calc(100% + 8px); transform:translateY(-50%) translateX(4px);
  background:var(--text); color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
  padding:5px 9px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.22);
  pointer-events:none; opacity:0; transition:opacity .12s, transform .12s; z-index:30;
}
.anom-iconbtn:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }