/* =====================================================================
   REDISEÑO 2026 — bloque PANEL DE ADMINISTRADOR
   #screen-admin: métricas, pestañas (.seg), usuarios, estadísticas,
   auditoría y banner de error. Se carga tras rd-listas.css y antes de
   rd-global.css: los selectores llevan el prefijo #screen-admin para
   ganar por especificidad a las reglas del <style> principal y a las
   reglas planas de rd-global.css.
   Todo valor sale de los tokens de design/tokens.css (color-mix solo
   deriva tintes de tokens). Reutiliza .group / .row / .row-* / .seg / .skel.
   ===================================================================== */

#screen-admin {
  /* neutro para pistas y tramos "sin énfasis" (derivado de Bone White) */
  --admin-neutral: color-mix(in srgb, var(--bone-white) 26%, transparent);
  --admin-track: color-mix(in srgb, var(--bone-white) 10%, transparent);
  --admin-coral-line: color-mix(in srgb, var(--module-advertencia) 34%, transparent);
  --admin-coral-tint: color-mix(in srgb, var(--module-advertencia) 10%, transparent);
}

/* ---------- 1. Métricas: 3 fichas homogéneas ---------- */
#screen-admin .admin-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
#screen-admin .admin-hero-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--inner-glow);
  overflow: hidden;
}
#screen-admin .admin-hero-tile::before { display: none; } /* sin brillo decorativo: una ficha, una superficie */
#screen-admin .admin-hero-icon {
  width: 28px; height: 28px; flex: none;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--performance-blue) 14%, transparent);
  color: var(--performance-blue-text);
}
#screen-admin .admin-hero-num {
  font-family: var(--font-display);
  font-size: var(--fs-title); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  max-width: 100%;
}
/* etiqueta: puede partirse en 2 líneas; el alto mínimo reserva las 2 líneas en todas las fichas */
#screen-admin .admin-hero-label {
  margin-top: var(--sp-1);
  min-height: 2.6em;
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* ---------- 2. Pestañas: selector segmentado ---------- */
#screen-admin .admin-seg { margin-bottom: var(--sp-4); }
#screen-admin .admin-seg .chip {
  flex: 1 1 0; min-width: 0;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
}

/* ---------- 3. Banner de error ---------- */
#screen-admin .admin-error {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--coral-text);
  background: color-mix(in srgb, var(--module-advertencia) 8%, var(--surface-1));
  border: 1px solid var(--admin-coral-line);
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
}
#screen-admin .admin-error[hidden] { display: none; }
#screen-admin .admin-error::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.75V8.5M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.75V8.5M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 4. Cabecera de cada panel: contador + refrescar ---------- */
#screen-admin .admin-pane > .admin-user-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px; margin: 0 0 var(--sp-2);
}
#screen-admin .admin-pane > .admin-user-head .card-cap { margin: 0; min-width: 0; color: var(--text-3); }
#screen-admin .admin-refresh-btn {
  width: 44px; height: 44px; padding: 0; flex: none;
  justify-content: center;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
}
#screen-admin .admin-refresh-btn svg { width: 18px; height: 18px; }
#screen-admin .admin-refresh-btn:active { transform: scale(0.94); }
#screen-admin .admin-refresh-btn:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  #screen-admin .admin-refresh-btn:hover { color: var(--text-1); border-color: var(--performance-blue); }
}

/* ---------- 5. Usuarios ---------- */
/* búsqueda en píldora de 50 px */
#screen-admin .admin-search-wrap { position: relative; margin-bottom: var(--sp-2); color: var(--text-3); }
#screen-admin .admin-search-wrap svg { left: var(--sp-4); width: 16px; height: 16px; }
#screen-admin .admin-search-input {
  display: block; width: 100%; height: 50px; min-height: 50px;
  padding: 0 var(--sp-4) 0 44px;
  font-size: max(16px, var(--fs-body)); /* 16 px: sin zoom automático en iOS */
  color: var(--text-1);
  border-radius: var(--r-pill);
}
#screen-admin .admin-search-input::placeholder { color: var(--text-3); }
#screen-admin .admin-hint { margin: 0 var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: 1.4; color: var(--text-3); }

/* tarjeta de usuario */
#screen-admin .admin-user-card { padding: var(--sp-4); margin-bottom: var(--sp-3); }
#screen-admin .admin-user-top { display: flex; align-items: center; gap: var(--sp-3); }
#screen-admin .admin-avatar {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-1);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
#screen-admin .admin-user-id { flex: 1; min-width: 0; }
#screen-admin .admin-user-name,
#screen-admin .admin-user-mail { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-admin .admin-user-name { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--text-1); }
#screen-admin .admin-user-name.is-empty { font-weight: 500; color: var(--text-3); }
#screen-admin .admin-user-mail { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-3); }

/* insignias existentes (.admin-badge-*): fila que se parte, texto con contraste AA */
#screen-admin .admin-badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
#screen-admin .admin-badge-admin { color: var(--performance-blue-text); }
#screen-admin .admin-badge-user,
#screen-admin .admin-badge-base { color: var(--text-2); }
/* violeta de módulo aclarado: el token puro da ~4.1:1 sobre su tinte a 11 px; así llega a ~6:1 (AA) */
#screen-admin .admin-badge-coach { color: color-mix(in srgb, var(--module-estabilidad) 70%, var(--bone-white)); }

/* controles: rejilla con etiquetas visibles */
#screen-admin .admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
#screen-admin .admin-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
#screen-admin .admin-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
#screen-admin .admin-field-wide { grid-column: 1 / -1; }
#screen-admin .admin-select {
  display: block; width: 100%; min-width: 0; height: var(--hit); min-height: var(--hit);
  padding: 0 var(--sp-8) 0 var(--sp-3);
  font-family: var(--font-body); font-size: max(16px, var(--fs-body)); font-weight: 600;
  color: var(--text-1);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
#screen-admin .admin-select:focus-visible { outline: none; border-color: var(--performance-blue); box-shadow: 0 0 0 3px var(--ring-blue); }
#screen-admin .admin-select option { background: var(--surface-2); color: var(--text-1); }

/* zona destructiva: contorno coral tenue, sin relleno saturado */
#screen-admin .admin-user-actions { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
#screen-admin .admin-delete-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; height: var(--hit); min-height: var(--hit); margin: 0; padding: 0 var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  color: var(--coral-text);
  background: transparent;
  border: 1px solid var(--admin-coral-line);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-strong);
}
#screen-admin .admin-delete-btn:active { transform: scale(0.98); background: var(--admin-coral-tint); }
@media (hover: hover) and (pointer: fine) {
  #screen-admin .admin-delete-btn:hover { background: var(--admin-coral-tint); border-color: var(--module-advertencia); }
}
#screen-admin .admin-delete-btn:focus-visible,
#screen-admin .admin-delete-confirm-btn:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 2px; }
#screen-admin .admin-delete-confirm {
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: color-mix(in srgb, var(--module-advertencia) 7%, var(--surface-1));
  border: 1px solid var(--admin-coral-line);
  border-radius: var(--r-md);
}
#screen-admin .admin-delete-confirm p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
#screen-admin .admin-delete-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
#screen-admin .admin-delete-confirm-actions .chip { flex: 1 1 96px; height: var(--hit); min-height: var(--hit); }
#screen-admin .admin-delete-confirm-btn {
  flex: 1.4 1 128px; height: var(--hit); min-height: var(--hit); padding: 0 var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  color: var(--obsidian-black); background: var(--module-advertencia);
  border: none; border-radius: var(--r-pill);
  transition: transform var(--dur-fast) var(--ease-out-strong), opacity var(--dur-fast) ease;
}
#screen-admin .admin-delete-confirm-btn:active { transform: scale(0.97); }

/* estado vacío y carga */
#screen-admin .admin-empty { margin: 0; padding: var(--sp-8) var(--sp-4); text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }
#screen-admin .admin-skel-line { display: block; height: 12px; width: 62%; }
#screen-admin .admin-skel-line + .admin-skel-line { margin-top: var(--sp-2); }
#screen-admin .admin-skel-line.is-short { width: 38%; }
#screen-admin .admin-skel-avatar { display: block; width: 44px; height: 44px; flex: none; }
#screen-admin .admin-skel-field { height: var(--hit); margin-top: var(--sp-4); border-radius: var(--r-sm); }
#screen-admin .admin-skel-icon { display: block; width: 34px; height: 34px; flex: none; }
#screen-admin .admin-skel-block { min-height: 96px; margin: 0; }
#screen-admin .admin-skel-block.is-tall { grid-column: 1 / -1; min-height: 148px; }

/* ---------- 6. Estadísticas ---------- */
#screen-admin .admin-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#screen-admin .admin-stats-grid > .card { margin: 0; padding: var(--sp-4); }
#screen-admin .admin-donut-card,
#screen-admin .admin-bars-card { grid-column: 1 / -1; padding: var(--sp-5); }
#screen-admin .admin-stats-grid .card-cap { margin: 0 0 var(--sp-3); color: var(--text-3); }

/* fichas numéricas: color por significado (azul = roles, teal = actividad, coral = advertencia) */
#screen-admin .admin-stat .card-cap { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
#screen-admin .admin-stat .card-cap::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--admin-neutral); }
#screen-admin .admin-stat-blue .card-cap::before { background: var(--performance-blue); }
#screen-admin .admin-stat-teal .card-cap::before { background: var(--recovery-teal); }
#screen-admin .admin-stat-warn .card-cap::before { background: var(--module-advertencia); }
#screen-admin .admin-stat { display: flex; flex-direction: column; }
#screen-admin .admin-stat b {
  margin-top: auto; /* cifras alineadas abajo aunque una etiqueta se parta en 2 líneas */
  font-family: var(--font-display); font-size: var(--fs-screen); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
#screen-admin .admin-stat-warn b { color: var(--coral-text); }
#screen-admin .admin-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* donut: el tramo Pro se anima con una propiedad registrada (sin @property cambia de golpe) */
@property --donut-pct { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
#screen-admin .admin-donut-wrap { display: flex; align-items: center; gap: var(--sp-5); }
#screen-admin .admin-donut {
  --donut-pct: 0%;
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--performance-blue) 0 var(--donut-pct), var(--admin-neutral) var(--donut-pct) 100%);
  transition: --donut-pct 700ms var(--ease-out-strong);
}
#screen-admin .admin-donut::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface-1); }
#screen-admin .admin-donut-val {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
#screen-admin .admin-donut-val small { font-size: var(--fs-micro); font-weight: 600; color: var(--text-3); margin-left: 1px; }
#screen-admin .admin-donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
#screen-admin .admin-legend-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2);
}
#screen-admin .admin-legend-item i { width: 10px; height: 10px; margin: 0; border-radius: var(--r-pill); background: var(--admin-neutral); }
#screen-admin .admin-legend-item i.is-pro { background: var(--performance-blue); }
#screen-admin .admin-legend-item b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
#screen-admin .admin-legend-item em { min-width: 3.5ch; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-3); }

/* barras de 8 px */
#screen-admin .admin-bar-row { margin-bottom: var(--sp-4); }
#screen-admin .admin-bar-row:last-child { margin-bottom: 0; }
#screen-admin .admin-bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
#screen-admin .admin-bar-label b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
#screen-admin .admin-bar-track { height: 8px; border-radius: var(--r-pill); background: var(--admin-track); overflow: hidden; }
#screen-admin .admin-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--admin-neutral); }
#screen-admin .admin-bar-fill.is-blue { background: var(--performance-blue); }
#screen-admin .admin-bar-fill.is-teal { background: var(--recovery-teal); }
#screen-admin .admin-bar-fill.is-neutral { background: var(--text-2); }

/* ---------- 7. Auditoría: filas .row dentro de un .group ---------- */
#screen-admin .admin-audit-group { margin-bottom: 0; }
#screen-admin .admin-audit-row { gap: var(--sp-3); animation: riseIn 280ms var(--ease-out-strong) backwards; }
#screen-admin .admin-audit-icon {
  width: 34px; height: 34px; margin: 0; flex: none;
  color: var(--performance-blue-text);
  background: color-mix(in srgb, var(--performance-blue) 14%, transparent);
}
#screen-admin .admin-audit-icon.is-create { color: var(--teal-text); background: color-mix(in srgb, var(--recovery-teal) 14%, transparent); }
#screen-admin .admin-audit-icon.is-delete { color: var(--coral-text); background: var(--admin-coral-tint); }
#screen-admin .admin-audit-icon svg { width: 16px; height: 16px; }
#screen-admin .admin-audit-row .row-title { line-height: 1.3; overflow-wrap: anywhere; }
#screen-admin .admin-audit-row .row-sub { overflow-wrap: anywhere; }
#screen-admin .admin-audit-time { align-self: flex-start; padding-top: 2px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 8. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #screen-admin .admin-hero-tile,
  #screen-admin .admin-user-card,
  #screen-admin .admin-stats-grid > .card,
  #screen-admin .admin-audit-row { animation: none; }
  #screen-admin .admin-donut,
  #screen-admin .admin-bar-fill { transition: none; }
}

/* =====================================================================
   9–13. Rediseño «pro» (rd-pro.js · RdAdmin): tabla de cuentas con
   filtros y Guardar/Cancelar explícitos, métricas reales, embudo,
   retención y valoraciones. En el teléfono cada cuenta es una tarjeta;
   desde 1100 px es una tabla que aprovecha el ancho.
   ===================================================================== */

/* ---------- 9. Barra de búsqueda y filtros ---------- */
#screen-admin .adm-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
#screen-admin .adm-toolbar .admin-search-wrap { grid-column: 1 / -1; margin: 0; }
#screen-admin .adm-filter { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
#screen-admin .adm-filter > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }

/* ---------- 10. Cuentas: tarjeta (teléfono) / fila de tabla (escritorio) ---------- */
#screen-admin .adm-table { display: flex; flex-direction: column; gap: var(--sp-3); }
#screen-admin .adm-row.adm-head { display: none; }
#screen-admin .adm-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--inner-glow);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
#screen-admin .adm-row.is-dirty {
  border-color: color-mix(in srgb, var(--performance-blue) 55%, transparent);
  background: color-mix(in srgb, var(--performance-blue) 6%, var(--surface-1));
}
#screen-admin .adm-row[aria-busy="true"] { opacity: 0.7; }
#screen-admin .adm-cell { min-width: 0; }
#screen-admin .adm-cell-user { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); }
#screen-admin .adm-me { font-weight: 500; color: var(--text-3); }
#screen-admin .adm-cell-date { grid-column: 1 / -1; display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-sm); color: var(--text-2); }
#screen-admin .adm-cell-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
#screen-admin .adm-row > label.admin-field:nth-of-type(3) { grid-column: 1 / -1; } /* «Estado» a lo ancho en el teléfono */
#screen-admin .adm-cell-act { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
#screen-admin .adm-save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#screen-admin .adm-dirty-note { flex: 1 0 100%; margin: 0; min-height: 1.4em; font-size: var(--fs-sm); font-weight: 600; color: var(--performance-blue-text); }
#screen-admin .adm-save-bar .adm-cancel { flex: 1 1 96px; height: var(--hit); min-height: var(--hit); justify-content: center; }
#screen-admin .adm-save-bar .adm-save { flex: 1.4 1 120px; width: auto; height: var(--hit); min-height: var(--hit); margin: 0; padding: 0 var(--sp-4); }
#screen-admin .adm-save-bar button:disabled { opacity: 0.45; cursor: default; transform: none; }
#screen-admin .adm-del { margin: 0; }
#screen-admin .adm-confirm,
#screen-admin .adm-row > .admin-delete-confirm { grid-column: 1 / -1; margin: 0; }
#screen-admin .adm-confirm {
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--performance-blue) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--performance-blue) 40%, transparent);
  border-radius: var(--r-md);
}
#screen-admin .adm-confirm[hidden], #screen-admin .adm-row > .admin-delete-confirm[hidden] { display: none; }
#screen-admin .adm-confirm p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-1); }
#screen-admin .adm-confirm .btn { flex: 1.4 1 128px; width: auto; height: var(--hit); min-height: var(--hit); margin: 0; }

/* ---------- 11. Métricas ---------- */
#screen-admin .admin-stats-grid { grid-template-columns: minmax(0, 1fr); }
#screen-admin .admin-stats-grid > .adm-wide { grid-column: 1 / -1; }
#screen-admin .adm-notice {
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--performance-blue) 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--performance-blue) 35%, transparent);
}
#screen-admin .adm-notice p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-1); overflow-wrap: anywhere; }
#screen-admin .adm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#screen-admin .adm-kpis > .card { margin: 0; padding: var(--sp-4); display: flex; flex-direction: column; }
#screen-admin .adm-kpi .card-cap { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
#screen-admin .adm-kpi .card-cap::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--admin-neutral); }
#screen-admin .adm-kpi-teal .card-cap::before { background: var(--recovery-teal); }
#screen-admin .adm-kpi-blue .card-cap::before { background: var(--performance-blue); }
#screen-admin .adm-kpi-num { font-family: var(--font-display); font-size: var(--fs-screen); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text-1); }
#screen-admin .adm-kpi-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--text-3); }
#screen-admin .adm-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--text-3); }
#screen-admin .adm-foot-warn { margin-top: 0; font-size: var(--fs-sm); color: var(--text-2); }

/* embudo */
#screen-admin .adm-fun-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
#screen-admin .adm-fun-label { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5ch; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
#screen-admin .adm-fun-label b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
#screen-admin .adm-fun-label em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); }
#screen-admin .adm-fun-step .admin-bar-fill { transform-origin: left center; }
#screen-admin .adm-fun-step-note { margin: var(--sp-1) 0 0; font-size: var(--fs-micro); color: var(--text-3); }

/* retención */
#screen-admin .adm-ret-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#screen-admin .adm-ret { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-sm); min-width: 0; }
#screen-admin .adm-ret-label { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--text-2); }
#screen-admin .adm-ret-num { display: block; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--teal-text); }
#screen-admin .adm-ret-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--text-3); }

/* valoraciones */
#screen-admin .adm-rate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
#screen-admin .adm-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-sm); min-width: 0; }
#screen-admin .adm-rate b { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1); }
#screen-admin .adm-rate span { font-size: var(--fs-sm); color: var(--text-2); }
#screen-admin .adm-rate em { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); }
#screen-admin .adm-rate.is-bueno b { color: var(--performance-blue-text); }
#screen-admin .adm-rate.is-muy_bueno b { color: var(--teal-text); }
#screen-admin .admin-stats-grid .admin-bars-card { padding: var(--sp-5); }
#screen-admin .admin-bar-fill { transform-origin: left center; }

/* ---------- 12. Tablet: KPI en 4 columnas ---------- */
@media (min-width: 768px) {
  #screen-admin .adm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #screen-admin .adm-toolbar { grid-template-columns: minmax(0, 1fr) 170px 170px; align-items: end; }
  #screen-admin .adm-toolbar .admin-search-wrap { grid-column: auto; }
}

/* ---------- 13. Escritorio: aprovechar el ancho, tabla de cuentas ---------- */
@media (min-width: 1100px) {
  #screen-admin .screen-pad { max-width: 1240px; }
  #screen-admin .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-admin .admin-stats-grid > .adm-notice,
  #screen-admin .admin-stats-grid > .adm-kpis { grid-column: 1 / -1; }
  #screen-admin .admin-stats-grid > .adm-wide:not(.adm-notice):not(.adm-kpis) { grid-column: auto; }

  #screen-admin .adm-table {
    gap: 0;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  #screen-admin .adm-row {
    grid-template-columns: minmax(200px, 1.7fr) 96px minmax(112px, 0.8fr) minmax(104px, 0.7fr) minmax(124px, 0.85fr) 236px;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
  }
  #screen-admin .adm-row:last-child { border-bottom: 0; }
  #screen-admin .adm-row.is-dirty { box-shadow: inset 3px 0 0 var(--performance-blue); }
  #screen-admin .adm-row.adm-head {
    display: grid;
    padding-top: var(--sp-3); padding-bottom: var(--sp-3);
    background: var(--surface-2);
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-3);
  }
  #screen-admin .adm-cell-user,
  #screen-admin .adm-cell-date,
  #screen-admin .adm-row > label.admin-field:nth-of-type(3),
  #screen-admin .adm-cell-act { grid-column: auto; }
  #screen-admin .adm-cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #screen-admin .adm-cell-date { font-variant-numeric: tabular-nums; }
  #screen-admin .adm-cell-act { flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding-top: 0; border-top: 0; }
  #screen-admin .adm-save-bar { flex-wrap: nowrap; }
  #screen-admin .adm-dirty-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #screen-admin .adm-save-bar .adm-cancel,
  #screen-admin .adm-save-bar .adm-save { flex: 0 0 auto; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  #screen-admin .adm-del { width: var(--hit); padding: 0; flex: none; }
  #screen-admin .adm-del span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #screen-admin .adm-row .admin-select { font-size: max(15px, var(--fs-sm)); }
  #screen-admin .adm-row .admin-avatar { width: 36px; height: 36px; font-size: var(--fs-sm); }
  #screen-admin .adm-confirm, #screen-admin .adm-row > .admin-delete-confirm { margin-bottom: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-admin .adm-row { transition: none; }
  #screen-admin .admin-save-flash { animation: none; }
}