/* Mostra aí! panel styles. Values come from docs/design-tokens.md (Água v5). */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg:#F2FAFB; --surface:#FFFFFF; --surface-2:#E6F5F8;
  --border:#D3E7EC; --border-strong:#718E97;
  --text:#0B2A33; --muted:#48656E;
  --primary:#0C6984; --primary-hover:#0A5468; --primary-soft:#D9F1F6; --on-primary:#FFFFFF;
  --success:#15803D; --success-soft:#DCF5E5;
  --warning:#B45309; --warning-soft:#FDF0D5;
  --danger:#C62828; --danger-hover:#A81F1F; --danger-soft:#FDE4E4;
  --info:#2563EB; --info-soft:#E0EAFF;
  --neutral-icon:#5B6F76; --neutral-soft:#E8EEF0;
  --suspended:#6B2FA5; --suspended-soft:#EFE5F9;
  --disabled-bg:#E3EDF0; --disabled-text:#8AA3AB; --error-input-bg:#FFFAFA;

  --font:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.25rem; --t-xl:1.625rem; --t-2xl:2.25rem;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-xs:4px; --r-sm:8px; --r-btn:10px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --sh1:0 1px 2px rgba(14,116,144,.08), 0 2px 8px rgba(14,116,144,.06);
  --sh2:0 4px 16px rgba(14,116,144,.10), 0 1px 3px rgba(14,116,144,.06);
  --sh3:0 12px 32px rgba(14,116,144,.16), 0 2px 6px rgba(14,116,144,.06);

  --btn-grad:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  --btn-grad-soft:linear-gradient(180deg, rgba(12,105,132,0), rgba(12,105,132,.06));
  --btn-grad-pressed:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --vignette:radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(12,105,132,.06) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--t-md); line-height: 1.5; color: var(--text);
  background-color: var(--bg); background-image: var(--noise), var(--vignette); background-attachment: fixed;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--primary); }
svg { flex: none; }
.sprite { position: absolute; }
:focus-visible { outline: 3px solid var(--surface); box-shadow: 0 0 0 6px var(--info); border-radius: var(--r-xs); }

/* Type */
.h-page { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.h-sec { font-size: var(--t-lg); font-weight: 700; }
.muted { color: var(--muted); font-size: var(--t-sm); }
.hint { color: var(--muted); font-size: var(--t-sm); }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* Buttons */
.btn {
  font: inherit; font-weight: 600; font-size: var(--t-md); display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); min-height: 44px; padding: 0 var(--s5); border: 1.5px solid transparent; border-radius: var(--r-btn);
  cursor: pointer; text-decoration: none; background-color: transparent; color: var(--primary);
  transition: background-color .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; }
.btn.sm { min-height: 34px; padding: 0 var(--s4); font-size: var(--t-sm); }
.btn.block { width: 100%; }
.btn.primary { background-color: var(--primary); background-image: var(--btn-grad); color: var(--on-primary); }
.btn.primary:hover { background-color: var(--primary-hover); }
.btn.secondary { background-color: var(--surface); background-image: var(--btn-grad-soft); border-color: var(--border); }
.btn.secondary:hover { background-color: var(--surface-2); border-color: var(--primary); }
.btn.ghost:hover { background-color: var(--primary-soft); }
.btn.danger { background-color: var(--danger); background-image: var(--btn-grad); color: #fff; }
.btn.danger:hover { background-color: var(--danger-hover); }
.btn.primary:active, .btn.danger:active { background-image: var(--btn-grad-pressed); }
.btn:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: transparent; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--surface); box-shadow: 0 0 0 6px var(--info); }

/* Forms */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
/* Form buttons keep their width on desktop and fill the row on phones (main action within thumb reach). */
.stack > .btn, .stack > form > .btn { align-self: flex-start; }
@media (max-width: 767px) { .stack > .btn:not(.block), .box > form > .btn { align-self: stretch; width: 100%; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
label { font-size: var(--t-sm); font-weight: 600; }
.in {
  font: inherit; min-height: 44px; width: 100%; padding: 0 var(--s4); color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
}
.in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
select.in {
  appearance: none; padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c6984' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.grid3 { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Alerts */
.alert { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600; }
.alert svg { width: 18px; height: 18px; margin-top: 1px; }
.alert.ok { background: var(--success-soft); } .alert.ok svg { color: var(--success); }
.alert.err { background: var(--danger-soft); } .alert.err svg { color: var(--danger); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-xs); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; color: var(--text); }
.badge svg { width: 16px; height: 16px; }
.b-ok { background: var(--success-soft); } .b-ok svg { color: var(--success); }
.b-off { background: var(--neutral-soft); } .b-off svg { color: var(--neutral-icon); }
.b-warn { background: var(--warning-soft); } .b-warn svg { color: var(--warning); }
.b-info { background: var(--info-soft); } .b-info svg { color: var(--info); }
.b-err { background: var(--danger-soft); } .b-err svg { color: var(--danger); }
.b-sus { background: var(--suspended-soft); } .b-sus svg { color: var(--suspended); }
.chip { display: inline-flex; padding: 3px 12px; border-radius: var(--r-xs); background: var(--surface-2); font-size: var(--t-sm); font-weight: 600; }

/* Boxes and cards */
.box { background: var(--surface); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh1); }
.narrow { max-width: 560px; }
.empty { text-align: center; padding: var(--s8) var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); background: var(--surface); border-radius: var(--r-xs); box-shadow: var(--sh2); color: var(--text); text-decoration: none; min-width: 0; }
.card.link:hover { box-shadow: var(--sh3); }
.card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; }
.card-title { font-weight: 700; overflow-wrap: anywhere; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); font-size: var(--t-sm); }
.meta dt { color: var(--muted); }
.meta dd { font-weight: 600; overflow-wrap: anywhere; }
.page-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* Login and other pages without the app shell */
.bare { display: grid; place-items: center; min-height: 100vh; padding: var(--s6) var(--s4); }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--s4); }
.wordmark { font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em; text-transform: uppercase; color: var(--primary); }

/* App shell: mobile first (top bar + bottom tab bar) */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.side { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); box-shadow: var(--sh1); }
.tenant-sm { font-size: var(--t-xs); font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.main { flex: 1; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5) var(--s4) calc(88px + env(safe-area-inset-bottom)); width: 100%; max-width: 1200px; }
.tabbar {
  position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  padding: var(--s2) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--surface);
  box-shadow: 0 -4px 16px rgba(14,116,144,.08); border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 10;
}
.tabbar .navitem { flex-direction: column; gap: 2px; justify-content: center; min-height: 48px; font-size: var(--t-xs); padding: 6px 0; }
.tabbar .navitem svg { width: 22px; height: 22px; }
.navitem { display: flex; align-items: center; gap: var(--s2); border-radius: var(--r-pill); color: var(--muted); font-weight: 600; text-decoration: none; }
.navitem.on { color: var(--primary); background: var(--primary-soft); }

@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: 220px 1fr; }
  .topbar, .tabbar { display: none; }
  .side { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5) var(--s3); background: var(--surface); position: sticky; top: 0; height: 100vh; }
  .tenant-name { font-weight: 700; padding: 0 var(--s3) var(--s4); overflow-wrap: anywhere; line-height: 1.25; }
  .nav { display: flex; flex-direction: column; gap: var(--s1); }
  .side .navitem { padding: 10px var(--s3); font-size: var(--t-sm); }
  .side .navitem svg { width: 18px; height: 18px; }
  .side .navitem:hover:not(.on) { background: var(--surface-2); }
  .logout { margin-top: auto; }
  .main { padding: var(--s8) var(--s8); }
}

/* Biblioteca */
.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; }
label.btn { cursor: pointer; }
.usage { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5); }
.usage-h { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-sm); flex-wrap: wrap; }
.meter { appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); accent-color: var(--primary); }
.meter::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-pill); }
.meter::-webkit-progress-value { background: var(--primary); border-radius: var(--r-pill); }
.meter::-moz-progress-bar { background: var(--primary); border-radius: var(--r-pill); }
.uploads { display: flex; flex-direction: column; gap: var(--s2); }
.uploads:empty { display: none; }
.upload { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3); padding: var(--s3); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-sm); }
.upload-name { font-weight: 600; overflow-wrap: anywhere; }
.upload-status { color: var(--muted); text-align: right; }
.upload progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--primary); }
.upload.ok .upload-status { color: var(--success); font-weight: 600; }
.upload.err { background: var(--danger-soft); grid-template-columns: 1fr; }
.upload.err .upload-status { color: var(--text); text-align: left; }
.media-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.media-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xs); box-shadow: var(--sh2); overflow: hidden; min-width: 0; }
.media-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #06141A; overflow: hidden; }
.media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.no-thumb svg { width: 36px; height: 36px; color: #9FC7D1; }
.play { position: absolute; right: 8px; bottom: 8px; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.media-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); }
.media-name { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta { display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; font-size: var(--t-xs); color: var(--muted); }
.media-body form { margin-top: auto; }
.media-body .btn { padding: 0 var(--s2); color: var(--danger); }
.media-body .btn:hover { background: var(--danger-soft); }

/* Playlists */
.alert.warn { background: var(--warning-soft); } .alert.warn svg { color: var(--warning); }
.inline-form { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.inline-form .grow { flex: 1 1 220px; }
.pl-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.pl-item { display: grid; grid-template-columns: 32px 64px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3) var(--s2) var(--s1); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh1); }
.pl-item.dragging { box-shadow: var(--sh3); outline: 2px solid var(--primary); }
.handle { display: grid; place-items: center; width: 32px; height: 44px; color: var(--border-strong); cursor: grab; touch-action: none; }
.handle svg { width: 18px; height: 18px; }
.pl-thumb { width: 64px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #06141A; overflow: hidden; display: block; }
.pl-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pl-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-name { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ctl { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; font-size: var(--t-xs); color: var(--muted); }
.pl-item[data-kind="image"] .when-video, .pl-item:not([data-kind="image"]) .when-image { display: none; }
.pl-actions { display: flex; gap: 2px; }
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { min-height: 34px; }
.pl-actions .btn { color: var(--muted); }
.pl-actions .remove:hover { color: var(--danger); background: var(--danger-soft); }
.in-sm { width: 76px; min-height: 34px; padding: 0 var(--s2); }
.dur-field { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-xs); color: var(--muted); }
.toggle-sm { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-xs); cursor: pointer; min-height: 34px; }
.toggle-sm input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-sm .sw { position: relative; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--border-strong); transition: background .15s; }
.toggle-sm .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle-sm input:checked + .sw { background: var(--primary); }
.toggle-sm input:checked + .sw::after { left: 17px; }
.toggle-sm input:focus-visible + .sw { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--info); }
.picker > summary { list-style: none; align-self: flex-start; display: inline-flex; }
.picker > summary::-webkit-details-marker { display: none; }
.picker[open] { display: flex; flex-direction: column; gap: var(--s3); }
.pick-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 60vh; overflow: auto; padding: 2px; }
.pick { display: flex; flex-direction: column; gap: 4px; padding: var(--s2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh1); cursor: pointer; position: relative; font-size: var(--t-xs); }
.pick input { position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; accent-color: var(--primary); }
.pick:has(input:checked) { outline: 2px solid var(--primary); background: var(--primary-soft); }
.pick-thumb { aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #06141A; overflow: hidden; }
.pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pick-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-meta { color: var(--muted); }
.save-bar { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5; padding: var(--s2) 0; }
@media (min-width: 768px) { .save-bar { bottom: 0; } }
.sched-list { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Schedule form */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: 6px; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg label, .day { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--border-strong); border-radius: var(--r-btn); font-weight: 600; font-size: var(--t-sm); cursor: pointer; background: var(--surface); }
.seg label:has(input:checked), .day:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.seg input, .day input { accent-color: var(--primary); }
.days { display: flex; flex-wrap: wrap; gap: var(--s2); }
.day { padding: 0 var(--s3); }
.modes { display: flex; flex-direction: column; gap: var(--s2); }
.mode { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-sm); color: var(--muted); }
.mode b { display: block; color: var(--text); }
.mode input { margin-top: 3px; accent-color: var(--primary); }
.mode:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.sched:has(#rec-weekly:not(:checked)) .only-weekly,
.sched:has(#rec-monthly:not(:checked)) .only-monthly,
.sched:has(#mode-once:checked) .only-window,
.sched:not(:has(#mode-repeat:checked)) .only-repeat { display: none; }
[hidden] { display: none !important; }
.restore > summary { list-style: none; display: inline-flex; color: var(--danger); }
.restore > summary::-webkit-details-marker { display: none; }
.restore[open] { display: flex; flex-direction: column; gap: var(--s3); }
@media (max-width: 767px) { .save-bar .btn { width: 100%; } }

/* TVs */
.row-icon { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; }
.tv-ic { width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.tv-ic svg { width: 22px; height: 22px; }
.tv-ic.vertical svg { transform: rotate(90deg); }
.code-in { font-size: var(--t-lg); letter-spacing: .12em; text-transform: uppercase; }
.rot-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rot { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-xs); font-weight: 600; text-align: center; }
.rot input { position: absolute; opacity: 0; pointer-events: none; }
.rot:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.rot:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--info); }
.rot-pic { width: 64px; height: 36px; border: 3px solid currentColor; border-radius: 4px; display: grid; place-items: center; }
.rot-pic.r90, .rot-pic.r270 { width: 36px; height: 64px; }
.rot-arrow { font-size: 14px; line-height: 1; }
.rot-pic.r90 .rot-arrow { transform: rotate(90deg); }
.rot-pic.r180 .rot-arrow { transform: rotate(180deg); }
.rot-pic.r270 .rot-arrow { transform: rotate(-90deg); }
.label { font-size: var(--t-sm); font-weight: 600; }
.err-list { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-sm); }
.card .badge { align-self: flex-start; }