/* ks-qr-dinamico — paleta blanco/negro/grises. Sin border-radius. Sin sombras. */

:root {
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-muted: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;
  --text: #18181b;
  --text-strong: #000000;

  --transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

/* El atributo [hidden] tiene que ganarle a cualquier display:flex/grid que
   apliquemos despues (por ejemplo, .sidebar a { display: flex } esconde el
   default display:none del attr, dejando ver tabs reservadas para admin). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0; }

a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--text-muted); }

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

/* Layout app: sidebar + main */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 4px 8px 16px;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar a, .sidebar button.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 14px;
  text-align: left;
  transition: var(--transition);
}
.sidebar a:hover, .sidebar button.nav-item:hover { background: var(--bg-muted); }
.sidebar a.active { background: var(--text-strong); color: var(--bg); }
.sidebar a.active svg { color: var(--bg); }
.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.me-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.me-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.me-card .mono {
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-action {
  justify-content: flex-start;
}

.main {
  padding: 32px 48px 64px;
  max-width: 1280px;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.page-header h1 { letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 12px; }
.page-header h1 .count-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  background: var(--bg-subtle);
}
.page-subtitle { color: var(--text-muted); margin-top: 4px; font-size: 14px; }

/* Card */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 20px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  background: var(--text-strong);
  color: var(--bg);
  border: 1px solid var(--text-strong);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover:not(:disabled) { opacity: 0.85; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-secondary {
  background: var(--bg);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-muted); opacity: 1; }
.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-muted); opacity: 1; }

.btn-icon {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Inputs */
.input, .select, .textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  outline: none;
  transition: var(--transition);
  line-height: 1.4;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--text-strong);
  box-shadow: 0 0 0 1px var(--text-strong);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}
.input::placeholder { color: var(--text-subtle); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.field-hint { font-size: 12px; color: var(--text-muted); }
.field-error {
  font-size: 12px;
  color: var(--text-strong);
  font-weight: 500;
  border-left: 2px solid var(--text-strong);
  padding-left: 8px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Checkbox / toggle */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.toggle input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.toggle input[type="checkbox"]:checked {
  background: var(--text-strong);
  border-color: var(--text-strong);
}
.toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.toggle input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 1px var(--text-strong);
}

/* Active/inactive switch (looks like a real switch but mono) */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: var(--transition);
}
.switch-track::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--text-strong);
  transition: var(--transition);
}
.switch input:checked + .switch-track {
  background: var(--text-strong);
  border-color: var(--text-strong);
}
.switch input:checked + .switch-track::before {
  background: var(--bg);
  transform: translateX(16px);
}
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 1px var(--text-strong);
}

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); }
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table thead th {
  text-align: left;
  font-weight: 500;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-subtle); }

/* Toolbar de listas */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar .search {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.toolbar .search .input { padding-left: 36px; }
.toolbar .search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

/* Modal / dialog */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dialog-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.dialog {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  transform: translateY(8px);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dialog-backdrop.open .dialog {
  transform: translateY(0);
}
.dialog-lg { max-width: 720px; }
.dialog-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.dialog-header h3 { font-size: 16px; }
.dialog-body { padding: 20px 24px; }
.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Toast */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  background: var(--text-strong);
  color: var(--bg);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  min-width: 260px;
  max-width: 360px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Empty state */
.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  border: 1px dashed var(--border-strong);
  background: var(--bg-subtle);
}
.empty .empty-title { font-size: 14px; color: var(--text); font-weight: 500; }
.empty .empty-hint { font-size: 13px; color: var(--text-muted); max-width: 380px; }

/* Spinner monocromo */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 20px; height: 20px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  padding: 24px;
}
.login-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-brand {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* Slug pill / mono code */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.slug-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.strong { color: var(--text-strong); font-weight: 500; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--text-muted);
}
.tag-on { color: var(--text-strong); border-color: var(--text-strong); }
.tag-off { color: var(--text-subtle); border-color: var(--border-strong); }
.tag-sm { padding: 1px 6px; font-size: 10px; }
.tag-self {
  margin-left: 6px;
  background: var(--text-strong);
  color: var(--bg);
  border-color: var(--text-strong);
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 500;
  padding: 1px 6px;
  font-size: 10px;
}

/* User cell: avatar + nombre/email */
.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--text-strong);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.user-cell-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-cell-meta .mono { font-size: 11px; }

/* Input con boton lateral (ej: mostrar/ocultar password) */
.input-with-action {
  position: relative;
  display: flex;
}
.input-with-action .input { padding-right: 40px; }
.input-with-action [data-toggle-password] {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
}

/* QR preview box */
.qr-preview {
  border: 1px solid var(--border);
  padding: 16px;
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.qr-preview img, .qr-preview svg { display: block; max-width: 100%; height: auto; }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.stat {
  border: 1px solid var(--border);
  padding: 16px;
  background: var(--bg);
}
.stat-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}
.stat-sub {
  font-size: 11px;
  margin-top: 6px;
  min-height: 14px;
}

/* Bar chart minimalista (CSS) */
.bar-chart { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.bar-row .bar {
  height: 8px;
  background: var(--bg-muted);
  position: relative;
}
.bar-row .bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--text-strong);
}
.bar-row .bar-count { text-align: right; color: var(--text-muted); }

.day-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.day-bars .day {
  flex: 1;
  background: var(--text-strong);
  min-height: 1px;
  position: relative;
}
.day-bars .day:hover { opacity: 0.7; }

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Folders grid + tiles para la vista de campañas */
.folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.folder-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  min-height: 140px;
  transition: var(--transition);
}
.folder-tile:hover {
  border-color: var(--text-strong);
  background: var(--bg-subtle);
}
/* El link es un overlay sobre TODO el tile. Los hijos del tile (head, nombre,
   subtitulo, footer) tienen pointer-events:none para que los clicks atraviesen
   y siempre lleguen al link. Las acciones (botones) re-activan pointer-events
   para que sigan siendo clickeables sin disparar la navegacion del tile. */
.folder-tile-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.folder-tile-head,
.folder-tile-name,
.folder-tile-sub,
.folder-tile-foot {
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.folder-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-strong);
}
.folder-tile-icon {
  display: inline-flex;
  color: var(--text-strong);
}
.folder-tile-icon svg { width: 18px; height: 18px; }
.folder-tile-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.folder-tile-sub {
  font-size: 13px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.folder-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.folder-tile-actions {
  display: flex;
  gap: 4px;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-strong); text-decoration: underline; }

/* Skeleton */
.skeleton {
  background: var(--bg-muted);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Animacion de cambio de seccion. La JS aplica .view-anim a #view-root cada
   vez que route() cambia, y el remove→reflow→add reinicia los keyframes. */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-anim {
  animation: viewIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger sutil de tiles/filas adentro de la vista que recien entro. Cada
   hijo directo de un contenedor con .stagger se retrasa unos ms. Lo usamos
   en la grilla de campañas para que las carpetas aparezcan en cascada. */
.stagger > * {
  animation: itemIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 60ms; }
.stagger > *:nth-child(4) { animation-delay: 80ms; }
.stagger > *:nth-child(5) { animation-delay: 100ms; }
.stagger > *:nth-child(6) { animation-delay: 120ms; }
.stagger > *:nth-child(7) { animation-delay: 140ms; }
.stagger > *:nth-child(8) { animation-delay: 160ms; }
.stagger > *:nth-child(n+9) { animation-delay: 180ms; }
@keyframes itemIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respeto a usuarios que prefieren menos movimiento (prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .view-anim,
  .stagger > * {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Visually hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible global */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--text-strong);
}

/* Small screens */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; padding: 12px 16px; }
  .sidebar-nav { flex-direction: row; flex: 1; flex-wrap: wrap; }
  .sidebar-footer { display: none; }
  .main { padding: 24px 16px; }
  .field-row { grid-template-columns: 1fr; }
}