body.admin-page {
  --bg: #0d0f14;
  --bg-soft: #12151c;
  --panel: #161a23;
  --panel-2: #1d222d;
  --panel-3: #262c39;
  --panel-4: #40454f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f4f8;
  --muted: #9aa3b2;
  --muted-2: #646d7d;
  --accent: #eceff2;
  --shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
  /* Sombra de lo que flota sobre la página (menú «⋯» de una fila), con el tinte azul de la marca. */
  --sombra-flota: 0 12px 28px rgba(14, 27, 44, 0.18);
  --font-body: "Aptos", "IBM Plex Sans", "Segoe UI", sans-serif;
  /* Base del texto del backoffice (diseño antiguo). +1px el 20-oct-2026 (encargo de Javidan: «subir
     1px el tamaño de texto general»); antes heredaba el 16px del navegador. El diseño nuevo lo sube
     por sus tokens --t-fs-* (tria-base.css). */
  font-size: 17px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.025), transparent 24%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
}

body.admin-auth-loading {
  overflow: hidden;
}

body.admin-auth-loading .admin-shell {
  visibility: hidden;
}

/* Sin letrero (24-oct-2026, Javidan 01:08: «Cargando backoffice» nunca, ni la primera vez): solo el fondo. */
body.admin-auth-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.025), transparent 24%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Dentro del panel único (sección del contenedor, 24-oct-2026): NUNCA el «Cargando backoffice...» a pantalla entera.
   El contenedor ya no enseña la sección hasta que está lista (tria-contenedor.js, 7); si aun así se viera antes, mejor
   el fondo limpio que el letrero. Lo marca operator-boot.js con html.tria-en-contenedor. */
html.tria-en-contenedor body.admin-auth-loading::before { content: none; display: none; }

.admin-auth-screen[hidden],
.admin-app[hidden],
.admin-logout[hidden],
.admin-pane[hidden],
.admin-conversation-content[hidden],
.admin-review-content[hidden],
.admin-judge-content[hidden],
.admin-user-content[hidden],
.admin-log-content[hidden],
.admin-conversation-empty[hidden],
.admin-review-empty[hidden],
.admin-judge-empty[hidden],
.admin-user-empty[hidden],
.admin-log-empty[hidden] {
  display: none !important;
}

.admin-page .ghost-button,
.admin-page .pill,
.admin-page .primary-button {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.admin-page .ghost-button:hover,
.admin-page .primary-button:hover,
.admin-page .pill:hover {
  background: rgba(255, 255, 255, 0.095);
}

/* (Los gradientes grises legacy de primary/secondary-button estaban 100% pisados por la
   capa moderna de tokens de más abajo — borrados en la tanda U.) */

.admin-page .compact-panel,
.admin-page .metric-card,
.admin-page .judge-list {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 38%),
    linear-gradient(180deg, rgba(47, 51, 58, 0.98), rgba(34, 37, 43, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 42px rgba(0, 0, 0, 0.22);
}

.admin-page .drawer-eyebrow,
.admin-page .metric-label,
.admin-page .field span {
  color: #9ea5af;
  letter-spacing: 0.12em;
}

.admin-page .sidebar-search input,
.admin-page .field input,
.admin-page .field select,
.admin-page .field textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.admin-page .sidebar-search input::placeholder,
.admin-page .field input::placeholder,
.admin-page .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.admin-page .sidebar-search input:focus,
.admin-page .field input:focus,
.admin-page .field select:focus,
.admin-page .field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}

.admin-clipboard-helper {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.admin-page .sidebar-icon-button {
  color: var(--text);
}

.admin-page .sidebar-icon-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.admin-page .pill.subtle {
  color: #d0d5db;
}

.admin-shell {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 16px;
  min-height: 100vh;
  padding: 20px;
}

.admin-app {
  min-width: 0;
}

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-topbar-copy h1 {
  margin: 6px 0 0;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
  font-weight: 700;
}

.admin-topbar-caption {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--fs-xl);
  line-height: 1.65;
}

.admin-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-link-button {
  text-decoration: none;
}

.admin-status-line {
  margin: 0;
  min-height: 1.3rem;
  color: var(--muted);
}

.admin-auth-screen {
  display: grid;
  place-items: center;
  padding-block: 28px;
}

.admin-auth-card {
  width: min(460px, 100%);
  padding: 28px;
}

.admin-auth-card h2 {
  margin: 6px 0 8px;
  font-size: 1.9rem;
  letter-spacing: -0.04em;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(228px, 252px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  min-width: 0;
}

.admin-nav-panel {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 16px;
  align-self: start;
  width: 100%;
  max-width: 252px;
  min-width: 0;
  padding: 4px 18px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-nav-head {
  display: grid;
  gap: 10px;
  padding: 0 4px 6px;
}

.admin-nav-head h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  letter-spacing: -0.035em;
}

.admin-nav-head p:last-child {
  margin: 0;
  line-height: 1.55;
}

.admin-nav-tabs {
  display: grid;
  gap: 10px;
}

.admin-nav-tab {
  display: grid;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.admin-nav-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.admin-nav-tab.active {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(63, 68, 77, 0.96), rgba(48, 52, 59, 0.96)),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 24px rgba(0, 0, 0, 0.12);
}

.admin-nav-tab-label {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.admin-nav-tab small {
  display: none;
}

.admin-stage {
  min-width: 0;
  width: 100%;
  display: grid;
  align-content: start;
}

.admin-pane {
  display: grid;
  gap: 18px;
  min-width: 0;
  width: 100%;
  padding: 24px;
}

.admin-selection-store[hidden] {
  display: none !important;
}

.admin-pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-pane-header h2 {
  margin: 6px 0 0;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -0.04em;
  line-height: 1.03;
}

.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-metrics-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-cost-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-cost-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-overview-summary {
  display: grid;
  gap: 12px;
}

.admin-meta-sync-card {
  margin-bottom: 16px;
}

.admin-meta-sync-panel,
.admin-meta-sync-overview {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(68, 178, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(42, 47, 55, 0.98), rgba(31, 34, 40, 0.98));
  border: 1px solid rgba(121, 196, 255, 0.24);
}

.admin-meta-sync-panel.state-error,
.admin-meta-sync-overview.state-error {
  border-color: rgba(224, 116, 116, 0.38);
  background:
    radial-gradient(circle at top left, rgba(224, 116, 116, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(48, 41, 43, 0.98), rgba(35, 32, 36, 0.98));
}

.admin-meta-sync-panel.state-stale,
.admin-meta-sync-overview.state-stale {
  border-color: rgba(232, 190, 111, 0.36);
}

.admin-meta-sync-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-meta-sync-head h3,
.admin-meta-sync-head p,
.admin-meta-sync-message,
.admin-meta-sync-foot {
  margin: 0;
}

.admin-meta-sync-head h3 {
  font-size: var(--fs-xl);
}

.admin-meta-sync-head p,
.admin-meta-sync-foot,
.admin-meta-sync-message {
  color: var(--muted);
  line-height: 1.45;
}

.admin-meta-sync-message.is-error {
  color: #f3b8b8;
}

.admin-meta-sync-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #dbeeff;
  background: rgba(121, 196, 255, 0.13);
  border: 1px solid rgba(121, 196, 255, 0.24);
  font-size: var(--fs-2xs);
  font-weight: 850;
}

.admin-meta-sync-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-meta-sync-grid span {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-meta-sync-grid b {
  color: var(--text);
  font-size: var(--fs-xl);
}

.admin-meta-sync-grid small {
  color: var(--muted);
  line-height: 1.25;
}

@media (max-width: 760px) {
  .admin-meta-sync-head {
    flex-direction: column;
  }

  .admin-meta-sync-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-summary-block {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-summary-block h3,
.admin-summary-block p,
.admin-summary-block ul {
  margin: 0;
}

.admin-summary-block ul {
  padding-left: 18px;
  color: var(--muted);
}

.admin-summary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-usage-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
}

.admin-usage-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(72px, 0.6fr));
  gap: 10px;
  align-items: center;
  min-width: 620px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--w045);
  border: 1px solid var(--w1);
  color: var(--text);
}

.admin-usage-head {
  background: transparent;
  border-color: var(--w16);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-summary-links a {
  color: var(--accent);
  text-decoration: none;
}

.admin-summary-links a:hover {
  text-decoration: underline;
}

.admin-conversations-layout {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 16px;
}

.admin-list-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.admin-list-toolbar {
  display: grid;
  gap: 10px;
}

.admin-search {
  display: block;
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.admin-filter-chip:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text);
}

.admin-filter-chip.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--text);
}

.admin-history-list,
.admin-user-list,
.admin-log-list {
  min-height: 0;
  max-height: 64vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.admin-history-item,
.admin-user-item,
.admin-log-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 14px 15px;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.admin-history-item:hover,
.admin-user-item:hover,
.admin-log-item:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.admin-history-item.active,
.admin-user-item.active,
.admin-log-item.active {
  background:
    linear-gradient(180deg, rgba(71, 76, 85, 0.96), rgba(52, 56, 63, 0.96)),
    rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

.admin-history-item strong,
.admin-history-item span,
.admin-history-item small,
.admin-user-item strong,
.admin-user-item span,
.admin-user-item small,
.admin-log-item strong,
.admin-log-item span,
.admin-log-item small {
  display: block;
}

.admin-history-item strong,
.admin-user-item strong,
.admin-log-item strong {
  font-size: var(--fs-lg);
  line-height: 1.3;
}

.admin-history-item span,
.admin-history-item small,
.admin-user-item span,
.admin-user-item small,
.admin-log-item span,
.admin-log-item small {
  color: var(--muted);
}

.admin-history-item span,
.admin-user-item span,
.admin-log-item span {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.admin-history-item small,
.admin-user-item small,
.admin-log-item small {
  margin-top: 8px;
  font-size: var(--fs-xs);
}

.admin-history-meta,
.admin-user-meta,
.admin-log-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px !important;
}

.admin-history-badge,
.admin-user-badge,
.admin-log-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #e7eaee !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 700;
  line-height: 1;
}

.admin-history-badge.quality-apta,
.admin-history-badge.quality-apta_con_ajuste,
.admin-log-badge.level-success,
.admin-user-badge.status-active {
  background: rgba(84, 163, 110, 0.22);
  color: #d9f4df !important;
}

.admin-history-badge.quality-no_apta,
.admin-log-badge.level-error,
.admin-user-badge.status-suspended {
  background: rgba(191, 97, 97, 0.24);
  color: #ffd9d9 !important;
}

.admin-log-badge.level-warning,
.admin-history-badge.judge-revisar,
.admin-user-badge.status-inactive {
  background: rgba(184, 146, 70, 0.24);
  color: #ffe8b0 !important;
}

/* Aviso de ficha sin usuario enlazado: la frase entera, no una pastilla que se sale de la fila. */
.admin-user-item .admin-user-setup-warning {
  display: block;
  max-width: 100%;
}
.admin-user-item .admin-user-setup-warning .admin-user-badge {
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  line-height: 1.35;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.admin-history-badge.judge-reutilizable {
  background: rgba(84, 163, 110, 0.22);
}

.admin-history-badge.judge-no_apta {
  background: rgba(191, 97, 97, 0.24);
}

.admin-history-badge.feedback-ok {
  background: rgba(84, 163, 110, 0.18);
  color: #d9f4df !important;
}

.admin-history-badge.feedback-warning {
  background: rgba(191, 97, 97, 0.2);
  color: #ffd9d9 !important;
}

.admin-conversation-view,
.admin-form-stage {
  display: grid;
  gap: 16px;
}

.admin-empty-state {
  display: grid;
  place-items: center;
  min-height: 320px;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

.admin-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-detail-heading {
  display: grid;
  gap: 8px;
}

.admin-detail-header h2 {
  margin: 4px 0 0;
  font-size: 1.52rem;
  letter-spacing: -0.04em;
}

.admin-detail-pills {
  gap: 8px;
}

.admin-detail-summary,
.admin-selected-card,
.admin-form-panel {
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-detail-summary {
  margin: 0;
  line-height: 1.72;
}

.admin-selected-card {
  display: grid;
  gap: 10px;
}

.admin-selected-card h3,
.admin-selected-card p {
  margin: 0;
}

.admin-selected-summary {
  line-height: 1.72;
}

.admin-quality-guide {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(110, 231, 183, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.2);
}

.admin-quality-guide strong {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8fff0;
}

.admin-quality-guide div {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.admin-quality-guide b {
  color: #ffffff;
}

/* TRIA propone qué calidad marcar para Meta (24-oct-2026). Caja discreta, azul de marca #1E3F80 (info). */
.admin-meta-suggested {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(30, 63, 128, 0.12);
  border: 1px solid rgba(30, 63, 128, 0.42);
  border-left: 3px solid #1e3f80;
}

.admin-meta-suggested strong {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cdddff;
}

.admin-meta-suggested-head {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
}

.admin-meta-suggested-why {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.admin-meta-suggested-conf {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-2xs);
}

.admin-meta-suggested-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-selected-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-review-decision-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-review-decision-card h3 {
  margin: 0 0 6px;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
}

.admin-review-decision-card h3[data-quality="apta"],
.admin-review-decision-card h3[data-quality="apta_con_ajuste"] {
  color: #d9f4df;
}

.admin-review-decision-card h3[data-quality="debil"] {
  color: #ffe8b0;
}

.admin-review-decision-card h3[data-quality="no_apta"] {
  color: #ffd9d9;
}

.admin-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.admin-tag-row button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 760;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.admin-tag-row button:hover {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.admin-tag-row button.active {
  color: #151618;
  background: rgba(236, 239, 242, 0.92);
  border-color: rgba(255, 255, 255, 0.34);
}

.admin-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-meta-card,
.admin-focus-card,
.admin-role-card {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-meta-card span,
.admin-focus-card span,
.admin-role-card span {
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admin-meta-card strong,
.admin-focus-card strong {
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.admin-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-meta-lead-item {
  gap: 9px;
}

.admin-meta-lead-item.needs-contact,
.admin-meta-lead-item.needs-quality {
  border-color: rgba(226, 165, 65, 0.26);
  background: linear-gradient(180deg, rgba(226, 165, 65, 0.08), rgba(255, 255, 255, 0.035));
}

.admin-meta-lead-item.ready-to-send {
  border-color: rgba(79, 145, 214, 0.22);
}

.admin-meta-lead-item.signal-sent {
  border-color: rgba(48, 181, 92, 0.24);
}

.admin-meta-lead-item.signal-error {
  border-color: rgba(214, 81, 81, 0.32);
}

.admin-meta-lead-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.admin-meta-lead-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-meta-lead-row .admin-history-badge {
  justify-self: start;
  max-width: 100%;
}

.admin-meta-operational-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 850;
}

.admin-meta-signal-badge {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-2xs);
  font-weight: 800;
}

.admin-meta-signal-badge.state-sent {
  color: #b8f5cd;
  background: rgba(48, 181, 92, 0.14);
  border-color: rgba(48, 181, 92, 0.28);
}

.admin-meta-signal-badge.state-pending,
.admin-meta-signal-badge.state-not_actionable {
  color: #ffe0a3;
  background: rgba(226, 165, 65, 0.13);
  border-color: rgba(226, 165, 65, 0.26);
}

.admin-meta-signal-badge.state-error {
  color: #ffd0d0;
  background: rgba(214, 81, 81, 0.14);
  border-color: rgba(214, 81, 81, 0.32);
}

.admin-meta-signal-badge.state-skipped {
  color: #d5dce8;
  background: rgba(124, 133, 150, 0.16);
  border-color: rgba(124, 133, 150, 0.28);
}

.admin-meta-link {
  color: var(--accent);
  text-decoration: none;
}

.admin-meta-link:hover {
  text-decoration: underline;
}

.admin-focus-card-wide {
  grid-column: span 2;
}

.admin-feedback-panel {
  display: grid;
}

.admin-control-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-control-card {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-control-card span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admin-control-card strong {
  font-size: var(--fs-lg);
  line-height: 1.35;
}

.admin-control-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.admin-control-card.needs-review {
  border-color: rgba(191, 97, 97, 0.34);
  background: rgba(191, 97, 97, 0.08);
}

.admin-control-card.is-ready {
  border-color: rgba(84, 163, 110, 0.28);
  background: rgba(84, 163, 110, 0.07);
}

.admin-transcript {
  display: grid;
  gap: 12px;
}

.admin-transcript-item {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

.admin-transcript-item[data-role="assistant"] {
  background: rgba(255, 255, 255, 0.075);
}

.admin-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.admin-transcript-role {
  font-weight: 700;
  color: var(--text);
}

.admin-transcript-body {
  color: var(--text);
  line-height: 1.7;
}

.admin-transcript-body p,
.admin-transcript-body ul,
.admin-transcript-body ol {
  margin: 0;
}

.admin-transcript-body ul,
.admin-transcript-body ol {
  padding-left: 18px;
}

.admin-transcript-feedback {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.admin-transcript-feedback strong {
  color: var(--text);
}

.admin-transcript-feedback p {
  margin: 0;
  color: var(--text);
}

.admin-transcript-feedback small {
  color: var(--muted-2);
}

.admin-transcript-feedback.is-positive {
  border-color: rgba(84, 163, 110, 0.32);
  background: rgba(84, 163, 110, 0.08);
}

.admin-transcript-feedback.is-negative {
  border-color: rgba(191, 97, 97, 0.34);
  background: rgba(191, 97, 97, 0.08);
}

.admin-user-hero {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.admin-user-avatar {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #50555f, #3b3f47);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f7f8fa;
}

.admin-user-hero-copy {
  min-width: 0;
}

.admin-user-hero-copy h3 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.admin-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-field-span-2 {
  grid-column: span 2;
}

.admin-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.admin-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-password-reset-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.admin-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-copy-button {
  min-width: 82px;
  justify-content: center;
  padding-inline: 14px;
}

.admin-copy-button.is-success {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.admin-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-role-card h3,
.admin-role-card p {
  margin: 0;
}

.admin-role-card h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.admin-role-card p {
  color: var(--muted);
  line-height: 1.6;
}

.admin-role-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-role-card.active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.admin-log-detail {
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}

.admin-log-detail.is-empty {
  color: var(--muted);
}

.admin-improvement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-improvement-hero {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 44%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-improvement-hero h3 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.05em;
}

.admin-improvement-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-improvement-step {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-improvement-step span,
.admin-breakdown-list span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-improvement-step strong {
  font-size: 1.55rem;
  line-height: 1;
}

.admin-improvement-step small {
  color: var(--muted);
}

.admin-operator-audit-block {
  gap: 16px;
}

.admin-operator-audit-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-operator-audit-lane {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-operator-audit-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-operator-audit-list {
  display: grid;
  gap: 10px;
}

.admin-operator-audit-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-operator-audit-card > span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.22);
  color: #a7f3d0;
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-operator-audit-card strong {
  line-height: 1.35;
}

.admin-operator-audit-context {
  display: grid !important;
  gap: 7px !important;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-operator-audit-context-row {
  display: grid;
  gap: 3px;
  margin: 0;
}

.admin-operator-audit-context-row b {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-3xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-operator-audit-context-row span {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.38;
}

.admin-operator-audit-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-operator-audit-card small {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
}

.admin-operator-audit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.admin-operator-audit-actions .ghost-button {
  min-height: 34px;
  padding: 8px 10px;
  font-size: var(--fs-xs);
}

.admin-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-breakdown-list {
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-breakdown-list p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--text);
}

.admin-breakdown-list em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.admin-export-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-export-guide span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 760;
}

.admin-quality-results {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.admin-quality-case {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-quality-case.is-pass {
  border-color: rgba(166, 214, 179, 0.34);
}

.admin-quality-case.is-fail {
  border-color: rgba(255, 132, 132, 0.38);
}

.admin-quality-case > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-quality-case h4,
.admin-quality-case p,
.admin-quality-case ul {
  margin: 0;
}

.admin-quality-case h4 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.admin-learned-rules-block {
  gap: 14px;
}

.admin-learned-rules-head,
.admin-rule-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-learned-rules-head h3 {
  margin-bottom: 4px;
}

.admin-rule-stats,
.admin-learned-rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-rule-stats span,
.admin-learned-rule-meta small,
.admin-learned-rule-card > div:first-child > span,
.admin-rule-suggestion-card > span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.065);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-rule-stats span,
.admin-learned-rule-meta small {
  padding: 8px 10px;
}

.admin-rule-suggestion-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-rule-suggestion-card > span,
.admin-learned-rule-card > div:first-child > span {
  padding: 7px 9px;
}

.admin-rule-suggestion-card p {
  color: var(--text);
  line-height: 1.6;
}

.admin-rule-suggestion-card .ghost-button,
.admin-rule-actions .ghost-button {
  justify-self: start;
  min-height: 34px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
}

.admin-learned-rule-list {
  display: grid;
  gap: 10px;
}

.admin-learned-rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-learned-rule-card h4 {
  margin: 10px 0 8px;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.admin-learned-rule-card p {
  color: var(--text);
  line-height: 1.6;
}

.admin-learned-rule-card.status-active {
  border-color: rgba(236, 242, 248, 0.3);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.055);
}

.admin-learned-rule-card.status-archived {
  opacity: 0.66;
}

.admin-learned-rule-meta {
  grid-column: 1 / -1;
}

.admin-qobrix-unknown-list {
  display: grid;
  gap: 12px;
}

.admin-qobrix-unknown-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(72, 176, 220, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(72, 176, 220, 0.24);
}

.admin-qobrix-unknown-head,
.admin-qobrix-unknown-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-qobrix-unknown-head h3 {
  margin: 4px 0 0;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.admin-qobrix-unknown-message {
  margin: 0;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
}

.admin-qobrix-unknown-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.admin-qobrix-unknown-meta span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-escalation-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(197, 101, 101, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-inline-filter {
  min-width: 180px;
}

.admin-escalation-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-escalation-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.admin-escalation-stats b {
  color: var(--text);
}

.admin-escalation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.admin-escalation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-escalation-card.priority-alta {
  border-color: rgba(197, 101, 101, 0.52);
  background: rgba(197, 101, 101, 0.08);
}

.admin-escalation-card.priority-media {
  border-color: rgba(201, 151, 54, 0.48);
  background: rgba(201, 151, 54, 0.06);
}

.admin-escalation-card h4,
.admin-escalation-card p {
  margin: 0;
}

.admin-escalation-card h4 {
  margin-top: 4px;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.admin-escalation-card p {
  color: rgba(244, 245, 247, 0.78);
  line-height: 1.45;
}

.admin-escalation-meta {
  min-width: 116px;
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
  color: var(--muted);
}

.admin-escalation-meta strong {
  color: var(--text);
}

.admin-escalation-action {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-escalation-request-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-escalation-request-state span {
  font-weight: 800;
  color: var(--text);
}

.admin-escalation-request-state small {
  color: var(--muted);
}

.admin-escalation-request-state.state-overdue {
  border-color: rgba(197, 101, 101, 0.42);
  background: rgba(197, 101, 101, 0.08);
}

.admin-escalation-request-state.state-closed {
  border-color: rgba(83, 176, 127, 0.38);
  background: rgba(83, 176, 127, 0.08);
}

.admin-escalation-request {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 34px;
  padding: 0 14px;
  font-size: var(--fs-sm);
}

.admin-escalation-close {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.admin-escalation-close .field {
  min-width: min(220px, 100%);
}

.admin-escalation-close-button {
  min-height: 38px;
}

.admin-daily-summary-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 36%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-daily-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.75fr) minmax(240px, 0.95fr);
  gap: 12px;
}

.admin-daily-summary-main,
.admin-daily-summary-actions,
.admin-daily-summary-users {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-daily-summary-main > span,
.admin-daily-summary-main small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.admin-daily-summary-main > strong {
  font-size: var(--fs-2xl);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.admin-daily-summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-daily-summary-stats div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
}

.admin-daily-summary-stats span,
.admin-daily-summary-actions h4,
.admin-daily-summary-users h4 {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-daily-summary-stats strong {
  font-size: 1.25rem;
}

.admin-daily-summary-actions ol,
.admin-daily-summary-users ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(244, 245, 247, 0.86);
  line-height: 1.5;
}

.admin-daily-summary-actions li,
.admin-daily-summary-users li {
  margin: 0 0 6px;
}

.admin-followup-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 6-sep-2026, zona `diseno`. Las once tarjetas de asesor abiertas sumaban 4.914 px de los 11.160
   de «Seguimiento» —12,4 pantallas de scroll y ni una sección que se pudiera cerrar—, contando por
   tercera vez lo que ya dicen la tabla de control y el panel de detalle. Se pliegan.
   El rótulo mantiene a la vista lo que hace falta para ELEGIR a quién abrir: quién es, cómo va y
   su riesgo. Plegar no puede esconder la decisión, solo el detalle. */
.admin-followup-card-fold {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.admin-followup-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background 0.18s ease;
}

.admin-followup-card-summary::-webkit-details-marker { display: none; }
.admin-followup-card-summary:hover { background: rgba(255, 255, 255, 0.05); }
.admin-followup-card-summary h3 { margin: 2px 0 0; }

/* El color del estado lo daba el BORDE de la tarjeta. Plegada, la tarjeta no se ve, así que el
   borde y el tinte pasan al contenedor con los MISMOS valores: si no, un asesor en crítico se
   leía igual que uno en atención — que es justo lo que hay que distinguir de un vistazo. */
.admin-followup-card-fold.status-critico {
  border-color: rgba(197, 101, 101, 0.45);
  background: rgba(197, 101, 101, 0.07);
}

.admin-followup-card-fold.status-atencion,
.admin-followup-card-fold.status-revision {
  border-color: rgba(201, 151, 54, 0.42);
  background: rgba(201, 151, 54, 0.055);
}

.admin-followup-card-fold.status-ok {
  border-color: rgba(47, 143, 107, 0.36);
}

/* Dentro del plegable la tarjeta ya no necesita su propio marco. */
.admin-followup-card-fold .admin-followup-card {
  border: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.admin-followup-card.status-critico {
  border-color: rgba(197, 101, 101, 0.45);
  background: rgba(197, 101, 101, 0.07);
}

.admin-followup-card.status-atencion,
.admin-followup-card.status-revision {
  border-color: rgba(201, 151, 54, 0.42);
  background: rgba(201, 151, 54, 0.055);
}

.admin-followup-card.status-ok {
  border-color: rgba(47, 143, 107, 0.36);
}

.admin-followup-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-followup-card h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.admin-followup-risk {
  min-width: 46px;
  display: grid;
  gap: 4px;
  place-items: center;
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-followup-risk span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-followup-risk strong {
  font-size: var(--fs-2xl);
}

.admin-followup-table-wrap {
  overflow-x: auto;
  min-width: 0;
}

/* Tabla de seguimiento MIGRADA a data-table (sistema de diseño): el aspecto (th, td, zebra,
   enlaces) lo da data-table; aquí solo conservamos el min-width para el scroll horizontal de
   sus 7 columnas. La clase propia admin-followup (tabla) se eliminó: baja la deuda de diseño. */
.admin-followup-table-wrap .data-table {
  min-width: 920px;
}

.admin-followup-escalation-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.admin-followup-rule {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-followup-rule.priority-alta {
  border-color: rgba(197, 101, 101, 0.5);
}

.admin-followup-rule.priority-media {
  border-color: rgba(201, 151, 54, 0.45);
}

.admin-followup-rule span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-followup-rule strong {
  font-size: var(--fs-md);
}

.admin-followup-rule p {
  margin: 0;
  color: rgba(244, 245, 247, 0.76);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.admin-agenda-dashboard {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(360px, 1fr);
  gap: 14px;
}

.admin-agenda-priority-card,
.admin-agenda-work-card {
  min-width: 0;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.1), transparent 38%),
    rgba(255, 255, 255, 0.045);
}

.admin-agenda-priority-card h3 {
  margin: 10px 0 8px;
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  line-height: 1.06;
}

.admin-agenda-priority-card p {
  margin: 0;
  color: rgba(244, 245, 247, 0.74);
  font-weight: 750;
}

.admin-agenda-priority-head,
.admin-agenda-priority-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.admin-agenda-priority-head strong {
  color: rgba(244, 245, 247, 0.92);
  font-size: var(--fs-lg);
}

.admin-agenda-priority-actions {
  margin-top: 16px;
  justify-content: flex-start;
}

/* 5 columnas: los 10 bloques caben en 2 filas. Con 4 columnas serían 3 filas y
   el alto ganado al retirar la rejilla pasiva se perdería otra vez (zona `diseno`,
   14-ago). Los breakpoints de abajo (2 y 1 columna) siguen mandando en pantallas
   estrechas. */
.admin-agenda-workblocks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

/* ═══ Sección PLEGABLE (.admin-fold) — componente canónico ═══════════════════════
   Para bloques de CONSULTA que no exigen decisión y que, abiertos, empujan lo
   accionable fuera de la vista (caso Director: 4 bloques sumaban ~9.000 px).
   Es el único plegable de secciones del sistema: reutilizarlo, no crear otro.
   Uso:  <details class="admin-fold">
           <summary class="admin-fold-summary">
             <span class="admin-fold-title">Título</span>
             <span class="admin-fold-hint">De qué va</span>
           </summary>
           <div class="admin-fold-body"> … </div>
         </details>
   Añadir el atributo `open` si debe empezar desplegado.                          */
.admin-fold {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 14px;
  overflow: hidden;
}

.admin-fold-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  transition: background 0.18s ease;
}

.admin-fold-summary::-webkit-details-marker { display: none; }

.admin-fold-summary:hover { background: rgba(255, 255, 255, 0.045); }

.admin-fold-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.admin-fold-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  min-width: 0;
}

/* Flecha propia (el marcador nativo se oculta arriba): gira al abrir. */
.admin-fold-summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.admin-fold[open] > .admin-fold-summary::after { transform: rotate(-135deg); }

.admin-fold[open] > .admin-fold-summary {
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

.admin-fold-body { padding: 16px 18px 18px; }

@media (max-width: 760px) {
  .admin-fold-summary { padding: 12px 14px; }
  .admin-fold-body { padding: 12px 14px 14px; }
}

.admin-agenda-workblock {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 13px 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 245, 247, 0.9);
  text-align: left;
  cursor: pointer;
}

.admin-agenda-workblock:hover,
.admin-agenda-workblock.active {
  border-color: rgba(125, 211, 252, 0.42);
  background: rgba(14, 116, 144, 0.2);
}

.admin-agenda-workblock span,
.admin-agenda-workblock small {
  display: block;
}

.admin-agenda-workblock span {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Reserva 2 líneas: etiquetas como "Primer contacto" o "Revisión calidad" se
     parten y dejaban los números de la fila a alturas distintas. Con la altura
     fija, todos los números quedan alineados entre sí. */
  min-height: 2.2em;
}

.admin-agenda-workblock strong {
  display: block;
  margin: 7px 0 3px;
  font-size: 1.45rem;
  line-height: 1;
}

.admin-agenda-workblock small {
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.25;
}

.pill.danger {
  color: #fee2e2;
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.34);
}

.admin-agenda-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(320px, 0.75fr) minmax(190px, 0.4fr) minmax(190px, 0.42fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-agenda-date-actions,
.admin-agenda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-agenda-date-actions .ghost-button,
.admin-agenda-actions .ghost-button,
.admin-agenda-actions .admin-link-button {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 850;
}

.admin-agenda-day-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.055), transparent 36%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-agenda-editor {
  border-color: rgba(125, 211, 252, 0.28);
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.045);
}

.admin-agenda-complete-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(110, 231, 183, 0.24);
  background:
    radial-gradient(circle at top left, rgba(110, 231, 183, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.045);
}

.admin-agenda-result-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-agenda-result-chip {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 9px 12px;
  color: rgba(244, 245, 247, 0.9);
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 850;
  cursor: pointer;
}

.admin-agenda-result-chip:hover,
.admin-agenda-result-chip.active {
  color: #ecfdf5;
  border-color: rgba(110, 231, 183, 0.48);
  background: rgba(34, 197, 94, 0.18);
}

.admin-agenda-quality-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(251, 191, 36, 0.06);
}

.admin-agenda-quality-section[hidden] {
  display: none;
}

.admin-agenda-editor .admin-form-footer {
  align-items: center;
}

.admin-agenda-table-wrap {
  overflow-x: auto;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-agenda-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.admin-agenda-table th,
.admin-agenda-table td {
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(244, 245, 247, 0.88);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.admin-agenda-table th {
  border-top: 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-agenda-table a {
  color: #93c5fd;
  font-weight: 850;
  text-decoration: none;
}

.admin-agenda-table a:hover {
  text-decoration: underline;
}

.admin-agenda-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.admin-agenda-row.tone-overdue {
  background: rgba(197, 101, 101, 0.07);
}

.admin-agenda-row.tone-today {
  background: rgba(201, 151, 54, 0.055);
}

.admin-agenda-row.tone-done {
  opacity: 0.72;
}

.admin-agenda-row.tone-cancelled {
  opacity: 0.55;
}

@media (max-width: 1280px) {
  .admin-agenda-dashboard {
    grid-template-columns: 1fr;
  }

  .admin-agenda-workblocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-agenda-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-agenda-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-agenda-workblocks {
    grid-template-columns: 1fr;
  }

  .admin-agenda-priority-card,
  .admin-agenda-work-card {
    padding: 14px;
    border-radius: var(--radius-xl);
  }

  .admin-agenda-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-agenda-date-actions .ghost-button {
    flex: 1 1 120px;
  }
}

@media (max-width: 1180px) {
  .admin-daily-summary {
    grid-template-columns: 1fr;
  }
}

.admin-rule-actions {
  align-self: start;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.judge-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.judge-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.judge-decision-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.judge-decision-card span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.judge-decision-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.judge-head,
.judge-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.judge-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.judge-score strong {
  font-size: 2rem;
  line-height: 1;
}

.judge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.judge-summary,
.judge-rationale {
  margin: 0;
  line-height: 1.68;
}

.judge-empty {
  color: var(--muted);
}

.mini-tag {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.history-empty {
  color: var(--muted);
  padding: 18px 14px;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

@media (max-width: 1320px) {
  .admin-metrics-grid-six,
  .admin-cost-grid,
  .admin-cost-filters,
  .admin-meta-grid,
  .admin-focus-grid,
  .admin-control-panel,
  .admin-role-grid,
  .admin-user-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-focus-card-wide {
    grid-column: span 2;
  }

  .admin-conversations-layout {
    grid-template-columns: 1fr;
  }

  .admin-history-list,
  .admin-user-list,
  .admin-log-list {
    max-height: 36vh;
  }
}

@media (max-width: 1100px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-nav-panel {
    position: static;
    max-width: none;
    padding-top: 0;
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 820px) {
  .admin-shell {
    padding: 14px;
  }

  .admin-topbar {
    flex-direction: column;
  }

  .admin-topbar-actions {
    justify-content: flex-start;
  }

  .admin-metrics-grid,
  .admin-metrics-grid-six,
  .admin-cost-grid,
  .admin-cost-filters,
  .admin-meta-grid,
  .admin-focus-grid,
  .admin-control-panel,
  .admin-improvement-funnel,
  .admin-operator-audit-lanes,
  .admin-breakdown-grid,
  .judge-decision-grid,
  .admin-role-grid,
  .admin-user-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-focus-card-wide {
    grid-column: auto;
  }

  .admin-field-span-2 {
    grid-column: span 1;
  }

  .admin-detail-header,
  .admin-pane-header,
  .admin-form-footer,
  .admin-review-decision-card,
  .admin-learned-rules-head,
  .admin-learned-rule-card,
  .judge-head,
  .judge-footer,
  .admin-user-hero {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-usage-table {
    overflow-x: visible;
  }

  .admin-usage-head {
    display: none;
  }

  .admin-usage-row {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .admin-usage-row span {
    display: grid;
    grid-template-columns: minmax(86px, 0.72fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
  }

  .admin-usage-row span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* CRM layer: calmer, flatter, denser backoffice without hiding data. */
body.admin-page {
  --bg: #171819;
  --bg-soft: #1c1d1f;
  --panel: #202124;
  --panel-2: #242528;
  --panel-3: #2a2c30;
  --panel-4: #303238;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f1f2f3;
  --muted: #b0b4bb;
  --muted-2: #878c94;
  --accent: #e8eaed;
  --shadow: none;
  font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: #171819;
}

body.admin-auth-loading::before {
  background: #171819;
}

.admin-shell {
  min-height: 100dvh;
  padding: 18px;
  gap: 12px;
}

.admin-topbar {
  min-height: 58px;
  align-items: center;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--line);
}

.admin-topbar-copy {
  min-width: 0;
}

.admin-topbar-copy .drawer-eyebrow,
.admin-topbar-caption {
  display: none;
}

.admin-topbar-copy h1 {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 760;
}

.admin-topbar-actions {
  gap: 8px;
}

.admin-status-line {
  min-height: 18px;
  font-size: var(--fs-sm);
}

.admin-layout {
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.admin-nav-panel {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  max-width: none;
  height: calc(100dvh - 108px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 0 0;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.admin-nav-panel::-webkit-scrollbar,
.admin-history-list::-webkit-scrollbar,
.admin-user-list::-webkit-scrollbar,
.admin-log-list::-webkit-scrollbar,
.admin-stage::-webkit-scrollbar {
  width: 8px;
}

.admin-nav-panel::-webkit-scrollbar-thumb,
.admin-history-list::-webkit-scrollbar-thumb,
.admin-user-list::-webkit-scrollbar-thumb,
.admin-log-list::-webkit-scrollbar-thumb,
.admin-stage::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.admin-nav-head {
  gap: 4px;
  padding: 0 6px 10px;
}

.admin-nav-head .drawer-eyebrow {
  font-size: var(--fs-2xs);
}

.admin-nav-head h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.025em;
}

.admin-nav-head .muted {
  display: none;
}

.admin-nav-tabs {
  gap: 3px;
  padding-bottom: 12px;
}

.admin-nav-tabs > .admin-nav-tab,
.admin-nav-tabs > .admin-nav-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 4px;
}

.admin-nav-tabs > .admin-nav-tab:last-child,
.admin-nav-tabs > .admin-nav-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-nav-group {
  display: grid;
  gap: 4px;
}

.admin-nav-group-label {
  position: relative;
  display: block;
  padding: 9px 32px 9px 11px;
  border-radius: var(--radius-md);
  color: var(--text);
  background: rgba(44, 159, 203, 0.12);
  border: 1px solid rgba(67, 185, 231, 0.2);
  cursor: pointer;
  list-style: none;
}

.admin-nav-group-label::-webkit-details-marker {
  display: none;
}

.admin-nav-group-label span {
  font-size: var(--fs-xs);
  font-weight: 840;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.admin-nav-group-label small {
  display: none;
}

.admin-nav-group-label::after {
  content: "⌄";
  position: absolute;
  right: 18px;
  color: var(--muted-2);
}

.admin-nav-group:not([open]) .admin-nav-group-label::after {
  content: "›";
}

.admin-nav-subtabs {
  display: grid;
  gap: 3px;
  padding-left: 10px;
}

.admin-nav-subtabs .admin-nav-subtab + .admin-nav-subtab {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.admin-nav-subtab {
  min-height: 36px;
  padding: 7px 10px;
}

.admin-nav-group.active .admin-nav-group-label {
  border-color: rgba(67, 185, 231, 0.32);
  background: linear-gradient(90deg, rgba(28, 107, 136, 0.42), rgba(20, 44, 77, 0.46));
}

.admin-nav-tab {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  transform: none;
}

.admin-nav-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.09);
  transform: none;
}

.admin-nav-tab.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.admin-nav-tab-label {
  font-size: var(--fs-md);
  font-weight: 720;
}

.admin-nav-tab small {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
  opacity: 1;
}

.admin-stage {
  height: calc(100dvh - 108px);
  min-height: 0;
  max-height: calc(100dvh - 108px);
  overflow: hidden auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.admin-pane {
  gap: 16px;
  padding: 20px;
}

.admin-pane-header {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.admin-pane-header h2 {
  margin: 2px 0 0;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.admin-page .drawer-eyebrow,
.admin-page .metric-label,
.admin-page .field span {
  color: var(--muted-2);
  font-size: var(--fs-2xs);
  letter-spacing: 0.095em;
}

.admin-page .compact-panel,
.admin-page .metric-card,
.admin-page .judge-list,
.admin-summary-block,
.admin-detail-summary,
.admin-selected-card,
.admin-form-panel,
.admin-meta-card,
.admin-focus-card,
.admin-role-card,
.admin-control-card,
.admin-transcript-item,
.admin-password-reset-panel,
.admin-improvement-hero,
.admin-improvement-step,
.admin-breakdown-list,
.admin-quality-case,
.admin-learned-rule-card,
.admin-rule-suggestion-card,
.judge-card,
.judge-decision-card,
.admin-empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
}

.admin-page .compact-panel {
  border-radius: var(--radius-lg);
}

.admin-page .metric-card {
  min-height: 94px;
  border-radius: var(--radius-md);
  padding: 14px;
}

.metric-card strong {
  font-size: 1.42rem;
  letter-spacing: -0.035em;
}

.metric-card small {
  font-size: var(--fs-xs);
}

.admin-summary-block,
.admin-detail-summary,
.admin-selected-card,
.admin-form-panel,
.admin-meta-card,
.admin-focus-card,
.admin-role-card,
.admin-control-card,
.admin-transcript-item,
.admin-password-reset-panel,
.judge-card,
.judge-decision-card {
  border-radius: var(--radius-md);
}

.admin-metrics-grid,
.admin-metrics-grid-six,
.admin-cost-grid {
  gap: 10px;
}

.admin-overview-summary,
.admin-conversation-view,
.admin-form-stage,
.admin-transcript {
  gap: 10px;
}

.admin-conversations-layout {
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 14px;
}

.admin-list-panel {
  gap: 10px;
}

.admin-list-toolbar {
  gap: 8px;
}

.admin-filter-row,
.admin-tag-row,
.admin-selected-meta,
.admin-detail-pills,
.pill-group,
.judge-meta,
.admin-rule-stats,
.admin-learned-rule-meta,
.admin-export-guide,
.admin-history-meta,
.admin-user-meta,
.admin-log-meta {
  gap: 5px;
}

.admin-filter-chip,
.admin-tag-row button,
.admin-page .pill,
.mini-tag,
.admin-history-badge,
.admin-user-badge,
.admin-log-badge,
.admin-rule-stats span,
.admin-learned-rule-meta small,
.admin-learned-rule-card > div:first-child > span,
.admin-rule-suggestion-card > span,
.admin-export-guide span {
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.15;
}

.admin-filter-chip:hover,
.admin-tag-row button:hover,
.admin-page .pill:hover,
.mini-tag:hover,
.admin-history-badge:hover,
.admin-user-badge:hover,
.admin-log-badge:hover,
.admin-export-guide span:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  transform: none;
}

.admin-filter-chip.active,
.admin-tag-row button.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.11);
}

.admin-page .pill.subtle {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.admin-history-list,
.admin-user-list,
.admin-log-list {
  max-height: calc(100dvh - 330px);
  gap: 4px;
  padding-right: 4px;
}

.admin-history-item,
.admin-user-item,
.admin-log-item {
  border-color: transparent;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 10px 11px;
  transform: none;
}

.admin-history-item:hover,
.admin-user-item:hover,
.admin-log-item:hover {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.08);
  transform: none;
}

.admin-history-item.active,
.admin-user-item.active,
.admin-log-item.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.admin-history-item strong,
.admin-user-item strong,
.admin-log-item strong {
  font-size: var(--fs-md);
  line-height: 1.25;
  font-weight: 720;
}

.admin-history-item span,
.admin-user-item span,
.admin-log-item span {
  margin-top: 4px;
  font-size: var(--fs-xs);
}

.admin-history-item small,
.admin-user-item small,
.admin-log-item small {
  margin-top: 5px;
  font-size: var(--fs-2xs);
}

.admin-history-badge.quality-apta,
.admin-history-badge.quality-apta_con_ajuste,
.admin-log-badge.level-success,
.admin-user-badge.status-active,
.admin-history-badge.judge-reutilizable,
.admin-history-badge.feedback-ok {
  background: transparent;
  color: #9fd4ad !important;
}

.admin-history-badge.quality-no_apta,
.admin-log-badge.level-error,
.admin-user-badge.status-suspended,
.admin-history-badge.judge-no_apta,
.admin-history-badge.feedback-warning {
  background: transparent;
  color: #f0aaa7 !important;
}

.admin-log-badge.level-warning,
.admin-history-badge.judge-revisar,
.admin-user-badge.status-inactive {
  background: transparent;
  color: #dbc28c !important;
}

.admin-detail-header {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.admin-detail-header h2 {
  font-size: var(--fs-2xl);
  line-height: 1.25;
}

.admin-detail-summary {
  padding: 12px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.admin-meta-grid,
.admin-focus-grid,
.admin-control-panel,
.judge-decision-grid {
  gap: 8px;
}

.admin-meta-card,
.admin-focus-card,
.admin-control-card,
.judge-decision-card {
  padding: 11px 12px;
}

.admin-transcript-item {
  padding: 12px;
}

.admin-review-decision-card {
  border-radius: var(--radius-md);
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.admin-page .ghost-button,
.admin-page .primary-button,
.admin-page .secondary-button {
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  /* border COMPLETO (no solo color): el width 1px venía de la definición legacy de
     arriba, que la tanda U borra — sin esto los botones perderían el borde. */
  border: 1px solid var(--line);
  box-shadow: none;
}

.admin-page .ghost-button:hover,
.admin-page .primary-button:hover,
.admin-page .secondary-button:hover {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.admin-page .sidebar-search input,
.admin-page .field input,
.admin-page .field select,
.admin-page .field textarea {
  border-radius: var(--radius-sm);
  background: #1b1c1e;
  border-color: var(--line);
}

.admin-usage-table {
  overflow-x: auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-usage-row {
  min-width: 620px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.admin-usage-row:last-child {
  border-bottom: 0;
}

.admin-usage-head {
  background: var(--w045);
}

@media (max-width: 1320px) {
  .admin-history-list,
  .admin-user-list,
  .admin-log-list {
    max-height: 40vh;
  }
}

/* 🔴 EL PANEL NO ES EL CHAT: AQUÍ LA PÁGINA TIENE QUE PODER BAJAR (12-sep-2026).
   `styles.css` (la hoja del chat, que el panel también carga) trae el layout de app instalada:
   `html, body { height: 100%; }` y `body { overflow: hidden; }`. En el chat está bien —el scroll
   vive dentro de la lista de mensajes— pero al panel lo RECORTA a la altura de la pantalla: lo que
   queda por debajo es INALCANZABLE, y ningún scroll lo trae.
   Medido en un iPhone contra producción: 1632px de contenido dentro de una ventana de 844, la
   página no se movía, y 14 de las 32 pestañas no se podían tocar. Así sonó: «en el móvil no me
   salen pestañas, pincho y no funciona».
   Se deshace SOLO para el panel (`html.admin-html`), sin tocar la hoja del chat. Hace falta la
   clase en el <html> porque desde el CSS no se puede mirar la clase del <body> para decidir
   sobre su padre sin `:has()`, que no está en todos los móviles.

   🔴 26-oct-2026 — SE SACA DE LA MEDIA QUERY. Hasta hoy este bloque vivía dentro de
   `@media (max-width: 1100px)`, así que el arreglo solo llegaba al móvil: **en una pantalla ancha
   el body del panel seguía con `overflow: hidden` y la página no bajaba**. El fundador lo contó
   así: «al entrar a TRIA, en Valoraciones la página no baja ni sube, se queda ahí sin poder
   mover». Se nota más en Valoraciones porque su tabla (`tria-valoraciones.css`,
   `.tnval-tabla-wrap`) tiene `overflow-y: auto` pero ninguna altura máxima, así que tampoco
   scrollea ella. El panel nunca debe heredar ese recorte, en ninguna anchura. */
html.admin-html,
html.admin-html body.admin-page {
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

@media (max-width: 1100px) {

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-nav-panel {
    position: relative;
    top: auto;
    height: auto;
    max-height: 240px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-nav-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .admin-shell {
    padding: 12px;
  }

  .admin-topbar {
    align-items: flex-start;
  }

  .admin-topbar-copy h1 {
    font-size: 1.2rem;
  }

  .admin-pane {
    padding: 14px;
  }

  .admin-nav-tabs {
    grid-template-columns: 1fr;
  }

  /* 🔴 EL MENÚ NO PUEDE SEGUIR ENCERRADO EN 240px CUANDO LAS PESTAÑAS SE APILAN (12-sep-2026).
     Arriba, en `max-width: 1100px`, el menú pasa a horizontal con un tope de 240px de alto: ahí
     caben porque van en DOS columnas. Aquí abajo se apilan en UNA sola y el contenido pasa a medir
     ~690px… pero el tope de 240 se quedó puesto. Medido en un iPhone contra producción: solo 18 de
     las 32 pestañas eran alcanzables, y «Revisión y mejora» quedaba a 680px del principio, dentro
     de una cajita de 240 que hay que desplazar con el dedo mientras los grupos plegables la mueven.
     El fundador lo contó como «en el móvil no me salen pestañas, pincho y no funciona».
     Sin tope, el menú se despliega y baja la PÁGINA, que es como se navega en un móvil. */
  .admin-nav-panel {
    max-height: none;
  }

  .admin-conversations-layout {
    grid-template-columns: 1fr;
  }
}


.admin-meta-performance-panel {
  margin-bottom: 16px;
}

.admin-inline-field {
  min-width: 170px;
}

.admin-meta-performance-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-meta-performance-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-performance-row {
  display: grid;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-performance-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-performance-row h4,
.admin-performance-row p {
  margin: 0;
}

.admin-performance-row h4 {
  font-size: var(--fs-xl);
  line-height: 1.3;
}

.admin-performance-row header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.admin-performance-decision {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: #eef1f4;
  background: rgba(255, 255, 255, 0.08);
}

.admin-performance-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-performance-stats span {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.065);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.admin-performance-stats strong {
  color: var(--text);
}

.admin-performance-row.decision-escalar {
  border-color: rgba(84, 163, 110, 0.38);
  background: linear-gradient(180deg, rgba(84, 163, 110, 0.12), rgba(255, 255, 255, 0.045));
}

.admin-performance-row.decision-escalar .admin-performance-decision,
.admin-history-badge.quality-bueno {
  background: rgba(84, 163, 110, 0.22);
  color: #d9f4df !important;
}

.admin-performance-row.decision-mantener .admin-performance-decision,
.admin-history-badge.quality-medio,
.admin-history-badge.quality-pendiente {
  background: rgba(184, 146, 70, 0.24);
  color: #ffe8b0 !important;
}

.admin-performance-row.decision-revisar .admin-performance-decision {
  background: rgba(184, 146, 70, 0.3);
  color: #ffe8b0 !important;
}

.admin-performance-row.decision-pausar {
  border-color: rgba(191, 97, 97, 0.35);
  background: linear-gradient(180deg, rgba(191, 97, 97, 0.12), rgba(255, 255, 255, 0.045));
}

.admin-performance-row.decision-pausar .admin-performance-decision,
.admin-history-badge.quality-malo,
.admin-history-badge.quality-no_valido,
.admin-history-badge.quality-duplicado {
  background: rgba(191, 97, 97, 0.24);
  color: #ffd9d9 !important;
}

.admin-performance-sync {
  margin: 0;
  font-size: var(--fs-sm);
}

@media (max-width: 1100px) {
  .admin-meta-performance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-meta-performance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-performance-row header {
    display: grid;
  }
}

/* CRM final overrides for blocks declared after the main CRM layer. */
.admin-meta-performance-panel {
  margin-bottom: 14px;
}

.admin-meta-performance-summary {
  gap: 10px;
}

.admin-performance-row {
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.admin-performance-row:hover {
  background: var(--panel-2);
  border-color: var(--line-strong);
}

.admin-performance-row.decision-escalar,
.admin-performance-row.decision-pausar {
  background: var(--panel);
}

.admin-performance-decision,
.admin-performance-stats span {
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
}

.admin-performance-decision:hover,
.admin-performance-stats span:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}


.admin-performance-warning {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--radius-lg);
  color: #ffe8b0;
  background: rgba(184, 146, 70, 0.14);
  border: 1px solid rgba(184, 146, 70, 0.28);
  font-size: var(--fs-sm);
}


.admin-action-plan-block {
  margin-top: 16px;
}

.admin-meta-optimization-filters {
  margin-top: 12px;
}

.admin-meta-action-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.admin-action-plan-card {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-action-plan-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-action-plan-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-action-plan-card strong,
.admin-action-plan-card span,
.admin-action-plan-card small {
  display: block;
}

.admin-action-plan-card strong {
  font-size: var(--fs-xl);
}

.admin-action-plan-card span {
  margin-top: 5px;
  color: var(--text);
  font-weight: 800;
}

.admin-action-plan-card small,
.admin-action-plan-card p {
  color: var(--muted);
}

.admin-action-plan-card p {
  margin: 0;
  line-height: 1.55;
}

.admin-action-plan-card em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  font-style: normal;
  font-size: var(--fs-2xs);
  font-weight: 900;
  color: #eef1f4;
  background: rgba(255, 255, 255, 0.08);
}

.admin-action-plan-card.priority-alta {
  border-color: rgba(191, 97, 97, 0.34);
}

.admin-action-plan-card.bucket-scale {
  background: linear-gradient(180deg, rgba(84, 163, 110, 0.12), rgba(255, 255, 255, 0.045));
}

.admin-action-plan-card.bucket-pause,
.admin-action-plan-card.bucket-form {
  background: linear-gradient(180deg, rgba(191, 97, 97, 0.12), rgba(255, 255, 255, 0.045));
}

.admin-action-plan-card.bucket-creative {
  background: linear-gradient(180deg, rgba(184, 146, 70, 0.13), rgba(255, 255, 255, 0.045));
}

.admin-action-safety {
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: var(--fs-sm);
}

.admin-action-plan-card.priority-alta em {
  background: rgba(191, 97, 97, 0.25);
  color: #ffd9d9;
}

.admin-action-plan-card.priority-media em {
  background: rgba(184, 146, 70, 0.24);
  color: #ffe8b0;
}

.admin-action-plan-card.priority-baja em {
  background: rgba(84, 163, 110, 0.2);
  color: #d9f4df;
}

@media (max-width: 980px) {
  .admin-meta-action-plan {
    grid-template-columns: 1fr;
  }
}


.admin-action-history-header {
  margin-top: 18px;
}

.admin-meta-action-history {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.admin-meta-manual-history-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-manual-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(260px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.admin-meta-manual-title-field {
  grid-column: span 1;
}

.admin-meta-manual-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.admin-action-history-item {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-action-history-item strong,
.admin-action-history-item span,
.admin-action-history-item small {
  display: block;
}

.admin-action-history-item span,
.admin-action-history-item small {
  color: var(--muted);
}

.admin-empty-state-compact {
  min-height: 96px;
}


.admin-action-execute-button {
  justify-self: start;
  margin-top: 4px;
  border-color: rgba(191, 97, 97, 0.36);
  color: #ffd9d9;
}

.admin-action-history-item.status-executed {
  border-color: rgba(84, 163, 110, 0.28);
}

.admin-action-history-item.status-recorded {
  border-color: rgba(116, 184, 255, 0.22);
}

.admin-action-history-item.status-executed strong::after {
  content: " · ejecutado";
  color: #d9f4df;
  font-weight: 700;
}

.admin-action-history-details strong {
  display: inline;
  color: var(--text);
}

@media (max-width: 1100px) {
  .admin-meta-manual-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .admin-meta-manual-grid {
    grid-template-columns: 1fr;
  }

  .admin-meta-manual-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.admin-meta-capi-panel {
  margin-top: 18px;
}

.admin-meta-creative-playbook,
.admin-meta-creative-kit article,
.admin-meta-creative-prompt {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.admin-meta-creative-playbook {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.admin-meta-creative-playbook header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-meta-creative-playbook h4 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: var(--fs-xl);
}

.admin-meta-creative-playbook-grid,
.admin-meta-creative-kit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-meta-creative-playbook-grid article,
.admin-meta-creative-kit article {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.admin-meta-creative-playbook-grid article {
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 31, 0.35);
  border: 1px solid rgba(107, 176, 255, 0.14);
}

.admin-meta-creative-playbook-grid strong,
.admin-meta-creative-kit strong {
  color: var(--text);
}

.admin-meta-creative-playbook-grid p,
.admin-meta-creative-playbook-grid small,
.admin-meta-creative-kit p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-meta-creative-kit span,
.admin-meta-creative-prompt span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-meta-creative-prompt {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
}

.admin-meta-creative-prompt p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-meta-capi-diagnostics {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-capi-verdict,
.admin-capi-guide article {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-capi-verdict strong,
.admin-capi-guide strong {
  color: var(--text);
}

.admin-capi-verdict p,
.admin-capi-guide p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-capi-verdict.level-success {
  border-color: rgba(101, 214, 145, 0.34);
  background: rgba(101, 214, 145, 0.08);
}

.admin-capi-verdict.level-warning {
  border-color: rgba(255, 207, 112, 0.32);
  background: rgba(255, 207, 112, 0.08);
}

.admin-capi-verdict.level-error {
  border-color: rgba(255, 120, 120, 0.34);
  background: rgba(255, 120, 120, 0.08);
}

.admin-capi-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-capi-role {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-capi-role.role-positive {
  color: #dcf8e2;
  background: rgba(101, 214, 145, 0.16);
}

.admin-capi-role.role-negative {
  color: #ffe2e2;
  background: rgba(191, 97, 97, 0.18);
}

.admin-capi-role.role-context {
  color: #dbeaff;
  background: rgba(107, 176, 255, 0.15);
}

.admin-capi-config-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-capi-config-strip span,
.admin-capi-diagnostic-card {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-capi-config-strip b,
.admin-capi-diagnostic-card strong {
  color: var(--text);
}

.admin-capi-config-strip small,
.admin-capi-diagnostic-card p {
  color: var(--muted);
}

.admin-capi-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-capi-diagnostic-card p {
  margin: 0;
}

.admin-capi-diagnostic-card.level-success {
  border-color: rgba(101, 214, 145, 0.32);
  background: rgba(101, 214, 145, 0.08);
}

.admin-capi-diagnostic-card.level-warning {
  border-color: rgba(255, 207, 112, 0.32);
  background: rgba(255, 207, 112, 0.08);
}

.admin-capi-diagnostic-card.level-error {
  border-color: rgba(255, 120, 120, 0.34);
  background: rgba(255, 120, 120, 0.08);
}

.admin-capi-event-table {
  overflow: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-capi-event-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(105px, 0.7fr) repeat(3, minmax(86px, 0.55fr)) minmax(170px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.admin-capi-event-row:last-child {
  border-bottom: 0;
}

.admin-capi-event-head {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-meta-capi-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.admin-meta-capi-events {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.admin-capi-row {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-capi-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-capi-row strong,
.admin-capi-row small {
  display: block;
}

.admin-capi-row small,
.admin-capi-row p {
  color: var(--muted);
}

.admin-capi-row p {
  margin: 0;
  line-height: 1.5;
}

.admin-capi-row.is-sent {
  border-color: rgba(84, 163, 110, 0.28);
}

.admin-capi-row.is-error {
  border-color: rgba(191, 97, 97, 0.34);
}

@media (max-width: 760px) {
  .admin-meta-creative-playbook header {
    display: grid;
  }

  .admin-meta-creative-playbook-grid,
  .admin-meta-creative-kit {
    grid-template-columns: 1fr;
  }

  .admin-capi-config-strip {
    grid-template-columns: 1fr;
  }

  .admin-capi-guide {
    grid-template-columns: 1fr;
  }

  .admin-capi-event-row {
    grid-template-columns: 1fr;
  }

  .admin-capi-event-head {
    display: none;
  }

  .admin-capi-event-row span::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

.admin-meta-inventory-list {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-meta-ads-filters {
  margin-top: -4px;
}

.admin-meta-ads-priority-list {
  display: grid;
  gap: 10px;
}

.admin-meta-priority-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(84, 163, 110, 0.08), rgba(96, 165, 250, 0.055));
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.admin-meta-priority-section h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-meta-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-meta-priority-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.admin-meta-priority-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-meta-priority-card strong,
.admin-meta-priority-card span,
.admin-meta-priority-card em {
  display: block;
}

.admin-meta-priority-card span,
.admin-meta-priority-card p {
  color: var(--muted);
}

.admin-meta-priority-card p {
  margin: 0;
  line-height: 1.45;
}

.admin-meta-priority-card em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: 850;
}

.admin-meta-priority-card.decision-scale {
  border-color: rgba(84, 163, 110, 0.36);
}

.admin-meta-priority-card.decision-tracking,
.admin-meta-priority-card.decision-review {
  border-color: rgba(184, 146, 70, 0.34);
}

.admin-meta-priority-card.decision-pause {
  border-color: rgba(191, 97, 97, 0.38);
}

.admin-meta-alert-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-meta-alert {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-alert strong,
.admin-meta-alert span {
  display: block;
}

.admin-meta-alert span {
  color: var(--muted);
  line-height: 1.45;
}

.admin-meta-alert.level-alta {
  border-color: rgba(191, 97, 97, 0.34);
}

.admin-meta-alert.level-media {
  border-color: rgba(184, 146, 70, 0.3);
}

.admin-meta-creatives-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-meta-creatives-filters {
  margin-top: 12px;
}

.admin-meta-creative-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-creative-card header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.admin-meta-creative-card h4 {
  margin: 3px 0 0;
  color: var(--text);
}

.admin-meta-creative-card.bucket-form,
.admin-meta-creative-card.bucket-pause {
  border-color: rgba(191, 97, 97, 0.34);
}

.admin-meta-creative-card.bucket-creative,
.admin-meta-creative-card.bucket-review {
  border-color: rgba(184, 146, 70, 0.3);
}

.admin-meta-creative-card.bucket-scale {
  border-color: rgba(84, 163, 110, 0.32);
}

.admin-meta-creative-card.bucket-wait,
.admin-meta-creative-card.bucket-tracking {
  border-color: rgba(134, 161, 189, 0.24);
}

.admin-meta-creative-read,
.admin-meta-creative-prompt {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-meta-creative-read strong,
.admin-meta-creative-prompt span {
  color: var(--text);
  font-weight: 800;
}

.admin-meta-creative-read p,
.admin-meta-creative-prompt p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-meta-inventory-section {
  display: grid;
  gap: 9px;
}

.admin-meta-inventory-section h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-meta-inventory-row {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-inventory-campaign {
  background: rgba(255, 255, 255, 0.055);
}

.admin-meta-inventory-adset {
  background: rgba(255, 255, 255, 0.04);
}

.admin-meta-inventory-ad {
  background: rgba(255, 255, 255, 0.028);
}

.admin-meta-inventory-children {
  display: grid;
  gap: 8px;
  padding-left: 14px;
  margin-left: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.admin-meta-inventory-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-meta-inventory-row strong,
.admin-meta-inventory-row small {
  display: block;
}

.admin-meta-inventory-row small,
.admin-meta-inventory-row p {
  color: var(--muted);
}

.admin-meta-inventory-row p {
  margin: 0;
}

.admin-meta-inventory-row.is-active {
  border-color: rgba(84, 163, 110, 0.3);
}

.admin-meta-inventory-row.is-paused {
  border-color: rgba(184, 146, 70, 0.28);
}

.admin-meta-inventory-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-meta-inventory-status,
.admin-meta-inventory-tracking,
.admin-meta-inventory-decision {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  color: #eef1f4;
  background: rgba(255, 255, 255, 0.09);
  font-size: var(--fs-2xs);
  font-weight: 850;
}

.admin-meta-inventory-decision.decision-scale {
  color: #d9f4df;
  background: rgba(84, 163, 110, 0.18);
}

.admin-meta-inventory-decision.decision-tracking,
.admin-meta-inventory-decision.decision-review {
  color: #ffe7b4;
  background: rgba(184, 146, 70, 0.18);
}

.admin-meta-inventory-decision.decision-pause {
  color: #ffe2e2;
  background: rgba(191, 97, 97, 0.2);
}

.admin-meta-inventory-decision.decision-keep {
  color: #dbeafe;
  background: rgba(96, 165, 250, 0.14);
}

.admin-meta-inventory-decision.decision-wait {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
}

.admin-meta-inventory-tracking.tracking-joined {
  color: #d9f4df;
  background: rgba(84, 163, 110, 0.16);
}

.admin-meta-inventory-tracking.tracking-meta_only {
  color: #ffe2e2;
  background: rgba(191, 97, 97, 0.18);
}

.admin-meta-inventory-tracking.tracking-qobrix_only {
  color: #ffe7b4;
  background: rgba(184, 146, 70, 0.18);
}

.admin-meta-inventory-tracking.tracking-no_data {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
}

.admin-meta-inventory-technical {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-meta-inventory-technical span {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: var(--radius-md);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.12);
  font-size: var(--fs-2xs);
  font-weight: 760;
}

.admin-meta-inventory-technical strong {
  color: var(--text);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.admin-meta-config-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.admin-meta-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-config-check,
.admin-config-block {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-system-health {
  border-color: rgba(107, 176, 255, 0.2);
  background: linear-gradient(135deg, rgba(32, 86, 132, 0.16), rgba(255, 255, 255, 0.035));
}

.admin-meta-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-meta-health-item {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-meta-health-item span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-meta-health-item strong {
  color: var(--text);
  line-height: 1.35;
}

.admin-meta-health-item.status-ok {
  border-color: rgba(84, 163, 110, 0.32);
}

.admin-meta-health-item.status-warning {
  border-color: rgba(184, 146, 70, 0.36);
}

.admin-meta-health-item.status-error {
  border-color: rgba(191, 97, 97, 0.42);
}

.admin-meta-conversions-block.status-ok {
  border-color: rgba(84, 163, 110, 0.28);
}

.admin-meta-conversions-block.status-warning {
  border-color: rgba(255, 207, 112, 0.28);
}

.admin-meta-conversions-block.status-error {
  border-color: rgba(191, 97, 97, 0.34);
}

.admin-meta-conversion-table {
  overflow: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-meta-conversion-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(130px, 0.65fr) minmax(100px, 0.5fr) minmax(105px, 0.5fr) minmax(180px, 0.9fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.admin-meta-conversion-row:last-child {
  border-bottom: 0;
}

.admin-meta-conversion-row strong,
.admin-meta-conversion-row small {
  display: block;
}

.admin-meta-conversion-row small {
  color: var(--muted);
  margin-top: 3px;
}

.admin-meta-conversion-head {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-meta-conversion-row.status-ok {
  background: rgba(84, 163, 110, 0.055);
}

.admin-meta-conversion-row.status-no_activity {
  background: rgba(255, 207, 112, 0.045);
}

.admin-meta-conversion-row.status-missing,
.admin-meta-conversion-row.status-needs_repair,
.admin-meta-conversion-row.status-unavailable {
  background: rgba(191, 97, 97, 0.06);
}

.admin-config-check header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-config-check span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #eef1f4;
  background: rgba(255, 255, 255, 0.09);
  font-size: var(--fs-2xs);
  font-weight: 850;
}

.admin-config-check p,
.admin-config-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-config-check.is-ok {
  border-color: rgba(84, 163, 110, 0.3);
}

.admin-config-check.is-error {
  border-color: rgba(191, 97, 97, 0.34);
}

.admin-config-block h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .admin-meta-health-grid {
    grid-template-columns: 1fr;
  }

  .admin-meta-inventory-row header {
    display: grid;
  }

  .admin-meta-inventory-badges {
    justify-content: flex-start;
  }

  .admin-meta-inventory-technical {
    grid-template-columns: 1fr;
  }

  .admin-meta-conversion-row {
    grid-template-columns: 1fr;
  }

  .admin-meta-conversion-head {
    display: none;
  }

  .admin-meta-conversion-row span::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .admin-meta-alert-list {
    grid-template-columns: 1fr;
  }

  .admin-meta-priority-grid {
    grid-template-columns: 1fr;
  }

  .admin-meta-inventory-children {
    padding-left: 9px;
  }
}

.admin-followup-alert-card {
  display: grid;
  gap: 7px;
  min-height: 150px;
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

.admin-followup-alert-card span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-followup-alert-card strong {
  color: var(--text);
  font-size: clamp(1.55rem, 2vw, 2.35rem);
  line-height: 1;
}

.admin-followup-alert-card small {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 700;
}

.admin-followup-alert-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.35;
}

.admin-followup-alert-card.tone-danger {
  border-color: rgba(248, 113, 113, 0.36);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.28), rgba(255, 255, 255, 0.035));
}

.admin-followup-alert-card.tone-warning {
  border-color: rgba(251, 191, 36, 0.32);
  background: linear-gradient(145deg, rgba(120, 53, 15, 0.22), rgba(255, 255, 255, 0.035));
}

.admin-followup-alert-card.tone-info {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(145deg, rgba(12, 74, 110, 0.24), rgba(255, 255, 255, 0.035));
}

.admin-followup-alert-card.tone-ok {
  border-color: rgba(74, 222, 128, 0.22);
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.18), rgba(255, 255, 255, 0.035));
}

.admin-followup-advisor-detail-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.38), rgba(37, 99, 235, 0.06)),
    rgba(255, 255, 255, 0.03);
}

.admin-followup-advisor-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-followup-detail-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04);
}

.admin-followup-detail-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-followup-detail-card header span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-followup-detail-card header strong {
  color: var(--text);
  font-size: 1.25rem;
}

.admin-followup-detail-card.tone-danger {
  border-color: rgba(248, 113, 113, 0.28);
}

.admin-followup-detail-card.tone-warning {
  border-color: rgba(251, 191, 36, 0.24);
}

.admin-followup-detail-card.tone-info {
  border-color: rgba(56, 189, 248, 0.24);
}

.admin-followup-detail-table-wrap {
  overflow-x: auto;
  min-width: 0;
}

/* Tabla de detalle de seguimiento MIGRADA a data-table: el aspecto lo da data-table; aquí solo
   el min-width para el scroll horizontal. La clase propia de detalle se eliminó (baja la deuda). */
.admin-followup-detail-table-wrap .data-table {
  min-width: 680px;
}

@media (max-width: 1180px) {
  .admin-followup-advisor-detail {
    grid-template-columns: 1fr;
  }
}

.admin-escalation-close {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.admin-escalation-close select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7fb;
  padding: 10px 12px;
  font-weight: 800;
}

.admin-escalation-close-button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f7fb;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.admin-escalation-close-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
  .admin-escalation-close {
    grid-template-columns: 1fr;
  }
}

.admin-director-layout {
  /* 5-sep-2026: la proporción estaba AL REVÉS. La lista ocupaba 693 px repitiendo palabra por
     palabra lo que ya sale en el detalle («5 errores en la última importación…» aparecía en la
     tarjeta y otra vez en MOTIVO), mientras el detalle —cuatro bloques de texto— se apretaba en
     396 px y partía las frases en líneas cortas.
     La lista solo tiene que servir para ELEGIR: nivel, título y score. Lo que se lee está al lado. */
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: 18px;
  margin-top: 18px;
}

/* 6-sep-2026, zona `diseno`. Medido en producción ANTES de tocar: este bloque era el MAYOR del
   panel del Director —991 px— cuando el siguiente ocupaba 189. El alto lo mandaba la lista (869 px
   con 11 tarjetas) mientras la columna del detalle acababa a los 485 px y dejaba ~500 px de vacío
   negro debajo.
   Se probó con tope de altura y scroll propio, y se DESCARTÓ mirando la foto: el tope partía la
   última tarjeta a media línea y eso no se lee como «hay más», se lee como pantalla rota. La lista
   se acota por número de tarjetas (admin.js) y el resto se pide con un botón: nada cortado. */
.admin-director-ver-mas {
  width: 100%;
  justify-content: center;
}

/* El detalle no estira hasta el alto de la lista: se queda arriba, donde se lee. */
.admin-director-layout > .admin-director-panel { align-self: start; }

/* El dato que distingue esta prioridad de sus vecinas (la campaña concreta, cuántos leads). */
.admin-director-detail-dato {
  margin: 2px 0 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* La barra superior es sticky (64 px): sin esto, saltar a una sección la deja medio tapada. */
.admin-director-layout,
.admin-director-pending-section,
#admin-director-improvements-section { scroll-margin-top: 84px; }

.admin-director-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
}

.admin-director-readonly-pill {
  min-height: 42px;
  align-items: center;
  justify-content: center;
}

.admin-director-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  padding: 18px;
  margin-top: 18px;
}

.admin-director-panel-primary {
  border-color: rgba(56, 189, 248, 0.22);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.2), rgba(15, 23, 42, 0.26));
}

.admin-director-priorities,
.admin-director-agents,
.admin-director-recommendations {
  display: grid;
  gap: 12px;
}

/* El agente y el score van DEBAJO del título, no pegados detrás.
   Al quitar el motivo repetido de la tarjeta, el <small> se quedó en la misma línea que el
   <strong> y se leía «Revisar sincronización Meta → Qobrix Meta Ads + Qobrix · Score 92».
   Y la pastilla del contador («8 de 8 acciones») se partía en dos al estrecharse la columna. */
.admin-director-priority > div > strong { display: block; }
.admin-director-priority > div > small { display: block; margin-top: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
#admin-director-priority-count { white-space: nowrap; }

.admin-director-priority {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-director-priority:hover,
.admin-director-priority.selected {
  border-color: rgba(56, 189, 248, 0.34);
  background: rgba(14, 116, 144, 0.16);
  transform: translateY(-1px);
}

.admin-director-priority > span {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
  font-size: var(--fs-2xs);
  font-weight: 950;
  letter-spacing: 0.1em;
}

.admin-director-priority.priority-alta > span {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

.admin-director-priority.priority-baja > span {
  background: rgba(74, 222, 128, 0.14);
  color: #bbf7d0;
}

.admin-director-priority strong,
.admin-director-agent-card strong,
.admin-director-recommendation strong {
  color: var(--text);
}

.admin-director-priority p,
.admin-director-priority small,
.admin-director-agent-card p,
.admin-director-recommendation p {
  margin: 6px 0 0;
  color: var(--muted);
}

.admin-director-agent-card,
.admin-director-recommendation {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.045);
  padding: 14px;
}

.admin-director-agent-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-director-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
}

.admin-director-detail-card {
  display: grid;
  gap: 14px;
}

.admin-director-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-director-detail-head span,
.admin-director-detail-block span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-director-detail-head strong {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
}

.admin-director-detail-card.priority-alta .admin-director-detail-head strong {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

.admin-director-detail-card.priority-baja .admin-director-detail-head strong {
  background: rgba(74, 222, 128, 0.14);
  color: #bbf7d0;
}

.admin-director-detail-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
  letter-spacing: -0.035em;
}

.admin-director-detail-grid {
  display: grid;
  gap: 10px;
}

.admin-director-detail-block {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.admin-director-detail-block p {
  margin: 6px 0 0;
  color: var(--text);
  line-height: 1.5;
}

.admin-director-readonly-note {
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: rgba(14, 116, 144, 0.14);
  color: #bae6fd;
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* Botones de acción en detalle */
.admin-director-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-director-actions .ghost-button {
  font-size: var(--fs-sm);
  padding: 6px 12px;
}
.director-reviewed .admin-director-detail-head {
  opacity: 0.7;
}

/* Panel de acciones pendientes */
.admin-director-pending-section {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(251, 191, 36, 0.05);
}
.admin-director-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-director-pending-item {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface, #1a1b1e);
}
.admin-director-pending-item strong {
  display: block;
  margin: 4px 0;
}
.admin-director-pending-item p {
  margin: 4px 0 8px;
  font-size: var(--fs-md);
  color: var(--text-muted, #aaa);
}
.admin-director-pending-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.admin-director-pending-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
/* Aquí había una regla para `.primary-button.small` / `.ghost-button.small`. Esos botones pasaron
   a `.btn` el 5-sep-2026 y la regla se quedó apuntando a clases que ya no existen en el markup:
   no rompía nada, pero es exactamente el tipo de resto que luego nadie se atreve a borrar.
   Su sustituta está más abajo, junto al resto del bloque. */
.admin-director-pending-failed-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(229, 120, 107, 0.4);
  background: rgba(229, 120, 107, 0.12);
  color: #ffd0c5;
  font-size: var(--fs-md);
  font-weight: 600;
}
.admin-director-pending-item.status-failed {
  border-color: rgba(229, 120, 107, 0.45);
  background: rgba(229, 120, 107, 0.06);
}
.admin-director-pending-error {
  margin: 4px 0 8px;
  font-size: var(--fs-sm);
  color: #ffd0c5;
}

@media (max-width: 980px) {
  .admin-director-layout,
  .admin-director-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-director-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-director-readonly-pill {
    width: fit-content;
  }

  .admin-director-priority {
    grid-template-columns: 1fr;
  }
}

/* ─── Director conversacional ─── */
.admin-director-chat { margin: 16px 0; padding: 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.admin-director-chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin: 12px 0; padding-right: 4px; }
.admin-director-chat-msg { padding: 10px 14px; border-radius: var(--radius-md); max-width: 88%; white-space: pre-wrap; line-height: 1.45; font-size: 14px; }
.admin-director-chat-msg-user { align-self: flex-end; background: #2563eb; color: #fff; }
.admin-director-chat-msg-director { align-self: flex-start; background: rgba(255,255,255,0.06); color: inherit; }
.admin-director-chat-form { display: flex; gap: 8px; align-items: flex-end; }
.admin-director-chat-form textarea { flex: 1; resize: vertical; min-height: 44px; border-radius: var(--radius-md); padding: 10px 12px; background: rgba(0,0,0,0.2); color: inherit; border: 1px solid rgba(255,255,255,0.12); font: inherit; }
.admin-director-chat-form button { white-space: nowrap; }

/* ─── Director chat: formato de respuestas ─── */
.admin-director-chat-msg code { background: rgba(255,255,255,0.12); padding: 1px 5px; border-radius: 5px; font-size: 0.9em; }
.admin-director-chat-msg strong { font-weight: 700; }

/* ─── Sin contactar: el aviso de que nadie enseña un local (8-sep-2026) ───
   Va aquí y no en el JS porque la CSP `style-src 'self'` BLOQUEA los estilos escritos dentro del
   HTML: el bloque se habría visto descuadrado en producción y en local no, que es el peor sitio
   donde descubrirlo. Lo cazó el guardián del deploy antes de subir.
   Y no lleva `border-left` de color, aunque era lo primero que me salió: la nota de la zona
   `diseno` de aquí abajo dice que en modo oscuro es la marca clásica de UI amateur. Se usa el
   mismo tono que las alertas de seguimiento, que ya existía. */
.admin-sin-contactar-cruces {
  border-color: rgba(248, 113, 113, 0.36);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.28), rgba(255, 255, 255, 0.035));
}
.admin-sin-contactar-cruces h3 { margin-top: 0; }

/* ─── Director: mejoras propuestas (tarjetas) ───
   Rediseño 18-ago-2026 (zona `diseno`). Lo que rompía, contrastado con `~/.claude/skills/DISENO-INDICE.md`:
   (1) `border-left: 4px` de color — en modo oscuro es la marca clásica de UI amateur (Impeccable);
   (2) pastillas de color sólido apiladas dentro de la tarjeta = cards anidadas, y encima se partían
       en cuatro líneas verticales porque la columna medía 260 px;
   (3) el acento puesto en TODAS las tarjetas deja de ser acento — se reserva para lo que de verdad
       lleva días parado.
   De paso, los `rgba(255,255,255,…)` fijos pasan a tokens: así el tema claro lo hereda solo. */
.admin-director-improvements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
.admin-director-improvement {
  display: flex; flex-direction: column; /* el pie cae al fondo → los botones se alinean entre columnas */
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px; background: var(--panel-2);
}
/* La prioridad se lee en un punto junto al título, no en una franja de 4 px de color. */
.admin-director-improvement > strong::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: 0.12em; background: var(--panel-4); }
.admin-director-improvement.priority-alta > strong::before { background: var(--danger); }
.admin-director-improvement.priority-media > strong::before { background: var(--warning); }
.admin-director-improvement.priority-baja > strong::before { background: var(--success); }
/* Una sola línea SIEMPRE: con `wrap`, en las tarjetas de origen largo el "Espera 2d" caía solo a
   una segunda línea y la rejilla quedaba irregular. Si el origen no cabe, se corta con puntos
   suspensivos — lo que importa lo dice el título. */
.admin-director-improvement-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 8px; overflow: hidden; }
.admin-director-improvement-head .pill { white-space: nowrap; } /* antes se partían en vertical */
.admin-director-improvement-head .pill:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-director-improvement strong { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.admin-director-improvement p { font-size: 12.5px; color: var(--muted); margin: 0; }
/* La categoría se lee en su texto ("Producto" / "Operativa"): no necesita dos colores sólidos. */
.pill-product, .pill-ops { background: var(--panel-3); color: var(--muted); }

/* ─── Director mejoras: detalle + acciones ─── */
.admin-director-improvement-why { font-size: 12.5px; color: var(--muted); margin: 4px 0; }
.admin-director-improvement-what { font-size: 12.5px; color: var(--text); margin: 6px 0 0; }
/* El "por qué" y el "qué se haría" iban SIEMPRE desplegados: 19 propuestas = 4.371 px de panel.
   Ahora el detalle se abre solo cuando se quiere leer. */
.admin-director-improvement-detalle { margin: 4px 0 0; }
.admin-director-improvement-detalle > summary { cursor: pointer; width: max-content; padding: 2px 0; font-size: 12px; color: var(--link); list-style: none; }
.admin-director-improvement-detalle > summary::-webkit-details-marker { display: none; }
.admin-director-improvement-detalle > summary::after { content: " ›"; }
.admin-director-improvement-detalle[open] > summary::after { content: " ⌄"; }
.admin-director-improvement-detalle > summary:hover { color: var(--link-hover); }
.admin-director-improvement-detalle > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
/* Los botones van EN FILA. Iban apilados en vertical porque la regla de abajo apuntaba a
   `.primary-button`/`.ghost-button`, clases que el markup no usa (usa `.btn.primary`/`.btn.ghost`):
   nunca se aplicó, los botones se quedaron a tamaño normal y no cabían dos en 300 px. */
.admin-director-improvement-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; flex-wrap: nowrap; }
.admin-director-improvement-actions .btn { font-size: 12.5px; padding: 6px 12px; white-space: nowrap; }
.admin-director-improvement.is-confirmed { opacity: 0.75; }
.pill-confirmed { background: var(--ok-bg); color: var(--ok-text); }

/* ─── Cola Director: cuánto lleva esperando ───
   Antes: fondo rojo sólido y texto blanco — el elemento MÁS llamativo de la tarjeta, gritaba más
   que el título y que el botón de confirmar. Que algo lleve dos días esperando no es una
   emergencia: pasa a dato discreto a la derecha, y solo lo de 3 días o más se tiñe. */
/* Sin `margin-left:auto`: con la cabecera en `wrap`, empujarlo a la derecha lo tiraba SOLO a una
   segunda línea y quedaba descolgado. Va en el flujo, detrás de la prioridad. */
.urgency-badge { display: inline-block; flex: 0 0 auto; white-space: nowrap; padding: 0; background: none; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.urgency-badge.urgency-media, .urgency-badge.urgency-alta { color: var(--muted); }
.urgency-badge.urgency-critica { color: var(--danger-text); }

/* "Actualizado: 18/08/2026, 11:53" salía CENTRADO bajo un título y un subtítulo alineados a la
   izquierda — desalineación visible a simple vista. Se fija explícitamente. */
.admin-pane-header #admin-director-updated { text-align: left; }

/* ─── Acciones pendientes: mismo trato que las propuestas de al lado ───
   5-sep-2026. Cada acción soltaba su explicación entera —cinco o seis líneas— y con 25 en cola
   el bloque medía más que el resto de la pantalla junta. El texto se pliega tras «Ver detalle»:
   para decidir hace falta leerlo, pero no las veinticinco a la vez.
   Los botones usaban `.primary-button small` / `.ghost-button small`, la clase VIEJA: quedaban
   4 usos frente a 22 de `.btn`, y por eso se veían distintos del resto del panel. Pasan a `.btn`,
   que es la regla de la casa (un botón, una clase, un sitio donde cambiarlo). */
.admin-director-pending-detalle { margin: 4px 0 0; }
.admin-director-pending-detalle > summary { cursor: pointer; width: max-content; padding: 2px 0; font-size: 12px; color: var(--link); list-style: none; }
.admin-director-pending-detalle > summary::-webkit-details-marker { display: none; }
.admin-director-pending-detalle > summary::after { content: " ›"; }
.admin-director-pending-detalle[open] > summary::after { content: " ⌄"; }
.admin-director-pending-detalle > summary:hover { color: var(--link-hover); }
.admin-director-pending-detalle > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.admin-director-pending-detalle p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.admin-director-pending-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: nowrap; }
.admin-director-pending-actions .btn { font-size: 12.5px; padding: 6px 12px; white-space: nowrap; }

/* ─── Menú: aviso de secciones vacías escondidas ───
   Va dentro de la etiqueta del bloque, discreto: informa de que hay algo detrás sin competir con
   el nombre del bloque. Es un `.btn`… NO: aquí un botón con su fondo pesaría más que el propio
   título del grupo, así que va como texto pulsable, con foco visible y área de clic cómoda. */
.admin-nav-group-ocultas {
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap; /* «+1 vacía» se partía en dos líneas cuando el nombre del bloque era largo */
  flex: 0 0 auto;
}
.admin-nav-group-ocultas:hover { color: var(--text); background: var(--panel-3); }
.admin-nav-group-ocultas:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
/* La etiqueta del grupo tiene que dejar sitio al aviso a la derecha. */
.admin-nav-group-label { display: flex; align-items: center; gap: 8px; }

/* ─── Acciones pendientes: tanda visible + "Ver más" ───
   Se enseñan 5 y el resto queda tras el botón. El contador va ARRIBA (antes de la lista) para
   que se sepa cuántas hay en total sin bajar hasta el final. */
/* `text-align: left` explícito: los `.muted` de las cabeceras heredan un centrado que descoloca
   el contador respecto al título (misma trampa que con "Actualizado: …"). */
.admin-director-pending-contador { margin: 0 0 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: left; }
.admin-director-pending-mas { margin-top: 12px; font-size: 12.5px; }

/* ─── Director: semáforo de salud ─── */
.admin-director-semaforo-wrap { margin: 12px 0; }
.director-semaforo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.director-semaforo-col { border-radius: var(--radius-md); padding: 14px 16px; border: 1px solid rgba(255,255,255,0.08); border-top: 4px solid #6b7280; background: rgba(255,255,255,0.02); }
.director-semaforo-col h4 { margin: 0 0 8px; font-size: 14px; }
.director-semaforo-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.director-semaforo-col li { font-size: 13.5px; }
/* tabular-nums: las cifras del semáforo cambian solas cada pocas horas; sin ancho fijo por dígito
   el texto de al lado baila cada vez que un 9 pasa a 10. */
.director-semaforo-col li strong { font-size: 16px; font-variant-numeric: tabular-nums; }

/* Ancho completo sin `style=""` inline (la CSP los bloquea). */
.is-ancho-completo { width: 100%; }
.director-semaforo-col.is-critico { border-top-color: #ef4444; }
.director-semaforo-col.is-bloqueado { border-top-color: #f59e0b; }
.director-semaforo-col.is-operativo { border-top-color: #10b981; }

/* ─── Agente Abogado ─────────────────────────────────────────────────────── */
.admin-abogado-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.admin-abogado-template-info { grid-column: 1 / -1; padding: 10px 14px; background: #f1f5f9; border-radius: var(--radius-sm); }
.admin-abogado-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.admin-abogado-field > span { color: #334155; font-weight: 600; }
.admin-abogado-field input, .admin-abogado-field textarea { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); font: inherit; width: 100%; box-sizing: border-box; }
.admin-abogado-field input:focus, .admin-abogado-field textarea:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
/* Campo autocompletado LEÍDO de un documento (DNI): resaltar en ámbar para que se revise. */
.admin-abogado-field input.abg-field-fromdoc, .admin-abogado-field textarea.abg-field-fromdoc { border-color: #d97706; background: #fffbeb; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15); }
/* Firmantes extra (señalización/intermediación multi-firmante, fundador 28-jul): cada grupo y su
   botón ocupan toda la fila del grid (sin huecos sueltos); los campos de cada firmante se distribuyen
   en columnas dentro de un recuadro con borde. */
#abg-scompradores-extra, #abg-svendedores-extra, #abg-vendedores-extra { grid-column: 1 / -1; display: grid; gap: 10px; }
.abg-scomp-extra, .abg-svend-extra, .abg-vend-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.abg-scomp-extra > p, .abg-svend-extra > p, .abg-vend-extra > p { grid-column: 1 / -1; margin: 0 0 2px; }
.abg-scomp-extra > button, .abg-svend-extra > button, .abg-vend-extra > button { grid-column: 1 / -1; justify-self: start; }
#abg-add-comprador, #abg-add-vendedor-s, #abg-add-vendedor { grid-column: 1 / -1; justify-self: start; }
.admin-abogado-form-actions { display: flex; align-items: center; gap: 12px; }
.admin-abogado-user { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 10px; }
.admin-abogado-user > summary { cursor: pointer; font-size: var(--fs-lg); }
.admin-abogado-dashboard-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--fs-sm); }
.admin-abogado-dashboard-table th, .admin-abogado-dashboard-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.admin-abogado-dashboard-table th { color: #64748b; font-weight: 600; }
/* Sin fondo ni borde propios: los pone el tema v2 (el `<body>` del backoffice es SIEMPRE
   `v2-body`). Traía `#fff` con borde y sombra claros, de un tema anterior; llevaba muerta desde
   que existe el comodín, que se lo tapaba. Al bajar el color del comodín a peso cero se destapó y
   la pantalla del Abogado salió BLANCA con el texto claro encima: ilegible. Verificado el 7-sep. */
.admin-abogado-card { border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
.admin-abogado-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.admin-abogado-card-head > div { display: flex; align-items: center; gap: 10px; }
.admin-abogado-card-summary { margin: 4px 0 10px; font-size: 13px; }
.admin-abogado-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.admin-abogado-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
.admin-abogado-badge-warn { background: #fef3c7; color: #92400e; }
.admin-abogado-badge-ok { background: #d1fae5; color: #065f46; }
.admin-abogado-badge-muted { background: #e2e8f0; color: #475569; }
.admin-abogado-badge-advisor { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.admin-abogado-signflow { margin: 2px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--accion); }
.admin-abogado-signflow.ok { color: #065f46; }
.admin-abogado-signflow.warn { color: #92400e; }
.admin-abogado-signflow.muted { color: #64748b; font-weight: 500; }
.admin-abogado-payflow { margin: 2px 0 8px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-abogado-pay-item { display: inline-flex; align-items: center; gap: 4px; }
.admin-abogado-payflow .btn { padding: 2px 8px; font-size: 11px; }
.admin-abogado-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.admin-abogado-modal { background: #fff; border-radius: var(--radius-md); padding: 22px 26px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3); }
.admin-abogado-modal h3 { margin: 0 0 6px; font-size: 15px; }
.admin-abogado-modal > p { margin: 0 0 14px; font-size: 12.5px; }
.admin-abogado-modal form { display: flex; flex-direction: column; gap: 10px; }
.admin-abogado-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.admin-abogado-warnings { margin: 8px 0; }
.admin-abogado-warnings summary { cursor: pointer; color: #92400e; font-size: 12.5px; font-weight: 600; }
.admin-abogado-warnings ul { margin: 6px 0 0; padding-left: 20px; font-size: 12.5px; color: #475569; }
.admin-abogado-warnings li { margin-bottom: 4px; }
.admin-abogado-activity-row { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; }
.admin-abogado-activity-row:last-child { border-bottom: 0; }

/* ─── Pane Abogado: estadísticas (4-jun-2026) ─────────────────────────── */
.abogado-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.abogado-stats-card {
  padding: 14px;
  border: 1px solid var(--w08);
  border-radius: var(--radius-lg);
  background: var(--w025);
}
.abogado-stats-card h4 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--w55);
}
.abogado-stats-big {
  font-size: 2.2rem;
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: -0.02em;
}
.abogado-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.abogado-stats-table td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--w05);
  vertical-align: top;
}
.abogado-stats-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #d8b4fe;
}
.abogado-stats-recent {
  margin-top: 16px;
}
.abogado-stats-recent summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 0;
  color: var(--w85);
}
.abogado-stats-table-recent {
  margin-top: 10px;
}
.abogado-stats-table-recent th {
  padding: 6px 4px;
  border-bottom: 1px solid var(--w1);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--w55);
}


/* ═══════════════════════════════════════════════════════════════
   admin-v2.css FUSIONADO aquí (10-jun-2026, consolidación v2→admin).
   Antes era /admin-v2.css cargado tras admin.css. Mismo orden.
   ═══════════════════════════════════════════════════════════════ */
/* admin-v2.css — Rediseño TRIA backoffice COMPLETO
   v6 — Aplicado a TODO el backoffice (sidebar, headers, paneles, tablas, botones, formularios).
   Estilo Attio/Linear: denso, limpio, sin espacio innecesario.
   Activado por <body class="v2-body">.
*/

/* ═══════════════════════════════════════════════════════════════════
   VARIABLES GLOBALES (heredadas por todo .v2-body)
   ═══════════════════════════════════════════════════════════════════ */
.v2-body {
  --v2-card-bg: rgba(255, 255, 255, 0.035);
  --v2-card-bg-hover: rgba(255, 255, 255, 0.055);
  --v2-card-bg-active: rgba(255, 255, 255, 0.085);
  --v2-border: rgba(255, 255, 255, 0.07);
  --v2-border-strong: rgba(255, 255, 255, 0.13);
  --v2-text: #f1f4f9;
  --v2-text-soft: #c4cad6;
  --v2-text-muted: #828a99;
  --v2-text-dim: #5d6471;
  --v2-accent: #7dd3fc; /* azul claro pastel del logo TRIA (antes morado #8b95ff) */
  --v2-accent-soft: rgba(125, 211, 252, 0.12);
  --v2-accent-hover: rgba(125, 211, 252, 0.18);
  --v2-indigo: #818cf8;
  --v2-amber: #fbbf24;
  --v2-emerald: #34d399;
  --v2-sky: #38bdf8;
  --v2-green: #4ade80;
  --v2-red: #f87171;
  --v2-gray: #6b7280;
  --v2-radius: var(--radius-sm);    /* alias de la escala única (styles.css, :root SERENO — tanda R) */
  --v2-radius-sm: var(--radius-sm);
  /* "Inter Var" = la Inter LOCAL (@font-face en styles.css → /fonts/inter-latin.woff2).
     Antes pedía 'Inter' al CDN de Google, que la CSP bloquea: no cargaba nunca. */
  font-family: "Inter Var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* Ocultar el banner "Backoffice actualizado." */
.v2-body #admin-status.admin-status-line { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR v2 — Brand + Search + User
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .admin-topbar.v2-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--v2-border);
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Brand */
.v2-body .v2-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.v2-body .v2-topbar-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: block;
}

.v2-body .v2-topbar-titles { display: flex; flex-direction: column; line-height: 1.15; }
.v2-body .v2-topbar-titles strong { font-size: 14px; font-weight: 700; color: var(--v2-text); letter-spacing: -0.01em; }
.v2-body .v2-topbar-titles small { font-size: 11px; color: var(--v2-text-muted); }

/* Buscador */
.v2-body .v2-topbar-search {
  /* `relative` para que el desplegable de resultados (.v2-topbar-search-results, que es
     `absolute`) se ancle A LA BARRA. Sin esto colgaría del primer ancestro posicionado y
     aparecería descolocado en la página. */
  position: relative;
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 7px 12px;
  transition: all 0.15s ease;
}

.v2-body .v2-topbar-search:focus-within {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-accent);
}

.v2-body .v2-topbar-search-icon { color: var(--v2-text-muted); flex-shrink: 0; }

.v2-body .v2-topbar-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--v2-text);
  font-family: inherit;
  font-size: 12px;
  padding: 0;
}

.v2-body .v2-topbar-search input::placeholder { color: var(--v2-text-muted); }

.v2-body .v2-topbar-search-kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--v2-text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
}

/* Actions (botones icónicos a la derecha) */
.v2-body .v2-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.v2-body .v2-topbar-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  transition: all 0.15s ease;
}

.v2-body .v2-topbar-icon-btn:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border);
  color: var(--v2-text);
}

.v2-body .v2-topbar-icon-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-red);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}

/* Usuario */
.v2-body .v2-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-sm);
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 4px;
}

.v2-body .v2-topbar-user:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-body .v2-topbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.v2-body .v2-topbar-user-info { display: flex; flex-direction: column; line-height: 1.15; }
.v2-body .v2-topbar-user-info strong { font-size: 12px; font-weight: 600; color: var(--v2-text); }
.v2-body .v2-topbar-user-info small { font-size: 10px; color: var(--v2-text-muted); }

@media (max-width: 900px) {
  .v2-body .v2-topbar-brand { min-width: auto; }
  .v2-body .v2-topbar-search-kbd { display: none; }
  .v2-body .v2-topbar-user-info { display: none; }
  .v2-body .v2-topbar-titles small { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR (menú lateral)
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .admin-nav-panel {
  padding: 12px 8px;
  border-right: 1px solid var(--v2-border);
  background: transparent;
}

.v2-body .admin-nav-head {
  padding: 8px 10px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-body .admin-nav-head .drawer-eyebrow,
.v2-body .admin-nav-head > p:first-child {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin: 0 0 4px;
}

.v2-body .admin-nav-head h2,
.v2-body .admin-nav-head strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text);
}

.v2-body .admin-nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v2-body .admin-nav-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  border: none;
  color: var(--v2-text-soft);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-body .admin-nav-tab:hover {
  background: var(--v2-card-bg);
  color: var(--v2-text);
}

.v2-body .admin-nav-tab.active {
  background: var(--v2-accent-soft);
  color: var(--v2-text);
  font-weight: 600;
}

.v2-body .admin-nav-tab-label {
  flex: 1;
}

.v2-body .admin-nav-group {
  margin-top: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.v2-body .admin-nav-group[open] > summary { color: var(--v2-text-soft); }

/* Triangulo del details (default feo del browser) — mejorar */
.v2-body .admin-nav-group > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--v2-text-dim);
  border-bottom: 1.5px solid var(--v2-text-dim);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
  margin-left: auto;
}

.v2-body .admin-nav-group[open] > summary::after {
  transform: rotate(-135deg) translateY(2px);
}

/* Iconos de cada pestaña via data-admin-tab */
.v2-body .admin-nav-tab::before {
  content: '';
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  flex-shrink: 0;
}

.v2-body .admin-nav-tab.active::before { opacity: 1; }

/* Iconos SVG inline como data-URI por tab (estilo Lucide, stroke=currentColor) */
.v2-body .admin-nav-tab[data-admin-tab="conversations"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="director"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="abogado"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M239.43,133l-32-80h0a8,8,0,0,0-9.16-4.84L136,62V40a8,8,0,0,0-16,0V65.58L54.26,80.19A8,8,0,0,0,48.57,85h0v.06L16.57,165a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32a7.92,7.92,0,0,0-.57-3L66.92,93.77,120,82V208H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16H136V78.42L187,67.1,160.57,133a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32A7.92,7.92,0,0,0,239.43,133ZM56,184c-7.53,0-22.76-3.61-23.93-14.64L56,109.54l23.93,59.82C78.76,180.39,63.53,184,56,184Zm144-32c-7.53,0-22.76-3.61-23.93-14.64L200,77.54l23.93,59.82C222.76,148.39,207.53,152,200,152Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="memory"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="meta-ads"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="followup"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M240,128a8,8,0,0,1-8,8H204.94l-37.78,75.58A8,8,0,0,1,160,216h-.4a8,8,0,0,1-7.08-5.14L95.35,60.76,63.28,131.31A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.85L88.72,36.69a8,8,0,0,1,14.76.46l57.51,151,31.85-63.71A8,8,0,0,1,200,120h32A8,8,0,0,1,240,128Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="agenda"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="team"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="logs"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z'/></svg>"); }

.v2-body .admin-nav-group-label,
.v2-body .admin-nav-group > summary {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  padding: 8px 10px 6px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--v2-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v2-body .admin-nav-group > summary::-webkit-details-marker { display: none; }

.v2-body .admin-nav-group > summary:hover {
  color: var(--v2-text-muted);
}

/* ─── Tus atajos: los cuatro sitios de cada día, fijos arriba (20-sep-2026, zona `diseno`) ────────
   Aprobado con dibujo (`docs/diseno/paso4-cuentas-y-menu.html`). Van FUERA de los `<details>` para
   que no los pliegue el acordeón, y usan el mismo `.admin-nav-tab` que el resto del menú: no son un
   componente aparte, así que un cambio de estilo de las pestañas les llega solo.
   El rótulo es el mismo que el de un grupo (`summary`), para que la columna no tenga dos escalas. */
.admin-nav-atajos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-border, var(--border, #e4e8ef));
}

.admin-nav-atajos-rotulo {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim, var(--muted, #8a91a1));
  padding: 8px 10px 6px;
}

.admin-nav-resto-rotulo { padding-top: 12px; }

/* El atajo de donde estás se marca igual que la pestaña de su grupo: `syncTabState` pone `.active`
   en los dos, y el borde de la izquierda deja claro cuál de los dos es el sitio abierto. */
.v2-body .admin-nav-atajos .admin-nav-tab.active { box-shadow: inset 2px 0 0 var(--v2-accent, #1E3F80); }

.v2-body .admin-nav-subtabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
  margin-top: 2px;
}

.v2-body .admin-nav-subtab {
  font-size: 12px;
  padding: 6px 10px 6px 12px;
}

/* Los que faltaban (6-sep-2026): de 31 entradas solo 20 tenían icono —y cinco de esos
   veinte eran de pestañas que ya no existen—, así que media lista salía sin él. */
.v2-body .admin-nav-tab[data-admin-tab="esperas"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="mensajes"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H80a8,8,0,0,0-5.23,1.95L40,224V64H216ZM88,112a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,112Zm0,32a8,8,0,0,1,8-8h64a8,8,0,1,1,0,16H96A8,8,0,0,1,88,144Z'/></svg>"); }
/* «Incidencias» (17-oct): triángulo de aviso. Faltaba desde que se creó la pestaña y dejaba
   test_menu_y_uso_de_pestanas en rojo. (22-oct-2026) */
.v2-body .admin-nav-tab[data-admin-tab="incidencias"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'/></svg>"); }
/* «Sin contactar»: teléfono TACHADO — son los leads que nadie ha llamado todavía. Misma
   familia que los otros 31 iconos del menú (línea 24x24, trazo #c4cad6, grosor 2). Faltaba
   desde que se creó la pestaña el 8-sep y por eso test_menu_y_uso_de_pestanas estaba rojo,
   lo que bloqueaba la vía de Git a TODAS las ventanas. (12-sep-2026) */
.v2-body .admin-nav-tab[data-admin-tab="captacion"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M207,50.25A87.46,87.46,0,0,0,144.6,24h-.33A87.48,87.48,0,0,0,82,49.81L20.61,112a16,16,0,0,0,.06,22.56l28.66,28.66a15.92,15.92,0,0,0,11.32,4.69h.09a16,16,0,0,0,11.36-4.82L133,100.69a16.08,16.08,0,0,1,22.41-.21,15.6,15.6,0,0,1,4.73,11.19,16.89,16.89,0,0,1-4.85,12L93,183.88a16,16,0,0,0-.17,22.79l28.66,28.66a16.06,16.06,0,0,0,22.52.12L205.81,175C240.26,140.5,240.79,84.56,207,50.25ZM60.65,151.89,32,123.24,55.8,99.12l28.52,28.52ZM132.79,224l-28.68-28.65,24.38-23.57L157,200.32Zm61.76-60.44-26.11,25.54L140,160.68l26.44-25.57.1-.09a33,33,0,0,0,9.57-23.5A31.44,31.44,0,0,0,166.47,89a32.2,32.2,0,0,0-44.9.5L95.49,116.18,67,87.74,93.35,61.09A71.51,71.51,0,0,1,144.27,40h.27a71.55,71.55,0,0,1,51.05,21.48C223.25,89.55,222.75,135.38,194.55,163.58Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="blog"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="web-como-va"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="company-finance"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,128H56a8,8,0,0,1-8-8V78.63A23.84,23.84,0,0,0,56,80H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,132Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="operator-usage"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z'/></svg>"); }
/* CRM, Correo y WeSign (26-sep-2026): el MISMO dibujo que llevan en la barra de TRIA, para que en los dos
   sitios se reconozcan igual. La Sala lleva el del Mapa del sistema, que ahora es una pestaña suya. */
.v2-body .admin-nav-tab[data-admin-tab="crm"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="correo"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="wesign"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M232,168H63.86c2.66-5.24,5.33-10.63,8-16.11,15,1.65,32.58-8.78,52.66-31.14,5,13.46,14.45,30.93,30.58,31.25,9.06.18,18.11-5.2,27.42-16.37C189.31,143.75,203.3,152,232,152a8,8,0,0,0,0-16c-30.43,0-39.43-10.45-40-16.11a7.67,7.67,0,0,0-5.46-7.75,8.14,8.14,0,0,0-9.25,3.49c-12.07,18.54-19.38,20.43-21.92,20.37-8.26-.16-16.66-19.52-19.54-33.42a8,8,0,0,0-14.09-3.37C101.54,124.55,88,133.08,79.57,135.29,88.06,116.42,94.4,99.85,98.46,85.9c6.82-23.44,7.32-39.83,1.51-50.1-3-5.38-9.34-11.8-22.06-11.8C61.85,24,49.18,39.18,43.14,65.65c-3.59,15.71-4.18,33.21-1.62,48s7.87,25.55,15.59,31.94c-3.73,7.72-7.53,15.26-11.23,22.41H24a8,8,0,0,0,0,16H37.41c-11.32,21-20.12,35.64-20.26,35.88a8,8,0,1,0,13.71,8.24c.15-.26,11.27-18.79,24.7-44.12H232a8,8,0,0,0,0-16ZM58.74,69.21C62.72,51.74,70.43,40,77.91,40c5.33,0,7.1,1.86,8.13,3.67,3,5.33,6.52,24.19-21.66,86.39C56.12,118.78,53.31,93,58.74,69.21Z'/></svg>"); }
.v2-body .admin-nav-tab[data-admin-tab="sala"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c4cad6'><path d='M200,152a31.84,31.84,0,0,0-19.53,6.68l-23.11-18A31.65,31.65,0,0,0,160,128c0-.74,0-1.48-.08-2.21l13.23-4.41A32,32,0,1,0,168,104c0,.74,0,1.48.08,2.21l-13.23,4.41A32,32,0,0,0,128,96a32.59,32.59,0,0,0-5.27.44L115.89,81A32,32,0,1,0,96,88a32.59,32.59,0,0,0,5.27-.44l6.84,15.4a31.92,31.92,0,0,0-8.57,39.64L73.83,165.44a32.06,32.06,0,1,0,10.63,12l25.71-22.84a31.91,31.91,0,0,0,37.36-1.24l23.11,18A31.65,31.65,0,0,0,168,184a32,32,0,1,0,32-32Zm0-64a16,16,0,1,1-16,16A16,16,0,0,1,200,88ZM80,56A16,16,0,1,1,96,72,16,16,0,0,1,80,56ZM56,208a16,16,0,1,1,16-16A16,16,0,0,1,56,208Zm56-80a16,16,0,1,1,16,16A16,16,0,0,1,112,128Zm88,72a16,16,0,1,1,16-16A16,16,0,0,1,200,200Z'/></svg>"); }

/* ═══════════════════════════════════════════════════════════════════
   STAGE + PANELES (zona central)
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .admin-stage {
  background: transparent;
  padding: 0;
}

.v2-body .admin-pane,
.v2-body .compact-panel {
  background: transparent;
  border: none;
  padding: 16px 20px 24px;
}

.v2-body .admin-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-body .admin-pane-header .drawer-eyebrow,
.v2-body .admin-pane-header > div > p:first-child {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin: 0 0 4px;
}

.v2-body .admin-pane-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.v2-body .admin-pane-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text);
}

/* text-align: left — el .muted de styles.css centra el texto, y el subtítulo de cada pestaña salía centrado y metido
   hacia dentro bajo un título alineado a la izquierda (visto en Valoraciones, detalle 2 del lote 3, 25-oct-2026; antes
   se parcheó pestaña a pestaña: Mensajes y «Actualizado» de Lo que espera tu OK). Se fija aquí, para todas. */
.v2-body .admin-pane-header .muted,
.v2-body .admin-pane-header p {
  font-size: 12px;
  color: var(--v2-text-muted);
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS dentro de paneles
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.v2-body .section-header h3,
.v2-body .section-header h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text);
  margin: 0;
}

.v2-body .section-header .muted,
.v2-body .section-header p {
  font-size: 11px;
  color: var(--v2-text-muted);
  margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .primary-button {
  background: var(--v2-accent);
  color: #0b0f1a;
  border: none;
  border-radius: var(--v2-radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.v2-body .primary-button:hover {
  background: #a5e0fc; /* azul pastel del logo, hover más claro (antes morado #a3acff) */
  transform: translateY(-0.5px);
}

.v2-body .ghost-button {
  background: var(--v2-card-bg);
  color: var(--v2-text-soft);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.v2-body .ghost-button:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
  color: var(--v2-text);
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-soft);
}

.v2-body .pill.subtle {
  background: rgba(255, 255, 255, 0.04);
  color: var(--v2-text-muted);
  border-color: transparent;
}

.v2-body .pill.success { background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.28); color: var(--v2-green); }
.v2-body .pill.warning { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.28); color: var(--v2-amber); }
.v2-body .pill.danger { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.28); color: var(--v2-red); }
.v2-body .pill.info { background: var(--v2-accent-soft); border-color: rgba(125, 211, 252, 0.22); color: var(--v2-accent); }

/* ═══════════════════════════════════════════════════════════════════
   PANELS DEL DIRECTOR / SECCIONES INTERNAS
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .admin-director-panel,
.v2-body .admin-director-chat,
.v2-body .admin-section {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.v2-body .admin-director-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v2-body .admin-director-chat-log {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--v2-radius-sm);
  padding: 10px 12px;
  min-height: 80px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--v2-text-soft);
}

.v2-body .admin-director-chat-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.v2-body .admin-director-chat-form textarea {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--v2-text);
  resize: vertical;
  font-family: inherit;
}

.v2-body .admin-director-chat-form textarea:focus {
  outline: none;
  border-color: var(--v2-accent);
  background: rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════════ */
.v2-body input[type="text"],
.v2-body input[type="email"],
.v2-body input[type="password"],
.v2-body input[type="number"],
.v2-body input[type="search"],
.v2-body input[type="tel"],
.v2-body input[type="url"],
.v2-body select,
.v2-body textarea {
  /* background-COLOR, no «background»: la forma corta borraba la flecha de la regla única de
     desplegables (styles.css, al final) en todo el panel (19-sep). */
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--v2-text);
  font-family: inherit;
  transition: all 0.15s ease;
}

.v2-body input:focus,
.v2-body select:focus,
.v2-body textarea:focus {
  outline: none;
  border-color: var(--v2-accent);
  background-color: rgba(0, 0, 0, 0.3);
}

.v2-body label {
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLAS (estilo CRM denso)
   ═══════════════════════════════════════════════════════════════════ */
.v2-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.v2-body th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  padding: 8px 10px;
  border-bottom: 1px solid var(--v2-border);
  background: rgba(255, 255, 255, 0.015);
}

.v2-body td {
  padding: 9px 10px;
  color: var(--v2-text-soft);
  border-bottom: 1px solid var(--v2-border);
}

/* ═══ Cuentas · que la tabla de Movimientos ENTRE en el hueco (paso 4, 20-sep-2026) ═══════════
   Dibujo aprobado: docs/diseno/paso4-cuentas-y-menu.html. Medido en producción antes de tocarla:
   la tabla ocupaba 1.186 px en un hueco de 1.088 —la columna «Acciones» y sus botones salían
   cortados por la derecha— y cada una de las 225 filas medía 78 px, que es lo que hacía de esta
   pantalla un rollo de 14.714 px.

   Las tres cuartas partes de esos 78 px estaban en la celda del concepto, que apilaba tres cosas:
   el concepto, el número de documento debajo y una nota SIEMPRE desplegada aunque estuviera vacía.

   🔑 Por qué estas reglas viven AQUÍ y no en styles.css, donde está el resto del módulo: al panel
   lo viste `.v2-body` (`.v2-body td`, unas líneas más arriba), y cualquier regla sin ese prefijo
   pierde por especificidad — se probó y no mordía. Van acotadas a `.admin-finance-table`, que
   existe SOLO en Cuentas: `.v2-body td` lo comparten las 34 pestañas del panel y no se toca. */
.v2-body .admin-finance-table td { padding: 4px 10px; }
.v2-body .admin-finance-table th { padding: 6px 10px; }

/* El número de documento, en la misma línea del concepto: era una línea entera por fila. */
.v2-body .finance-col-concepto small { display: inline; margin-left: 6px; opacity: .7; }

/* La nota vacía no ocupa sitio: sale al pasar el ratón por la fila o al llegar con el teclado.
   La nota ESCRITA se queda a la vista con su barrita, porque esa sí dice algo. */
.v2-body .finance-note-input:placeholder-shown {
  height: 0; margin-top: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
}
.v2-body .admin-finance-table tbody tr:hover .finance-note-input:placeholder-shown,
.v2-body .finance-note-input:placeholder-shown:focus {
  height: 22px; margin-top: 3px; opacity: .7; padding: 4px 6px; border-width: 1px;
}

/* ── Los filtros recogidos (paso 4, 20-sep-2026, dibujo docs/diseno/paso4-cuentas-filtros.html) ──
   Una sola línea: lo que está puesto, «+ Filtro» y el buscador. Los campos, debajo, solo cuando
   se piden. Medido antes: 228 px de formularios encima de la tabla. */
.cara-clara .admin-finance-filters {
  background: transparent; border: 0; padding: 0; margin: 0 0 12px; box-shadow: none;
}
.finance-filtros-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px;
}
.finance-filtros-activos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finance-filtros-barra .finance-filtro-buscar {
  margin-left: auto; min-width: 230px; max-width: 320px; flex: 0 1 auto;
}
.finance-filtros-barra .finance-filtro-buscar input { padding: 7px 12px; border-radius: 999px; }
.finance-rotulo-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Una pastilla por filtro puesto, con su ✕ para quitarlo de un toque. No es un componente nuevo:
   hereda de `.finance-pill`, la que ya marca Ingreso y Gasto en la tabla. */
.finance-filtro-pastilla {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 11px;
  border-radius: 999px; border: 1px solid var(--azul-borde, var(--line-strong));
  background: var(--info-bg, var(--panel-2)); color: var(--accion, var(--brand));
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.finance-filtro-pastilla button {
  width: 18px; height: 18px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(var(--brand-rgb), 0.13); color: inherit; font: inherit; font-size: 11px;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.finance-filtro-pastilla button:hover { background: rgba(var(--brand-rgb), 0.26); }
/* En el móvil la ✕ se toca con el dedo, así que la pastilla entera crece. */
@media (max-width: 900px) {
  .finance-filtro-pastilla { height: 40px; padding: 0 8px 0 14px; }
  .finance-filtro-pastilla button { width: 28px; height: 28px; font-size: 14px; }
}

.finance-filtros-mas {
  margin-top: 10px; padding: 13px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--panel-2);
}
.finance-filtros-mas .field-stack {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px;
}
@media (max-width: 900px) {
  .finance-filtros-mas .field-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.finance-filtros-mas #finance-clear-filters { margin-top: 12px; }
.finance-filtros-mas-btn[aria-expanded="true"] {
  background: var(--accion) !important; border-color: transparent !important;
  color: var(--brand-contrast) !important;
}

/* La vista abierta (Movimientos / Por categoría / Tesorería) se marca en el azul de la marca.
   La regla equivalente de styles.css no llegaba: dentro de la cara clara gana `.cara-clara .btn`,
   que es más específica — en la foto de producción los tres botones se veían iguales y no había
   forma de saber cuál estaba abierto. */
.cara-clara .finance-view-tab.is-active {
  background: var(--accion) !important; border-color: transparent !important;
  color: var(--brand-contrast) !important; font-weight: 700;
}
.cara-clara .finance-view-tab.is-active:hover { background: var(--accion-hover) !important; }

/* ─── FACTURAS QUE FALTAN (27-oct-2026) ───────────────────────────────────────────────────────
   La pastilla «¿Factura?» de Movimientos y Por categoría es un modificador de `.finance-pill` (la de
   Ingreso/Gasto), con los tokens semánticos de la cara clara: rojo = falta, verde = la tenemos, gris = no
   la lleva. Las listas son `.data-table` dentro de `.admin-table-wrap` y los botones `.btn`. */
.finance-pill.finance-pill-falta { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
.finance-pill.finance-pill-tenemos { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-border); }
.finance-pill.finance-pill-nolleva { color: var(--muted); background: var(--panel-2); border-color: var(--line-strong); font-weight: 600; }
.finance-col-factura { white-space: nowrap; }
.finance-factura-nada { color: var(--muted); }

.finance-facturas { display: grid; gap: 22px; }
/* Es hija de la rejilla de `.admin-finance-main`: sin esto crece con su tabla y en el móvil se sale por los lados. */
#finance-facturas, .finance-facturas, .finance-facturas-bloque { min-width: 0; }
/* La fila de pestañas (Movimientos · Por categoría · Tesorería · Facturas que faltan · …) no se partía: en el
   móvil medía 829 px y arrastraba con ella toda la columna de Cuentas, que se salía por los lados. Ahora baja de
   línea, y la columna mide lo que mide la pantalla (las tablas ya tienen su propio desplazamiento lateral). */
.admin-finance-main { grid-template-columns: minmax(0, 1fr); }
.admin-finance-main > .finance-view-tabs { flex-wrap: wrap; }
.finance-facturas-intro { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 72ch; }
.finance-facturas-bloque { display: grid; gap: 6px; }
.finance-facturas-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; font-size: var(--fs-lg); font-weight: 700;
}
.finance-facturas-titulo span { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-facturas-ayuda { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.finance-facturas-vacio { margin: 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); }
.finance-facturas-tenemos > summary { cursor: pointer; list-style-position: inside; }
.finance-facturas-quien strong { display: block; }
.finance-facturas-quien small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.finance-facturas-accion { text-align: right; white-space: nowrap; }
.finance-facturas-tabla tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.finance-facturas-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 10px 14px;
  border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-bg); color: var(--danger-text);
  font-size: var(--fs-sm); font-weight: 600;
}
/* En el móvil la fila no cabe a lo ancho: el botón baja debajo del nombre y ocupa el ancho del dedo. */
@media (max-width: 600px) {
  .finance-facturas-tabla .data-table,
  .finance-facturas-tabla .data-table tbody,
  .finance-facturas-tabla .data-table tfoot { display: block; width: 100%; }
  .finance-facturas-tabla .data-table thead { display: none; }
  .finance-facturas-tabla .data-table tbody tr {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline; padding: 10px 4px;
  }
  .finance-facturas-tabla .data-table tbody td { padding: 0; border: 0; background: transparent !important; }
  .finance-facturas-tabla .data-table tbody tr { border-bottom: 1px solid var(--line-strong); }
  .finance-facturas-tabla .finance-facturas-accion { grid-column: 1 / -1; text-align: left; }
  .finance-facturas-tabla .finance-facturas-accion .btn { width: 100%; min-height: 40px; }
  .finance-facturas-tabla tfoot tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 4px; }
  .finance-facturas-tabla tfoot td:last-child { display: none; }
  .finance-facturas-titulo { flex-wrap: wrap; }
}

/* La nota escrita se queda DENTRO de su celda. Sin esto se salía por la derecha y se montaba
   encima de «Importe» — se vio en la foto de producción, filas 99 y 110 (20-sep-2026). El
   `width: 100%` que trae de serie no cuenta el padding ni el borde si la caja no es border-box, y
   la celda del concepto no tiene ancho fijo: el textarea tiraba de ella. */
.v2-body .finance-col-concepto { overflow: hidden; }
.v2-body .finance-col-concepto .finance-note-input {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
}

/* Las dos columnas de casilla no necesitan el ancho de su rótulo, y «Categoría» no necesita
   crecer con el nombre más largo: entre las dos se iban casi los 98 px que sobraban. */
.v2-body .admin-finance-table .finance-col-check { width: 54px; text-align: center; }
.v2-body .admin-finance-table td:nth-child(4) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-body tr:hover td {
  background: var(--v2-card-bg-hover);
  color: var(--v2-text);
}

.v2-body tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════
   MUTED / SUBTLE TEXT
   ═══════════════════════════════════════════════════════════════════ */
.v2-body .muted {
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-body small.muted {
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS GENÉRICAS (info-grids dentro de secciones)
   Cubre admin-meta-card, admin-focus-card, admin-abogado-card,
   admin-action-plan-card, admin-agenda-*-card, admin-capi-*-card, etc.
   ═══════════════════════════════════════════════════════════════════ */
/* ─── EL COMODÍN, PARTIDO EN DOS (7-sep-2026, zona `diseno`) ─────────────────────────────────
   Este comodín daba forma Y color en la misma regla. Con dos selectores de atributo pesa (0,3,0)
   —(0,4,2) en la rama de filas— y le ganaba a `.admin-x-card.status-critico`, que pesa (0,2,0):
   MEDIDO en el panel real el 7-sep, las cuatro familias que tienen más de un estado en pantalla
   («enviado» y «con error», «correcto» e «informativo», «crítico» y «al día») salían las cuatro
   con el MISMO fondo y el MISMO borde. Un panel de control que no distingue urgente de tranquilo.

   El 6-sep se probó envolver el comodín entero en `:where(…)` y hubo que REVERTIRLO: al perder
   también el ancho de borde y el relleno, 32 elementos se quedaban sin marco. Por eso aquí se
   parte: la FORMA conserva su peso de siempre y el COLOR baja a cero, que es lo único que sobra. */

/* Forma: mismo peso que antes. Nadie se queda sin marco ni sin aire. */
.v2-body [class*="admin-"][class*="-card"],
.v2-body [class*="admin-"][class*="-row"]:not(.admin-nav-tabs):not(table tr) {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--v2-radius-sm);
  padding: 10px 12px;
  transition: all 0.15s ease;
}

/* Color de reposo: peso CERO, así cualquier regla de estado lo tapa esté donde esté. */
:where(.v2-body [class*="admin-"][class*="-card"]),
:where(.v2-body [class*="admin-"][class*="-row"]:not(.admin-nav-tabs):not(table tr)) {
  background: var(--v2-card-bg);
  border-color: var(--v2-border);
}

/* ─── EL RATÓN YA NO BORRA EL COLOR DE ESTADO (7-sep-2026, zona `diseno`) ────────────────────
   Este hover reescribía fondo y borde con peso (0,4,0), o sea por encima de cualquier
   `.admin-x-card.status-critico`: la tarjeta en rojo se volvía GRIS justo al ponerle el ratón
   encima, que es cuando la estás mirando. Afectaba a 12 familias con estado (el plan del
   Director, la agenda, el escalar/pausar de las campañas, los avisos de seguimiento…).

   Ahora el realce se SUPERPONE en vez de sustituir: una capa clarísima por dentro, que deja
   intacto el fondo que traiga el estado debajo. Y el refuerzo del borde baja a peso cero, así
   solo lo cogen las tarjetas que no traen color propio.

   🔴 Y NO se hace con `background-image`, que era lo primero que parecía limpio: **diez reglas de
   estado guardan su color en un DEGRADADO** —`bucket-scale`, `bucket-pause`, `decision-escalar`,
   `decision-pausar`, los cuatro `tone-*` de los avisos…— y una capa en `background-image` las
   habría borrado al pasar el ratón, que es exactamente el fallo que se venía a arreglar.
   El precio de hacerlo con `box-shadow`: `.admin-abogado-card` lleva sombra propia y la pierde
   mientras el ratón está encima. Es una sombra de 1 px contra diez señales de color. */
.v2-body [class*="admin-"][class*="-card"]:hover {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.02);
}

:where(.v2-body [class*="admin-"][class*="-card"]:hover) {
  border-color: var(--v2-border-strong);
}

/* ─── EL ESTADO DEL ASESOR VUELVE A TENER COLOR (6-sep-2026, zona `diseno`) ───────────────────
   La regla de arriba —`.v2-body [class*="admin-"][class*="-card"]`— pinta de gris TODO lo que se
   llame «admin-…-card», y con dos selectores de atributo gana a `.admin-followup-card.status-critico`.
   Efecto medido con el estilo computado: un asesor en CRÍTICO y uno AL DÍA salían con el mismo
   borde y el mismo fondo. No lo rompió el plegado de hoy; ya estaba así.
   Se repone aquí, DESPUÉS del comodín y con `.v2-body` delante para empatar en peso y ganar por
   orden. Ojo: hay ~64 reglas de estado en el resto del backoffice con el mismo problema. */
.v2-body .admin-followup-card-fold.status-critico,
.v2-body .admin-followup-card.status-critico {
  border-color: rgba(197, 101, 101, 0.45);
  background: rgba(197, 101, 101, 0.07);
}

.v2-body .admin-followup-card-fold.status-atencion,
.v2-body .admin-followup-card-fold.status-revision,
.v2-body .admin-followup-card.status-atencion,
.v2-body .admin-followup-card.status-revision {
  border-color: rgba(201, 151, 54, 0.42);
  background: rgba(201, 151, 54, 0.055);
}

.v2-body .admin-followup-card-fold.status-ok,
.v2-body .admin-followup-card.status-ok {
  border-color: rgba(47, 143, 107, 0.36);
}

/* Dentro del plegable la tarjeta no repite marco (el comodín se lo pone; se le quita aquí). */
.v2-body .admin-followup-card-fold .admin-followup-card {
  border: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}


/* Meta-card (label arriba + valor abajo, info compacta) */
.v2-body .admin-meta-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
}

.v2-body .admin-meta-card > span:first-child {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
}

.v2-body .admin-meta-card > strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text);
  line-height: 1.3;
}

/* Focus-card y derivados (Objetivo / Bloqueo / Riesgo / Siguiente hito) */
.v2-body .admin-focus-card,
.v2-body [class*="admin-"][class*="-focus"] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
}

.v2-body .admin-focus-card > span:first-child,
.v2-body [class*="admin-"][class*="-focus"] > span:first-child {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
}

.v2-body .admin-focus-card > strong,
.v2-body [class*="admin-"][class*="-focus"] > strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text);
}

/* Grids contenedores */
.v2-body [class*="admin-"][class*="-grid"] {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.v2-body .admin-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.v2-body .admin-focus-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Empty state (placeholders del tipo "Selecciona un lead...") */
.v2-body .admin-empty,
.v2-body .empty-state,
.v2-body [class*="-placeholder"]:not(input):not(textarea) {
  color: var(--v2-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--v2-border);
  border-radius: var(--v2-radius);
  background: rgba(255, 255, 255, 0.015);
}

/* Chips / Tags — partido en dos por lo mismo que el de las tarjetas (7-sep-2026, zona `diseno`).
   Pesa (0,3,0) y le ganaba a `.admin-filter-chip.active`, que pesa (0,2,0): **el filtro elegido se
   veía igual que los demás**. Pasa en los chips de Todos/Activos/Admins de Usuarios y en los de
   resultado de la Agenda (que además tenían color verde y salían grises). */
.v2-body .chip,
.v2-body [class*="admin-"][class*="-chip"],
.v2-body [class*="admin-"][class*="-tag"] {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  margin-right: 4px;
}

:where(.v2-body .chip),
:where(.v2-body [class*="admin-"][class*="-chip"]),
:where(.v2-body [class*="admin-"][class*="-tag"]) {
  background: var(--v2-card-bg);
  border-color: var(--v2-border);
  color: var(--v2-text-soft);
}

/* Toolbar (filtros, búsqueda) */
.v2-body [class*="admin-"][class*="-toolbar"],
.v2-body .admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
}

/* Lista de items (conversaciones, leads, usuarios...) */
.v2-body [class*="admin-"][class*="-list"] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v2-body [class*="admin-"][class*="-list-item"] {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.v2-body [class*="admin-"][class*="-list-item"]:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-body [class*="admin-"][class*="-list-item"].active,
.v2-body [class*="admin-"][class*="-list-item"][aria-selected="true"] {
  background: var(--v2-accent-soft);
  border-color: rgba(125, 211, 252, 0.4);
}

/* Action plan blocks (Director recomienda) */
.v2-body .admin-action-plan-card,
.v2-body .admin-action-plan-block {
  padding: 14px 16px;
}

/* Abogado cards (templates, contratos) */
.v2-body .admin-abogado-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.v2-body .admin-abogado-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.v2-body .admin-abogado-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Pantalla de login (admin-auth-screen) */
.v2-body .admin-auth-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 24px;
}

.v2-body .admin-auth-card,
.v2-body .admin-auth-screen > div,
.v2-body .admin-auth-screen form {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 28px 32px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v2-body .admin-auth-screen h2,
.v2-body .admin-auth-screen h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0;
  letter-spacing: -0.02em;
}

.v2-body .admin-auth-screen .muted {
  font-size: 12px;
  color: var(--v2-text-muted);
  margin: 4px 0 8px;
}

.v2-body .admin-auth-screen .primary-button {
  padding: 9px 14px;
  font-size: 13px;
  margin-top: 6px;
}

/* Botones que no deben partirse en 2 líneas */
.v2-body .primary-button,
.v2-body .ghost-button {
  white-space: nowrap;
}

/* Section dividers más limpios */
.v2-body hr,
.v2-body .admin-divider {
  border: none;
  height: 1px;
  background: var(--v2-border);
  margin: 12px 0;
}

/* Scrollbars discretas */
.v2-body ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.v2-body ::-webkit-scrollbar-track {
  background: transparent;
}
.v2-body ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.v2-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   ═══ ESTILO ESPECÍFICO RESUMEN (heredado de v5) ═══
   ═══════════════════════════════════════════════════════════════════ */
.v2-overview {
  --v2-bg: transparent;
  background: var(--v2-bg);
  padding: 16px 20px 24px;
  min-height: calc(100vh - 80px);
}

.v2-overview *, .v2-overview *::before, .v2-overview *::after {
  box-sizing: border-box;
}

/* Hero compacto */
.v2-overview .v2-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-overview .v2-hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin: 0 0 2px;
}

.v2-overview .v2-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.v2-overview .v2-hero-title span { color: var(--v2-accent); }
.v2-overview .v2-hero-sub { display: none; }

.v2-overview .v2-hero-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-overview .v2-hero-clock-icon { color: var(--v2-text-dim); flex-shrink: 0; }

.v2-overview .v2-hero-clock-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.v2-overview .v2-hero-clock #v2-clock-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.v2-overview .v2-hero-clock small {
  color: var(--v2-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Section headings interiores del Resumen */
.v2-overview .v2-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
}

.v2-overview .v2-section-heading:first-of-type { margin-top: 14px; }

.v2-overview .v2-section-heading-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  flex-shrink: 0;
}

.v2-overview .v2-section-heading-line {
  flex: 1;
  height: 1px;
  background: var(--v2-border);
}

.v2-overview .v2-overview-summary:empty { display: none; }
.v2-overview .v2-section-heading:has(+ .v2-overview-summary:empty) { display: none; }

/* Semáforo */
.v2-overview .v2-semaforo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 10px 12px;
  transition: all 0.15s ease;
}

.v2-overview .v2-semaforo-row:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-overview .v2-semaforo-badge { display: none; }

.v2-overview .v2-semaforo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v2-gray);
  flex-shrink: 0;
  margin-right: 2px;
}

.v2-overview .v2-semaforo-dot-pending { background: var(--v2-gray); }
.v2-overview .v2-semaforo-dot-ok { background: var(--v2-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16); }
.v2-overview .v2-semaforo-dot-warn { background: var(--v2-amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.v2-overview .v2-semaforo-dot-error { background: var(--v2-red); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }

.v2-overview .v2-semaforo-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-overview .v2-semaforo-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text);
}

.v2-overview .v2-semaforo-text small {
  font-size: 12px;
  color: var(--v2-text-muted);
}

.v2-overview .v2-semaforo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--v2-accent);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  transition: background 0.15s ease;
  margin-left: auto;
}

.v2-overview .v2-semaforo-link:hover { background: var(--v2-accent-soft); }

/* Cards primarias */
.v2-overview .v2-metrics-primary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.v2-overview .v2-metric-card {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: all 0.15s ease;
}

.v2-overview .v2-metric-card[data-accent="indigo"]  { --accent-color: var(--v2-indigo); }
.v2-overview .v2-metric-card[data-accent="amber"]   { --accent-color: var(--v2-amber); }
.v2-overview .v2-metric-card[data-accent="emerald"] { --accent-color: var(--v2-emerald); }
.v2-overview .v2-metric-card[data-accent="sky"]     { --accent-color: var(--v2-sky); }

.v2-overview .v2-metric-card:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-overview .v2-metric-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-color, var(--v2-text-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  opacity: 0.85;
}

.v2-overview .v2-metric-icon svg { width: 16px; height: 16px; }

.v2-overview .v2-metric-card strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 2px;
}

.v2-overview .v2-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-soft);
}

.v2-overview .v2-metric-card small {
  font-size: 10px;
  color: var(--v2-text-muted);
  margin-top: 2px;
}

/* Cards secundarias */
.v2-overview .v2-metrics-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v2-overview .v2-mini-card {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.v2-overview .v2-mini-card:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-overview .v2-mini-icon {
  width: 22px;
  height: 22px;
  color: var(--v2-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.v2-overview .v2-mini-icon svg { width: 14px; height: 14px; }

.v2-overview .v2-mini-text {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.v2-overview .v2-mini-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}

.v2-overview .v2-mini-text small {
  font-size: 11px;
  color: var(--v2-text-muted);
}

.v2-overview .v2-mini-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin-left: auto;
}

/* Resumen dinámico */
.v2-overview .v2-overview-summary {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 12px 14px;
  color: var(--v2-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .v2-overview .v2-metrics-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .v2-overview { padding: 12px; }
  .v2-overview .v2-hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v2-overview .v2-metrics-primary, .v2-overview .v2-metrics-secondary { grid-template-columns: 1fr; }
}

/* ─── Variables ──────────────────────────────────────────────────── */
.v2-overview {
  --v2-bg: transparent;
  --v2-card-bg: rgba(255, 255, 255, 0.035);
  --v2-card-bg-hover: rgba(255, 255, 255, 0.055);
  --v2-border: rgba(255, 255, 255, 0.07);
  --v2-border-strong: rgba(255, 255, 255, 0.13);
  --v2-text: #f1f4f9;
  --v2-text-soft: #c4cad6;
  --v2-text-muted: #828a99;
  --v2-text-dim: #5d6471;
  --v2-accent: #7dd3fc; /* azul claro pastel del logo TRIA (antes morado #8b95ff) */
  --v2-accent-soft: rgba(125, 211, 252, 0.12);
  --v2-indigo: #818cf8;
  --v2-amber: #fbbf24;
  --v2-emerald: #34d399;
  --v2-sky: #38bdf8;
  --v2-green: #4ade80;
  --v2-red: #f87171;
  --v2-gray: #6b7280;
  --v2-radius: var(--radius-sm);    /* alias de la escala única (styles.css, :root SERENO — tanda R) */
  --v2-radius-sm: var(--radius-sm);

  /* "Inter Var" = la Inter LOCAL (@font-face en styles.css → /fonts/inter-latin.woff2).
     Antes pedía 'Inter' al CDN de Google, que la CSP bloquea: no cargaba nunca. */
  font-family: "Inter Var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--v2-bg);
  padding: 16px 20px 24px;
  min-height: calc(100vh - 80px);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.v2-overview *, .v2-overview *::before, .v2-overview *::after {
  box-sizing: border-box;
}

/* ─── Hero compacto ──────────────────────────────────────────────── */
.v2-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin: 0 0 2px;
}

.v2-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.v2-hero-title span {
  color: var(--v2-accent);
}

.v2-hero-sub {
  display: none; /* fuera, ya se ve por contexto */
}

.v2-hero-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-hero-clock-icon { color: var(--v2-text-dim); flex-shrink: 0; }

.v2-hero-clock-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.v2-hero-clock #v2-clock-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.v2-hero-clock small {
  color: var(--v2-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

/* ─── Section heading minimal ─────────────────────────────────────── */
.v2-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
}

.v2-section-heading:first-of-type { margin-top: 14px; }

.v2-section-heading-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  flex-shrink: 0;
}

.v2-section-heading-line {
  flex: 1;
  height: 1px;
  background: var(--v2-border);
}

/* Si la sección dinámica está vacía, oculta también su heading anterior.
   Lo hacemos con :has() — moderno pero funciona en Chrome 105+ */
.v2-overview-summary:empty {
  display: none;
}
.v2-section-heading:has(+ .v2-overview-summary:empty) {
  display: none;
}

/* ─── Semáforo Director compacto ─────────────────────────────────── */
.v2-semaforo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 10px 12px;
  transition: all 0.15s ease;
  position: relative;
}

.v2-semaforo-row:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-semaforo-badge { display: none; }

.v2-semaforo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v2-gray);
  flex-shrink: 0;
  margin-right: 2px;
}

.v2-semaforo-dot-pending { background: var(--v2-gray); }
.v2-semaforo-dot-ok { background: var(--v2-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16); }
.v2-semaforo-dot-warn { background: var(--v2-amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.v2-semaforo-dot-error { background: var(--v2-red); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }

.v2-semaforo-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-semaforo-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text);
}

.v2-semaforo-text small {
  font-size: 12px;
  color: var(--v2-text-muted);
  font-weight: 400;
}

.v2-semaforo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--v2-accent);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  transition: background 0.15s ease;
  margin-left: auto;
}

.v2-semaforo-link:hover { background: var(--v2-accent-soft); }

/* ─── Cards principales (4 en grid, COMPACTAS) ───────────────────── */
.v2-metrics-primary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.v2-metric-card {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  transition: all 0.15s ease;
}

.v2-metric-card[data-accent="indigo"]  { --accent-color: var(--v2-indigo); }
.v2-metric-card[data-accent="amber"]   { --accent-color: var(--v2-amber); }
.v2-metric-card[data-accent="emerald"] { --accent-color: var(--v2-emerald); }
.v2-metric-card[data-accent="sky"]     { --accent-color: var(--v2-sky); }

.v2-metric-card:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-metric-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-color, var(--v2-text-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  opacity: 0.85;
}

.v2-metric-icon svg { width: 16px; height: 16px; }

.v2-metric-card strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 2px;
}

.v2-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-soft);
}

.v2-metric-card small {
  font-size: 10px;
  color: var(--v2-text-muted);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* ─── Cards secundarias compactas (todo en una línea) ────────────── */
.v2-metrics-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v2-mini-card {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.v2-mini-card:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-mini-icon {
  width: 22px;
  height: 22px;
  color: var(--v2-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.v2-mini-icon svg { width: 14px; height: 14px; }

.v2-mini-text {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.v2-mini-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.v2-mini-text small {
  font-size: 11px;
  color: var(--v2-text-muted);
  font-weight: 400;
}

.v2-mini-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-text-dim);
  margin-left: auto;
}

/* ─── Fixes auditoría 2026-06-03 (rojos + naranjas + finos) ─────────── */

/* 1) Sidebar con scroll propio para no cortarse en pantallas bajas. */
.v2-body .admin-nav-rail,
.v2-body aside.admin-shell-aside,
.v2-body aside[class*="admin-shell"] {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* 2) Layout: evitar overflow horizontal cuando panes anchos empujan viewport. */
.v2-body .admin-stage,
.v2-body .admin-pane,
.v2-body .admin-pane > *,
.v2-body .compact-panel,
.v2-body .compact-panel > * {
  min-width: 0;
}
.v2-body,
.v2-body .admin-shell,
.v2-body main {
  overflow-x: hidden;
}

/* 7) Conversaciones: chips de filtros en fila con scroll horizontal. */
.v2-body #admin-pane-conversations .admin-filter-chips,
.v2-body #admin-pane-conversations [class*="chip-group"],
.v2-body #admin-pane-conversations [class*="filter-chips"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

/* 8) Cost: header con badge cache integrado. */
.v2-body #admin-pane-cost > header,
.v2-body #admin-pane-cost .admin-pane-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
}

/* 10) Seguimiento: padding-bottom para que Alertas Ejecutivas no se corte. */
.v2-body #admin-pane-followup {
  padding-bottom: 24px;
}

/* 11) Meta Leads: limitar texto largo a 3 líneas. */
.v2-body #admin-pane-meta [class*="lead-detail"] [class*="description"],
.v2-body #admin-pane-meta [class*="lead-card"] p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 12) Equipo + Cost: números con alineación tabular. */
.v2-body #admin-pane-team table td,
.v2-body #admin-pane-team [class*="number"],
.v2-body #admin-pane-cost table td,
.v2-body #admin-pane-cost [class*="metric"] {
  font-variant-numeric: tabular-nums;
}

/* ─── Sub-tabs dentro de panes (navegación entre vistas relacionadas) ── */
.v2-body .v2-pane-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  width: fit-content;
}

.v2-body .v2-pane-subtab {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-muted);
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.v2-body .v2-pane-subtab:hover {
  background: var(--v2-card-bg-hover);
  color: var(--v2-text);
}

.v2-body .v2-pane-subtab.is-active {
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
  font-weight: 600;
}

/* ─── Sugerencias proactivas (lo que importa ahora) ──────────────── */
.v2-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.v2-suggestion {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.v2-suggestion::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-color, var(--v2-accent));
  opacity: 0.7;
}

.v2-suggestion[data-level="critico"] { --accent-color: var(--v2-red); }
.v2-suggestion[data-level="warn"]    { --accent-color: var(--v2-amber); }
.v2-suggestion[data-level="info"]    { --accent-color: var(--v2-sky); }

.v2-suggestion:hover {
  background: var(--v2-card-bg-hover);
  border-color: var(--v2-border-strong);
}

.v2-suggestion-head { display: flex; align-items: center; gap: 8px; }

.v2-suggestion-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--accent-color, var(--v2-accent));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.v2-suggestion-title {
  font-size: 13px; font-weight: 600; color: var(--v2-text);
  flex: 1; letter-spacing: -0.005em;
}

.v2-suggestion-count {
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-color, var(--v2-accent));
  color: #0b0f1a; letter-spacing: 0.02em;
}

.v2-suggestion-body { font-size: 12px; color: var(--v2-text-soft); line-height: 1.45; }

.v2-suggestion-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  color: var(--v2-accent);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 5px;
  align-self: flex-start;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
}

.v2-suggestion-cta:hover { background: var(--v2-accent-soft); }

/* ─── Resumen dinámico del JS ────────────────────────────────────── */
.v2-overview-summary {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 12px 14px;
  color: var(--v2-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.v2-overview-summary h3, .v2-overview-summary h4 {
  color: var(--v2-text);
  font-weight: 600;
  font-size: 13px;
  margin-top: 10px;
}

.v2-overview-summary h3:first-child, .v2-overview-summary h4:first-child {
  margin-top: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .v2-metrics-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .v2-overview { padding: 12px; }
  .v2-hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v2-metrics-primary, .v2-metrics-secondary { grid-template-columns: 1fr; }
}

/* Mapa de agentes — organigrama visual (Director + agentes). Colores de estado por tokens. */
.agent-map { padding: 6px 0; }
.agent-map-tree { display: flex; flex-direction: column; align-items: center; }
.agent-map-top { display: flex; justify-content: center; }
.agent-map-connector { width: 2px; height: 22px; background: var(--line, rgba(255, 255, 255, 0.2)); }
.agent-map-children { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; border-top: 2px solid var(--line, rgba(255, 255, 255, 0.2)); padding-top: 18px; width: 100%; }
.agent-node { min-width: 150px; max-width: 210px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--panel-2, #2c3036); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); border-left: 4px solid var(--muted, #888); }
.agent-map-top .agent-node { min-width: 230px; border-left-width: 5px; }
.agent-node-green { border-left-color: var(--success, #2f8f6b); }
.agent-node-amber { border-left-color: var(--warning, #c99736); }
.agent-node-red { border-left-color: var(--danger, #c56565); }
.agent-node-name { font-weight: 600; color: var(--text, #f4f5f7); font-size: var(--fs-md); }
.agent-node-lock { font-size: var(--fs-3xs); background: var(--panel-4, #40454f); padding: 1px 6px; border-radius: var(--radius-sm); color: var(--muted, #a3abb6); vertical-align: middle; }
.agent-node-pending { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted, #a3abb6); }
.agent-node-amber .agent-node-pending, .agent-node-red .agent-node-pending { color: var(--text, #f4f5f7); font-weight: 600; }
.agent-map-foot { margin-top: 16px; text-align: center; font-size: var(--fs-sm); color: var(--muted, #a3abb6); }
.agent-map-loading, .agent-map-empty { padding: 22px; text-align: center; color: var(--muted, #a3abb6); }

/* Mapa del SISTEMA por niveles (panel Jarvis): 5 capas, Fundador arriba → Ejecución abajo. */
.system-map { padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
.system-map-intro { max-width: 680px; text-align: center; font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin-bottom: 14px; line-height: 1.5; }
.system-level-connector { width: 2px; height: 20px; background: var(--line, rgba(255, 255, 255, 0.2)); }
.system-level { width: 100%; max-width: 760px; background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255, 255, 255, 0.12)); border-radius: var(--radius-lg); padding: 14px 16px; }
.system-level-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.system-level-chip { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-weight: 700; font-size: var(--fs-lg); color: var(--text, #f4f5f7); background: var(--panel-4, #40454f); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); }
.system-level-title { font-weight: 700; color: var(--text, #f4f5f7); font-size: var(--fs-lg); }
.system-level-sub { font-size: var(--fs-xs); color: var(--muted, #a3abb6); margin-top: 2px; line-height: 1.4; }
.system-level-nodes { display: flex; flex-wrap: wrap; gap: 10px; }
.system-node { flex: 1 1 150px; min-width: 140px; max-width: 220px; text-align: left; cursor: pointer; padding: 11px 13px; border-radius: var(--radius-md); background: var(--panel-2, #2c3036); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); border-left: 4px solid var(--muted, #888); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.system-node:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.system-node:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.system-node-green { border-left-color: var(--success, #2f8f6b); }
.system-node-amber { border-left-color: var(--warning, #c99736); }
.system-node-red { border-left-color: var(--danger, #c56565); }
.system-node-idle { border-left-color: var(--muted, #888); opacity: 0.72; border-style: dashed; }
.system-node-kind-human { border-left-color: var(--link); background: var(--panel-4, #40454f); }
.system-node-head { display: flex; align-items: center; gap: 9px; }
.system-node-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); color: #fff; object-fit: cover; }
.system-node-emoji { font-size: var(--fs-xl); line-height: 1; filter: saturate(1.1); }
img.system-node-avatar { object-fit: contain; padding: 4px; background: none; }
.system-node-titles { min-width: 0; }
.system-node-name { font-weight: 600; color: var(--text, #f4f5f7); font-size: var(--fs-md); }
.system-node-role { font-size: var(--fs-2xs); color: var(--muted, #a3abb6); margin-top: 1px; }
/* Paleta de avatares (12 colores deterministas por agente; sin estilos inline = CSP). */
.sys-avatar-c0  { background: hsl(  8, 62%, 50%); }
.sys-avatar-c1  { background: hsl( 38, 60%, 47%); }
.sys-avatar-c2  { background: hsl( 60, 45%, 42%); }
.sys-avatar-c3  { background: hsl( 96, 42%, 42%); }
.sys-avatar-c4  { background: hsl(150, 48%, 40%); }
.sys-avatar-c5  { background: hsl(175, 52%, 38%); }
.sys-avatar-c6  { background: hsl(198, 60%, 45%); }
.sys-avatar-c7  { background: hsl(216, 62%, 54%); }
.sys-avatar-c8  { background: hsl(244, 52%, 58%); }
.sys-avatar-c9  { background: hsl(270, 48%, 55%); }
.sys-avatar-c10 { background: hsl(300, 45%, 50%); }
.sys-avatar-c11 { background: hsl(330, 58%, 52%); }
.system-node-state { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted, #a3abb6); }
.system-node-activity { margin-top: 3px; font-size: var(--fs-2xs); color: var(--link); }
.system-idea-activity { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--link); }
.system-recent { margin: 0 0 14px; }
.system-recent-head { font-size: var(--fs-sm); font-weight: 600; color: var(--muted, #a3abb6); margin-bottom: 6px; }
.system-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.system-recent-item { font-size: var(--fs-sm); color: var(--text, #f4f5f7); line-height: 1.4; padding: 6px 9px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); }
.system-recent-date { color: var(--muted, #a3abb6); font-size: var(--fs-2xs); margin-right: 6px; }
/* Ficha del agente: cabecera (avatar grande + nombre + rol + estado) + madurez + pestañas. */
.system-agent-head { display: flex; align-items: center; gap: 12px; margin: 0 26px 10px 0; }
.system-agent-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xl); color: #fff; }
img.system-agent-avatar { object-fit: contain; padding: 7px; background: none; }
.system-agent-titles { min-width: 0; }
.system-idea-role { font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin-top: 1px; }
.system-agent-state { font-size: var(--fs-xs); color: var(--link); margin-top: 4px; }
.system-maturity { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.18); }
.system-mat-bar { display: flex; gap: 4px; margin-bottom: 7px; }
.system-mat-seg { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.system-mat-seg.on { background: var(--success, #2f8f6b); }
.system-mat-label { font-size: var(--fs-sm); color: var(--text, #f4f5f7); }
.system-mat-next { font-size: var(--fs-xs); color: var(--muted, #a3abb6); margin-top: 3px; line-height: 1.4; }
.system-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.12)); margin-bottom: 12px; }
.system-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted, #a3abb6); font: inherit; font-size: var(--fs-sm); padding: 7px 11px; cursor: pointer; margin-bottom: -1px; }
.system-tab:hover { color: var(--text, #f4f5f7); }
.system-tab.is-active { color: var(--text, #f4f5f7); border-bottom-color: var(--link); font-weight: 600; }
.system-tabpanel[hidden] { display: none; }
.system-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.system-metric { display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.18); min-width: 84px; }
.system-metric-val { font-size: 1.2rem; font-weight: 700; color: var(--link); line-height: 1.1; }
.system-metric-key { font-size: var(--fs-2xs); color: var(--muted, #a3abb6); margin-top: 2px; }
.system-node-amber .system-node-state, .system-node-red .system-node-state { color: var(--text, #f4f5f7); font-weight: 600; }
.system-node-state-idle { font-style: italic; }

/* ── MAPA HONESTO: estado de ejecución (ejecuta / asistido / pausado) ──────────
   Pastilla en cada nodo + banner en la ficha. Distinguible por COLOR, TEXTO y
   forma del punto (no solo color, por accesibilidad). Tokens del sistema con
   fallback (mismo patrón que el resto del archivo). */
.system-exec { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; line-height: 1.5; border: 1px solid transparent; }
.system-exec-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.system-exec-ejecuta { color: var(--success, #2f8f6b); background: rgba(47, 143, 107, 0.14); border-color: rgba(47, 143, 107, 0.4); }
.system-exec-asistido { color: var(--warning, #c99736); background: rgba(201, 151, 54, 0.14); border-color: rgba(201, 151, 54, 0.4); }
/* Pausado: rojo apagado + punto hueco (forma distinta) para que no dependa solo del color. */
.system-exec-pausado { color: var(--danger, #c56565); background: rgba(197, 101, 101, 0.14); border-color: rgba(197, 101, 101, 0.44); }
.system-exec-pausado .system-exec-dot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.system-exec-gated { margin-left: 4px; font-weight: 500; opacity: 0.85; }

/* Leyenda del mapa: explica los tres estados de un vistazo. */
.system-exec-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; padding: 9px 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.16); border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.system-exec-legend .system-exec { margin-top: 0; }
.system-exec-legend-title { font-size: var(--fs-xs); font-weight: 600; color: var(--text, #f4f5f7); margin-right: 4px; }
.system-exec-legend-desc { font-size: var(--fs-2xs); color: var(--muted, #a3abb6); margin-right: 8px; }

/* Banner de estado en la ficha de la pieza (openSystemIdeaPanel). */
.system-exec-banner { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-md); border-left: 4px solid var(--muted, #888); background: rgba(0, 0, 0, 0.18); }
.system-exec-banner.system-exec-ejecuta { border-left-color: var(--success, #2f8f6b); }
.system-exec-banner.system-exec-asistido { border-left-color: var(--warning, #c99736); }
.system-exec-banner.system-exec-pausado { border-left-color: var(--danger, #c56565); }
.system-exec-banner-head { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: var(--text, #f4f5f7); }
.system-exec-banner.system-exec-ejecuta .system-exec-dot { background: var(--success, #2f8f6b); }
.system-exec-banner.system-exec-asistido .system-exec-dot { background: var(--warning, #c99736); }
.system-exec-banner.system-exec-pausado .system-exec-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--danger, #c56565); }
.system-exec-banner-why { font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin-top: 5px; line-height: 1.45; }

@media (max-width: 640px) {
  .system-node { flex-basis: 100%; max-width: none; }
}

/* Panel "dar una idea" sobre una pieza del sistema (interactividad del mapa Jarvis). */
.system-idea-overlay { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.62); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.system-idea-panel { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.system-idea-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted, #a3abb6); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
.system-idea-close:hover { color: var(--text, #f4f5f7); background: var(--panel-4, #40454f); }
.system-idea-title { margin: 0 26px 6px 0; font-size: var(--fs-xl); color: var(--text, #f4f5f7); }
.system-idea-scope { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted, #a3abb6); line-height: 1.5; }
.system-idea-state { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--muted, #a3abb6); }
.system-idea-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text, #f4f5f7); margin-bottom: 6px; }
.system-idea-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 88px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.22); color: var(--text, #f4f5f7); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); font: inherit; }
.system-idea-textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.18); }
.system-idea-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.system-idea-feedback { margin: 12px 0 0; font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--radius-sm); }
.system-idea-feedback-ok { color: var(--text, #f4f5f7); background: rgba(47, 143, 107, 0.18); border: 1px solid var(--success, #2f8f6b); }
.system-idea-feedback-err { color: var(--text, #f4f5f7); background: rgba(197, 101, 101, 0.18); border: 1px solid var(--danger, #c56565); }
/* Historial de ideas previas de la pieza, dentro del modal. */
.system-idea-history { margin: 0 0 14px; }
.system-idea-hist-title { font-size: var(--fs-sm); font-weight: 600; color: var(--muted, #a3abb6); margin-bottom: 6px; }
.system-idea-hist-list { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.system-idea-hist-item { font-size: var(--fs-sm); color: var(--text, #f4f5f7); line-height: 1.45; padding: 7px 9px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); border-left: 3px solid var(--link); }
.system-idea-hist-date { color: var(--muted, #a3abb6); font-size: var(--fs-xs); margin-right: 6px; }
.system-idea-hist-empty, .system-idea-hist-loading { font-size: var(--fs-sm); color: var(--muted, #a3abb6); font-style: italic; margin: 0; }
/* Desglose de "lo que tiene pendiente" la pieza, dentro del modal. */
.system-idea-pending { margin: 0 0 14px; }
.system-pending-head { font-size: var(--fs-sm); font-weight: 600; color: var(--muted, #a3abb6); margin-bottom: 6px; }
.system-pending-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.system-pending-item { font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); border-left: 3px solid var(--warning, #c99736); }
.system-pending-item.system-pending-diseno { border-left-color: var(--link); }
.system-pending-item.system-pending-regla { border-left-color: var(--success, #2f8f6b); }
.system-pending-title { color: var(--text, #f4f5f7); font-weight: 600; line-height: 1.4; }
.system-pending-detail { color: var(--muted, #a3abb6); margin-top: 2px; line-height: 1.4; }
.system-pending-more { font-size: var(--fs-xs); color: var(--muted, #a3abb6); font-style: italic; padding: 4px 10px; list-style: none; }
/* Vista global "Ideas dadas" (agrupadas por pieza). */
.admin-pane-header-actions { display: flex; gap: 8px; align-items: center; }
.system-idea-panel-wide { max-width: 620px; }
.system-ideas-all-count { font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin: 0 0 14px; }
.system-ideas-group { margin-bottom: 16px; }
.system-ideas-group-head { font-size: var(--fs-md); font-weight: 600; color: var(--text, #f4f5f7); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.system-ideas-group-count { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted, #a3abb6); background: var(--panel-4, #40454f); border-radius: var(--radius-sm); padding: 1px 8px; }

/* ─── Incremento 3: acciones de escritura en la ficha + alta + confirmación ─── */
.opp-confirm-overlay { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 16px; }
.opp-confirm-panel { width: 100%; max-width: 420px; background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255, 255, 255, 0.18)); border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.opp-confirm-text { margin: 0 0 16px; font-size: var(--fs-md); color: var(--text, #f4f5f7); line-height: 1.5; }
.opp-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; }

/* ─── Pestaña "Captación de comerciales" (grupo Dirección) ─── */
.captacion-plan { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.captacion-plan li { color: var(--text, #f4f5f7); line-height: 1.45; }
.captacion-plan-item label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.captacion-plan-item input { margin-top: 3px; flex: none; }
.captacion-plan-done { text-decoration: line-through; opacity: 0.55; }
.captacion-post-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.captacion-post-options[hidden] { display: none; }
.captacion-post-option { border: 1px solid var(--line, rgba(255,255,255,0.12)); border-radius: var(--radius-md); padding: 12px; background: var(--panel-3, rgba(255,255,255,0.03)); }
.captacion-post-option-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.captacion-post-option p { margin: 0; color: var(--text, #f4f5f7); white-space: pre-wrap; line-height: 1.45; }
.captacion-post-pick { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.captacion-historial-item { border-top: 1px solid var(--line, rgba(255,255,255,0.08)); padding: 12px 0; }
.captacion-historial-item:first-child { border-top: none; }
.captacion-historial-item p { margin: 4px 0 8px; color: var(--text, #f4f5f7); white-space: pre-wrap; line-height: 1.4; }
.captacion-historial-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.captacion-metrics { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.captacion-metrics label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted, #a3abb6); }
.captacion-metrics input { width: 92px; }
.captacion-analitica { margin-bottom: 14px; }
.captacion-analitica-top { padding: 10px 12px; border-radius: var(--radius-md); background: rgba(47, 143, 107, 0.12); border: 1px solid rgba(47, 143, 107, 0.3); color: var(--text, #f4f5f7); margin-bottom: 10px; }
.captacion-post-text { margin-top: 4px; }
.captacion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.captacion-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted, #a3abb6); }
.captacion-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); color: var(--text, #f4f5f7); border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); font: inherit; }
.captacion-input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.18); }
.captacion-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.captacion-progress { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }
.captacion-progress-label { font-size: var(--fs-sm); color: var(--text, #f4f5f7); }
.captacion-progress-track { font-size: var(--fs-md); letter-spacing: 1px; color: var(--link); }
.captacion-lead-form { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr 1.5fr; gap: 10px; margin-bottom: 10px; }
.captacion-leads { width: 100%; margin-top: 12px; }
.captacion-lead-actions { display: flex; gap: 8px; white-space: nowrap; }
.captacion-lead-actions button { background: none; border: 1px solid var(--line, rgba(255, 255, 255, 0.16)); color: var(--muted, #a3abb6); border-radius: var(--radius-sm); padding: 3px 9px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.captacion-lead-actions button:hover { color: var(--text, #f4f5f7); border-color: var(--link); }
.captacion-lead-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: rgba(110, 168, 254, 0.14); color: var(--link); border: 1px solid rgba(110, 168, 254, 0.32); }
.captacion-lead-badge-incorporado { background: rgba(47, 143, 107, 0.18); color: #57c79a; border-color: rgba(47, 143, 107, 0.5); }
.captacion-lead-badge-descartado { background: rgba(163, 171, 182, 0.12); color: var(--muted, #a3abb6); border-color: rgba(163, 171, 182, 0.3); }
@media (max-width: 720px) { .captacion-lead-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { #cap2-candidato .captacion-lead-form { grid-template-columns: 1fr; } }
/* Tarea 144 (30-oct): en móvil el «Agendar» de la ficha va en una columna; el campo de fecha no encoge y se salía del borde a 390. */
@media (max-width: 480px) { [data-cap2-agendar-de].captacion-lead-form { grid-template-columns: 1fr; } }
/* ─── Pantalla de captación (dibujo aprobado el 7-oct-2026) ───
   Cada bloque contesta una pregunta (NORMA 2): frase con el dato → porqué → cuerpo. Color siempre con
   palabra. Solo tokens; espacios de 4 en 4; dos esquinas (--radius-sm, --radius-md). Nada se anima. */
/* Pregunta arriba, frase con el dato debajo y el porqué al final: en columna, no repartidos en fila. */
.v2-body #admin-pane-captacion .section-header { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
#admin-pane-captacion .section-header p { margin: 0; text-align: left; }
#admin-pane-captacion [id^="cap2-"] p, #admin-pane-captacion .cap2-ficha p { text-align: left; }
#admin-pane-captacion .section-header .captacion-frase { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.cap2-aviso { color: var(--warning); font-weight: 600; }
.cap2-nota { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text); }
.cap2-nota a { color: var(--link); }
.cap2-num { display: inline-block; min-width: 20px; padding: 0 8px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cap2-scroll { overflow-x: auto; }
.cap2-scroll .data-table { min-width: 640px; }
.cap2-tabla-num td:nth-child(3), .cap2-tabla-num td:nth-child(4), .cap2-tabla-num td:nth-child(6), .cap2-num-col { font-variant-numeric: tabular-nums; }
.cap2-total td { font-weight: 600; }
.cap2-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.cap2-chip-en_marcha, .cap2-chip-solo { color: var(--success); }
.cap2-chip-por_probar, .cap2-chip-tu_si { color: var(--link); }
.cap2-chip-por_decidir, .cap2-chip-falta { color: var(--warning); }
.cap2-chip-al_final, .cap2-chip-descartado { color: var(--muted); }
.cap2-chip-falla { color: var(--danger-text); }
/* Fase 2 (8-oct-2026): la pestaña en una página (dibujo 6) */
.cap2-fallos { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--danger-border); border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-text); font-size: var(--fs-sm); }
.cap2-fallos ul { margin: 6px 0 0; padding-left: 18px; }
.cap2-sec { scroll-margin-top: 16px; }
.cap2-dec-llamar { border-color: var(--warning); }
.cap2-ficha-tria { cursor: default; border-style: dashed; }
.cap2-decide { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cap2-decide-t { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.cap2-fila-decide td { background: var(--panel-2); }
.cap2-opinion summary { cursor: pointer; font-size: var(--fs-sm); color: var(--link); }
.cap2-opinion[open] summary { margin-bottom: 8px; }
.cap2-opinion-txt { width: 100%; min-height: 72px; resize: vertical; font: inherit; }
/* Fase 3 (8-oct): «Dile al sistema qué hacer» y «Lo que he aprendido de ti». Mismos controles que la opinión. */
.cap2-hablar-form { display: grid; gap: 8px; }
.cap2-hablar-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cap2-hablar-resp { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--panel-2); font-size: var(--fs-sm); display: grid; gap: 8px; }
.cap2-hablar-resp p { margin: 0; }
.cap2-hablar-resp blockquote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--accent); color: var(--text); }
/* Tareas de la caja en «Tu turno»: qué pasó y su botón (fase 3, 8-oct-2026) */
.cap2-lista li.cap2-pedido { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; justify-content: space-between; }
.cap2-pedido > div { display: grid; gap: 2px; min-width: 0; }
.cap2-pedido-res { white-space: pre-line; overflow-wrap: anywhere; }
.cap2-pedido > .btn { flex: none; }
.cap2-normas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cap2-normas li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.cap2-normas li > div { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.cap2-embudo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cap2-embudo li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: baseline; font-size: var(--fs-sm); color: var(--text); }
.cap2-emb-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ¿Qué hay que hacer? */
.cap2-tareas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cap2-tareas-grupo { min-width: 0; }
.cap2-tareas-grupo h4, .cap2-columna h4, .cap2-cadena h4 { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text); display: flex; align-items: center; gap: 8px; }
.cap2-tareas-grupo ul, .cap2-hitos, .cap2-reglas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cap2-tareas-grupo li, .cap2-reglas li { font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
/* ¿Cómo vamos? */
.cap2-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .cap2-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap2-cifra { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.cap2-cifra-n { font-size: var(--fs-lg); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cap2-cifra-t { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cap2-cifra-nota { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
/* Tablero por etapas */
.cap2-tablero { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; }
.cap2-columna { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--panel-2); }
.cap2-columna h4 { margin: 0; padding: 4px; }
.cap2-vacio { margin: 0; padding: 4px; font-size: var(--fs-xs); text-align: left; }
.cap2-ficha { display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.cap2-ficha-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 8px; font-size: var(--fs-sm); color: var(--text); }
.cap2-ficha-cab strong { min-width: 0; overflow-wrap: break-word; }
.cap2-ficha-meta { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.cap2-ficha-texto { margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.cap2-ficha .captacion-lead-actions { margin-top: 4px; }
.captacion-lead-badge-prueba { color: var(--warning); border-color: currentColor; background: transparent; }
.captacion-lead-badge-baja { color: var(--muted); border-color: currentColor; background: transparent; }
/* Cadenas */
.cap2-cadenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cap2-cadena { min-width: 0; }
.cap2-cadena ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.cap2-cadena li { font-size: var(--fs-sm); color: var(--text); }
.cap2-cadena li p { margin: 4px 0 0; font-size: var(--fs-xs); line-height: 1.4; }
.cap2-paso-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* Hitos */
.cap2-hitos li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.cap2-fecha { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .cap2-tablero { grid-template-columns: repeat(6, 220px); } }
/* ─── Dibujo 2 (7-oct-2026): objetivo, semáforos, grupos, decisiones, ficha y material ─── */
.cap2-objetivo { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); margin-bottom: 12px; }
.cap2-objetivo-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: var(--fs-sm); color: var(--text); }
.cap2-objetivo-fila strong { font-size: var(--fs-md); }
.cap2-segs { display: flex; gap: 4px; }
.cap2-seg { flex: 1; height: 8px; border-radius: var(--radius-sm); background: var(--panel-3); border: 1px solid var(--line); }
.cap2-seg-on { background: var(--success); border-color: var(--success); }
.cap2-luces { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cap2-luz { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; min-width: 0; }
.cap2-luz:hover, .cap2-luz:focus-visible { border-color: var(--link); outline: none; }
.cap2-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cap2-tab { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.cap2-tab[aria-selected="true"] { color: var(--accion, var(--link)); border-bottom-color: var(--accion, var(--link)); }
.cap2-tab span { font-weight: 500; font-size: var(--fs-xs); color: var(--muted); margin-left: 4px; }
.cap2-grupo { display: flex; flex-direction: column; gap: 16px; text-align: left; }
#admin-pane-captacion .cap2-grupo li, #admin-pane-captacion .cap2-grupo span { text-align: left; }
.cap2-decs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.cap2-dec { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); min-width: 0; }
.cap2-dec h4 { margin: 0; font-size: var(--fs-md); color: var(--text); }
.cap2-dec dl { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.cap2-dec dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cap2-dec dd { margin: 0; }
/* Cuántos de cada ciudad en la tanda (9-oct-2026) */
.cap2-cuantos { display: flex; flex-wrap: wrap; gap: 12px; }
.cap2-cuantos-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 120px; }
/* El `.v2-body label` general pone mayúsculas de etiqueta de formulario; aquí son frases. */
.v2-body .cap2-cuantos-campo { text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); color: var(--text); }
.cap2-cuantos-campo span { font-weight: 600; }
.cap2-cuantos-campo .captacion-input { max-width: 120px; }
.cap2-cuantos-campo small, .cap2-cuantos-nota { color: var(--muted); font-size: var(--fs-xs); }
.cap2-cuantos-nota { margin: 6px 0 0; }
.cap2-cuantos-rapido { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cap2-cuantos-rapido .btn { min-height: 30px; min-width: 40px; padding: 2px 8px; font-size: var(--fs-xs); }
.cap2-antes p { font-size: var(--fs-sm); margin: 4px 0; }
.cap2-antes pre.cap2-texto-correo { white-space: pre-wrap; max-height: 260px; overflow: auto; font: inherit; font-size: var(--fs-sm); background: var(--surface-2, #f6f6f6); padding: 8px; border-radius: 8px; }
.cap2-rec { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-2); }
.cap2-dec-hecha { border-color: var(--success); }
.cap2-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cap2-btns .btn[aria-pressed="true"] { outline: 2px solid var(--success); outline-offset: 1px; }
.cap2-estado { margin: 0; font-size: var(--fs-sm); color: var(--success); min-height: 1em; }
.cap2-tareas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cap2-tareas > div { min-width: 0; }
.cap2-tareas h4, .cap2-sub { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text); display: flex; align-items: center; gap: 8px; }
.cap2-sub { margin-top: 12px; }
.cap2-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cap2-lista li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.cap2-aviso-caja { margin: 12px 0 0; padding: 12px; border: 1px solid var(--warning); border-radius: var(--radius-sm); background: var(--panel-2); font-size: var(--fs-sm); color: var(--text); }
.cap2-chip-parado, .cap2-chip-inv-parte { color: var(--warning); }
.cap2-chip-inv-si { color: var(--success); }
.cap2-chip-inv-no { color: var(--danger); }
/* Tablero: la ficha pequeña es un botón; al pulsarla se abre la ficha grande debajo. */
#admin-pane-captacion button.cap2-ficha { font: inherit; color: var(--text); cursor: pointer; align-items: flex-start; }
#admin-pane-captacion button.cap2-ficha[aria-pressed="true"], #admin-pane-captacion button.cap2-ficha:hover { border-color: var(--accion, var(--link)); }
.cap2-ficha-grande { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--accion, var(--link)); border-radius: var(--radius-md); background: var(--panel); margin-bottom: 16px; }
.cap2-ficha-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.cap2-ficha-titulo h4 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.cap2-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; font-size: var(--fs-sm); color: var(--text); }
.cap2-kv div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cap2-kv small, .cap2-small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.cap2-hist { margin: 4px 0 0; padding-left: 16px; font-size: var(--fs-sm); color: var(--text); }
/* Material */
.cap2-material { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.cap2-mat { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); font-size: var(--fs-sm); color: var(--text); min-width: 0; }
.cap2-mat p { margin: 0; }
.cap2-mat-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cap2-ruta { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); background: var(--panel-2); padding: 4px 8px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.cap2-mat a, .cap2-nota a { color: var(--link); }
/* La pestaña va en cara clara (NORMA 2, 7-oct): las piezas viejas de LinkedIn traían fondos oscuros fijos. */
.cara-clara .captacion-input { background: var(--panel); color: var(--text); border-color: var(--line); }
.cara-clara .captacion-lead-badge-incorporado { color: var(--success); border-color: currentColor; background: transparent; }
.cara-clara .captacion-lead-badge-descartado { color: var(--muted); border-color: currentColor; background: transparent; }
.cara-clara .captacion-analitica-top { background: var(--panel-2); border-color: var(--line); }
/* ─── Dibujo v10 (14-oct-2026): línea de estado, tarjetas «Para…», «Ver detalle», ficha al pinchar un nombre ─── */
.cap2-estado-linea { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; padding: 10px 16px; border: 1px solid var(--ok-border); border-radius: var(--radius-md); background: var(--ok-bg); color: var(--ok-text); font-size: var(--fs-sm); }
.cap2-estado-linea:empty { display: none; }
.cap2-estado-linea .muted { color: var(--muted); font-size: var(--fs-xs); }
.cap2-estado-linea.cap2-estado-mal { display: block; border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.cap2-estado-linea ul { margin: 6px 0 0; padding-left: 18px; }
#admin-pane-captacion .section-header .cap2-hoy-frase { margin: 4px 0 2px; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.cap2-tarjetas:not(:empty) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
.cap2-t { gap: 10px; }
.cap2-para { display: inline-flex; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); white-space: nowrap; }
.cap2-para-javidan { border-color: var(--info-border); background: var(--info-bg); color: var(--info-text); }
.cap2-recomiendo { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: 1.45; }
.cap2-hoy-envios { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-2); font-size: var(--fs-sm); color: var(--text); }
.cap2-detalle > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--link); padding: 2px 0; }
.cap2-detalle[open] > summary { margin-bottom: 8px; }
.cap2-detalle dl { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.cap2-detalle dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.cap2-detalle dd { margin: 0; overflow-wrap: anywhere; }
.cap2-nota-corta { width: 100%; min-height: 48px; }
.cap2-rato { margin: 4px 0 0; }
/* El nombre de una persona: un botón con subrayado punteado que abre su ficha */
#admin-pane-captacion .cap2-nombre { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--link); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
#admin-pane-captacion .cap2-nombre:hover { text-decoration-style: solid; }
#admin-pane-captacion .cap2-nombre:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.cap2-obj-num { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.cap2-objetivo .cap2-seg { height: 6px; }
.cap2-quienes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.cap2-quien-chip { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: var(--fs-sm); }
.cap2-cambio { font-size: var(--fs-xs); font-weight: 600; }
.cap2-cambio-sube { color: var(--success); }
.cap2-cambio-baja { color: var(--warning); }
.cap2-cambio-igual { color: var(--muted); }
.cap2-necesitan { margin-bottom: 8px; }
.cap2-lista li.cap2-necesita { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.cap2-lista li.cap2-necesita:first-child { border-top: 0; }
.cap2-subplega { margin-top: 12px; }
.cap2-subplega > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--link); padding: 6px 0; }
.cap2-chat-plega { border-color: var(--link); }
#admin-pane-captacion > .admin-fold { margin-bottom: 12px; }
/* La flecha del plegable, arriba a la derecha y no sola en otra línea cuando el resumen ocupa dos */
#admin-pane-captacion .admin-fold-summary { position: relative; padding-right: 44px; }
#admin-pane-captacion .admin-fold-summary::after { position: absolute; right: 18px; top: 22px; margin: 0; }
#admin-pane-captacion .admin-fold-hint { flex-basis: 100%; }
.cap2-contadas { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.5; }
/* La ventana compartida en modo «solo mirar» (ficha de una persona): una lista de datos */
.opp-confirm-panel.con-datos { max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; }
.opp-confirm-datos { margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: var(--text); }
.opp-confirm-datos dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.opp-confirm-datos dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ───── Valoraciones → Qobrix (conector formulario web) ───── */
#valoracionesTable .admin-table-scroll { overflow-x: auto; min-width: 0; }
#valoracionesTable .data-table { min-width: 760px; }
#valoracionesTable .val-action { text-align: right; white-space: nowrap; }
.val-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.val-badge.val-pending { background: rgba(231, 168, 58, 0.18); color: #e7a83a; }
.val-badge.val-done { background: rgba(64, 180, 110, 0.18); color: #40b46e; }
.val-modal-overlay { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 16px; }
.val-modal-panel { width: 100%; max-width: 520px; background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255, 255, 255, 0.18)); border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.val-modal-title { margin: 0 0 12px; font-size: var(--fs-xl); color: var(--text, #f4f5f7); }
.val-modal-body { font-size: var(--fs-md); color: var(--text, #f4f5f7); line-height: 1.55; }
.val-modal-body p { margin: 0 0 8px; }
.val-modal-pend { margin: 6px 0 4px; font-size: var(--fs-sm); color: var(--muted, #aab0bb); }
.val-modal-pend ul { margin: 6px 0 0; padding-left: 18px; }
.val-modal-panel .opp-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Aviso de valoraciones del mismo local (posible re-traspaso) */
.val-badge.val-dup { background: rgba(239,140,58,0.20); color: #ef8c3a; }

/* Bandeja de valoraciones: editar antes de crear + enlace Qobrix */
.val-modal-panel .misval-edit-hint { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--muted, #aab0bb); }
.val-modal-panel .misval-edit { display: block; margin: 0 0 8px; }
.val-modal-panel .misval-edit > span { display: block; font-size: var(--fs-xs); color: var(--muted, #aab0bb); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 3px; }
.val-modal-panel .misval-edit input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(255,255,255,0.18)); background: var(--bg-soft, rgba(255,255,255,0.04)); color: var(--text, #f4f5f7); font-size: var(--fs-md); }
.val-modal-panel .misval-edit-row { display: flex; gap: 10px; }
.val-modal-panel .misval-edit-row .misval-edit { flex: 1; }
.misval-qobrix-link { color: var(--link); font-weight: 600; text-decoration: none; }
.misval-qobrix-link:hover { text-decoration: underline; }
.val-action .val-discard-btn { padding: 6px 10px; }

.val-modal-panel .misval-qa-edit { display: flex; flex-direction: column; }

/* Botón "Rellenar formulario" en la bandeja de valoraciones (header) */
.admin-pane-header .misval-fill-btn { text-decoration: none; white-space: nowrap; align-self: flex-start; }
.admin-pane-header .val-fill-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.admin-pane-header .val-fill-wrap .misval-fill-btn { align-self: auto; }

/* Sección de datos comerciales en el modal de la bandeja */
.val-modal-panel .misval-com { border: 1px solid var(--line, rgba(255,255,255,0.18)); border-radius: var(--radius-md); padding: 12px; margin: 4px 0 14px; }
.val-modal-panel .misval-com .misval-edit-hint { margin-top: 0; color: var(--text, #f4f5f7); font-weight: 600; }
.val-modal-panel .com-hide { display: none; }
.val-modal-panel .misval-edit select { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(255,255,255,0.18)); background: var(--bg-soft, rgba(255,255,255,0.04)); color: var(--text, #f4f5f7); font-size: var(--fs-md); }

.val-modal-panel .misval-fin-calc { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text, #f4f5f7); }

/* Apartado de fotos del modal de valoración (subida a Qobrix) */
.misval-fotos { margin: 12px 0; }
.val-fotos-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.val-fotos-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.val-foto-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line, rgba(0,0,0,0.18)); }
.val-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.val-foto-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.val-foto-count { font-size: var(--fs-sm); color: var(--text-soft, #888); }
.val-fotos-status { font-weight: 600; }

/* Listado de documentos requeridos del modal de valoración */
.misval-docs { margin: 12px 0; }
.val-docs-list { display: flex; flex-direction: column; gap: 6px; }
.val-doc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,0.12)); }
.val-doc-row.has-file { border-color: var(--brand); }
.val-doc-label { flex: 1 1 auto; font-size: var(--fs-md); }
.val-doc-label em { color: var(--text-soft, #888); font-size: var(--fs-sm); font-style: normal; }
.val-doc-pick { white-space: nowrap; cursor: pointer; }
/* VARIOS archivos por casilla, cada uno con su ✕ (fundador, 3-nov-2026). Ocupan toda la
   anchura de la fila para que los nombres largos no empujen al botón de adjuntar. */
.val-doc-files { display: flex; flex-direction: column; gap: 4px; flex-basis: 100%; min-width: 0; max-width: 100%; }
.val-doc-files:empty { display: none; }
.val-doc-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--brand); min-width: 0; }
.val-doc-name { flex: 1 1 auto; overflow-wrap: anywhere; }
.val-doc-name::before { content: "✓ "; }
.val-doc-del { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,0.12)); background: transparent; color: var(--text-soft, #888); font-size: var(--fs-sm); line-height: 1; cursor: pointer; }
.val-doc-del:hover, .val-doc-del:focus-visible { border-color: var(--danger, #b91c1c); color: var(--danger, #b91c1c); }

/* Fase 1 modal: obligatorios, contrato de intermediación, aviso de docs faltantes */
.misval-edit-sub { font-size: var(--fs-sm); color: var(--text-soft, #888); margin: 8px 0 2px; font-weight: 600; }
.val-interm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--brand); margin-bottom: 6px; }
.val-interm-firma { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,0.18)); background: var(--bg-soft, rgba(255,255,255,0.04)); color: var(--text, inherit); font-size: var(--fs-sm); }
.val-interm-pick { white-space: nowrap; cursor: pointer; }
.misval-aviso-faltan { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.4); font-size: var(--fs-md); }
.misval-aviso-faltan p { margin: 2px 0; }

/* ── Cartera al día por asesor (brief 20260725, Fase 1 — solo admin) ── */
#admin-cartera-body { overflow-x: auto; min-width: 0; }
.admin-cartera-hint { max-width: 760px; }
.cartera-table .cartera-score { font-weight: 800; }
.cartera-sort-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.cartera-generated { margin-top: 8px; font-size: var(--fs-xs); }

/* ── Bandeja de contenido orgánico (Instagram/Facebook) — Fase 4 ── */
.contenido-card { grid-template-columns: 132px 1fr; align-items: start; }
.contenido-card + .contenido-card { margin-top: 12px; }
.contenido-thumb { width: 132px; height: 165px; object-fit: cover; border-radius: var(--radius-md); background: var(--panel-2); display: block; }
.contenido-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-xs); }
.contenido-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contenido-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contenido-frase { font-weight: 700; }
.contenido-caption { font-size: var(--fs-sm); line-height: 1.4; margin: 0; }
.contenido-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.contenido-when-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.contenido-when, .contenido-canal { background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 5px 8px; font: inherit; }

/* Ranking de rendimiento del contenido (arriba de la bandeja; con datos propios). */
.contenido-rendimiento { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }

/* Bandeja de mensajes IG/FB: hilo de burbujas + caja de respuesta (humana). */
.msg-card { grid-template-columns: 1fr; } /* sin miniatura: una sola columna (la card base es 132px+1fr) */
.msg-card .contenido-body { gap: 10px; }
.msg-hilo { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.msg-burbuja { display: inline-flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-md); line-height: 1.5; max-width: 76%; }
.msg-burbuja small { font-size: var(--fs-2xs); color: var(--muted); }
.msg-cliente { background: var(--panel-2); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-nuestro { background: var(--brand, #1E3F80); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-nuestro small { color: rgba(255, 255, 255, 0.75); }
.msg-reply { display: flex; align-items: flex-end; gap: 8px; max-width: 720px; }
/* Archivos del WhatsApp de clientes (5-oct-2026): la foto se ve en el hilo, la nota de voz se escucha,
   el resto es un enlace. En la burbuja nuestra (fondo de marca) el enlace va en el color del texto. */
.msg-archivo-foto { display: block; }
.msg-archivo-foto img { display: block; max-width: 100%; width: 240px; max-height: 320px; object-fit: cover; border-radius: 10px; }
.msg-archivo-audio { max-width: 100%; width: 260px; }
.msg-archivo-video { display: block; max-width: 100%; width: 260px; max-height: 360px; border-radius: 10px; }
.msg-archivo { color: var(--link); text-decoration: underline; overflow-wrap: anywhere; }
.msg-nuestro .msg-archivo { color: inherit; }
.msg-archivo-viejo { color: inherit; opacity: 0.85; font-style: italic; }
.msg-adjuntar { flex: 0 0 auto; cursor: pointer; }
.msg-reply-text { flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-md); padding: 8px 10px; font: inherit; resize: vertical; }

/* Lightbox de la bandeja: creatividad a tamaño grande; carrusel = deslizar entre slides. */
.contenido-thumb[data-c-view] { cursor: zoom-in; }
.contenido-open { cursor: pointer; }
.contenido-vertodo { align-self: flex-start; margin: 2px 0 6px; }
.contenido-lb-overlay { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.82); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 24px; }
/* Dos columnas: la creatividad y, al lado, la ficha entera. En móvil se apilan y la caja
   scrollea como una sola pieza (la bandeja se aprueba tanto en escritorio como en el móvil). */
/* grid-template-rows: minmax(0, 1fr) obliga a la fila a caber en la caja; sin él crece
   con el contenido, el max-height lo recorta y no hay manera de ver lo que queda debajo. */
.contenido-lb-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-rows: minmax(0, 1fr); max-width: min(94vw, 1000px); height: 88vh; background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
/* La creatividad tambien scrollea: una story 9:16 no cabe entera en la caja y hay que
   poder recorrerla de arriba abajo para revisarla antes de aprobar. */
/* min-height: 0 es imprescindible: sin él los hijos del grid crecen hasta su contenido
   (min-height: auto por defecto), la caja se corta y overflow-y NO llega a scrollear. */
.contenido-lb-media { position: relative; min-width: 0; min-height: 0; background: var(--panel-2); overflow-y: auto; }
.contenido-lb-img { display: block; width: 100%; height: auto; background: var(--panel-2); }
.contenido-lb-detalle { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; border-left: 1px solid var(--line); }
/* Barras de scroll visibles dentro de la ficha: si no, no se sabe que hay más abajo. */
.contenido-lb-media::-webkit-scrollbar,
.contenido-lb-detalle::-webkit-scrollbar { width: 10px; }
.contenido-lb-media::-webkit-scrollbar-thumb,
.contenido-lb-detalle::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: padding-box; }
.contenido-lb-media::-webkit-scrollbar-thumb:hover,
.contenido-lb-detalle::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); background-clip: padding-box; }
.contenido-lb-media, .contenido-lb-detalle { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.contenido-lb-badges { margin-bottom: 8px; }
.contenido-lb-titular { margin: 0 0 14px; font-size: var(--fs-xl); line-height: 1.35; }
.contenido-lb-bloque { margin-bottom: 18px; }
.contenido-lb-bloque h4 { margin: 0 0 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contenido-lb-copy { padding: 2px 10px; font-size: var(--fs-2xs); text-transform: none; letter-spacing: 0; }
/* El texto se lee tal cual se va a publicar: con sus saltos de línea, sin recortar. */
.contenido-lb-caption { margin: 0; white-space: pre-wrap; line-height: 1.55; font-size: var(--fs-md); }
.contenido-lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.contenido-lb-tag { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: var(--fs-xs); color: var(--muted); }
.contenido-lb-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--fs-sm); }
.contenido-lb-datos dt { color: var(--muted); }
.contenido-lb-datos dd { margin: 0; }
.contenido-lb-enlaces { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.contenido-lb-link { font-size: var(--fs-sm); color: var(--link); font-weight: 600; text-decoration: none; }
.contenido-lb-link:hover { color: var(--link-hover); text-decoration: underline; }
@media (max-width: 860px) {
  .contenido-lb-overlay { padding: 12px; }
  .contenido-lb-box { grid-template-columns: 1fr; grid-template-rows: none; height: auto; max-height: 88vh; overflow-y: auto; }
  /* La creatividad cede altura: en un móvil lo que hay que leer antes de aprobar es el
     TEXTO, y con la imagen a media pantalla quedaba entero por debajo del pliegue. */
  .contenido-lb-img { max-height: 38vh; }
  .contenido-lb-detalle { border-left: 0; border-top: 1px solid var(--line); overflow-y: visible; }
}
.contenido-lb-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(8, 10, 14, 0.75); color: #fff; font-size: var(--fs-xl); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.contenido-lb-close:hover { background: rgba(8, 10, 14, 0.85); }
.contenido-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(8, 10, 14, 0.65); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.contenido-lb-nav:hover { background: rgba(8, 10, 14, 0.85); }
.contenido-lb-prev { left: 10px; }
.contenido-lb-next { right: 10px; }
.contenido-lb-count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(8, 10, 14, 0.65); color: #fff; font-size: var(--fs-sm); padding: 3px 10px; border-radius: 999px; }

/* "Qué está esperando ahora mismo" (16-ago-2026): el bloque de procesos a medias, justo
   debajo del semáforo. Separación en el CSS y no inline: la CSP bloquea los estilos
   inline y el margen no se aplicaría. */
.section-header.cadenas-esperando-header { margin-top: 18px; }

/* ─── CÓMO FLUYE EL TRABAJO (panel Jarvis, 16-ago-2026) ──────────────────────────
   El mapa de arriba dice qué piezas hay; esto dice si el trabajo AVANZA entre ellas.
   Mismos tokens que el resto del mapa (var con respaldo): cambiar el tema cambia esto
   también, sin tocar aquí. Nada de colores fijos — regla del sistema de diseño. */
.system-chains { width: 100%; max-width: 760px; margin-top: 18px; padding: 14px 16px; background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255, 255, 255, 0.12)); border-radius: var(--radius-lg); }
.system-chains-title { font-weight: 700; color: var(--text, #f4f5f7); font-size: var(--fs-lg); }
.system-chains-sub { font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin-top: 2px; }
.system-chains-empty { font-size: var(--fs-sm); color: var(--muted, #a3abb6); margin-top: 8px; line-height: 1.5; }
.system-chains-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.system-chain { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--panel-3, rgba(0, 0, 0, 0.16)); border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.system-chain-name { flex: 1 1 auto; font-size: var(--fs-md); color: var(--text, #f4f5f7); text-transform: capitalize; }
.system-chain-count { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--muted, #a3abb6); }
/* Una cadena atascada se ve distinta SIN depender solo del color (accesibilidad): lleva
   además su propia etiqueta con el aviso escrito. */
.system-chain-stuck { border-color: var(--warn, #d9a441); }
.system-chain-stuck-badge { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 600; color: var(--warn, #d9a441); }
.system-chains-stuck { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.system-chains-stuck-title { font-size: var(--fs-sm); font-weight: 600; color: var(--warn, #d9a441); }
.system-chains-stuck ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.system-chains-stuck li { font-size: var(--fs-sm); color: var(--text, #f4f5f7); line-height: 1.45; }
.system-chains-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted, #a3abb6); font-style: italic; }
@media (max-width: 640px) {
  .system-chain { flex-wrap: wrap; gap: 4px 8px; }
  .system-chain-name { flex: 1 0 100%; }
}

/* ─── SALA DE MANDO (17-ago-2026) ───────────────────────────────────────────────
   Todo el negocio en una pantalla. Tokens del tema, nunca colores fijos: cambiar el
   tema cambia esto también. Lo que está mal se ve SIN depender solo del color —
   lleva además su texto, que es lo que de verdad se lee. */
.sala-mando { width: 100%; max-width: 760px; margin: 0 auto 20px; }
.sala-mando-inner { display: flex; flex-direction: column; gap: 14px; }
.sala-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted, #a3abb6); letter-spacing: .04em; text-transform: uppercase; }
/* El punto que late: la señal de "esto está vivo" que pedía el fundador. */
.sala-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #4ec97f); box-shadow: 0 0 0 0 var(--ok, #4ec97f); animation: salaLatido 2.4s ease-out infinite; }
@keyframes salaLatido { 0% { box-shadow: 0 0 0 0 rgba(78,201,127,.5); } 70% { box-shadow: 0 0 0 9px rgba(78,201,127,0); } 100% { box-shadow: 0 0 0 0 rgba(78,201,127,0); } }
@media (prefers-reduced-motion: reduce) { .sala-punto { animation: none; } }

/* ── LA CONSOLA, DENTRO DEL BACKOFFICE ─────────────────────────────────────
   Es la MISMA consola de /pantalla.php embebida, no una copia: antes había aquí
   una versión más pobre con los mismos datos, y un dato en dos sitios acaba
   mintiendo en cuanto uno se actualiza y el otro no. */
.consola-dentro {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: clip;
  background: #0d0f14;
  margin-bottom: 16px;
}
.consola-dentro-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
}
.consola-dentro-barra a { margin-left: auto; color: var(--text); text-transform: none; letter-spacing: 0; }
/* Alto suficiente para ver el tablero entero sin que el backoffice se haga
   interminable. Lo que sobre rueda dentro del marco. */
.consola-marco { width: 100%; height: 760px; border: 0; display: block; background: #0d0f14; }
@media (max-width: 900px) { .consola-marco { height: 1180px; } }

/* ── LAS PESTAÑAS DE DENTRO DE UNA ENTRADA DEL MENÚ (26-sep-2026, zona `diseno`) ─────────────────
   El menú pasó de 36 entradas a 19 (dibujo aprobado: docs/diseno/menu-backoffice-pestanas.html): lo
   que hacía lo mismo es una entrada y el resto son pestañas dentro. Una barra por grupo, debajo del
   título (admin.js: PESTANAS_JUNTAS); si un grupo va dentro de otro (Agentes, dentro de la Sala), dos. */
.pestanas-juntas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.v2-body .pestanas-juntas .v2-pane-subtabs { margin: 0; }

/* ── CRM, AGENDA, CORREO, WESIGN Y LA SALA, DENTRO DEL BACKOFFICE (26-sep-2026) ───────────────────
   Es la MISMA pantalla de TRIA en un marco, no una copia (como la consola y la Papelera, arriba). El
   marco llega hasta abajo de la ventana: admin.js mide dónde empieza (--tria-arriba) y la pantalla
   de dentro ya sabe ocuparlo entero, con su propio desplazamiento. */
.tria-dentro-barra { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.tria-dentro-barra a { margin-left: auto; color: var(--link, var(--text)); font-weight: 600; }
.tria-dentro-marco {
  display: block; width: 100%;
  height: calc(100vh - var(--tria-arriba, 160px) - 16px);
  height: calc(100dvh - var(--tria-arriba, 160px) - 16px);
  min-height: 480px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.tria-dentro-marco[hidden] { display: none; }
/* Estado de carga del marco (21-oct-2026): la primera vez, sala.php/TRIA tardan en componer su foto y el
   iframe se veía EN BLANCO (recorrido del 20-oct). Un esqueleto —no una rueda— hasta que el marco dispara
   `load`; reutiliza las barras `.esq` de siempre. Lo pone y lo quita admin.js (mostrarPantallaDeTria). */
.tria-dentro-marcos { position: relative; }
.tria-dentro-skel { display: none; }
.tria-dentro-marcos.tria-dentro-cargando .tria-dentro-skel {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 2px;
}
.tria-dentro-marcos.tria-dentro-cargando .tria-dentro-marco:not([hidden]) { visibility: hidden; }
/* La ficha de TRIA encima de Mensajes (nota a m032 punto 9, 14-oct-2026): ocupa la ventana; mientras TRIA la abre, solo
   «Abriendo la ficha…» (no se ve el chat cargando por detrás). Por debajo de las ventanas de confirmar (10001). */
.msg-ficha-capa { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg); }
.msg-ficha-capa[hidden] { display: none; }
.msg-ficha-capa-cab { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.msg-ficha-capa-estado { display: none; color: var(--muted); font-size: 0.9rem; }
.msg-ficha-capa.is-cargando .msg-ficha-capa-estado { display: inline; }
.msg-ficha-capa-marco { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); }
.msg-ficha-capa.is-cargando .msg-ficha-capa-marco { visibility: hidden; }
/* En el móvil, de borde a borde: con los márgenes de la página y de la tarjeta, el CRM se quedaba en
   326 de 390 px y cortaba sus pestañas («Oportunida…», «Loca…»). En TRIA ocupa la pantalla entera,
   y aquí también (la tarjeta está centrada, así que 50 % − 50vw la lleva justo al borde). */
@media (max-width: 820px) {
  .tria-dentro-marco { width: 100vw; margin-left: calc(50% - 50vw); border-left: 0; border-right: 0; border-radius: 0; }
}

/* La puerta a la pantalla completa, por si prefiere dejarla abierta aparte. */
.sala-enlace-directo { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.sala-enlace-directo a { color: var(--text); font-weight: 600; }

/* EL DIRECTO: la pantalla se refresca sola cada minuto. Lo que ha cambiado desde
   el refresco anterior se enciende un momento — sin eso, el movimiento sería
   invisible y daría igual mirar la pantalla o no. */
.sala-card-cambio { animation: salaCambio 3s ease-out 1; }
@keyframes salaCambio {
  0%   { border-color: var(--ok, #4ec97f); background: rgba(78,201,127,.14); }
  100% { border-color: var(--line, rgba(255,255,255,.12)); background: transparent; }
}
/* Se cayó un refresco: lo que se ve sigue ahí, pero YA NO es de ahora. Se dice,
   no se disimula — un dato viejo presentado como fresco es una mentira. */
.sala-head-caida .sala-punto { background: var(--warn, #d9a441); animation: none; }
.sala-head-caida::after { content: " · sin conexión, este dato no es de ahora"; color: var(--warn, #d9a441); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sala-card-cambio { animation: none; border-color: var(--ok, #4ec97f); } }
.sala-grupo { background: var(--panel, #23262b); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: var(--radius-lg); padding: 14px 16px; }
.sala-grupo-titulo { font-weight: 700; font-size: var(--fs-md); color: var(--text, #f4f5f7); margin-bottom: 12px; }
.sala-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sala-card { padding: 12px; border-radius: var(--radius-md); background: var(--panel-3, rgba(0,0,0,.16)); border: 1px solid var(--line, rgba(255,255,255,.1)); }
.sala-card-alerta { border-color: var(--warn, #d9a441); }
.sala-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sala-icono { font-size: var(--fs-lg); }
.sala-titulo { font-size: var(--fs-xs); color: var(--muted, #a3abb6); text-transform: uppercase; letter-spacing: .03em; }
.sala-valor { font-size: 1.35rem; font-weight: 700; color: var(--text, #f4f5f7); line-height: 1.15; }
/* "sin dato" NO es un cero: se ve distinto a propósito. */
.sala-sindato { font-size: var(--fs-md); font-weight: 500; color: var(--muted, #a3abb6); font-style: italic; }
.sala-pie { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted, #a3abb6); line-height: 1.35; }
.sala-lista { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.sala-lista li { font-size: var(--fs-sm); color: var(--text, #f4f5f7); line-height: 1.45; }
.sala-cargando, .sala-vacio { font-size: var(--fs-sm); color: var(--muted, #a3abb6); padding: 12px; font-style: italic; }
@media (max-width: 640px) { .sala-cards { grid-template-columns: 1fr 1fr; } }

/* Elegir local cuando el nombre casa con varios (buscar por nombre, 30-ago-2026).
   Lista sobria: son botones de una decisión, no una tabla. */
.abg-local-opciones { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.abg-local-opciones button { font-size: var(--fs-sm); }

/* ── Pestañas DENTRO de un panel (1-sep-2026) ──────────────────────────────────
   La bandeja de Mensajes las necesita para separar Messenger, Instagram, WhatsApp
   y los comentarios sin salir de la pantalla, como la bandeja de Meta. Se apoyan en
   las mismas variables y el mismo lenguaje que .admin-nav-tab, para que no parezca
   un componente traído de fuera. */
.admin-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.admin-subtab {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl, 999px);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.admin-subtab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
}

.admin-subtab.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.admin-subtab .admin-subtab-count,
.admin-estado .admin-subtab-count {
  margin-left: 6px;
  color: var(--muted-2);
  font-weight: 500;
}

/* La caja de enlazar el WhatsApp apila sus campos: van uno debajo de otro, no en fila.
   En una clase y no en el atributo style porque la CSP bloquea los estilos en línea. */
.msg-reply.msg-reply-vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.msg-reply-vertical input,
.msg-reply-vertical select {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 10px);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
}

/* El resultado de enlazar se enseña junto al botón, y en rojo si algo falla. */
.msg-reply-vertical #wa-conn-msg { margin: 2px 0 0; }
/* Elegir el local del mensaje al comprador (5-oct-2026): las opciones en fila, y el elegido con su «Cambiar». */
.msg-locales { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-locales .muted { flex-basis: 100%; margin: 0; }
.msg-local-elegido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--text); }
/* La vista previa respeta los saltos de línea del mensaje, como le llegará. */
.msg-reply-vertical [data-primer-vista] { white-space: pre-line; }
.msg-reply-vertical #wa-conn-msg.wa-conn-error { color: var(--danger, #ff8b8b); }

/* ── BANDEJA DE MENSAJES · dos columnas (1-sep-2026) ──────────────────────────
   Antes eran tarjetas apiladas: para ver la cuarta conversación había que bajar
   media pantalla. Ahora la lista manda a la izquierda y el hilo se abre al lado,
   como en cualquier bandeja. Sin animaciones a propósito: es una pantalla que se
   usa decenas de veces al día y ahí el movimiento estorba. */
.admin-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: -6px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.admin-estado {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 5px;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm, 13px);
  cursor: pointer;
}

.admin-estado:hover { color: var(--text); }
.admin-estado[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--brand); }

.msg-cuerpo {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
  /* 🔴 EL ALTO SE AJUSTA A LO QUE HAY (fundador 19-sep-2026: «no se puede ver todo el contenido»).
     Antes eran 520px fijos dentro de una zona más baja y, con `overflow: hidden`, lo que sobraba se
     CORTABA sin barra: en un portátil de 800px la caja de «Escribe la respuesta» y el botón Enviar
     quedaban fuera de la pantalla y la página no bajaba. Ahora ocupa el hueco disponible y cada
     columna se desplaza por dentro. Lo vigila tests/test_mensajes_se_ve_entero.mjs. */
  min-height: 320px;
  height: 100%;
}

.msg-lista {
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.msg-conv {
  /* Tarjeta con aire, no fila pegada a la siguiente (dibujo aprobado el 19-sep-2026). */
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) { .msg-conv:hover { background: rgba(255, 255, 255, 0.04); } }
.msg-conv:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.msg-conv[aria-current="true"] {
  background: rgba(75, 141, 248, 0.10);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* El canal, en su color. Es información, no decoración: se reconoce sin leer. */
.msg-marca {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.msg-marca.wa { background: #25D366; color: #04160B; }
.msg-marca.ig { background: #E1306C; color: #fff; }
.msg-marca.fb { background: #0084FF; color: #fff; }
.msg-marca.co { background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid var(--line-strong); }

/* «Cómo funciona», plegado: la explicación larga de Meta ya no ocupa la pantalla en cada visita. */
/* «Escribir a un móvil» (Fase 11): la casilla sale al lado del buscador, en la misma línea. */
.msg-nuevo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-nuevo-form[hidden] { display: none; }
.msg-nuevo-form input { min-width: 260px; }
.msg-nuevo-aviso { margin: 0 0 10px; }

/* El recuento, pegado a la frase de arriba y alineado con ella (no centrado). */
.msg-recuento { margin: 4px 0 0; text-align: left; font-variant-numeric: tabular-nums; }
#admin-pane-mensajes .admin-pane-header .muted { text-align: left; }

.msg-ayuda { margin: 10px 0 0; }
.msg-ayuda summary { cursor: pointer; color: var(--brand, #5b8def); font-size: 12.5px; list-style: none; width: fit-content; }
.msg-ayuda summary::-webkit-details-marker { display: none; }
.msg-ayuda p { margin: 8px 0 0; max-width: 78ch; }

.msg-quien { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.msg-avance {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-cuando { color: var(--muted-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ¿Lo ha leído? (7-oct-2026) — ✓ enviado, ✓✓ entregado en gris, ✓✓ leído en el azul de los enlaces. */
.msg-check { margin-right: 4px; letter-spacing: -2px; font-weight: 600; color: var(--muted-2); }
.msg-check.is-read { color: var(--link); }
.msg-check.is-failed { color: var(--danger-text); letter-spacing: 0; }

.msg-sello {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid currentColor;
}
.msg-sello.espera { color: #F2A93B; }
/* Locales por mover: la gente a la que le encaja cada local, una debajo de otra.
   Sin adornos: es una lista de trabajo y se lee de arriba abajo. */
.mover-gente { display: flex; flex-direction: column; gap: 2px; }
.mover-quien { white-space: nowrap; }
.mover-porque { color: var(--muted-2); margin-left: 6px; }

/* Más de un día esperando: deja de ser "pendiente" y pasa a ser un problema. */
.msg-sello.espera.vieja { color: #FF7A7A; font-weight: 600; }
.msg-sello.reloj { color: #FF7A7A; }
.msg-sello.hecho { color: var(--muted-2); }
/* Del EQUIPO, no un cliente (15-oct-2026). Azul, que no se confunda con el ámbar de «espera» ni
   con el rojo de lo que se cierra: aquí no hay nada que corra, solo cambia con quién hablas.
   Lleva la palabra «comercial» dentro, nunca solo el color (norma de TRIA). */
.msg-sello.comercial { color: #7FB1FF; }

/* El hilo NO se desplaza entero: se desplazan los mensajes y la caja de responder se queda
   siempre abajo, a la vista (dibujo aprobado el 19-sep-2026). */
.msg-hilo-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

.msg-hilo-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.msg-hilo-nombre { font-weight: 600; font-size: 15px; }
.msg-hilo-datos { color: var(--muted); font-size: 12px; }

.msg-hilo-mensajes {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.msg-vacio {
  display: grid;
  place-items: center;
  padding: 60px 24px;
  color: var(--muted);
  text-align: center;
}

/* Zona de escribir dentro del hilo */
/* 🔴 La caja de responder también se desplaza (5-oct-2026: «me sale solo esta parte del texto y el
   resto no se ve»). Pasadas 24 h, en vez de una línea trae el aviso, el tipo de mensaje, el nombre, el
   buscador de locales con sus botones y la vista previa: sin tope, empujaba los mensajes a 0 px y el
   panel (`overflow: hidden`) cortaba lo de abajo sin barra. Ahora no pasa de dos tercios del hilo y,
   si hay más, tiene su propia barra; los mensajes conservan siempre su parte. */
.msg-reply-zona { border-top: 1px solid var(--line); padding: 14px 20px 16px; background: rgba(255, 255, 255, 0.015); flex: 0 1 auto; min-height: 0; max-height: 66%; overflow-y: auto; }
.msg-hilo-mensajes { min-height: 96px; }
.msg-atajo { margin: 8px 0 0; font-size: 11px; color: var(--muted-2); }
/* Lo que aprende TRIA, tus normas, las medidas y «salir solo» (Fase 24.3-24.6, 8-oct-2026). Desplegable encima de la bandeja. */
#admin-pane-mensajes .msg-aprendido { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#admin-pane-mensajes .msg-aprendido > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
#admin-pane-mensajes .msg-aprendido-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 6px; align-content: start; }
#admin-pane-mensajes .msg-medidas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
#admin-pane-mensajes .msg-medida { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); min-width: 0; }
#admin-pane-mensajes .msg-medida b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text); }
#admin-pane-mensajes .msg-medida span { font-size: 12px; color: var(--muted); }
#admin-pane-mensajes .msg-aprendido-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#admin-pane-mensajes .msg-aprendido-col h4 { margin: 4px 0 0; }
#admin-pane-mensajes .msg-normas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#admin-pane-mensajes .msg-norma, #admin-pane-mensajes .msg-solo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
#admin-pane-mensajes .msg-norma.is-off { opacity: .6; }
#admin-pane-mensajes .msg-norma-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
#admin-pane-mensajes .msg-norma-texto small { color: var(--muted); font-size: 12px; }
#admin-pane-mensajes .msg-norma-acciones { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
#admin-pane-mensajes .msg-solo-barra { width: 100%; max-width: 220px; height: 6px; margin-top: 4px; accent-color: var(--link); }
#admin-pane-mensajes .msg-aprendido-nota, #admin-pane-mensajes .msg-aprendido-col > p { font-size: 12px; margin: 0; text-align: left; }
@media (max-width: 760px) {
  #admin-pane-mensajes .msg-aprendido-cuerpo { grid-template-columns: minmax(0, 1fr); }
  #admin-pane-mensajes .msg-norma, #admin-pane-mensajes .msg-solo { flex-direction: column; align-items: stretch; }
  #admin-pane-mensajes .msg-norma-acciones .btn { min-height: 44px; }
}

/* Tirar la propuesta de TRIA y decir por qué (Fase 24.1, 8-oct-2026). */
.msg-descartar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.msg-descartar [data-motivos] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msg-descartar [data-motivos][hidden] { display: none; }
@media (max-width: 640px) { .msg-descartar .btn { min-height: 44px; } }

/* ── Tercera columna: quién escribe (fase 2) ──────────────────────────────────
   Lo que la bandeja de Meta no puede dar: la ficha del cliente al lado del hilo. */
/* La pestaña entera tampoco se estira más de lo que hay: así el bloque de tres columnas puede
   medir «lo que queda» y cada columna desplazarse por dentro (19-sep-2026). */
#admin-pane-mensajes { min-height: 0; }

.msg-cuerpo { grid-template-columns: 320px minmax(0, 1fr) 300px; }
/* En portátiles normales (1280, 1366) la ficha es donde se da de alta, se pasa a otro asesor o se
   vincula un local: NO se esconde. Antes esta regla la escondía, la de `.msg-ficha` de justo debajo
   la volvía a enseñar, y acababa en una fila de más que la caja cortaba (24-sep-2026). */
@media (max-width: 1400px) { .msg-cuerpo { grid-template-columns: 260px minmax(0, 1fr) 280px; } }
@media (min-width: 761px) and (max-width: 1100px) {
  /* Tableta (1024 × 768): con cabecera y filtros delante, el bloque medía 396 px y la conversación
     se quedaba en 101 px de mensajes. Ahora el bloque nunca baja de 720 px y, si no cabe, baja la
     pestaña entera (5-oct-2026: «no tiene scroll y no se puede ver todo lo que sale»). */
  .msg-cuerpo { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 38%); min-height: 720px; }
  .msg-lista { grid-row: 1 / 3; }
  .msg-ficha { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
}

.msg-ficha {
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
}

.msg-ficha h4 {
  margin: 0 0 9px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.msg-dato {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.msg-dato:last-child { border-bottom: 0; }
.msg-dato .k { color: var(--muted); }
.msg-dato .v { color: var(--text); text-align: right; }
/* «Notas en TRIA» de la ficha de Mensajes: el texto de la nota, del tamaño de TODAS las notas de ficha (8-oct-2026). */
.msg-dato.msg-nota-ficha { font-size: var(--fs-nota, 0.95rem); line-height: 1.45; }

.msg-local {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.msg-local .t { font-weight: 600; font-size: 13px; }
.msg-local .d { color: var(--muted); font-size: 11.5px; }
.msg-local .e { color: #4ADE9B; font-size: 11px; }

.msg-ficha-vacia {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 14px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Buscador de la bandeja: va en la misma línea que los estados, alineado a la derecha. */
.admin-buscar {
  margin-left: auto;
  min-width: 240px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.admin-buscar::placeholder { color: var(--muted-2); }
.admin-buscar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Un timo apartado se sigue pudiendo leer, pero se ve que lo está. */
.msg-conv.es-timo .msg-quien { color: var(--muted); }
.msg-sello.timo { color: #FF7A7A; }

/* Desplegable de asesor dentro de la ficha */
.msg-select {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 10px);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* ─── Resultados de la búsqueda de la cabecera ───
   Desplegable bajo la barra del ⌘K. Colores por token para que herede el tema claro, y sin
   animación de entrada: es un panel de trabajo diario, no un escaparate. */
.v2-topbar-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: 380px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 6px;
}
.v2-topbar-search-item {
  display: grid; gap: 2px; width: 100%; padding: 8px 10px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
}
.v2-topbar-search-item:hover { background: var(--panel-3); }
.v2-topbar-search-item:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.v2-topbar-search-item strong { font-size: 13px; font-weight: 600; }
.v2-topbar-search-item span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v2-topbar-search-vacio { margin: 0; padding: 10px; font-size: 12.5px; color: var(--muted); }

/* ═══ EL BACKOFFICE EN UN MÓVIL (8-sep-2026, auditoría móvil) ══════════════════
   Medido en un teléfono real de 390×844: **21 de 21** sitios tocables estaban por
   debajo de los 44 px que pide un dedo —las sub-pestañas a 27, el buscador a 30, la
   campana a 32—, y el contenido de trabajo no empezaba hasta el píxel 449: **más de
   la mitad de la pantalla** gastada en cabecera y menú antes de leer nada.

   Va al final del archivo a propósito: así gana por orden a las reglas de arriba sin
   tener que subir la especificidad de cada una.

   🔴 LO QUE ESTO **NO** ARREGLA, dicho para que nadie lo dé por cerrado: el menú
   sigue siendo una caja de 240 px con 1.090 px de contenido dentro, o sea que hay
   que arrastrar DENTRO de ella. Probadas las dos salidas de CSS puro y las DOS SON
   PEORES: sin techo, el contenido empieza en el píxel 1.300; en fila horizontal, en
   el 1.220. Arreglarlo de verdad pide que el menú se pliegue entero, y eso es
   marcado, no estilos: es de `operador-live`. */
@media (hover: none), (max-width: 1100px) {

  /* ── 1 · Tamaño de dedo, por herencia y no botón a botón ─────────────────── */
  .v2-body .admin-nav-tab,
  .v2-body .admin-nav-subtab,
  .v2-body .v2-pane-subtab,
  .v2-body .v2-topbar-icon-btn,
  .v2-body .admin-nav-group-label,
  .v2-body .v2-notifications,
  .v2-body .btn {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }

  /* Los seis iconos de la cabecera iban a 32 px y separados 4: sus centros caían
     cada 36 px. Y el último es SALIR, pegado a la foto de perfil — un dedo
     desviado cierra la sesión estando en la calle. Se separan de verdad. */
  .v2-body .v2-topbar-icons { gap: 10px; }
  .v2-body .v2-topbar-icon-btn { min-width: 44px; }

  /* ── 2 · El buscador dejó de ser una caja dentro de otra ─────────────────── */
  /* Tenía un recuadro con la lupa y, dentro, OTRO recuadro con su propio borde: el
     hueco de escribir quedaba en 150×30 px y el aviso salía cortado a media palabra
     («Buscar contacto, conv»). Un solo marco, y el ancho entero. */
  .v2-body .v2-topbar-search { min-height: 44px; }
  .v2-body .v2-topbar-search input {
    border: 0; background: transparent; width: 100%; min-height: 44px; font-size: var(--fs-sm);
  }

  /* ── 3 · Menos pantalla gastada antes de trabajar ────────────────────────── */
  /* La cabecera se partía en TRES filas y ocupaba 167 px de 844.
     ⚠️ Y ojo: al dar 44 px a los iconos, la cabecera CRECIÓ a 187 — el arreglo de
     arriba empeoraba esto. Medido, no supuesto. Se compensa juntando el buscador y
     los iconos en la misma fila: se recupera esa fila entera y el dedo se queda
     grande. Las dos cosas a la vez, que era el objetivo. */
  /* 🔴 PROBADO Y DESCARTADO: rehacer la cabecera con `display:flex; flex-wrap` para
     juntar buscador e iconos en una fila la dejó en 309 px — casi el DOBLE. Su
     maquetación de arriba no admite que se le cambie el modo de colocación desde
     aquí. Se compensa solo con el aire, que es lo que sí se puede tocar sin
     romperla: de 167 px se pasa a ~150 y los dedos se quedan grandes. */
  .v2-body .v2-topbar { padding-top: 4px; padding-bottom: 4px; gap: 4px; }
  .v2-body .v2-topbar-search { width: 100%; }

  /* ── 4 · Dentro del menú, solo abierto el grupo donde estás ──────────────── */
  /* 🔴 YA NO SE HACE AQUÍ (12-sep-2026): lo hace `plegarGruposEnMovil()` en admin.js.
     Aquí había `[open]:not(:has(.active)) > *:not(summary) { display: none }`, que no
     plegaba: ESCONDÍA el contenido de todo grupo abierto que no tuviera la pestaña
     activa. Se tocaba «El sistema», se abría… y no salía nada. Medido en un iPhone
     contra producción, y es lo que el fundador contó: «en el móvil no me salen
     pestañas, pincho y no funciona». Plegar es cosa del atributo `open`, y se hace
     solo al CAMBIAR de pestaña: lo que el dedo abra después se queda abierto.
     No volver a esconder desde el CSS: el CSS no sabe si un grupo lo abrió el dedo. */

  /* ── 5 · Los DESPLEGABLES tambien son dedo ───────────────────────────────── */
  /* Medido el 9-sep en produccion: quedaban 2 de 26 por debajo de 44 px, y los dos
     eran `<select>` (79x31 y 73x31). Se habian quedado fuera porque la lista de
     arriba nombra clases y ninguna es un select. Va a la FAMILIA, no a esos dos por
     su id: asi lo hereda el desplegable que se anada manana.
     ⚠️ Solo `min-height`. Un `display:inline-flex` en un `<select>` rompe su
     desplegable nativo — por eso no entra en el bloque de arriba. */
  .v2-body select { min-height: 44px; }

  /* ── 6 · La fila del logo, fuera en el movil ─────────────────────────────── */
  /* La cabecera se comia 189 px de 844 en TRES filas, y la de arriba solo dice
     «TRIA · Control interno» — que es lo unico que el fundador ya sabe: no ha
     llegado ahi por accidente. En un movil ese sitio vale mas que la marca.
     🔴 Y no es un adorno de mas: el arreglo del dedo del 8-sep SUBIO la cabecera
     de 167 a 189. Sin esto, hacer los botones tocables sale a 22 px de trabajo
     perdido en cada pantalla. Con esto se ganan las dos cosas.
     El nombre no se pierde: el menu de debajo dice «Backoffice Trasnego» y la
     pestana del navegador lleva el titulo. */
  .v2-body .v2-topbar-brand { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CARA CLARA · EL INICIO, LA BARRA Y EL MENÚ (reforma de diseño, paso 3, 19-sep-2026)
   Dibujo aprobado: docs/diseno/paso2-inicio-y-qobrix.html · norma: docs/diseno/norma-tria-muestrario.html
   Decisión del fundador del 19-sep: el inicio, la barra de arriba y el menú pasan YA a claro con el
   azul corporativo; las demás pantallas siguen oscuras POR DENTRO hasta el paso 4.

   Cómo está hecho, para que nadie lo «arregle» al revés:
   · Los colores claros son los del tema claro de styles.css, copiados más abajo DE MOMENTO (ver el
     aviso de la copia); aquí se traducen además las variables propias del panel (--v2-*) y el azul
     de los botones principales.
   · El fondo de la página pasa a claro; cada pantalla que sigue oscura pinta su propio fondo oscuro
     (heredado del body, que conserva las variables oscuras), así no se queda texto claro sobre blanco.
   · Norma: 8 tamaños de letra (.66/.72/.78/.84/.9/.98/1.12/1.45rem), esquinas 8/11/999, espacios de
     4 en 4, color con palabra, 44 px en todo lo que se toca en el móvil, un solo botón azul relleno
     por pantalla (en el inicio, ninguno: las decisiones se contestan con botones grises).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── Las variables de la cara clara, COPIADAS del tema claro de styles.css (19-sep-2026) ──────────
   🔴 Copia TEMPORAL, a propósito y con fecha: lo bueno es que `.cara-clara` comparta el bloque
   `:root[data-theme="light"]` de styles.css, pero subir styles.css obliga a subir a la vez el `?v=`
   de index.php (regla R4b del guardián) y index.php lo tenía a medias otra ventana el día de la
   subida. Al tocar styles.css con index.php libre, se borra esta copia y se añade `.cara-clara` a
   ese selector (casilla en docs/estado/pendientes-diseno.md). Mismos valores: no se inventa nada. */
.cara-clara {
  /* ═══ TEMA CLARO · estilo SERENO (elegido por el fundador, 15-ago-2026) ═══════════
     La idea: el LIENZO deja de ser blanco puro y pasa a un gris muy claro con sesgo
     azul (el azul de la marca), y las TARJETAS se quedan blancas. Así el contenido
     "flota" sobre el fondo y se distingue solo, sin necesidad de bordes fuertes.
     Antes todo era #ffffff sobre #ffffff y solo los separaba una línea al 12%.
     Es un cambio de TOKENS: se define aquí y cae en las 13 pantallas a la vez. */
  --bg: #eceff4;          /* lienzo: era #f6f7f9, demasiado sutil — no se distinguía del blanco */
  --bg-soft: #e3e8ef;     /* zonas hundidas */
  --panel: #ffffff;       /* tarjetas: blancas, ahora SÍ se recortan sobre el lienzo */
  --panel-2: #f6f7f9;
  --panel-3: #eceff3;
  --panel-4: #dfe4ea;
  --line: rgba(14, 27, 44, 0.11);        /* líneas con el tinte azul de la marca, no gris neutro */
  --line-strong: rgba(14, 27, 44, 0.20);
  --text: #141a21;        /* algo más profundo que #202124: más contraste sobre blanco */
  --muted: #5a6674;       /* texto secundario con el mismo sesgo azul */
  --muted-2: #5e6771;     /* legible sobre tarjeta Y sobre el lienzo gris (antes #80868b daba 3.6:1) */
  --accent: #202124;
  /* Azul de enlace un punto más profundo que el #2f6df6 anterior: sobre el lienzo gris
     del Sereno aquel se quedaba en 4.2:1 (por debajo del mínimo legible) y ahora pasa
     a 5.3:1. Sigue siendo el azul de la marca, solo que legible en los dos fondos. */
  --brand-ink: #1b54d4;
  --link: #1b54d4;
  /* Área LEGAL en claro: violeta sólido y legible sobre fondo claro. */
  --legal-surface: #faf5ff;
  --legal-surface-2: #ffffff;
  --legal-border: #e6d5fb;
  --legal-border-strong: #c4a2f0;
  --legal-title: #6b21a8;
  --legal-label: #7c3aed;
  --legal-sub: #8b5cf6;
  --legal-accent: #7c3aed;
  --legal-field-text: #2e1065;
  /* Chips/botones semánticos en CLARO: fondo sólido suave + texto oscuro legible. */
  --ok-bg: #dcfce7;    --ok-text: #15803d;  --ok-border: #86efac;
  --warn-bg: #ffedd5;  --warn-text: #c2410c; --warn-border: #fdba74;
  --info-bg: #dbeafe;  --info-text: #1d4ed8; --info-border: #93c5fd;
  --danger-bg: #fee2e2; --danger-text: #b91c1c; --danger-border: #fca5a5;

  /* ═══ FALTABAN EN TEMA CLARO — 3 líneas que arreglan ~27 sitios ═══════════════════
     --success/--warning/--danger estaban definidos SOLO en el :root oscuro (#34d399,
     #fbbf24, #f87171). En claro se heredaban esos verdes y ámbares pensados para fondo
     negro, y sobre blanco quedaban casi invisibles: los números de "Tu día", pastillas
     de estado, avisos, alertas… Se reutilizan los tonos que YA existen aquí arriba para
     esa misma semántica, así no se inventa color nuevo. (barrido premium, 16-ago) */
  --success: #127035;
  --warning: #9a4a08;
  --danger: #b91c1c;
  /* Verde WhatsApp legible sobre blanco (el #25d366 de oscuro pierde contraste en claro). */
  --whatsapp: #16a34a;
  --table-zebra: rgba(0, 0, 0, 0.035);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.12);

  /* --- Shell base (Paso 3): claro --- */
  /* SERENO: la barra lateral pasa a BLANCA y el chat al lienzo gris. Antes era al
     revés (barra gris #eceef1, chat blanco), y la barra pesaba más que la
     conversación. Ahora manda el chat, que es donde se trabaja. */
  --shell-sidebar: #ffffff;
  --shell-bg: #eceff4;
  --shell-chat: #eceff4;
  /* --- Blancos -> negro equivalente (misma opacidad) --- */
  --w018: rgba(0, 0, 0, 0.018);
  --w024: rgba(0, 0, 0, 0.024);
  --w025: rgba(0, 0, 0, 0.025);
  --w026: rgba(0, 0, 0, 0.026);
  --w028: rgba(0, 0, 0, 0.028);
  --w03: rgba(0, 0, 0, 0.03);
  --w032: rgba(0, 0, 0, 0.032);
  --w035: rgba(0, 0, 0, 0.035);
  --w04: rgba(0, 0, 0, 0.04);
  --w042: rgba(0, 0, 0, 0.042);
  --w043: rgba(0, 0, 0, 0.043);
  --w045: rgba(0, 0, 0, 0.045);
  --w05: rgba(0, 0, 0, 0.05);
  --w052: rgba(0, 0, 0, 0.052);
  --w055: rgba(0, 0, 0, 0.055);
  --w06: rgba(0, 0, 0, 0.06);
  --w065: rgba(0, 0, 0, 0.065);
  --w07: rgba(0, 0, 0, 0.07);
  --w075: rgba(0, 0, 0, 0.075);
  --w08: rgba(0, 0, 0, 0.08);
  --w085: rgba(0, 0, 0, 0.085);
  --w09: rgba(0, 0, 0, 0.09);
  --w1: rgba(0, 0, 0, 0.1);
  --w105: rgba(0, 0, 0, 0.105);
  --w11: rgba(0, 0, 0, 0.11);
  --w12: rgba(0, 0, 0, 0.12);
  --w13: rgba(0, 0, 0, 0.13);
  --w14: rgba(0, 0, 0, 0.14);
  --w15: rgba(0, 0, 0, 0.15);
  --w16: rgba(0, 0, 0, 0.16);
  --w17: rgba(0, 0, 0, 0.17);
  --w18: rgba(0, 0, 0, 0.18);
  --w2: rgba(0, 0, 0, 0.2);
  --w22: rgba(0, 0, 0, 0.22);
  --w24: rgba(0, 0, 0, 0.24);
  --w28: rgba(0, 0, 0, 0.28);
  --w3: rgba(0, 0, 0, 0.3);
  --w32: rgba(0, 0, 0, 0.32);
  --w34: rgba(0, 0, 0, 0.34);
  --w35: rgba(0, 0, 0, 0.35);
  --w4: rgba(0, 0, 0, 0.4);
  --w42: rgba(0, 0, 0, 0.42);
  --w45: rgba(0, 0, 0, 0.45);
  --w46: rgba(0, 0, 0, 0.46);
  --w48: rgba(0, 0, 0, 0.48);
  --w5: rgba(0, 0, 0, 0.5);
  --w52: rgba(0, 0, 0, 0.52);
  --w54: rgba(0, 0, 0, 0.54);
  --w55: rgba(0, 0, 0, 0.55);
  --w56: rgba(0, 0, 0, 0.56);
  --w58: rgba(0, 0, 0, 0.58);
  --w6: rgba(0, 0, 0, 0.6);
  --w62: rgba(0, 0, 0, 0.62);
  --w64: rgba(0, 0, 0, 0.64);
  --w65: rgba(0, 0, 0, 0.65);
  --w66: rgba(0, 0, 0, 0.66);
  --w68: rgba(0, 0, 0, 0.68);
  --w7: rgba(0, 0, 0, 0.7);
  --w72: rgba(0, 0, 0, 0.72);
  --w76: rgba(0, 0, 0, 0.76);
  --w78: rgba(0, 0, 0, 0.78);
  --w8: rgba(0, 0, 0, 0.8);
  --w82: rgba(0, 0, 0, 0.82);
  --w84: rgba(0, 0, 0, 0.84);
  --w85: rgba(0, 0, 0, 0.85);
  --w86: rgba(0, 0, 0, 0.86);
  --w9: rgba(0, 0, 0, 0.9);
  --w92: rgba(0, 0, 0, 0.92);
  --w94: rgba(0, 0, 0, 0.94);
  --w96: rgba(0, 0, 0, 0.96);
  --w97: rgba(0, 0, 0, 0.97);
}
.cara-clara button,
.cara-clara input,
.cara-clara select,
.cara-clara textarea {
  color-scheme: light;
}

/* ═══ Los campos de formulario, también en claro (paso 4, 20-sep-2026) ═══════════════════════
   Los `.field` del sistema traen fondo oscuro fijo desde styles.css:953, y su variante clara
   vive bajo `:root[data-theme="light"]` (styles.css:16200) — es decir, solo cuando TODA la app
   está en claro. El panel sigue oscuro por fuera y aclara sección a sección con `.cara-clara`,
   así que dentro de una sección clara los filtros se quedaban en NEGRO sobre blanco: se vio en
   la foto de Cuentas en producción, nueve cajas negras encima de un panel ya claro.
   Se replica aquí la misma receta atada a `.cara-clara`, para que la herede sola cada pantalla
   que se vaya aclarando en los pasos siguientes. Cuando `.cara-clara` se funda con el tema claro
   (pendiente ya anotado), estas reglas se van con ella. */
.cara-clara .field input,
.cara-clara .field select,
.cara-clara .field textarea,
.cara-clara input[type="text"],
.cara-clara input[type="search"],
.cara-clara input[type="date"],
.cara-clara input[type="number"],
.cara-clara select,
.cara-clara textarea {
  /* background-COLOR, no el atajo: el atajo borra la flecha de los select. */
  background-color: var(--bg) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
.cara-clara .field input::placeholder,
.cara-clara .field textarea::placeholder,
.cara-clara input::placeholder,
.cara-clara textarea::placeholder { color: var(--muted) !important; }

/* Los campos que van DENTRO de una fila de la tabla no son cajas: se apoyan en la fila y solo
   se marcan al tocarlos. Si heredaran lo de arriba, cada fila llevaría dos cajas grises. */
.cara-clara .finance-cp-input,
.cara-clara .finance-note-input {
  background-color: transparent !important; border-color: transparent !important;
}
.cara-clara .finance-cp-input:hover,
.cara-clara .finance-note-input:hover,
.cara-clara .finance-cp-input:focus,
.cara-clara .finance-note-input:focus {
  background-color: var(--panel-2) !important; border-color: var(--line-strong) !important;
}
.cara-clara {
  /* El azul corporativo #1E3F80 (docs/estado/branding/marca-trasnego.md) para lo principal. */
  --accion: #1e3f80;
  --accion-hover: #173268;
  --brand: var(--accion);
  --brand-strong: var(--accion-hover);
  --brand-rgb: 30, 63, 128;
  --brand-contrast: #ffffff;
  --brand-ink: var(--accion);
  --link: var(--accion);
  --texto-suave: #3b4552;
  /* La capa v2 del panel, traducida a la cara clara. */
  --v2-card-bg: var(--panel);
  --v2-card-bg-hover: var(--panel-2);
  --v2-card-bg-active: var(--panel-3);
  --v2-border: var(--line);
  --v2-border-strong: var(--line-strong);
  --v2-text: var(--text);
  --v2-text-soft: var(--texto-suave);
  --v2-text-muted: var(--muted);
  --v2-text-dim: var(--muted-2);
  --v2-accent: var(--accion);
  --v2-accent-soft: var(--info-bg);
  --v2-accent-hover: var(--info-bg);
  color: var(--text);
}

/* El lienzo de la página, claro (mismo valor que --bg de la cara clara, styles.css). Con !important
   porque styles.css pinta `html, body` con el color de la app instalada y también lo lleva. */
html.admin-html,
html.admin-html body.admin-page,
body.admin-auth-loading::before {
  background: #eceff4 !important;
  background-color: #eceff4 !important;
}
/* Las pantallas que aún son oscuras pintan su propio fondo con las variables oscuras que heredan. */
.v2-body .admin-stage > .admin-pane:not(.cara-clara) {
  background: var(--bg);
  border-radius: var(--radius-md, 11px);
  min-height: 100%;
}
.v2-body #admin-status.admin-status-line { color: var(--muted-2); }

/* ── La barra de arriba ─────────────────────────────────────────────────────────────────────── */
.v2-body .admin-topbar.cara-clara {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  backdrop-filter: none;
  padding: 8px 16px;
}
.v2-body .cara-clara .v2-topbar-search { background: var(--panel-2); border-color: var(--line-strong); min-height: 44px; }
.v2-body .cara-clara .v2-topbar-search input { font-size: 0.84rem; }
.v2-body .cara-clara .v2-topbar-search-kbd { background: var(--panel); }
.v2-body .cara-clara .v2-topbar-icon-btn { min-width: 44px; min-height: 44px; color: var(--texto-suave); border-radius: 8px; }
.v2-body .cara-clara .v2-topbar-icon-btn:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.v2-body .cara-clara .v2-topbar-con-texto { width: auto; gap: 8px; padding: 0 12px; border-color: var(--line-strong); font-size: 0.78rem; font-weight: 600; color: var(--text); }
/* El botón de las tres rayas vale en los DOS sitios (fundador, 24-sep-2026: «haz que el panel de
   la izquierda se pueda ocultar y mostrar»): en el móvil abre el cajón, y en el ordenador pliega
   el menú para que la pantalla —Mensajes, con sus tres columnas, la que más lo pide— gane 256 px.
   Lo elegido se recuerda para la próxima vez. */
.v2-body .admin-menu-movil { display: inline-flex; }
@media (min-width: 1101px) {
  .v2-body.admin-nav-plegado .admin-layout,
  .v2-body.admin-nav-plegado .admin-layout:has(> .admin-nav-panel.cara-clara) { grid-template-columns: minmax(0, 1fr); }
  .v2-body.admin-nav-plegado .admin-nav-panel { display: none; }
}
.v2-topbar-cuenta { position: relative; }
.v2-body .cara-clara .v2-topbar-user { min-height: 44px; padding: 4px 8px 4px 4px; background: var(--panel-2); border-color: var(--line-strong); color: var(--text); font: inherit; border-radius: 8px; }
.v2-body .cara-clara .v2-topbar-avatar { background: var(--panel-3); color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; width: 32px; height: 32px; font-size: 0.72rem; }
.v2-body .cara-clara .v2-topbar-user-info { text-align: left; }
.v2-body .cara-clara .v2-topbar-user-info strong { font-size: 0.78rem; color: var(--text); }
.v2-body .cara-clara .v2-topbar-user-info small { font-size: 0.66rem; color: var(--muted); }
.v2-topbar-user-flecha { color: var(--muted); transition: transform 120ms ease-out; }
.v2-topbar-user[aria-expanded="true"] .v2-topbar-user-flecha { transform: rotate(180deg); }
.admin-menu-cuenta {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 248px;
  display: grid; gap: 4px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 11px;
  box-shadow: 0 12px 28px rgba(14, 27, 44, 0.18);
}
.admin-menu-cuenta[hidden] { display: none; }
.admin-menu-cuenta-quien { margin: 0; padding: 4px 8px; font-size: 0.72rem; color: var(--muted); }
.cara-clara .admin-menu-cuenta-salir { justify-content: flex-start; gap: 8px; width: 100%; }

/* ── El menú ────────────────────────────────────────────────────────────────────────────────── */
.v2-body .admin-nav-panel.cara-clara {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 8px;
  scrollbar-color: var(--line-strong) transparent;
}
.v2-body .cara-clara .admin-nav-head { display: none; } /* «Navegación · Backoffice Trasnego»: no decía nada */
.admin-nav-solo-movil { display: none; }
.v2-body .cara-clara .admin-nav-tab { min-height: 40px; font-size: 0.84rem; color: var(--texto-suave); border-radius: 8px; }
.v2-body .cara-clara .admin-nav-tab:hover { background: var(--panel-2); color: var(--text); }
.v2-body .cara-clara .admin-nav-tab.active { background: var(--info-bg); color: var(--accion); box-shadow: inset 3px 0 0 var(--accion); }
/* Los iconos del menú están dibujados en gris claro (pensados para fondo oscuro): sobre blanco se
   oscurecen con un filtro en vez de redibujar los 40; el activo, en el azul de la marca. */
.v2-body .cara-clara .admin-nav-tab::before { filter: brightness(0.45); opacity: 1; }
.v2-body .cara-clara .admin-nav-tab.active::before { filter: brightness(0.3) sepia(1) hue-rotate(185deg) saturate(4); }
.v2-body .cara-clara .admin-nav-group > summary,
.v2-body .cara-clara .admin-nav-group-label { min-height: 40px; color: var(--muted-2); font-size: 0.66rem; letter-spacing: 0.14em; background: transparent; border: 0; }
/* La regla general del tema claro pinta TODOS los campos con !important: sin él aquí, el buscador de
   arriba salía como una caja gris dentro de su caja (móvil, 8-sep; seguía igual el 24-sep). */
.v2-body .cara-clara .v2-topbar-search input { background: transparent !important; border: 0 !important; box-shadow: none; }
/* Si el número de tarjetas es impar, la última ocupa la fila entera (no deja un hueco gris). */
.inicio-decision.ocupa-dos { grid-column: 1 / -1; }
.v2-body .cara-clara .admin-nav-group[open] > summary { color: var(--texto-suave); }
.v2-body .cara-clara .admin-nav-group.active > summary { color: var(--accion); }
.admin-nav-contador {
  margin-left: auto; min-width: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border);
}
.admin-nav-contador.es-fallo { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.admin-nav-contador[hidden] { display: none; }
/* Iconos de las tres pantallas nuevas de «El sistema» (misma familia de trazo fino que el resto). */

/* ── Botones dentro de la cara clara: los de siempre (.btn + modificador), con la norma ─────── */
.cara-clara .btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
/* El tamaño pequeño, para los botones que van DENTRO de una fila de tabla (paso 4, 20-sep-2026).
   La regla de arriba pone 44 px de alto a TODO `.btn` de la cara clara, que es la norma del dedo;
   al aclarar Cuentas, esos 44 px se los llevaron también los 450 botones de la tabla y la fila no
   bajaba de 66 px — medido en producción, dos vueltas. En el ordenador el ratón no necesita 44 px;
   en pantalla pequeña se los devolvemos enteros, porque ahí sí se tocan con el dedo. */
.cara-clara .btn.small { min-height: 26px; padding: 3px 10px; font-size: 0.72rem; }
@media (max-width: 900px) {
  .cara-clara .btn.small { min-height: 44px; padding: 10px 14px; }
}

.cara-clara .btn.primary { background: var(--accion) !important; color: var(--brand-contrast) !important; border-color: transparent !important; }
.cara-clara .btn.primary:hover { background: var(--accion-hover) !important; }
.cara-clara .btn.secondary { background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--text); }
.cara-clara .btn.secondary:hover { background: var(--panel-3); }
.cara-clara .btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--texto-suave); }
.cara-clara .btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.cara-clara .btn.danger { background: transparent; border: 1px solid var(--danger-border); color: var(--danger-text); }
.cara-clara .btn:active { transform: scale(0.97); }
.cara-clara .btn:disabled { opacity: 0.55; border-style: dashed; cursor: not-allowed; }
.cara-clara .btn.inicio-enlace, .cara-clara .inicio-ir { background: transparent; border: 0; padding: 0 4px; color: var(--accion); box-shadow: none; }
.cara-clara :focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

/* ── El inicio ──────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) {
  .v2-body .admin-layout:has(> .admin-nav-panel.cara-clara) { grid-template-columns: 256px minmax(0, 1fr); }
}
.v2-body .admin-pane.inicio {
  background: var(--bg);
  color: var(--text);
  border-radius: 11px;
  min-height: 100%;
  padding: 24px 32px 40px;
  display: grid;
  gap: 28px;
  align-content: start;
}
.inicio-titular h2 { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.inicio-hora { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.84rem; color: var(--muted); }
/* Sin borde, tampoco el brillo de arriba: `.btn` de styles.css pone `box-shadow: 0 1px 0 … inset`, que en
   un botón sin borde de 44 px queda como una raya suelta 22 px por encima del texto (el «recuadro vacío
   encima de Actualizar» de las fotos del 19-sep, medido de nuevo el 7-oct). */
.cara-clara .btn.inicio-actualizar, .cara-clara .btn.inicio-atajo { border: 0; padding: 0 4px; color: var(--accion); background: transparent; box-shadow: none; }
.inicio-bloque { display: grid; gap: 8px; align-content: start; min-width: 0; }
.inicio-bloque-titulo { display: grid; gap: 2px; }
.inicio-bloque-titulo h3 { margin: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.inicio-bloque-titulo span { font-size: 0.78rem; color: var(--muted); }
.inicio-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }

/* Espera tu decisión: las tarjetas en dos columnas, separadas por una línea de 1 px (el hueco de la
   rejilla deja ver el fondo, que es la línea), para que se lean como una lista y no como cajitas. */
.inicio-lista {
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  overflow: hidden;
  background: var(--panel);
}
.inicio-decisiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.inicio-decisiones-grupo { display: contents; }
.inicio-decision { display: grid; gap: 8px; align-content: start; padding: 12px 16px 16px; background: var(--panel); min-width: 0; }
.inicio-decisiones > .inicio-vacio,
.inicio-decisiones .inicio-cargando,
.inicio-decisiones .inicio-pie { grid-column: 1 / -1; background: var(--panel); margin: 0; }
.inicio-decisiones .inicio-pie { background: var(--panel-2); }
.inicio-vacio { padding: 12px 16px; }
.inicio-vacio[hidden] { display: none; }
.inicio-quien { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.72rem; color: var(--muted); }
.inicio-decision-titulo { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.inicio-decision-texto { margin: 0; font-size: 0.84rem; color: var(--texto-suave); }
.inicio-pasos { margin: 0; font-size: 0.78rem; color: var(--muted); }
.inicio-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.inicio-detalle summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.78rem; font-weight: 600; color: var(--accion); }
.inicio-detalle p { margin: 0 0 4px; font-size: 0.84rem; color: var(--texto-suave); }
.inicio-pie { padding: 8px 16px; font-size: 0.78rem; color: var(--muted); }
.inicio-cargando { margin: 0; padding: 12px 16px; font-size: 0.84rem; color: var(--muted); }

/* Correos de clientes (19-sep): un plegable por departamento, con las mismas tarjetas de decisión
   dentro. El aviso de arriba dice que «Aprobar» no manda nada. */
.inicio-correos { display: grid; gap: 8px; }
/* 28-sep (noche), medido en el móvil: una tabla dentro de un desplegable (spam, lo que aprende) empujaba la
   columna entera a 690 px en una pantalla de 390 y el panel recortaba la derecha de TODAS las tarjetas.
   En una rejilla cada pieza puede estrecharse hasta la columna; la tabla se desliza dentro de su marco. */
.inicio-correos > * { min-width: 0; }
.inicio-correos > .inicio-vacio,
.inicio-correos > .inicio-cargando { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); }
.correo-aviso { margin: 0; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel-2); color: var(--texto-suave); }
.correo-grupo > summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-size: 0.84rem; font-weight: 600; color: var(--text); list-style: none;
}
.correo-grupo > summary::-webkit-details-marker { display: none; }
.correo-grupo > summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s ease; }
.correo-grupo[open] > summary::after { transform: rotate(180deg); }
/* La sala de espera de las mejoras de TRIA (22-sep): el mismo plegable, a lo ancho del bloque de
   decisiones, con las mismas tarjetas dentro. */
.inicio-decisiones .inicio-plegable { grid-column: 1 / -1; background: var(--panel-2); padding: 0 12px; min-width: 0; }
.inicio-plegable > summary { font-weight: 500; color: var(--texto-suave); }
.inicio-plegable > .inicio-decisiones { margin: 0 -12px; border-top: 1px solid var(--line); }
.correo-frase { display: block; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line-strong); font-style: italic; color: var(--texto-suave); }
.correo-frase::before, .correo-frase::after { content: ""; }
.correo-depto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.admin-page .correo-depto select {
  min-height: 44px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 8px);
  background-color: var(--panel); color: var(--text); font: inherit; font-size: 16px; cursor: pointer;
}
/* 28-sep-2026, dibujo aprobado de la bandeja: arriba, a quién se ha contestado (las tres cifras son
   también el filtro), la tabla de grupos para decidir en bloque y los motivos de descarte de un toque.
   Color con palabra, como pide la norma: cada caja dice lo que es, el color solo ayuda. */
.correo-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.correo-cuenta {
  display: grid; gap: 4px; align-content: start; min-height: 44px; padding: 12px 16px; text-align: left;
  border: 2px solid transparent; border-radius: 11px; font: inherit; cursor: pointer;
}
.correo-cuenta b { font-size: 1.6rem; line-height: 1.1; }
.correo-cuenta span { font-size: 0.84rem; }
.correo-cuenta small { font-size: 0.78rem; opacity: 0.85; }
.correo-cuenta-sin { background: var(--danger-bg); color: var(--danger-text); }
.correo-cuenta-antes { background: var(--warn-bg); color: var(--warn-text); }
.correo-cuenta-contestado { background: var(--ok-bg); color: var(--ok-text); }
.correo-cuenta.activa { border-color: currentColor; }
.correo-cuenta:focus-visible { outline: 3px solid var(--accion, var(--brand)); outline-offset: 2px; }
.correo-archivar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.correo-archivar-confirmar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--texto-suave); }
.correo-archivar-confirmar[hidden] { display: none; }
.correo-tabla { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); }
.correo-tabla .data-table { min-width: 640px; }
.correo-tabla .data-table td { vertical-align: top; }
.correo-tabla .inicio-chip { margin: 0 4px 4px 0; }
.correo-grupo-detalle { font-size: 0.78rem; color: var(--texto-suave); }
.correo-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.84rem; color: var(--texto-suave); }
.correo-motivos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.correo-motivos[hidden] { display: none; }
.correo-motivos > span { font-size: 0.84rem; color: var(--texto-suave); }
/* La respuesta que prepara TRIA (parte 4): se edita en la tarjeta; «Aprobar y enviar» pide un sí
   en la propia tarjeta, diciendo a quién sale y con qué firma. */
.correo-borrador { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel-2); }
.correo-borrador-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: 0.84rem; }
.correo-borrador-cab span { font-size: 0.78rem; color: var(--texto-suave); }
.admin-page .correo-borrador textarea {
  width: 100%; box-sizing: border-box; min-height: 180px; padding: 12px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.5;
}
.admin-page .correo-borrador textarea:focus-visible { outline: 3px solid var(--accion, var(--brand)); outline-offset: 1px; }
.correo-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: var(--info-bg); color: var(--info-text); font-size: 0.84rem; }
.correo-confirmar[hidden] { display: none; }

/* La pieza «respuesta» de la norma: la pregunta en pequeño, la respuesta con su cifra, el porqué y
   el botón para actuar. Una debajo de otra dentro de su marco. */
.inicio-respuestas { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); overflow: hidden; }
.inicio-respuesta { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 4px; min-width: 0; }
.inicio-respuesta + .inicio-respuesta { border-top: 1px solid var(--line); }
.inicio-respuesta:last-child { padding-bottom: 12px; }
.inicio-respuesta:has(.inicio-ir):last-child { padding-bottom: 4px; }
.inicio-rotulo { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.inicio-frase { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.inicio-sub { margin: 0; font-size: 0.84rem; color: var(--texto-suave); }
.inicio-ir { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.inicio-ir:hover { text-decoration: underline; }
.inicio-cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inicio-respuesta-gris { background: var(--panel-2); }
/* Lo que solo aparece el día que pasa: borde punteado, para que se vea que no es de siempre. */
.inicio-solo-si-pasa { margin: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.inicio-solo-si-pasa + .inicio-respuesta { border-top: 0; }

/* Etiquetas de estado: el color ayuda, la palabra manda. */
.inicio-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: 2px;
  padding: 0 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; letter-spacing: 0;
  background: var(--panel-3); color: var(--muted); border: 1px solid var(--line-strong);
}
.inicio-chip-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.inicio-chip-aviso { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.inicio-chip-fallo { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.inicio-chip-info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }

/* Pregúntale a TRIA: se ve la última pregunta y su respuesta; «Ver la conversación entera» abre el resto. */
.inicio-chat-caja { display: grid; gap: 12px; padding: 12px 16px; }
.inicio .admin-director-chat-log { margin: 0; max-height: 320px; gap: 8px; padding: 0; background: transparent; border: 0; }
.inicio-chat:not(.chat-entera) .admin-director-chat-log > :not(:nth-last-child(-n+2)) { display: none; }
.inicio .admin-director-chat-msg { max-width: none; padding: 0; border-radius: 0; background: transparent; font-size: 0.84rem; line-height: 1.5; color: var(--text); }
.inicio .admin-director-chat-msg-user { align-self: stretch; color: var(--muted); font-size: 0.78rem; }
.inicio .admin-director-chat-msg-user::before { content: "Tú: "; font-weight: 600; }
.inicio .admin-director-chat-msg-director { align-self: stretch; border-left: 2px solid var(--line-strong); padding-left: 12px; }
.inicio .admin-director-chat-msg code { background: var(--panel-3); }
.inicio .admin-director-chat-note { font-size: 0.78rem; color: var(--info-text); }
.inicio .admin-director-chat-form { display: flex; gap: 8px; align-items: stretch; margin: 0; }
.inicio .admin-director-chat-form textarea {
  flex: 1; min-width: 0; min-height: 44px; resize: vertical; padding: 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text); font: inherit; font-size: 0.84rem;
}

/* La ventana del listado de compradores. */
.inicio-ventana-fondo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(20, 26, 33, 0.45); }
.inicio-ventana { width: min(720px, 100%); max-height: 80vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 11px; padding: 16px; display: grid; gap: 12px; }
.inicio-ventana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inicio-ventana-cabeza h3 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.inicio-ventana-texto { margin: 0; white-space: pre-wrap; font: inherit; font-size: 0.84rem; line-height: 1.5; color: var(--texto-suave); }

/* ═══ «CÓMO VA HOY» (paso 4, 20-sep-2026) — dibujo aprobado por el fundador:
   docs/diseno/paso4-inicio-del-panel.html. Vive dentro de .admin-fold (el plegable único del
   sistema, admin.css ~línea 2300): aquí solo se traduce su tema oscuro de fábrica a la cara
   clara del inicio, reutilizando los tokens de siempre — no es un plegable nuevo. Las clases
   hoy-* de más abajo SÍ son nuevas: no existía ningún gráfico de barras en el panel (era esto o
   un ▰▱ de texto en Captación); se hace la primera, con la misma paleta gris + azul de marca. */
.cara-clara .admin-fold { background: var(--panel); border-color: var(--line-strong); border-radius: 11px; margin-bottom: 0; }
.cara-clara .admin-fold-summary { padding: 12px 16px; min-height: 44px; }
.cara-clara .admin-fold-summary:hover { background: var(--panel-2); }
.cara-clara .admin-fold-title { font-size: 0.98rem; font-weight: 600; color: var(--text); }
.cara-clara .admin-fold-hint { font-size: 0.84rem; color: var(--muted); flex-basis: 100%; }
.cara-clara .admin-fold-summary::after { border-color: var(--muted); }
.cara-clara .admin-fold[open] > .admin-fold-summary { border-bottom-color: var(--line); }
.cara-clara .admin-fold-body { padding: 4px 16px 16px; }

.hoy-frescura { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 0.78rem; color: var(--muted); }
.hoy-frescura svg { flex: none; margin-top: 1px; fill: currentColor; }

.hoy-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hoy-bloque { grid-column: span 12; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.hoy-bloque.mitad { grid-column: span 6; }

.hoy-cab { display: flex; align-items: flex-start; gap: 8px; }
.hoy-icono { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--info-bg); color: var(--accion); display: grid; place-items: center; }
.hoy-icono svg { fill: currentColor; }
.hoy-cab-txt { display: grid; gap: 1px; min-width: 0; }
.hoy-cab-txt h4 { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--text); }
.hoy-cab-txt p { margin: 0; font-size: 0.72rem; color: var(--muted); }
.hoy-total { margin-left: auto; text-align: right; flex: none; }
.hoy-total b { display: block; font-size: 1.12rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hoy-total span { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.hoy-filas { display: grid; gap: 3px; }
.hoy-fila { display: grid; grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) 40px; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px; border-radius: 8px; }
.hoy-fila-rotulo { font-size: 0.78rem; color: var(--text); overflow-wrap: anywhere; }
.hoy-fila-barra { position: relative; height: 14px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.hoy-fila-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 3px; border-radius: 0 999px 999px 0; background: var(--accion); }
.hoy-fila-fill.gris { background: rgba(90, 102, 116, 0.38); }
.hoy-fila-valor { font-size: 0.78rem; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.hoy-fila-cero { display: grid; grid-template-columns: minmax(96px, 148px) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 26px; padding: 2px 4px; }
.hoy-fila-cero .hoy-fila-rotulo { color: var(--muted); }
.hoy-cero-txt { font-size: 0.72rem; color: var(--muted); }

.hoy-asesores { display: grid; gap: 8px; }
.hoy-asesor { display: grid; gap: 3px; }
.hoy-asesor-nombre { font-size: 0.78rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.hoy-fila-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.hoy-fila-mini .hoy-fila-barra { height: 12px; }
.hoy-fila-mini .hoy-fila-valor { font-size: 0.72rem; }

.hoy-fuente { display: flex; align-items: flex-start; gap: 5px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: 0.66rem; color: var(--muted); }
.hoy-fuente svg { flex: none; margin-top: 1px; fill: currentColor; }
.hoy-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.72rem; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 8px 12px; }
.hoy-aviso svg { flex: none; margin-top: 1px; fill: currentColor; }
/* El aviso de «Reservado» (hoyAvisoReservado(), dibujo paso4-inicio-del-panel.html:444) no lleva
   icono: sin ningún <svg> dentro, que sea bloque en vez de fila flex con gap (fallo 7, ronda 4). */
.hoy-aviso:not(:has(svg)) { display: block; }

/* Ancho de las barras: SOLO por atributo data-w — la CSP del panel (style-src 'self') bloquea
   (los mismos pasos sirven a los tramos de la barra de calidad de «Campañas y anuncios», .barra-tramo)
   cualquier style="--w:…" escrito por PHP o JS. Ver guardián R2, scripts/guardian-predeploy.sh.
   Pasos finos (1 en 1) por debajo del 5%: sin ellos, etapas hasta 10 veces distintas entre sí
   (p.ej. 10 y 1 sobre un máximo de 647) salían con la MISMA barra al 5% — ver hoyAncho() en
   admin.js. A partir de 5% sigue en pasos de 5, como antes. */
:is(.hoy-fila-fill, .barra-tramo)[data-w="0"] { --w: 0%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="1"] { --w: 1%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="2"] { --w: 2%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="3"] { --w: 3%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="4"] { --w: 4%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="5"] { --w: 5%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="10"] { --w: 10%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="15"] { --w: 15%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="20"] { --w: 20%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="25"] { --w: 25%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="30"] { --w: 30%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="35"] { --w: 35%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="40"] { --w: 40%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="45"] { --w: 45%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="50"] { --w: 50%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="55"] { --w: 55%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="60"] { --w: 60%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="65"] { --w: 65%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="70"] { --w: 70%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="75"] { --w: 75%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="80"] { --w: 80%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="85"] { --w: 85%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="90"] { --w: 90%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="95"] { --w: 95%; }
:is(.hoy-fila-fill, .barra-tramo)[data-w="100"] { --w: 100%; }

@media (max-width: 980px) {
  .inicio-dos, .inicio-decisiones { grid-template-columns: minmax(0, 1fr); }
  .hoy-bloque.mitad { grid-column: span 12; }
}

/* ── El móvil: el menú, un cajón detrás del botón de arriba a la izquierda ─────────────────────
   Misma medida que plegarGruposEnMovil() y que el bloque «EL BACKOFFICE EN UN MÓVIL» de arriba. */
@media (hover: none), (max-width: 1100px) {
  .v2-body .admin-menu-movil { display: inline-flex; }
  /* Una sola fila: el menú, el buscador y los botones. «Chats del equipo» va en el cajón. */
  /* (la regla vieja de 820 px la ponía en columna: tres filas y 170 px de pantalla gastados) */
  .v2-body .admin-topbar.cara-clara { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 4px 8px; gap: 4px; border-radius: 8px; }
  .v2-body .cara-clara .v2-topbar-search { width: auto; flex: 1 1 auto; min-width: 0; max-width: none; }
  .v2-body .cara-clara .v2-topbar-search-kbd,
  .v2-body .cara-clara #admin-ver-comerciales { display: none; }
  .v2-body .cara-clara .v2-topbar-actions { margin-left: 0; gap: 4px; flex: 0 0 auto; }
  .v2-body .cara-clara .v2-topbar-con-texto span,
  .v2-body .cara-clara .v2-topbar-user-info,
  .v2-body .cara-clara .v2-topbar-user-flecha { display: none; }
  .v2-body .cara-clara .v2-topbar-con-texto { padding: 0; width: 44px; border-color: transparent; }
  .v2-body .admin-nav-panel.cara-clara {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(86vw, 340px); height: 100dvh; max-height: none; margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
    border-radius: 0 11px 11px 0; border: 0;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden;
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 200ms;
    box-shadow: 8px 0 24px rgba(14, 27, 44, 0.24);
  }
  body.admin-menu-abierto .admin-nav-panel.cara-clara { transform: none; visibility: visible; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
  .admin-nav-fondo { position: fixed; inset: 0; z-index: 70; background: rgba(20, 26, 33, 0.45); }
  .admin-nav-fondo[hidden] { display: none; }
  .v2-body .cara-clara .admin-nav-solo-movil { display: grid; gap: 2px; }
  .v2-body .cara-clara .admin-nav-arriba { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .v2-body .cara-clara .admin-nav-abajo { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
  .v2-body .cara-clara .admin-nav-tab,
  .v2-body .cara-clara .admin-nav-group > summary { min-height: 44px; }
  .v2-body .cara-clara .admin-nav-atajo { text-decoration: none; }
  .v2-body .cara-clara .admin-nav-salir { color: var(--danger-text); }
  .v2-body .cara-clara .admin-nav-tabs { display: flex; flex-direction: column; }
  .v2-body .admin-pane.inicio { padding: 16px; gap: 20px; border-radius: 8px; }
  /* Atajo a «Cómo va hoy», destacado en móvil (dibujo aprobado, paso4-inicio-del-panel.html:560,
     componente .m-atajo-hoy) — ronda 3 de revisión, 20-sep-2026. En escritorio es un enlace
     pequeño más dentro de la cabecera (admin.css:8970: fondo transparente); en pantallas
     pequeñas la sección plegada queda al final de la página y con ese mismo tratamiento pasa
     desapercibida, así que aquí se pone ancho completo y con fondo, sin tocar el markup ni el
     resto de .inicio-hora. */
  .cara-clara .btn.inicio-atajo {
    display: flex; width: 100%; min-height: 44px; margin-top: 4px;
    background: var(--info-bg); color: var(--accion); font-weight: 700;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-body .admin-nav-panel.cara-clara, .cara-clara .btn, .v2-topbar-user-flecha { transition: none; }
}


/* ── MENSAJES EN CLARO (dibujo aprobado por el fundador, 24-sep-2026) ─────────────────────────────
   https://claude.ai/artifact/SXbfnjo41JT3kqzouzW86m · Era la única pantalla que seguía en oscuro.
   Todo va atado a `#admin-pane-mensajes.cara-clara`: las mismas clases (.admin-subtab, .msg-*) se
   usan en pantallas que siguen oscuras y no se tocan. Colores, SOLO de los tonos de la casa, salvo
   el círculo de cada canal (WhatsApp, Instagram, Facebook), que es su marca. */

/* La cabecera, en una línea: título · recuento · «?» · Actualizar. Antes eran 375 px de cabecera y
   las tres columnas se quedaban en 427 px de alto con la ventana a 900. */
/* `flex-direction: row` va escrito a propósito: una regla vieja del móvil pone TODAS las cabeceras en
   columna, y ahí el «flex: 1 1 240px» del recuento se volvía 240 px de ALTO (un hueco en blanco). */
#admin-pane-mensajes .msg-cabecera { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; border: 0; text-align: left; }
#admin-pane-mensajes .msg-cabecera h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--text); }
#admin-pane-mensajes .msg-cabecera .msg-recuento { margin: 0; flex: 1 1 240px; min-width: 0; }
#admin-pane-mensajes .msg-cabecera .admin-quick-actions { margin: 0; }
#admin-pane-mensajes .msg-ayuda { margin: 0; position: relative; }
#admin-pane-mensajes .msg-ayuda summary {
  display: inline-grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 700;
}
#admin-pane-mensajes .msg-ayuda[open] summary { color: var(--accion); border-color: var(--accion); }
#admin-pane-mensajes .msg-ayuda p {
  position: absolute; z-index: 5; top: 40px; right: 0; width: min(420px, 80vw); margin: 0; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; line-height: 1.5;
}

/* Una fila de filtros: canal a la izquierda, estado después, buscador y «Escribir» a la derecha. */
#admin-pane-mensajes .msg-barra { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 12px; }
#admin-pane-mensajes .msg-barra .admin-subtabs,
#admin-pane-mensajes .msg-barra .admin-estados { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
#admin-pane-mensajes .msg-herramientas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
#admin-pane-mensajes .msg-herramientas .admin-buscar { margin: 0; min-width: 240px; min-height: 32px; }

#admin-pane-mensajes.cara-clara .admin-subtab,
#admin-pane-mensajes.cara-clara .admin-estado {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel);
  color: var(--text); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
#admin-pane-mensajes.cara-clara .admin-estado { color: var(--muted); }
/* En el móvil, tamaño dedo (decisión del fundador el 18-sep: 44 px en todo lo que se pulsa).
   Aquí medían 32 también con el dedo. Se arregla en el sitio común: cae en los dos juegos de
   chips de Mensajes a la vez, no solo en el de «Comerciales» (15-oct-2026). */
@media (max-width: 760px) {
  #admin-pane-mensajes.cara-clara .admin-subtab,
  #admin-pane-mensajes.cara-clara .admin-estado { min-height: 44px; padding: 0 16px; }
}
#admin-pane-mensajes.cara-clara .admin-subtab .admin-subtab-count,
#admin-pane-mensajes.cara-clara .admin-estado .admin-subtab-count { color: inherit; font-weight: 700; }
@media (hover: hover) {
  #admin-pane-mensajes.cara-clara .admin-subtab:not(.is-active):hover,
  #admin-pane-mensajes.cara-clara .admin-estado[aria-pressed="false"]:hover { background: var(--panel-2); color: var(--text); }
}
#admin-pane-mensajes.cara-clara .admin-subtab.is-active,
#admin-pane-mensajes.cara-clara .admin-estado[aria-pressed="true"] { border-color: var(--accion); background: var(--info-bg); color: var(--accion); }
/* Lo urgente, en color — pero SOLO si hay algo: un chip rojo con un cero sería una alarma falsa.
   «Sin responder» en rojo; «Cierra en 24 h», el límite de Meta que no tiene vuelta atrás, en ámbar. */
#admin-pane-mensajes.cara-clara .admin-estado[data-msg-estado="sin-responder"]:has(.admin-subtab-count:not(:empty)) { border-color: var(--danger-border); color: var(--danger-text); }
#admin-pane-mensajes.cara-clara .admin-estado[data-msg-estado="cierra"]:has(.admin-subtab-count:not(:empty)) { border-color: var(--warn-border); color: var(--warn-text); }
#admin-pane-mensajes.cara-clara .admin-estado[data-msg-estado="sin-responder"][aria-pressed="true"] { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
#admin-pane-mensajes.cara-clara .admin-estado[data-msg-estado="cierra"][aria-pressed="true"] { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }

/* Las tres columnas, en blanco con bordes suaves. */
#admin-pane-mensajes.cara-clara .msg-cuerpo { border-color: var(--line); background: var(--panel); border-radius: 12px; }
#admin-pane-mensajes.cara-clara .msg-lista { background: var(--panel); border-right-color: var(--line); }
@media (hover: hover) { #admin-pane-mensajes.cara-clara .msg-conv:hover { background: var(--panel-2); } }
#admin-pane-mensajes.cara-clara .msg-conv[aria-current="true"] { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--accion); }
#admin-pane-mensajes.cara-clara .msg-conv:focus-visible { outline-color: var(--accion); }
#admin-pane-mensajes.cara-clara .msg-marca.co { background: var(--panel-2); }
/* Los sellos: texto fuerte sobre fondo pastel (antes eran tonos pensados para el fondo negro). */
#admin-pane-mensajes.cara-clara .msg-sello { border: 0; padding: 1px 8px; font-weight: 700; }
#admin-pane-mensajes.cara-clara .msg-sello.espera { background: var(--warn-bg); color: var(--warn-text); }
#admin-pane-mensajes.cara-clara .msg-sello.espera.vieja,
#admin-pane-mensajes.cara-clara .msg-sello.reloj,
#admin-pane-mensajes.cara-clara .msg-sello.timo { background: var(--danger-bg); color: var(--danger-text); }
#admin-pane-mensajes.cara-clara .msg-sello.hecho { background: var(--panel-2); color: var(--muted); }
#admin-pane-mensajes.cara-clara .msg-sello.comercial { background: var(--info-bg); color: var(--info-text); }
#admin-pane-mensajes.cara-clara .msg-hilo-cab,
#admin-pane-mensajes.cara-clara .msg-reply-zona { border-color: var(--line); background: var(--panel); }
#admin-pane-mensajes.cara-clara .msg-hilo-mensajes { background: var(--panel); }
#admin-pane-mensajes.cara-clara .msg-cliente { background: var(--panel-2); color: var(--text); }
#admin-pane-mensajes.cara-clara .msg-ficha { background: var(--panel); border-left-color: var(--line); }
#admin-pane-mensajes.cara-clara .msg-dato { border-bottom-color: var(--line); }
#admin-pane-mensajes.cara-clara .msg-local { border-color: var(--line); }
#admin-pane-mensajes.cara-clara .msg-local .e { color: var(--ok-text); }
#admin-pane-mensajes.cara-clara .msg-ficha-vacia { border-color: var(--line-strong); }

/* Esqueleto de la lista mientras carga (15-oct-2026): del mismo alto que las tarjetas de verdad,
   para que la lista no dé un salto al llegar los datos. En la lista principal va QUIETO, sin
   brillo que se desplaza: es lo que más se mira y un destello ahí cansa. */
.msg-esqueleto { display: flex; flex-direction: column; }
/* 88 px, que es lo que mide una tarjeta de verdad con su sello: el esqueleto está para que la
   lista NO dé un salto al llegar los datos, así que su alto tiene que parecerse al de después. */
.msg-esq-fila { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); min-height: 88px; }
.msg-esq-ini { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--panel-3); }
.msg-esq-lineas { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.msg-esq-lineas span { display: block; height: 10px; border-radius: 4px; background: var(--panel-3); }
.msg-esq-lineas span:first-child { width: 45%; }
.msg-esq-lineas span:last-child { width: 80%; }
@media (prefers-reduced-motion: no-preference) { .msg-esq-ini, .msg-esq-lineas span { animation: msg-esq-latido 1.6s ease-in-out infinite; } }
@keyframes msg-esq-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Un fallo al cargar NO se ve como «no hay nada»: lo dice y ofrece reintentar. */
.msg-vacio.msg-fallo { text-align: left; padding: 16px; }
/* También el motivo a la izquierda: `.msg-vacio` centra, y un texto centrado debajo de otro
   alineado a la izquierda se lee como dos bloques distintos (norma de TRIA: texto a la izquierda). */
.msg-vacio.msg-fallo p { margin: 0 0 8px; text-align: left; }

/* El aviso de lo que acaba de pasar en la ficha (alta, pasar, nota, vincular): arriba de la columna. */
#admin-pane-mensajes .msg-aviso { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--info-border); border-radius: 8px; background: var(--info-bg); color: var(--text); font-size: 0.875rem; line-height: 1.45; }
#admin-pane-mensajes .msg-aviso-ok { border-color: var(--ok-border); background: var(--ok-bg); }
#admin-pane-mensajes .msg-aviso-error { border-color: var(--danger-border); background: var(--danger-bg); }
/* 125.2: «Ya hay un contacto con este nombre» — aviso para elegir; nunca se une solo. */
#admin-pane-mensajes .msg-alta-nombre { margin: 0 0 12px; padding: 12px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--text); font-size: 0.875rem; line-height: 1.45; }
#admin-pane-mensajes .msg-alta-nombre p { margin: 0 0 6px; }
#admin-pane-mensajes .msg-alta-nombre-lista { margin: 6px 0 10px; padding-left: 18px; }
#admin-pane-mensajes .msg-alta-nombre-lista li { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#admin-pane-mensajes .msg-alta-nombre-enlace { font-weight: 600; color: var(--accent, inherit); text-decoration: underline; white-space: nowrap; }
#admin-pane-mensajes .msg-alta-nombre-botones { display: flex; flex-wrap: wrap; gap: 8px; }
#admin-pane-mensajes .msg-aviso-enlace { display: inline-block; margin-left: 4px; font-weight: 600; color: var(--accent, inherit); text-decoration: underline; white-space: nowrap; }
/* «Ficha ↓» solo existe en el móvil, donde la ficha va debajo de la conversación. */
#admin-pane-mensajes .msg-ir-ficha {
  display: none; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 0 0 8px; border: 0; background: none;
  color: var(--accion); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
/* «‹ Volver» solo existe en el móvil (abajo). */
#admin-pane-mensajes .msg-volver {
  display: none; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 12px 0 0; border: 0; background: none;
  color: var(--accion); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
/* Un enlace pegado por el cliente (los de Idealista pasan de 150 letras sin un espacio) se salía de
   la burbuja por la derecha y quedaba cortado. Se parte donde haga falta. */
#admin-pane-mensajes .msg-burbuja { overflow-wrap: anywhere; min-width: 0; }
#admin-pane-mensajes .msg-hilo-cab > span:not(.val-badge) { flex: 1 1 auto; min-width: 0; }

/* EN EL MÓVIL, UNA COSA CADA VEZ: la lista, o la conversación a pantalla completa con «‹ Volver».
   Con tres columnas en 390 px el hilo medía 24 px de ancho. La clase `ver-hilo` la pone el código
   al tocar una conversación (mensajesVerHilo). */
@media (max-width: 760px) {
  #admin-pane-mensajes .msg-cuerpo { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  /* LA LISTA, ENTERA Y CON SCROLL (5-oct-2026): la pestaña medía lo que la pantalla y la caja
     (`overflow: hidden`) cortaba la lista a 400 px, con 3.000 px de conversaciones detrás y sin barra.
     Ahora la pestaña crece con lo que tiene y baja la zona de contenido. */
  #admin-pane-mensajes:not(.ver-hilo),
  #admin-pane-mensajes:not(.ver-hilo) .msg-cuerpo { height: auto; min-height: 0; align-self: start; overflow: visible; }
  #admin-pane-mensajes .msg-lista { border-right: 0; overflow: visible; padding: 4px; }
  #admin-pane-mensajes .msg-hilo-panel,
  #admin-pane-mensajes .msg-ficha { display: none; }
  #admin-pane-mensajes.ver-hilo .msg-cabecera,
  #admin-pane-mensajes.ver-hilo .msg-barra,
  #admin-pane-mensajes.ver-hilo .msg-lista { display: none; }
  #admin-pane-mensajes.ver-hilo .msg-hilo-panel { display: flex; height: calc(100dvh - 150px); min-height: 420px; }
  #admin-pane-mensajes .msg-volver,
  #admin-pane-mensajes .msg-ir-ficha { display: inline-flex; }
  /* La ficha, DEBAJO de la conversación: ahí se da de alta, se pasa a otro asesor o se vincula un
     local. Esconderla (24-sep, por la mañana) dejó sin poder dar de alta desde el móvil. */
  #admin-pane-mensajes.ver-hilo .msg-ficha { display: block; border-left: 0; border-top: 1px solid var(--line); padding: 16px 12px 24px; }
  /* La caja medía lo que la pantalla y cortaba lo de abajo: la ficha se quedaba en 40 px de sus
     574 y «Ficha ↓» no llevaba a ningún sitio (medido en el panel real, 24-sep-2026). Ahora crece
     con lo que tiene y se baja con el dedo. */
  #admin-pane-mensajes.ver-hilo,
  #admin-pane-mensajes.ver-hilo .msg-cuerpo { height: auto; min-height: 0; align-self: start; overflow: visible; }
  /* El canal ya va escrito debajo del nombre («WhatsApp · teléfono»): la etiqueta repetida dejaba
     el nombre en 68 px, partido en dos líneas. */
  #admin-pane-mensajes .msg-hilo-cab .val-badge { display: none; }
  #admin-pane-mensajes .msg-hilo-cab { flex-wrap: nowrap; align-items: center; padding: 8px 12px; }
  #admin-pane-mensajes .msg-hilo-mensajes { padding: 12px; }
  #admin-pane-mensajes .msg-reply-zona { padding: 10px 12px 12px; }
  /* Título, «?» y Actualizar en la primera línea; el recuento debajo, a todo el ancho. */
  #admin-pane-mensajes .msg-cabecera { gap: 8px; }
  #admin-pane-mensajes .msg-cabecera h2 { flex: 1 1 auto; }
  #admin-pane-mensajes .msg-cabecera .msg-recuento { order: 5; flex: 1 1 100%; }
  /* Los filtros, cada grupo en UNA fila que se desliza de lado (como en WhatsApp o Gmail): con los
     nueve envolviendo eran cinco filas y la primera conversación caía por debajo de la pantalla.
     Los dos urgentes van los primeros de su fila, así que siempre están a la vista. */
  #admin-pane-mensajes .msg-barra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #admin-pane-mensajes .msg-barra .admin-subtabs,
  #admin-pane-mensajes .msg-barra .admin-estados { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #admin-pane-mensajes .msg-barra .admin-subtabs::-webkit-scrollbar,
  #admin-pane-mensajes .msg-barra .admin-estados::-webkit-scrollbar { display: none; }
  #admin-pane-mensajes .msg-barra .admin-subtab,
  #admin-pane-mensajes .msg-barra .admin-estado { flex: 0 0 auto; white-space: nowrap; }
  #admin-pane-mensajes .msg-herramientas { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  #admin-pane-mensajes .msg-herramientas .admin-buscar { flex: 1 1 auto; min-width: 0; }
  #admin-pane-mensajes .msg-herramientas #admin-mensajes-nuevo { flex: 0 0 auto; white-space: nowrap; }
  #admin-pane-mensajes .msg-nuevo-form { width: 100%; }
  #admin-pane-mensajes .msg-nuevo-form input { min-width: 0; flex: 1 1 100%; }
  #admin-pane-mensajes.cara-clara .admin-subtab,
  #admin-pane-mensajes.cara-clara .admin-estado,
  #admin-pane-mensajes .msg-herramientas .admin-buscar,
  #admin-pane-mensajes .msg-herramientas .btn,
  #admin-pane-mensajes .msg-cabecera .btn { min-height: 44px; }
  #admin-pane-mensajes .msg-ayuda summary { width: 44px; height: 44px; }
  #admin-pane-mensajes .msg-conv { padding: 12px 8px; }
}

/* ── MENSAJES · FASE 27 (8-oct-2026): más sitio para el chat ───────────────────────────────────────
   Dibujo aprobado: docs/estado/ia-mensajeria/mensajes-mas-sitio-para-el-chat-dibujo.html (versión
   «Máxima», derecha mejorada, 5 chats a la vista). Lo de la maqueta va SOLO en el ordenador
   (≥ 1101 px); en tableta y móvil la pantalla se ve como antes. Las piezas nuevas (lista, agenda,
   plegados) sí son las mismas en todas partes: un componente, no dos. */

/* Fuera del ordenador, la cabecera agrupada se ve como antes: uno debajo de otro. */
#admin-pane-mensajes .msg-cab-una { display: grid; gap: inherit; min-width: 0; }
#admin-pane-mensajes .msg-cab-una > .msg-cabecera,
#admin-pane-mensajes .msg-cab-una > .msg-barra,
#admin-pane-mensajes .msg-cab-una > .msg-aprendido { margin: 0; }
#admin-pane-mensajes .msg-salto,
#admin-pane-mensajes .msg-ap-corto,
#admin-pane-mensajes .msg-cierra,
#admin-pane-mensajes .msg-agendar-ic { display: none; }

/* La lista: cabecera con ⇤, tarjetas con dos líneas de avance y las etiquetas en una fila. */
#admin-pane-mensajes .msg-lista { padding: 0; }
#admin-pane-mensajes .lst-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line); }
#admin-pane-mensajes .lst-t { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
#admin-pane-mensajes .lst-t b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--panel-2); color: var(--text); font-size: 11px; }
#admin-pane-mensajes .lst-col { display: none; min-height: 0; height: 28px; width: 34px; padding: 0; font-size: 14px; line-height: 1; place-items: center; }
/* Los tres grupos (m005 de diseño, 19-oct-2026): una franja fina con el nombre y su cuenta, con la letra y los colores de
   la cabecera de la lista. Solo variables: con el diseño nuevo encendido las re-define tria-base.css en .cara-clara. */
#admin-pane-mensajes .lst-grupo { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 10px 4px 14px; box-sizing: border-box; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .02em; }
#admin-pane-mensajes .lst-grupo b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--panel); color: var(--text); font-size: 11px; }
#admin-pane-mensajes .msg-conv { gap: 10px; padding: 10px 12px; margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
#admin-pane-mensajes .msg-conv .lst-cuerpo { min-width: 0; }
#admin-pane-mensajes .msg-conv .msg-quien { margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admin-pane-mensajes .msg-conv .msg-avance { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; overflow-wrap: anywhere; }
#admin-pane-mensajes .lst-sellos { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; margin-top: 5px; }
#admin-pane-mensajes .lst-sellos .msg-sello { margin: 0; font-size: 10.5px; padding: 0 7px; white-space: nowrap; line-height: 1.7; flex: 0 0 auto; }
#admin-pane-mensajes.cara-clara .lst-sellos .msg-sello.prop { background: var(--info-bg); color: var(--accion); }
/* «Sin responder» = punto rojo en el círculo; el texto queda para el lector de pantalla. */
#admin-pane-mensajes .lst-sin .msg-marca { position: relative; }
#admin-pane-mensajes .lst-sin .msg-marca::after { content: ""; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--danger-text); border: 2px solid var(--panel); }
#admin-pane-mensajes .lst-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* La columna de la derecha: cabecera con el nombre, «Quién es» en dos columnas, la agenda y los plegados. */
#admin-pane-mensajes .cajon-cab { display: flex; align-items: center; gap: 6px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
#admin-pane-mensajes .cajon-cab .t { flex: 1; min-width: 0; }
#admin-pane-mensajes .cajon-cab .n { font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admin-pane-mensajes .cajon-cab .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
#admin-pane-mensajes .cajon-cuerpo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#admin-pane-mensajes .cj-quien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
#admin-pane-mensajes .cj-quien > h4 { grid-column: 1 / -1; }
#admin-pane-mensajes .cj-quien .msg-dato { flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 0; padding: 3px 0; min-width: 0; }
#admin-pane-mensajes .cj-quien .msg-dato .v { text-align: left; overflow-wrap: anywhere; }
/* «Qué busca» en palabras (m005 de diseño, 19-oct-2026): una caja de escribir de verdad, la línea de «✓ Guardado» y cada
   criterio como una fila que se pulsa para corregirlo. Lo recién entendido, en azul (el dibujo). Solo variables. */
#admin-pane-mensajes .qb-caja { gap: 4px; max-width: none; }
#admin-pane-mensajes .qb-texto { width: 100%; min-height: 72px; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 10px); color: var(--text); }
#admin-pane-mensajes .qb-texto:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
#admin-pane-mensajes .qb-estado { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
#admin-pane-mensajes .qb-estado.is-ok { color: var(--ok-text); }
#admin-pane-mensajes .qb-estado.is-error { color: var(--danger-text); }
#admin-pane-mensajes .qb-lista { display: flex; flex-direction: column; margin-top: 6px; }
#admin-pane-mensajes .qb-fila { width: 100%; min-height: 32px; box-sizing: border-box; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: inherit; font-size: 13px; color: inherit; text-align: left; cursor: pointer; }
#admin-pane-mensajes .qb-fila:last-child { border-bottom: 0; }
@media (hover: hover) { #admin-pane-mensajes .qb-fila:hover { background: var(--panel-2); } }
#admin-pane-mensajes .qb-fila:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
#admin-pane-mensajes .qb-fila .v { overflow-wrap: anywhere; }
#admin-pane-mensajes .qb-fila.is-nuevo .v { color: var(--accion); font-weight: 600; }
#admin-pane-mensajes .qb-mano { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--muted); }
#admin-pane-mensajes .qb-editor { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
#admin-pane-mensajes .qb-editor .k { font-size: 13px; color: var(--muted); }
#admin-pane-mensajes .qb-editor :is(input:not([type=checkbox]), select) { width: 100%; min-height: 32px; box-sizing: border-box; }
#admin-pane-mensajes .qb-editor small { font-size: 11.5px; }
#admin-pane-mensajes .qb-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; font-size: 13px; }
#admin-pane-mensajes .qb-act label { display: flex; align-items: center; gap: 6px; min-height: 28px; }
#admin-pane-mensajes .qb-extra { margin-top: 8px; }
#admin-pane-mensajes .ag-sec h4 { display: flex; align-items: center; gap: 6px; }
#admin-pane-mensajes .ag-sec > .btn { width: 100%; }
#admin-pane-mensajes .ag-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#admin-pane-mensajes .ag-tarea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
#admin-pane-mensajes .ag-tarea .ic { font-size: 18px; grid-row: 1 / 3; }
#admin-pane-mensajes .ag-tarea b { font-size: 13px; color: var(--text); }
#admin-pane-mensajes .ag-tarea small { color: var(--muted); font-size: 12px; grid-column: 2; }
#admin-pane-mensajes .ag-tarea .btn { grid-column: 3; grid-row: 1 / 3; min-height: 30px; padding: 0 10px; white-space: nowrap; }
#admin-pane-mensajes .ag-vacio { margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 12.5px; }
#admin-pane-mensajes .ag-sec #msg-agendar { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
/* «Agendar tarea»: botones ± 30 min / ± 1 h y la caja de TRIA encima del formulario (fundador, 9-oct-2026). */
#admin-pane-mensajes .msg-hora-ajuste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#admin-pane-mensajes .msg-hora-ajuste .btn { min-width: 0; }
#admin-pane-mensajes .msg-ag-tria [data-agendar-propuesta] { font-size: 13px; }
#admin-pane-mensajes .msg-ag-tria { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--info-bg); }
#admin-pane-mensajes details.msg-plegar { border-top: 1px solid var(--line); padding: 0; }
#admin-pane-mensajes details.msg-plegar > summary { cursor: pointer; padding: 9px 0; min-height: 36px; box-sizing: border-box; font-weight: 600; font-size: 13px; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
#admin-pane-mensajes details.msg-plegar > summary::-webkit-details-marker { display: none; }
#admin-pane-mensajes details.msg-plegar > summary::after { content: "▾"; color: var(--muted); }
#admin-pane-mensajes details.msg-plegar[open] > summary::after { content: "▴"; }
#admin-pane-mensajes details.msg-plegar > div { padding: 0 0 10px; }
#admin-pane-mensajes details.msg-plegar > div > h4 { display: none; }

@media (min-width: 1101px) {
  /* A · Cabecera y filtros en dos líneas finas: título · recuento · buscar · escribir · Aprende · ? · Actualizar,
     y debajo canales y estados. */
  #admin-pane-mensajes { grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  #admin-pane-mensajes .msg-cab-una { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 8px; }
  #admin-pane-mensajes .msg-cab-una > .msg-cabecera,
  #admin-pane-mensajes .msg-cab-una > .msg-barra { display: contents; }
  #admin-pane-mensajes .msg-cab-una .msg-cabecera h2 { order: 1; font-size: 1.1rem; }
  #admin-pane-mensajes .msg-cab-una .msg-recuento { order: 2; flex: 0 1 auto; font-size: 12px; }
  #admin-pane-mensajes .msg-cab-una .msg-herramientas { order: 3; margin: 0 0 0 auto; gap: 6px; flex: 0 1 auto; }
  #admin-pane-mensajes .msg-cab-una .msg-herramientas .admin-buscar { width: 180px; min-width: 0; flex: 0 0 180px; padding: 4px 10px; }
  #admin-pane-mensajes .msg-cab-una .msg-aprendido { order: 4; }
  #admin-pane-mensajes .msg-cab-una .msg-ayuda { order: 5; }
  #admin-pane-mensajes .msg-cab-una .admin-quick-actions { order: 6; }
  #admin-pane-mensajes .msg-cab-una .msg-salto { display: block; order: 7; flex: 0 0 100%; height: 0; }
  #admin-pane-mensajes .msg-cab-una .admin-subtabs { order: 8; gap: 4px; flex-wrap: nowrap; }
  #admin-pane-mensajes .msg-cab-una .admin-estados { order: 9; gap: 4px; flex-wrap: nowrap; }
  #admin-pane-mensajes.cara-clara .msg-cab-una .admin-subtab,
  #admin-pane-mensajes.cara-clara .msg-cab-una .admin-estado { min-height: 28px; padding: 2px 10px; font-size: 12.5px; white-space: nowrap; }
  #admin-pane-mensajes .msg-cab-una .btn { min-height: 32px; padding: 4px 12px; }
  #admin-pane-mensajes .msg-largo { display: none; }
  /* B · «Aprende»: un botón que abre su cuadro encima, no una barra fija. */
  #admin-pane-mensajes .msg-ap-largo { display: none; }
  #admin-pane-mensajes .msg-ap-corto { display: inline; }
  #admin-pane-mensajes .msg-aprendido { margin: 0; position: relative; border: 0; background: transparent; }
  #admin-pane-mensajes .msg-aprendido > summary { min-height: 32px; padding: 2px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); font-size: 12.5px; list-style: none; white-space: nowrap; box-sizing: border-box; }
  #admin-pane-mensajes .msg-aprendido > summary::-webkit-details-marker { display: none; }
  #admin-pane-mensajes .msg-aprendido[open] > summary { border-color: var(--accion); color: var(--accion); }
  #admin-pane-mensajes .msg-aprendido[open] .msg-aprendido-cuerpo { position: absolute; right: 0; top: calc(100% + 6px); width: min(560px, 90vw); z-index: 30; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sombra-flota); padding: 12px 14px; }

  /* F · Tres columnas: lista 240 · chat · derecha 270. ⇤ deja la lista en 64 px. */
  #admin-pane-mensajes { --w-lista: 240px; --w-ficha: 270px; }
  #admin-pane-mensajes.lista-recogida { --w-lista: 64px; }
  #admin-pane-mensajes .msg-cuerpo { grid-template-columns: var(--w-lista) minmax(0, 1fr) var(--w-ficha); }
  /* I · Alto «normal»: cabecera de la lista + 5 chats de 104 px (el resto, con scroll). Así la caja de
     escribir queda a media pantalla y no al fondo. En una pantalla baja, encoge y no se sale. */
  #admin-pane-mensajes .msg-cuerpo { height: calc(46px + 5 * 104px + 24px); max-height: 100%; min-height: 0; align-self: start; }
  #admin-pane-mensajes .msg-conv { height: 104px; box-sizing: border-box; overflow: hidden; }
  #admin-pane-mensajes .lst-col { display: inline-grid; }
  #admin-pane-mensajes.lista-recogida .lst-t { display: none; }
  #admin-pane-mensajes.lista-recogida .lst-cab { justify-content: center; padding: 8px 0; }
  #admin-pane-mensajes.lista-recogida .lst-grupo { justify-content: center; padding: 4px 0; }
  #admin-pane-mensajes.lista-recogida .lst-grupo-t { display: none; }
  #admin-pane-mensajes.lista-recogida .msg-conv { height: 64px; grid-template-columns: 1fr; justify-items: center; align-items: center; padding: 10px 0; }
  #admin-pane-mensajes.lista-recogida .msg-conv .lst-cuerpo,
  #admin-pane-mensajes.lista-recogida .msg-conv .msg-cuando { display: none; }
  #admin-pane-mensajes.lista-recogida .msg-marca { font-size: 13px; }

  /* C · Cabecera del chat en una línea, con el «⏱ cierra en…» dentro. */
  #admin-pane-mensajes .msg-hilo-cab { padding: 8px 14px; align-items: center; flex-wrap: nowrap; gap: 10px; }
  #admin-pane-mensajes .msg-hilo-cab > span:first-of-type br { display: none; }
  #admin-pane-mensajes .msg-hilo-cab > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #admin-pane-mensajes .msg-hilo-cab .msg-hilo-nombre { margin-right: 8px; }
  #admin-pane-mensajes .msg-hilo-cab .msg-hilo-datos { white-space: nowrap; }
  #admin-pane-mensajes .msg-hilo-cab > span.msg-cierra { display: inline; flex: 0 0 auto; font-size: 12px; color: var(--warn-text); white-space: nowrap; }
  #admin-pane-mensajes .msg-hilo-cab .val-badge { display: none; }
  /* D · Caja de responder compacta: caja · 📎 · 📅 · Enviar en una fila, sin pie. */
  #admin-pane-mensajes .msg-reply-zona { padding: 8px 14px 10px; }
  #admin-pane-mensajes .msg-reply-zona .msg-reply-text { min-height: 46px; }
  #admin-pane-mensajes .msg-reply-zona .msg-reply { align-items: stretch; gap: 6px; }
  /* Solo la fila de responder: los formularios en columna (primer mensaje) se quedaban con el botón
     finísimo (9-oct-2026). */
  #admin-pane-mensajes .msg-reply-zona .msg-reply:not(.msg-reply-vertical) > .btn,
  #admin-pane-mensajes .msg-reply-zona .msg-reply:not(.msg-reply-vertical) > label.btn { min-height: 0; padding: 0 12px; }
  #admin-pane-mensajes .msg-reply-zona .msg-agendar-ic { display: inline-flex; align-items: center; }
  #admin-pane-mensajes .msg-reply-zona .msg-borrador-tag { margin: 0 0 6px; font-size: 12.5px; }
  #admin-pane-mensajes .msg-reply-zona .msg-atajo,
  #admin-pane-mensajes .msg-reply-zona .msg-agendar-fila { display: none; }
  #admin-pane-mensajes .msg-reply-zona .msg-descartar { margin: 2px 0 0; }

  /* G · La derecha: la cabecera queda fija arriba y lo demás se desplaza debajo. */
  #admin-pane-mensajes .msg-ficha { padding: 12px 14px 16px; gap: 12px; }
  #admin-pane-mensajes .msg-ficha > .cajon-cab { position: sticky; top: -12px; z-index: 2; background: var(--panel); margin-top: -12px; padding: 12px 0 10px; }
  #admin-pane-mensajes .msg-ficha > .msg-aviso { margin: 0; }
}

/* ── MENSAJES · TRES RETOQUES (9-oct-2026) ───────────────────────────────────────────────────────
   Dibujo aprobado: docs/estado/ia-mensajeria/mensajes-tres-retoques-dibujo.html (opción A, pestañas
   en «Aprende» y el primer contacto de la propuesta). Todo con los tokens de la cara clara. */

/* 2 · «Aprende» por dentro: cabecera, tres pestañas y un panel por pestaña. */
#admin-pane-mensajes .msg-ap-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
#admin-pane-mensajes .msg-ap-cab b { flex: none; font-size: 16px; color: var(--text); }
#admin-pane-mensajes .msg-ap-cab span { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
#admin-pane-mensajes .msg-ap-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
#admin-pane-mensajes .msg-ap-x:hover { background: var(--panel-3); color: var(--text); }
#admin-pane-mensajes .msg-ap-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#admin-pane-mensajes .msg-ap-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 12px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#admin-pane-mensajes .msg-ap-tabs button[aria-selected="true"] { color: var(--accion); border-bottom-color: var(--accion); }
#admin-pane-mensajes .msg-ap-tabs i { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font-variant-numeric: tabular-nums; }
#admin-pane-mensajes .msg-ap-pan { display: grid; gap: 12px; align-content: start; min-height: 0; padding: 14px 16px 16px; text-align: left; }
#admin-pane-mensajes .msg-ap-pan[hidden] { display: none; }
#admin-pane-mensajes .msg-ap-pan p { text-align: left; }
#admin-pane-mensajes .msg-ap-pan h4 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#admin-pane-mensajes .msg-ap-pan .msg-medidas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#admin-pane-mensajes .msg-medida.is-mal b { color: var(--danger-text); }
#admin-pane-mensajes .msg-ap-sig { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--info-bg); color: var(--text); font-size: 13.5px; }
#admin-pane-mensajes .msg-ap-sig > span:nth-child(2) { flex: 1; min-width: 0; }
#admin-pane-mensajes .msg-ap-sig progress { flex: none; width: 130px; height: 8px; accent-color: var(--accion); }
#admin-pane-mensajes .msg-ap-nueva textarea { min-height: 64px; }
#admin-pane-mensajes .msg-ap-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#admin-pane-mensajes .msg-ap-fila small { color: var(--muted); font-size: 12.5px; }
#admin-pane-mensajes .msg-ap-fila .btn { min-height: 38px; padding: 0 18px; }
/* El interruptor de cada norma (antes, botones «Apagar / Encender»). */
#admin-pane-mensajes .msg-sw { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--accion); cursor: pointer; }
#admin-pane-mensajes .msg-sw::after { content: ""; position: absolute; top: 4px; left: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); }
#admin-pane-mensajes .msg-sw[aria-checked="false"] { background: var(--line-strong); }
#admin-pane-mensajes .msg-sw[aria-checked="false"]::after { left: 4px; }
#admin-pane-mensajes .msg-sw:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
#admin-pane-mensajes .msg-sw:disabled { opacity: .5; cursor: default; }
/* Salir sola: una casilla por envío seguido sin tocar (20), en vez de una barra fina. */
#admin-pane-mensajes .msg-solo { flex-wrap: wrap; }
#admin-pane-mensajes .msg-solo > .msg-norma-texto { flex: 1 1 0; }
#admin-pane-mensajes .msg-solo-seg { flex: 1 1 100%; display: flex; gap: 3px; }
#admin-pane-mensajes .msg-solo-seg i { flex: 1; height: 9px; border-radius: 3px; background: var(--panel-4); }
#admin-pane-mensajes .msg-solo-seg i.v { background: var(--ok-text); }
#admin-pane-mensajes .msg-solo.is-nunca { background: var(--panel-2); }
#admin-pane-mensajes .msg-ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#admin-pane-mensajes .msg-ap-chips span { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; color: var(--text); }

/* 3 · Primer mensaje (más de 24 h): aviso azul, cada campo con su título, «Así le llega» en una
   burbuja como la de WhatsApp y un botón que se ve. */
/* Más alto que la caja de responder (66 %), pero con tope y su propio scroll: sin tope, en el móvil
   el botón se salía por debajo del chat y quedaba cortado. */
#admin-pane-mensajes .msg-reply-zona:has(.msg-primer) { max-height: 90%; padding: 14px 20px 18px; text-align: left; }
/* Lo anterior del chat cede algo de su hueco mínimo (96 px) al formulario: a 1280x800 la nota de abajo
   quedaba cortada por 4 px. */
#admin-pane-mensajes .msg-hilo-panel:has(.msg-primer-cuerpo:not([hidden])) .msg-hilo-mensajes { min-height: 64px; }
#admin-pane-mensajes .msg-primer-aviso { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--info-border); border-radius: 10px; background: var(--info-bg); color: var(--text); font-size: 13.5px; line-height: 1.45; text-align: left; }
#admin-pane-mensajes .msg-primer-aviso::before { content: "⏱"; }
#admin-pane-mensajes .msg-primer-aviso > span { flex: 1; min-width: 0; }
/* Plegar (9-oct): el botón dentro del aviso, a la derecha; plegado, el aviso es lo único que queda. */
#admin-pane-mensajes .msg-primer-plegar { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; background: var(--panel); }
#admin-pane-mensajes .msg-primer-cuerpo[hidden] { display: none; }
#admin-pane-mensajes .msg-primer-aviso:has(+ .msg-primer-cuerpo[hidden]) { margin-bottom: 0; }
#admin-pane-mensajes .msg-reply.msg-primer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; align-items: end; max-width: none; }
#admin-pane-mensajes .msg-primer > * { min-width: 0; grid-column: 1 / -1; }
#admin-pane-mensajes .msg-primer > .msg-primer-campo:not(.is-ancho) { grid-column: auto; }
#admin-pane-mensajes .msg-primer-campo { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: left; }
#admin-pane-mensajes .msg-primer-campo :is(input, select) { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 400; color: var(--text); }
#admin-pane-mensajes .msg-primer .msg-primer-vista { display: grid; gap: 6px; margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: left; }
#admin-pane-mensajes .msg-primer-vista [data-primer-vista] { display: block; padding: 12px 16px; border: 1px solid var(--ok-border); border-radius: 4px 14px 14px 14px; background: var(--ok-bg); color: var(--text); font-size: 14.5px; font-weight: 400; line-height: 1.5; white-space: pre-line; }
#admin-pane-mensajes .msg-primer > .btn.primary { width: 100%; min-height: 50px; padding: 0 24px; border-radius: 12px; font-size: 16px; font-weight: 700; }
#admin-pane-mensajes .msg-primer + .msg-atajo { display: block; margin: 10px 0 0; font-size: 12.5px; text-align: left; }

@media (max-width: 1100px) {
  /* Fuera del escritorio «Aprende» es un desplegable con su título en la barra: no se repite. */
  #admin-pane-mensajes .msg-ap-cab b { display: none; }
}
@media (max-width: 760px) {
  #admin-pane-mensajes .msg-ap-tabs { padding: 0 4px; gap: 0; }
  #admin-pane-mensajes .msg-ap-tabs button { padding: 8px 8px; font-size: 13.5px; }
  #admin-pane-mensajes .msg-reply.msg-primer { grid-template-columns: minmax(0, 1fr); }
  /* En el móvil la página ya baja con el dedo: el chat crece con el formulario (no hay que desplazar
     dentro de una caja para llegar al botón) y lo anterior se queda en media pantalla. */
  #admin-pane-mensajes.ver-hilo .msg-hilo-panel:has(.msg-primer-cuerpo:not([hidden])) { height: auto; }
  #admin-pane-mensajes.ver-hilo .msg-hilo-panel:has(.msg-primer-cuerpo:not([hidden])) .msg-hilo-mensajes { max-height: 45dvh; }
  #admin-pane-mensajes .msg-reply-zona:has(.msg-primer) { max-height: none; overflow: visible; padding: 12px 14px 16px; }
  #admin-pane-mensajes .msg-ap-pan .msg-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  /* 1 · Que se distingan las tres partes (opción A): la lista y la ficha con el gris hundido del
     lienzo y el chat blanco en medio. El chat abierto sale en blanco dentro de la lista. */
  #admin-pane-mensajes { --msg-lado: var(--bg-soft); }
  /* Con .cara-clara: si no, ganan las reglas de la cara clara que las pintan de blanco (--panel). */
  #admin-pane-mensajes.cara-clara .msg-lista,
  #admin-pane-mensajes.cara-clara .msg-ficha,
  #admin-pane-mensajes .lst-cab,
  #admin-pane-mensajes .msg-ficha > .cajon-cab { background: var(--msg-lado); }
  #admin-pane-mensajes.cara-clara .msg-lista { border-right-color: var(--line-strong); }
  #admin-pane-mensajes.cara-clara .msg-ficha { border-left-color: var(--line-strong); }
  #admin-pane-mensajes .lst-t b { background: var(--panel); }
  #admin-pane-mensajes.cara-clara .msg-conv[aria-current="true"] { background: var(--panel); }
  #admin-pane-mensajes .msg-ficha :is(input, select, textarea),
  #admin-pane-mensajes .msg-ficha .ag-tarea,
  #admin-pane-mensajes .msg-ficha .msg-local,
  #admin-pane-mensajes .msg-ficha .btn.secondary { background: var(--panel); }
  #admin-pane-mensajes .msg-ficha .msg-ficha-vacia { background: color-mix(in srgb, var(--panel) 65%, transparent); }
  #admin-pane-mensajes .msg-ficha details.msg-plegar { border-top-color: var(--line-strong); }
  /* «Aprende»: el cuadro, más ancho; las pestañas fijas arriba y lo de dentro con su propio scroll. */
  #admin-pane-mensajes .msg-aprendido[open] .msg-aprendido-cuerpo { width: min(740px, 94vw); max-height: min(74vh, 600px); padding: 0; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0; border-color: var(--line-strong); border-radius: 14px; }
  #admin-pane-mensajes .msg-aprendido[open] .msg-aprendido-cuerpo > p.muted:only-child { margin: 0; padding: 14px 16px; }
  #admin-pane-mensajes .msg-aprendido[open] .msg-ap-pan { overflow-y: auto; }
}

/* ── Los avisos del panel, A LA VISTA (24-sep-2026) ─────────────────────────────────────────────
   Todo lo que el panel cuenta con `renderStatus` (guardado, error, falta un dato) iba a una línea
   ESCONDIDA (`.v2-body #admin-status { display: none }`): no se veía ninguno. Ahora sale flotando
   (admin.js → `avisoPanel`). Es el `.tn-toast` del chat (styles.css) con este modificador: lleva
   `.cara-clara` en su caja para heredar los colores del panel claro, se puede pasar el ratón por
   encima (se para mientras tanto) y tiene «✕». 6 s y máximo 3 a la vez, como los buenos CRM. */
.tn-toast.tn-toast-panel {
  display: flex; align-items: center; gap: 8px;
  width: min(440px, calc(100vw - 32px)); max-width: none;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md, 11px);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); box-shadow: var(--shadow);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; text-align: left;
  pointer-events: auto;
  transform: translateY(8px);
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.tn-toast.tn-toast-panel.show { transform: translateY(0); }
.tn-toast.tn-toast-panel.is-saliendo { transition-duration: 0.15s; }
.tn-toast.tn-toast-panel.is-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--text); }
.tn-toast-panel .tn-toast-texto { flex: 1; min-width: 0; margin: 0; padding: 4px 0; overflow-wrap: anywhere; }
.cara-clara .btn.ghost.tn-toast-cerrar {
  flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 0; background: transparent; box-shadow: none; color: var(--muted);
}
@media (hover: hover) {
  .cara-clara .btn.ghost.tn-toast-cerrar:hover { background: var(--panel-3); color: var(--text); }
}
/* En el móvil (styles.css ya lo sube arriba, bajo la cabecera, para no tapar lo de abajo), el
   «✕» con los 44 px del dedo, como los `.btn.small` de la cara clara. */
@media (max-width: 900px) {
  .cara-clara .btn.ghost.tn-toast-cerrar { width: 44px; height: 44px; min-height: 44px; }
}
@media (max-width: 760px) {
  #tn-toast-host.tn-toast-host-panel { top: var(--avisos-arriba, calc(env(safe-area-inset-top, 0px) + 72px)); }
  .tn-toast.tn-toast-panel { width: 100%; transform: translateY(-8px); }
  .tn-toast.tn-toast-panel.show { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tn-toast.tn-toast-panel, .tn-toast.tn-toast-panel.show { transform: none; transition: opacity 0.15s linear; }
}

/* ── Equipo en CLARO (24-sep-2026, lo pidió el fundador: «sí, pásala a claro»). Con `cara-clara`
   casi todo cambió solo; quedaban las etiquetas de cada usuario, pintadas para fondo oscuro con
   !important («Con acceso» y «Manual» a contraste 1,0; «Activo» a 1,5), y el buscador: un campo
   estrecho y centrado dentro de su caja, y los filtros en otra caja más. ── */
#admin-pane-team.cara-clara .admin-user-badge {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text) !important;
}
#admin-pane-team.cara-clara .admin-user-badge.status-active { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text) !important; }
#admin-pane-team.cara-clara .admin-user-badge.status-suspended { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text) !important; }
#admin-pane-team.cara-clara .admin-user-badge.status-inactive { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text) !important; }
:is(#admin-pane-team, #admin-pane-conversations).cara-clara .admin-list-toolbar .admin-search { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
:is(#admin-pane-team, #admin-pane-conversations).cara-clara .admin-list-toolbar .admin-search input { width: 100%; }
:is(#admin-pane-team, #admin-pane-conversations).cara-clara .admin-list-toolbar .admin-filter-row { border: 0; background: transparent; padding: 0; }
:is(#admin-pane-team, #admin-pane-conversations).cara-clara .admin-filter-chip { border: 1px solid transparent; }
:is(#admin-pane-team, #admin-pane-conversations).cara-clara .admin-filter-chip.active { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* ── Seguimiento y Agenda en CLARO (24-sep-2026, paso 4 de la reforma: «sí, empieza por esas
   tres»). Con `cara-clara` el fondo cambió solo, pero estas piezas tenían el blanco escrito a mano
   para el tema oscuro: textos a contraste 1,0-1,1 (no se leían) y bordes y tarjetas invisibles. Se
   pasan a los colores del tema, solo dentro de estas dos pestañas. ── */
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(
  .admin-followup-control-panel, .admin-followup-control-row, .admin-followup-card, .admin-followup-card-fold,
  .admin-followup-rule, .admin-followup-executive-panel, .admin-followup-alert-card,
  .admin-agenda-work-card, .admin-agenda-priority-card, .admin-agenda-workblock, .admin-agenda-toolbar, .admin-agenda-day-panel,
  .admin-agenda-editor, .admin-agenda-complete-panel, .admin-agenda-result-chip, .admin-agenda-table-wrap) {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara .admin-followup-control-head { border-color: var(--line); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(.admin-followup-card-fold .admin-followup-card, .admin-agenda-table td, .admin-agenda-table th) { border-color: var(--line); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(.admin-followup-risk, .admin-agenda-result-chip) { background: var(--panel-2); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(
  .admin-followup-control-row span, .admin-agenda-workblock, .admin-agenda-result-chip,
  .admin-agenda-table th, .admin-agenda-table td, .admin-agenda-priority-head strong) { color: var(--text); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(
  .admin-followup-alert-card small, .admin-followup-rule p, .admin-agenda-priority-card p) { color: var(--muted); }
@media (hover: hover) {
  #admin-pane-followup.cara-clara .admin-followup-card-summary:hover { background: var(--panel-2); }
}
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(.admin-daily-summary-actions ol, .admin-daily-summary-users ul) { color: var(--text); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara :is(.admin-daily-summary-panel, .admin-daily-summary-users) { background: var(--panel); border-color: var(--line); }
:is(#admin-pane-followup, #admin-pane-agenda).cara-clara .admin-daily-summary-stats div { background: var(--panel-2); }
/* Conversaciones: los filtros de usuario y estado, sin caja propia (la bandeja ya es la caja). */
#admin-pane-conversations.cara-clara .admin-conversation-filters { border: 0; background: transparent; padding: 0; }

/* ═══ SEGUIMIENTO DEL EQUIPO (24-sep-2026, zona `diseno`) ═══════════════════════════════
   Dibujo aprobado: docs/diseno/paso4-seguimiento-agenda-conversaciones/ («Seguimiento vale»).
   Cuatro cifras que se tocan, el aviso de gente de baja con trabajo y una fila por asesor.
   Todo con los colores del tema (--panel, --line, --text, --muted, --danger-*, --warn-*…). */
#admin-pane-followup.seg { display: flex; flex-direction: column; gap: 16px; }
#admin-pane-followup.seg .seg-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
#admin-pane-followup.seg .seg-cabecera h2 { margin: 0; }
#admin-pane-followup.seg .seg-cabecera p { margin: 4px 0 0; }
#admin-pane-followup.seg .seg-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

#admin-pane-followup.seg .seg-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#admin-pane-followup.seg .seg-cifra {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color .12s ease-out, background .12s ease-out;
}
#admin-pane-followup.seg .seg-cifra-label { font-size: 13px; font-weight: 600; }
#admin-pane-followup.seg .seg-cifra strong { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--text); }
#admin-pane-followup.seg .seg-cifra small { font-size: 12px; color: var(--muted); }
#admin-pane-followup.seg .seg-cifra.tono-danger:not(.a-cero) { border-color: var(--danger-border); }
#admin-pane-followup.seg .seg-cifra.tono-danger .seg-cifra-label { color: var(--danger-text); }
#admin-pane-followup.seg .seg-cifra.tono-warn:not(.a-cero) { border-color: var(--warn-border); }
#admin-pane-followup.seg .seg-cifra.tono-warn .seg-cifra-label { color: var(--warn-text); }
#admin-pane-followup.seg .seg-cifra.tono-info .seg-cifra-label { color: var(--info-text); }
#admin-pane-followup.seg .seg-cifra.a-cero .seg-cifra-label { color: var(--muted); }
#admin-pane-followup.seg .seg-cifra.activa { background: var(--panel-2); border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
@media (hover: hover) { #admin-pane-followup.seg .seg-cifra:hover { background: var(--panel-2); } }
#admin-pane-followup.seg .seg-cifra:focus-visible,
#admin-pane-followup.seg .seg-fila:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

#admin-pane-followup.seg .seg-baja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 16px; border: 1px solid var(--danger-border); border-radius: 12px;
  background: var(--danger-bg); color: var(--text);
}
#admin-pane-followup.seg .seg-baja[hidden] { display: none; }
#admin-pane-followup.seg .seg-baja p { margin: 0; font-size: 14px; line-height: 1.5; flex: 1 1 320px; }
#admin-pane-followup.seg .seg-baja p strong { color: var(--danger-text); }
#admin-pane-followup.seg .seg-baja-nombre {
  padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

#admin-pane-followup.seg .seg-asesores { display: flex; flex-direction: column; gap: 8px; }
#admin-pane-followup.seg .seg-asesores-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
#admin-pane-followup.seg .seg-asesores-cab h3 { margin: 0; font-size: 16px; }
#admin-pane-followup.seg .seg-asesores-pista { font-size: 12px; color: var(--muted); margin-left: auto; }
#admin-pane-followup.seg .seg-filtro {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px;
  border: 1px solid var(--info-border); border-radius: 999px; background: var(--info-bg); color: var(--info-text);
  font-size: 12px; font-weight: 600;
}
#admin-pane-followup.seg .seg-filtro[hidden] { display: none; }
#admin-pane-followup.seg .seg-filtro-quitar {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: inherit;
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}

#admin-pane-followup.seg .seg-tabla {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden;
}
#admin-pane-followup.seg .seg-fila {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(56px, .7fr)) minmax(88px, .9fr) minmax(200px, 2.6fr);
  width: 100%; min-height: 48px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; text-align: left;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
#admin-pane-followup.seg .seg-fila:first-child { border-top: 0; }
#admin-pane-followup.seg .seg-fila-cab {
  min-height: 36px; background: var(--panel-2); color: var(--muted); cursor: default;
  font-size: 12px; font-weight: 600;
}
@media (hover: hover) { #admin-pane-followup.seg .seg-fila:not(.seg-fila-cab):hover { background: var(--panel-2); } }
#admin-pane-followup.seg .seg-fila.selected { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--info-text); }
#admin-pane-followup.seg .seg-asesor { display: flex; align-items: center; gap: 10px; min-width: 0; }
#admin-pane-followup.seg .seg-asesor strong { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#admin-pane-followup.seg .seg-avatar {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
#admin-pane-followup.seg .seg-avatar.av-0 { background: var(--info-bg); color: var(--info-text); }
#admin-pane-followup.seg .seg-avatar.av-1 { background: var(--warn-bg); color: var(--warn-text); }
#admin-pane-followup.seg .seg-avatar.av-2 { background: var(--ok-bg); color: var(--ok-text); }
#admin-pane-followup.seg .seg-avatar.av-3 { background: var(--legal-surface); color: var(--legal-title); }
#admin-pane-followup.seg .seg-avatar.av-4 { background: var(--panel-3); color: var(--text); }
#admin-pane-followup.seg .seg-num.a-cero { color: var(--muted); }
#admin-pane-followup.seg .seg-num.tono-danger { color: var(--danger-text); font-weight: 600; }
#admin-pane-followup.seg .seg-num.tono-warn { color: var(--warning); font-weight: 600; }
#admin-pane-followup.seg .seg-etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
#admin-pane-followup.seg .seg-etiqueta.estado-critico { background: var(--danger-bg); color: var(--danger-text); }
#admin-pane-followup.seg .seg-etiqueta.estado-atencion { background: var(--warn-bg); color: var(--warn-text); }
#admin-pane-followup.seg .seg-etiqueta.estado-revision { background: var(--info-bg); color: var(--info-text); }
#admin-pane-followup.seg .seg-etiqueta.estado-ok { background: var(--ok-bg); color: var(--ok-text); }
#admin-pane-followup.seg .seg-linea { display: none; }
#admin-pane-followup.seg .seg-pedir { color: var(--text); line-height: 1.35; }
#admin-pane-followup.seg .seg-sin-clientes {
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
#admin-pane-followup.seg .seg-tabla .admin-empty-state { margin: 0; padding: 16px; color: var(--muted); }

/* El detalle y los avisos: textos legibles sobre claro (36 casi ilegibles medidos el 24-sep). */
#admin-pane-followup.seg .seg-detalle { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
#admin-pane-followup.seg .admin-followup-detail-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#admin-pane-followup.seg :is(.admin-followup-detail-card, .admin-followup-escalation, .admin-followup-escalation-card) { color: var(--text); }
#admin-pane-followup.seg :is(small, .muted, .admin-followup-escalation-meta) { color: var(--muted); }
#admin-pane-followup.seg .admin-escalation-card { background: var(--panel); border-color: var(--line); color: var(--text); }
#admin-pane-followup.seg .admin-escalation-card.priority-alta { background: var(--danger-bg); border-color: var(--danger-border); }
#admin-pane-followup.seg .admin-escalation-card.priority-media { background: var(--warn-bg); border-color: var(--warn-border); }
#admin-pane-followup.seg .admin-escalation-card :is(h4, p, b, .admin-escalation-action) { color: var(--text); }
#admin-pane-followup.seg .admin-escalation-card .admin-escalation-meta { color: var(--muted); }

@media (max-width: 1100px) {
  #admin-pane-followup.seg .seg-fila {
    grid-template-columns: minmax(160px, 2fr) repeat(5, minmax(48px, .7fr)) minmax(80px, .9fr);
  }
  #admin-pane-followup.seg .seg-fila .seg-pedir { grid-column: 1 / -1; padding-left: 42px; font-size: 13px; color: var(--muted); }
  #admin-pane-followup.seg .seg-fila-cab span:last-child { display: none; }
}

@media (max-width: 760px) {
  #admin-pane-followup.seg { gap: 12px; }
  #admin-pane-followup.seg .seg-cabecera { align-items: stretch; }
  #admin-pane-followup.seg .seg-cabecera-acciones { width: 100%; }
  #admin-pane-followup.seg .seg-cabecera-acciones .btn { flex: 1 1 0; min-height: 44px; }
  #admin-pane-followup.seg .seg-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #admin-pane-followup.seg .seg-cifra { padding: 10px 12px; min-height: 44px; }
  #admin-pane-followup.seg .seg-cifra strong { font-size: 24px; }
  #admin-pane-followup.seg .seg-asesores-pista { margin-left: 0; }
  #admin-pane-followup.seg .seg-fila-cab { display: none; }
  #admin-pane-followup.seg .seg-fila {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "av nombre estado" "av linea linea" "av pedir pedir";
    gap: 2px 10px; padding: 12px 16px; min-height: 44px; align-items: start;
  }
  #admin-pane-followup.seg .seg-fila:nth-child(2) { border-top: 0; }
  #admin-pane-followup.seg .seg-asesor { display: contents; }
  #admin-pane-followup.seg .seg-avatar { grid-area: av; width: 36px; height: 36px; }
  #admin-pane-followup.seg .seg-asesor strong { grid-area: nombre; font-size: 15px; align-self: center; }
  #admin-pane-followup.seg .seg-estado { grid-area: estado; align-self: center; }
  #admin-pane-followup.seg .seg-fila > .seg-num { display: none; }
  #admin-pane-followup.seg .seg-linea { grid-area: linea; display: block; font-size: 12px; color: var(--muted); }
  #admin-pane-followup.seg .seg-linea b { color: var(--danger-text); font-weight: 600; }
  #admin-pane-followup.seg .seg-fila .seg-pedir { grid-area: pedir; grid-column: auto; padding-left: 0; font-size: 13px; color: var(--text); }
  #admin-pane-followup.seg .seg-detalle { padding: 12px; }
  #admin-pane-followup.seg .seg-detalle .section-header :is(h3, p) { text-align: left; }
  #admin-pane-followup.seg .seg-detalle .section-header h3 { text-transform: none; letter-spacing: 0; font-size: 16px; }
}

/* «Chats del equipo» en claro (24-sep-2026): las etiquetas de cada chat de la lista (modo, calidad,
   juez, feedback) traían el texto casi blanco del tema oscuro con `!important`, y sobre claro no se
   veían. Mismos colores del tema que las de Equipo. */
#admin-pane-conversations.cara-clara .admin-history-badge { background: var(--panel-2); color: var(--muted) !important; }
/* Cada estado, en su propio selector (sin :is): así se lee a simple vista —y el test de colores lo
   comprueba— que ninguno se queda con el gris de la regla base de arriba. */
#admin-pane-conversations.cara-clara .admin-history-badge.quality-apta,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-apta_con_ajuste,
#admin-pane-conversations.cara-clara .admin-history-badge.judge-reutilizable,
#admin-pane-conversations.cara-clara .admin-history-badge.feedback-ok,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-bueno { background: var(--ok-bg); color: var(--ok-text) !important; }
/* La calidad del cliente (bueno / medio / malo…) también puede salir aquí: con los colores del tema
   oscuro (texto casi blanco) no se leía sobre el fondo claro. */
#admin-pane-conversations.cara-clara .admin-history-badge.quality-medio,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-pendiente { background: var(--warn-bg); color: var(--warning) !important; }
#admin-pane-conversations.cara-clara .admin-history-badge.quality-no_apta,
#admin-pane-conversations.cara-clara .admin-history-badge.judge-no_apta,
#admin-pane-conversations.cara-clara .admin-history-badge.feedback-warning,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-malo,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-no_valido,
#admin-pane-conversations.cara-clara .admin-history-badge.quality-duplicado { background: var(--danger-bg); color: var(--danger-text) !important; }
#admin-pane-conversations.cara-clara .admin-history-badge.judge-revisar { background: var(--warn-bg); color: var(--warning) !important; }

/* ═══ CAMPAÑAS Y ANUNCIOS (25-sep-2026, zona `diseno`) ══════════════════════════════════════
   Dibujo aprobado: docs/diseno/paso4-tres-pestanas/Campanas-Ordenador.dc.html y Campanas-Movil.dc.html
   («sí a los dibujos, empieza por Campañas»). Todo con los colores del tema claro (--panel, --line,
   --text, --muted, --ok-*, --warn-*, --danger-*…): la cara clara la pone syncMetaSection() SOLO en
   la sección «ads», porque las otras tres de Meta comparten pantalla y siguen en oscuro. */
#admin-pane-meta.cara-clara { background: var(--bg); }
#admin-pane-meta .ads-cabecera-derecha { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; font-size: 13px; color: var(--muted); }
#admin-pane-meta .ads-cabecera-derecha[hidden] { display: none; }
#admin-pane-meta .ads-periodo { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--text); }
#admin-pane-meta .ads-periodo-rotulo { color: var(--muted); }
#admin-pane-meta .ads-cabecera-derecha .btn.small,
#admin-pane-meta .ads .btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }

#admin-pane-meta .ads { display: flex; flex-direction: column; gap: 16px; font-variant-numeric: tabular-nums; color: var(--text); }
#admin-pane-meta .ads[hidden] { display: none; }
#admin-pane-meta .ads-bloque { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
#admin-pane-meta .ads-bloque h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
#admin-pane-meta .ads-resumen { gap: 16px; padding: 20px 24px; }
#admin-pane-meta .ads-frase { margin: 0; max-width: 900px; font-size: 19px; line-height: 1.45; color: var(--text); }
#admin-pane-meta .ads-frase b { font-weight: 600; }

#admin-pane-meta .ads-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#admin-pane-meta .ads-cifra { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; border-radius: 10px; background: var(--panel-2); }
#admin-pane-meta .ads-cifra-rotulo { font-size: 12px; font-weight: 600; color: var(--muted); }
#admin-pane-meta .ads-cifra strong { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--text); }
#admin-pane-meta .ads-cifra small { font-size: 12px; color: var(--muted); }
#admin-pane-meta .ads-corto { display: none; }

#admin-pane-meta .ads-toca { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
#admin-pane-meta .ads-toca.es-aviso { border-color: var(--warn-border); background: var(--warn-bg); }
#admin-pane-meta .ads-toca-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#admin-pane-meta .ads-toca-texto strong { font-size: 15px; font-weight: 600; color: var(--text); }
#admin-pane-meta .ads-toca-texto span { font-size: 13px; line-height: 1.45; color: var(--text); }
#admin-pane-meta .ads-toca .btn { flex-shrink: 0; }
#admin-pane-meta .ads-solo-aviso { flex-shrink: 0; font-size: 13px; color: var(--muted); }
#admin-pane-meta .ads-nada, #admin-pane-meta .ads-nota { margin: 0; font-size: 13px; color: var(--muted); }
/* Qué días y qué zona cubren las cifras, y «La entrada de Meta» (27-oct-2026). */
#admin-pane-meta .ads-ventana { margin: 0; font-size: 13px; color: var(--muted); }
#admin-pane-meta .ads-entrada-titulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
#admin-pane-meta .ads-entrada-sub { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
#admin-pane-meta .ads-entrada-lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
#admin-pane-meta .ads-entrada-fila {
  display: grid; grid-template-columns: 7.5em minmax(10em, 16em) minmax(0, 1fr); align-items: baseline; gap: 4px 12px;
  padding: 8px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px;
}
#admin-pane-meta .ads-entrada-id { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
#admin-pane-meta .ads-entrada-donde { color: var(--muted); overflow-wrap: anywhere; }
#admin-pane-meta .ads-entrada-motivo { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  #admin-pane-meta .ads-entrada-fila { grid-template-columns: auto minmax(0, 1fr); }
  #admin-pane-meta .ads-entrada-motivo { grid-column: 1 / -1; }
}

#admin-pane-meta .ads-campana-cab { display: flex; align-items: flex-start; gap: 16px; }
#admin-pane-meta .ads-campana-titulo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#admin-pane-meta .ads-campana-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#admin-pane-meta .ads-campana-titulo p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
#admin-pane-meta .ads-campana-titulo p b { font-weight: 600; }
#admin-pane-meta .ads-campana-acciones { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 260px; text-align: right; }
#admin-pane-meta .ads-campana-acciones small { font-size: 12px; line-height: 1.4; color: var(--muted); }
#admin-pane-meta .ads-estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#admin-pane-meta .ads-estado.es-marcha { background: var(--ok-bg); color: var(--ok-text); }
#admin-pane-meta .ads-estado.es-pausa { background: var(--panel-3); color: var(--muted); }

#admin-pane-meta .ads-tabla-caja { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#admin-pane-meta .ads-tabla { font-size: 14px; }
#admin-pane-meta .ads-tabla th { background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; border-bottom: 1px solid var(--line); }
#admin-pane-meta .ads-tabla td { padding: 12px 10px; border-top: 0; border-bottom: 1px solid var(--line); }
#admin-pane-meta .ads-tabla tbody tr:nth-child(even) { background: transparent; } /* el dibujo va sin rayas */
@media (hover: hover) { #admin-pane-meta .ads-tabla tbody tr:hover { background: var(--panel-2); } }
#admin-pane-meta .ads-tabla .ads-c-num { text-align: right; white-space: nowrap; }
#admin-pane-meta .ads-tabla .ads-c-tria { font-weight: 600; }
#admin-pane-meta .ads-tabla .ads-c-mas { width: 1%; text-align: right; }
#admin-pane-meta .ads-anuncio-nombre { font-weight: 600; }
#admin-pane-meta .ads-apagado { color: var(--muted); }
#admin-pane-meta .ads-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#admin-pane-meta .ads-conjunto th { padding: 10px; background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; }
/* «⋯» de cada anuncio: el `.btn.ghost` de siempre, cuadrado (como el «✕» de los avisos,
   `.tn-toast-cerrar`); aquí solo va lo que lo hace cuadrado y el «abierto». */
#admin-pane-meta .btn.ghost.ads-mas {
  flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0;
  color: var(--text); font-size: 16px; line-height: 1;
}
#admin-pane-meta .btn.ghost.ads-mas[aria-expanded="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--info-bg); }
#admin-pane-meta .btn.ghost.ads-mas:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Leads abierto desde Campañas: «Solo lo que cuenta Campañas: …» con su «Quitar». */
.admin-meta-origen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.admin-meta-origen[hidden] { display: none; }

#admin-pane-meta .ads-calidad { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
#admin-pane-meta .ads-barra { display: flex; width: 160px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-4); }
#admin-pane-meta .ads-calidad-texto, #admin-pane-meta .ads-calidad-vacia { font-size: 12px; color: var(--muted); }
.barra-tramo { display: block; flex: 0 0 var(--w, 0%); min-width: 3px; }
.barra-tramo.resto { flex: 1 1 auto; min-width: 3px; }
.barra-tramo.es-bueno { background: var(--ok-text); }
.barra-tramo.es-regular { background: var(--info-text); }
.barra-tramo.es-malo { background: var(--danger-text); }
.barra-tramo.es-sin { background: var(--line-strong); }

#admin-pane-meta .ads-pausadas-nombres { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
#admin-pane-meta .ads-pie { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#admin-pane-meta .ads-enlace { color: var(--link); font-size: 14px; font-weight: 600; text-decoration: none; }
#admin-pane-meta .ads-enlace:hover { text-decoration: underline; }
/* Historial (bloque de Campañas y anuncios, 24-oct-2026). */
#admin-pane-meta .ads-historial[hidden] { display: none; }
#admin-pane-meta .ads-historial-cab { display: flex; flex-direction: column; gap: 4px; }
#admin-pane-meta .ads-historial-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
#admin-pane-meta .ads-historial-filtro { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
#admin-pane-meta .ads-historial-filtro[aria-pressed="true"] { border-color: var(--link); background: var(--info-bg); color: var(--text); font-weight: 600; }
#admin-pane-meta .ads-historial-filtro:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
#admin-pane-meta .ads-historial-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; max-height: 560px; overflow-y: auto; }
#admin-pane-meta .ads-historial-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
#admin-pane-meta .ads-historial-item:last-child { border-bottom: 0; }
#admin-pane-meta .ads-historial-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#admin-pane-meta .ads-historial-linea time { font-size: 12px; font-weight: 600; color: var(--muted); }
#admin-pane-meta .ads-historial-que { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
#admin-pane-meta .ads-historial-detalle { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
#admin-pane-meta .ads-historial-quien { font-size: 12px; color: var(--muted); }
#admin-pane-meta .ads-historial-estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--panel-3); color: var(--muted); }
#admin-pane-meta .ads-historial-estado.es-pendiente { background: var(--warn-bg); color: var(--warn-text); }
#admin-pane-meta .ads-historial-estado.es-borrador { background: var(--info-bg); color: var(--info-text); }
#admin-pane-meta .ads-historial-estado.es-publicado { background: var(--ok-bg); color: var(--ok-text); }
#admin-pane-meta .ads-historial-estado.es-decidido { background: var(--panel-2); color: var(--text); }
#admin-pane-meta .ads-consultando { margin: 0; font-size: 13px; color: var(--muted); }
#admin-pane-meta .ads-aviso-fallo { margin: 0; padding: 8px 12px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; }
#admin-pane-meta .ads-fallo { align-items: flex-start; }
#admin-pane-meta .ads-fallo strong { font-size: 15px; font-weight: 600; }
#admin-pane-meta .ads-fallo span { font-size: 13px; color: var(--muted); }

/* Mientras pregunta a Meta: el hueco de cada bloque, del tamaño de lo que va a salir. */
#admin-pane-meta .ads-esqueleto { display: flex; flex-direction: column; gap: 16px; }
.esq { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--panel-3) 0%, var(--panel-2) 50%, var(--panel-3) 100%); background-size: 200% 100%; animation: esq-brillo 1.4s ease-in-out infinite; }
.esq-frase { height: 24px; width: min(640px, 90%); }
.esq-cifra { height: 76px; }
.esq-titulo { height: 20px; width: 180px; }
.esq-fila { height: 52px; }
.esq-fila.fina { height: 36px; }
@keyframes esq-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }

/* MENÚ «⋯» DE UNA FILA — pieza común (abrirMenuFila en admin.js): flota junto a su botón. */
.menu-fila {
  position: fixed; left: var(--menu-x, 16px); top: var(--menu-y, 16px); z-index: 1000;
  display: flex; flex-direction: column; gap: 2px; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
  padding: 6px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel);
  box-shadow: var(--sombra-flota); color: var(--text);
}
.menu-fila-opcion {
  display: flex; align-items: center; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .menu-fila-opcion:not([disabled]):hover { background: var(--panel-2); } }
.menu-fila-opcion:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.menu-fila-opcion[disabled] { opacity: .5; cursor: not-allowed; }
.menu-fila-nota { margin: 0; padding: 6px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--muted); }

@media (max-width: 1100px) {
  #admin-pane-meta .ads-tabla .ads-c-visto { display: none; }
}
/* Móvil (dibujo Campanas-Movil): una columna, las cifras en 2 × 2 y cada anuncio como tarjeta. */
@media (max-width: 720px) {
  #admin-pane-meta .ads-cabecera-derecha { justify-content: flex-start; }
  /* En el móvil, como el dibujo: «Últimos 30 días · gasto al día del …» en una línea y Actualizar al lado. */
  #admin-pane-meta .ads-periodo { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); }
  #admin-pane-meta .ads-periodo-rotulo { display: none; }
  #admin-pane-meta .ads-periodo::after { content: "·"; margin-left: 6px; }
  #admin-pane-meta .ads-bloque, #admin-pane-meta .ads-resumen { padding: 16px; }
  #admin-pane-meta .ads-frase { font-size: 17px; }
  #admin-pane-meta .ads-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #admin-pane-meta .ads-largo { display: none; }
  #admin-pane-meta .ads-corto { display: inline; }
  #admin-pane-meta .ads-toca { flex-direction: column; align-items: stretch; gap: 8px; }
  #admin-pane-meta .ads-toca .btn { align-self: flex-start; }
  #admin-pane-meta .ads-campana-cab { flex-direction: column; gap: 12px; }
  #admin-pane-meta .ads-campana-acciones { align-items: stretch; max-width: none; text-align: left; }
  #admin-pane-meta .ads-cabecera-derecha .btn.small,
  #admin-pane-meta .ads .btn.small { min-height: 44px; }
  #admin-pane-meta .btn.ghost.ads-mas { width: 44px; height: 44px; min-height: 44px; }
  #admin-pane-meta .ads-tabla-caja { overflow: visible; }
  #admin-pane-meta .ads-tabla, #admin-pane-meta .ads-tabla tbody { display: block; }
  #admin-pane-meta .ads-tabla thead { display: none; }
  #admin-pane-meta .ads-tabla tr.ads-conjunto { display: block; margin-top: 4px; }
  #admin-pane-meta .ads-tabla tr.ads-conjunto th { display: block; border-radius: 8px; }
  #admin-pane-meta .ads-tabla tr.ads-anuncio {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 8px 12px;
    grid-template-areas: "nombre nombre hacer mas" "gasto meta tria tria" "calidad calidad calidad calidad";
    margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  }
  #admin-pane-meta .ads-tabla tr.ads-anuncio td { display: block; padding: 0; border: 0; text-align: left; }
  #admin-pane-meta .ads-tabla .ads-c-nombre { grid-area: nombre; min-width: 0; overflow-wrap: anywhere; }
  #admin-pane-meta .ads-tabla .ads-c-hacer { grid-area: hacer; justify-self: end; font-size: 13px; color: var(--muted); }
  #admin-pane-meta .ads-tabla .ads-c-mas { grid-area: mas; width: auto; }
  #admin-pane-meta .ads-tabla .ads-c-gasto { grid-area: gasto; }
  #admin-pane-meta .ads-tabla .ads-c-meta { grid-area: meta; }
  #admin-pane-meta .ads-tabla .ads-c-tria { grid-area: tria; }
  #admin-pane-meta .ads-tabla :is(.ads-c-gasto, .ads-c-meta, .ads-c-tria) { font-weight: 600; }
  #admin-pane-meta .ads-tabla :is(.ads-c-gasto, .ads-c-meta, .ads-c-tria)::after {
    content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 400; color: var(--muted);
  }
  #admin-pane-meta .ads-tabla tr.ads-anuncio td:is(.ads-c-visto, .ads-c-clics) { display: none; }
  #admin-pane-meta .ads-tabla .ads-c-calidad { grid-area: calidad; }
  #admin-pane-meta .ads-tabla .ads-barra { width: 100%; }
  .menu-fila-opcion { min-height: 44px; font-size: 14px; }
}

/* ── Reclamaciones (panel legal, 25-sep-2026) ──────────────────────────────────────────────────
   La pantalla usa las piezas del inicio (respuestas, lista de tarjetas, chips, plegable). Esto solo
   añade lo que el detalle de un caso necesita y el inicio no tiene: las líneas del importe, las
   listas de pruebas con su etiqueta y la cronología. Mismos tamaños (0,72 · 0,78 · 0,84) y tokens. */
/* `display: grid` de .inicio-bloque se come el atributo hidden: sin esto el bloque vacío se veía. */
.inicio-bloque[hidden] { display: none; }
/* Un caso por fila: el detalle es largo y en dos columnas quedaba apretado. */
.inicio-decisiones.legal-una-columna { grid-template-columns: minmax(0, 1fr); }
.legal-seccion { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.legal-seccion h5 { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.legal-seccion p { margin: 0; font-size: 0.84rem; color: var(--texto-suave); }
.legal-lineas, .legal-items, .legal-cronologia { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.legal-lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: 0.84rem; color: var(--texto-suave); }
.legal-lineas li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.legal-lineas li.legal-total { padding-top: 4px; border-top: 1px solid var(--line); font-weight: 600; color: var(--text); }
.legal-items li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--texto-suave); }
.legal-items li .inicio-chip { flex-shrink: 0; margin-top: 1px; }
.legal-cronologia li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 0.84rem; color: var(--texto-suave); }
.legal-cronologia li span:first-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.legal-cronologia li.legal-futuro { color: var(--muted); }
.legal-importe { margin: 0; font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.legal-importe small { margin-left: 8px; font-size: 0.78rem; font-weight: 400; color: var(--muted); }
/* Gestiones en cada caso (3-oct-2026): el formulario se abre DENTRO de la tarjeta, sin ventanas. */
.legal-gestion { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.legal-gestion-form { display: grid; gap: 12px; min-width: 0; }
.legal-gestion-form .field > span { font-size: 0.78rem; font-weight: 600; color: var(--texto-suave); }
.legal-gestion-form textarea, .legal-gestion-form select, .legal-gestion-form input[type="date"] { width: 100%; max-width: 100%; box-sizing: border-box; }
.legal-gestion-estado { margin: 0; font-size: 0.8rem; color: var(--muted); }
.legal-gestion-estado:empty { display: none; }
.legal-opciones { display: grid; gap: 8px; }
.legal-opcion { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; font-size: 0.84rem; color: var(--text); min-width: 0; }
.legal-opcion input { margin-top: 3px; flex-shrink: 0; }
.legal-opcion span { min-width: 0; }
.legal-opcion small { display: block; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .legal-cronologia li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Parte 5 de la bandeja: los dos botones de «¿lo hago yo solo?» debajo de la pregunta. */
.correo-regla-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* 28-sep (tarde, dibujo aprobado): lo que escribió el cliente, a la vista, y el correo entero al desplegar.
   Sin barra de color a la izquierda (norma Impeccable: nada de border-left de color >1px): fondo suave y borde fino. */
.correo-rol { color: var(--text); }
.correo-escribio { display: grid; gap: 6px; margin-top: 4px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); }
.correo-escribio-rotulo { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.correo-escribio blockquote { margin: 0; font-size: 0.92rem; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.correo-entero > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--link); font-size: 0.84rem; }
/* En el móvil se toca con el dedo: 44 px, como el resto del inicio (medido el 7-oct: 117×32). */
@media (max-width: 760px) { .correo-entero > summary { min-height: 44px; } }
.correo-entero > summary:focus-visible { outline: 3px solid var(--accion, var(--brand)); outline-offset: 2px; }
.correo-entero pre { margin: 6px 0 0; padding: 10px 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.84rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); color: var(--text); }
.correo-canal-total td { font-weight: 600; }
/* 28-sep (noche): ¿ya es cliente en Qobrix? y la casilla de darlo de alta al aprobar. (3-oct: la misma casilla
   tocable, con nombre propio `.casilla-tocable`, en la baja de un asesor de Equipo.) Es la fila del
   departamento (.correo-depto, mismo select de 44px) con su texto a tamaño normal y la casilla tocable. */
.correo-crm, .casilla-tocable { margin: 0; font-size: 0.84rem; color: var(--text); }
/* La fila hereda el rótulo en versalitas de «DEPARTAMENTO»: aquí es una frase y se lee como tal. */
.correo-crm label, .casilla-tocable label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 0.84rem; font-weight: 400; color: var(--text); }
.correo-crm input[type="checkbox"], .casilla-tocable input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.correo-crm input[type="checkbox"]:focus-visible, .casilla-tocable input[type="checkbox"]:focus-visible { outline: 3px solid var(--accion, var(--brand)); outline-offset: 2px; }

/* ═══ «Lo que TRIA ha aprendido» (29-sep-2026) ══════════════════════════════════════════════
   Dibujo: docs/diseno/lo-que-tria-ha-aprendido.html. Tarjetas blancas sobre el lienzo del claro,
   todo con los tokens de .cara-clara: ningún color escrito aquí. */
.aprendido {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aprendido-caja {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.aprendido-caja p {
  margin: 0;
  text-align: left;
}

.aprendido-caja h3 {
  margin: 0;
  font-size: var(--fs-md, 16px);
}

.aprendido-frase {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--text);
}

.aprendido-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.aprendido-cab h3 {
  margin-right: auto;
}

.aprendido-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aprendido-regla {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.aprendido-regla-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aprendido-regla-txt > span {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.aprendido-regla-txt small {
  font-size: 12.5px;
  color: var(--muted);
}

.aprendido-regla-acc {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

.aprendido-nollega {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--danger-bg);
  color: var(--danger-text);
}

.aprendido-mas {
  align-self: flex-start;
  margin-top: 4px;
}

.aprendido-plegado summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  font-size: 14px;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.aprendido-plegado[open] summary {
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .aprendido-regla {
    flex-wrap: wrap;
    gap: 8px;
  }

  .aprendido-regla-txt {
    flex-basis: 100%;
  }

  .aprendido-regla-acc .btn {
    min-height: 44px;
  }

  .aprendido-caja {
    padding: 14px 16px;
  }
}

/* El juez IA dentro de la conversación de Chats del equipo (29-sep-2026). */
.judge-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.judge-confirma {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  color: var(--text);
}

.judge-confirma p {
  margin: 0;
  line-height: 1.5;
}

.judge-confirma-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.judge-regla {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-2);
}

.judge-regla p {
  margin: 0;
  line-height: 1.5;
}

/* «Lo que TRIA ha aprendido» con explicación (29-sep-2026): el rótulo bajo el título, el porqué de las
   que ya no aplica y el texto exacto que lee TRIA, plegado bajo la frase en cristiano. */
.aprendido .aprendido-rotulo {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

.aprendido-regla-txt .aprendido-motivo {
  color: var(--text);
}

.aprendido-literal summary {
  cursor: pointer;
  width: fit-content;
  font-size: 12.5px;
  color: var(--link);
  min-height: 24px;
  display: flex;
  align-items: center;
}

.aprendido-literal p {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .aprendido-literal summary {
    min-height: 44px;
  }
}

/* 3-oct-2026 · el reparto de la baja de un asesor (Equipo → ficha del usuario). Columnas fijas: en el
   móvil la tabla ensanchaba la ficha entera (553 px en una pantalla de 390, medido). Así el texto del
   grupo se parte y el desplegable se encoge, y la tabla cabe en su apartado. */
.data-table.data-table-reparto { table-layout: fixed; width: 100%; }
.data-table.data-table-reparto th:nth-child(2), .data-table.data-table-reparto td:nth-child(2) { width: 84px; }
.data-table.data-table-reparto th:nth-child(3), .data-table.data-table-reparto td:nth-child(3) { width: 42%; }
.data-table.data-table-reparto select { width: 100%; min-width: 0; }
.data-table.data-table-reparto td { overflow-wrap: anywhere; }
.data-table.data-table-reparto th { white-space: normal; }

/* «Cómo va la web» (7-oct-2026): las notas de «de dónde sale el dato» a la izquierda (norma, regla 5). El `.muted`
   de styles.css (el del chat) las centra; aquí solo se corrige en esta pantalla para no mover las demás. */
#webComoVaPane p.muted { text-align: left; }

/* «Cómo va la web», diseño del 7-oct (dibujo docs/diseno/como-va-la-web-v2-20261007.html): lo que te toca hoy, cuatro
   semáforos y el detalle en desplegables. Mismas piezas de la sala (.v2-metric-card, .admin-fold, .val-badge); aquí solo
   se agrandan las frases (la letra de 10 px de la tarjeta era de una cifra suelta, no de una explicación) y se colocan
   los botones. */
#webComoVaPane .v2-metrics-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#webComoVaPane .v2-metric-card { gap: 4px; padding: 14px 16px; align-items: flex-start; }
#webComoVaPane .v2-metric-card strong { font-size: 30px; margin: 0; }
#webComoVaPane .v2-metric-label { font-size: 15px; font-weight: 600; color: var(--text); }
#webComoVaPane .v2-metric-card small { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 0; }
#webComoVaPane .web-hoy-lista { display: grid; gap: 10px; }
#webComoVaPane .v2-metric-card.web-hoy strong { font-size: 17px; line-height: 1.3; letter-spacing: 0; }
#webComoVaPane .v2-metric-card.web-hoy small { max-width: 70ch; }
#webComoVaPane .web-hoy-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#webComoVaPane .web-estado { white-space: nowrap; text-align: right; }
#webComoVaPane .web-estado .btn { margin-left: 8px; min-height: 32px; padding: 4px 12px; }
#webComoVaPane .data-table th { white-space: normal; }
#webComoVaPane .web-grupo { margin: 12px 0 4px; }
#webComoVaPane .web-barra { width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--panel-2); accent-color: var(--success); -webkit-appearance: none; appearance: none; }
#webComoVaPane .web-barra::-webkit-progress-bar { background: var(--panel-2); }
#webComoVaPane .web-barra::-webkit-progress-value { background: var(--success); border-radius: 99px; }
#webComoVaPane .web-barra::-moz-progress-bar { background: var(--success); border-radius: 99px; }
#webComoVaPane .admin-fold { margin-bottom: 10px; }
/* minmax(0, 1fr): sin esto una celda de rejilla no baja de lo que mide su contenido y empuja el texto fuera del móvil. */
#webComoVaPane .admin-fold-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#webComoVaPane .admin-fold-body > * { min-width: 0; }
#webComoVaPane .admin-fold-body > p { overflow-wrap: anywhere; }
#webComoVaPane .admin-fold-body > p { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--text); }
#webComoVaPane .admin-fold-body > p.muted { color: var(--muted); font-size: 13px; }
/* La flecha al lado del título, no sola en una tercera línea. */
#webComoVaPane .admin-fold-summary { position: relative; padding-right: 48px; }
#webComoVaPane .admin-fold-summary::after { position: absolute; right: 20px; top: 50%; margin: -6px 0 0; }
#webComoVaPane .admin-fold[open] > .admin-fold-summary::after { margin-top: -2px; }
@media (max-width: 1100px) { #webComoVaPane .v2-metrics-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  #webComoVaPane .v2-metrics-primary { grid-template-columns: 1fr; }
  #webComoVaPane .data-table th, #webComoVaPane .data-table td { padding: 8px 6px; }
  #webComoVaPane .data-table th { letter-spacing: 0.02em; font-size: 10px; }
  #webComoVaPane .web-estado { white-space: normal; }
  #webComoVaPane .web-estado .btn { margin: 6px 0 0; display: block; }
}

/* «📅 Agendar tarea» en Mensajes (Fase 25, 8-oct-2026): la fila del botón bajo la caja de responder,
   y el botón de la sugerencia amarilla en su misma línea. Solo espaciado: colores y botones son los de siempre. */
.msg-agendar-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-agendar-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ─── La columna derecha de Mensajes, más útil (fundador, 14-oct-2026, m029) ───
   Dibujo aprobado: docs/estado/ia-mensajeria/dibujos/derecha-util.html. Solo tokens: hereda el tema claro. */
#admin-pane-mensajes .cajon-cab .msg-cab-ficha { display: block; color: var(--link); text-decoration: none; }
#admin-pane-mensajes .cajon-cab .msg-cab-ficha:hover { text-decoration: underline; }
#admin-pane-mensajes .cajon-cab .msg-cab-flecha { font-size: 11.5px; font-weight: 500; color: var(--muted); }
#admin-pane-mensajes .msg-cab-tel { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
#admin-pane-mensajes .cj-quien.con-desplegables { grid-template-columns: minmax(0, 1fr); }
#admin-pane-mensajes .cj-quien.con-desplegables .msg-dato { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
#admin-pane-mensajes .cj-quien.con-desplegables .msg-dato .k { flex: none; }
#admin-pane-mensajes .msg-dato-sel { flex: 1 1 auto; width: auto; min-width: 0; max-width: calc(100% - 56px); padding: 5px 8px; font-size: 13px; }
#admin-pane-mensajes details.msg-plegar > summary > span { display: inline-flex; align-items: center; gap: 6px; }
#admin-pane-mensajes .msg-local-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#admin-pane-mensajes .msg-local a.t { color: var(--link); text-decoration: none; }
#admin-pane-mensajes .msg-local a.t:hover { text-decoration: underline; }
#admin-pane-mensajes .msg-local-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* «Ver dossier» y «Enviar por WhatsApp» en la misma línea, como el dibujo: la columna mide ~270 px. */
#admin-pane-mensajes details[data-plegar="encajan"] .msg-local { padding: 10px 9px; }
#admin-pane-mensajes .msg-local-acc .btn.small { padding: 3px 8px; }
#admin-pane-mensajes .msg-pill { flex: none; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
#admin-pane-mensajes .msg-pill.es-interes { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
#admin-pane-mensajes .msg-pill.es-ofrecido { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

/* La ventana de confirmar con título, ✕ y campos (confirmActionDialog con opciones). La ✕ va DENTRO, arriba
   a la derecha, con 32 px de clic y sin pisar el título. */
.opp-confirm-panel.con-titulo { position: relative; padding-top: 18px; }
.opp-confirm-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.opp-confirm-x:hover { background: var(--panel-2); color: var(--text); }
.opp-confirm-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.opp-confirm-titulo { margin: 0 40px 8px 0; font-size: var(--fs-lg, 1.05rem); color: var(--text); line-height: 1.35; }
.opp-confirm-campo { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; color: var(--text); }
.opp-confirm-campo small { color: var(--muted); font-weight: 400; }
.opp-confirm-campo input, .opp-confirm-campo textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 8px); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.opp-confirm-campo textarea { resize: vertical; min-height: 64px; }
.opp-confirm-error { margin: -4px 0 12px; font-size: 13px; color: var(--danger-text, var(--danger)); }

/* 144.x Captación ← Meta */
#capmeta .capmeta-item { padding: 8px 0; border-bottom: 1px solid var(--line); list-style: none; overflow-wrap: anywhere; }
#capmeta .capmeta-texto { margin-top: 4px; }
#capmeta .capmeta-repetido { margin-top: 4px; color: var(--warn-text); font-size: .92em; }