/* ---------- Admin (tema claro) ---------- */
.admin-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:calc(32px + var(--nav-h)) 0 18px}
.admin-head h1{font-size:var(--text-xl);margin-right:auto}
.admin-head select{max-width:220px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}
.kpi{padding:16px}
.kpi b{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--p-medio);color:var(--text-heading);font-variant-numeric:tabular-nums}
.kpi span{font-size:var(--text-sm);color:var(--text-muted)}
.kpi .meta-mini{margin-top:8px;position:relative}
.kpi .meta-mini .marca{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--gray-700);left:70%}
.kpi .meta-lbl{font-size:var(--text-sm);color:var(--text-muted);margin-top:6px;display:block}
.mod{padding:var(--e-6)}          /* módulo de Admin */
.mod h2{font-size:var(--text-md);margin-bottom:12px}
.mod-cola{margin-bottom:40px}
.cola-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cola-head .cnt{font-weight:700;color:var(--text-heading)}
.cola-head select{max-width:200px;margin-left:auto}
.qitem{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--border-subtle);align-items:flex-start}
.qbody{flex:1;min-width:0}
.qmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--text-sm);color:var(--text-muted)}
.qmeta b{color:var(--text-heading);font-size:var(--text-base)}
.qtxt{font-size:var(--text-base);margin:4px 0 10px}
.qbtns{display:flex;gap:10px;flex-wrap:wrap}
.table-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
table.usuarios{width:100%;min-width:600px;border-collapse:collapse;font-size:var(--text-base)}
table.usuarios th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--gray-600);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-subtle);background:var(--gray-50)}
table.usuarios td{padding:12px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
table.usuarios tr:last-child td{border-bottom:0}
table.usuarios .u-mail{font-size:var(--text-sm);color:var(--text-muted)}
.ucards{display:none}
.ucard{padding:14px;margin-bottom:10px}
.ucard b{display:block;color:var(--text-heading)}
.ucard .sub{font-size:var(--text-sm);color:var(--text-muted)}
.barra-rep{display:flex;align-items:center;gap:12px;padding:7px 0}
.barra-rep .lbl{width:46%;min-width:0;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-body)}
.barra-rep .lbl b{color:var(--text-heading)}
.barra-rep .track{flex:1;height:12px;background:var(--gray-100);border-radius:var(--radius-sm);overflow:hidden}
.barra-rep .track i{display:block;height:100%;background:var(--navy-600);border-radius:2px}
.barra-rep .val{width:34px;flex-shrink:0;text-align:right;font-size:var(--text-sm);color:var(--gray-600);
  font-variant-numeric:tabular-nums}
.acceso-denegado{max-width:520px;margin:calc(60px + var(--nav-h)) auto 60px;text-align:center;padding:34px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Panel de administración ----------
   Regla del bloque: ningún componente de aquí escribe tokens primitivos
   (--ink-*, --txt-*, --sup-*, --hairline*, --oro-*). Solo alias, que son
   los que .tema-claro redefine. Un literal rgba() o un token oscuro se ve
   bien en el resto del sitio y se rompe aquí, que es la única pantalla
   clara. */

/* Badges que en la hoja base usan literales oscuros: variante clara.
   Sin esto, .badge-muted y .badge-navy quedan casi invisibles en el panel. */
.tema-claro .badge-muted{background:var(--gray-100);color:var(--text-muted)}
.tema-claro .badge-navy{background:var(--navy-50);color:var(--navy-600)}
.tema-claro .badge-visto{background:var(--warning-100);color:var(--brass-star)}

/* Barra de filtros. Se repite en tres pestañas, así que es un componente
   y no tres bloques de estilos en línea. */
.pf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.pf .input{max-width:200px}
.pf .buscar{max-width:280px;flex:1 1 200px}
.pf .cnt{font-size:var(--text-sm);color:var(--text-muted);margin-left:auto;
  font-variant-numeric:tabular-nums}

/* Tabla del panel. Hereda de table.usuarios y solo ajusta lo que cambia. */
table.tp{width:100%;min-width:660px;border-collapse:collapse;font-size:var(--text-base)}
table.tp th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);text-align:left;padding:11px 14px;background:var(--surface-sunken);
  border-bottom:1px solid var(--border-subtle);white-space:nowrap}
table.tp th.num,table.tp td.num{text-align:right;font-variant-numeric:tabular-nums}
table.tp td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
table.tp tr:last-child td{border-bottom:0}
table.tp .sub{font-size:var(--text-sm);color:var(--text-muted)}
table.tp .tit{color:var(--text-heading);font-weight:var(--p-fuerte)}
table.tp .nres{font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* Filas del desglose de terminados. */
.aten{display:grid;gap:10px}
.aten-fila{display:flex;gap:12px;align-items:center;padding:12px 14px;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card)}
.aten-fila .n{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-muted);
  font-variant-numeric:tabular-nums;flex-shrink:0}
.aten-fila .cuerpo{flex:1;min-width:0}
.aten-fila .cuerpo b{display:block;color:var(--text-heading);font-size:var(--text-base);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aten-fila .cuerpo span{font-size:var(--text-sm);color:var(--text-muted)}
.aten-fila .cifra{text-align:right;flex-shrink:0}
.aten-fila .cifra b{display:block;font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--danger-600);font-variant-numeric:tabular-nums}
.aten-fila .cifra span{font-size:var(--text-xs);color:var(--text-muted)}

/* Celda de avance: número y barra juntos, porque "9 de 16" y la proporción
   se leen distinto y el administrador usa las dos. */
.cav{display:flex;align-items:center;gap:10px}
.cav .n{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--text-sm)}

/* Modal de confirmación. <dialog> nativo: trae foco atrapado, Escape y
   ::backdrop sin una línea de JavaScript ni una dependencia. */
.confirm{border:0;padding:0;background:transparent;max-width:440px;width:calc(100% - 32px)}
.confirm::backdrop{background:var(--overlay)}
.confirm .caja{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-lg)}
.confirm h2{font-size:var(--text-lg);color:var(--text-heading);margin-bottom:8px}
.confirm p{font-size:var(--text-base);color:var(--text-body);margin-bottom:6px}
.confirm .cita{font-size:var(--text-sm);color:var(--text-muted);border-left:2px solid var(--border-strong);
  padding-left:12px;margin:12px 0 4px}
.confirm .btns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* Aviso de resultado. Sin esto una acción denegada no dice nada y parece
   que el botón está roto. aria-live lo anuncia a los lectores de pantalla. */
.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-md);
  background:var(--surface-inverse);color:var(--text-on-inverse);font-size:var(--text-base);
  box-shadow:var(--shadow-lg);max-width:calc(100% - 32px)}
.aviso svg{width:17px;height:17px;flex-shrink:0}
.aviso.error{background:var(--danger-600)}
@media (prefers-reduced-motion:no-preference){
  .aviso{animation:avisoEntra var(--dur-media) var(--ease)}
  @keyframes avisoEntra{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* Rótulo de procedencia. El cliente pidió que el panel no enseñe cifras
   inventadas: las que se ven salen de una siembra determinista y esto lo
   dice en pantalla, además de contar lo que se registró en vivo. */
.origen{font-size:var(--text-sm);color:var(--text-muted);margin:-8px 0 20px}
.origen b{color:var(--text-body);font-weight:var(--p-fuerte)}

@media (min-width:720px){
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  /* Igual que la tabla de usuarios que ya existía: se emiten los dos
     árboles y el CSS los intercambia. Una tabla de ocho columnas dentro de
     un contenedor con scroll pasa la puerta de calidad y sigue siendo
     inservible con el pulgar. */
  .table-wrap{display:none}
  .ucards{display:block}
  .pf .input,.pf .buscar{max-width:none;flex:1 1 100%}
  .pf .cnt{margin-left:0}
  /* La fila de atención lleva título, etiqueta, nota y cifra: en una sola
     línea desborda a 360 px. Se apila y la cifra pasa a leerse en línea. */
  .aten-fila{flex-wrap:wrap;row-gap:6px}
  .aten-fila .cuerpo{flex:1 1 100%;order:2}
  .aten-fila .cuerpo b{white-space:normal}
  .aten-fila .cifra{order:1;text-align:left;margin-left:auto}
  .aten-fila .cifra b{font-size:var(--text-base)}
}