/* OpoBus Admin Panel — admin.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #0f1117;
  --color-surface: #1a1d27;
  --color-surface-2: #222536;
  --color-border: #2e3247;
  --color-text: #e8eaf0;
  --color-text-muted: #8b92a8;
  --color-primary: #11B5AE;
  --color-primary-hover: #0d9e97;
  --color-danger: #e05252;
  --color-warning: #f5a623;
  --color-success: #3ecf8e;
  --color-accent: #6c63ff;
  --sidebar-width: 220px;
  --header-height: 56px;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.admin-skip-link, .landing-skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-primary, #0f2d52);
  color: #fff;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 160ms ease-out;
}
.admin-skip-link:focus, .landing-skip-link:focus { transform: translateY(0); outline: 3px solid #ffb400; outline-offset: 2px; }
body :focus-visible { outline: 3px solid var(--color-primary, #0f2d52); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* ── Tema (solo /admin) ───────────────────────────────────────
 * El :root es el tema OSCURO por defecto (cubre "dark" y "system" en
 * sistemas oscuros). Solo se overridean variables --color-* para el tema
 * claro; todo el panel ya usa esas variables, así que el cambio es global. */
:root[data-admin-theme="light"] {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f6;
  --color-border: #d8dee8;
  --color-text: #0f2d52;
  --color-text-muted: #5b6b86;
  --shadow: 0 2px 10px rgba(15, 45, 82, 0.10);
}

/* "Automático": tema claro cuando el sistema prefiere claro. */
@media (prefers-color-scheme: light) {
  :root[data-admin-theme="system"] {
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-2: #eef2f6;
    --color-border: #d8dee8;
    --color-text: #0f2d52;
    --color-text-muted: #5b6b86;
    --shadow: 0 2px 10px rgba(15, 45, 82, 0.10);
  }
}

/* Selector de tema en la cabecera */
.admin-theme-wrap { position: relative; display: inline-flex; }
.admin-theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.admin-theme-menu[hidden] { display: none; }
.admin-theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  border-radius: 6px;
  font-weight: 600;
  text-align: left;
}
.admin-theme-option:hover { background: var(--color-surface-2); }
.admin-theme-option.is-active { color: var(--color-primary); }
.admin-theme-option.is-active::after { content: "\2713"; margin-left: auto; font-weight: 800; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ── Auth checking screen ─────────────────────────────────── */
#admin-auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
}

.admin-auth-card {
  text-align: center;
  padding: 48px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  max-width: 360px;
  width: 90%;
}

.admin-auth-card img {
  width: 120px;
  margin-bottom: 20px;
}

.admin-auth-card h1 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text);
}

.admin-auth-card p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 24px;
}

.admin-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Access denied screen ─────────────────────────────────── */
#admin-denied-screen {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
}

.admin-denied-card {
  text-align: center;
  padding: 48px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
}

.admin-denied-card .denied-icon {
  font-size: 3rem;
  color: var(--color-danger);
  margin-bottom: 16px;
}

.admin-denied-card h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.admin-denied-card p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ── Shell layout ─────────────────────────────────────────── */
#admin-shell {
  display: none;
  height: 100vh;
  flex-direction: column;
}

/* ── Top header ───────────────────────────────────────────── */
.admin-header {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.admin-header-logo img {
  height: 28px;
}

.admin-header-logo .admin-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-header-spacer { flex: 1; }

.admin-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.admin-header-user strong {
  color: var(--color-text);
  font-size: 0.8rem;
}

.admin-role-pill {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: capitalize;
}

/* ── Body split: sidebar + main ───────────────────────────── */
.admin-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.admin-nav {
  padding: 12px 0;
  flex: 1;
}

.admin-nav-section {
  padding: 8px 12px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--color-text-muted);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.admin-nav-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

.admin-nav-item.active {
  background: rgba(17, 181, 174, 0.1);
  color: var(--color-primary);
  font-weight: 600;
}

.admin-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}

.admin-nav-item i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.admin-nav-placeholder {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.5;
  margin-left: auto;
}

/* Sección sin permiso de gestión para el rol actual */
.admin-nav-item.nav-locked {
  opacity: 0.6;
}

.admin-nav-item .nav-lock {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.7;
}

.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.admin-sidebar-footer a {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.admin-sidebar-footer a:hover {
  color: var(--color-text);
}

/* ── Main content ─────────────────────────────────────────── */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--color-bg);
}

/* ── Views ────────────────────────────────────────────────── */
.admin-view { display: none; }
.admin-view.active { display: block; }

/* ── Page header ──────────────────────────────────────────── */
.admin-page-header {
  margin-bottom: 24px;
}

.admin-page-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.admin-page-header p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ── Metric cards row ─────────────────────────────────────── */
.admin-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.admin-metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}

.admin-metric-card .metric-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  font-weight: 600;
}

.admin-metric-card .metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
}

.admin-metric-card .metric-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Placeholder section ──────────────────────────────────── */
.admin-placeholder {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  color: var(--color-text-muted);
}

.admin-placeholder i {
  font-size: 2.5rem;
  margin-bottom: 16px;
  opacity: 0.4;
  display: block;
}

.admin-placeholder h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.admin-placeholder p {
  font-size: 0.875rem;
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Dashboard ────────────────────────────────────────────── */
.admin-quick-links {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.admin-quick-links h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.admin-quick-link-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}

.admin-quick-link-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(17, 181, 174, 0.06);
}

.admin-quick-link-btn i {
  font-size: 1.25rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  transition: background 0.15s;
}

.btn-admin-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-admin-primary:hover {
  background: var(--color-primary-hover);
}

.btn-admin-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-admin-secondary:hover {
  background: var(--color-border);
}

.btn-admin-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-admin-warning {
  background: var(--color-warning, #d98a00);
  color: #fff;
}

.btn-admin-warning:hover {
  filter: brightness(0.94);
}

/* ── Sección Revisión (drawer de preguntas) ───────────────── */
.admin-review-section {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
}

.admin-review-grid {
  margin-bottom: 8px;
}

.admin-review-flag {
  color: var(--color-warning, #d98a00);
  font-weight: 700;
}

.admin-review-imported {
  color: var(--color-text-muted);
  font-weight: 600;
}

.admin-review-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
}

.admin-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Status badges ────────────────────────────────────────── */
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-success { background: rgba(62, 207, 142, 0.15); color: var(--color-success); }
.badge-warning { background: rgba(245, 166, 35, 0.15); color: var(--color-warning); }
.badge-danger  { background: rgba(224, 82, 82, 0.15);  color: var(--color-danger); }
.badge-muted   { background: var(--color-surface-2);   color: var(--color-text-muted); }
.badge-info    { background: rgba(17, 181, 174, 0.15); color: var(--color-primary); }

/* ── Soporte: hilo de conversación del drawer ─────────────── */
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-msg {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-text-muted);
}
.support-msg.is-student { border-left-color: var(--color-accent); }
.support-msg.is-support { border-left-color: var(--color-primary); }
.support-msg.is-internal {
  border-left-color: var(--color-warning);
  background: rgba(245, 166, 35, 0.08);
}
.support-msg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.support-msg.is-internal .support-msg-meta { color: var(--color-warning); }
.support-msg-body {
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Soporte: selector de plantillas rápidas en el drawer de respuesta */
.support-templates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.support-templates .admin-select { width: 100%; }

/* ── Notice / alert ───────────────────────────────────────── */
.admin-notice {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-notice-info    { background: rgba(17, 181, 174, 0.1); border: 1px solid rgba(17,181,174,0.3); color: var(--color-primary); }
.admin-notice-warning { background: rgba(245,166,35,0.1);    border: 1px solid rgba(245,166,35,0.3); color: var(--color-warning); }
.admin-notice-error   { background: rgba(224,82,82,0.1);     border: 1px solid rgba(224,82,82,0.3);  color: var(--color-danger); }

/* ── Button sizes / header buttons ───────────────────────── */
.btn-admin-sm {
  padding: 6px 10px;
  font-size: 0.8rem;
}

.btn-admin:disabled,
.btn-admin[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Page header row (title + actions) ───────────────────── */
.admin-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

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

.admin-last-load {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Section subtitle + source tag ───────────────────────── */
.admin-section-subtitle {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-source-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
}

.admin-data-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 16px;
  line-height: 1.6;
}

.admin-data-note code,
.admin-placeholder code {
  background: var(--color-surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Metric value states ─────────────────────────────────── */
.metric-value.metric-na {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.metric-value.metric-loading {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* ── Restricted / empty states ───────────────────────────── */
.admin-restricted,
.admin-empty {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  color: var(--color-text-muted);
}

.admin-restricted i,
.admin-empty i {
  font-size: 2.5rem;
  margin-bottom: 16px;
  opacity: 0.4;
  display: block;
}

.admin-restricted h3,
.admin-empty h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.admin-restricted p,
.admin-empty p {
  font-size: 0.875rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Toolbar (search + filters) ──────────────────────────── */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.admin-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.admin-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.875rem;
}

.admin-search input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-select {
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.875rem;
}

.admin-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ── Tables ──────────────────────────────────────────────── */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.admin-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--color-surface-2);
}

.admin-table-loading,
.admin-table-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 28px 14px !important;
}

.admin-table .cell-email {
  font-weight: 600;
  word-break: break-all;
}

.admin-table .cell-muted {
  color: var(--color-text-muted);
}

.admin-table .cell-actions {
  text-align: right;
  white-space: nowrap;
}

/* ── Modal ───────────────────────────────────────────────── */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.admin-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.admin-modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.admin-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  padding: 4px;
}

.admin-modal-close:hover { color: var(--color-text); }

.admin-modal-body {
  padding: 20px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.admin-modal-body p { margin-bottom: 12px; }

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}

/* ── Form fields in modal ────────────────────────────────── */
.admin-field {
  margin-bottom: 16px;
}

.admin-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.admin-field select,
.admin-field input {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.875rem;
}

.admin-field select:focus,
.admin-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-field-checkbox input { width: auto; }

.admin-field-checkbox label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: var(--color-text);
}

.admin-modal-warning {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: var(--color-warning);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  margin-bottom: 14px;
}

.admin-modal-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(17, 181, 174, 0.08);
  border: 1px solid rgba(17, 181, 174, 0.3);
  color: var(--color-text-muted);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  margin-bottom: 14px;
}

.admin-beta-access-box {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(17, 181, 174, 0.32);
  border-radius: var(--radius);
  background: rgba(17, 181, 174, 0.07);
}

.admin-beta-access-box p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-beta-access-box .admin-field {
  margin: 0;
}

.admin-modal-danger-text {
  color: var(--color-danger);
  font-weight: 600;
}

/* ── Toasts ──────────────────────────────────────────────── */
.admin-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1100;
}

.admin-toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--color-text);
  box-shadow: var(--shadow);
  max-width: 340px;
  animation: toast-in 0.2s ease;
}

.admin-toast-success { border-left-color: var(--color-success); }
.admin-toast-error   { border-left-color: var(--color-danger); }
.admin-toast-warning { border-left-color: var(--color-warning); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reportes: contadores (chips) ─────────────────────────── */
.admin-report-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-report-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: border-color 0.15s, background 0.15s;
}

.admin-report-chip:not(.is-static) { cursor: pointer; }
.admin-report-chip:not(.is-static):hover { border-color: var(--color-primary); }
.admin-report-chip.is-active {
  border-color: var(--color-primary);
  background: rgba(17, 181, 174, 0.08);
}

.admin-report-chip .chip-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.admin-report-chip .chip-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ── Tabs (vistas) ────────────────────────────────────────── */
.admin-tabs {
  display: inline-flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px;
}

.admin-tab {
  border: none;
  background: none;
  color: var(--color-text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-tab:hover { color: var(--color-text); }
.admin-tab.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* ── Checkbox inline en toolbar ───────────────────────────── */
.admin-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Drawer ───────────────────────────────────────────────── */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  z-index: 1050;
}

.admin-drawer {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.2s ease;
}

@keyframes drawer-in {
  from { transform: translateX(20px); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}

.admin-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.admin-drawer-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.admin-drawer-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  word-break: break-all;
}

.admin-drawer-body {
  overflow-y: auto;
  padding: 20px;
}

/* ── Secciones de detalle ─────────────────────────────────── */
.admin-detail-section {
  margin-bottom: 24px;
}

.admin-detail-section h4 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.admin-detail-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.82rem;
}

.admin-detail-label {
  flex: 0 0 130px;
  color: var(--color-text-muted);
}

.admin-detail-value {
  flex: 1;
  color: var(--color-text);
  word-break: break-word;
}

.admin-report-status-current { margin-bottom: 12px; }

.admin-report-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.admin-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

.admin-textarea:focus { outline: none; border-color: var(--color-primary); }

/* ── Pregunta vinculada (solo lectura) ────────────────────── */
.admin-linked-question {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
}

.admin-linked-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.admin-linked-q {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}

.admin-linked-options {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-linked-options li {
  padding: 6px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.82rem;
}

.admin-linked-options li.is-correct {
  border-color: var(--color-success);
  color: var(--color-success);
}

.admin-linked-explanation {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.admin-linked-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* ── Drawer ancho (editor de preguntas) ───────────────────── */
.admin-drawer-wide { max-width: 620px; }

/* ── Editor de preguntas ──────────────────────────────────── */
.admin-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.85rem;
}
.admin-input:focus { outline: none; border-color: var(--color-primary); }

.admin-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-option-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-option-row input[type="radio"] { flex-shrink: 0; justify-self: center; }
/* min-width:0 + minmax(0,1fr) evitan el desbordamiento horizontal del input
   dentro del drawer (antes el texto se salía/cortaba a la derecha). */
.admin-option-row .admin-input { width: 100%; min-width: 0; }

.admin-option-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-option-feedback {
  min-height: 54px;
  font-size: 0.78rem;
}

.admin-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.admin-protected-field textarea:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  background: var(--color-surface-2);
}

.admin-protected-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: var(--radius);
  background: rgba(245, 166, 35, 0.06);
}

.admin-protected-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-warning);
  font-size: 0.82rem;
}

.admin-protected-panel > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.admin-protected-field {
  margin: 0;
}

.admin-editor-no-publish {
  background: rgba(17, 181, 174, 0.08);
  border: 1px solid rgba(17, 181, 174, 0.3);
  color: var(--color-text-muted);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  margin-top: 12px;
}

.admin-editor-no-publish code {
  background: var(--color-surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

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

.admin-editor-feedback {
  font-size: 0.8rem;
  margin-top: 10px;
  min-height: 1em;
}
.admin-editor-feedback.is-dirty,
.admin-editor-feedback.is-warning { color: var(--color-warning); }
.admin-editor-feedback.is-error { color: var(--color-danger); }
.admin-editor-feedback.is-saved { color: var(--color-success); }
.admin-editor-feedback.is-saving { color: var(--color-text-muted); }

/* ── Historial de revisiones ──────────────────────────────── */
.admin-history { margin-top: 12px; }
.admin-history-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.admin-history-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.admin-history-fields { color: var(--color-text); }

/* ── Analytics: estado vacío y próximo paso ───────────────── */

.campaign-control {
  --route-cyan: #11b5ae;
  --route-yellow: #f5c84c;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  padding: 24px;
  background: radial-gradient(circle at 92% 0%, rgba(17, 181, 174, 0.16), transparent 30%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.campaign-control::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--route-cyan) 0 58%, var(--route-yellow) 58% 100%);
}

.campaign-control-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.campaign-control-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.campaign-control-heading h3 { color: var(--color-text); font-size: 1.28rem; line-height: 1.2; }
.campaign-control-heading p { margin-top: 5px; color: var(--color-text-muted); font-size: 0.82rem; }

.campaign-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 11px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.campaign-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.campaign-live-status.is-ready { color: var(--color-success); }
.campaign-live-status.is-ready .campaign-live-dot { background: var(--color-success); box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.16); }
.campaign-live-status.is-warning { color: var(--color-warning); }
.campaign-live-status.is-warning .campaign-live-dot { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16); }
.campaign-live-status.is-error { color: var(--color-danger); }
.campaign-live-status.is-error .campaign-live-dot { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.16); }

.campaign-decision-strip {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  margin-bottom: 18px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.campaign-decision-item { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--color-border); }
.campaign-decision-item:first-child { border-left: 0; }
.campaign-decision-primary { background: rgba(17, 181, 174, 0.08); }

.campaign-decision-label {
  display: block;
  overflow: hidden;
  margin-bottom: 7px;
  color: var(--color-text-muted);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.campaign-decision-item strong { display: block; color: var(--color-text); font-size: 1.75rem; line-height: 1; }
.campaign-decision-primary strong { color: var(--color-primary); }
.campaign-decision-item small { display: block; margin-top: 6px; color: var(--color-text-muted); font-size: 0.68rem; }

.campaign-routes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  gap: 14px;
}

.campaign-route-card {
  min-width: 0;
  padding: 18px;
  background: color-mix(in srgb, var(--color-surface-2) 72%, transparent);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--campaign-route-color, var(--color-primary));
  border-radius: 10px;
}

.campaign-route-oposigue { --campaign-route-color: var(--route-cyan); }
.campaign-route-beta { --campaign-route-color: var(--route-yellow); }

.campaign-route-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.campaign-route-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #071a2f;
  background: var(--campaign-route-color);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.campaign-route-header h4 { color: var(--color-text); font-size: 0.95rem; letter-spacing: 0.02em; }
.campaign-route-header p { margin-top: 2px; color: var(--color-text-muted); font-size: 0.68rem; }

.campaign-route-badge {
  padding: 4px 7px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.campaign-route-line {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 24px 2px 18px;
}

.campaign-route-line::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6px;
  right: 8%;
  left: 8%;
  height: 3px;
  background: linear-gradient(90deg, var(--campaign-route-color), color-mix(in srgb, var(--campaign-route-color) 35%, var(--color-border)));
}

.campaign-route-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.campaign-route-stop {
  width: 15px;
  height: 15px;
  margin-bottom: 9px;
  background: var(--color-surface-2);
  border: 3px solid var(--campaign-route-color);
  border-radius: 50%;
}

.campaign-route-stage.is-first .campaign-route-stop { background: var(--campaign-route-color); }
.campaign-route-stage.is-destination .campaign-route-stop {
  background: var(--campaign-route-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--campaign-route-color) 18%, transparent);
}

.campaign-route-stage strong { color: var(--color-text); font-size: 1.2rem; line-height: 1; }
.campaign-route-stage.is-destination strong { color: var(--campaign-route-color); }

.campaign-route-stage small {
  overflow: hidden;
  width: 100%;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border);
}

.campaign-route-footer > span { flex: 0 0 auto; color: var(--color-text-muted); font-size: 0.65rem; }
.campaign-source-list { display: flex; overflow: hidden; justify-content: flex-end; gap: 5px; }

.campaign-source-chip {
  overflow: hidden;
  max-width: 115px;
  padding: 4px 7px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-source-chip b { color: var(--campaign-route-color); }

.campaign-setup-state {
  margin-top: 14px;
  padding: 12px 14px;
  color: var(--color-warning);
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.campaign-setup-state[hidden] { display: none; }
.campaign-data-note { margin-top: 13px; color: var(--color-text-muted); font-size: 0.68rem; }
.campaign-data-note span::before { content: " · "; }
.campaign-depots { margin-top: 18px; }
.campaign-depots h4 { margin: 0; font-size: 0.9rem; }
.campaign-depots .campaign-data-note { margin: 4px 0 10px; }

/* ── Analytics: dashboard de decisiones ────────────────────── */
.analytics-toolbar { align-items: center; }

.analytics-period-control,
.analytics-compare-control {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.analytics-period-control .admin-select {
  min-width: 108px;
  min-height: 38px;
}

.analytics-compare-control {
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.analytics-compare-control input { accent-color: var(--color-primary); }

.analytics-context-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: -8px 0 18px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.analytics-context-row > span:nth-child(2) { margin-left: auto; }

.analytics-section-heading,
.analytics-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.analytics-section-heading h3,
.analytics-card-header h3 {
  margin-top: 3px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.25;
}

.analytics-section-heading p,
.analytics-card-header p {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.analytics-section-heading-compact { align-items: flex-end; margin-bottom: 14px; }

.analytics-kicker {
  display: block;
  color: var(--color-primary);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.analytics-kicker.is-warning { color: var(--color-warning); }

.analytics-pulse { margin-bottom: 20px; }

.analytics-pulse-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.analytics-kpi-card {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 11px;
  padding: 17px 16px;
  border-left: 1px solid var(--color-border);
}

.analytics-kpi-card:first-child { border-left: 0; }

.analytics-kpi-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  border-radius: 9px;
  font-size: 0.78rem;
}

.analytics-kpi-icon.is-cyan { color: var(--color-primary); }
.analytics-kpi-icon.is-navy { color: var(--color-text); background: var(--color-surface-2); }
.analytics-kpi-icon.is-warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 13%, transparent); }
.analytics-kpi-icon.is-success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 13%, transparent); }

.analytics-kpi-copy { min-width: 0; }
.analytics-kpi-copy > span,
.analytics-kpi-copy small { display: block; }
.analytics-kpi-copy > span {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  font-weight: 750;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.analytics-kpi-copy strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--color-text);
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.analytics-kpi-copy small {
  min-height: 1em;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.analytics-comparison.is-positive { color: var(--color-success); }
.analytics-comparison.is-negative { color: var(--color-warning); }
.analytics-comparison.is-neutral { color: var(--color-text-muted); }
.analytics-hide-comparison .analytics-comparison { visibility: hidden; }

.analytics-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, 0.75fr);
  gap: 16px;
  margin-bottom: 16px;
}

.analytics-card {
  min-width: 0;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.analytics-card-header { margin-bottom: 20px; }

.analytics-segmented {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
}

.analytics-segmented button {
  min-height: 36px;
  padding: 0 11px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 750;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.analytics-segmented button:hover { color: var(--color-text); }
.analytics-segmented button.is-active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

.analytics-segmented button:focus-visible,
.analytics-compare-control:focus-within,
.analytics-details summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.analytics-activity-main {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(250px, 1.45fr);
  align-items: center;
  gap: 28px;
  min-height: 142px;
  padding: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: 11px;
}

.analytics-big-label { display: block; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 750; }
.analytics-big-value {
  display: block;
  margin: 7px 0 6px;
  color: var(--color-text);
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.analytics-big-comparison { display: block; font-size: 0.7rem; font-weight: 700; }

.analytics-distribution { display: grid; gap: 18px; }
.analytics-bar-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.analytics-bar-row span { color: var(--color-text-muted); font-size: 0.72rem; }
.analytics-bar-row strong { color: var(--color-text); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.analytics-bar-track { overflow: hidden; height: 7px; background: var(--color-border); border-radius: 999px; }
.analytics-bar-fill { display: block; width: 0; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width 260ms ease-out; }
.analytics-bar-fill.is-conductual { background: var(--color-warning); }
.analytics-bar-fill.is-success { background: var(--color-success); }
.analytics-bar-fill.is-support { background: var(--color-primary); }

.analytics-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.analytics-mini-stats > div { min-width: 0; padding: 12px 14px; background: var(--color-surface-2); border-left: 1px solid var(--color-border); }
.analytics-mini-stats > div:first-child { border-left: 0; }
.analytics-mini-stats span,
.analytics-mini-stats strong { display: block; }
.analytics-mini-stats span { color: var(--color-text-muted); font-size: 0.65rem; }
.analytics-mini-stats strong { margin-top: 4px; color: var(--color-text); font-size: 1rem; font-variant-numeric: tabular-nums; }

.analytics-attention { border-top: 3px solid var(--color-warning); }
.analytics-attention-list { display: grid; gap: 9px; }
.analytics-attention-loading { padding: 24px 10px; color: var(--color-text-muted); font-size: 0.75rem; text-align: center; }
.analytics-attention-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 9px 9px 11px;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease;
}
.analytics-attention-item:hover { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-2)); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.analytics-attention-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.analytics-attention-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 13%, transparent); border-radius: 8px; }
.analytics-attention-item.is-good .analytics-attention-icon { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 13%, transparent); }
.analytics-attention-copy strong,
.analytics-attention-copy small { display: block; }
.analytics-attention-copy strong { font-size: 0.75rem; }
.analytics-attention-copy small { margin-top: 2px; color: var(--color-text-muted); font-size: 0.66rem; line-height: 1.35; }
.analytics-attention-arrow { color: var(--color-text-muted); font-size: 0.68rem; }

.analytics-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.analytics-total-chip,
.analytics-health-state {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.68rem;
}
.analytics-total-chip strong { color: var(--color-text); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.analytics-health-state { color: var(--color-success); font-weight: 750; }
.analytics-health-state.is-warning { color: var(--color-warning); }

.analytics-status-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.analytics-status-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
}
.analytics-status-row > span { width: 9px; height: 9px; background: var(--color-text-muted); border-radius: 50%; }
.analytics-status-row > span.is-pending { background: var(--color-warning); }
.analytics-status-row > span.is-invited { background: var(--color-primary); }
.analytics-status-row > span.is-accepted { background: var(--color-accent); }
.analytics-status-row > span.is-converted { background: var(--color-success); }
.analytics-status-row strong,
.analytics-status-row small { display: block; }
.analytics-status-row strong { color: var(--color-text); font-size: 0.73rem; }
.analytics-status-row small { margin-top: 2px; color: var(--color-text-muted); font-size: 0.64rem; }
.analytics-status-row b { color: var(--color-text); font-size: 1rem; font-variant-numeric: tabular-nums; }

.analytics-health-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analytics-health-summary > div { padding: 14px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 9px; }
.analytics-health-summary span,
.analytics-health-summary strong { display: block; }
.analytics-health-summary > div > span { color: var(--color-text-muted); font-size: 0.68rem; }
.analytics-health-summary strong { margin: 6px 0 10px; color: var(--color-text); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.analytics-mini-stats-health { margin-top: 10px; }

.analytics-details {
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.analytics-details summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.analytics-details summary::-webkit-details-marker { display: none; }
.analytics-details summary::after { content: "\f078"; margin-left: auto; color: var(--color-text-muted); font-family: "Font Awesome 6 Free"; font-size: 0.7rem; font-weight: 900; transition: transform 180ms ease; }
.analytics-details[open] summary::after { transform: rotate(180deg); }
.analytics-details summary > span { font-size: 0.78rem; font-weight: 750; }
.analytics-details summary > span i { margin-right: 8px; color: var(--color-primary); }
.analytics-details summary small { color: var(--color-text-muted); font-size: 0.68rem; }
.analytics-details-content { padding: 4px 18px 18px; border-top: 1px solid var(--color-border); }
.analytics-details-content > section { margin-top: 18px; }
.analytics-details-content .admin-section-subtitle { margin-top: 0; }
.analytics-details-content .admin-metrics-row { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .analytics-bar-fill,
  .analytics-segmented button,
  .analytics-attention-item,
  .analytics-details summary::after { transition: none; }
}

@media (max-width: 1180px) {
  .analytics-pulse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-kpi-card:nth-child(4) { border-left: 0; border-top: 1px solid var(--color-border); }
  .analytics-kpi-card:nth-child(5) { border-top: 1px solid var(--color-border); }
  .analytics-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .analytics-health-grid { grid-template-columns: 1fr; }
  .analytics-activity-main { grid-template-columns: 1fr; gap: 20px; }
}

.admin-empty-meta {
  margin-top: 12px !important;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.85;
}

.admin-next-step {
  background: rgba(17, 181, 174, 0.06);
  border: 1px solid rgba(17, 181, 174, 0.25);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 20px;
}

.admin-next-step h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-next-step ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-next-step li {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.admin-next-step code,
.admin-empty code {
  background: var(--color-surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Paginación ───────────────────────────────────────────── */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.admin-pagination:empty { display: none; }

.admin-pagination-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.admin-pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-pagination-page {
  font-size: 0.8rem;
  color: var(--color-text);
  min-width: 120px;
  text-align: center;
}

/* ── Responsive ───────────────────────────────────────────── */
/* ── Usuarios: resumen y ficha 360 ─────────────────────────── */
.admin-user-snapshot {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 12px;
}

.admin-user-snapshot-item {
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--color-border);
}

.admin-user-snapshot-item:last-child { border-right: 0; }
.admin-user-snapshot-item span,
.admin-user-snapshot-item small { display: block; }
.admin-user-snapshot-item span {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-user-snapshot-item strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--color-text);
  font-size: 1.65rem;
  line-height: 1;
}
.admin-user-snapshot-item small {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.admin-user-snapshot-item.is-route-stop::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border: 3px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-surface));
  border-radius: 50%;
  box-sizing: content-box;
}
.admin-user-snapshot-item.is-alert strong { color: var(--color-warning); }

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
}
.admin-user-avatar {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  color: #071b29;
  background: var(--color-primary);
  border-radius: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-name { font-weight: 750; color: var(--color-text); }
.admin-user-email { margin-top: 2px; color: var(--color-text-muted); font-size: 0.75rem; }
.admin-user-candidate { margin-top: 3px; color: var(--color-text-muted); font-size: 0.72rem; }
.admin-user-access { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-user-row { cursor: pointer; }
.admin-user-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.admin-drawer-user { max-width: 760px; }
.admin-user-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -2px -2px 20px;
  padding: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)), var(--color-surface) 68%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: 14px;
}
.admin-user-hero .admin-user-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; font-size: 1.1rem; }
.admin-user-hero-copy { min-width: 0; flex: 1; }
.admin-user-hero-copy h4 { overflow: hidden; margin: 0 0 3px; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-hero-copy p { overflow: hidden; color: var(--color-text-muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-hero-actions { display: flex; gap: 8px; }

.admin-user-route-wrap {
  margin-bottom: 20px;
  padding: 16px 18px 15px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.admin-user-route-label { margin-bottom: 13px; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.admin-user-route { display: grid; grid-template-columns: repeat(4, 1fr); }
.admin-user-route-step { position: relative; padding-top: 22px; color: var(--color-text-muted); font-size: 0.72rem; text-align: center; }
.admin-user-route-step::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: 50%;
  transform: translateX(-50%);
}
.admin-user-route-step::after { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--color-border); }
.admin-user-route-step:first-child::after { display: none; }
.admin-user-route-step.is-done { color: var(--color-text); font-weight: 700; }
.admin-user-route-step.is-done::before { background: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); }
.admin-user-route-step.is-done::after { background: var(--color-primary); }

.admin-user-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.admin-user-kpi { padding: 13px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; }
.admin-user-kpi span { display: block; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.admin-user-kpi strong { display: block; margin-top: 5px; color: var(--color-text); font-size: 1.15rem; }
.admin-user-kpi small { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 0.7rem; }

.admin-user-section { margin-bottom: 22px; }
.admin-user-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--color-text); font-size: 0.78rem; font-weight: 800; }
.admin-user-section-title i { color: var(--color-primary); }
.admin-user-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 10px; }
.admin-user-info { min-width: 0; padding: 11px 13px; background: var(--color-surface); }
.admin-user-info span { display: block; margin-bottom: 3px; color: var(--color-text-muted); font-size: 0.68rem; }
.admin-user-info strong { display: block; overflow: hidden; color: var(--color-text); font-size: 0.82rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.admin-user-timeline { position: relative; margin-left: 5px; padding-left: 22px; }
.admin-user-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px; background: var(--color-border); }
.admin-user-event { position: relative; padding: 0 0 15px; }
.admin-user-event:last-child { padding-bottom: 0; }
.admin-user-event::before { content: ""; position: absolute; top: 4px; left: -22px; width: 9px; height: 9px; background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: 50%; }
.admin-user-event strong { display: block; color: var(--color-text); font-size: 0.8rem; }
.admin-user-event p { margin-top: 2px; color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.4; }
.admin-user-empty { padding: 16px; color: var(--color-text-muted); background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: 10px; font-size: 0.78rem; text-align: center; }
.admin-user-loading { display: grid; min-height: 280px; place-items: center; color: var(--color-text-muted); text-align: center; }
.admin-user-loading .admin-spinner { margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .admin-drawer { animation: none; }
}

@media (max-width: 1080px) {
  .campaign-routes { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .admin-sidebar {
    display: none;
  }

  .admin-main {
    padding: 16px;
  }

  .admin-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-toolbar { width: 100%; flex-wrap: wrap; }
  .analytics-period-control { flex: 1; }
  .analytics-period-control .admin-select { flex: 1; }
  .analytics-compare-control { min-height: 42px; }
  .analytics-context-row { margin-top: -2px; }
  .analytics-context-row > span:nth-child(2) { width: 100%; margin-left: 0; }
  .analytics-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .analytics-pulse-grid { grid-template-columns: 1fr; }
  .analytics-kpi-card,
  .analytics-kpi-card:nth-child(4),
  .analytics-kpi-card:nth-child(5) { border-top: 1px solid var(--color-border); border-left: 0; }
  .analytics-kpi-card:first-child { border-top: 0; }
  .analytics-card { padding: 16px; }
  .analytics-card-header { flex-direction: column; gap: 12px; }
  .analytics-segmented { width: 100%; }
  .analytics-segmented button { flex: 1; min-height: 44px; }
  .analytics-activity-main { padding: 16px; }
  .analytics-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-mini-stats > div:nth-child(3) { border-top: 1px solid var(--color-border); border-left: 0; }
  .analytics-mini-stats > div:nth-child(4) { border-top: 1px solid var(--color-border); }
  .analytics-status-list,
  .analytics-health-summary { grid-template-columns: 1fr; }
  .analytics-details summary small { display: none; }
  .analytics-details summary { min-height: 54px; padding: 0 14px; }
  .analytics-details-content { padding-right: 12px; padding-left: 12px; }

  .campaign-control { padding: 18px 14px 16px 18px; }
  .campaign-control-heading { flex-direction: column; gap: 12px; }
  .campaign-decision-strip { grid-template-columns: repeat(2, 1fr); }
  .campaign-decision-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-border); }
  .campaign-decision-item:nth-child(4) { border-top: 1px solid var(--color-border); }
  .campaign-decision-item { padding: 14px 12px; }
  .campaign-decision-item strong { font-size: 1.45rem; }
  .campaign-route-card { padding: 15px 11px; }
  .campaign-route-badge { display: none; }
  .campaign-route-header { grid-template-columns: auto 1fr; }
  .campaign-route-stage strong { font-size: 1rem; }
  .campaign-route-stage small { font-size: 0.56rem; }
  .campaign-route-footer { align-items: flex-start; flex-direction: column; }
  .campaign-source-list { overflow: visible; flex-wrap: wrap; justify-content: flex-start; }

  .admin-header-user { display: none; }

  .btn-admin-label { display: none; }

  .admin-drawer { max-width: 100%; }
  .admin-drawer-wide { max-width: 100%; }
  .admin-drawer-user { max-width: 100%; }

  .admin-user-snapshot { grid-template-columns: repeat(2, 1fr); }
  .admin-user-snapshot-item { border-bottom: 1px solid var(--color-border); }
  .admin-user-snapshot-item:nth-child(2n) { border-right: 0; }
  .admin-user-snapshot-item:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .admin-user-kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-user-hero { align-items: flex-start; flex-wrap: wrap; }
  .admin-user-hero-actions { width: 100%; }
  .admin-user-hero-actions .btn-admin { flex: 1; }
  .admin-user-info-grid { grid-template-columns: 1fr; }

  .admin-detail-label { flex-basis: 100px; }

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

/* ══════════════════════════════════════════════════════════════
 * Rediseño "formato Gestión" (fase 1: paleta, shell, tablas, badges)
 * Solo cambia la apariencia: mismas clases, ids y hooks que usa admin.js.
 * Paleta y tokens alineados con gestion.opobus.es (azul #0f2d52, turquesa #11b5ae).
 * Para revertir: borrar este bloque.
 * ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "OpoBus Heading";
  src: url("assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}

/* Tema claro (por defecto en "light" y en "system" con sistema claro) */
:root,
:root[data-admin-theme="system"],
:root[data-admin-theme="light"] {
  --color-bg: #f3f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f4;
  --color-border: #dce3ea;
  --color-text: #0f2d52;
  --color-text-muted: #4a5b74;
  --color-primary: #0a7a76;
  --color-primary-hover: #086560;
  --color-accent: #11b5ae;
  --color-danger: #b91c1c;
  --color-warning: #92400e;
  --color-success: #166534;
  --gx-primary-soft: #e3f4f3;
  --gx-ok-soft: #dcf5e4;
  --gx-warn-soft: #fdf0c9;
  --gx-bad-soft: #fde4e4;
  --gx-info-soft: #e4ecf6;
  --gx-info: #0f2d52;
  --gx-nav-active: #0a7a76;
  --gx-btn-primary: #0f2d52;
  --gx-btn-primary-hover: #1a4373;
  --gx-btn-primary-ink: #ffffff;
  --sidebar-width: 248px;
  --header-height: 64px;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(15 45 82 / 0.05), 0 4px 14px rgb(15 45 82 / 0.05);
}

/* Tema oscuro (explícito, o "system" con sistema oscuro) */
:root[data-admin-theme="dark"] {
  --color-bg: #071a30;
  --color-surface: #0c2440;
  --color-surface-2: #123058;
  --color-border: #1d3b63;
  --color-text: #e8eff8;
  --color-text-muted: #9db0c8;
  --color-primary: #11b5ae;
  --color-primary-hover: #2cc9c2;
  --color-accent: #2cc9c2;
  --color-danger: #fca5a5;
  --color-warning: #fcd34d;
  --color-success: #6ee7a0;
  --gx-primary-soft: #0e3550;
  --gx-ok-soft: #12301f;
  --gx-warn-soft: #382a0d;
  --gx-bad-soft: #3b1618;
  --gx-info-soft: #12315a;
  --gx-info: #a9c4ff;
  --gx-nav-active: #5fd6d0;
  --gx-btn-primary: #11b5ae;
  --gx-btn-primary-hover: #2cc9c2;
  --gx-btn-primary-ink: #04203a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
@media (prefers-color-scheme: dark) {
  :root[data-admin-theme="system"] {
    --color-bg: #071a30;
    --color-surface: #0c2440;
    --color-surface-2: #123058;
    --color-border: #1d3b63;
    --color-text: #e8eff8;
    --color-text-muted: #9db0c8;
    --color-primary: #11b5ae;
    --color-primary-hover: #2cc9c2;
    --color-accent: #2cc9c2;
    --color-danger: #fca5a5;
    --color-warning: #fcd34d;
    --color-success: #6ee7a0;
    --gx-primary-soft: #0e3550;
    --gx-ok-soft: #12301f;
    --gx-warn-soft: #382a0d;
    --gx-bad-soft: #3b1618;
    --gx-info-soft: #12315a;
    --gx-info: #a9c4ff;
    --gx-nav-active: #5fd6d0;
    --gx-btn-primary: #11b5ae;
    --gx-btn-primary-hover: #2cc9c2;
    --gx-btn-primary-ink: #04203a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}
/* "system" con sistema claro: los valores de :root (claro) ya aplican. */

html, body { font-variant-numeric: normal; }
a { color: var(--color-primary); }

/* Cabecera: alineada con la barra superior de Gestión */
.admin-header { padding: 0 24px; box-shadow: none; }
.admin-header-logo .admin-badge {
  background: var(--gx-primary-soft);
  color: var(--gx-nav-active);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.admin-role-pill { background: var(--gx-primary-soft); border-color: transparent; color: var(--gx-nav-active); }

/* Barra lateral: ítems con esquinas redondeadas y fondo suave (sin barra lateral de acento) */
.admin-sidebar { background: var(--color-surface); }
.admin-nav { padding: 16px 12px; }
.admin-nav-section {
  padding: 0 12px;
  margin: 18px 0 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.admin-nav-section:first-child { margin-top: 0; }
.admin-nav-item {
  height: 40px;
  padding: 0 12px;
  gap: 12px;
  border-radius: 8px;
  font-weight: 500;
}
.admin-nav-item.active { background: var(--gx-primary-soft); color: var(--gx-nav-active); font-weight: 500; }
.admin-nav-item.active::before { display: none; }
.admin-nav-item i { width: 18px; }
.admin-sidebar-footer { padding: 12px; gap: 2px; }
.admin-sidebar-footer a { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 0.8125rem; }
.admin-sidebar-footer a:hover { background: var(--color-surface-2); text-decoration: none; }

/* Contenido: más aire y ancho máximo cómodo */
.admin-main { padding: 28px 32px 48px; }
.admin-page-header h2 {
  font-family: "OpoBus Heading", Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Tarjetas de métricas */
.admin-metric-card, .admin-user-kpi {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.admin-metric-card .metric-label { text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 500; }
.admin-metric-card .metric-value {
  font-family: "OpoBus Heading", Inter, system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Botones */
.btn-admin { height: 36px; padding: 0 14px; font-weight: 500; transition: background 0.15s, border-color 0.15s; }
.btn-admin-sm { height: 30px; padding: 0 10px; }
.btn-admin-primary { background: var(--gx-btn-primary); color: var(--gx-btn-primary-ink); }
.btn-admin-primary:hover { background: var(--gx-btn-primary-hover); }
.btn-admin-secondary { background: var(--color-surface); }
.btn-admin-secondary:hover { background: var(--color-surface-2); }
.btn-admin-danger { background: var(--gx-bad-soft); color: var(--color-danger); }
.btn-admin-warning { background: var(--gx-warn-soft); color: var(--color-warning); }

/* Tablas: cabecera sombreada, importes tabulares, tarjeta con sombra */
.admin-table-wrap { border-radius: 12px; box-shadow: var(--shadow); }
.admin-table thead th {
  background: var(--color-surface-2);
  padding: 10px 16px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.admin-table tbody td { padding: 12px 16px; font-variant-numeric: tabular-nums; }

/* Etiquetas de estado: punto + color suave (el color no es la única señal) */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success { background: var(--gx-ok-soft); color: var(--color-success); }
.badge-warning { background: var(--gx-warn-soft); color: var(--color-warning); }
.badge-danger  { background: var(--gx-bad-soft); color: var(--color-danger); }
.badge-info    { background: var(--gx-info-soft); color: var(--gx-info); }

/* Campos y filtros */
.admin-main input[type="text"], .admin-main input[type="search"], .admin-main input[type="email"],
.admin-main select { border-radius: 8px; }

@media (max-width: 860px) {
  .admin-main { padding: 20px 16px 40px; }
}

/* El logo es un PNG opaco con fondo blanco: en oscuro se presenta como chip redondeado. */
:root[data-admin-theme="dark"] .admin-header-logo img { border-radius: 6px; }
@media (prefers-color-scheme: dark) {
  :root[data-admin-theme="system"] .admin-header-logo img { border-radius: 6px; }
}

/* Enlace externo a Gestión dentro de la navegación (se comporta como un ítem más). */
a.admin-nav-item { text-decoration: none; }
a.admin-nav-item[hidden] { display: none; }
.admin-nav-item .nav-external { margin-left: auto; width: auto; font-size: 0.7rem; opacity: 0.6; }

/* Resumen: tarjeta "Pendiente de ti" */
.admin-todo-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 24px; }
.admin-todo-card[hidden] { display: none; }
.admin-todo-card > header { padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.admin-todo-card h3 { font-size: 0.875rem; font-weight: 600; }
.admin-todo-list { list-style: none; margin: 0; padding: 6px; }
.admin-todo-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; }
.admin-todo-item:hover { background: var(--color-surface-2); }
.admin-todo-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; }
.admin-todo-icon.is-bad { background: var(--gx-bad-soft); color: var(--color-danger); }
.admin-todo-icon.is-warn { background: var(--gx-warn-soft); color: var(--color-warning); }
.admin-todo-icon.is-info { background: var(--gx-info-soft); color: var(--gx-info); }
.admin-todo-body { display: flex; flex-direction: column; min-width: 0; }
.admin-todo-body b { font-weight: 600; }
.admin-todo-body span { color: var(--color-text-muted); font-size: 0.8125rem; }
.admin-todo-go { margin-left: auto; white-space: nowrap; font-size: 0.8125rem; font-weight: 500; color: var(--color-primary); }

/* Analítica: mismas tarjetas que el resto del panel (radio 12 + sombra suave, sin degradados de fondo). */
.analytics-card, .analytics-pulse, .campaign-route-card { border-radius: 12px; box-shadow: var(--shadow); }

/* Navegación en pantallas estrechas (antes la barra lateral desaparecía sin alternativa). */
.admin-menu-btn { display: none; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--color-text-muted); font-size: 1.1rem; }
.admin-menu-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.admin-sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .admin-menu-btn { display: inline-flex; }
  .admin-header { padding: 0 12px; gap: 8px; }
  .admin-sidebar {
    display: flex;
    position: fixed;
    z-index: 90;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: min(280px, 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
    box-shadow: var(--shadow);
  }
  .admin-sidebar.is-open { transform: none; visibility: visible; transition: transform 0.2s ease-out; }
  .admin-sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: var(--header-height) 0 0 0; z-index: 80; background: rgb(7 26 48 / 0.5); }
  .admin-header-user { display: none; }
  .btn-admin-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .admin-sidebar { transition: none; } }

/* ── Responsive: ajustes por tamaño de pantalla ─────────────────────────── */
/* "No disponible" no debe heredar el tamaño grande de las cifras. */
.admin-metric-card .metric-value.metric-na { font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); }

/* Pantallas muy anchas: el contenido deja de estirarse y se centra. */
.admin-view { max-width: 1480px; margin-inline: auto; }

/* Tablas: nunca ensanchan la página; el scroll queda dentro de la tarjeta. */
.admin-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.admin-main { min-width: 0; }

/* Tablet y portátil pequeño */
@media (max-width: 1080px) {
  .campaign-decision-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-decision-item:nth-child(3), .campaign-decision-item:nth-child(4) { border-top: 1px solid var(--color-border); }
  .campaign-decision-item:nth-child(3) { border-left: 0; }
  .admin-user-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .admin-main { padding: 20px 16px 40px; }
  .admin-page-header-row { flex-wrap: wrap; gap: 12px; }
  .admin-metrics-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .admin-user-route { grid-template-columns: repeat(2, 1fr); }
  .admin-user-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Filtros: ocupan el ancho y se reparten en filas */
  .admin-main .admin-select, .admin-main input[type="search"] { min-width: 0; }
}
/* Táctil: objetivos de pulsación cómodos */
@media (max-width: 900px) and (pointer: coarse) {
  .btn-admin { min-height: 40px; }
  .btn-admin-sm { min-height: 36px; }
  .admin-nav-item { height: 44px; }
}
/* Móvil: menos relleno y tarjetas de métricas de dos en dos */
@media (max-width: 480px) {
  .admin-main { padding: 16px 12px 32px; }
  .admin-header-logo img { height: 24px; }
  .admin-header-logo .admin-badge { display: none; }
  .admin-metric-card { padding: 14px; }
  .admin-metric-card .metric-value { font-size: 1.5rem; }
  .admin-todo-item { padding: 10px; }
  .admin-todo-go { display: none; }
}
.admin-metric-card { min-width: 0; }
.admin-metric-card .metric-sub, .admin-metric-card .metric-label { overflow-wrap: anywhere; }

/* ── Formato maqueta: navegación con contadores, buscador de cabecera y Resumen en dos columnas ── */
.admin-nav-count { margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--gx-bad-soft); color: var(--color-danger); font-size: 0.6875rem; font-weight: 600; line-height: 18px; text-align: center; }
.admin-nav-count[hidden] { display: none; }

.admin-global-search { flex: 1; max-width: 420px; min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-text-muted); }
.admin-global-search:focus-within { border-color: var(--color-accent); }
.admin-global-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; }
.admin-global-search input::-webkit-search-cancel-button { display: none; }
.admin-global-search kbd { font: inherit; font-size: 0.6875rem; padding: 0 5px; border: 1px solid var(--color-border); border-radius: 4px; }
@media (max-width: 900px) {
  .admin-global-search { max-width: none; }
  .admin-global-search kbd { display: none; }
}
@media (max-width: 560px) {
  .admin-global-search { flex-basis: 0; }
  .admin-global-search input::placeholder { color: transparent; }
  .admin-header-spacer { display: none; }
}

.admin-dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.admin-dash-main, .admin-dash-side { display: grid; gap: 4px; min-width: 0; }
.admin-dash-side { gap: 20px; }
.admin-dash-main .admin-metrics-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 1080px) { .admin-dash-grid { grid-template-columns: 1fr; } }
.admin-dash-side .admin-quick-links { margin: 0; }
.admin-dash-side .admin-quick-links-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.admin-side-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow); }
.admin-side-card > header { padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.admin-side-card h3 { font-size: 0.875rem; font-weight: 600; }
.admin-bars { display: grid; gap: 12px; padding: 16px 20px; }
.admin-bars-empty { color: var(--color-text-muted); font-size: 0.8125rem; }
.admin-bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.8125rem; }
.admin-bar-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.admin-bar-track { height: 8px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.admin-bar-track i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
.admin-bar-track i.is-warn { background: var(--color-warning); }
.admin-bar-track i.is-muted { background: var(--color-text-muted); }
.admin-bar-track i.is-warn { background: #d97706; }
:root[data-admin-theme="dark"] .admin-bar-track i.is-warn { background: #ffb400; }
@media (prefers-color-scheme: dark) { :root[data-admin-theme="system"] .admin-bar-track i.is-warn { background: #ffb400; } }

.campaign-decision-strip[hidden] { display: none; }

/* Beta: caducidad de la base beta */
.admin-expiry-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 20px; }
.admin-expiry-card[hidden] { display: none; }
.admin-expiry-card > header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.admin-expiry-card h3 { font-size: 0.95rem; font-weight: 600; }
.admin-expiry-card header p { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: 2px; }
.admin-expiry-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-expiry-chip { background: var(--color-surface-2); border-radius: 10px; padding: 10px 14px; display: grid; gap: 2px; }
.admin-expiry-chip b { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-expiry-chip span { color: var(--color-text-muted); font-size: 0.78rem; }
.admin-expiry-chip.is-warn { background: var(--gx-warn-soft); }
.admin-expiry-chip.is-warn b { color: var(--color-warning); }
.admin-expiry-chip.is-bad { background: var(--gx-bad-soft); }
.admin-expiry-chip.is-bad b { color: var(--color-danger); }
.admin-expiry-chip.is-ok { background: var(--gx-ok-soft); }
.admin-expiry-chip.is-ok b { color: var(--color-success); }
.admin-expiry-card .admin-user-name,
.admin-expiry-card .admin-user-email { display: block; }
.admin-expiry-card .admin-user-email { color: var(--color-text-muted); font-size: 0.78rem; }

/* Actividad del equipo */
.admin-activity-change { display: block; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.admin-activity-change b { font-weight: 600; color: var(--color-text-muted); margin-right: 4px; }
@media (max-width: 680px) { #view-actividad .admin-table th:nth-child(4), #view-actividad .admin-table td:nth-child(4) { display: none; } }
#view-actividad .admin-user-email { display: block; color: var(--color-text-muted); font-size: 0.78rem; }

/* Cuentas de prueba y reportes del equipo */
.admin-test-pill, .admin-team-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; line-height: 18px; vertical-align: middle; }
.admin-test-pill { background: var(--gx-warn-soft); color: var(--color-warning); }
.admin-team-pill { background: var(--gx-info-soft); color: var(--gx-info); }

/* Señales por pregunta */
.admin-signal-pill { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; line-height: 20px; white-space: nowrap; }
.admin-signal-pill.is-bad { background: var(--gx-bad-soft); color: var(--color-danger); }
.admin-q-signals { background: var(--color-surface-2); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.admin-q-signals-note { flex-basis: 100%; color: var(--color-text-muted); font-size: 0.72rem; }

/* Acciones masivas */
.admin-bulk-col { width: 36px; padding-right: 0 !important; }
.admin-bulk-check, [data-bulk-all] { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }
.admin-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 12px; background: var(--gx-primary-soft); border: 1px solid var(--color-border); border-radius: 10px; font-size: 0.875rem; }
.admin-bulk-bar[hidden] { display: none; }
.admin-bulk-bar > span { margin-right: 4px; }

/* Suscripciones */
.admin-empty-state { display: flex; gap: 14px; align-items: center; padding: 22px 24px; margin-bottom: 18px; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 12px; color: var(--color-text-muted); }
.admin-empty-state[hidden] { display: none; }
.admin-empty-state i { font-size: 1.4rem; color: var(--color-accent); }
.admin-empty-state p { margin: 0; }
.admin-subsection-title { font-size: 0.875rem; font-weight: 600; margin: 22px 0 10px; }
.admin-subsection-title[hidden], #subs-table-wrap[hidden], #subs-payments-wrap[hidden] { display: none; }

/* Analítica · Captación */
.admin-acquisition { margin-bottom: 20px; }
.admin-acq-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 4px; }
@media (max-width: 900px) { .admin-acq-grid { grid-template-columns: 1fr; } }
.admin-acq-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 6px; }
.admin-acq-bars i { flex: 1; min-width: 2px; background: var(--color-accent); border-radius: 3px 3px 0 0; opacity: 0.9; }
.admin-acq-bars i.is-zero { background: var(--color-border); opacity: 1; }
.admin-acq-axis { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 0.7rem; margin-top: 6px; }

/* Analítica · Alumnos */
.admin-students { margin-bottom: 20px; }
.admin-heat { display: inline-block; min-width: 46px; text-align: center; padding: 1px 8px; border-radius: 6px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Analítica · Calidad del banco */
.admin-content-quality { margin-bottom: 20px; }
.admin-topic-bars { display: grid; gap: 10px; padding: 4px 0 8px; }
.admin-topic-row { grid-template-columns: 170px minmax(0, 1fr) auto; }
.admin-topic-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .admin-topic-row { grid-template-columns: 110px minmax(0, 1fr) auto; } }

/* ── Analítica en pestañas (como la muestra aprobada) ── */
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin: 4px 0 18px; overflow-x: auto; overflow-y: hidden; }
.an-tab { border: 0; background: none; padding: 10px 16px; color: var(--color-text-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.an-tab:hover { color: var(--color-text); }
.an-tab.is-active { color: var(--gx-nav-active); border-color: var(--color-accent); }
.an-tabpanel { display: none; }
.an-tabpanel.is-active { display: block; }
.an-tabpanel > * + * { margin-top: 20px; }
.admin-an-attention { margin-bottom: 18px; }
.admin-an-attention .analytics-attention { margin: 0; }
.admin-income-beta p { margin: 0 0 8px; }

/* ── Tarjetas antiguas de la analítica con el mismo lenguaje que el resto del panel ── */
.campaign-control { background: var(--color-surface); border-radius: 12px; padding: 20px; margin-bottom: 0; }
.campaign-control::before { display: none; }
.analytics-pulse-grid { border-top-width: 1px; border-top-color: var(--color-border); }
.campaign-route-card, .campaign-decision-strip { border-radius: 10px; }
.analytics-kicker, .campaign-control-kicker { letter-spacing: 0.04em; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); }
.analytics-card h3, .campaign-control h3, .analytics-pulse h3 { font-family: "OpoBus Heading", Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.analytics-card-header h3 { font-size: 1rem; }

/* ── Cabecera y barra lateral como la muestra: la marca encabeza la columna y el usuario va abajo ── */
@media (min-width: 901px) {
  .admin-header { padding-left: 0; }
  .admin-header-logo { box-sizing: border-box; width: var(--sidebar-width); height: 100%; padding: 0 20px; border-right: 1px solid var(--color-border); margin-right: 8px; }
}
.admin-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--color-border); }
.admin-sidebar-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent); color: #04203a; font-weight: 700; font-size: 0.8rem; }
.admin-sidebar-user-text { min-width: 0; display: grid; gap: 2px; }
.admin-sidebar-email { font-size: 0.8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.admin-sidebar-user .admin-role-pill { justify-self: start; }

/* ── Visitas ── */
.vis-channels { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.vis-channel { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.vis-channel.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #04203a; font-weight: 600; }
.vis-bars i { position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.vis-bars i b { display: block; background: var(--color-text-muted); opacity: 0.55; width: 100%; }
.vis-legend { display: inline-flex; align-items: center; gap: 6px; }
.vis-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--color-accent); }
.vis-dot.is-bot { background: var(--color-text-muted); opacity: 0.55; margin-left: 8px; }

/* ── Retoques finales (bloque 8): objetivos táctiles de al menos 40 px en tablet y móvil ── */
@media (max-width: 900px) {
  .admin-header .btn-admin { min-width: 40px; min-height: 40px; justify-content: center; }
  .admin-header-logo { min-height: 40px; display: inline-flex; align-items: center; }
  .admin-menu-btn { min-width: 40px; min-height: 40px; }
}

/* Buscador global en móvil: queda como icono y se despliega a ancho completo al tocarlo (sin JavaScript). */
@media (max-width: 560px) {
  .admin-global-search { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; position: relative; justify-content: center; }
  .admin-global-search i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
  .admin-global-search input { position: absolute; inset: 0; width: 100%; padding: 0; opacity: 0; }
  .admin-global-search:focus-within { position: fixed; z-index: 95; left: 8px; right: 8px; top: calc(var(--header-height) + 6px); width: auto; height: 44px; padding: 0 12px; justify-content: flex-start; background: var(--color-surface); box-shadow: var(--shadow); }
  .admin-global-search:focus-within i { position: static; transform: none; }
  .admin-global-search:focus-within input { position: static; opacity: 1; padding: 0; }
  .admin-global-search:focus-within input::placeholder { color: var(--color-text-muted); }
}
@media (max-width: 900px) {
  .admin-header-actions .btn-admin { min-width: 40px; min-height: 40px; justify-content: center; }
}
@media (max-width: 900px) {
  .vis-channel { min-height: 36px; padding: 6px 14px; }
}

/* ── Accesibilidad (bloque 8) ── */
.admin-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.admin-input:focus-visible, .admin-textarea:focus-visible, .admin-select:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ══════════════════════════════════════════════════════════════
 * Paquete 1 · Marco por departamentos y Dirección (estilo de las maquetas aprobadas)
 * Solo apariencia y la portada nueva: mismas clases, ids y hooks que usa admin.js.
 * Para revertir: borrar este bloque y el archivo assets/fonts/Inter-Variable-latin.woff2.
 * ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cabecera de cada sección: tarjeta con franja de marca, como en las maquetas */
.admin-page-header {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 26px 22px 30px;
  margin-bottom: 20px;
}
.admin-page-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--color-accent), #ffb400);
}
.admin-page-header h2 { font-size: 1.625rem; font-weight: 800; }
.admin-page-header p { max-width: 62ch; }

/* Tarjetas de métricas: más aire y números protagonistas */
.admin-metric-card, .admin-user-kpi { border: 1px solid var(--color-border); border-radius: 14px; }
.admin-metric-card { padding: 16px 18px; }
.admin-metric-card .metric-value { font-weight: 800; }
.admin-section-subtitle {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Menú: sección activa más clara y títulos de departamento */
.admin-nav-section { color: var(--color-text-muted); }
.admin-nav-item.active { font-weight: 600; }

/* Dirección: saludo y datos del día */
.admin-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-nav-active);
  margin-bottom: 4px;
}
.admin-eyebrow:empty { display: none; }
.admin-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.admin-hero-stats[hidden] { display: none; }
.admin-hero-stat {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 96px;
}
.admin-hero-stat b {
  font-family: "OpoBus Heading", Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.admin-hero-stat span { font-size: 0.75rem; color: var(--color-text-muted); }

/* Dirección: tarjetas por área */
.admin-areas { margin-bottom: 18px; }
.admin-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.admin-area-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  min-height: 150px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.admin-area-card:hover, button.admin-area-card:hover { border-color: var(--color-accent); transform: translateY(-1px); text-decoration: none; }
.admin-area-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.admin-area-card.is-soon { cursor: default; border-style: dashed; box-shadow: none; opacity: 0.75; }
.admin-area-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.admin-area-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gx-primary-soft);
  color: var(--gx-nav-active);
}
.admin-area-state { font-size: 0.6875rem; font-weight: 600; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.admin-area-state.is-ok { background: var(--gx-ok-soft); color: var(--color-success); }
.admin-area-state.is-warn { background: var(--gx-warn-soft); color: var(--color-warning); }
.admin-area-state.is-muted { background: var(--color-surface-2); color: var(--color-text-muted); }
.admin-area-name { font-family: "OpoBus Heading", Inter, system-ui, sans-serif; font-weight: 700; font-size: 0.9375rem; }
.admin-area-value {
  font-family: "OpoBus Heading", Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.admin-area-unit { font-size: 0.75rem; color: var(--color-text-muted); }
.admin-area-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: auto; padding-top: 8px; }

/* Dirección: próximos hitos */
.admin-hitos { list-style: none; margin: 0; padding: 0; }
.admin-hito { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.admin-hito:first-child { border-top: 0; padding-top: 0; }
.admin-hito-when { font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.admin-hito-body { display: flex; flex-direction: column; font-size: 0.8125rem; }
.admin-hito-body b { font-weight: 600; }
.admin-hito-body span { color: var(--color-text-muted); }
.admin-hito.is-warn .admin-hito-when { color: var(--color-warning); }
.admin-hito.is-muted { opacity: 0.7; }

@media (max-width: 640px) {
  .admin-page-header { padding: 18px 18px 18px 22px; }
  .admin-areas-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .admin-area-card { min-height: 130px; padding: 14px; }
}

/* Plataforma: tarjetas de estado del sistema (solo lectura, sin interacción) */
.admin-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.admin-status-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  min-height: 150px;
}
[id^="view-marketing"] .admin-table .admin-area-state.is-info,
[id^="view-marketing"] .mkt-card .admin-area-state.is-info { background: var(--gx-info-soft); color: var(--gx-info); }
[id^="view-marketing"] .admin-table .admin-area-state.is-bad,
[id^="view-marketing"] .mkt-card .admin-area-state.is-bad { background: var(--gx-bad-soft); color: var(--color-danger); }
.mkt-small { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.mkt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.mkt-step { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.mkt-step b { font-size: 0.8125rem; }
.mkt-step span { font-size: 0.75rem; color: var(--color-text-muted); }
.mkt-step-n { font-family: "Montserrat", "OpoBus Heading", system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--color-text-muted); }
.mkt-step.is-on .mkt-step-n { color: var(--color-accent); }
.mkt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mkt-item { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 16px; }
.mkt-item > i { color: var(--color-accent); width: 18px; text-align: center; }
.mkt-item-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mkt-item-body b { font-size: 0.875rem; }
.mkt-item-body span { font-size: 0.8125rem; color: var(--color-text-muted); }
.mkt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mkt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.mkt-card-sub { font-size: 0.8125rem; color: var(--color-text-muted); }
.mkt-card-id { font-size: 0.6875rem; color: var(--color-text-muted); word-break: break-all; }
.mkt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt-chip { font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); }
.mkt-chip.is-ok { background: var(--gx-ok-soft); color: var(--color-success); }
.mkt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.mkt-tab { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.mkt-tab.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.mkt-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mkt-cal-h { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--color-text-muted); padding: 4px 0; }
.mkt-cal-d { min-height: 84px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-cal-d.is-empty { background: transparent; border-color: transparent; }
.mkt-cal-d.is-today { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.mkt-cal-d b { font-size: 0.75rem; color: var(--color-text-muted); }
.mkt-ev { font-size: 0.6875rem; line-height: 1.25; padding: 3px 6px; border-radius: 6px; background: var(--gx-info-soft); color: var(--gx-info); overflow: hidden; text-overflow: ellipsis; }
.mkt-ev.is-ok { background: var(--gx-ok-soft); color: var(--color-success); }
@media (max-width: 720px) { .mkt-cal-d { min-height: 60px; padding: 4px; } .mkt-ev { font-size: 0.625rem; } }
.admin-status-card .admin-area-state.is-bad { background: var(--gx-bad-soft); color: var(--color-danger); }
.admin-status-card .admin-area-state.is-info,
#platform-flags .admin-area-state.is-info { background: var(--gx-info-soft); color: var(--gx-info); }
#platform-flags .admin-area-state.is-ok { background: var(--gx-ok-soft); color: var(--color-success); }
#platform-flags .admin-area-state.is-bad { background: var(--gx-bad-soft); color: var(--color-danger); }
#platform-flags .admin-area-state.is-warn { background: var(--gx-warn-soft); color: var(--color-warning); }
#platform-flags .admin-area-state.is-muted { background: var(--color-surface-2); color: var(--color-text-muted); }

/* Dirección: embudo de 7 días */
.admin-funnel { display: grid; gap: 10px; }
.admin-funnel-row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 0.8125rem; }
.admin-funnel-label { color: var(--color-text-muted); line-height: 1.25; }
.admin-funnel-track { height: 12px; background: var(--color-surface-2); border-radius: 8px; overflow: hidden; }
.admin-funnel-track i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); }
.admin-funnel-track.is-empty { background: repeating-linear-gradient(45deg, var(--color-surface-2), var(--color-surface-2) 6px, var(--color-border) 6px, var(--color-border) 12px); }
.admin-funnel-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.admin-funnel-note { margin: 12px 0 0; font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Menú del departamento de Marketing ───────────────────── */
.admin-nav[hidden] { display: none; }
.admin-nav-dept { display: flex; align-items: center; gap: 10px; margin: 4px 12px 8px; padding: 10px 12px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 12px; }
.admin-nav-dept > i { color: var(--color-accent); }
.admin-nav-dept b { display: block; font-size: 0.875rem; }
.admin-nav-dept span { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.admin-nav-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); flex-shrink: 0; }
.admin-nav-dot.is-ok { background: var(--color-success); }
.admin-nav-dot.is-warn { background: var(--color-warning); }
.admin-nav-back { color: var(--color-text-muted); }
.mkt-soon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-surface-2); border: 1px dashed var(--color-border); border-radius: 12px; padding: 12px 16px; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 8px; }
.mkt-utm { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.mkt-utm label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; font-weight: 600; }
.mkt-utm input, .mkt-utm select, .mkt-utm-out input { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); min-width: 0; }
.mkt-utm-out { display: flex; gap: 8px; align-items: center; }
.mkt-utm-out input { flex: 1; }

/* ── Marketing: tarjetas editables y formulario ───────────── */
.mkt-item-card { gap: 6px; }
.mkt-field-line { display: flex; flex-direction: column; gap: 1px; font-size: 0.8125rem; }
.mkt-field-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.mkt-field-value { white-space: pre-line; overflow-wrap: anywhere; }
.mkt-progress { width: 100%; height: 6px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.mkt-progress i { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.mkt-item-card .btn-admin { margin-top: 4px; }
.mkt-form { display: flex; flex-direction: column; gap: 12px; }
.mkt-form-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; font-weight: 600; }
.mkt-form-field input, .mkt-form-field select, .mkt-form-field textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); min-width: 0; width: 100%; box-sizing: border-box; }
.mkt-form-field textarea { resize: vertical; }

/* ── Marketing: cuentas, conversaciones y acciones ─────────── */
.mkt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mkt-actions .btn-admin { text-decoration: none; }
.mkt-account-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.mkt-account-head > i { font-size: 1.25rem; color: var(--color-accent); width: 24px; text-align: center; }
.mkt-account-name { font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mkt-account-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 4px 0; }
.mkt-account-metrics > div { background: var(--color-surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.mkt-account-metrics b { font-size: 1.0625rem; }
.mkt-account-metrics span { font-size: 0.6875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mkt-detected { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: var(--gx-info-soft); color: var(--gx-info); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.875rem; }
.mkt-detected[hidden] { display: none; }
.mkt-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mkt-link-row .btn-admin { text-decoration: none; }
[id^="view-marketing"] .mkt-card .admin-area-state.is-warn { background: var(--gx-warn-soft); color: var(--color-warning); }
.mkt-item-card .mkt-card-sub, .mkt-item-card .mkt-field-value { width: 100%; }
#mkt-accounts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mkt-account-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); box-sizing: border-box; }
.mkt-account-metrics > div { min-width: 0; padding: 8px; }
.mkt-account-metrics b { overflow-wrap: anywhere; }
.mkt-account-metrics span { font-size: 0.625rem; letter-spacing: 0.03em; }

/* ── Finanzas ─────────────────────────────────────────────── */
#fin-months tr.is-current td { background: var(--color-surface-2); font-weight: 600; }
#fin-months tr.is-total td { border-top: 2px solid var(--color-border); }

/* ── Soporte: bandeja de dos paneles, gestión y métricas ──── */
.support-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.support-kpis .admin-metric-card { padding: 10px 14px; }
.support-kpis .admin-metric-card > span { display: block; }
.support-kpis .metric-label { margin-bottom: 4px; }
.support-kpis .metric-value { font-size: 1.4rem; margin-bottom: 2px; white-space: nowrap; }
.support-tabs-bar { justify-content: space-between; align-items: center; }
.support-shortcuts-hint { margin: 0; }
.support-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(17, 181, 174, 0.08);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
}
.support-bulk[hidden] { display: none; }
.support-inbox {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.support-list-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.support-list-head { padding: 8px 12px; border-bottom: 1px solid var(--color-border); display: flex; }
.support-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 340px); min-height: 220px; overflow-y: auto; }
.support-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0 4px 0 10px;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
}
.support-item:last-child { border-bottom: 0; }
.support-item.is-overdue { border-left-color: var(--color-danger); }
.support-item.is-active { background: rgba(17, 181, 174, 0.1); }
.support-item:hover { background: var(--color-surface-2); }
.support-check { padding: 14px 4px 0 0; }
.support-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6px 10px 2px;
  border: 0;
  background: none;
  color: var(--color-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.support-item-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.72rem; }
.support-item-top strong { font-size: 0.78rem; }
.support-item-wait { margin-left: auto; color: var(--color-text-muted); }
.support-item.is-overdue .support-item-wait { color: var(--color-danger); font-weight: 700; }
.support-item-subject { font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--color-text-muted); }
.support-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: 0.7rem;
  color: var(--color-text);
}
.support-tag button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; line-height: 1; }
.support-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }
.support-pane {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 320px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}
.support-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 280px; color: var(--color-text-muted); text-align: center; }
.support-pane-empty i { font-size: 2rem; }
.support-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.support-pane-head h3 { flex: 1 1 100%; margin: 0 0 2px; font-size: 1rem; }
.support-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.support-assign-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.support-tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.support-tag-editor input { width: 150px; }
.support-template-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.support-template-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.support-template-item.is-off { opacity: 0.6; }
.support-template-item > div { flex: 1; min-width: 0; }
.support-template-item p { margin: 4px 0 0; font-size: 0.8rem; color: var(--color-text-muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.support-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.support-metric-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; }
.support-metric-card h4 { margin: 0 0 10px; font-size: 0.85rem; }
.support-bars { display: grid; gap: 8px; }
.support-bar { display: grid; grid-template-columns: 130px 1fr 34px; gap: 8px; align-items: center; font-size: 0.78rem; }
.support-bar-track { height: 8px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.support-bar-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }
.support-bar-value { text-align: right; font-weight: 700; }
.support-days { display: flex; align-items: flex-end; gap: 2px; height: 84px; }
.support-days span { flex: 1; min-width: 2px; background: var(--color-primary); border-radius: 2px 2px 0 0; opacity: 0.85; }
.support-days span.is-zero { background: var(--color-border); opacity: 1; }
@media (max-width: 1099px) {
  .support-inbox { grid-template-columns: minmax(0, 1fr); }
  .support-pane { display: none; }
  .support-list { max-height: none; }
  .support-shortcuts-hint { display: none; }
}