/* ============================================================
   MERION TOTEM — estilos de produto (classes tot- / totem- / media- / playlist-)
   Complementa o design system Merion. SOMENTE tokens semânticos.
   ============================================================ */

/* label de seção (o catálogo definia inline; reposto aqui) */
.well-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); margin-bottom: 12px;
}

/* ---- status dots (painel + tabela + player) ---- */
.tot-status-dot, .totem-status-dot {
  width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto;
  background: var(--muted-foreground);
}
.tot-status-dot[data-status="online"] {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
.tot-status-dot[data-status="offline"] { background: color-mix(in srgb, var(--destructive) 80%, var(--muted-foreground)); }

/* ============================================================
   PAINEL — grade ao vivo
   ============================================================ */
.totem-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
.totem-live-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); padding: 16px;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.totem-live-card:hover { border-color: var(--brand-tint-border); transform: translateY(-1px); }
.totem-live-card[data-status="online"] {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 14%, transparent);
}
.totem-live-head { display: flex; align-items: center; gap: 9px; }
.totem-live-name {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.totem-live-loc { font-size: 12.5px; color: var(--muted-foreground); }
.totem-live-now {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 11px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 60%, var(--background));
  border: 1px solid var(--border); font-size: 13px;
}
.totem-live-now .ic { font-size: 16px; color: var(--brand); flex: 0 0 auto; }
.totem-live-card[data-status="offline"] .totem-live-now .ic { color: var(--muted-foreground); }
.totem-live-now-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.totem-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12.5px; }

/* ============================================================
   TOTEM DETALHE — preview "tocando agora" + pareamento
   ============================================================ */
.tot-preview-card { display: flex; flex-direction: column; }
.tot-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: #000; display: flex; align-items: center; justify-content: center;
}
.tot-preview-media { width: 100%; height: 100%; object-fit: cover; display: block; }
/* preview em retrato — moldura vertical centralizada dentro do card */
.tot-preview[data-orientation="portrait"] { aspect-ratio: 9 / 16; width: 100%; max-width: 240px; margin: 0 auto; }
.tot-preview-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted-foreground); font-size: 13px;
}
.tot-preview-empty .ic { font-size: 30px; opacity: .55; }
.tot-preview[data-empty="true"] { background: var(--muted); }
.tot-preview-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; font-size: 14px;
}

/* código de pareamento */
.tot-pair-block {
  border: 1px solid var(--brand-tint-border); border-radius: var(--radius-md);
  background: var(--brand-tint); padding: 16px;
}
.tot-pair-code {
  font-family: var(--ui-font); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-size: 30px; font-weight: 700; letter-spacing: .22em; color: var(--brand);
  padding: 4px 0 2px;
}

/* ID + código lado a lado (pareamento) */
.tot-pair-ids { display: flex; gap: 12px; flex-wrap: wrap; }
.tot-pair-id {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--muted) 50%, var(--background));
}
.tot-pair-id-lbl { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.tot-pair-id-val { font-size: 22px; font-weight: 700; color: var(--foreground); line-height: 1.1; }
.tot-pair-id .tot-pair-code { font-size: 24px; letter-spacing: .14em; padding: 0; }
.tot-pair-hint {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground);
}
.tot-pair-hint .ic { color: var(--brand); font-size: 15px; flex: 0 0 auto; margin-top: 1px; }

/* chip de ID na tabela de totens */
.tot-id-chip {
  font-size: 11px; font-weight: 600; color: var(--muted-foreground);
  padding: 2px 7px; border-radius: 99px; background: var(--muted); border: 1px solid var(--border);
}

/* página de eventos — filtros + lista + paginação só com setas */
.tot-events-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.tot-events-filters > * { flex: 1 1 170px; min-width: 150px; }
.tot-events-filters > .tot-events-clear { flex: 0 0 auto; min-width: 0; height: 38px; }
.tot-events-list { padding: 6px 0 0; }
.tot-events-pager { flex-wrap: wrap; gap: 12px; }
/* Anterior/Próximo: esconde o texto, mantém só a seta */
.tot-events-page .pagination .page-btn:first-child,
.tot-events-page .pagination .page-btn:last-child { font-size: 0; gap: 0; padding-left: 9px; padding-right: 9px; }
.tot-events-page .pagination .page-btn:first-child .ic,
.tot-events-page .pagination .page-btn:last-child .ic { font-size: 16px; }

/* ============================================================
   MÍDIAS — grade de cartões
   ============================================================ */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.media-card { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.media-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-type-badge { position: absolute; top: 8px; left: 8px; }
.media-meta { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; }
.media-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta .cell-muted { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.media-preview-box {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border); background: #000;
}
.media-preview-box img, .media-preview-box video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* upload / processamento de mídia */
.media-processing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 100%; color: var(--muted-foreground); font-size: 12.5px;
}
.media-processing .ic { font-size: 24px; color: var(--brand); animation: tot-spin 1s linear infinite; }
.media-processing.media-failed { color: var(--destructive); }
.media-processing.media-failed .ic { color: var(--destructive); animation: none; }
.media-card[data-status="processing"] { opacity: .9; }
.media-meta .cell-muted .ic { font-size: 13px; vertical-align: -2px; }

/* seletor de arquivo (dropzone) */
.media-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  width: 100%; padding: 24px 16px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--muted) 50%, var(--background)); color: var(--foreground);
  transition: border-color .14s ease, background .14s ease;
}
.media-drop:hover { border-color: var(--brand); background: var(--brand-tint); }
.media-drop[data-has="true"] { border-style: solid; border-color: var(--brand-tint-border); }
.media-drop .ic { font-size: 26px; color: var(--brand); }
.media-drop-main { font-weight: 600; font-size: 14px; word-break: break-word; }
.media-drop-sub { font-size: 12px; color: var(--muted-foreground); }

.media-storage-hint { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted-foreground); }
.media-storage-hint .ic { font-size: 14px; color: var(--brand); flex: 0 0 auto; }

/* ============================================================
   PLAYLISTS — grade + seletor de mídias
   ============================================================ */
.playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.playlist-card { display: flex; flex-direction: column; }

.playlist-pick { display: flex; flex-direction: column; gap: 6px; }
.playlist-pick-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.playlist-pick-item:hover { border-color: var(--brand-tint-border); background: var(--accent); }
.playlist-pick-item[data-on="true"] {
  border-color: var(--brand); background: var(--brand-tint);
}
.playlist-pick-thumb {
  width: 46px; height: 34px; flex: 0 0 auto; border-radius: 6px; overflow: hidden;
  background: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground);
}
.playlist-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.playlist-pick-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.playlist-pick-body .cell-strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-pick-body .cell-muted { font-size: 12px; }
.playlist-pick-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; color: var(--muted-foreground);
}
.playlist-pick-item[data-on="true"] .playlist-pick-check { color: var(--brand-contrast); }
.playlist-pick-order {
  width: 26px; height: 26px; border-radius: 99px; background: var(--brand); color: var(--brand-contrast);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* ============================================================
   PLAYER (totem.html) — tela cheia do dispositivo
   ============================================================ */
.totem-root { width: 100vw; height: 100vh; background: #000; overflow: hidden; }

/* tela de pareamento */
.totem-pair-screen {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--background); overflow: hidden;
}
.totem-pair-glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 68%);
  filter: blur(20px); top: -160px; right: -120px;
}
.totem-pair-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); padding: 34px 32px 28px;
  box-shadow: var(--shadow);
}
.totem-pair-brand { margin-bottom: 22px; }
.totem-pair-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
}
.totem-pair-title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 8px 0 6px; }
.totem-pair-sub { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 22px; font-weight: 300; }
.totem-pair-form { display: flex; flex-direction: column; gap: 16px; }
.totem-pair-form .btn-xl { width: 100%; margin-top: 4px; }
.totem-code-input { letter-spacing: .26em; text-transform: uppercase; font-weight: 600; }
.totem-pair-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground);
}
.totem-pair-foot .ic { font-size: 14px; color: var(--brand); }

/* stage — rotação fullscreen */
.totem-stage {
  position: relative; width: 100vw; height: 100vh; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.totem-media { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* Retrato: apresenta a mídia numa moldura vertical (9:16) centralizada.
   Em monitor paisagem aparece com tarjas laterais; em tela física retrato, preenche. */
.totem-stage[data-orientation="portrait"] .totem-media {
  width: auto; height: 100vh; max-width: 100vw; aspect-ratio: 9 / 16; object-fit: cover;
}
.totem-stage-empty { background: var(--background); }
.totem-empty-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--foreground);
}
.totem-empty-spinner .ic { font-size: 30px; color: var(--brand); animation: tot-spin 1s linear infinite; display: inline-block; }
.totem-empty-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.totem-empty-sub { font-size: 14px; color: var(--muted-foreground); }
@keyframes tot-spin { to { transform: rotate(360deg); } }

/* chip de status discreto */
.totem-status-chip {
  position: fixed; bottom: 18px; right: 18px; z-index: 20;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 12px; border-radius: 99px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  border: 1px solid var(--border); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 500; color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.totem-status-chip .ic { font-size: 15px; }
.totem-status-chip[data-state="ok"]   .totem-status-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.totem-status-chip[data-state="ok"]   .ic { color: var(--success); }
.totem-status-chip[data-state="wait"] .totem-status-dot { background: var(--warning); }
.totem-status-chip[data-state="wait"] .ic { color: var(--warning); }
.totem-status-chip[data-state="wait"] .ic.ri-loader-2-line { animation: tot-spin 1s linear infinite; }
.totem-status-chip[data-state="err"]  .totem-status-dot { background: var(--destructive); }
.totem-status-chip[data-state="err"]  .ic { color: var(--destructive); }
.totem-exit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 2px; padding: 0;
  border: none; border-radius: 99px; background: transparent; color: var(--muted-foreground); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.totem-exit-btn:hover { background: var(--accent); color: var(--foreground); }
.totem-exit-btn .ic { font-size: 15px; }