/* qh-ui.css — Piezas comunes de interfaz de Queue Hub.
 *
 * Complementa a rib-core.css (sistema de diseño de la suite, que solo trae
 * tarjetas, badges, pills y la estructura). Aquí van botones, campos,
 * tablas y barras de filtros, construidos SOLO con los tokens de
 * rib-core.css (colores, radios, tipografías), para que toda la consola
 * se vea igual. Regla: en páginas nuevas o retocadas, usar estas clases
 * en vez de estilos en línea.
 */

/* ── BOTONES ─────────────────────────────────────────────────────
 * .qh-btn               secundario (borde)
 * .qh-btn.primary       acción principal de la pantalla (una por vista)
 * .qh-btn.danger        borrar / desactivar
 * .qh-btn.ghost         acción discreta (sin borde)
 * .qh-btn.sm            tamaño compacto (filas de tabla)
 */
.qh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.qh-btn:hover { background: var(--bg-surface-2); border-color: var(--border-active); }
.qh-btn:active { transform: scale(0.98); }
.qh-btn:disabled, .qh-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.qh-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.qh-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.qh-btn.danger { color: var(--color-negative); border-color: var(--border-strong); }
.qh-btn.danger:hover { background: var(--dim-negative); border-color: var(--color-negative); }
.qh-btn.danger.solid { background: var(--color-negative); border-color: var(--color-negative); color: #fff; }

.qh-btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.qh-btn.ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.qh-btn.sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); }

/* ── CAMPOS DE FORMULARIO ──────────────────────────────────────── */
.qh-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qh-field > label, .qh-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.qh-field .qh-help { font-size: var(--text-xs); color: var(--text-muted); }
.qh-field .qh-error { font-size: var(--text-xs); color: var(--color-negative); }

.qh-input, .qh-select, .qh-textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.qh-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.qh-input:hover, .qh-select:hover, .qh-textarea:hover { border-color: var(--border-active); }
.qh-input:focus, .qh-select:focus, .qh-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.qh-input:disabled, .qh-select:disabled, .qh-textarea:disabled { background: var(--bg-surface-2); color: var(--text-muted); }
.qh-input[type="color"] { padding: 3px; width: 48px; }

/* Rejilla de formulario: columnas que bajan a una en pantallas estrechas. */
.qh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ── BARRA DE HERRAMIENTAS / FILTROS ──────────────────────────── */
.qh-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qh-toolbar .qh-grow { flex: 1; min-width: 200px; }

/* ── TABLA ─────────────────────────────────────────────────────── */
.qh-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.qh-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.qh-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.qh-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.qh-table tr:last-child td { border-bottom: none; }
.qh-table tbody tr:hover td { background: var(--accent-glow); }
.qh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qh-table .actions { text-align: right; white-space: nowrap; }
.qh-table .muted { color: var(--text-muted); font-size: var(--text-xs); }

/* ── LISTA EN TARJETA (filas sin columnas fijas) ──────────────── */
.qh-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.qh-list-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; flex-wrap: wrap; }
.qh-list-row + .qh-list-row { border-top: 1px solid var(--border); }

/* ── CIFRAS (KPIs pequeños) ────────────────────────────────────── */
.qh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.qh-stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.qh-stat .value { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.qh-stat .label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
/* Variantes de estado: franja superior y cifra en color. */
.qh-stat.positive, .qh-stat.warning, .qh-stat.negative, .qh-stat.info, .qh-stat.accent { border-top-width: 3px; }
.qh-stat.positive { border-top-color: var(--color-positive); }
.qh-stat.positive .value { color: var(--color-positive); }
.qh-stat.warning { border-top-color: var(--color-warning); }
.qh-stat.warning .value { color: var(--color-warning); }
.qh-stat.negative { border-top-color: var(--color-negative); }
.qh-stat.negative .value { color: var(--color-negative); }
.qh-stat.info { border-top-color: var(--color-info); }
.qh-stat.info .value { color: var(--color-info); }
.qh-stat.accent { border-top-color: var(--accent); }
.qh-stat.accent .value { color: var(--accent); }

/* ── AVISO EN LÍNEA ────────────────────────────────────────────── */
.qh-notice { padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); background: var(--dim-info); color: var(--color-info); }
.qh-notice.warning { background: var(--dim-warning); color: var(--color-warning); }
.qh-notice.negative { background: var(--dim-negative); color: var(--color-negative); }
.qh-notice.positive { background: var(--dim-positive); color: var(--color-positive); }

/* ── Tablas en móvil: se permite desplazamiento horizontal dentro de
 * .qh-table-wrap; la página nunca se desborda. */
@media (max-width: 640px) {
  .qh-table th, .qh-table td { padding: 10px 12px; }
}

/* ══ MODO OSCURO (solo herramienta de gestión) ═══════════════════
 * Se activa con <html data-qh-theme="dark"> (lo pone app/layout.tsx antes
 * de pintar, según la preferencia guardada) y SOLO en páginas que tienen
 * el armazón .qh-shell (AppShell). Kiosko, sala, player y panel de
 * operador no lo tienen, así que siempre se ven con sus colores de marca.
 * Se redefinen los tokens de rib-core a nivel de <html> para que también
 * los lean las gráficas (lib/charts/ribTheme.ts).
 */
html[data-qh-theme="dark"]:has(.qh-shell) {
  color-scheme: dark;
  --bg-root: #0F1115;
  --bg-surface: #171A20;
  --bg-surface-2: #1E222A;
  --bg-surface-3: #262B34;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --border: #2A2F38;
  --border-hover: #3A404B;
  --border-active: #4A515E;
  --border-strong: #353B46;
  --text-primary: #ECEEF2;
  --text-secondary: #C3C7CF;
  --text-muted: #9097A3;
  --text-disabled: #5F6672;
  --accent: #A68BDA;
  --accent-hover: #B9A2E4;
  --accent-strong: #C9B6EC;
  --accent-dim: rgba(166, 139, 218, 0.16);
  --accent-glow: rgba(166, 139, 218, 0.06);
  --qh-accent-solid: #7B5CB8;
  --color-positive: #3FBF8A;
  --color-warning: #D9A441;
  --color-negative: #E57373;
  --color-info: #6FA3DA;
  --dim-positive: rgba(63, 191, 138, 0.14);
  --dim-warning: rgba(217, 164, 65, 0.14);
  --dim-negative: rgba(229, 115, 115, 0.14);
  --dim-info: rgba(111, 163, 218, 0.14);
  --cat-a: #A68BDA;
  --cat-b: #BCA8E0;
  --cat-c: #93A7BF;
  --cat-d: #D9A441;
  --cat-e: #3FBF8A;
  --dim-cat-a: rgba(166, 139, 218, 0.16);
  --dim-cat-b: rgba(188, 168, 224, 0.14);
  --dim-cat-c: rgba(147, 167, 191, 0.14);
  --dim-cat-d: rgba(217, 164, 65, 0.14);
  --dim-cat-e: rgba(63, 191, 138, 0.14);
  --chart-1: #A68BDA;
  --chart-2: #BCA8E0;
  --chart-3: #7F71A0;
  --chart-4: #93A7BF;
  --chart-5: #6B7685;
  --chart-6: #4A515E;
  --chart-highlight: #C9B6EC;
  --chart-grid: #262B34;
  --chart-tick: #9097A3;
  --chart-tooltip-bg: #1E222A;
  --chart-tooltip-text: #ECEEF2;
  --chart-tooltip-border: #353B46;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}
html[data-qh-theme="dark"]:has(.qh-shell) body { background: var(--bg-root); }
/* Piezas de rib-core con blanco fijo */
html[data-qh-theme="dark"] .qh-shell .rib-topbar { background: rgba(23, 26, 32, 0.94); }
html[data-qh-theme="dark"] .qh-shell .rib-footer { background: rgba(23, 26, 32, 0.94); }
html[data-qh-theme="dark"] .qh-shell .rib-toast { background: rgba(30, 34, 42, 0.98); }
/* Botón principal: fondo morado sólido con texto blanco legible */
html[data-qh-theme="dark"] .qh-shell .qh-btn.primary { background: var(--qh-accent-solid); border-color: var(--qh-accent-solid); }
html[data-qh-theme="dark"] .qh-shell .qh-btn.primary:hover { background: #8B6CC9; border-color: #8B6CC9; }
html[data-qh-theme="dark"] .qh-shell img { opacity: 0.95; }