/* ==========================================================================
   Premium — Design System v2 (tratamento elevado)
   ========================================================================== */

:root {
    /* Cores base */
    --pr-header:        #1B2845;
    --pr-header-2:      #0F172A;
    --pr-header-3:      #16213A;
    --pr-bg:            #F4F6FB;
    --pr-bg-2:          #EEF0F4;
    --pr-surface:       #FFFFFF;
    --pr-surface-soft:  #F8FAFD;
    --pr-border:        #E5E7EB;
    --pr-border-soft:   #F1F2F6;
    /* Borda dos campos de formulário — mais escura que --pr-border de propósito
       (pedido Lucas v166: divisão entre os campos mais visível) */
    --pr-border-input:  #CBD5E1;
    --pr-text:          #0F172A;
    --pr-text-soft:     #475569;
    --pr-text-mute:     #94A3B8;

    /* Accent */
    --pr-primary:       #1B2845;
    --pr-primary-hover: #283359;
    --pr-blue:          #5F6FFF;
    --pr-blue-2:        #4F5FE0;
    --pr-blue-soft:     #ECEEFF;
    --pr-indigo:        #6366F1;
    --pr-success:       #10B981;
    --pr-success-soft:  #D1FAE5;
    --pr-danger:        #EF4444;
    --pr-danger-soft:   #FEE2E2;
    --pr-warning:       #F59E0B;
    --pr-warning-soft:  #FEF3C7;
    --pr-purple:        #8B5CF6;
    --pr-purple-soft:   #EDE9FE;
    --pr-pink:          #EC4899;

    /* Tipografia */
    --pr-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pr-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

    /* Forma */
    --pr-radius-sm: 8px;
    --pr-radius:    12px;
    --pr-radius-lg: 18px;
    --pr-radius-xl: 24px;

    /* Shadows */
    --pr-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --pr-shadow:    0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.05);
    --pr-shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
    --pr-shadow-lg: 0 12px 32px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06);
    --pr-shadow-xl: 0 24px 56px rgba(15,23,42,0.18), 0 8px 16px rgba(15,23,42,0.08);
    --pr-shadow-glow: 0 0 60px rgba(95,111,255,0.35), 0 8px 24px rgba(15,23,42,0.4);

    --pr-sidebar-w: 170px;   /* [LAYOUT MOCK] sidebar mais larga p/ caber ícone+label vertical */
    --pr-header-h: 88px;     /* Header navy do mockup */

    /* === Cores específicas do shell (sidebar + header) extraídas das imagens === */
    --pr-shell-navy:        #1B2D4F;   /* faixa navy do header (flat, sem gradient) */
    --pr-shell-bg:          #F0F2F5;   /* fundo do content area (cinza muito claro) */
    --pr-shell-avatar-bg:   #4A5FF0;   /* azul sólido do avatar (não gradient) */
    --pr-shell-active-bg:   #ECEDFE;   /* lilás claro do item ativo da sidebar */
    --pr-shell-active-fg:   #5B5BD6;   /* azul-roxo do label/ícone ativo */
    --pr-shell-item-fg:     #8B95A5;   /* cinza médio dos itens inativos */
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--pr-font);
    font-size: 14px;
    color: var(--pr-text);
    background: var(--pr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   App shell
   ========================================================================== */

.pr-app {
    display: grid;
    grid-template-columns: var(--pr-sidebar-w) 1fr;
    min-height: 100vh;
}

/* Sidebar — [LAYOUT MOCK] coluna branca, ícone+label vertical, item ativo lilás */
.pr-sidebar {
    background: var(--pr-surface);
    padding: 28px 0 20px;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    box-shadow: 1px 0 0 rgba(15,23,42,0.04);
}
.pr-sidebar__avatar {
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 20px;
    padding: 0 12px;
    position: relative;       /* âncora pro dropdown absoluto */
    z-index: 50;
}
.pr-sidebar__avatar-btn {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--pr-shell-avatar-bg);
    color: #fff;
    font-weight: 700; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    position: relative;
    font-family: var(--pr-font-display);
}
.pr-sidebar__avatar-btn:hover { transform: scale(1.05); }

.pr-sidebar__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pr-sidebar__item a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 8px;
    color: var(--pr-shell-item-fg);
    font-size: 12.5px; font-weight: 500;    /* -10% do anterior */
    border-radius: 10px;
    margin: 0 12px;
    transition: background .15s ease, color .15s ease;
}
.pr-sidebar__item a:hover { color: var(--pr-shell-active-fg); background: var(--pr-shell-active-bg); }
.pr-sidebar__item--active a {
    color: var(--pr-shell-active-fg);
    background: var(--pr-shell-active-bg);
    font-weight: 600;
}
.pr-sidebar__item--logout a { color: var(--pr-danger); margin-top: auto; }
.pr-sidebar__item--logout a:hover { background: var(--pr-danger-soft); color: var(--pr-danger); }
.pr-sidebar__item svg { width: 22px; height: 22px; stroke-width: 1.8; }  /* só fontes cresceram, ícones mantém */

/* Profile dropdown — [LAYOUT MOCK] flutua sobre os itens (não empurra) */
.pr-profile-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    /* trava largura nas 3 propriedades pra NENHUM filho conseguir esticar */
    width: 162px;
    max-width: 162px;
    min-width: 162px;
    box-sizing: border-box;
    background: var(--pr-surface);
    border-radius: 9px;
    box-shadow: var(--pr-shadow-lg);
    border: 1px solid var(--pr-border-soft);
    overflow: hidden;
    display: none;
    z-index: 100;
}
.pr-profile-dropdown.is-open { display: block; }
/* Garantia extra: nenhum descendente pode estourar a largura do dropdown */
.pr-profile-dropdown * { max-width: 100%; box-sizing: border-box; min-width: 0; }
.pr-profile-dropdown__header {
    background: var(--pr-shell-navy);
    color: #fff;
    padding: 9px 11px;
}
.pr-profile-dropdown__header strong {
    display: block; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%;                                                  /* trava ao header pai */
}
.pr-profile-dropdown__header small {
    display: block;
    color: rgba(255,255,255,.6); font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%;
    margin-top: 1px;
}
.pr-profile-dropdown__menu { list-style: none; margin: 0; padding: 4px 0; }
.pr-profile-dropdown__menu li a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 11px;
    color: var(--pr-text-soft);
    font-size: 12.5px;                                            /* -10% do anterior */
    transition: background .15s ease;
}
.pr-profile-dropdown__menu li a:hover { background: var(--pr-shell-bg); color: var(--pr-text); }
.pr-profile-dropdown__menu li.is-logout a { color: var(--pr-danger); font-weight: 600; }
.pr-profile-dropdown__menu li svg { width: 13px; height: 13px; stroke-width: 1.8; flex-shrink: 0; }  /* só fontes cresceram, ícones mantém */

/* Header — [LAYOUT MOCK] faixa navy flat, título esquerda, logo direita
   Sticky pra ficar fixo ao rolar (UX premium em listas longas) */
.pr-header {
    background: var(--pr-shell-navy);
    color: #fff;
    height: var(--pr-header-h);
    padding: 22px 36px 0;       /* título encostado no topo, deixa espaço pros KPIs */
    display: flex; align-items: flex-start; justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;                /* maior que os KPI cards (z-index: 2) */
}
.pr-header__title {
    font-family: var(--pr-font-display);
    font-size: 26px; font-weight: 600;
    letter-spacing: -0.3px;
    color: #fff;
}
.pr-header__logo img {
    height: 22px; display: block;
    /* logo branca já é PNG transparente tight, sem ajustes */
}

/* =====================================================================
   THEME PICKER — personalização da cor da barra (localStorage)
   Pedido do Lucas: cor da barra superior personalizável por navegador.
   ===================================================================== */
.pr-header__right {
    display: flex; align-items: center; gap: 14px;
}
.pr-header__theme-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s, border-color .15s;
    padding: 0;
    flex-shrink: 0;
}
.pr-header__theme-btn:hover {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.35);
    transform: scale(1.06);
}
.pr-header__theme-btn:active { transform: scale(0.96); }
.pr-header__theme-btn svg { width: 18px; height: 18px; }

.pr-theme-picker {
    position: fixed;            /* fixed pra escapar do stacking context do header sticky */
    top: 70px; right: 24px;     /* JS recalcula no abrir + resize + scroll */
    width: 270px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.22);
    padding: 16px 16px 12px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.pr-theme-picker.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.pr-theme-picker__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pr-theme-picker__color-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
    border-radius: 10px;
    border: 1px solid var(--pr-border-soft);
    cursor: pointer;
}
.pr-theme-picker__swatch-wrap {
    width: 52px; height: 52px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(15,23,42,0.18);
    flex-shrink: 0;
    position: relative;
}
.pr-theme-picker__swatch-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
    pointer-events: none;
    border-radius: 12px;
}
#pr-theme-input {
    width: 100%; height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
#pr-theme-input::-webkit-color-swatch-wrapper { padding: 0; }
#pr-theme-input::-webkit-color-swatch { border: 0; }
#pr-theme-input::-moz-color-swatch { border: 0; }
.pr-theme-picker__hint {
    font-size: 12px;
    color: var(--pr-text-mute);
    line-height: 1.4;
    font-weight: 500;
}

.pr-theme-picker__presets-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pr-text-mute);
    margin: 6px 0 10px;
    font-weight: 700;
}
.pr-theme-picker__presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.pr-theme-picker__presets button {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.06);
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, border-color .12s, box-shadow .15s;
    position: relative;
}
.pr-theme-picker__presets button:hover {
    transform: scale(1.18);
    border-color: rgba(0,0,0,0.22);
    box-shadow: 0 4px 10px rgba(15,23,42,0.18);
    z-index: 1;
}
.pr-theme-picker__presets button:active { transform: scale(0.96); }

.pr-theme-picker__reset {
    width: 100%;
    margin-top: 14px;
    padding: 9px 14px;
    background: #F8FAFC;
    border: 1px solid var(--pr-border);
    color: var(--pr-text-mute);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pr-theme-picker__reset svg { width: 14px; height: 14px; }
.pr-theme-picker__reset:hover {
    background: #E2E8F0;
    color: var(--pr-text);
    border-color: #94A3B8;
}
.pr-theme-picker__footer {
    margin: 10px 0 0;
    font-size: 10.5px;
    color: var(--pr-text-mute);
    text-align: center;
    font-style: italic;
}

@media (max-width: 480px) {
    .pr-theme-picker { width: 240px; right: 12px !important; }
}

.pr-main { display: flex; flex-direction: column; min-height: 100vh; background: var(--pr-shell-bg); }
.pr-content { padding: 28px 36px 40px; flex: 1; }

/* [LAYOUT MOCK] KPIs sobrepõem a faixa navy do header — variante --overlap.
   z-index: 51 fica acima do header sticky (z: 50) pra manter a sobreposição
   visível. Trade-off: ao rolar, os cards passam sobre o navy brevemente antes
   de sair de cena — comportamento aceito em UIs premium com hero overlap. */
.pr-monitor-wrap { position: relative; }
.pr-kpis--overlap {
    margin-top: -50px;        /* cards entram ~metade da altura no navy (igual mockup) */
    position: relative;
    z-index: 51;
}
.pr-kpis--overlap .pr-kpi {
    box-shadow: 0 6px 18px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.pr-card {
    background: var(--pr-surface);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
    padding: 24px;
    border: 1px solid var(--pr-border-soft);
}

/* KPI cards — premium */
.pr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.pr-kpis--3 { grid-template-columns: repeat(3, 1fr); }   /* mockup Monitoramento usa 3 KPIs */
.pr-kpis--4 { grid-template-columns: repeat(4, 1fr); }   /* Locais usa 4 KPIs */
@media (max-width: 1100px) { .pr-kpis, .pr-kpis--3, .pr-kpis--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pr-kpis, .pr-kpis--3 { grid-template-columns: 1fr; } .pr-kpis--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .pr-kpis--4 { grid-template-columns: 1fr; } }

.pr-kpi {
    background: var(--pr-surface);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow);
    padding: 22px;
    display: flex; align-items: center; gap: 18px;
    border: 1px solid var(--pr-border-soft);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pr-kpi:hover { transform: translateY(-2px); box-shadow: var(--pr-shadow-md); }
.pr-kpi::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    opacity: 0.04;
    pointer-events: none;
}
.pr-kpi--blue::before    { background: var(--pr-blue); }
.pr-kpi--green::before   { background: var(--pr-success); }
.pr-kpi--red::before     { background: var(--pr-danger); }
.pr-kpi--purple::before  { background: var(--pr-purple); }

.pr-kpi__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px -4px rgba(15,23,42,0.15);
}
.pr-kpi__icon svg { width: 28px; height: 28px; stroke-width: 2; }
.pr-kpi--blue    .pr-kpi__icon { background: linear-gradient(135deg, var(--pr-blue), var(--pr-blue-2)); box-shadow: 0 8px 16px -4px rgba(95,111,255,0.4); }
.pr-kpi--green   .pr-kpi__icon { background: linear-gradient(135deg, var(--pr-success), #059669); box-shadow: 0 8px 16px -4px rgba(16,185,129,0.4); }
.pr-kpi--red     .pr-kpi__icon { background: linear-gradient(135deg, var(--pr-danger), #DC2626); box-shadow: 0 8px 16px -4px rgba(239,68,68,0.4); }
.pr-kpi--purple  .pr-kpi__icon { background: linear-gradient(135deg, var(--pr-purple), #7C3AED); box-shadow: 0 8px 16px -4px rgba(139,92,246,0.4); }

.pr-kpi__num {
    font-family: var(--pr-font-display);
    font-size: 32px; font-weight: 700;
    line-height: 1;
    color: var(--pr-text);
    letter-spacing: -0.5px;
}
.pr-kpi__label { font-size: 12.5px; color: var(--pr-text-soft); margin-top: 6px; font-weight: 500; }

/* ==========================================================================
   Form elements
   ========================================================================== */

.pr-input, .pr-select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    background: var(--pr-surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--pr-text);
    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.pr-input::placeholder { color: var(--pr-text-mute); }
.pr-input:hover, .pr-select:hover {
    border-color: #CBD5E1;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.pr-input:focus, .pr-select:focus {
    outline: none;
    border-color: var(--pr-blue);
    box-shadow:
        0 0 0 4px rgba(95,111,255,.14),
        0 4px 12px rgba(95,111,255,.08);
}
/* Ícone interno fica azul quando o input ganha foco */
.pr-input-wrap:focus-within .pr-input-wrap__icon { color: var(--pr-blue); }

.pr-input-wrap { position: relative; }
.pr-input-wrap .pr-input { padding-left: 44px; }
.pr-input-wrap--with-toggle .pr-input { padding-right: 46px; }
.pr-input-wrap__icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--pr-text-mute);
    pointer-events: none;
    transition: color .18s ease;
}
.pr-input-wrap__icon svg { width: 18px; height: 18px; }

/* Botão eye/eye-off (mostrar/ocultar senha) */
.pr-input-wrap__toggle {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pr-text-mute);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.pr-input-wrap__toggle:hover { color: var(--pr-text-soft); background: var(--pr-surface-soft); }
.pr-input-wrap__toggle:focus { outline: 2px solid rgba(95,111,255,.25); outline-offset: 1px; }
.pr-input-wrap__toggle svg { width: 18px; height: 18px; }

/* ==========================================================================
   Switch (toggle on/off) — premium
   ========================================================================== */
.pr-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.pr-switch input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.pr-switch__track {
    width: 38px; height: 22px;
    background: var(--pr-border);
    border-radius: 999px;
    position: relative;
    transition: background .2s ease;
    flex-shrink: 0;
}
.pr-switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 2px 4px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.04);
}
.pr-switch input:checked + .pr-switch__track {
    background: linear-gradient(135deg, var(--pr-blue), var(--pr-blue-2));
    box-shadow: 0 0 0 4px rgba(95,111,255,0.10);
}
.pr-switch input:checked + .pr-switch__track .pr-switch__thumb {
    transform: translateX(16px);
}
.pr-switch input:focus-visible + .pr-switch__track { outline: 2px solid rgba(95,111,255,.35); outline-offset: 2px; }
.pr-switch__label {
    font-size: 13px;
    color: var(--pr-text-soft);
    font-weight: 500;
}

/* Spacing entre senha → switch → botão */
.pr-login-remember { margin: 4px 0 16px; }

/* Buttons */
.pr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    border-radius: var(--pr-radius-sm);
    border: 1.5px solid transparent;
    background: var(--pr-surface);
    color: var(--pr-text);
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.pr-btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.pr-btn:active { transform: translateY(1px); }
.pr-btn--primary {
    background: linear-gradient(135deg, var(--pr-header) 0%, var(--pr-primary-hover) 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 8px 16px -4px rgba(27,40,69,0.35), 0 1px 2px rgba(15,23,42,0.1);
    position: relative;
    overflow: hidden;
}
.pr-btn--primary:hover {
    background: linear-gradient(135deg, var(--pr-primary-hover) 0%, var(--pr-header) 100%);
    box-shadow: 0 12px 24px -4px rgba(27,40,69,0.45);
    transform: translateY(-1px);
}

/* Shimmer effect — varredura de luz ao hover */
.pr-btn--shimmer { overflow: hidden; }
.pr-btn--shimmer::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%);
    transition: left .6s ease;
    pointer-events: none;
}
.pr-btn--shimmer:hover::before { left: 130%; }

/* Seta que desliza no hover */
.pr-btn__arrow {
    width: 16px; height: 16px;
    transition: transform .25s ease;
}
.pr-btn--shimmer:hover .pr-btn__arrow { transform: translateX(4px); }
.pr-btn__label { position: relative; z-index: 1; }
.pr-btn--ghost { background: var(--pr-surface); border-color: var(--pr-border); }
.pr-btn--ghost:hover { background: var(--pr-surface-soft); border-color: #CBD5E1; }
.pr-btn--block { width: 100%; }
.pr-btn--lg { padding: 14px 24px; font-size: 15px; }

.pr-page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pr-page-title h2, .pr-page-title h3 { font-family: var(--pr-font-display); margin: 0; letter-spacing: -0.3px; }

/* ==========================================================================
   "Em construção" — minimalista
   ========================================================================== */
.pr-soon {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--pr-bg);
}
.pr-soon__inner {
    max-width: 420px;
    text-align: center;
}
.pr-soon__logo {
    height: 28px;
    width: auto;
    margin-bottom: 36px;
    opacity: 0.85;
    image-rendering: -webkit-optimize-contrast;
}
.pr-soon__title {
    font-family: var(--pr-font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--pr-text);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}
.pr-soon__sub {
    font-size: 14.5px;
    color: var(--pr-text-soft);
    line-height: 1.6;
    margin: 0 0 32px;
}
.pr-soon__logout {
    display: inline-block;
    padding: 10px 20px;
    font-size: 13.5px;
    color: var(--pr-text-soft);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    background: var(--pr-surface);
    transition: border-color .15s ease, color .15s ease;
}
.pr-soon__logout:hover {
    border-color: var(--pr-text-soft);
    color: var(--pr-text);
}

/* ==========================================================================
   Empty state — Dashboard em construção (deprecado, mantido por compat)
   ========================================================================== */
.pr-empty {
    max-width: 620px;
    margin: 40px auto 0;
    background: var(--pr-surface);
    border-radius: var(--pr-radius-xl);
    box-shadow: var(--pr-shadow-lg);
    padding: 56px 48px 40px;
    text-align: center;
    border: 1px solid var(--pr-border-soft);
    position: relative;
    overflow: hidden;
}
.pr-empty::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(95,111,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
.pr-empty__icon {
    width: 96px; height: 96px;
    margin: 0 auto 28px;
    background: linear-gradient(135deg, var(--pr-blue) 0%, var(--pr-purple) 100%);
    color: #fff;
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px -8px rgba(95,111,255,0.5), 0 4px 8px rgba(15,23,42,0.08);
    position: relative;
    animation: emptyIconFloat 4s ease-in-out infinite;
}
.pr-empty__icon svg { width: 52px; height: 52px; }
@keyframes emptyIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.pr-empty__title {
    font-family: var(--pr-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--pr-text);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
    position: relative;
}
.pr-empty__sub {
    font-size: 14.5px;
    color: var(--pr-text-soft);
    line-height: 1.6;
    margin: 0 auto 28px;
    max-width: 440px;
    position: relative;
}
.pr-empty__hello {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    border-radius: 999px;
    font-size: 13px;
    color: var(--pr-text-soft);
    margin-bottom: 32px;
    position: relative;
}
.pr-empty__hello strong { color: var(--pr-text); font-weight: 600; }
.pr-empty__hello-dot {
    width: 8px; height: 8px;
    background: var(--pr-success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.pr-empty__hello-papel {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
    border-radius: 6px;
    margin-left: 4px;
}
.pr-empty__actions {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    position: relative;
}
.pr-empty__progress {
    border-top: 1px solid var(--pr-border-soft);
    padding-top: 24px;
    position: relative;
}
.pr-empty__progress-track {
    width: 100%;
    max-width: 320px;
    height: 6px;
    margin: 0 auto 10px;
    background: var(--pr-bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.pr-empty__progress-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, var(--pr-blue), var(--pr-purple));
    border-radius: 999px;
    animation: emptyProgress 2.4s ease-in-out infinite;
}
@keyframes emptyProgress {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}
.pr-empty__progress small {
    font-size: 11.5px;
    color: var(--pr-text-mute);
    letter-spacing: 0.3px;
}
@media (max-width: 600px) {
    .pr-empty { padding: 40px 24px 32px; margin-top: 16px; }
    .pr-empty__title { font-size: 24px; }
    .pr-empty__icon { width: 80px; height: 80px; }
    .pr-empty__icon svg { width: 42px; height: 42px; }
}

/* ==========================================================================
   LOGIN — premium
   ========================================================================== */

.pr-login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 45fr 55fr; /* hero 45% | login 55% */
    background: var(--pr-bg);
}
@media (max-width: 980px) {
    .pr-login-page {
        grid-template-columns: 1fr;
        background: var(--pr-bg); /* garante cinza claro, sem vazar gradient */
    }
}

/* ---- Lado esquerdo: hero ---- */
.pr-login-hero {
    position: relative;
    background: linear-gradient(135deg, #0F172A 0%, #1B2845 50%, #16213A 100%);
    color: #fff;
    padding: 56px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 100vh;
}
@media (max-width: 980px) { .pr-login-hero { display: none; } }

/* Glow blobs animados */
.pr-login-hero::before,
.pr-login-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    animation: floatBlob 18s ease-in-out infinite;
}
.pr-login-hero::before {
    width: 520px; height: 520px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, #5F6FFF 0%, transparent 70%);
}
.pr-login-hero::after {
    width: 460px; height: 460px;
    bottom: -100px; right: -80px;
    background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
    animation-delay: -9s;
}
@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.05); }
    66%      { transform: translate(-20px, 30px) scale(.95); }
}

/* Grid pattern overlay */
.pr-login-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    pointer-events: none;
}

.pr-login-hero__top {
    position: relative; z-index: 1;
    display: flex;
    justify-content: flex-end; /* logo à DIREITA no desktop */
}
.pr-login-hero__logo img {
    height: 48px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
    image-rendering: -webkit-optimize-contrast; /* suaviza upscale */
    -ms-interpolation-mode: bicubic;
}

.pr-login-hero__center { position: relative; z-index: 1; max-width: 480px; }
.pr-login-hero__title {
    font-family: var(--pr-font-display);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pr-login-hero__sub {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.75);
    margin: 0 0 32px;
    max-width: 420px;
}

/* Features list */
.pr-login-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pr-login-features li {
    display: flex; align-items: center; gap: 14px;
    font-size: 14px;
    color: rgba(255,255,255,.85);
}
.pr-login-features__dot {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-login-features__dot svg { width: 18px; height: 18px; stroke: #fff; }

.pr-login-hero__bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.pr-login-hero__bottom small { color: rgba(255,255,255,.4); font-size: 12px; }
.pr-login-hero__badges { display: flex; gap: 10px; }
.pr-login-hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    font-size: 11px;
    color: rgba(255,255,255,.7);
}
.pr-login-hero__badge svg { width: 12px; height: 12px; }

/* ---- Lado direito: form ---- */
.pr-login-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px;
    position: relative;
    background:
        radial-gradient(ellipse at top right, rgba(95,111,255,.06), transparent 60%),
        var(--pr-bg);
}
/* Mobile: login alinhado ao topo + fundo limpo (sem gradient radial vazando) */
@media (max-width: 980px) {
    .pr-login-form-wrap {
        align-items: flex-start;
        padding: 24px 16px 40px;
        background: var(--pr-bg);
    }
}

.pr-login-card {
    width: 100%; max-width: 420px;
    background: var(--pr-surface);
    border-radius: 18px;
    border: 1px solid var(--pr-border-soft);
    box-shadow:
        0 14px 36px -12px rgba(15,23,42,0.16),
        0 4px 10px -4px rgba(15,23,42,0.06);
    padding: 36px 34px;
    position: relative;
}

/* Badge "Painel Premium" acima do título */
.pr-login-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: linear-gradient(135deg, var(--pr-blue-soft), rgba(237,233,254,.7));
    border: 1px solid rgba(95,111,255,0.18);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--pr-blue-2);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 18px;
}
.pr-login-card__badge strong { font-weight: 700; }
.pr-login-card__badge-dot {
    width: 6px; height: 6px;
    background: var(--pr-blue);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(95,111,255,0.18);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(95,111,255,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(95,111,255,0.05); }
}
.pr-login-card__logo-mobile {
    display: none;
    text-align: center;
    margin-bottom: 22px;
}
.pr-login-card__logo-mobile img {
    height: 36px;
    width: auto;
    image-rendering: -webkit-optimize-contrast;
    opacity: 0.92;
}
@media (max-width: 980px) { .pr-login-card__logo-mobile { display: block; } }

.pr-login-card h2 {
    font-family: var(--pr-font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--pr-text);
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.pr-login-card p {
    font-size: 13.5px;
    color: var(--pr-text-soft);
    margin: 0 0 20px;
    line-height: 1.45;
}

.pr-login-field { margin-bottom: 12px; }
.pr-login-field label {
    display: block;
    font-size: 12px;
    color: var(--pr-text-soft);
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
.pr-login-field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pr-login-field__label-row label { margin-bottom: 0; }
.pr-login-forgot {
    font-size: 12px;
    color: var(--pr-blue-2);
    font-weight: 500;
    transition: color .15s ease;
}
.pr-login-forgot:hover { color: var(--pr-blue); text-decoration: underline; }

.pr-login-error {
    background: var(--pr-danger-soft);
    color: #B91C1C;
    padding: 10px 14px;
    border-radius: var(--pr-radius-sm);
    font-size: 12.5px;
    margin-bottom: 16px;
    border-left: 3px solid var(--pr-danger);
    display: flex; align-items: center; gap: 9px;
    animation: shakeIn .45s cubic-bezier(.36,.07,.19,.97) both;
}
.pr-login-error svg { width: 18px; height: 18px; flex-shrink: 0; }
@keyframes shakeIn {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80%      { transform: translateX(5px); }
}

.pr-login-card__submit { margin-top: 18px; }

.pr-login-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--pr-border-soft);
    text-align: center;
    font-size: 12px;
    color: var(--pr-text-mute);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pr-login-foot__version {
    font-size: 11px;
    color: var(--pr-text-mute);
    opacity: 0.85;
}

/* Link voltar (esqueci senha → login) */
.pr-login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pr-text-soft);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 22px;
    transition: color .15s ease, gap .15s ease;
}
.pr-login-back:hover { color: var(--pr-blue-2); gap: 10px; }

/* Estado de sucesso (esqueci senha) */
.pr-login-success {
    background: var(--pr-success-soft);
    color: #065F46;
    padding: 12px 16px;
    border-radius: var(--pr-radius-sm);
    font-size: 13px;
    margin-top: 16px;
    border-left: 3px solid var(--pr-success);
    display: flex; align-items: center; gap: 10px;
}
.pr-login-success svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Otimizações mobile */
@media (max-width: 980px) {
    .pr-login-card {
        max-width: 420px;
        box-shadow: 0 6px 20px -8px rgba(15,23,42,0.10);
    }
    /* iOS Safari: input 16px+ não dá zoom ao focar */
    .pr-input { font-size: 16px; }
    /* Tap targets generosos */
    .pr-btn { min-height: 46px; }
    .pr-input-wrap__toggle { width: 36px; height: 36px; }
}
@media (max-width: 600px) {
    .pr-login-form-wrap { padding: 18px 14px 32px; }
    .pr-login-card { padding: 28px 22px; border-radius: 16px; max-width: 100%; }
    .pr-login-card h2 { font-size: 20px; }
    .pr-login-card p { font-size: 13px; margin-bottom: 18px; }
    .pr-login-card__logo-mobile { margin-bottom: 18px; }
    .pr-login-card__logo-mobile img { height: 32px; }
    .pr-login-foot { margin-top: 16px; padding-top: 14px; font-size: 11.5px; }
    .pr-login-card__submit { margin-top: 14px; }
    .pr-input { padding: 12px 14px; }
    .pr-input-wrap .pr-input { padding-left: 42px; }
    .pr-input-wrap--with-toggle .pr-input { padding-right: 44px; }
}

/* Respeita preferências de acessibilidade — reduz animações */
@media (prefers-reduced-motion: reduce) {
    .pr-login-card,
    .pr-login-card > *,
    .pr-login-hero::before,
    .pr-login-hero::after { animation: none !important; }
    .pr-login-card > * { opacity: 1; transform: none; }
}

/* Anima entrada do card (chega em cascata: card → conteúdo) */
.pr-login-card { animation: cardIn .55s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger fade-in dos elementos internos do card */
.pr-login-card > * { opacity: 0; transform: translateY(8px); animation: cardItemIn .5s ease-out forwards; }
.pr-login-card > *:nth-child(1) { animation-delay: 0.15s; }
.pr-login-card > *:nth-child(2) { animation-delay: 0.22s; }
.pr-login-card > *:nth-child(3) { animation-delay: 0.30s; }
.pr-login-card > *:nth-child(4) { animation-delay: 0.36s; }
.pr-login-card > *:nth-child(5) { animation-delay: 0.42s; }
.pr-login-card > *:nth-child(6) { animation-delay: 0.48s; }
.pr-login-card > *:nth-child(7) { animation-delay: 0.54s; }
@keyframes cardItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TIER 1 — Caps Lock, banner de sessão expirada, loading state
   ============================================================ */

/* Banner informativo (azul) — usado pra "Sua sessão expirou" */
.pr-login-info {
    background: rgba(59,130,246,0.08);
    color: #1D4ED8;
    padding: 10px 14px;
    border-radius: var(--pr-radius-sm);
    font-size: 12.5px;
    margin-bottom: 14px;
    border-left: 3px solid #3B82F6;
    display: flex; align-items: center; gap: 9px;
    line-height: 1.4;
}
.pr-login-info svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Aviso Caps Lock — discreto, aparece abaixo do input */
.pr-login-capslock {
    margin-top: 8px;
    padding: 7px 11px;
    background: #FEF3C7;
    color: #92400E;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #FDE68A;
    animation: capsIn .25s ease-out;
}
.pr-login-capslock svg { width: 13px; height: 13px; }
.pr-login-capslock[hidden] { display: none; }
@keyframes capsIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spinner do botão Entrar (loading) */
.pr-btn__spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: prSpin .7s linear infinite;
    flex-shrink: 0;
}
.pr-btn.is-loading .pr-btn__spinner { display: inline-block; }
.pr-btn.is-loading .pr-btn__arrow { display: none !important; }
.pr-btn.is-loading {
    cursor: progress;
    opacity: 0.92;
    pointer-events: none;
}

/* Estado bloqueado (rate limit) — visual distinto do disabled normal */
.pr-btn.is-blocked {
    background: #94A3B8 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.85;
}
.pr-btn.is-blocked .pr-btn__spinner { display: none; }

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

/* Fallback: respeitar preferência de menos animação */
@media (prefers-reduced-motion: reduce) {
    .pr-btn__spinner { animation-duration: 1.4s; }
    .pr-login-capslock { animation: none; }
}

/* ==========================================================================
   [LAYOUT MOCK] Toolbar de filtros + Grid de Monitores
   ========================================================================== */

/* Card único toolbar + grid (igual mockup) — borda externa, sombra leve.
   min-width: 0 + max-width: 100% são CRÍTICOS no mobile: sem eles o shell
   herda min-content do grid (cards de monitor) e estoura o viewport. */
.pr-monitor-shell {
    margin-top: 26px;
    background: var(--pr-surface);                  /* fallback enquanto interior se pinta */
    border: 1px solid #E2E5EB;
    border-radius: var(--pr-radius);
    overflow: hidden;                               /* corta os cantos do interior */
    box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    min-width: 0;
    max-width: 100%;
}

.pr-toolbar {
    background: var(--pr-surface);                  /* topo branco */
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
/* Container dos filtros — no desktop é um simples flex; no mobile vira chip scroll */
.pr-toolbar__filters {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.pr-toolbar__search {
    position: relative;
    flex: 1 1 220px;
    min-width: 200px;
}
.pr-toolbar__search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
    stroke-width: 2;
    pointer-events: none;
}
.pr-toolbar__input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--pr-border);
    border-radius: 999px;
    background: var(--pr-surface-soft);
    font-family: inherit; font-size: 13px;
    color: var(--pr-text);
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.pr-toolbar__input:focus { border-color: var(--pr-shell-active-fg); background: var(--pr-surface); }
.pr-toolbar__input::placeholder { color: var(--pr-text-mute); }

/* ==========================================================================
   pr-pdrop — Dropdown premium custom (substitui <select> nativo)
   ========================================================================== */
.pr-pdrop {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}
.pr-pdrop__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px 10px 16px;
    border: 1px solid var(--pr-border);
    border-radius: 999px;
    background: var(--pr-surface);
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--pr-text-soft);
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    width: 100%;
    min-width: 132px;
}
.pr-pdrop__btn:hover { border-color: #CBD5E1; }
.pr-pdrop.is-open .pr-pdrop__btn { border-color: var(--pr-shell-active-fg); box-shadow: 0 0 0 3px rgba(91,91,214,0.12); background: var(--pr-surface); }
.pr-pdrop--has-value .pr-pdrop__btn { color: var(--pr-text); border-color: var(--pr-shell-active-fg); background: var(--pr-shell-active-bg); }
.pr-pdrop__label {
    flex: 1;
    text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-pdrop__caret {
    width: 14px; height: 14px;
    color: var(--pr-text-mute);
    flex-shrink: 0;
    transition: transform .2s ease, color .15s ease;
}
.pr-pdrop.is-open .pr-pdrop__caret { transform: rotate(180deg); color: var(--pr-shell-active-fg); }

/* Painel que abre embaixo */
.pr-pdrop__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    background: var(--pr-surface);
    border-radius: 12px;
    box-shadow: 0 12px 32px -4px rgba(15,23,42,0.18), 0 4px 8px rgba(15,23,42,0.06);
    border: 1px solid var(--pr-border-soft);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index: 90;
}
.pr-pdrop.is-open .pr-pdrop__panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Busca dentro do dropdown */
.pr-pdrop__search {
    position: relative;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--pr-border-soft);
    background: var(--pr-surface-soft);
}
.pr-pdrop__search svg {
    position: absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--pr-text-mute);
    pointer-events: none;
    /* z-index acima do input — sem isso o background do input cobre parte da lupa
       e o ícone aparece como "bolinha cortada" (bug reportado pelo Lucas v=142). */
    z-index: 2;
}
.pr-pdrop__search input {
    width: 100%;
    padding: 8px 10px 8px 36px;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    font-family: inherit; font-size: 12.5px;
    color: var(--pr-text);
    background: var(--pr-surface);
    outline: none;
    position: relative; z-index: 1;
}
.pr-pdrop__search input:focus { border-color: var(--pr-shell-active-fg); }

/* Lista de opções */
.pr-pdrop__list {
    list-style: none;
    margin: 0; padding: 6px 0;
    max-height: 260px;
    overflow-y: auto;
}
.pr-pdrop__list::-webkit-scrollbar { width: 8px; }
.pr-pdrop__list::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.pr-pdrop__list li {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--pr-text);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-pdrop__list li:hover { background: var(--pr-surface-soft); }
.pr-pdrop__list li.is-active {
    background: var(--pr-shell-active-bg);
    color: var(--pr-shell-active-fg);
    font-weight: 600;
}

.pr-toolbar__btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    gap: 6px;
    background: var(--pr-shell-navy) !important;
    /* O fundo navy é escuro, então o texto e ícone precisam ser brancos.
       Sem isso, .pr-btn--ghost (que herda color escuro) ficava tom sobre tom no Logs/etc. */
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(27,45,79,0.25);
}
.pr-toolbar__btn:hover { background: #233660 !important; color: #fff !important; }
.pr-toolbar__btn svg { width: 14px; height: 14px; stroke: #fff; }

/* Parte de baixo do shell — cinza-claro envolvendo os TVs (sem border/radius/margin
   próprios porque o pai .pr-monitor-shell já cuida) */
.pr-monitor-grid-wrap {
    background: #F5F6F8;
    padding: 22px 22px 8px;
    border-top: 1px solid #E2E5EB;                  /* divisor visual entre toolbar e grid */
    min-width: 0;                                   /* não cria piso de min-content do grid interno */
}

/* === Grupos Online/Offline na tela de Monitor (pedido do cliente) === */
.pr-mon-group {
    margin-bottom: 22px;
}
.pr-mon-group:last-child { margin-bottom: 0; }
.pr-mon-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}
.pr-mon-group__header:hover { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.06); }
.pr-mon-group__header:focus-visible { outline: 2px solid var(--pr-blue); outline-offset: 2px; }
.pr-mon-group__chevron {
    margin-left: 6px;
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
    transition: transform .25s ease;
    flex-shrink: 0;
}
.pr-mon-group.is-collapsed .pr-mon-group__chevron { transform: rotate(-90deg); }
.pr-mon-group__body {
    overflow: hidden;
    max-height: 8000px;
    transition: max-height .35s ease, opacity .2s ease, padding-top .25s ease;
    opacity: 1;
    padding-top: 14px;
}
.pr-mon-group.is-collapsed .pr-mon-group__body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
}
.pr-mon-group__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.pr-mon-group--online  .pr-mon-group__dot {
    background: var(--pr-success);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
    animation: prPulseDot 2s ease-in-out infinite;
}
.pr-mon-group--offline .pr-mon-group__dot {
    background: var(--pr-danger);
}
.pr-mon-group__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pr-mon-group__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pr-mon-group--online  .pr-mon-group__count {
    background: var(--pr-success-soft);
    color: #065F46;
}
.pr-mon-group--offline .pr-mon-group__count {
    background: var(--pr-danger-soft);
    color: #991B1B;
}
.pr-mon-group__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--pr-text-mute);
    font-size: 12.5px;
    background: var(--pr-surface);
    border: 1px dashed var(--pr-border);
    border-radius: 10px;
}

/* Grid de monitores: itens soltos dentro do wrapper, sem card individual.
   Usa auto-fill pra crescer o número de colunas em telas largas (TVs ficam
   no tamanho do mockup, não gigantes). */
.pr-monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 22px 18px;
    min-width: 0;                          /* grid container respeita o pai */
}
/* Regra antiga de 2-col @640 removida — interferia com os breakpoints novos */

/* Item do grid: SEM fundo, SEM sombra, SEM border (TV+texto soltos sobre o wrapper).
   min-width: 0 é CRÍTICO: sem ele, .pr-mon-card__title com white-space:nowrap
   força o item a expandir além da track 1fr, estourando o viewport. */
.pr-mon-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
    transition: transform .12s ease;
    min-width: 0;
    overflow: hidden;
}
.pr-mon-card__label { min-width: 0; }
.pr-mon-card:hover { transform: translateY(-2px); }

.pr-mon-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
/* TV em si: <img> com o frame transparente como src + preview como background.
   Aspecto natural do PNG mantém vert/horiz; border+shadow desenham o bezel.
   Quando ainda não carregou o preview (.pr-mon-card__tv--loading), mostra um
   skeleton sutil até o IntersectionObserver disparar. */
.pr-mon-card__tv {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.30);
    display: block;
    transition: background-image .2s ease;
}
.pr-mon-card__tv--loading {
    background-color: #1F2937;
    background-image: linear-gradient(110deg, #1F2937 8%, #374151 18%, #1F2937 33%);
    background-size: 200% 100%;
    animation: prTvShimmer 1.6s linear infinite;
}
@keyframes prTvShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-mon-card__tv--loading { animation: none; }
}
.pr-mon-card__tv--horiz {
    width: 100%;
    height: auto;
}
.pr-mon-card__tv--vert {
    width: auto;
    height: 100%;
    max-width: 100%;
}
/* Wrap que envolve a TV+dot — sized às dimensões da TV pro dot ficar
   posicionado relativo à TV real, e não ao thumb (que tem espaço vazio). */
.pr-mon-card__tv-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.pr-mon-card__tv-wrap--horiz {
    width: 82%;
    max-width: 82%;
}
.pr-mon-card__tv-wrap--vert {
    height: 100%;
    max-height: 100%;
}
.pr-mon-card__dot {
    position: absolute;
    top: 14px; left: 14px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--pr-danger);
    box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(239,68,68,.5);
    z-index: 2;
}
.pr-mon-card__label {
    padding: 8px 4px 0;
    text-align: center;
    background: transparent;       /* texto solto sobre o wrapper, sem fundo próprio */
}
.pr-mon-card__title {
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ícone do SO antes do título do card (pedido Lucas — igual à tela antiga) */
.pr-mon-card__os {
    width: 13px; height: 13px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 3px;
    flex-shrink: 0;
}
.pr-mon-card__sub {
    font-size: 11px; font-weight: 500;
    color: var(--pr-text-soft);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pr-monitor-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--pr-text-mute);
    font-size: 13.5px;
}

/* === Empty state premium (reusável) — busca/filtro sem resultados, lista vazia, etc === */
.pr-empty-state {
    grid-column: 1 / -1;
    padding: 56px 24px;
    text-align: center;
    background: var(--pr-surface-soft);
    border: 1px dashed var(--pr-border);
    border-radius: 14px;
    margin: 8px 0;
}
.pr-empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--pr-text-mute);
    box-shadow: 0 4px 12px -2px rgba(15,23,42,0.06);
}
.pr-empty-state__icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.pr-empty-state__title {
    font-family: var(--pr-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--pr-text);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.pr-empty-state__sub {
    font-size: 13.5px;
    color: var(--pr-text-soft);
    margin: 0 0 18px;
    line-height: 1.5;
}
.pr-empty-state__sub strong { color: var(--pr-text); font-weight: 600; }
.pr-empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    color: var(--pr-blue-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pr-empty-state__action:hover { background: var(--pr-blue-soft); border-color: var(--pr-blue); }
.pr-empty-state__action svg { width: 14px; height: 14px; }

/* ==========================================================================
   FAB — Floating Action Button (só visível no mobile)
   ========================================================================== */
.pr-fab {
    display: none;
    position: fixed;
    right: 18px; bottom: 22px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B2D4F 0%, #2A3F6E 100%);
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow:
        0 10px 24px -4px rgba(27,45,79,0.55),
        0 4px 10px rgba(15,23,42,0.18),
        inset 0 1px 0 rgba(255,255,255,0.10);
    z-index: 95;
    align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pr-fab:hover { transform: scale(1.05); box-shadow: 0 14px 30px -4px rgba(27,45,79,0.65), 0 6px 12px rgba(15,23,42,0.22); }
.pr-fab:active { transform: scale(0.96); }
.pr-fab svg { width: 26px; height: 26px; }

/* ==========================================================================
   Header — botão hamburguer (visível só no mobile via media queries abaixo)
   ========================================================================== */
.pr-header__toggle {
    display: none;                       /* só aparece em <=768px */
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    margin-right: 12px;
    border-radius: 6px;
    align-items: center; justify-content: center;
}
.pr-header__toggle:hover { background: rgba(255,255,255,0.10); }
.pr-header__toggle svg { width: 22px; height: 22px; }

/* Overlay escuro atrás do sidebar off-canvas no mobile */
.pr-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 150;
    opacity: 0;
    transition: opacity .25s ease;
}
.pr-sidebar-overlay.is-open { display: block; opacity: 1; }

/* Bloqueia scroll do body quando sidebar mobile aberta */
body.pr-no-scroll { overflow: hidden; }

/* ==========================================================================
   [RESPONSIVO] Breakpoints do dashboard
   ========================================================================== */

/* === Tablet landscape e abaixo (<=1100px): sidebar mais compacta === */
@media (max-width: 1100px) {
    :root { --pr-sidebar-w: 140px; }
    .pr-sidebar__item a { font-size: 11.5px; padding: 13px 6px; gap: 5px; }
    .pr-sidebar__item svg { width: 20px; height: 20px; }
    .pr-sidebar__avatar-btn { width: 52px; height: 52px; font-size: 20px; }

    .pr-content { padding: 24px 24px 32px; }
    .pr-header { padding: 20px 24px 0; }
    .pr-kpis--3 { gap: 14px; }
    .pr-kpi { padding: 18px; gap: 14px; }
    .pr-kpi__icon { width: 48px; height: 48px; }
    .pr-kpi__icon svg { width: 24px; height: 24px; }
    .pr-kpi__num { font-size: 28px; }
}

/* === Tablet portrait (<=900px): KPIs viram 2 colunas === */
@media (max-width: 900px) {
    .pr-kpis--3 { grid-template-columns: repeat(2, 1fr); }
    .pr-kpis--overlap { margin-top: -34px; }
}

/* ==========================================================================
   [RESPONSIVO] Safety net contra horizontal overflow
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100vw; }

/* === Tablet portrait (<=768px): hamburger + sidebar off-canvas + FAB === */
/* Esta faixa cobre tablets em portrait (~600-768px) E celulares — mas SEM */
/* forçar 2 colunas. Auto-fill cuida da quantidade certa em cada tamanho. */
@media (max-width: 768px) {
    /* === [FIX RAIZ] Trava o grid track no tamanho do container ===
       O default grid-template-columns: 1fr usa min-width: auto = min-content
       da .pr-main, que é flex e contém uma toolbar com search + 3 dropdowns
       que não encolhem. Min-content = ~462px → estourava o viewport 375px.
       minmax(0, 1fr) anula esse min implícito da track. */
    .pr-app { grid-template-columns: minmax(0, 1fr); }

    /* === [FIX RAIZ] Anula o min-width:auto do grid item .pr-main ===
       Esta regra sozinha colapsa a coluna de 462px → 375px e elimina
       todo o overflow horizontal do header, KPIs e search. */
    .pr-main { min-width: 0; }

    /* Sidebar off-canvas */
    .pr-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 240px;
        height: 100vh;
        transform: translateX(-110%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
        box-shadow: 4px 0 24px rgba(15,23,42,0.25);
    }
    .pr-sidebar.is-open { transform: translateX(0); }

    /* Header refinado: hamburger + título + logo (todos visíveis) */
    .pr-header__toggle { display: inline-flex; }
    .pr-header {
        padding: 0 14px; height: 60px;
        align-items: center;
        justify-content: flex-start;
    }
    .pr-header__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 17px; font-weight: 700;
        text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pr-header__logo {
        /* flex-shrink:1 (default) — permite encolher quando o título for longo (v=147 fix).
           Antes era flex-shrink:0 e o logo vazava 22-107px além do viewport em páginas
           com título longo (Colaboradores, Monitoramento, Player Download). */
        flex-shrink: 1;
        min-width: 0;
        max-width: 130px;
        margin-left: 10px;
    }
    .pr-header__logo img { height: 20px; opacity: 1; display: block; max-width: 100%; width: auto; }
    /* O bloco da direita precisa permitir encolher pra o título dominar o espaço */
    .pr-header__right { min-width: 0; flex-shrink: 1; }

    /* Content padding compacto (gap menor entre header e KPIs) + padding-bottom pro FAB */
    .pr-content { padding: 8px 14px 80px; min-width: 0; }
    .pr-monitor-wrap { min-width: 0; max-width: 100%; }

    /* === KPIs compactos em 3 colunas (ÍCONE LADO ESQUERDO + texto direita) === */
    .pr-kpis--3 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,1fr) força respeitar a track */
        gap: 10px;
        margin: 0 0 6px;                                     /* bottom apertado; top vem do --overlap */
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    .pr-kpis--3 .pr-kpi {
        flex: unset;
        min-width: 0; max-width: none;
        padding: 6px 10px;                                   /* vertical apertado, horizontal mantido */
        gap: 8px;
        flex-direction: row;                                 /* layout horizontal: ícone esquerda */
        align-items: center;
        justify-content: flex-start;
        border-radius: 12px;
    }
    .pr-kpis--3 .pr-kpi > div:last-child { min-width: 0; flex: 1; }
    .pr-kpis--overlap { margin-top: 8px; }                   /* gap apertado entre header e KPIs */
    /* Sobrescreve o margin-top: 26px do desktop pra apertar o shell embaixo dos KPIs */
    .pr-monitor-shell { margin-top: 10px; }
    .pr-kpi__icon { width: 36px; height: 36px; border-radius: 9px; box-shadow: none; flex-shrink: 0; }
    .pr-kpi__icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
    .pr-kpi__num { font-size: 19px; letter-spacing: -0.3px; line-height: 1; }
    .pr-kpi__label {
        font-size: 10px; margin-top: 3px; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pr-kpi::before { display: none; }

    /* === Toolbar premium: BLOCK layout no mobile (não flex)
         Eliminei flex column + flex:1 1 100% + margin que era a fonte do
         bug do search saindo pra fora. Block + width 100% + padding no
         próprio toolbar resolve cirurgicamente. === */
    .pr-toolbar {
        display: block;
        padding: 12px 14px 10px;                   /* padding HORIZONTAL no toolbar */
        min-width: 0;
    }
    .pr-toolbar__search {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px 0;                        /* só espaço pros filtros abaixo */
        box-sizing: border-box;
    }
    .pr-toolbar__input { width: 100%; min-width: 0; box-sizing: border-box; }
    /* Filtros: scroll horizontal cobrindo toda a largura do shell.
       Margin negativa cancela o padding do toolbar pra chips colarem nas bordas. */
    .pr-toolbar__filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -14px;
        padding: 0 14px 2px;
        gap: 8px;
        scroll-snap-type: x proximity;
        min-width: 0;
    }
    .pr-toolbar__filters::-webkit-scrollbar { display: none; }
    .pr-pdrop { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; }
    .pr-pdrop__btn { padding: 8px 14px; font-size: 12.5px; min-width: 0; white-space: nowrap; }
    .pr-pdrop__panel { min-width: 220px; left: 0; right: auto; }
    .pr-toolbar__btn { display: none; }

    .pr-fab { display: inline-flex; }

    /* === Grid de monitores: auto-fill — SEM 2-col forçado ===
       Container do thumb 16:10 e TV horizontal 100% (frame da TV bem enquadrado). */
    .pr-monitor-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px 10px;
    }
    .pr-monitor-grid-wrap { padding: 14px 12px 10px; }
    .pr-mon-card__thumb { aspect-ratio: 16 / 10; }
    .pr-mon-card__tv--horiz { width: 100%; height: auto; }
    .pr-mon-card__tv--vert { width: auto; height: 100%; }
    .pr-mon-card__tv-wrap--horiz { width: 100%; max-width: 100%; }
    .pr-mon-card__dot { top: 10px; left: 10px; width: 8px; height: 8px; }
    .pr-mon-card__label { padding-top: 6px; }
    .pr-mon-card__title { font-size: 11.5px; }
    .pr-mon-card__sub { font-size: 10.5px; }

    .pr-profile-dropdown { width: 220px; max-width: 220px; min-width: 220px; }
}

/* === Celular (<=600px): apertar ainda mais — menos padding, fonts menores === */
@media (max-width: 600px) {
    .pr-content { padding: 16px 10px 80px; }
    .pr-monitor-grid-wrap { padding: 12px 10px 8px; }
    .pr-monitor-grid {
        /* Em celular o min vira menor pra caber 2 cols mesmo em 360px */
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px 8px;
    }
}

/* === Celular pequeno (<=420px): garantir 2 colunas no iPhone SE/Mini === */
@media (max-width: 420px) {
    .pr-header { padding: 0 12px; height: 56px; }
    .pr-header__title { font-size: 16px; }
    .pr-header__logo img { height: 18px; }
    .pr-content { padding: 6px 8px 80px; }

    /* KPIs ainda mais apertados — mas mantendo layout horizontal */
    .pr-kpis--3 { gap: 6px; margin: 0 0 5px; }
    .pr-kpis--3 .pr-kpi { padding: 5px 8px; gap: 6px; }
    .pr-kpi__icon { width: 32px; height: 32px; border-radius: 8px; }
    .pr-kpi__icon svg { width: 16px; height: 16px; }
    .pr-kpi__num { font-size: 17px; }
    .pr-kpi__label { font-size: 9.5px; }
    .pr-kpis--overlap { margin-top: 6px; }
    .pr-monitor-shell { margin-top: 8px; }

    /* Grid 2 colunas exatas (fix em width pequena) */
    .pr-monitor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 8px;
    }
    .pr-monitor-grid-wrap { padding: 10px 8px 6px; }

    .pr-fab { width: 52px; height: 52px; right: 14px; bottom: 18px; }
    .pr-fab svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   MODAL — overlay + caixa branca centralizada + header com ícone navy
   ========================================================================== */
.pr-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    /* SEM display:flex — flex item filho ignora max-height quando conteúdo
       é maior. Centralização agora é via position:fixed + transform no modal. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pr-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Confirm tem root próprio EMPILHADO acima do modal principal — assim abrir
   um confirm não fecha/sobrescreve o modal que estava aberto embaixo. */
.pr-modal-backdrop--confirm { z-index: 250; }

/* Posicionamento absoluto centralizado — mesmo padrão do slide-over que funciona */
.pr-modal {
    position: fixed;
    top: 50%; left: 50%;
    width: calc(100% - 48px);
    max-width: 760px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px -12px rgba(15,23,42,0.40);
    display: flex; flex-direction: column;
    /* Fechado: deslocado pra baixo + escala menor */
    transform: translate(-50%, calc(-50% + 24px)) scale(.98);
    transition: transform .32s cubic-bezier(.34,1.4,.64,1);
}
.pr-modal-backdrop.is-open .pr-modal {
    transform: translate(-50%, -50%) scale(1);
}
/* Modais grandes (form, lista, estatísticas, telemetria, mídias) — usa
   top/bottom explícitos pra travar altura de forma 100% determinística.
   Override do top: 50% + translate Y do .pr-modal base. */
.pr-modal--full {
    top: 5vh !important;
    bottom: 5vh !important;
    height: auto !important;
    max-height: 90vh !important;
    transform: translateX(-50%) translateY(24px) scale(.98);
}
.pr-modal-backdrop.is-open .pr-modal--full {
    transform: translateX(-50%) translateY(0) scale(1);
}
/* CRÍTICO: nos modais com <form> envolvendo body+footer (monitor-form, copiar-form),
   o form precisa PARTICIPAR da cadeia flex. Sem isso o form vira bloco normal
   e cresce com o conteúdo, fazendo o body não ter altura limitada e o footer
   sair do viewport. Esta é a regra que estava faltando — descoberta pelo Claude
   web depois de medir o DOM real (bodyParentTag: FORM). */
.pr-modal--full > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* === SCROLLBAR PREMIUM GLOBAL — fina, sutil, sem setinhas ===
   Aplicada em TODAS as áreas scrolláveis do /premium (slide-over, modais,
   listas, grid, etc). Universal pra pegar elementos que estão fora do .pr-app
   (modal-root) e qualquer container futuro. */

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
    transition: background .15s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}
::-webkit-scrollbar-button {
    display: none;             /* tira as setinhas up/down */
    width: 0; height: 0;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

/* === LOADING state no modal — mostrado imediatamente enquanto AJAX busca o form ===
   Elimina sensação de delay: usuário clica → modal abre na hora com spinner. */
.pr-modal__loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.pr-modal__loading-spinner {
    width: 42px; height: 42px;
    border: 3px solid var(--pr-border);
    border-top-color: var(--pr-blue);
    border-radius: 50%;
    animation: prSpin .7s linear infinite;
}

.pr-modal__header {
    display: flex; align-items: center; gap: 14px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pr-border-soft);
    flex-shrink: 0;                          /* header não encolhe na faixa flex */
}
.pr-modal__header-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--pr-shell-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-modal__header-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.pr-modal__header-text { flex: 1; min-width: 0; }
.pr-modal__title {
    font-family: var(--pr-font-display);
    font-size: 18px; font-weight: 700;
    color: var(--pr-text);
    margin: 0; line-height: 1.2;
    letter-spacing: -0.2px;
}
.pr-modal__subtitle {
    font-size: 13px; color: var(--pr-text-soft);
    margin-top: 2px;
}
.pr-modal__close {
    background: transparent; border: 0; cursor: pointer;
    width: 36px; height: 36px; border-radius: 8px;
    color: var(--pr-text-mute);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.pr-modal__close:hover { background: var(--pr-surface-soft); color: var(--pr-text); }
.pr-modal__close svg { width: 20px; height: 20px; }

.pr-modal__body {
    padding: 22px 26px;
    overflow-y: auto;
    flex: 1 1 0;                            /* basis 0 força respeitar a track */
    min-height: 0;                          /* CRÍTICO: sem isso flex item não encolhe */
}

.pr-modal__footer {
    padding: 14px 26px;
    border-top: 1px solid var(--pr-border-soft);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--pr-surface-soft);
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;                          /* footer fica ancorado embaixo */
}

/* === SEÇÕES VISUAIS dentro do modal (substituem as etapas) === */
.pr-section { margin-bottom: 24px; }
.pr-section:last-child { margin-bottom: 0; }
.pr-section__header {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #DDE1E8;
}
.pr-section__icon {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
    display: flex; align-items: center; justify-content: center;
}
.pr-section__icon svg { width: 14px; height: 14px; }
.pr-section__title {
    font-size: 12px; font-weight: 700;
    color: var(--pr-text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    /* Quando o título é standalone (sem .pr-section__header wrapper) precisa de
       respiro entre ele e o primeiro campo do .pr-form-grid abaixo. */
    display: block;
    margin-bottom: 18px;
}
.pr-section__header .pr-section__title { margin-bottom: 0; }

/* === FORM GRID — multi-col responsivo === */
.pr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.pr-form-grid:last-child { margin-bottom: 0; }
.pr-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-form-grid--full { grid-template-columns: 1fr; }

.pr-field {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
}
.pr-field--full { grid-column: 1 / -1; }
.pr-field > label {
    font-size: 12px; font-weight: 600;
    color: var(--pr-text-soft);
}
.pr-field > label sup { color: var(--pr-danger); margin-left: 2px; font-size: 11px; }
.pr-field > label small { font-weight: 500; color: var(--pr-text-mute); }
.pr-field input[type="text"],
.pr-field input[type="email"],
.pr-field input[type="number"],
.pr-field input[type="password"],
.pr-field input[type="url"],
.pr-field input[type="date"],
.pr-field input[type="time"],
.pr-field input[type="datetime-local"],
.pr-field input[type="search"],
.pr-field input[type="tel"],
.pr-field select,
.pr-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--pr-border-input);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--pr-text);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pr-field textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.pr-field input:focus, .pr-field select:focus, .pr-field textarea:focus {
    outline: none;
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(95,111,255,.15);
}
.pr-field--error input, .pr-field--error select, .pr-field--error textarea {
    border-color: var(--pr-danger);
}
.pr-field__hint { font-size: 11.5px; color: var(--pr-text-mute); }
.pr-field__error { font-size: 11.5px; color: var(--pr-danger); font-weight: 500; }

/* === RADIO PILLS — substitui radio buttons feios === */
.pr-radio-group {
    display: flex; gap: 8px; padding-top: 4px;
}
.pr-radio-pill {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px;
    border: 2px solid var(--pr-border-input);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    font-size: 13.5px; font-weight: 500;
    color: var(--pr-text-soft);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pr-radio-pill input { display: none; }
.pr-radio-pill:has(input:checked) {
    border-color: var(--pr-blue);
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
    font-weight: 600;
}

/* === FILE UPLOAD estilizado === */
.pr-file {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border: 1.5px dashed var(--pr-border);
    border-radius: 8px;
    background: var(--pr-surface-soft);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pr-file:hover { border-color: var(--pr-blue); background: rgba(95,111,255,.04); }
.pr-file input[type="file"] { display: none; }
.pr-file__icon {
    width: 36px; height: 36px;
    border-radius: 8px; background: #fff;
    color: var(--pr-blue);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--pr-border-soft);
}
.pr-file__text { flex: 1; min-width: 0; font-size: 13px; color: var(--pr-text-soft); }
.pr-file__text strong { display: block; color: var(--pr-text); font-weight: 600; margin-bottom: 1px; }

/* === SLIDE-OVER PANEL (lateral direita) — desktop; mobile vira bottom sheet === */
.pr-slideover-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* z-index 215: acima do modal (200), abaixo do confirm (250).
       Necessário porque o slide-over pode ser invocado COM o modal de Grupo aberto
       (bug v=133 → v=134: panel sumia atrás do modal). */
    z-index: 215;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pr-slideover-backdrop.is-open { opacity: 1; pointer-events: auto; }

.pr-slideover {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 440px;
    background: #fff;
    box-shadow: -10px 0 30px rgba(15,23,42,0.20);
    z-index: 220;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    display: flex; flex-direction: column;
}
.pr-slideover.is-open { transform: translateX(0); }

.pr-slideover__header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--pr-border-soft);
    display: flex; align-items: flex-start; gap: 12px;
    flex-shrink: 0;
}
.pr-slideover__title {
    font-family: var(--pr-font-display);
    font-size: 17px; font-weight: 700;
    color: var(--pr-text);
    margin: 0; flex: 1; min-width: 0;
    letter-spacing: -0.2px;
}
.pr-slideover__sub { font-size: 12.5px; color: var(--pr-text-soft); margin-top: 2px; }
.pr-slideover__close {
    background: transparent; border: 0; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
    color: var(--pr-text-mute);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.pr-slideover__close:hover { background: var(--pr-surface-soft); color: var(--pr-text); }
.pr-slideover__close svg { width: 18px; height: 18px; }

.pr-slideover__preview {
    padding: 14px 22px;
    background: var(--pr-shell-bg);
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0;                          /* não rouba altura do scroll abaixo */
    max-height: 170px;                       /* faixa fixa pra preview não estourar */
    overflow: hidden;
}
.pr-slideover__tv-wrap {
    width: 200px;
    height: 130px;                           /* altura explícita — sem aspect-ratio loop */
    display: flex; align-items: center; justify-content: center;
}
.pr-slideover__tv {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #000;
    background-position: center;
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    max-width: 100%;
    max-height: 100%;
}
.pr-slideover__tv--horiz { width: 100%;  height: auto; aspect-ratio: 16/9; }
.pr-slideover__tv--vert  { width: auto;  height: 100%; aspect-ratio: 9/16; }

.pr-slideover__info {
    padding: 14px 22px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    border-bottom: 1px solid var(--pr-border-soft);
    flex-shrink: 0;                          /* ancora o info, scroll fica só no body */
}
.pr-slideover__info-item small {
    display: block;
    font-size: 10.5px; color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.pr-slideover__info-item span {
    font-size: 13px; color: var(--pr-text); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.pr-slideover__info-item--status span {
    display: inline-flex; align-items: center; gap: 6px;
}
.pr-slideover__info-item--status span::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
}
.pr-slideover__info-item--status.is-online span { color: var(--pr-success); }
.pr-slideover__info-item--status.is-online span::before { background: var(--pr-success); box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.pr-slideover__info-item--status.is-offline span { color: var(--pr-danger); }
.pr-slideover__info-item--status.is-offline span::before { background: var(--pr-danger); }

.pr-slideover__body {
    flex: 1 1 0;                             /* basis 0 força flex track a respeitar pai */
    min-height: 0;                           /* CRÍTICO: sem isso o body não encolhe e tira scroll */
    overflow-y: auto;
    padding: 18px 22px;
}

.pr-action-group { margin-bottom: 18px; }
.pr-action-group:last-child { margin-bottom: 0; }
.pr-action-group__title {
    font-size: 10.5px; font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 8px 6px;
}
.pr-action-list {
    background: var(--pr-surface-soft);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pr-border-soft);
}
.pr-action-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: transparent; border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--pr-text);
    font-family: inherit;
    font-size: 13.5px; font-weight: 500;
    transition: background .15s ease;
    border-bottom: 1px solid var(--pr-border-soft);
    text-decoration: none;
}
.pr-action-item:last-child { border-bottom: 0; }
.pr-action-item:hover { background: #fff; }
.pr-action-item__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #fff;
    color: var(--pr-blue);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--pr-border-soft);
}
.pr-action-item__icon svg { width: 16px; height: 16px; stroke-width: 2; }
.pr-action-item__label { flex: 1; min-width: 0; }
.pr-action-item__arrow {
    margin-left: auto;
    color: var(--pr-text-mute);
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.pr-action-item--danger { color: var(--pr-danger); }
.pr-action-item--danger .pr-action-item__icon {
    color: var(--pr-danger);
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.06);
}

/* === CONFIRMAÇÃO (modal pequeno centralizado) === */
.pr-confirm {
    max-width: 420px;
    text-align: center;
}
/* Override pra modal pequeno: body NÃO usa flex grow nem scroll — content size natural.
   Sem isso o body colapsa (flex:1 1 0 com pai sem altura explícita) e a scrollbar
   aparece tentando rolar nada, deixando ícone+título+texto invisíveis. */
.pr-confirm .pr-modal__body {
    padding: 32px 28px 8px;
    flex: 0 0 auto;
    overflow: visible;
    min-height: auto;
}
.pr-confirm__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
}
.pr-confirm__icon--danger  { background: rgba(239,68,68,.10); color: var(--pr-danger); }
.pr-confirm__icon--warning { background: rgba(245,158,11,.10); color: var(--pr-warning); }
.pr-confirm__icon svg { width: 32px; height: 32px; stroke-width: 2; }
.pr-confirm h3 {
    font-family: var(--pr-font-display);
    font-size: 18px; font-weight: 700;
    margin: 0 0 8px; color: var(--pr-text);
}
.pr-confirm p {
    font-size: 13.5px; color: var(--pr-text-soft);
    margin: 0 0 4px; line-height: 1.5;
}
.pr-confirm .pr-modal__footer { justify-content: center; padding: 18px 28px 22px; background: transparent; border-top: 0; }

/* === TOAST (canto superior direito) === */
.pr-toast {
    position: fixed;
    top: 20px; right: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 12px 16px 12px 14px;
    box-shadow: 0 12px 32px -4px rgba(15,23,42,0.18), 0 4px 8px rgba(15,23,42,0.06);
    border: 1px solid var(--pr-border-soft);
    display: flex; align-items: center; gap: 10px;
    z-index: 300;
    transform: translateX(140%);
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    max-width: 380px;
}
.pr-toast.is-show { transform: translateX(0); }
.pr-toast__icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.pr-toast__icon svg { width: 14px; height: 14px; stroke-width: 3; }
.pr-toast--success .pr-toast__icon { background: var(--pr-success); }
.pr-toast--error   .pr-toast__icon { background: var(--pr-danger); }
.pr-toast--info    .pr-toast__icon { background: var(--pr-blue); }
.pr-toast__msg { font-size: 13.5px; color: var(--pr-text); font-weight: 500; }

/* === TABS dentro de modal (Estatísticas etc) === */
.pr-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--pr-border-soft);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tab-btn {
    background: transparent;
    border: 0;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px; font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
    margin-bottom: -1px;
}
.pr-tab-btn:hover { color: var(--pr-text); }
.pr-tab-btn.is-active {
    color: var(--pr-blue-2);
    border-bottom-color: var(--pr-blue);
}

.pr-stats-panel {
    background: var(--pr-surface-soft);
    border-radius: 12px;
    border: 1px solid var(--pr-border-soft);
    padding: 18px;
    text-align: center;
}
.pr-stats-img {
    width: 100%;
    max-width: 720px;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.pr-stats-period {
    margin-top: 12px;
    font-size: 12px;
    color: var(--pr-text-mute);
    letter-spacing: 0.3px;
}
.pr-stats-empty {
    padding: 50px 20px;
    color: var(--pr-text-mute);
    font-size: 13.5px;
}

/* === ESTATÍSTICAS NATIVAS PREMIUM ===
   Substitui o gráfico MRTG cru por cards de métrica + PNG framado dentro. */
.pr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .pr-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.pr-stats-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}
.pr-stats-card__label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.pr-stats-card__value {
    font-family: var(--pr-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--pr-text);
}
.pr-stats-card__value small {
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text-mute);
    margin-left: 2px;
}
.pr-stats-card__sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
}
.pr-stats-card__bar {
    margin-top: 10px;
    height: 5px;
    background: var(--pr-bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.pr-stats-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
.pr-stats-card--green   .pr-stats-card__bar-fill { background: linear-gradient(90deg, var(--pr-success), #059669); }
.pr-stats-card--blue    .pr-stats-card__bar-fill { background: linear-gradient(90deg, var(--pr-blue), var(--pr-blue-2)); }
.pr-stats-card--purple  .pr-stats-card__bar-fill { background: linear-gradient(90deg, var(--pr-purple), #7C3AED); }
.pr-stats-card--orange  .pr-stats-card__bar-fill { background: linear-gradient(90deg, var(--pr-warning), #D97706); }

/* Badge de status integrado no header — substitui o card grande de "Online agora" */
.pr-stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 8px;
}
.pr-stats-badge::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.pr-stats-badge--online {
    background: var(--pr-success-soft);
    color: #065F46;
}
.pr-stats-badge--online::before {
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
    background: var(--pr-success);
    animation: prPulseDot 2s ease-in-out infinite;
}
.pr-stats-badge--offline {
    background: var(--pr-danger-soft);
    color: #991B1B;
}
.pr-stats-badge--offline::before { background: var(--pr-danger); }
@keyframes prPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.04); }
}

/* Frame premium pro PNG MRTG */
.pr-stats-graph {
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.pr-stats-graph__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-stats-graph__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pr-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pr-stats-graph__period {
    font-size: 11.5px;
    color: var(--pr-text-mute);
}

/* === LISTA DE SELEÇÃO (modal Copiar Para/De) — checkbox e radio premium === */
.pr-pick-search {
    position: relative;
    margin-bottom: 12px;
}
.pr-pick-search svg {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
    pointer-events: none;
}
.pr-pick-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1.5px solid var(--pr-border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit; font-size: 13.5px;
    color: var(--pr-text);
    box-sizing: border-box;
    outline: none;
}
.pr-pick-search input:focus { border-color: var(--pr-blue); box-shadow: 0 0 0 3px rgba(95,111,255,.15); }

.pr-pick-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.pr-pick-toolbar__count {
    font-size: 12px; font-weight: 600;
    color: var(--pr-text-soft);
}
.pr-pick-toolbar__count strong { color: var(--pr-blue-2); }
.pr-pick-toolbar__all {
    font-size: 12px; font-weight: 600;
    color: var(--pr-blue-2);
    background: transparent; border: 0; cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.pr-pick-toolbar__all:hover { background: var(--pr-blue-soft); }

.pr-pick-list {
    border-radius: 12px;
    border: 1px solid var(--pr-border-soft);
    background: var(--pr-surface-soft);
    overflow-y: auto;
    max-height: 380px;
}
.pr-midias-pane { display: none; }
.pr-midias-pane.is-active { display: block; }

/* === Modal body em FLEX COLUMN (Adicionar Mídias / Programação) — permite
       que a lista interna ENCHA todo o espaço disponível em vez de ficar
       travada em 380px com área vazia embaixo. === */
.pr-modal__body--flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* body não scrolla — a LISTA interna scrolla */
}
.pr-modal__body--flex > * { flex-shrink: 0; }
.pr-modal__body--flex .pr-midias-pane.is-active {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.pr-modal__body--flex .pr-pick-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.pr-pick-list::-webkit-scrollbar { width: 8px; }
.pr-pick-list::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

.pr-pick-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--pr-border-soft);
    cursor: pointer;
    background: transparent;
    transition: background .15s ease;
    margin: 0;
}
.pr-pick-item:last-child { border-bottom: 0; }
.pr-pick-item:hover { background: #fff; }
.pr-pick-item input { display: none; }
.pr-pick-item__check {
    width: 22px; height: 22px;
    border: 2px solid #94A3B8;        /* mais escuro pra contraste */
    border-radius: 6px;
    flex-shrink: 0;
    background: #fff;
    position: relative;
    transition: all .15s ease;
}
.pr-pick-item:hover .pr-pick-item__check { border-color: var(--pr-blue); }
.pr-pick-item input[type="radio"] + .pr-pick-item__check { border-radius: 50%; }
.pr-pick-item input:checked + .pr-pick-item__check {
    background: var(--pr-blue);
    border-color: var(--pr-blue);
}
.pr-pick-item input[type="radio"]:checked + .pr-pick-item__check::after {
    content: ''; position: absolute; inset: 4px;
    background: #fff; border-radius: 50%;
}
.pr-pick-item input[type="checkbox"]:checked + .pr-pick-item__check::after {
    content: ''; position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pr-pick-item__info { flex: 1; min-width: 0; }
.pr-pick-item__info strong {
    display: block; font-size: 13.5px;
    color: var(--pr-text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-pick-item__info small {
    display: block; font-size: 11.5px;
    color: var(--pr-text-soft); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-pick-item__status {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pr-pick-item__status.is-online  { background: var(--pr-success-soft); color: #065F46; }
.pr-pick-item__status.is-offline { background: var(--pr-danger-soft); color: #991B1B; }
.pr-pick-item__status.is-warning { background: var(--pr-warning-soft); color: #92400E; }

/* === Tabs com contador inline === */
.pr-tab-count {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 22px; height: 18px;
    padding: 0 6px;
    margin-left: 5px;
    background: var(--pr-bg-2);
    color: var(--pr-text-soft);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    transition: background .15s ease, color .15s ease;
}
.pr-tab-btn.is-active .pr-tab-count { background: var(--pr-blue-soft); color: var(--pr-blue-2); }

/* (regras .pr-midias-pane consolidadas mais acima, junto com .pr-pick-list flex) */

/* ==========================================================================
   SUB-NAV TABS — atalhos de ações com ícones coloridos chamativos
   Cada tab tem ícone num quadrado colorido + label embaixo.
   Estilo inspirado no antigo (cliente conservador) mas com tratamento premium.
   ========================================================================== */
.pr-subtabs {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 14px 6px;
    margin: 4px 0 14px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
    overflow-x: auto;
    scrollbar-width: none;
}
.pr-subtabs::-webkit-scrollbar { display: none; }

.pr-subtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 6px;
    background: transparent;
    color: var(--pr-text-soft);
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease, transform .12s ease;
    flex: 1 1 0;
    min-width: 88px;
    border: 0;
    cursor: pointer;
    position: relative;
}
.pr-subtab:hover { background: var(--pr-surface-soft); transform: translateY(-1px); }
.pr-subtab:active { transform: translateY(0); }

.pr-subtab__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.pr-subtab__icon svg { width: 22px; height: 22px; stroke-width: 2.2; }

.pr-subtab__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--pr-text);
    white-space: nowrap;
}
.pr-subtab__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 17px;
    padding: 0 6px;
    background: var(--pr-bg-2);
    color: var(--pr-text-soft);
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* === Cores por tab (ícone sempre colorido, mesmo inativo) === */
.pr-subtab--orange .pr-subtab__icon { background: #FFEDD5; color: #C2410C; }
.pr-subtab--green  .pr-subtab__icon { background: #DCFCE7; color: #15803D; }
.pr-subtab--purple .pr-subtab__icon { background: #EDE9FE; color: #6D28D9; }
.pr-subtab--pink   .pr-subtab__icon { background: #FCE7F3; color: #BE185D; }
.pr-subtab--cyan   .pr-subtab__icon { background: #CFFAFE; color: #0E7490; }

/* Hover deixa o ícone mais saturado */
.pr-subtab--orange:hover .pr-subtab__icon { background: #FED7AA; }
.pr-subtab--green:hover  .pr-subtab__icon { background: #BBF7D0; }
.pr-subtab--purple:hover .pr-subtab__icon { background: #DDD6FE; }
.pr-subtab--pink:hover   .pr-subtab__icon { background: #FBCFE8; }
.pr-subtab--cyan:hover   .pr-subtab__icon { background: #A5F3FC; }

/* === Estado ATIVO — ícone vira COR SÓLIDA + tem glow + label fica em destaque === */
.pr-subtab.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.015) 100%);
}
.pr-subtab.is-active::after {
    content: '';
    position: absolute;
    left: 24px; right: 24px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}
.pr-subtab.is-active .pr-subtab__icon {
    color: #fff;
    transform: scale(1.05);
}
.pr-subtab--orange.is-active .pr-subtab__icon { background: linear-gradient(135deg, #F97316, #EA580C); box-shadow: 0 6px 14px -4px rgba(249,115,22,0.5); }
.pr-subtab--orange.is-active::after { background: #F97316; }
.pr-subtab--green.is-active  .pr-subtab__icon { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 14px -4px rgba(34,197,94,0.5); }
.pr-subtab--green.is-active::after  { background: #22C55E; }
.pr-subtab--purple.is-active .pr-subtab__icon { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 6px 14px -4px rgba(139,92,246,0.5); }
.pr-subtab--purple.is-active::after { background: #8B5CF6; }
.pr-subtab--pink.is-active   .pr-subtab__icon { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 6px 14px -4px rgba(236,72,153,0.5); }
.pr-subtab--pink.is-active::after   { background: #EC4899; }
.pr-subtab--cyan.is-active   .pr-subtab__icon { background: linear-gradient(135deg, #06B6D4, #0891B2); box-shadow: 0 6px 14px -4px rgba(6,182,212,0.5); }
.pr-subtab--cyan.is-active::after   { background: #06B6D4; }

.pr-subtab.is-active .pr-subtab__label { color: var(--pr-text); font-weight: 700; }
.pr-subtab.is-active .pr-subtab__count {
    background: var(--pr-bg-2);
    color: var(--pr-text);
}

/* Responsivo mobile — tabs ficam scroll horizontal */
@media (max-width: 768px) {
    .pr-subtabs { padding: 10px 6px; gap: 4px; }
    .pr-subtab { min-width: 76px; padding: 6px 10px 4px; }
    .pr-subtab__icon { width: 38px; height: 38px; border-radius: 10px; }
    .pr-subtab__icon svg { width: 19px; height: 19px; }
    .pr-subtab__label { font-size: 11.5px; }
}

/* ==========================================================================
   TELA LOCAIS — cards premium com avatar inicial + contador de monitores
   ========================================================================== */
.pr-locais-wrap { position: relative; }

.pr-locais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    min-width: 0;
}
@media (max-width: 768px) {
    .pr-locais-grid { grid-template-columns: 1fr; gap: 10px; }
}

.pr-loc-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    min-width: 0;
}
.pr-loc-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,0.10);
    border-color: #CBD5E1;
}
.pr-loc-card__avatar {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--pr-font-display);
    font-size: 17px; font-weight: 700;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(15,23,42,0.18);
}
.pr-loc-card__body { flex: 1; min-width: 0; }
.pr-loc-card__title {
    font-size: 14px; font-weight: 600;
    color: var(--pr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.pr-loc-card__sub {
    margin-top: 3px;
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-loc-card__sub svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--pr-text-mute); }
.pr-loc-card__mons {
    margin-top: 8px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.pr-loc-card__mon-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.pr-loc-card__mon-badge svg { width: 11px; height: 11px; }
.pr-loc-card__mon-badge--empty { background: var(--pr-bg-2); color: var(--pr-text-mute); }
.pr-loc-card__mon-online {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--pr-text-soft);
}
.pr-loc-card__mon-online strong { color: var(--pr-text); font-weight: 700; }
.pr-loc-card__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.pr-loc-card__dot--on  { background: var(--pr-success); box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.pr-loc-card__dot--off { background: var(--pr-text-mute); }

.pr-loc-card__chevron {
    background: transparent;
    border: 0;
    color: var(--pr-text-mute);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.pr-loc-card:hover .pr-loc-card__chevron { color: var(--pr-text); background: var(--pr-surface-soft); }
.pr-loc-card__chevron svg { width: 14px; height: 14px; }

/* === FORMATO LISTA (linhas) — pedido do cliente, mais conservador ===
   Cada local ocupa uma linha densa com info em colunas + ações inline. */
.pr-locais-list {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
}
.pr-loc-row {
    display: grid;
    grid-template-columns: 60px 1fr 1.2fr 130px 130px;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 22px;
    border-bottom: 1px solid var(--pr-border-soft);
    cursor: pointer;
    transition: background .15s ease;
    min-width: 0;
    position: relative;
}
.pr-loc-row:last-child { border-bottom: 0; }
.pr-loc-row:hover { background: var(--pr-surface-soft); }
/* Barra colorida lateral indicando status — substitui o quadrado colorido */
.pr-loc-row::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transition: opacity .15s ease, width .15s ease;
}
.pr-loc-row--online::before  { background: var(--pr-success); }
.pr-loc-row--offline::before { background: var(--pr-danger); }
.pr-loc-row--neutral::before { background: var(--pr-border); opacity: 0.6; }
.pr-loc-row:hover::before { width: 4px; top: 6px; bottom: 6px; }

.pr-loc-row__id {
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-text-mute);
    font-variant-numeric: tabular-nums;
}
.pr-loc-row__main { min-width: 0; }
.pr-loc-row__title {
    font-size: 13.5px; font-weight: 600;
    color: var(--pr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.pr-loc-row__sub {
    margin-top: 2px;
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-loc-row__sub svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--pr-text-mute); }

.pr-loc-row__contact { min-width: 0; }
.pr-loc-row__contact-name {
    font-size: 12.5px;
    color: var(--pr-text);
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-loc-row__contact-tels {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pr-loc-row__mons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--pr-surface-soft);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    white-space: nowrap;
    justify-self: end;
}
.pr-loc-row__mons strong { color: var(--pr-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-loc-row__mons small { color: var(--pr-text-mute); font-size: 10.5px; }

.pr-loc-row__actions {
    display: flex;
    gap: 4px;
    justify-self: end;
    flex-shrink: 0;
}
.pr-loc-row__act {
    background: transparent;
    border: 1px solid var(--pr-border-soft);
    color: var(--pr-text-soft);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pr-loc-row__act:hover { background: var(--pr-blue-soft); color: var(--pr-blue-2); border-color: rgba(95,111,255,0.25); }
.pr-loc-row__act--danger:hover { background: var(--pr-danger-soft); color: var(--pr-danger); border-color: rgba(239,68,68,0.3); }
.pr-loc-row__act svg { width: 14px; height: 14px; }

/* Responsivo */
@media (max-width: 1100px) {
    .pr-loc-row { grid-template-columns: 1fr 130px 100px; gap: 12px; }
    .pr-loc-row__id, .pr-loc-row__contact { display: none; }
}
@media (max-width: 768px) {
    .pr-loc-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main acts"
            "sub  sub"
            "mons mons";
        gap: 4px 12px;
        padding: 12px 14px 12px 18px;
    }
    .pr-loc-row__id { display: none; }
    .pr-loc-row__main   { grid-area: main; display: block; }
    .pr-loc-row__contact{ grid-area: sub; display: block; }
    .pr-loc-row__mons   { grid-area: mons; justify-self: start; }
    .pr-loc-row__actions{ grid-area: acts; align-self: start; }
    .pr-loc-row__act { width: 32px; height: 32px; }
}

/* === BARRAS — cards com preview mockup === */
.pr-barras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
@media (max-width: 768px) {
    .pr-barras-grid { grid-template-columns: 1fr; }
}
.pr-barra-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
    display: flex; flex-direction: column;
}
.pr-barra-card:hover { box-shadow: 0 8px 20px rgba(15,23,42,0.10); border-color: #CBD5E1; }
.pr-barra-card__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 14px 16px 10px;
    gap: 8px;
    min-width: 0;
}
.pr-barra-card__title { flex: 1; min-width: 0; }
.pr-barra-card__title strong {
    display: block;
    font-size: 14px; font-weight: 600;
    color: var(--pr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-barra-card__title small {
    display: block;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-barra-card__actions { display: flex; gap: 4px; flex-shrink: 0; }
.pr-barra-card__act {
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    color: var(--pr-text-soft);
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pr-barra-card__act:hover { background: #fff; color: var(--pr-text); border-color: #CBD5E1; }
.pr-barra-card__act--danger:hover { background: var(--pr-danger-soft); color: var(--pr-danger); border-color: rgba(239,68,68,.3); }
.pr-barra-card__act svg { width: 13px; height: 13px; }

.pr-barra-card__preview {
    margin: 0 16px;
    background: linear-gradient(135deg, #1B2D4F, #2A3F6E);
    color: #fff;
    border-radius: 6px;
    padding: 9px 12px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.pr-barra-card__slot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-barra-card__slot--center { text-align: center; }

.pr-barra-card__meta {
    display: flex; gap: 6px;
    padding: 12px 16px 14px;
    flex-wrap: wrap;
}
.pr-barra-card__chip {
    font-size: 10.5px;
    color: var(--pr-text-soft);
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    border-radius: 999px;
    padding: 3px 10px;
}
.pr-barra-card__chip strong { color: var(--pr-text); font-weight: 700; }

/* === RECIBOS — lista de locais com valores === */
.pr-recibos-list {
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
}
.pr-recibo-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pr-border-soft);
    background: #fff;
}
.pr-recibo-row:last-child { border-bottom: 0; }
.pr-recibo-row:hover { background: var(--pr-surface-soft); }
.pr-recibo-row__name { flex: 1; min-width: 0; }
.pr-recibo-row__name strong {
    display: block;
    font-size: 13.5px; font-weight: 600;
    color: var(--pr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-recibo-row__name small {
    display: block;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    margin-top: 1px;
}
.pr-recibo-row__value {
    display: flex; align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 240px;
    background: #fff;
    border: 1.5px solid var(--pr-border);
    border-radius: 8px;
    padding: 0 12px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pr-recibo-row__value:focus-within {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(95,111,255,.15);
}
.pr-recibo-row__prefix {
    font-size: 13px; font-weight: 700;
    color: var(--pr-text-mute);
    user-select: none;
}
.pr-recibo-row__value input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0; outline: none;
    padding: 9px 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--pr-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: transparent;
}
@media (max-width: 600px) {
    .pr-recibo-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .pr-recibo-row__value { width: 100%; }
}

/* ==========================================================================
   PROGRAMAÇÃO COMPLETA — playlist do monitor com drag-drop premium
   ========================================================================== */
/* === Pills inline no header da Programação — substituem os stats grandes === */
.pr-prog-header {
    flex-wrap: wrap;
    gap: 10px;
}
.pr-prog-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.pr-prog-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    border-radius: 999px;
    font-size: 14px;
    color: var(--pr-text);
    white-space: nowrap;
}
.pr-prog-pill svg { width: 17px; height: 17px; stroke-width: 2.4; }
.pr-prog-pill strong { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.pr-prog-pill--blue   { background: #EEF2FF; color: #3730A3; border-color: rgba(95,111,255,.18); }
.pr-prog-pill--green  { background: #ECFDF5; color: #065F46; border-color: rgba(16,185,129,.18); }
.pr-prog-pill--purple { background: #F5F3FF; color: #5B21B6; border-color: rgba(139,92,246,.18); }
.pr-prog-pill--orange { background: #FFFBEB; color: #92400E; border-color: rgba(245,158,11,.18); }

.pr-prog-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.pr-prog-stat {
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
}
.pr-prog-stat__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.pr-prog-stat--blue   .pr-prog-stat__icon { background: var(--pr-blue); }
.pr-prog-stat--green  .pr-prog-stat__icon { background: var(--pr-success); }
.pr-prog-stat--purple .pr-prog-stat__icon { background: var(--pr-purple); }
.pr-prog-stat--orange .pr-prog-stat__icon { background: var(--pr-warning); }
.pr-prog-stat__icon svg { width: 16px; height: 16px; }
.pr-prog-stat__num { font-size: 18px; font-weight: 700; line-height: 1; color: var(--pr-text); }
.pr-prog-stat__label { font-size: 10.5px; color: var(--pr-text-soft); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }

.pr-prog-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pr-prog-toolbar__title {
    font-size: 13px; font-weight: 700;
    color: var(--pr-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pr-prog-toolbar__actions { display: flex; gap: 8px; }

.pr-prog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.pr-prog-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
    cursor: grab;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    user-select: none;
}
.pr-prog-card:hover { box-shadow: 0 6px 16px rgba(15,23,42,0.10); border-color: #CBD5E1; }
/* SortableJS — placeholder "fantasma" no lugar original do card arrastado */
.pr-prog-card.is-dragging {
    opacity: 0.25;
    background: var(--pr-blue-soft);
    border-color: var(--pr-blue);
    border-style: dashed;
}
/* Card "voando" junto com o mouse (clone que Sortable cria no body).
   transition:none + position:fixed pra seguir o cursor SEM lag.
   Sem rotate — atrapalha o hit-test do swap. */
.pr-prog-card.is-drag-image {
    box-shadow: 0 18px 40px rgba(15,23,42,0.35);
    transition: none !important;
    cursor: grabbing;
    opacity: 0.95;
    z-index: 1000;
    pointer-events: none;
}

.pr-prog-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #1f2937 url('/img/monitores/chuvisco_horiz.png') center/cover;
}
.pr-prog-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
}
.pr-prog-card__duration {
    position: absolute;
    bottom: 6px; right: 6px;
    padding: 2px 7px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px; font-weight: 600;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.pr-prog-card__order {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.pr-prog-card__menu {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    background: rgba(255,255,255,0.95);
    color: var(--pr-text);
    border: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}
.pr-prog-card:hover .pr-prog-card__menu { opacity: 1; }
.pr-prog-card__menu svg { width: 14px; height: 14px; }

.pr-prog-card__body { padding: 10px 12px; }
.pr-prog-card__title {
    font-size: 12.5px; font-weight: 600;
    color: var(--pr-text);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-prog-card__sub {
    font-size: 11px;
    color: var(--pr-text-soft);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-prog-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pr-prog-card__status::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.pr-prog-card__status--ativo    { background: var(--pr-success-soft); color: #065F46; }
.pr-prog-card__status--expirado { background: var(--pr-warning-soft); color: #92400E; }
.pr-prog-card__status--bloqueado{ background: var(--pr-danger-soft); color: #991B1B; }
.pr-prog-card__status--agendado { background: var(--pr-blue-soft); color: var(--pr-blue-2); }

.pr-prog-empty {
    grid-column: 1 / -1;
    padding: 50px 20px;
    text-align: center;
    color: var(--pr-text-mute);
    font-size: 13.5px;
    background: var(--pr-surface-soft);
    border: 1px dashed var(--pr-border);
    border-radius: 12px;
}

/* Dropdown menu acima do card */
.pr-prog-popmenu {
    position: absolute;
    top: 36px; right: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--pr-shadow-lg);
    border: 1px solid var(--pr-border-soft);
    min-width: 180px;
    z-index: 10;
    overflow: hidden;
    display: none;
}
.pr-prog-popmenu.is-open { display: block; }
/* Dropdown "Opções" do monitor na toolbar da Programação Completa —
   paridade com o menu Opções ⚙ da tela legada */
.pr-prog-optwrap { position: relative; }
.pr-prog-popmenu--toolbar {
    top: calc(100% + 6px); right: 0;
    min-width: 240px;
    z-index: 50;
}
/* Menu do card agora tem 5 itens e estoura a altura do card (que tem
   overflow:hidden pro border-radius da thumb) — libera enquanto aberto */
.pr-prog-card.is-menu-open { overflow: visible; z-index: 30; }
.pr-prog-card.is-menu-open .pr-prog-card__thumb img { border-radius: 11px 11px 0 0; }
.pr-prog-popmenu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit; font-size: 13px;
    color: var(--pr-text);
    text-align: left;
}
.pr-prog-popmenu button:hover { background: var(--pr-surface-soft); }
.pr-prog-popmenu button.is-danger { color: var(--pr-danger); }
.pr-prog-popmenu button svg { width: 14px; height: 14px; }

.pr-pick-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--pr-text-mute);
    font-size: 13px;
}

/* === BOTÕES extras === */
.pr-btn--danger {
    background: var(--pr-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.pr-btn--danger:hover { background: #dc2626 !important; }
.pr-btn.is-loading { cursor: progress; opacity: 0.85; pointer-events: none; }
.pr-btn .pr-btn__spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: prSpin .7s linear infinite;
}
.pr-btn.is-loading .pr-btn__spinner { display: inline-block; }

/* === CARDS DE MONITOR — hover quick-action (desktop) === */
.pr-mon-card { position: relative; }
.pr-mon-card__quick {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--pr-border-soft);
    color: var(--pr-text-soft);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(15,23,42,0.15);
}
.pr-mon-card__quick svg { width: 14px; height: 14px; }
.pr-mon-card:hover .pr-mon-card__quick { opacity: 1; transform: scale(1); }
.pr-mon-card__quick:hover { background: #fff; color: var(--pr-text); }

/* Touch devices: quick sempre visível (sem hover) */
@media (hover: none) {
    .pr-mon-card__quick { opacity: 1; transform: scale(1); }
}

/* === MOBILE para modal e slide-over === */
@media (max-width: 768px) {
    .pr-modal-backdrop { /* padding/align não necessários — modal é fixed */ }
    .pr-modal {
        /* Mobile: bottom-sheet sobe de baixo */
        top: auto; bottom: 0; left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        transform: translate(0, 100%) scale(1);
    }
    .pr-modal-backdrop.is-open .pr-modal { transform: translate(0, 0) scale(1); }
    .pr-modal--full { height: 92vh; }
    .pr-modal__header { padding: 16px 18px 14px; }
    .pr-modal__header-icon { width: 40px; height: 40px; border-radius: 10px; }
    .pr-modal__title { font-size: 16px; }
    .pr-modal__body { padding: 18px; }
    .pr-modal__footer { padding: 12px 18px; border-radius: 0; }
    .pr-form-grid, .pr-form-grid--3 { grid-template-columns: 1fr; gap: 10px; }

    .pr-slideover {
        max-width: 100%;
        top: auto;
        height: 92vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .pr-slideover.is-open { transform: translateY(0); }
    .pr-slideover__preview { padding: 14px 18px; }
    .pr-slideover__tv-wrap { width: 180px; }
    .pr-slideover__info { padding: 12px 18px 6px; }
    .pr-slideover__body { padding: 14px 18px; }

    .pr-confirm .pr-modal__body { padding: 28px 22px 6px; }
    .pr-confirm h3 { font-size: 17px; }
    .pr-toast { top: 14px; right: 14px; left: 14px; max-width: none; }

    /* ===== RESPONSIVO dos modais NOVOS — Editar, Copiar, Estatísticas,
            Programação, Adicionar Mídias ===== */

    /* Form grids (Editar Monitor): single col em vez de 2/3 */
    .pr-form-grid, .pr-form-grid--3 {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* Radio pills (Sim/Não endereço, O que copiar) — empilham */
    .pr-radio-group {
        flex-direction: column;
        gap: 6px;
    }
    .pr-radio-pill { padding: 12px 14px; font-size: 14px; }

    /* File uploads — empilham */
    .pr-file { padding: 12px; }

    /* Header de modais com pills (Programação) — pills vão pra nova linha */
    .pr-prog-header {
        flex-wrap: wrap;
        padding: 14px 16px 12px;
        gap: 8px 12px;
    }
    .pr-prog-pills {
        order: 4;             /* depois do título e antes do close */
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        margin-top: 4px;
        padding-bottom: 2px;
    }
    .pr-prog-pill { padding: 7px 12px; font-size: 12.5px; }
    .pr-prog-pill svg { width: 14px; height: 14px; }
    .pr-prog-pill strong { font-size: 13.5px; }

    /* Programação grid (cards de vídeos) — 2 cols no mobile */
    .pr-prog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* Mostra menu 3-dots sempre (não tem hover no touch) */
    .pr-prog-card__menu { opacity: 1; }

    /* Pick list (Copiar, Adicionar Mídias) — items mais touch-friendly */
    .pr-pick-item {
        padding: 13px 12px;
        gap: 10px;
    }
    .pr-pick-item__info strong { font-size: 14px; }
    .pr-pick-item__info small { font-size: 12px; }
    .pr-pick-item__status { font-size: 10px; padding: 3px 7px; }

    /* Sections (Editar Monitor) — mais compactas */
    .pr-section { margin-bottom: 18px; }
    .pr-section__header { margin-bottom: 10px; padding-bottom: 8px; }
    .pr-section__title { font-size: 11.5px; letter-spacing: 0.4px; }

    /* Stats cards (Estatísticas) — já tem 2 cols, ajusta números */
    .pr-stats-card__value { font-size: 22px; }
    .pr-stats-card__value small { font-size: 11px; }
    .pr-stats-status { padding: 12px 14px; gap: 12px; }
    .pr-stats-status__icon { width: 42px; height: 42px; border-radius: 12px; }
    .pr-stats-status__main { font-size: 16px; }
    .pr-stats-status__sub { font-size: 11.5px; }
    .pr-stats-graph { padding: 14px; }
    .pr-stats-graph__head { margin-bottom: 10px; padding-bottom: 10px; }
    .pr-stats-graph__title { font-size: 11.5px; }

    /* Tabs (Estatísticas, Adicionar Mídias) — scroll horizontal touch */
    .pr-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pr-tab-btn { padding: 10px 14px; font-size: 12.5px; flex-shrink: 0; }
    .pr-tab-count { min-width: 20px; height: 16px; font-size: 10px; }

    /* Footer dos modais — botões um pouco mais compactos mas mantêm horizontais */
    .pr-modal__footer .pr-btn {
        padding: 11px 16px;
        font-size: 13.5px;
    }

    /* Toolbar de pick (count + selecionar visíveis) */
    .pr-pick-toolbar { gap: 8px; flex-wrap: wrap; }

    /* Loading spinner um pouco menor */
    .pr-modal__loading { padding: 40px 16px; }

    /* Iframes (Telemetria, ainda legados) — adjustam altura */
    .pr-modal__body iframe {
        min-height: 50vh !important;
    }
}

/* Mobile pequeno extra (<=420px) — refinamentos pros itens mais densos */
@media (max-width: 420px) {
    .pr-prog-grid { gap: 8px; }
    .pr-prog-card__body { padding: 8px 10px; }
    .pr-prog-card__title { font-size: 11.5px; }
    .pr-prog-card__sub { font-size: 10px; }
    .pr-prog-card__status { font-size: 9.5px; padding: 1px 6px; }

    .pr-stats-grid { gap: 8px; }
    .pr-stats-card { padding: 11px 12px; }
    .pr-stats-card__value { font-size: 19px; }

    .pr-pick-search input { font-size: 13px; padding: 9px 12px 9px 36px; }
    .pr-pick-item { padding: 11px 10px; }
}

/* Touch — quick action no card de monitor + 3-dot na Programação sempre visíveis */
@media (hover: none) {
    .pr-prog-card__menu { opacity: 1; }
    .pr-mon-card__quick { opacity: 1; }
}

/* ==========================================================================
   PR-MID v2.0 — Listagem de Mídias (Vídeos) com Lista + Grade
   ========================================================================== */
.pr-midias-wrap { display: block; }

/* === Quick filter chips bar === */
.pr-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 0;
    background: var(--pr-surface);
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--pr-bg);
    border: 1.5px solid var(--pr-border-soft);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
/* Hover só nos chips INATIVOS — no chip ativo o fundo já é escuro, então forçar
   color:var(--pr-text) (escuro) gerava tom sobre tom e o texto sumia. */
.pr-chip:not(.pr-chip--active):hover { border-color: var(--pr-border); color: var(--pr-text); transform: translateY(-1px); }
.pr-chip--active:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pr-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.pr-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; padding: 0 6px;
    background: rgba(0,0,0,0.06);
    color: inherit;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pr-chip--active {
    background: var(--pr-header);
    border-color: var(--pr-header);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(27,40,69,0.4);
}
.pr-chip--active .pr-chip__count { background: rgba(255,255,255,0.25); color: #fff; }

.pr-chip--green.pr-chip--active   { background: #16A34A; border-color: #16A34A; box-shadow: 0 4px 12px -4px rgba(22,163,74,0.5); }
.pr-chip--blue.pr-chip--active    { background: #2563EB; border-color: #2563EB; box-shadow: 0 4px 12px -4px rgba(37,99,235,0.5); }
.pr-chip--orange.pr-chip--active  { background: #EA580C; border-color: #EA580C; box-shadow: 0 4px 12px -4px rgba(234,88,12,0.5); }
.pr-chip--red.pr-chip--active     { background: #DC2626; border-color: #DC2626; box-shadow: 0 4px 12px -4px rgba(220,38,38,0.5); }
.pr-chip--purple.pr-chip--active  { background: #7C3AED; border-color: #7C3AED; box-shadow: 0 4px 12px -4px rgba(124,58,237,0.5); }
.pr-chip--gray.pr-chip--active    { background: #475569; border-color: #475569; box-shadow: 0 4px 12px -4px rgba(71,85,105,0.5); }
.pr-chip--neutral.pr-chip--active { background: #525B6B; border-color: #525B6B; box-shadow: 0 4px 12px -4px rgba(82,91,107,0.5); }

/* === View toggle button === */
.pr-view-toggle {
    display: inline-flex;
    background: var(--pr-bg);
    border: 1.5px solid var(--pr-border);
    border-radius: 9px;
    padding: 3px;
}
.pr-view-toggle__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent;
    border: 0; border-radius: 6px;
    color: var(--pr-text-mute);
    cursor: pointer;
    transition: all .15s ease;
}
.pr-view-toggle__btn:hover { color: var(--pr-text); }
.pr-view-toggle__btn.is-active {
    background: var(--pr-surface);
    color: var(--pr-blue-2);
    box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 2px 6px rgba(15,23,42,0.08);
}
.pr-view-toggle__btn svg { width: 16px; height: 16px; }

/* === Checkbox premium reutilizável === */
.pr-checkbox {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.pr-checkbox input { position: absolute; opacity: 0; cursor: pointer; }
.pr-checkbox span {
    width: 18px; height: 18px;
    border: 1.5px solid var(--pr-border);
    border-radius: 5px;
    background: var(--pr-surface);
    transition: all .15s ease;
    position: relative;
}
.pr-checkbox:hover span { border-color: var(--pr-blue); }
.pr-checkbox input:checked + span {
    background: var(--pr-blue);
    border-color: var(--pr-blue);
}
.pr-checkbox input:checked + span::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pr-checkbox input:indeterminate + span {
    background: var(--pr-blue); border-color: var(--pr-blue);
}
.pr-checkbox input:indeterminate + span::after {
    content: '';
    position: absolute;
    left: 3px; top: 7px;
    width: 10px; height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* === Select header (aparece quando há items selecionados) === */
.pr-select-header {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));
    border-bottom: 1px solid var(--pr-border-soft);
    font-size: 13px;
    color: var(--pr-text);
}

/* === Container principal === */
.pr-mid-container {
    display: flex;
    flex-direction: column;
}

/* === MODO LISTA === */
.pr-mid-container--lista .pr-mid-item {
    display: grid;
    grid-template-columns: 36px 110px minmax(0, 1.6fr) 130px minmax(0, 1.3fr) 110px 150px;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pr-border-soft);
    background: var(--pr-surface);
    transition: background .15s ease;
    position: relative;
}
/* Variante sem checkbox de multi-select (telas onde a seleção não tem ação em lote ainda) */
.pr-mid-container--lista.pr-mid-container--no-cb .pr-mid-item {
    grid-template-columns: 110px minmax(0, 1.6fr) 130px minmax(0, 1.3fr) 110px 150px;
}
.pr-mid-container--lista .pr-mid-item::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transition: width .12s ease;
}
.pr-mid-item--liberado::before     { background: var(--pr-success); }
.pr-mid-item--naoveiculado::before { background: #3B82F6; }
.pr-mid-item--bloqueado::before    { background: var(--pr-text-mute); }
.pr-mid-item--expirado::before     { background: var(--pr-danger); }
.pr-mid-container--lista .pr-mid-item:hover {
    background: var(--pr-surface-soft);
}
.pr-mid-container--lista .pr-mid-item:hover::before { width: 4px; }
.pr-mid-container--lista .pr-mid-item:last-child { border-bottom: 0; }

/* Thumbnail */
.pr-mid-item__thumb {
    position: relative;
    width: 100%; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #1F2937, #111827);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--pr-border-soft);
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.pr-mid-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.pr-mid-item__thumb-empty,
.pr-mid-item__thumb-proc {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
}
.pr-mid-item__thumb-empty svg { width: 28px; height: 28px; opacity: 0.7; }
.pr-mid-item__thumb-proc {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
}
.pr-mid-item__thumb-proc svg {
    width: 22px; height: 22px;
    animation: prSpin 1.6s linear infinite;
}
@keyframes prSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pr-mid-item__dur {
    position: absolute;
    bottom: 4px; right: 4px;
    padding: 1px 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Main info */
.pr-mid-item__main { min-width: 0; }
.pr-mid-item__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px; font-weight: 700;
    color: var(--pr-text);
    margin-bottom: 4px;
    letter-spacing: -0.1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-mid-item__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--pr-text-soft);
    flex-wrap: wrap;
}
.pr-mid-item__cli { font-weight: 500; }
.pr-mid-item__sep { color: var(--pr-text-mute); }
.pr-mid-item__mons--warn { color: var(--pr-danger); font-weight: 600; }

/* Status badge */
.pr-mid-item__status { text-align: center; }
.pr-mid-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
}
.pr-mid-badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.pr-mid-badge--liberado     { background: #DCFCE7; color: #15803D; }
.pr-mid-badge--liberado .pr-mid-badge__dot { animation: prPulse 2s ease-in-out infinite; }
.pr-mid-badge--naoveiculado { background: #DBEAFE; color: #1D4ED8; }
.pr-mid-badge--bloqueado    { background: #F1F5F9; color: #475569; }
.pr-mid-badge--expirado     { background: #FEE2E2; color: #B91C1C; }
@keyframes prPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(21,128,61,0); }
}
.pr-mid-item__warn {
    font-size: 10.5px; font-weight: 700;
    color: #C2410C;
    margin-top: 4px;
}

/* Period */
.pr-mid-item__period {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px;
    min-width: 0;
}
.pr-mid-item__period-row { display: flex; align-items: center; gap: 6px; }
.pr-mid-item__period-row small {
    font-size: 9.5px; font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 32px;
}
.pr-mid-item__period-row span {
    color: var(--pr-text-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Updated */
.pr-mid-item__updated {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 12px;
}
.pr-mid-item__updated small {
    font-size: 9.5px; font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.pr-mid-item__updated strong {
    color: var(--pr-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Actions */
.pr-mid-item__actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 4px;
}

/* === MODO GRADE === */
.pr-mid-container--grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
    background: var(--pr-bg);
}
.pr-mid-container--grade .pr-mid-item {
    display: flex;
    flex-direction: column;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
}
.pr-mid-container--grade .pr-mid-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(15,23,42,0.18);
    border-color: var(--pr-border);
}
.pr-mid-container--grade .pr-mid-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2;
}
.pr-mid-container--grade .pr-mid-item__check {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.95);
    padding: 4px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
}
.pr-mid-container--grade .pr-mid-item__thumb {
    width: 100%; height: 140px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-mid-container--grade .pr-mid-item__main {
    padding: 12px 14px 6px;
}
.pr-mid-container--grade .pr-mid-item__status {
    padding: 0 14px 8px;
    text-align: left;
}
.pr-mid-container--grade .pr-mid-item__period,
.pr-mid-container--grade .pr-mid-item__updated {
    display: none;
}
.pr-mid-container--grade .pr-mid-item__actions {
    padding: 8px 10px 12px;
    justify-content: space-between;
    border-top: 1px solid var(--pr-border-soft);
    margin-top: auto;
}

/* === Bulk action bar flutuante === */
.pr-bulk-bar {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: var(--pr-header);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 32px -8px rgba(15,23,42,0.4), 0 4px 10px rgba(15,23,42,0.2);
    z-index: 100;
    animation: prBulkUp .25s ease;
}
@keyframes prBulkUp {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.pr-bulk-bar__info {
    padding: 0 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}
.pr-bulk-bar__count {
    display: inline-block;
    min-width: 24px; padding: 2px 8px;
    background: rgba(255,255,255,0.18);
    border-radius: 6px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.pr-bulk-bar__actions {
    display: flex; gap: 6px;
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 14px;
}
.pr-bulk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.pr-bulk-btn svg { width: 15px; height: 15px; }
.pr-bulk-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.pr-bulk-btn--danger:hover { background: #DC2626; }
.pr-bulk-bar__close {
    width: 32px; height: 32px;
    background: transparent;
    border: 0; border-radius: 8px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
    margin-left: -4px;
}
.pr-bulk-bar__close svg { width: 16px; height: 16px; }
.pr-bulk-bar__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Tag de processamento */
.pr-mid-tag {
    display: inline-flex; align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pr-mid-tag--proc { background: #FEF3C7; color: #92400E; }

/* === Carregar mais (paginação client-side) === */
.pr-mid-loadmore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(248,250,253,0) 0%, rgba(248,250,253,0.8) 100%);
    border-top: 1px solid var(--pr-border-soft);
    grid-column: 1 / -1;  /* ocupa toda a largura no modo grade */
}
.pr-mid-loadmore__info {
    font-size: 12.5px;
    color: var(--pr-text-soft);
    font-variant-numeric: tabular-nums;
}
.pr-mid-loadmore__info strong { color: var(--pr-text); font-weight: 700; }
.pr-mid-loadmore .pr-btn { padding: 8px 16px; font-size: 13px; }
.pr-mid-loadmore .pr-btn svg { width: 14px; height: 14px; }

/* === Placeholder elegante pra imagens quebradas (arquivos faltando no disco) === */
.pr-cm-thumb__broken-msg {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #475569, #334155);
    color: rgba(255,255,255,0.55);
    text-align: center;
    padding: 12px;
}
.pr-cm-thumb__broken-msg svg { width: 28px; height: 28px; opacity: 0.5; }
.pr-cm-thumb__broken-msg span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px; }
.pr-cm-thumb--broken .pr-cm-thumb__broken-msg { display: flex; }
.pr-cm-thumb--broken .pr-cm-thumb__hover { display: none; }  /* sem zoom em quebrada */
.pr-cm-thumb--broken { cursor: default; }

.pr-mid-item__thumb-broken {
    display: none;
    width: 100%; height: 100%;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
    background: linear-gradient(135deg, #475569, #334155);
}
.pr-mid-item__thumb-broken svg { width: 26px; height: 26px; opacity: 0.5; }
.pr-mid-item__thumb--broken .pr-mid-item__thumb-broken { display: flex; }

/* === Comunicados: hover na thumb mostra ícone "preview" === */
.pr-cm-thumb {
    cursor: zoom-in;
    position: relative;
}
.pr-cm-thumb__hover {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    backdrop-filter: blur(2px);
}
.pr-cm-thumb__hover svg { width: 28px; height: 28px; }
.pr-cm-thumb:hover .pr-cm-thumb__hover { opacity: 1; }
/* Broken sobrescreve cursor/hover da base — especificidade dobrada para vencer cascata */
.pr-cm-thumb.pr-cm-thumb--broken { cursor: default; }
.pr-cm-thumb.pr-cm-thumb--broken:hover .pr-cm-thumb__hover { opacity: 0; }

/* No modo grade, a thumb fica maior — mostra a imagem completa cobrindo */
.pr-mid-container--grade .pr-cm-thumb {
    height: 160px;
    background: #0F172A;
}
.pr-mid-container--grade .pr-cm-thumb img {
    object-fit: contain;
    padding: 8px;
}

/* === LIGHTBOX premium === */
.pr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}
.pr-lightbox.is-open { display: flex; }
.pr-lightbox__backdrop {
    position: absolute; inset: 0;
    background: rgba(8,12,24,0.92);
    backdrop-filter: blur(8px);
    animation: prLbFade .2s ease;
}
@keyframes prLbFade { from { opacity: 0; } to { opacity: 1; } }
.pr-lightbox__box {
    position: relative;
    max-width: min(90vw, 1400px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    animation: prLbZoom .25s ease;
}
@keyframes prLbZoom {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.pr-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: #fff;
}
.pr-lightbox__caption {
    margin-top: 16px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pr-lightbox__caption strong { font-weight: 700; }
.pr-lightbox__caption span { color: rgba(255,255,255,0.65); }
.pr-lightbox__caption-counter { font-variant-numeric: tabular-nums; }

/* Lightbox: estado "imagem quebrada" */
.pr-lightbox__broken {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(71,85,105,0.4), rgba(51,65,85,0.4));
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 12px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    min-width: 320px;
}
.pr-lightbox__broken svg { width: 48px; height: 48px; opacity: 0.5; }
.pr-lightbox__broken h3 { font-size: 17px; font-weight: 700; margin: 0; color: #fff; }
.pr-lightbox__broken p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.55); max-width: 340px; }
.pr-lightbox.is-broken .pr-lightbox__broken { display: flex; }
.pr-lightbox.is-broken .pr-lightbox__img { display: none; }
.pr-lightbox__close {
    position: absolute;
    top: -50px; right: 0;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
    z-index: 2;
}
.pr-lightbox__close:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); }
.pr-lightbox__close svg { width: 20px; height: 20px; }
.pr-lightbox__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
    z-index: 2;
}
.pr-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.pr-lightbox__nav svg { width: 22px; height: 22px; }
.pr-lightbox__nav--prev { left: -70px; }
.pr-lightbox__nav--next { right: -70px; }
.pr-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.pr-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 768px) {
    .pr-lightbox__nav--prev { left: 8px; }
    .pr-lightbox__nav--next { right: 8px; }
    .pr-lightbox__close { top: 16px; right: 16px; }
}

/* ==========================================================================
   File drop zone (upload de vídeo)
   ========================================================================== */
.pr-file-drop {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 20px 18px;
    background: var(--pr-bg);
    border: 2px dashed var(--pr-border-input);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pr-file-drop:hover {
    border-color: var(--pr-blue);
    background: rgba(99,102,241,0.04);
}
.pr-file-drop input[type="file"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%; height: 100%;
    cursor: pointer;
}
.pr-file-drop > svg {
    width: 32px; height: 32px;
    color: var(--pr-text-soft);
    flex-shrink: 0;
}
.pr-file-drop:hover > svg { color: var(--pr-blue); }
.pr-file-drop > div { flex: 1; }
.pr-file-drop strong {
    display: block;
    font-size: 14px; color: var(--pr-text);
    margin-bottom: 3px;
}
.pr-file-drop small {
    display: block;
    font-size: 11.5px; color: var(--pr-text-mute);
    line-height: 1.4;
}

/* ==========================================================================
   Dias da semana (pills)
   ========================================================================== */
.pr-dias-group {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.pr-dia-pill {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px;
    padding: 8px 14px;
    background: var(--pr-bg);
    border: 2px solid var(--pr-border-input);
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    transition: all .15s ease;
}
.pr-dia-pill input { position: absolute; opacity: 0; pointer-events: none; }
.pr-dia-pill:hover { border-color: #94A3B8; color: var(--pr-text); }
.pr-dia-pill:has(input:checked) {
    background: var(--pr-blue);
    border-color: var(--pr-blue);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(99,102,241,0.5);
}
/* Fallback pra browsers sem :has() */
.pr-dia-pill input:checked + span {
    color: inherit;
}

/* ==========================================================================
   Em-breve (placeholder das fases futuras)
   ========================================================================== */
.pr-em-breve {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    max-width: 600px;
    margin: 40px auto;
}
.pr-em-breve__icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    color: #92400E;
}
.pr-em-breve__icon svg { width: 38px; height: 38px; }
.pr-em-breve__fase {
    display: inline-block;
    padding: 4px 12px;
    background: var(--pr-bg-2);
    color: var(--pr-text-soft);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.pr-em-breve__titulo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px; font-weight: 800;
    color: var(--pr-text);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.pr-em-breve__desc {
    font-size: 15px; color: var(--pr-text-soft);
    line-height: 1.6;
    margin: 0 0 8px;
}
.pr-em-breve__rodape {
    font-size: 12.5px; color: var(--pr-text-mute);
    margin: 0 0 24px;
}
.pr-em-breve .pr-btn { margin: 0 auto; }
.pr-em-breve .pr-btn svg { margin-right: 4px; }

/* Responsivo Mídias v2 */
@media (max-width: 1280px) {
    .pr-mid-container--lista .pr-mid-item {
        grid-template-columns: 36px 100px minmax(0, 1.6fr) 110px minmax(0, 1.2fr) 150px;
    }
    .pr-mid-item__updated { display: none; }
}
@media (max-width: 1024px) {
    .pr-mid-container--lista .pr-mid-item {
        grid-template-columns: 36px 90px minmax(0, 1.4fr) 110px 150px;
    }
    .pr-mid-item__period { display: none; }
}
@media (max-width: 720px) {
    .pr-chips-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 14px; }
    .pr-chips-bar::-webkit-scrollbar { display: none; }
    .pr-chip { flex-shrink: 0; }
    .pr-mid-container--lista .pr-mid-item {
        grid-template-columns: 36px 80px 1fr;
        grid-template-areas: "check thumb main" "actions actions actions";
        row-gap: 8px;
    }
    .pr-mid-item__check { grid-area: check; }
    .pr-mid-item__thumb { grid-area: thumb; height: 50px; }
    .pr-mid-item__main { grid-area: main; }
    .pr-mid-item__status { display: none; }
    .pr-mid-item__actions { grid-area: actions; justify-content: flex-start; }
    .pr-mid-container--grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 10px; }
    .pr-bulk-bar { left: 10px; right: 10px; transform: none; }
    @keyframes prBulkUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}


/* ==========================================================================
   PR-CTR — Linhas de Contratos (estende .pr-cli-row)
   ========================================================================== */
.pr-contratos-wrap, .pr-boletos-wrap { display: block; }

.pr-ctr-row {
    grid-template-columns: 60px minmax(0, 1.4fr) 90px minmax(0, 1.5fr) 130px 110px !important;
}
.pr-ctr-row__tipo { text-align: center; }
.pr-ctr-tipo {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.pr-ctr-tipo--rs       { background: #D1FAE5; color: #065F46; }
.pr-ctr-tipo--permuta  { background: #FED7AA; color: #9A3412; }
.pr-ctr-tipo--smr      { background: #DBEAFE; color: #1D4ED8; }
.pr-ctr-tipo--boleto   { background: #FEE2E2; color: #B91C1C; }
.pr-ctr-tipo--outro    { background: var(--pr-bg-2); color: var(--pr-text-soft); }

.pr-ctr-row__periodo {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px;
}
.pr-ctr-row__periodo-row { display: flex; align-items: center; gap: 6px; }
.pr-ctr-row__periodo-row small {
    font-size: 10px; font-weight: 700;
    color: var(--pr-text-mute);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    min-width: 56px;
}
.pr-ctr-row__periodo-row span { color: var(--pr-text-soft); font-variant-numeric: tabular-nums; }

.pr-ctr-row__valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pr-ctr-row__valor strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--pr-text);
}

/* ==========================================================================
   PR-BL — Linhas de Boletos
   ========================================================================== */
.pr-bl-row {
    grid-template-columns: 60px minmax(0, 1.4fr) 90px 130px 110px 130px !important;
}
.pr-bl-row__status { text-align: center; }
.pr-bl-row__venc {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 12px;
}
.pr-bl-row__venc small {
    font-size: 10px; font-weight: 700;
    color: var(--pr-text-mute);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pr-bl-row__venc strong { color: var(--pr-text); font-variant-numeric: tabular-nums; font-weight: 600; }

.pr-bl-row--vencido::before { background: var(--pr-danger) !important; opacity: 1; }
.pr-bl-row--vencido .pr-bl-row__venc strong { color: var(--pr-danger); }

/* Segment count badge */
.pr-segment__count {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px;
    padding: 0 7px;
    height: 17px;
    background: var(--pr-bg);
    color: var(--pr-text-soft);
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pr-segment__btn.is-active .pr-segment__count {
    background: var(--pr-bg-2);
    color: var(--pr-text);
}

/* ==========================================================================
   Input com prefixo (R$ etc)
   ========================================================================== */
.pr-input-prefix {
    display: flex; align-items: stretch;
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: var(--pr-surface);
}
.pr-input-prefix:focus-within {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.pr-input-prefix > span {
    display: inline-flex; align-items: center;
    padding: 0 12px;
    background: var(--pr-bg);
    color: var(--pr-text-soft);
    font-size: 13px; font-weight: 600;
    border-right: 1px solid var(--pr-border);
}
.pr-input-prefix > input {
    flex: 1; min-width: 0;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--pr-text);
    font-variant-numeric: tabular-nums;
    outline: none;
}

/* ==========================================================================
   Grid de checkboxes em cards (produtos do contrato)
   ========================================================================== */
.pr-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.pr-checkbox-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--pr-surface);
    border: 2px solid var(--pr-border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.pr-checkbox-card input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.pr-checkbox-card:hover { border-color: #94A3B8; transform: translateY(-1px); }
.pr-checkbox-card.is-checked {
    border-color: var(--pr-blue);
    background: linear-gradient(180deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0) 100%);
    box-shadow: 0 4px 14px -6px rgba(99,102,241,0.4);
}
.pr-checkbox-card__sigla {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px; font-weight: 800;
    color: var(--pr-text);
    letter-spacing: -0.3px;
}
.pr-checkbox-card.is-checked .pr-checkbox-card__sigla { color: var(--pr-blue-2); }
.pr-checkbox-card__nome {
    font-size: 10.5px;
    color: var(--pr-text-mute);
    line-height: 1.3;
}

/* ==========================================================================
   Callout box (info no boleto compensar)
   ========================================================================== */
.pr-callout {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.pr-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.pr-callout--info { background: #DBEAFE; color: #1E3A8A; border: 1px solid rgba(30,58,138,0.15); }
.pr-callout--info svg { color: #1D4ED8; }
.pr-callout--warning { background: #FEF3C7; color: #78350F; border: 1px solid rgba(120,53,15,0.15); }
.pr-callout--danger { background: #FEE2E2; color: #7F1D1D; border: 1px solid rgba(127,29,29,0.15); }

/* ==========================================================================
   Resumo do boleto na modal
   ========================================================================== */
.pr-bl-summary {
    background: var(--pr-bg);
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex; flex-direction: column;
    gap: 8px;
}
.pr-bl-summary__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.pr-bl-summary__row small {
    font-size: 11px; font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pr-bl-summary__row strong {
    font-weight: 600;
    color: var(--pr-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Botão verde de sucesso pra "Confirmar Compensação" */
.pr-btn--success {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(16,185,129,0.4);
}
.pr-btn--success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -4px rgba(16,185,129,0.5);
}

/* ==========================================================================
   Responsivo Contratos/Boletos
   ========================================================================== */
@media (max-width: 1100px) {
    .pr-ctr-row { grid-template-columns: 50px minmax(0, 1.4fr) 80px 120px 110px !important; }
    .pr-ctr-row__periodo { display: none; }
    .pr-bl-row { grid-template-columns: 50px minmax(0, 1.4fr) 80px 110px 130px !important; }
    .pr-bl-row__venc { display: none; }
}
@media (max-width: 720px) {
    .pr-ctr-row, .pr-bl-row {
        grid-template-columns: 1fr auto !important;
        gap: 8px 12px;
        row-gap: 4px;
    }
    .pr-ctr-row__tipo, .pr-bl-row__status { justify-self: end; }
    .pr-ctr-row__valor, .pr-bl-row__venc { grid-column: 1 / -1; }
}


/* ==========================================================================
   PR-CLI — Listagem de Clientes (mesmo padrão da tela Locais)
   ========================================================================== */
.pr-clientes-wrap { display: block; }
.pr-cli-list { display: flex; flex-direction: column; border-top: 1px solid var(--pr-border-soft); }

.pr-cli-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1.5fr) 100px minmax(0, 1.5fr) minmax(0, 1fr) 70px 130px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 14px 22px;
    border-bottom: 1px solid var(--pr-border-soft);
    transition: background .15s ease;
    position: relative;
    min-width: 0;
}
.pr-cli-row:last-child { border-bottom: 0; }
.pr-cli-row::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pr-text-mute);
    transition: width .12s ease, top .12s ease, bottom .12s ease, background .15s ease;
}
.pr-cli-row--t1::before { background: #6366F1; }   /* PF — indigo */
.pr-cli-row--t2::before { background: #10B981; }   /* PJ — emerald */
.pr-cli-row--t3::before { background: #F59E0B; }   /* Condo — amber */
.pr-cli-row:hover { background: var(--pr-surface-soft); }
.pr-cli-row:hover::before { width: 4px; top: 6px; bottom: 6px; }

/* Paginator footer */
.pr-cli-paginator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(248,250,253,0) 0%, rgba(248,250,253,0.8) 100%);
    border-top: 1px solid var(--pr-border-soft);
}
.pr-cli-paginator__info {
    font-size: 12.5px;
    color: var(--pr-text-soft);
    font-variant-numeric: tabular-nums;
}
.pr-cli-paginator__info strong { color: var(--pr-text); font-weight: 700; }
.pr-cli-paginator .pr-btn { padding: 8px 16px; font-size: 13px; }
.pr-cli-paginator .pr-btn svg { width: 14px; height: 14px; }

.pr-cli-row__id { font-weight: 700; color: var(--pr-text-mute); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pr-cli-row__main { min-width: 0; }
.pr-cli-row__name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--pr-text);
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.pr-cli-row__sub {
    font-size: 12px;
    color: var(--pr-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-cli-row__tipo { text-align: center; }
.pr-cli-tipo {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.3px;
}
.pr-cli-tipo--pf    { background: #EEF2FF; color: #3730A3; }
.pr-cli-tipo--pj    { background: #D1FAE5; color: #065F46; }
.pr-cli-tipo--condo { background: #FEF3C7; color: #92400E; }

.pr-cli-row__contact { min-width: 0; }
.pr-cli-row__email, .pr-cli-row__phone {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    color: var(--pr-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.pr-cli-row__email svg, .pr-cli-row__phone svg { width: 13px; height: 13px; opacity: 0.65; flex-shrink: 0; }
.pr-cli-row__phone { color: var(--pr-text); font-weight: 500; }
.pr-cli-empty { color: var(--pr-text-mute); font-style: italic; }

.pr-cli-row__city {
    display: flex; align-items: center; gap: 5px;
    font-size: 12.5px;
    color: var(--pr-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-cli-row__city svg { width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; }

.pr-cli-row__mons { text-align: center; }
.pr-cli-mons-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--pr-bg-2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--pr-text-soft);
}
.pr-cli-mons-badge svg { width: 13px; height: 13px; opacity: 0.7; }
.pr-cli-mons-badge strong { color: var(--pr-text); font-weight: 700; }

.pr-cli-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.pr-cli-act {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--pr-text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.pr-cli-act svg { width: 16px; height: 16px; }
.pr-cli-act:hover { background: rgba(15,23,42,0.06); color: var(--pr-text); transform: translateY(-1px); }
.pr-cli-act--view:hover { background: rgba(99,102,241,0.12); color: #4F46E5; }
.pr-cli-act--edit:hover { background: #DBEAFE; color: #1D4ED8; }
.pr-cli-act--del:hover  { background: #FEE2E2; color: #DC2626; }

/* ==========================================================================
   PR-TIPO-PICKER — 3 cards de seleção de tipo no modal de Cliente
   ========================================================================== */
.pr-tipo-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.pr-tipo-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px;
    padding: 18px 14px;
    background: var(--pr-surface);
    border: 2px solid var(--pr-border-soft);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.pr-tipo-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pr-tipo-card:hover { border-color: #94A3B8; transform: translateY(-2px); }
.pr-tipo-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pr-bg-2);
    color: var(--pr-text-soft);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pr-tipo-card__icon svg { width: 22px; height: 22px; }
.pr-tipo-card__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--pr-text);
}
.pr-tipo-card__sub {
    font-size: 11.5px;
    color: var(--pr-text-mute);
    line-height: 1.3;
}
.pr-tipo-card.is-active {
    border-color: var(--pr-blue);
    background: linear-gradient(180deg, rgba(99,102,241,0.04) 0%, rgba(99,102,241,0) 100%);
    box-shadow: 0 6px 18px -8px rgba(99,102,241,0.4);
}
.pr-tipo-card.is-active .pr-tipo-card__icon {
    background: linear-gradient(135deg, var(--pr-blue), var(--pr-blue-2));
    color: #fff;
    transform: scale(1.05);
}
.pr-tipo-card.is-active .pr-tipo-card__title { color: var(--pr-blue-2); }

/* ==========================================================================
   PR-CLI-MONS — Vincular monitores ao cliente (agrupado por local)
   ========================================================================== */
.pr-cli-mons-search {
    position: relative;
    margin-bottom: 12px;
}
.pr-cli-mons-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    font-size: 13px;
    background: var(--pr-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pr-cli-mons-search input:focus {
    outline: none;
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.pr-cli-mons-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
    pointer-events: none;
}

.pr-cli-mons-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    background: var(--pr-bg);
}
.pr-cli-mons-grupo {
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-cli-mons-grupo:last-child { border-bottom: 0; }

.pr-cli-mons-grupo__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15,23,42,0.02);
    cursor: pointer;
    user-select: none;
    transition: background .12s ease;
}
.pr-cli-mons-grupo__head:hover { background: rgba(15,23,42,0.04); }
.pr-cli-mons-grupo__head input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--pr-blue);
    cursor: pointer;
    flex-shrink: 0;
}
.pr-cli-mons-grupo__icon {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-cli-mons-grupo__icon svg { width: 15px; height: 15px; }
.pr-cli-mons-grupo__info { flex: 1; min-width: 0; }
.pr-cli-mons-grupo__info strong {
    display: block;
    font-size: 13.5px;
    color: var(--pr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-cli-mons-grupo__info span {
    font-size: 11.5px;
    color: var(--pr-text-soft);
}
.pr-cli-mons-grupo__chevron {
    width: 14px; height: 14px;
    color: var(--pr-text-mute);
    transition: transform .2s ease;
    cursor: pointer;
}
.pr-cli-mons-grupo.is-collapsed .pr-cli-mons-grupo__chevron { transform: rotate(-90deg); }
.pr-cli-mons-grupo.is-collapsed .pr-cli-mons-grupo__body { display: none; }

.pr-cli-mons-grupo__body {
    padding: 4px 0 8px;
    background: var(--pr-surface);
}
.pr-cli-mons-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 50px;
    cursor: pointer;
    font-size: 13px;
    transition: background .1s ease;
}
.pr-cli-mons-item:hover { background: rgba(99,102,241,0.04); }
.pr-cli-mons-item input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--pr-blue);
    cursor: pointer;
    flex-shrink: 0;
}
.pr-cli-mons-item__id {
    font-size: 11px; font-weight: 700;
    color: var(--pr-text-mute);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
}
.pr-cli-mons-item__name {
    flex: 1; min-width: 0;
    color: var(--pr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Monitor sem nome cadastrado no banco — legados antigos. Itálico cinza pra distinguir. */
.pr-cli-mons-item__name--vazio {
    color: var(--pr-text-mute);
    font-style: italic;
    font-size: 12px;
}
.pr-cli-mons-item__orient {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 20px;
    border-radius: 5px;
    background: #DBEAFE;
    color: #1D4ED8;
    font-size: 10.5px; font-weight: 700;
}

.pr-section__hint {
    font-size: 12px;
    color: var(--pr-text-soft);
}
.pr-section__hint span { font-weight: 700; color: var(--pr-blue-2); }

/* ==========================================================================
   Responsivo lista de Clientes
   ========================================================================== */
@media (max-width: 1200px) {
    .pr-cli-row {
        grid-template-columns: 50px minmax(0, 1.5fr) 80px minmax(0, 1.4fr) 70px 130px;
    }
    .pr-cli-row__city { display: none; }
}
@media (max-width: 900px) {
    .pr-cli-row {
        grid-template-columns: 50px minmax(0, 1.4fr) 80px 70px 130px;
    }
    .pr-cli-row__contact { display: none; }
}
@media (max-width: 640px) {
    .pr-cli-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 14px 18px;
        row-gap: 4px;
    }
    .pr-cli-row__id { grid-column: 1; font-size: 11px; }
    .pr-cli-row__main { grid-column: 1 / -1; order: 0; }
    .pr-cli-row__tipo { grid-column: auto; justify-self: end; }
    .pr-cli-row__mons { grid-column: auto; justify-self: end; }
    .pr-cli-row__actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
    .pr-tipo-picker { grid-template-columns: 1fr; }
}


/* ==========================================================================
   PR-HEAD-CARD — Header premium unificado (subtabs + stats strip num só card)
   Usado em /premium/locais-monitores e em qualquer tela que precise integrar
   sub-navegação + indicadores num único bloco coeso.
   ========================================================================== */
.pr-head-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid var(--pr-border-soft);
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 30px -12px rgba(15,23,42,0.08);
    margin: 4px 0 22px;
    overflow: hidden;
    position: relative;
}
.pr-head-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #F97316 0%, #F97316 20%,
        #22C55E 20%, #22C55E 40%,
        #8B5CF6 40%, #8B5CF6 60%,
        #EC4899 60%, #EC4899 80%,
        #06B6D4 80%, #06B6D4 100%
    );
    opacity: 0.85;
    pointer-events: none;
}

/* Subtabs dentro do head-card perdem borda/shadow próprios pra integrar */
.pr-head-card .pr-subtabs {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 18px 18px 14px;
}

/* Divisor sutil entre subtabs e stats */
.pr-head-card .pr-stat-strip {
    border-top: 1px dashed rgba(15,23,42,0.08);
    padding: 14px 18px 16px;
    margin: 0;
    background: linear-gradient(180deg, rgba(248,250,253,0.5) 0%, rgba(255,255,255,0) 100%);
}

/* ==========================================================================
   PR-STAT-STRIP / PR-STAT-CHIP — KPIs compactos em linha (premium, refinado)
   ========================================================================== */
.pr-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) { .pr-stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .pr-stat-strip { grid-template-columns: 1fr; } }

.pr-stat-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    overflow: hidden;
}
.pr-stat-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(15,23,42,0.18);
}
.pr-stat-chip::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 90px; height: 90px;
    border-radius: 50%;
    transform: translate(35%, -45%);
    opacity: 0.08;
    pointer-events: none;
}

.pr-stat-chip__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.pr-stat-chip__icon svg { width: 19px; height: 19px; }

.pr-stat-chip__body { min-width: 0; flex: 1; }
.pr-stat-chip__num {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--pr-text);
    line-height: 1.05;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
}
.pr-stat-chip__label {
    font-size: 11.5px;
    color: var(--pr-text-soft);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.1px;
}

.pr-stat-chip--success .pr-stat-chip__icon { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 14px -4px rgba(34,197,94,0.45); }
.pr-stat-chip--success::after { background: #22C55E; }
.pr-stat-chip--success:hover { border-color: rgba(34,197,94,0.3); }

.pr-stat-chip--warning .pr-stat-chip__icon { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 6px 14px -4px rgba(245,158,11,0.45); }
.pr-stat-chip--warning::after { background: #F59E0B; }
.pr-stat-chip--warning:hover { border-color: rgba(245,158,11,0.3); }

.pr-stat-chip--danger .pr-stat-chip__icon { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 6px 14px -4px rgba(239,68,68,0.45); }
.pr-stat-chip--danger::after { background: #EF4444; }
.pr-stat-chip--danger:hover { border-color: rgba(239,68,68,0.3); }

.pr-stat-chip--neutral .pr-stat-chip__icon { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 6px 14px -4px rgba(139,92,246,0.45); }
.pr-stat-chip--neutral::after { background: #8B5CF6; }
.pr-stat-chip--neutral:hover { border-color: rgba(139,92,246,0.3); }

.pr-stat-chip--info .pr-stat-chip__icon { background: linear-gradient(135deg, #6366F1, #4F46E5); box-shadow: 0 6px 14px -4px rgba(99,102,241,0.45); }
.pr-stat-chip--info::after { background: #6366F1; }
.pr-stat-chip--info:hover { border-color: rgba(99,102,241,0.3); }

/* ==========================================================================
   PR-SEGMENT — Segmented control premium pro filtro de status
   ========================================================================== */
.pr-segment {
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}
.pr-segment__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.pr-segment__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pr-segment__btn:hover { color: var(--pr-text); }
.pr-segment__btn.is-active {
    background: #fff;
    color: var(--pr-text);
    box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 4px 12px -4px rgba(15,23,42,0.1);
}

/* ==========================================================================
   PR-LOCM — Locais com seus Monitores agrupados (sub-tab Monitores em /locais)
   ========================================================================== */
.pr-locm-wrap { display: block; }

.pr-toolbar--locm { margin-bottom: 18px; }

.pr-locm-list { display: flex; flex-direction: column; gap: 18px; }

.pr-locm-group {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px -16px rgba(15,23,42,0.1);
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.pr-locm-group:hover { box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 12px 32px -16px rgba(15,23,42,0.15); }

.pr-locm-group__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%);
    border-bottom: 1px solid var(--pr-border-soft);
    position: relative;
}
.pr-locm-group__head::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #8B5CF6, #6D28D9);
}

.pr-locm-group__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(139,92,246,0.45);
}
.pr-locm-group__icon svg { width: 22px; height: 22px; }

.pr-locm-group__info { flex: 1; min-width: 0; }
.pr-locm-group__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--pr-text);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.pr-locm-group__meta {
    display: flex; align-items: center; gap: 14px;
    font-size: 12.5px; color: var(--pr-text-soft);
    flex-wrap: wrap;
}
.pr-locm-group__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.pr-locm-group__meta-item svg { width: 13px; height: 13px; opacity: 0.7; }

.pr-locm-group__actions { display: flex; align-items: center; gap: 6px; }

.pr-icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--pr-text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pr-icon-btn:hover { background: rgba(15,23,42,0.06); color: var(--pr-text); }
.pr-icon-btn svg { width: 18px; height: 18px; transition: transform .2s ease; }

.pr-locm-group.is-collapsed .pr-icon-btn__chevron { transform: rotate(-90deg); }
.pr-locm-group.is-collapsed .pr-locm-group__body { display: none; }

.pr-locm-group__body { padding: 0; }

/* Linhas (grid de colunas) */
.pr-locm-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1.6fr) 90px 130px 110px 90px 130px 170px;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(15,23,42,0.04);
    transition: background .12s ease;
}
.pr-locm-row:last-child { border-bottom: 0; }
.pr-locm-row--mon:hover { background: rgba(99,102,241,0.03); }

.pr-locm-row--head {
    padding: 10px 20px;
    background: rgba(15,23,42,0.02);
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-locm-row--head .pr-locm-col {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Header de grupo entre monitores: separador visual por Local (pedido Lucas — usado pra cobrança por local) */
.pr-locm-grouphead {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(to right, rgba(91, 91, 214, 0.06), transparent);
    border-top: 1px solid var(--pr-border-soft);
    border-bottom: 1px solid var(--pr-border-soft);
    margin-top: 6px;
}
.pr-locm-grouphead:first-of-type { margin-top: 0; border-top: none; }
.pr-locm-grouphead__icon {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--pr-accent, #5B5BD6);
}
.pr-locm-grouphead__name {
    font-size: 13.5px; font-weight: 700; color: var(--pr-text);
}
.pr-locm-grouphead__city {
    font-size: 12px; color: var(--pr-text-mute);
    padding-left: 6px;
    border-left: 1px solid var(--pr-border-soft);
    margin-left: 2px;
}
.pr-locm-grouphead__count {
    margin-left: auto;
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text-mute);
    background: rgba(15,23,42,0.05);
    padding: 3px 10px; border-radius: 12px;
}

.pr-locm-col { font-size: 13px; color: var(--pr-text); min-width: 0; }
.pr-locm-col--id { display: flex; align-items: center; gap: 8px; }
.pr-locm-player { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.pr-locm-player svg { width: 18px; height: 18px; }
.pr-locm-id { font-weight: 600; color: var(--pr-text-soft); font-variant-numeric: tabular-nums; font-size: 12.5px; }

.pr-locm-col--name { overflow: hidden; }
.pr-locm-link {
    color: var(--pr-blue);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pr-locm-link:hover { text-decoration: underline; color: var(--pr-blue-2); }
.pr-locm-cam { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; }
.pr-locm-poleg { color: var(--pr-text-mute); font-weight: 400; font-size: 11px; }

.pr-locm-col--orient { text-align: center; }
.pr-locm-orient {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.3px;
}
.pr-locm-orient--h { background: #DBEAFE; color: #1D4ED8; }
.pr-locm-orient--v { background: #FCE7F3; color: #9D174D; }
.pr-locm-orient--i { background: #FEF3C7; color: #92400E; }

.pr-locm-col--status { text-align: center; }
.pr-locm-pill {
    display: inline-flex; align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
}
.pr-locm-pill--ok   { background: #DCFCE7; color: #15803D; }
.pr-locm-pill--warn { background: #FEE2E2; color: #B91C1C; }
.pr-locm-pill--err  { background: rgba(100,116,139,0.15); color: #475569; }

.pr-locm-col--sync, .pr-locm-col--created {
    text-align: center;
    color: var(--pr-text-soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.pr-locm-col--city {
    color: var(--pr-text-soft);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-locm-col--ops {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
.pr-locm-act {
    width: 30px; height: 30px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pr-text-mute);
    text-decoration: none;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.pr-locm-act svg { width: 15px; height: 15px; }
.pr-locm-act:hover { background: rgba(15,23,42,0.06); color: var(--pr-text); transform: translateY(-1px); }
/* Engrenagem: cor DINÂMICA via JS (poll box_on.php, igual ao legado) —
   vermelha = box offline (default), verde piscante = online.
   O svg herda via currentColor; não fixar cor aqui nem no hover. */
.pr-locm-act--gear        { color: #DC2626; }
.pr-locm-act--gear:hover  { background: #FEE2E2; }
.pr-locm-act--gear svg    { color: inherit; }
.pr-locm-act--edit:hover  { background: #DBEAFE; color: #1D4ED8; }
.pr-locm-act--stats:hover { background: #EDE9FE; color: #6D28D9; }
.pr-locm-act--del:hover   { background: #FEE2E2; color: #DC2626; }

/* ==========================================================================
   Responsivo locm — desktop largo / tablet / mobile
   ========================================================================== */
@media (max-width: 1200px) {
    .pr-locm-row { grid-template-columns: 60px minmax(0, 1.4fr) 70px 120px 100px 80px 170px; }
    .pr-locm-col--created { display: none; }
}
@media (max-width: 980px) {
    /* Última coluna 165px: cabem os 5 botões de opções (com a engrenagem de acesso remoto) */
    .pr-locm-row { grid-template-columns: 50px minmax(0, 1.4fr) 110px 90px 165px; }
    .pr-locm-col--orient, .pr-locm-col--city { display: none; }
}
@media (max-width: 720px) {
    .pr-locm-group__head { padding: 14px 16px; }
    .pr-locm-group__icon { width: 38px; height: 38px; border-radius: 10px; }
    .pr-locm-group__icon svg { width: 18px; height: 18px; }
    .pr-locm-group__title { font-size: 15px; }
    .pr-locm-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(15,23,42,0.06);
    }
    .pr-locm-row--head { display: none; }
    .pr-locm-col--id::before    { content: 'ID: '; font-size: 10.5px; color: var(--pr-text-mute); font-weight: 600; }
    .pr-locm-col--sync::before  { content: 'Atu: '; font-size: 10.5px; color: var(--pr-text-mute); font-weight: 600; }
    .pr-locm-col--name { font-size: 14.5px; }
    .pr-locm-col--ops { justify-content: flex-start; margin-top: 4px; gap: 8px; }
    /* Alvo de toque >= 40px no celular (ressalva da homologação v160):
       30px com 2px de gap favorece toque errado — editar fica colado no excluir */
    .pr-locm-act { width: 42px; height: 42px; border-radius: 10px; }
    .pr-locm-act svg { width: 17px; height: 17px; }
    /* Header de grupo por local (v157): permite quebrar linha no mobile —
       nome do local em cima, cidade + badge de contagem embaixo */
    .pr-locm-grouphead { flex-wrap: wrap; padding: 10px 16px; row-gap: 2px; }
    .pr-locm-grouphead__name { flex-basis: calc(100% - 26px); font-size: 14px; }
    .pr-locm-grouphead__city { border-left: none; padding-left: 26px; margin-left: 0; }
    .pr-locm-grouphead__count { margin-left: auto; }
    .pr-stat-strip { padding: 12px 14px; }
    .pr-stat-chip { padding: 9px 12px; }
    .pr-stat-chip__icon { width: 34px; height: 34px; border-radius: 9px; }
    .pr-stat-chip__icon svg { width: 17px; height: 17px; }
    .pr-stat-chip__num { font-size: 19px; }
}

/* =====================================================================
   GRUPOS — Fase 3: listagem premium + modal drag-drop
   Reusa o sistema .pr-mid-item__* da Fase 1.
   ===================================================================== */

/* === SAFETY NET para SVGs inline dentro de containers de Grupos === */
/* Evita ícones gigantes em qualquer SVG novo sem constraint explícito */
.pr-gp-item svg,
.pr-gp-thumb-stack svg,
.pr-gp-mng-body svg,
#pr-gp-modal-host .pr-modal svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
}
/* Exceções: ícones que precisam ser maiores em seus contextos próprios */
.pr-gp-thumb-stack .pr-gp-thumb-overlay svg { width: 32px; height: 32px; }
.pr-gp-thumb-stack .pr-mid-item__thumb-empty svg,
.pr-gp-thumb-stack .pr-gp-thumb-empty svg { width: 36px; height: 36px; }
.pr-gp-thumb-card__broken svg { width: 26px; height: 26px; }
.pr-gp-mng-thumb-fallback svg,
.pr-gp-mng-thumb svg { width: 20px; height: 20px; }
.pr-gp-mng-empty svg { width: 36px; height: 36px; }
.pr-gp-mng-help svg { width: 18px; height: 18px; }
#pr-gp-modal-host .pr-modal__header-icon svg { width: 24px; height: 24px; }
#pr-gp-modal-host .pr-modal__close svg { width: 20px; height: 20px; }
#pr-gp-modal-host .pr-section__icon svg { width: 18px; height: 18px; }
.pr-gp-mon-item .pr-gp-mon-item__box svg { width: 14px; height: 14px; }

/* ====== Stack de miniaturas no .pr-mid-item__thumb (grupos) ====== */
/* Não setamos width/height — herdamos do .pr-mid-item__thumb base */
.pr-gp-thumb-stack {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    cursor: pointer;
}
.pr-gp-thumb-card {
    position: absolute;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    background: #0F172A;
    transition: transform .25s ease;
}
.pr-gp-thumb-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-gp-thumb-card--0 { left: 8%; top: 12%; width: 60%; height: 76%; z-index: 3; transform: rotate(-4deg); }
.pr-gp-thumb-card--1 { left: 30%; top: 14%; width: 60%; height: 76%; z-index: 2; transform: rotate(3deg); }
.pr-gp-thumb-card--2 { left: 18%; top: 18%; width: 60%; height: 76%; z-index: 1; transform: rotate(-1deg); opacity: 0.85; }
.pr-gp-thumb-stack:hover .pr-gp-thumb-card--0 { transform: rotate(-7deg) translateY(-3px); }
.pr-gp-thumb-stack:hover .pr-gp-thumb-card--1 { transform: rotate(6deg)  translateY(-3px); }
.pr-gp-thumb-stack:hover .pr-gp-thumb-card--2 { transform: rotate(-3deg) translateY(-3px); }
.pr-mid-container--lista .pr-gp-thumb-card { border-width: 1px; }
.pr-mid-container--lista .pr-gp-thumb-card--0 { left: 6%;  top: 10%; width: 58%; height: 80%; }
.pr-mid-container--lista .pr-gp-thumb-card--1 { left: 28%; top: 12%; width: 58%; height: 80%; }
.pr-mid-container--lista .pr-gp-thumb-card--2 { left: 18%; top: 14%; width: 58%; height: 80%; }

.pr-gp-thumb-card__broken {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #334155, #1E293B);
    color: rgba(255,255,255,0.4);
}
.pr-gp-thumb-card__broken svg { width: 28px; height: 28px; }
.pr-gp-thumb-card--broken .pr-gp-thumb-card__broken { display: flex; }

.pr-gp-thumb-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
    gap: 6px;
}
.pr-gp-thumb-empty svg { width: 36px; height: 36px; opacity: 0.6; }
.pr-gp-thumb-empty span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }

.pr-gp-thumb-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.1);
}
.pr-mid-container--lista .pr-gp-thumb-badge { font-size: 9.5px; padding: 2px 7px; bottom: 4px; left: 4px; }

.pr-gp-thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,182,212,0.0), rgba(6,182,212,0.85));
    color: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 4;
    backdrop-filter: blur(2px);
}
.pr-gp-thumb-overlay svg { width: 32px; height: 32px; }
.pr-gp-thumb-overlay span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.pr-gp-thumb-stack:hover .pr-gp-thumb-overlay { opacity: 1; }
.pr-mid-container--lista .pr-gp-thumb-overlay span { display: none; }

/* ====== Modal de gerenciar (drag-drop) ====== */
.pr-modal--xl {
    max-width: 1180px !important;
    top: 4vh !important;
    bottom: 4vh !important;
    height: auto !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    /* Zera translateY do .pr-modal base — top/bottom já cuidam da vertical.
       Sem isso o modal é puxado pra cima da metade da altura e some no topo do viewport. */
    transform: translateX(-50%) translateY(24px) scale(.98);
}
.pr-modal-backdrop.is-open .pr-modal--xl {
    transform: translateX(-50%) translateY(0) scale(1);
}
/* CRÍTICO: o <form> da modal de Grupo é filho do flex container .pr-modal--xl,
   precisa virar coluna flex pra o body crescer e o footer ficar ancorado embaixo.
   Sem isso o footer ("Criar grupo") escapa pra fora do viewport (bug v=133 → v=134). */
.pr-modal--xl > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.pr-modal__header-icon--cyan { background: linear-gradient(135deg, #06B6D4, #0891B2); color: #fff; }

/* O .pr-modal__body global tem flex: 1 1 0 + min-height: 0 + overflow-y: auto.
   Aqui sobrescrevemos pra ele virar o container flex das 2 colunas e a rolagem
   ficar dentro das listas, não no body. */
.pr-modal--xl .pr-modal__body {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 320px;
}
.pr-gp-mng-body {
    /* manter classe pra hooks JS, mas estilos vivem no seletor pai */
    display: contents;
}
.pr-modal--xl .pr-gp-mng-col {
    flex: 1 1 50%;
    min-width: 0;
}

.pr-gp-mng-col {
    display: flex; flex-direction: column;
    min-height: 0;
    background: #F8FAFC;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.pr-gp-mng-col-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-gp-mng-col-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--pr-text);
    letter-spacing: 0.2px;
}
.pr-gp-mng-contador {
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-text-mute);
    background: #F1F5F9;
    padding: 4px 10px;
    border-radius: 999px;
}

.pr-gp-mng-help {
    margin: 12px 16px 4px;
    padding: 8px 12px;
    background: #ECFEFF;
    border: 1px solid #A5F3FC;
    border-radius: 8px;
    color: #155E75;
    font-size: 12.5px;
    display: flex; align-items: center; gap: 8px;
}
.pr-gp-mng-help svg { width: 18px; height: 18px; flex-shrink: 0; }

.pr-gp-mng-search {
    padding: 12px 16px;
    position: relative;
}
.pr-gp-mng-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    font-size: 13.5px;
    background: #fff;
    color: var(--pr-text);
    outline: none;
    transition: border-color .15s;
}
.pr-gp-mng-search input:focus { border-color: var(--pr-accent); }
.pr-gp-mng-search svg {
    position: absolute;
    left: 28px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
}

.pr-gp-mng-lista {
    list-style: none;
    margin: 0;
    padding: 12px 16px 16px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.pr-gp-mng-lista--disp { padding-top: 4px; }

.pr-gp-mng-item, .pr-gp-mng-disp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    padding: 8px 10px;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.pr-gp-mng-item:hover, .pr-gp-mng-disp-item:hover {
    border-color: #94A3B8;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

.pr-gp-mng-drag {
    flex-shrink: 0;
    width: 24px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pr-text-mute);
    cursor: grab;
    touch-action: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.pr-gp-mng-drag:hover { background: #F1F5F9; color: var(--pr-text); }
.pr-gp-mng-drag:active { cursor: grabbing; }
.pr-gp-mng-drag svg { width: 18px; height: 18px; }

.pr-gp-mng-thumb {
    width: 56px; height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, #1F2937, #111827);
    flex-shrink: 0;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.pr-gp-mng-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-gp-mng-thumb-fallback {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
}
.pr-gp-mng-thumb-fallback svg { width: 20px; height: 20px; }
.pr-gp-mng-thumb.is-broken .pr-gp-mng-thumb-fallback { display: flex; }

.pr-gp-mng-info { flex: 1; min-width: 0; }
.pr-gp-mng-nome {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-text);
    line-height: 1.2;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-gp-mng-meta {
    font-size: 11.5px;
    color: var(--pr-text-mute);
    display: flex; align-items: center; gap: 5px;
}
.pr-gp-mng-meta svg { width: 12px; height: 12px; }

.pr-gp-mng-empty {
    list-style: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--pr-text-mute);
    border: 2px dashed var(--pr-border);
    border-radius: 10px;
    background: #fff;
    display: flex !important; flex-direction: column;
    align-items: center; gap: 10px;
    margin: 0 !important;
}
.pr-gp-mng-empty svg { width: 36px; height: 36px; opacity: 0.5; }
.pr-gp-mng-empty span { font-size: 12.5px; font-weight: 500; }

/* Estados SortableJS */
.pr-gp-mng-ghost {
    opacity: 0.3;
    background: #ECFEFF !important;
    border-color: #06B6D4 !important;
}
.pr-gp-mng-chosen {
    box-shadow: 0 8px 24px rgba(6,182,212,0.3) !important;
    border-color: #06B6D4 !important;
}
.pr-gp-mng-dragging {
    transform: rotate(2deg);
    cursor: grabbing !important;
}

/* ====== Modal grupo-form (monitores) ====== */
.pr-gp-mon-tools {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap;
}
.pr-search--small {
    position: relative;
    flex: 1 1 220px;        /* faz o filtro ocupar o espaço disponível ao lado do "Marcar todos" */
    min-width: 180px;
}
.pr-search--small input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    font-size: 13px;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    background: #fff;
    color: var(--pr-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.pr-search--small input:focus {
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
}
.pr-search--small input::placeholder { color: var(--pr-text-mute); }
.pr-search--small svg {
    position: absolute;             /* sem isso o `left:12px` não vale e o ícone vaza */
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--pr-text-mute);
    pointer-events: none;
    flex: none;
}

/* Data final quando Permanente está ativo — mostra texto "Sem expiração"
   sobreposto ao valor real (que continua 2050-12-31 pra preservar no submit). */
.pr-input--permanente {
    color: transparent !important;
    position: relative;
}
.pr-input--permanente::-webkit-datetime-edit { color: transparent; }
.pr-field {
    position: relative;
}
.pr-field:has(.pr-input--permanente)::after {
    content: 'Sem expiração';
    position: absolute;
    left: 14px; right: 14px;
    bottom: 11px;
    color: var(--pr-text-mute);
    font-size: 13px;
    font-style: italic;
    pointer-events: none;
    font-weight: 500;
}
.pr-gp-mon-todos {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    color: var(--pr-text-mute);
    cursor: pointer;
    user-select: none;
}
.pr-gp-mon-todos input { margin: 0; cursor: pointer; }

.pr-gp-mon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--pr-border-soft);
    border-radius: 8px;
    background: #F8FAFC;
}
.pr-gp-mon-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.pr-gp-mon-item:hover { border-color: var(--pr-accent); }
.pr-gp-mon-item input { display: none; }
.pr-gp-mon-item__box {
    width: 16px; height: 16px;
    border: 2px solid var(--pr-border);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all .15s;
}
.pr-gp-mon-item input:checked + .pr-gp-mon-item__box {
    background: var(--pr-accent);
    border-color: var(--pr-accent);
}
.pr-gp-mon-item input:checked + .pr-gp-mon-item__box::after {
    content: '';
    position: absolute;
    left: 4px; top: 0;
    width: 4px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pr-gp-mon-item input:checked ~ .pr-gp-mon-item__nome { font-weight: 600; color: var(--pr-text); }
.pr-gp-mon-item__nome {
    font-size: 13px;
    color: var(--pr-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== Switch reusável (status / permanente) ====== */
.pr-switch {
    display: flex; align-items: center; gap: 10px;
    padding-top: 4px;
}
.pr-switch input { display: none; }
.pr-switch label {
    width: 38px; height: 22px;
    background: #CBD5E1;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
    margin: 0 !important;
}
.pr-switch label::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform .2s;
}
.pr-switch input:checked + label { background: #06B6D4; }
.pr-switch input:checked + label::after { transform: translateX(16px); }
.pr-switch span { font-size: 13px; color: var(--pr-text); font-weight: 500; }

/* ====== Mobile drag-drop (touch) ====== */
@media (max-width: 768px) {
    .pr-gp-mng-body { grid-template-columns: 1fr; max-height: 75vh; padding: 16px; gap: 16px; }
    .pr-gp-mng-drag { width: 32px; height: 36px; background: #F1F5F9; }
    .pr-gp-mng-drag svg { width: 20px; height: 20px; }
    .pr-gp-mng-item, .pr-gp-mng-disp-item { padding: 10px 12px; }
    .pr-gp-thumb-stack { height: 130px; }
}

/* =====================================================================
   PLAYLIST POR MONITOR — chips de filtro + toggle + pill cinza (Embaralhar)
   ===================================================================== */
.pr-prog-pill--gray { background: #E2E8F0; color: #475569; border: 1px solid #CBD5E1; }
.pr-prog-pill--gray svg { color: #94A3B8; }

.pr-prog-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 4px 0 12px;
}
.pr-prog-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    font-size: 12px; font-weight: 600;
    background: #fff;
    border: 1px solid var(--pr-border);
    color: var(--pr-text-mute);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.pr-prog-chip:hover { border-color: var(--pr-text-mute); color: var(--pr-text); }
.pr-prog-chip svg { width: 12px; height: 12px; }
.pr-prog-chip__count {
    background: #F1F5F9;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
}
.pr-prog-chip--active { color: #fff; background: var(--pr-text); border-color: var(--pr-text); }
.pr-prog-chip--active .pr-prog-chip__count { background: rgba(255,255,255,0.25); color: #fff; }
.pr-prog-chip--green.pr-prog-chip--active  { background: #16A34A; border-color: #16A34A; }
.pr-prog-chip--blue.pr-prog-chip--active   { background: #2563EB; border-color: #2563EB; }
.pr-prog-chip--purple.pr-prog-chip--active { background: #7C3AED; border-color: #7C3AED; }
.pr-prog-chip--gray.pr-prog-chip--active   { background: #475569; border-color: #475569; }

.pr-prog-toggle {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500;
    color: var(--pr-text-mute);
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.pr-prog-toggle:hover { background: #F8FAFC; color: var(--pr-text); }
.pr-prog-toggle input { margin: 0; cursor: pointer; accent-color: #06B6D4; }

/* Cards expirado/bloqueado ganham aparência mais apagada */
.pr-prog-card--expirado, .pr-prog-card--bloqueado { opacity: 0.65; filter: grayscale(0.3); }
.pr-prog-card--expirado .pr-prog-card__status, .pr-prog-card--bloqueado .pr-prog-card__status { font-weight: 700; }

/* =====================================================================
   SLIDEOVER MONITORAMENTO — caixinha de Ficha técnica (pedido Chat A do Lucas)
   ===================================================================== */
.pr-info-box {
    display: flex; flex-direction: column;
    gap: 1px;
    background: #F8FAFC;
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    overflow: hidden;
}
.pr-info-box__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 14px;
    background: #fff;
    font-size: 13px;
    gap: 12px;
}
.pr-info-box__row + .pr-info-box__row { border-top: 1px solid var(--pr-border-soft); }
.pr-info-box__row small {
    color: var(--pr-text-mute);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.pr-info-box__row span {
    color: var(--pr-text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

/* =====================================================================
   BOLINHA ONLINE/OFFLINE — usada nos forms de Mídia / Comunicado / Grupo
   ===================================================================== */
.pr-mon-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.pr-mon-dot--on  { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.18), 0 0 4px rgba(22,163,74,0.5); }
.pr-mon-dot--off { background: #94A3B8; }

/* =====================================================================
   ESTÚDIO PREMIUM — editor visual /premium/criar (Fabric.js)
   ===================================================================== */
.pr-estudio {
    display: grid;
    grid-template-columns: 76px 280px 1fr 300px;
    gap: 12px;
    height: calc(100vh - 200px);
    min-height: 600px;
    background: var(--pr-shell-bg);
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--pr-border-soft);
}

/* === Coluna 1: barra de ferramentas === */
.pr-est-tools {
    display: flex; flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    padding: 8px;
    overflow-y: auto;
}
.pr-est-tool {
    background: none; border: 0;
    width: 100%; padding: 10px 4px;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--pr-text-mute);
    transition: background .15s, color .15s;
}
.pr-est-tool:hover { background: #F1F5F9; color: var(--pr-text); }
.pr-est-tool.is-active { background: #EFF6FF; color: #2563EB; }
.pr-est-tool svg { width: 22px; height: 22px; }
.pr-est-tool span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; }

/* === Coluna 2: painel da ferramenta === */
.pr-est-panel {
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    padding: 14px;
    overflow-y: auto;
    min-width: 0;
}
.pr-est-pane { display: none; }
.pr-est-pane.is-active { display: block; }
.pr-est-pane__title {
    font-size: 11px; font-weight: 700;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 0 0 10px;
}

/* Formatos */
.pr-est-formats { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-est-format {
    flex: 1 0 calc(33.33% - 4px);
    padding: 10px 6px;
    background: #F8FAFC;
    border: 1.5px solid var(--pr-border);
    border-radius: 8px;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    color: var(--pr-text-mute);
    transition: border-color .15s, color .15s;
}
.pr-est-format:hover { border-color: var(--pr-accent); color: var(--pr-text); }
.pr-est-format.is-active { border-color: #2563EB; color: #2563EB; background: #EFF6FF; }
.pr-est-format__icon { width: 24px; height: 24px; background: currentColor; border-radius: 3px; opacity: 0.6; }
.pr-est-format__icon--v { width: 16px; height: 26px; }
.pr-est-format__icon--h { width: 26px; height: 16px; }
.pr-est-format__icon--q { width: 22px; height: 22px; }

/* Templates */
.pr-est-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pr-est-template {
    background: none; border: 1.5px solid var(--pr-border-soft);
    border-radius: 10px; cursor: pointer;
    padding: 0; overflow: hidden;
    transition: border-color .15s, transform .15s;
    display: flex; flex-direction: column;
}
.pr-est-template:hover { border-color: var(--pr-accent); transform: translateY(-2px); }
.pr-est-template__thumb { aspect-ratio: 9/16; }
.pr-est-template__nome { padding: 6px 4px; font-size: 11.5px; font-weight: 600; color: var(--pr-text); }

/* Orientação "Selecione o formato antes" (entre Formato e Modelos prontos) */
.pr-est-orient {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 14px; padding: 10px 12px;
    background: #FEF3C7; border: 1px solid #FCD34D;
    border-radius: 8px;
    font-size: 12px; line-height: 1.4; color: #92400E;
}
.pr-est-orient svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.pr-est-orient strong { color: #78350F; }

/* Modal Selecionar Monitores — grupos por local */
.pr-est-mon-grupo { margin-bottom: 8px; }
.pr-est-mon-grupo__head {
    display: flex; gap: 8px; align-items: center;
    padding: 6px 8px; background: #F1F5F9; border-radius: 6px;
    cursor: pointer; font-size: 13px;
}
.pr-est-mon-grupo__head input { margin: 0; }
.pr-est-mon-grupo__head strong { flex: 1; color: var(--pr-text); font-weight: 600; }
.pr-est-mon-grupo__head span { color: #64748b; font-size: 11.5px; }
.pr-est-mon-list { padding: 4px 0 4px 22px; }
.pr-est-mon-item {
    display: flex; gap: 8px; align-items: center;
    padding: 4px 8px; border-radius: 4px; cursor: pointer;
    font-size: 12.5px; color: var(--pr-text);
}
.pr-est-mon-item:hover { background: #F8FAFC; }
.pr-est-mon-item input { margin: 0; }

/* Texto */
.pr-est-text-preset {
    width: 100%; margin-bottom: 6px;
    padding: 12px;
    background: #F8FAFC;
    border: 1.5px solid var(--pr-border-soft);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column; gap: 3px;
    transition: border-color .15s, background .15s;
}
.pr-est-text-preset:hover { border-color: var(--pr-accent); background: #fff; }
.pr-est-text-preset small { font-size: 10.5px; color: var(--pr-text-mute); }

/* Formas */
.pr-est-shapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.pr-est-shape {
    aspect-ratio: 1/1;
    background: #F8FAFC;
    border: 1.5px solid var(--pr-border-soft);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px;
    transition: border-color .15s, transform .15s;
}
.pr-est-shape:hover { border-color: var(--pr-accent); transform: scale(1.05); }
.pr-est-shape svg { width: 100%; height: 100%; }

/* Upload */
.pr-est-upload {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    padding: 32px 16px;
    background: #F8FAFC;
    border: 2px dashed var(--pr-border);
    border-radius: 12px;
    cursor: pointer;
    color: var(--pr-text-mute);
    transition: border-color .15s, background .15s;
}
.pr-est-upload:hover { border-color: var(--pr-accent); background: #EFF6FF; color: var(--pr-text); }
.pr-est-upload svg { width: 36px; height: 36px; }
.pr-est-upload strong { font-size: 14px; color: var(--pr-text); }
.pr-est-upload span { font-size: 11.5px; }
.pr-est-hint { font-size: 11.5px; color: var(--pr-text-mute); margin-top: 10px; line-height: 1.5; }

/* Ícones */
.pr-est-icon-search {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--pr-border);
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 10px;
    outline: none;
}
.pr-est-icons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    max-height: 400px; overflow-y: auto;
}
.pr-est-icon-btn {
    aspect-ratio: 1/1;
    background: #F8FAFC;
    border: 1.5px solid var(--pr-border-soft);
    border-radius: 8px;
    cursor: pointer; padding: 8px;
    color: var(--pr-text);
    transition: border-color .15s, transform .15s;
}
.pr-est-icon-btn:hover { border-color: var(--pr-accent); transform: scale(1.1); }
.pr-est-icon-btn svg { width: 100%; height: 100%; }

/* Fundo */
.pr-est-bg-colors, .pr-est-bg-grads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.pr-est-bg-color, .pr-est-bg-grad {
    aspect-ratio: 1/1;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s, transform .15s;
}
.pr-est-bg-color:hover, .pr-est-bg-grad:hover { border-color: var(--pr-accent); transform: scale(1.06); }
.pr-est-bg-custom {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border: 1.5px solid var(--pr-border-soft);
    border-radius: 10px;
    cursor: pointer;
}
.pr-est-bg-custom input { width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; }
.pr-est-bg-custom span { font-size: 12.5px; color: var(--pr-text-mute); }

/* === Coluna 3: stage / canvas === */
.pr-est-stage {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}
.pr-est-stage__toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--pr-border-soft);
    flex-wrap: wrap;
}
.pr-est-stage__group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid var(--pr-border-soft); }
.pr-est-stage__group:last-child { border-right: 0; }
.pr-est-stage__spacer { flex: 1; }
.pr-est-iconbtn {
    background: none; border: 0;
    width: 32px; height: 32px;
    border-radius: 7px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--pr-text-mute);
    transition: background .15s, color .15s;
}
.pr-est-iconbtn:hover:not(:disabled) { background: #E2E8F0; color: var(--pr-text); }
.pr-est-iconbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.pr-est-iconbtn--danger:hover { background: #FEE2E2; color: #DC2626; }
.pr-est-iconbtn svg { width: 16px; height: 16px; }
.pr-est-zoom-val { font-size: 12px; font-weight: 600; color: var(--pr-text-mute); min-width: 40px; text-align: center; }

.pr-est-stage__canvas-wrap {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%),
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #fafafa;
    padding: 30px;
    overflow: auto;
}
#pr-est-canvas {
    box-shadow: 0 16px 48px rgba(15,23,42,0.15), 0 4px 12px rgba(15,23,42,0.08);
    background: #fff;
}
.canvas-container { box-shadow: 0 16px 48px rgba(15,23,42,0.15), 0 4px 12px rgba(15,23,42,0.08); }

/* === Coluna 4: propriedades + camadas === */
.pr-est-side {
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.pr-est-side__tabs {
    display: flex;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-est-side__tab {
    flex: 1;
    background: none; border: 0;
    padding: 12px 8px;
    cursor: pointer;
    font-size: 12.5px; font-weight: 600;
    color: var(--pr-text-mute);
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.pr-est-side__tab:hover { color: var(--pr-text); }
.pr-est-side__tab.is-active { color: var(--pr-text); border-bottom-color: var(--pr-accent); }
.pr-est-side__tab span { background: #F1F5F9; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; margin-left: 4px; }

.pr-est-side__pane { display: none; flex: 1; overflow-y: auto; padding: 14px; }
.pr-est-side__pane.is-active { display: block; }
.pr-est-props-empty { text-align: center; color: var(--pr-text-mute); padding: 40px 20px; }
.pr-est-props-empty svg { width: 40px; height: 40px; opacity: 0.4; }
.pr-est-props-empty p { font-size: 12.5px; margin: 10px 0 0; }

.pr-est-prop-row {
    margin-bottom: 12px;
}
.pr-est-prop-row label {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.pr-est-prop-row input[type="text"],
.pr-est-prop-row input[type="number"],
.pr-est-prop-row textarea,
.pr-est-prop-row select {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--pr-border);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}
.pr-est-prop-row input[type="color"] { width: 100%; height: 40px; border: 1.5px solid var(--pr-border); border-radius: 6px; padding: 2px; cursor: pointer; }
.pr-est-prop-row input[type="range"] { width: calc(100% - 50px); display: inline-block; vertical-align: middle; }
.pr-est-prop-val { font-size: 11.5px; color: var(--pr-text-mute); margin-left: 4px; }
.pr-est-prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.pr-est-btn-group { display: flex; gap: 4px; }
.pr-est-btn-group button {
    flex: 1;
    padding: 8px 4px;
    background: #F1F5F9;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--pr-text-mute);
    transition: background .15s, color .15s, border-color .15s;
}
.pr-est-btn-group button:hover { background: #E2E8F0; color: var(--pr-text); }
.pr-est-btn-group button.is-active { background: #EFF6FF; color: #2563EB; border-color: #2563EB; }

/* Layers */
.pr-est-layers-empty { color: var(--pr-text-mute); font-size: 12.5px; text-align: center; padding: 30px 10px; }
.pr-est-layer {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #F8FAFC;
    border: 1px solid var(--pr-border-soft);
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: border-color .15s;
}
.pr-est-layer:hover { border-color: var(--pr-accent); }
.pr-est-layer__ico { width: 22px; height: 22px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--pr-text-mute); flex-shrink: 0; }
.pr-est-layer__nome { flex: 1; font-size: 12.5px; color: var(--pr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-est-layer__del { background: none; border: 0; color: var(--pr-text-mute); cursor: pointer; font-size: 18px; padding: 0 6px; line-height: 1; border-radius: 4px; transition: background .15s, color .15s; }
.pr-est-layer__del:hover { background: #FEE2E2; color: #DC2626; }

/* Sub-tab cor rosa (Criar) */
.pr-subtab--rose .pr-subtab__icon { color: #E11D48; }
.pr-subtab--rose.is-active { background: linear-gradient(180deg, #FFF1F2, #FFE4E6); border-color: #FECDD3; }
.pr-subtab--rose.is-active .pr-subtab__icon { color: #BE123C; }

/* Pr-btn small variation */
.pr-btn--small { padding: 6px 12px; font-size: 12px; }

/* Responsivo: empilha colunas em telas pequenas */
@media (max-width: 1200px) {
    .pr-estudio {
        grid-template-columns: 64px 240px 1fr 260px;
    }
}
@media (max-width: 900px) {
    .pr-estudio {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 60vh auto;
        height: auto;
    }
    .pr-est-tools {
        flex-direction: row;
        overflow-x: auto;
    }
    .pr-est-tool { flex-shrink: 0; min-width: 72px; }
}


/* ================================================================
   RELATÓRIOS PREMIUM — .pr-rel-*
   Central de relatórios com KPIs, abas internas, filtros, gráficos
   (Chart.js) e tabelas detalhadas. Tela /premium/relatorios.
   ================================================================ */
.pr-rel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

.pr-rel-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pr-rel-kpi {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: 18px 20px;
    display: flex; gap: 16px; align-items: center;
    box-shadow: var(--pr-shadow-sm);
    position: relative;
    overflow: hidden;
}
.pr-rel-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--rel-kpi-color, #5F6FFF);
}
.pr-rel-kpi--blue   { --rel-kpi-color: #5F6FFF; }
.pr-rel-kpi--green  { --rel-kpi-color: #10B981; }
.pr-rel-kpi--purple { --rel-kpi-color: #8B5CF6; }
.pr-rel-kpi--orange { --rel-kpi-color: #F59E0B; }
.pr-rel-kpi__ico {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rel-kpi-color) 12%, transparent);
    color: var(--rel-kpi-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-rel-kpi__ico svg { width: 26px; height: 26px; }
.pr-rel-kpi__num {
    font-family: var(--pr-font-display);
    font-size: 26px; font-weight: 800; color: var(--pr-text);
    line-height: 1.1;
}
.pr-rel-kpi__label {
    font-size: 12.5px; color: var(--pr-text-soft);
    margin-top: 4px;
}

.pr-rel-tabs {
    display: flex;
    gap: 4px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: 6px;
    overflow-x: auto;
}
.pr-rel-tab {
    flex: 1;
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font-family: var(--pr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.pr-rel-tab svg { width: 16px; height: 16px; opacity: 0.7; }
.pr-rel-tab:hover { background: var(--pr-surface-soft); color: var(--pr-text); }
.pr-rel-tab.is-active {
    background: linear-gradient(135deg, #1B2845, #283359);
    color: #fff;
    box-shadow: 0 4px 12px rgba(27,40,69,0.22);
}
.pr-rel-tab.is-active svg { opacity: 1; }

.pr-rel-filters {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.pr-rel-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}
.pr-rel-filter--grow { flex: 1; min-width: 220px; }
.pr-rel-filter--actions {
    flex: 0 0 auto;
    margin-left: auto;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
}
.pr-rel-filter__lbl {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pr-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pr-rel-filter__range {
    display: flex;
    gap: 8px;
}
.pr-rel-filter__range input { flex: 1; }
.pr-rel-export {
    display: flex;
    gap: 6px;
}

.pr-rel-content { position: relative; }
.pr-rel-pane { display: none; flex-direction: column; gap: 16px; }
.pr-rel-pane.is-active { display: flex; }

.pr-rel-chart-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow-sm);
    overflow: hidden;
}
.pr-rel-chart-card--half { flex: 1; }
.pr-rel-chart-card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pr-border-soft);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pr-rel-chart-card__head h3 {
    margin: 0;
    font-family: var(--pr-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--pr-text);
}
.pr-rel-chart-card__sub {
    font-size: 12px;
    color: var(--pr-text-mute);
}
.pr-rel-chart-card__body {
    padding: 16px 20px 20px;
    min-height: 280px;
    position: relative;
}
.pr-rel-chart-card__body canvas {
    max-height: 320px;
    width: 100% !important;
}
.pr-rel-row {
    display: flex;
    gap: 16px;
}

.pr-rel-resumo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pr-rel-resumo__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    background: var(--pr-surface-soft);
    border-radius: 9px;
    font-size: 13px;
}
.pr-rel-resumo__item span { color: var(--pr-text-soft); }
.pr-rel-resumo__item b {
    font-family: var(--pr-font-display);
    font-size: 15px;
    color: var(--pr-text);
    font-weight: 700;
}
.pr-rel-resumo__item--final {
    background: linear-gradient(135deg, #ECEEFF, #F5F0FF);
    border: 1px solid rgba(95,111,255,0.2);
}
.pr-rel-resumo__item--final b { color: var(--pr-blue); }

.pr-rel-table-wrap {
    background: var(--pr-surface);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    /* Fallback "overflow: hidden" pra Safari iOS < 13.4 (não suporta shorthand 2-valores
       e podia receber a combinação `auto hidden` quebrada). Depois sobrescrevemos só o
       eixo X com overflow-x, que é longhand suportado desde sempre. Esse padrão evita
       a regressão reportada no veredito v=147. */
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--pr-shadow-sm);
}
.pr-rel-table-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pr-border-soft);
    background: var(--pr-surface-soft);
}
.pr-rel-table-totais {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.pr-rel-table-totais > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pr-rel-table-totais span {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--pr-text-mute);
    letter-spacing: 0.4px;
    font-weight: 600;
}
.pr-rel-table-totais b {
    font-family: var(--pr-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--pr-text);
}
.pr-rel-table-totais .pr-rel-on  { color: var(--pr-success); }
.pr-rel-table-totais .pr-rel-off { color: var(--pr-danger); }

/* Multiplus — botão incluir, chips e seções por vídeo */
.pr-rel-filter--incluir-video { display: flex; flex-direction: column; justify-content: flex-end; }
.pr-rel-video-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px; margin: 0 0 12px;
    background: rgba(91,91,214,0.06);
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
}
.pr-rel-video-chips__lbl { font-size: 12.5px; font-weight: 600; color: var(--pr-text-mute); }
.pr-rel-video-chips__list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.pr-rel-video-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 12px; border-radius: 16px;
    background: #fff; border: 1px solid var(--pr-border);
    font-size: 12.5px; color: var(--pr-text);
}
.pr-rel-video-chip__x {
    border: 0; background: rgba(15,23,42,0.06); color: var(--pr-text-mute);
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
    font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.pr-rel-video-chip__x:hover { background: var(--pr-danger); color: #fff; }
.pr-rel-video-chips__clear {
    border: 0; background: none; color: var(--pr-blue);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pr-rel-video-sec { margin-top: 18px; }
.pr-rel-video-sec__head { margin-bottom: 8px; }
.pr-rel-video-sec__head h3 {
    margin: 0; font-size: 15px; font-weight: 700; color: var(--pr-text);
    font-family: var(--pr-font-display);
}
.pr-rel-video-sec__id { font-size: 12.5px; font-weight: 600; color: var(--pr-text-mute); }
.pr-rel-video-sec__meta { font-size: 12px; color: var(--pr-text-mute); margin-top: 2px; }
.pr-rel-video-sec__sub td { background: rgba(91,91,214,0.07); font-weight: 700; }

.pr-rel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pr-rel-table thead th {
    background: var(--pr-surface-soft);
    padding: 12px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pr-text-soft);
    border-bottom: 1px solid var(--pr-border-soft);
    white-space: nowrap;
}
.pr-rel-table thead th.r { text-align: right; }
.pr-rel-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--pr-border-soft);
    color: var(--pr-text);
    vertical-align: middle;
}
.pr-rel-table tbody td.r { text-align: right; }
.pr-rel-table tbody tr:last-child td { border-bottom: none; }
.pr-rel-table tbody tr:hover { background: var(--pr-surface-soft); }
.pr-rel-cell-strong { font-weight: 600; color: var(--pr-text); }
.pr-rel-cell-muted { color: var(--pr-text-mute); font-size: 12px; }

.pr-rel-pill {
    display: inline-block;
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
    font-family: var(--pr-font-display);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12.5px;
}
.pr-rel-tag {
    display: inline-block;
    background: var(--pr-surface-soft);
    border: 1px solid var(--pr-border);
    color: var(--pr-text-soft);
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
}
.pr-rel-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pr-rel-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.pr-rel-status--online,
.pr-rel-status--liberado {
    background: var(--pr-success-soft);
    color: #047857;
}
.pr-rel-status--offline,
.pr-rel-status--bloqueado {
    background: var(--pr-danger-soft);
    color: #B91C1C;
}
.pr-rel-status--expirado {
    background: var(--pr-warning-soft);
    color: #92400E;
}

.pr-rel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--pr-text-soft);
    font-size: 13.5px;
}
.pr-rel-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--pr-border);
    border-top-color: var(--pr-blue);
    border-radius: 50%;
    animation: pr-rel-spin 0.7s linear infinite;
}
@keyframes pr-rel-spin { to { transform: rotate(360deg); } }
.pr-rel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--pr-text-mute);
    font-size: 13.5px;
}
.pr-rel-empty svg { width: 48px; height: 48px; opacity: 0.5; }
.pr-rel-empty p { margin: 0; }

@media (max-width: 1024px) {
    .pr-rel-kpis { grid-template-columns: repeat(2, 1fr); }
    .pr-rel-row { flex-direction: column; }
    .pr-rel-filter--actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .pr-rel-kpis { grid-template-columns: 1fr; }
    /* .pr-rel-tab — regra consolidada no bloco v=147 (linha ~9771).
       Antes tinha min-width: 110px aqui que era sobrescrito mais abaixo. */
    .pr-rel-table { font-size: 12px; }
    .pr-rel-table thead th,
    .pr-rel-table tbody td { padding: 10px 12px; }
}

/* ================================================================
   COMPROVANTE DE VEICULAÇÃO — print-ready (.pr-cv-*)
   ================================================================ */
.pr-cv {
    max-width: 1000px;
    margin: 20px auto;
    background: #fff;
    padding: 0;
    font-family: var(--pr-font);
    color: #0F172A;
}
.pr-cv__capa {
    width: 100%;
    margin-bottom: 20px;
}
.pr-cv__capa img {
    width: 100%;
    height: auto;
    display: block;
}
.pr-cv__header {
    padding: 32px 40px 24px;
    border-bottom: 3px solid #0F172A;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}
.pr-cv__titulo {
    font-family: var(--pr-font-display);
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}
.pr-cv__sub {
    color: #475569;
    font-size: 13px;
    margin: 0;
}
.pr-cv__meta {
    text-align: right;
    font-size: 12px;
    color: #475569;
}
.pr-cv__meta b { display: block; color: #0F172A; font-size: 14px; }
.pr-cv__resumo {
    padding: 0 40px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.pr-cv__resumo-item {
    background: #F4F6FB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 16px 18px;
}
.pr-cv__resumo-item span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.pr-cv__resumo-item b {
    font-family: var(--pr-font-display);
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
}
.pr-cv__table-wrap { padding: 0 40px 40px; }
.pr-cv__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.pr-cv__table thead th {
    background: #1B2845;
    color: #fff;
    padding: 11px 14px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.pr-cv__table thead th.r { text-align: right; }
.pr-cv__table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB;
}
.pr-cv__table tbody td.r { text-align: right; }
.pr-cv__table tbody tr:nth-child(even) { background: #F8FAFD; }
.pr-cv__assinatura {
    margin-top: 60px;
    padding: 0 40px;
    text-align: center;
}
.pr-cv__assinatura-linha {
    width: 280px;
    margin: 0 auto 6px;
    border-bottom: 1px solid #0F172A;
}
.pr-cv__assinatura-nome {
    font-size: 13px;
    color: #475569;
}
.pr-cv__actions {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 100;
}
.pr-cv__actions button {
    background: #1B2845;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--pr-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.18);
}
.pr-cv__actions button:hover { background: #283359; }
.pr-cv__actions svg { width: 14px; height: 14px; }

@media print {
    body { background: white !important; }
    .pr-cv__actions, .pr-header, .pr-sidebar, .pr-content > *:not(.pr-cv) { display: none !important; }
    .pr-cv { margin: 0; max-width: 100%; padding: 0; }
    .pr-cv__capa img { page-break-after: always; }
    .pr-cv__table thead { display: table-header-group; }
    .pr-cv__table tbody tr { page-break-inside: avoid; }
}

/* ================================================================
   SDROP — Searchable dropdown (Relatórios)
   Usado nos filtros de cliente e vídeo com listas grandes.
   ================================================================ */
.pr-rel-sdrop {
    position: relative;
    width: 100%;
}
.pr-rel-sdrop__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid var(--pr-border);
    border-radius: 9px;
    font-family: var(--pr-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pr-text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.pr-rel-sdrop__btn:hover { border-color: var(--pr-blue); }
.pr-rel-sdrop.is-open .pr-rel-sdrop__btn {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(95,111,255,0.14);
}
.pr-rel-sdrop__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-rel-sdrop__btn svg {
    width: 14px;
    height: 14px;
    color: var(--pr-text-mute);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
.pr-rel-sdrop.is-open .pr-rel-sdrop__btn svg { transform: rotate(180deg); }

.pr-rel-sdrop__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    box-shadow: var(--pr-shadow-lg);
    z-index: 50;
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: 340px;
}
.pr-rel-sdrop.is-open .pr-rel-sdrop__panel { display: flex; }

.pr-rel-sdrop__search {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-rel-sdrop__search svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--pr-text-mute);
}
.pr-rel-sdrop__search input {
    width: 100%;
    padding: 8px 10px 8px 34px;
    border: 1px solid var(--pr-border);
    border-radius: 7px;
    font-family: var(--pr-font);
    font-size: 13px;
    color: var(--pr-text);
    outline: none;
}
.pr-rel-sdrop__search input:focus {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 2px rgba(95,111,255,0.12);
}

.pr-rel-sdrop__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1;
}
.pr-rel-sdrop__list li {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--pr-text);
    cursor: pointer;
    transition: background 0.1s ease;
    border-left: 3px solid transparent;
}
.pr-rel-sdrop__list li:hover { background: var(--pr-surface-soft); }
.pr-rel-sdrop__list li.is-active {
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
    font-weight: 600;
    border-left-color: var(--pr-blue);
}

/* ================================================================
   MODAL UNIFICADA DE GRUPO (Novo/Editar) — .pr-gpu-*
   Layout split-screen 2 colunas: Configurações × Mídias.
   Substitui as duas modais separadas (Novo Grupo + Gerenciar).
   ================================================================ */
.pr-gpu {
    /* base já vem do .pr-modal--xl (top/bottom 5vh + max-height 90vh) */
}
.pr-gpu-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 320px;
}

.pr-gpu-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}
.pr-gpu-col--config {
    background: #FAFBFC;
    border-right: 1px solid var(--pr-border-soft);
}
.pr-gpu-col--midias {
    background: #fff;
}

.pr-gpu-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pr-border-soft);
    margin-bottom: 14px;
    position: sticky;
    top: -18px;
    background: inherit;
    z-index: 2;
    padding-top: 4px;
}
.pr-gpu-col--config .pr-gpu-col-header { background: #FAFBFC; }
.pr-gpu-col--midias .pr-gpu-col-header { background: #fff; }
.pr-gpu-col-header h3 {
    margin: 0;
    font-family: var(--pr-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--pr-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.pr-gpu-col-header h3 svg {
    width: 16px; height: 16px;
    color: var(--pr-blue);
}

.pr-gpu-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
    font-family: var(--pr-font-display);
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.pr-gpu-pill--ghost {
    background: var(--pr-surface-soft);
    color: var(--pr-text-soft);
}

.pr-gpu-section {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--pr-border-soft);
}
.pr-gpu-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.pr-gpu-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.pr-gpu-mons-list {
    max-height: 320px;
}

/* Lista do grupo */
.pr-gpu-help {
    font-size: 12px;
    color: var(--pr-text-mute);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 0;
}
.pr-gpu-help svg {
    width: 12px; height: 12px;
    color: var(--pr-text-soft);
}
.pr-gpu-help strong {
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin: 0 2px;
}

.pr-gpu-lista {
    max-height: 280px;
    margin-bottom: 18px !important;
}
.pr-gpu-empty {
    text-align: center;
    color: var(--pr-text-mute);
    padding: 32px 16px !important;
}
.pr-gpu-empty svg {
    width: 36px; height: 36px;
    opacity: 0.5;
    margin-bottom: 8px;
}

.pr-gpu-disp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pr-border-soft);
}
.pr-gpu-disp-header h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pr-text-soft);
}

.pr-gpu-disp-list {
    max-height: 320px;
}
.pr-gp-mng-disp-item.is-added {
    opacity: 0.5;
    pointer-events: none;
    background: var(--pr-success-soft) !important;
}
.pr-gp-mng-disp-item.is-added .pr-cm-act--ok {
    background: var(--pr-success) !important;
    color: #fff !important;
}

/* Responsivo */
@media (max-width: 980px) {
    .pr-gpu-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        overflow-y: auto;
    }
    .pr-gpu-col--config {
        border-right: none;
        border-bottom: 1px solid var(--pr-border);
    }
    .pr-gpu-col {
        overflow-y: visible;
        max-height: none;
    }
    .pr-gpu-mons-list,
    .pr-gpu-lista,
    .pr-gpu-disp-list { max-height: 240px; }
}

/* ================================================================
   /premium/midias — SKELETON, PAGINAÇÃO, PROGRESS BAR, RESULTSBAR
   Componentes de UI premium pra listagem AJAX server-side.
   ================================================================ */

/* ----- Progress bar topo (YouTube-style 2px) ----- */
.pr-mid-progress {
    position: relative;
    height: 2px;
    overflow: hidden;
    margin: 0 0 -2px;
    pointer-events: none;
}
.pr-mid-progress span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--pr-blue), transparent);
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity .15s;
}
.pr-mid-progress.is-show span {
    opacity: 1;
    animation: pr-mid-progress-slide 1.2s linear infinite;
}
@keyframes pr-mid-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ----- Results bar (mostra filtros aplicados + clear) ----- */
.pr-mid-resultsbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    background: linear-gradient(90deg, var(--pr-blue-soft), transparent);
    border-bottom: 1px solid var(--pr-border-soft);
    font-size: 13px;
    color: var(--pr-text-soft);
}
.pr-mid-resultsbar strong {
    color: var(--pr-text);
    font-family: var(--pr-font-display);
    font-weight: 700;
}
.pr-mid-resultsbar__clear {
    background: transparent;
    border: 1px solid var(--pr-border);
    color: var(--pr-text-soft);
    padding: 6px 12px;
    border-radius: 7px;
    font-family: var(--pr-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pr-mid-resultsbar__clear:hover {
    background: #fff;
    border-color: var(--pr-text-soft);
    color: var(--pr-text);
}

/* ----- Skeleton placeholder (substitui itens durante loading) ----- */
.pr-mid-skel {
    display: grid;
    grid-template-columns: 30px 100px 1fr 110px 100px 90px 120px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-mid-skel > div {
    background: linear-gradient(90deg, #EEF1F5 0%, #F5F7FA 50%, #EEF1F5 100%);
    background-size: 200% 100%;
    animation: pr-mid-skel-pulse 1.4s ease-in-out infinite;
    border-radius: 6px;
}
.pr-mid-skel__cb     { width: 18px; height: 18px; }
.pr-mid-skel__thumb  { width: 90px; height: 56px; border-radius: 8px !important; }
.pr-mid-skel__main   { height: 36px; display: flex; flex-direction: column; gap: 6px; background: none !important; animation: none !important; }
.pr-mid-skel__line   { background: linear-gradient(90deg, #EEF1F5 0%, #F5F7FA 50%, #EEF1F5 100%); background-size: 200% 100%; animation: pr-mid-skel-pulse 1.4s ease-in-out infinite; border-radius: 4px; height: 14px; }
.pr-mid-skel__line--lg { width: 70%; }
.pr-mid-skel__line--sm { width: 45%; height: 11px; }
.pr-mid-skel__badge  { width: 80px; height: 22px; border-radius: 11px !important; }
.pr-mid-skel__period { width: 80px; height: 28px; }
.pr-mid-skel__updated { width: 70px; height: 28px; }
.pr-mid-skel__actions { width: 110px; height: 30px; }
@keyframes pr-mid-skel-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Paginação numerada (Stripe-style) ----- */
.pr-mid-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 16px;
    border-top: 1px solid var(--pr-border-soft);
    flex-wrap: wrap;
    background: var(--pr-surface-soft);
}
.pr-mid-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    color: var(--pr-text);
    cursor: pointer;
    transition: all 0.15s ease;
}
.pr-mid-pag-btn:hover:not(:disabled) {
    background: var(--pr-blue-soft);
    border-color: var(--pr-blue);
    color: var(--pr-blue);
}
.pr-mid-pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pr-mid-pag-btn svg { width: 14px; height: 14px; }
.pr-mid-pag-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pr-mid-pag-num {
    min-width: 36px; height: 36px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    color: var(--pr-text);
    font-family: var(--pr-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pr-mid-pag-num:hover {
    background: var(--pr-blue-soft);
    border-color: var(--pr-blue);
    color: var(--pr-blue);
}
.pr-mid-pag-num.is-active {
    background: linear-gradient(135deg, #1B2845, #283359);
    border-color: #1B2845;
    color: #fff;
    box-shadow: 0 2px 6px rgba(27,40,69,0.22);
}
.pr-mid-pag-ellipsis {
    padding: 0 6px;
    color: var(--pr-text-mute);
    font-weight: 700;
}
.pr-mid-pag-info {
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pr-text-soft);
    font-size: 12.5px;
}
.pr-mid-pag-info strong { color: var(--pr-text); font-family: var(--pr-font-display); }
.pr-mid-pag-ppp {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 7px;
    font-family: var(--pr-font);
    font-size: 12.5px;
    color: var(--pr-text);
    cursor: pointer;
}
.pr-mid-pag-ppp:focus {
    outline: none;
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 2px rgba(95,111,255,0.14);
}

/* Responsivo */
@media (max-width: 720px) {
    .pr-mid-skel {
        grid-template-columns: 30px 80px 1fr 80px;
    }
    .pr-mid-skel__period,
    .pr-mid-skel__updated,
    .pr-mid-skel__actions { display: none; }
    .pr-mid-pagination { flex-direction: column; }
    .pr-mid-pag-info { margin-left: 0; }
}

/* Badge "Novo" no item recém-adicionado na modal Gerenciar/Editar Grupo.
   Visual: pill verde-azulado pequena ao lado do nome. */
.pr-gp-mng-badge-novo {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: linear-gradient(135deg, #5F6FFF, #06B6D4);
    color: #fff;
    font-family: var(--pr-font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    vertical-align: middle;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(95,111,255,0.3);
}
.pr-gp-mng-item--novo {
    background: linear-gradient(90deg, rgba(95,111,255,0.04), transparent 40%);
    border-left: 3px solid var(--pr-blue);
}
.pr-gp-mng-item--novo .pr-gp-mng-thumb {
    position: relative;
}

/* ================================================================
   USUÁRIOS + LOGS DE ATIVIDADE — .pr-usr-* e .pr-log-*
   ================================================================ */

/* Avatar circular do usuário no card de listagem — sem o fundo preto herdado de .pr-mid-item__thumb */
.pr-mid-item__thumb.pr-usr-avatar {
    width: 60px !important;
    height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}
.pr-usr-avatar__circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5F6FFF, #8B5CF6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pr-font-display);
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(95,111,255,0.25);
    overflow: hidden;
    flex-shrink: 0;
}
.pr-usr-avatar__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bloco upload de foto no formulário */
.pr-usr-foto-uploader {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--pr-surface-soft);
    border-radius: 12px;
    border: 1px dashed var(--pr-border);
}
.pr-usr-foto-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5F6FFF, #8B5CF6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pr-font-display);
    font-size: 28px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(95,111,255,0.25);
}
.pr-usr-foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-usr-foto-info { flex: 1; }
.pr-usr-foto-info strong { display: block; font-size: 13px; color: var(--pr-text); margin-bottom: 4px; }
.pr-usr-foto-info small { display: block; color: var(--pr-text-mute); font-size: 11.5px; line-height: 1.4; }
.pr-usr-foto-input { display: none; }
.pr-usr-foto-actions { display: flex; gap: 8px; }
.pr-usr-foto-btn {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--pr-border);
    border-radius: 7px;
    font-family: var(--pr-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pr-text);
    cursor: pointer;
    transition: all .15s;
}
.pr-usr-foto-btn:hover { border-color: var(--pr-blue); color: var(--pr-blue); }
.pr-usr-foto-btn--del { color: #B91C1C; }
.pr-usr-foto-btn--del:hover { border-color: #B91C1C; color: #B91C1C; }

/* Pill colorido do papel */
.pr-usr-papel {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: var(--pr-font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    background: var(--pr-surface-soft);
    color: var(--pr-text-soft);
    border: 1px solid var(--pr-border);
}
.pr-usr-papel--admin      { background: linear-gradient(135deg, #1B2845, #0F172A); color: #fff; border-color: transparent; }
.pr-usr-papel--cliente    { background: var(--pr-blue-soft); color: var(--pr-blue); border-color: transparent; }
.pr-usr-papel--sindico,
.pr-usr-papel--sindicopro { background: var(--pr-purple-soft); color: var(--pr-purple); border-color: transparent; }
.pr-usr-papel--cons       { background: #DBEAFE; color: #1E40AF; border-color: transparent; }
.pr-usr-papel--crm,
.pr-usr-papel--tec,
.pr-usr-papel--sup        { background: #FEF3C7; color: #92400E; border-color: transparent; }
.pr-usr-papel--cop        { background: var(--pr-success-soft); color: #047857; border-color: transparent; }
.pr-usr-papel--dev        { background: #FCE7F3; color: #BE185D; border-color: transparent; }

/* ================================================================
   TIMELINE DE LOGS
   ================================================================ */
.pr-log-timeline {
    background: var(--pr-surface);
    border-top: 1px solid var(--pr-border-soft);
}
.pr-log-item {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--pr-border-soft);
    transition: background .15s ease;
}
.pr-log-item:hover { background: var(--pr-surface-soft); }
.pr-log-item:last-child { border-bottom: none; }

.pr-log-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pr-surface-soft);
    color: var(--pr-text-soft);
}
.pr-log-item__icon svg { width: 18px; height: 18px; }
.pr-log-item--add    .pr-log-item__icon { background: var(--pr-success-soft); color: #047857; }
.pr-log-item--delete .pr-log-item__icon { background: var(--pr-danger-soft);  color: #B91C1C; }
.pr-log-item--edit   .pr-log-item__icon { background: var(--pr-blue-soft);    color: var(--pr-blue); }
.pr-log-item--lock   .pr-log-item__icon { background: var(--pr-warning-soft); color: #92400E; }
.pr-log-item--user   .pr-log-item__icon { background: var(--pr-purple-soft);  color: var(--pr-purple); }

.pr-log-item__body { flex: 1; min-width: 0; }
.pr-log-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pr-log-item__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5F6FFF, #8B5CF6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pr-font-display);
    font-size: 11px;
    font-weight: 700;
}
.pr-log-item__user {
    color: var(--pr-text);
    font-size: 13px;
}
.pr-log-item__action {
    color: var(--pr-text-soft);
    font-size: 13px;
    font-weight: 500;
}
.pr-log-item__entity {
    background: var(--pr-surface-soft);
    color: var(--pr-text-mute);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11.5px;
}
.pr-log-item__details {
    color: var(--pr-text-soft);
    font-size: 12px;
    background: var(--pr-surface-soft);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 6px 0;
    font-family: monospace;
    word-break: break-word;
}
.pr-log-item__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--pr-text-mute);
}
.pr-log-item__sep { opacity: .5; }
.pr-log-item__modulo {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.4px;
}
.pr-log-item__modulo--premium { background: var(--pr-blue-soft); color: var(--pr-blue); }
.pr-log-item__modulo--legacy  { background: var(--pr-surface-soft); color: var(--pr-text-soft); }
.pr-log-item__ip { font-family: monospace; }

/* Skeleton dos logs */
.pr-log-skel {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--pr-border-soft);
}
.pr-log-skel__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F5 0%, #F5F7FA 50%, #EEF1F5 100%);
    background-size: 200% 100%;
    animation: pr-mid-skel-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
.pr-log-skel__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pr-log-skel__line {
    height: 14px;
    background: linear-gradient(90deg, #EEF1F5 0%, #F5F7FA 50%, #EEF1F5 100%);
    background-size: 200% 100%;
    animation: pr-mid-skel-pulse 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.pr-log-skel__line--lg { width: 60%; }
.pr-log-skel__line--sm { width: 35%; height: 11px; }

/* Sidebar avatar com foto carregada (sobrescreve background colorido pra mostrar img) */
.pr-sidebar__avatar-btn--has-foto {
    background: transparent !important;
    overflow: hidden;
    padding: 0;
}
.pr-sidebar__avatar-btn--has-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* === HOLERITES — Etapa 7.2 — modal de envio em lote === */
.pr-hol-uploader-list {
    display: flex; flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.pr-hol-uploader-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.pr-hol-uploader-row:hover { border-color: var(--pr-border); }
.pr-hol-uploader-row--has-file {
    border-color: var(--pr-success);
    background: rgba(16, 185, 129, 0.04);
}
.pr-hol-uploader-row__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pr-blue), var(--pr-blue-2));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-hol-uploader-row__info {
    display: flex; flex-direction: column;
    min-width: 0;
}
.pr-hol-uploader-row__info strong {
    font-size: 14px;
    color: var(--pr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-hol-uploader-row__info small {
    font-size: 11px;
    color: var(--pr-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-hol-uploader-row__file label {
    cursor: pointer;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
    border: 1px dashed var(--pr-blue);
    transition: background .15s ease, transform .1s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    max-width: 200px;
}
.pr-hol-uploader-row__file label:hover {
    background: rgba(95, 111, 255, 0.15);
}
.pr-hol-uploader-row__file label:active { transform: translateY(1px); }
.pr-hol-uploader-row--has-file .pr-hol-uploader-row__file label {
    background: rgba(16, 185, 129, 0.12);
    color: #15803D;
    border-color: var(--pr-success);
    border-style: solid;
}
.pr-hol-file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

/* === FORM USUÁRIO — layout split 2 colunas meio a meio (dados | seletor de monitores) === */
.pr-usr-form-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.pr-usr-form-split--single {
    /* Quando o papel não exige cliente, vira coluna única (sem seletor lateral) */
    grid-template-columns: 1fr !important;
}
.pr-usr-form-split__left {
    min-width: 0;  /* permite que campos longos respeitem o limite da coluna */
}
.pr-usr-form-split__right {
    min-width: 0;
    position: sticky;
    top: 0;
    /* Lista de monitores fica fixada quando rola o form */
}
.pr-usr-form-split__right .pr-cli-mons-list {
    /* Altura confortável pra ver vários grupos sem rolar a página inteira */
    max-height: 480px;
    overflow-y: auto;
}
/* === LOG DE ATIVIDADE v3 — Timeline real com bullets verticais + agrupamento por dia === */

/* Toolbar da tela de Logs — TUDO em uma linha só (busca + 3 selects + CSV).
   Usa classe dedicada em vez de :has() pra garantir compat com qualquer navegador. */
.pr-toolbar--logs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    align-items: center;
}
.pr-toolbar--logs .pr-toolbar__search {
    /* Busca compacta, mas com prioridade menor — os filtros que ocupam o espaço */
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 180px;
}
.pr-toolbar--logs .pr-toolbar__filters {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 10px;
    flex: 3 1 0;          /* Filtros ocupam 3x o espaço da busca — distribuem na largura */
    justify-content: stretch;
}
.pr-toolbar--logs .pr-pdrop--log .pr-pdrop__btn {
    height: 44px;
    padding: 0 14px;
    background: var(--pr-surface);
    border: 1.5px solid var(--pr-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text);
    cursor: pointer;
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    white-space: nowrap;
}
.pr-toolbar--logs .pr-pdrop--log .pr-pdrop__btn:hover { border-color: var(--pr-blue); }
.pr-toolbar--logs .pr-pdrop--log.is-open .pr-pdrop__btn {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(95, 111, 255, 0.10);
}
.pr-toolbar--logs .pr-pdrop--log.pr-pdrop--has-value .pr-pdrop__btn {
    border-color: var(--pr-blue);
    background: var(--pr-blue-soft);
    color: var(--pr-blue-2);
}
.pr-toolbar--logs .pr-pdrop--log .pr-pdrop__caret { width: 14px; height: 14px; flex-shrink: 0; }
/* Pdrops crescem distribuindo a largura disponível (usuário tem mais espaço pra nomes longos) */
.pr-toolbar--logs .pr-pdrop--log[data-pdrop-target="pr-log-periodo"] { flex: 1 1 0; min-width: 160px; }
.pr-toolbar--logs .pr-pdrop--log[data-pdrop-target="pr-log-usuario"] { flex: 2 1 0; min-width: 220px; }
.pr-toolbar--logs .pr-pdrop--log[data-pdrop-target="pr-log-modulo"]  { flex: 1 1 0; min-width: 150px; }
.pr-toolbar--logs .pr-toolbar__btn { flex-shrink: 0; margin-left: 4px; }

/* Em telas estreitas mesmo (< 1024px), os filtros podem cair pra segunda linha
   pra evitar selects ilegíveis. CSV continua no canto direito. */
@media (max-width: 1024px) {
    .pr-toolbar--logs { flex-wrap: wrap !important; }
    .pr-toolbar--logs .pr-toolbar__search { flex-basis: 100%; }
    .pr-toolbar--logs .pr-toolbar__filters { flex-wrap: wrap !important; }
}

/* Chips de visão (Todas / Pessoas / Sistema) — injetados pelo JS no topo da lista */
.pr-log-views {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    background: var(--pr-surface);
    border-bottom: 1px solid var(--pr-border-soft);
    flex-wrap: wrap;
}
.pr-log-views__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--pr-surface-soft);
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text-soft);
    cursor: pointer;
    transition: all .15s ease;
}
.pr-log-views__chip:hover { color: var(--pr-text); background: #E2E8F0; }
.pr-log-views__chip span {
    background: rgba(15, 23, 42, 0.08);
    color: var(--pr-text);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pr-log-views__chip.is-active {
    background: var(--pr-shell-navy);
    color: #fff;
    border-color: var(--pr-shell-navy);
}
.pr-log-views__chip.is-active span { background: rgba(255,255,255,0.20); color: #fff; }

/* Cluster: agrupamento de eventos consecutivos idênticos (ex: cron rodando 50× a mesma ação) */
.pr-log-cluster {
    margin: 4px 16px;
    border: 1px dashed var(--pr-border);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.6);
    overflow: hidden;
}
.pr-log-cluster__badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(241, 245, 249, 0.8);
    border-bottom: 1px solid var(--pr-border-soft);
    font-size: 12px;
}
.pr-log-cluster__bullet {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pr-log-cluster__bullet--add    { background: #10B981; }
.pr-log-cluster__bullet--delete { background: #EF4444; }
.pr-log-cluster__bullet--edit   { background: #3B82F6; }
.pr-log-cluster__bullet--lock   { background: #8B5CF6; }
.pr-log-cluster__bullet--warn   { background: #F59E0B; }
.pr-log-cluster__bullet--user   { background: #06B6D4; }
.pr-log-cluster__bullet--info   { background: #94A3B8; }
.pr-log-cluster__count {
    font-weight: 800;
    color: var(--pr-shell-navy);
    background: #fff;
    border: 1px solid var(--pr-border);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.pr-log-cluster__msg {
    flex: 1;
    color: var(--pr-text-soft);
}
.pr-log-cluster__toggle {
    background: transparent;
    border: 0;
    color: var(--pr-blue-2);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s ease;
}
.pr-log-cluster__toggle:hover { background: var(--pr-blue-soft); }
.pr-log-cluster .pr-log-event { padding-left: 16px; padding-right: 16px; }
.pr-log-cluster__hidden { background: rgba(248, 250, 252, 0.4); }

/* Header do grupo de dia (Hoje / Ontem / etc) — injetado via JS */
.pr-log-daygroup {
    display: flex; align-items: center;
    gap: 12px;
    padding: 16px 16px 8px;
    background: linear-gradient(180deg, #FAFBFC 0%, transparent 100%);
    border-top: 1px solid var(--pr-border-soft);
    position: sticky;
    top: 0;
    z-index: 2;
}
.pr-log-daygroup:first-child { border-top: 0; }
.pr-log-daygroup__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pr-text-mute);
}
.pr-log-daygroup__date {
    font-size: 11px;
    color: var(--pr-text-mute);
}
.pr-log-daygroup__count {
    margin-left: auto;
    font-size: 11px;
    color: var(--pr-text-mute);
    background: var(--pr-surface-soft);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Evento individual da timeline */
.pr-log-event {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 0 16px;
    position: relative;
}
.pr-log-event:last-child .pr-log-event__rail::before { display: none; }

/* Trilho vertical (linha + bullet) */
.pr-log-event__rail {
    position: relative;
    display: flex; justify-content: center;
    padding-top: 18px;
}
.pr-log-event__rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 28px;
    bottom: -10px;
    width: 2px;
    background: var(--pr-border-soft);
    transform: translateX(-50%);
}
.pr-log-event__bullet {
    position: relative;
    z-index: 1;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #94A3B8;
    box-shadow: 0 0 0 3px var(--pr-surface);
}
.pr-log-event--add    .pr-log-event__bullet { background: #10B981; }
.pr-log-event--delete .pr-log-event__bullet { background: #EF4444; }
.pr-log-event--edit   .pr-log-event__bullet { background: #3B82F6; }
.pr-log-event--lock   .pr-log-event__bullet { background: #8B5CF6; }
.pr-log-event--warn   .pr-log-event__bullet { background: #F59E0B; }
.pr-log-event--user   .pr-log-event__bullet { background: #06B6D4; }
.pr-log-event--info   .pr-log-event__bullet { background: #94A3B8; }

/* Card do evento */
.pr-log-event__card {
    padding: 12px 14px;
    margin: 6px 0;
    background: var(--pr-surface);
    border: 1px solid var(--pr-border-soft);
    border-radius: 10px;
    transition: border-color .15s ease, transform .12s ease;
    min-width: 0;
}
.pr-log-event__card:hover {
    border-color: #CBD5E1;
    transform: translateX(2px);
}

.pr-log-event__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}
.pr-log-event__who {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
}
.pr-log-event__avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.pr-log-event__avatar--add    { background: linear-gradient(135deg, #10B981, #059669); }
.pr-log-event__avatar--delete { background: linear-gradient(135deg, #EF4444, #DC2626); }
.pr-log-event__avatar--edit   { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.pr-log-event__avatar--lock   { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.pr-log-event__avatar--warn   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.pr-log-event__avatar--user   { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.pr-log-event__avatar--info   { background: linear-gradient(135deg, #64748B, #475569); }

.pr-log-event__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.pr-log-event__name--sys {
    color: var(--pr-text-mute);
    font-style: italic;
    font-weight: 500;
}
.pr-log-event__action {
    font-size: 13px;
    color: var(--pr-text-soft);
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-log-event__time {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.pr-log-event__hora {
    font-size: 12px;
    color: var(--pr-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pr-log-event__rel {
    font-size: 10px;
    color: var(--pr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pr-log-event__meta {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.pr-log-event__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--pr-surface-soft);
    color: var(--pr-text-soft);
}
.pr-log-event__chip--ent { color: var(--pr-text); font-variant-numeric: tabular-nums; }
.pr-log-event__chip--mod-premium { background: var(--pr-blue-soft); color: var(--pr-blue-2); }
.pr-log-event__chip--mod-legacy  { background: #F1F5F9; color: #64748B; }
.pr-log-event__chip--mod-legado  { background: #F1F5F9; color: #64748B; }
.pr-log-event__chip--ip {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: transparent;
    color: var(--pr-text-mute);
    padding-left: 0;
}
.pr-log-event__chip--more {
    background: #FEF3C7;
    color: #92400E;
    cursor: help;
}
.pr-log-event__chip--more svg { width: 11px; height: 11px; }

.pr-log-event__details {
    margin-top: 8px;
    padding: 8px 12px;
    background: #F8FAFC;
    border-left: 3px solid #CBD5E1;
    border-radius: 4px;
    font-size: 12px;
    color: var(--pr-text-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    word-break: break-word;
    display: none;  /* Expand on hover via .pr-log-event__chip--more hover or always-visible variant */
}
/* Mostra detalhes ao hover do card todo */
.pr-log-event__card:hover .pr-log-event__details { display: block; }

@media (max-width: 720px) {
    .pr-log-event__head { grid-template-columns: 1fr auto; gap: 6px; }
    .pr-log-event__who { grid-column: 1 / -1; }
    .pr-log-event__name { max-width: 140px; }
}

/* === LOG v2 (obsoleto) — mantido como fallback caso algum cache ainda renderize. */
.pr-logv2-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pr-border-soft);
    background: var(--pr-surface);
    transition: background .15s ease;
}
.pr-logv2-item:hover { background: var(--pr-surface-soft); }
.pr-logv2-item__icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.pr-logv2-item__icon svg { width: 16px; height: 16px; }
.pr-logv2-item--add    .pr-logv2-item__icon { background: linear-gradient(135deg, #10B981, #059669); }
.pr-logv2-item--delete .pr-logv2-item__icon { background: linear-gradient(135deg, #EF4444, #DC2626); }
.pr-logv2-item--edit   .pr-logv2-item__icon { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.pr-logv2-item--lock   .pr-logv2-item__icon { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.pr-logv2-item--warn   .pr-logv2-item__icon { background: linear-gradient(135deg, #F59E0B, #D97706); }
.pr-logv2-item--user   .pr-logv2-item__icon { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.pr-logv2-item--info   .pr-logv2-item__icon { background: linear-gradient(135deg, #64748B, #475569); }

.pr-logv2-item__body {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 6px;
}
.pr-logv2-item__top {
    display: flex; align-items: flex-start; gap: 12px;
    justify-content: space-between;
}
.pr-logv2-item__action {
    font-size: 14px;
    font-weight: 600;
    color: var(--pr-text);
    line-height: 1.4;
    word-break: break-word;
}
.pr-logv2-item__time {
    font-size: 12px;
    color: var(--pr-text-mute);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}
.pr-logv2-item__meta {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pr-text-mute);
}
.pr-logv2-item__sep { color: #CBD5E1; }
.pr-logv2-item__who {
    font-weight: 600;
    color: var(--pr-text-soft);
}
.pr-logv2-item__who--sys {
    color: var(--pr-text-mute);
    font-style: italic;
    font-weight: 500;
}
.pr-logv2-item__entity {
    font-variant-numeric: tabular-nums;
    color: var(--pr-text-soft);
    font-weight: 500;
}
.pr-logv2-item__mod {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pr-logv2-item__mod--premium { background: var(--pr-blue-soft); color: var(--pr-blue-2); }
.pr-logv2-item__mod--legacy  { background: #F1F5F9; color: #475569; }
.pr-logv2-item__ip {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--pr-text-mute);
}
.pr-logv2-item__details {
    margin-top: 4px;
    padding: 8px 12px;
    background: #F8FAFC;
    border-left: 3px solid var(--pr-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--pr-text-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    word-break: break-word;
}

/* Painel "Acesso completo" — quando o papel não usa restrição de monitores */
.pr-mons-noaccess {
    padding: 32px 24px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px dashed var(--pr-border);
    border-radius: 12px;
    text-align: center;
    color: var(--pr-text-soft);
    margin-top: 0;
}
.pr-mons-noaccess__icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.35);
}
.pr-mons-noaccess__icon svg { width: 26px; height: 26px; }
.pr-mons-noaccess__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pr-text);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.pr-mons-noaccess__msg {
    font-size: 13px;
    color: var(--pr-text-soft);
    line-height: 1.5;
}
.pr-mons-noaccess__msg em { color: var(--pr-blue-2); font-style: normal; font-weight: 600; }

/* === Divisores do seletor (separa "já vinculados" de "outros disponíveis") === */
.pr-mons-divisor {
    display: flex; align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 4px 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pr-text-mute);
}
.pr-mons-divisor__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pr-border);
}
.pr-mons-divisor--marcados {
    background: rgba(16, 185, 129, 0.06);
    color: #15803D;
}
.pr-mons-divisor--marcados .pr-mons-divisor__dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }

/* Item marcado destacado */
.pr-cli-mons-item--marc {
    background: rgba(16, 185, 129, 0.05);
}
.pr-cli-mons-grupo--has-marcados > .pr-cli-mons-grupo__head {
    background: rgba(16, 185, 129, 0.04);
}

/* "Selecionar todos" — barra de ação no topo do seletor de monitores */
.pr-mons-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: var(--pr-blue-soft);
    border-radius: 8px;
    font-size: 13px;
}
.pr-mons-bulk__btn {
    background: transparent;
    border: 0;
    color: var(--pr-blue-2);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    transition: background .15s ease;
}
.pr-mons-bulk__btn:hover { background: rgba(95, 111, 255, 0.12); }
.pr-mons-bulk__sep { color: var(--pr-text-mute); }
@media (max-width: 900px) {
    /* Telas pequenas: empilha sempre (dados em cima, monitores embaixo) */
    .pr-usr-form-split { grid-template-columns: 1fr; }
    .pr-usr-form-split__right { position: static; }
}

/* ============================================================
   v=133 — Botão "+ Novo Vídeo" no header da modal de Grupo +
   Slide-over slim de cadastro rápido de vídeo (pedido Lucas).
   ============================================================ */
.pr-gpu-disp-header { display: flex; align-items: center; gap: 10px; }
.pr-gpu-novo-video {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: 0; border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.pr-gpu-novo-video:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35); transform: translateY(-1px); }
.pr-gpu-novo-video:active { transform: translateY(0); }
.pr-gpu-novo-video svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* Slide-over slim — form de vídeo enxuto */
.pr-quick-section { margin-bottom: 14px; }
.pr-quick-section--half { flex: 1; min-width: 0; }
.pr-quick-row { display: flex; gap: 12px; margin-bottom: 14px; }
.pr-quick-label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pr-quick-label sup { color: var(--pr-danger); margin-left: 2px; }
.pr-quick-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--pr-border-soft);
    border-radius: 8px;
    font-size: 13.5px;
    background: #fff;
    color: var(--pr-text);
    transition: border-color .12s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.pr-quick-input:focus {
    outline: 0;
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.pr-quick-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--pr-text);
    cursor: pointer;
    padding: 9px 0;
}
.pr-quick-check input { width: 14px; height: 14px; accent-color: var(--pr-blue); }
.pr-quick-check--block {
    display: flex;
    padding: 10px 12px;
    background: var(--pr-surface-soft);
    border-radius: 8px;
    border: 1px solid var(--pr-border-soft);
}
.pr-quick-fileinfo {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--pr-surface-soft);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--pr-text);
}
.pr-file-drop--quick {
    padding: 16px 14px;
    min-height: auto;
}
.pr-file-drop--quick svg { width: 28px; height: 28px; }
.pr-file-drop--quick small { display: block; margin-top: 4px; color: var(--pr-text-mute); font-size: 11.5px; line-height: 1.4; }

.pr-quick-hint {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--pr-blue);
    border-radius: 6px;
    font-size: 12px;
    color: var(--pr-text);
    margin-bottom: 16px;
    line-height: 1.5;
}
.pr-quick-hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--pr-blue); margin-top: 2px; }

.pr-quick-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pr-border-soft);
}
.pr-quick-footer .pr-btn { padding: 9px 16px; font-size: 13px; }
.pr-quick-footer .pr-btn svg { width: 14px; height: 14px; }
.pr-quick-footer .pr-btn.is-loading { opacity: 0.7; cursor: progress; }

/* Item recém-criado na lista do grupo — animação de destaque */
.pr-gp-mng-item--recem {
    border-left: 3px solid var(--pr-success, #10b981);
    animation: pr-gp-recem-pulse 1.2s ease;
}
@keyframes pr-gp-recem-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* ============================================================
   v=137 — Variante pdrop pra usar dentro de campos de formulário.
   Sobrescreve o pill-shape do toolbar pra parecer um input do form
   (largura cheia, borda 8px, mesma altura dos <input>). Usado no
   select de Cliente da modal de Grupo (pedido Lucas: busca interna).
   ============================================================ */
.pr-pdrop--field { display: block; width: 100%; }
.pr-pdrop--field .pr-pdrop__btn {
    display: flex;
    width: 100%;
    /* padding 10px alinha pixel-perfect com .pr-quick-input/input de form (v=138) */
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--pr-border-soft);
    background: #fff;
    color: var(--pr-text);
    font-size: 13.5px;
    font-weight: 400;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Estado de alerta — usado quando o user tenta usar "+ Novo vídeo" sem ter cliente.
   Pulsa em vermelho por 1.6s pra direcionar o olhar pro campo obrigatório. */
.pr-pdrop__btn--alerta {
    border-color: var(--pr-danger, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
    background: rgba(239, 68, 68, 0.04) !important;
    animation: pr-pdrop-alerta-shake .4s ease;
}
@keyframes pr-pdrop-alerta-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* ============================================================
   v=139 — Vídeo pertence a grupo (pedido Lucas).
   Listagem: chip azul-indigo no lugar de "⚠ Sem monitor".
   Form edição: banner com botão "Desassociar" + lista bloqueada.
   ============================================================ */
.pr-mid-item__mons--grupo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.pr-mid-item__mons--grupo svg { width: 12px; height: 12px; flex-shrink: 0; }
.pr-mid-item__mons--grupo strong { font-weight: 600; }

/* Banner no topo da seção 4 do form de vídeo: "este vídeo pertence ao grupo X" */
.pr-em-grupo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(79, 70, 229, 0.20);
    border-radius: 10px;
    margin-bottom: 14px;
}
.pr-em-grupo-banner__icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: rgba(79, 70, 229, 0.15);
    color: #4338ca;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.pr-em-grupo-banner__icon svg { width: 18px; height: 18px; }
.pr-em-grupo-banner__text { flex: 1; min-width: 0; line-height: 1.4; }
.pr-em-grupo-banner__text strong { display: block; font-size: 13px; color: #1e1b4b; margin-bottom: 2px; }
.pr-em-grupo-banner__text span { font-size: 12px; color: var(--pr-text-soft); }
.pr-em-grupo-banner .pr-btn { flex-shrink: 0; }
.pr-em-grupo-banner .pr-btn svg { width: 14px; height: 14px; }
.pr-btn--small {
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* Lista de monitores fica esmaecida + sem cursor quando o vídeo pertence a grupo */
.pr-section--em-grupo .pr-cli-mons-search { opacity: 0.5; pointer-events: none; }
.pr-section--em-grupo .pr-cli-mons-list { opacity: 0.55; pointer-events: none; filter: grayscale(0.3); }
.pr-section--em-grupo .pr-cli-mons-item { cursor: not-allowed; }

/* ============================================================
   v=140 — Preview de vídeo + rotação dentro da modal de edição.
   Pedido Lucas: clientes não estavam vendo o preview nem os
   botões de girar (estavam só na tela legacy).
   ============================================================ */
.pr-mid-preview-section .pr-section__header { margin-bottom: 14px; }
.pr-mid-preview {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pr-mid-preview__video {
    width: 100%;
    max-height: 420px;
    background: #000;
    border-radius: 8px;
    display: block;
    object-fit: contain;
}
.pr-mid-preview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.pr-mid-rot-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.pr-mid-rot-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.32);
    transform: translateY(-1px);
}
.pr-mid-rot-btn:active { transform: translateY(0); }
.pr-mid-rot-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.pr-mid-rot-btn.is-loading {
    background: rgba(99, 102, 241, 0.30);
    border-color: rgba(99, 102, 241, 0.55);
    animation: pr-mid-rot-pulse 1.2s ease infinite;
}
@keyframes pr-mid-rot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}
.pr-mid-rot-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pr-mid-rot-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.22);
}
.pr-mid-rot-btn--ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }

.pr-mid-preview__hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 8px 10px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
}
.pr-mid-preview__hint svg {
    width: 12px; height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
    color: rgba(255,255,255,0.55);
}

/* Estados sem-preview (processando ou arquivo ausente) */
.pr-mid-preview--proc, .pr-mid-preview--sem-arquivo {
    background: var(--pr-surface-soft);
    color: var(--pr-text);
}
.pr-mid-preview__placeholder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
}
.pr-mid-preview__placeholder svg {
    width: 36px; height: 36px;
    flex-shrink: 0;
    color: var(--pr-text-mute);
}
.pr-mid-preview--proc .pr-mid-preview__placeholder svg {
    color: var(--pr-blue);
    animation: pr-spin 1.4s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-mid-preview__placeholder strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.pr-mid-preview__placeholder small { display: block; color: var(--pr-text-soft); font-size: 12px; line-height: 1.45; }

/* ============================================================
   v=143 — Relatórios: aba OCUPAÇÃO DE LOOP (porte premium do
   /ocupacao legado). Snapshot por monitor cruzando o CSV
   locais.ordem × campanhas, somando duração por tipo.
   ============================================================ */
.pr-rel-ocup { display: flex; flex-direction: column; gap: 18px; }

/* KPIs (4 cards no topo) */
.pr-rel-ocup-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pr-rel-ocup-kpi {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    display: flex; flex-direction: column;
    gap: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pr-rel-ocup-kpi:hover { border-color: rgba(95, 111, 255, 0.4); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); }
.pr-rel-ocup-kpi__lbl {
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.pr-rel-ocup-kpi__num {
    font-family: var(--pr-font-display);
    font-size: 24px; font-weight: 700;
    color: var(--pr-text);
    letter-spacing: -0.4px;
    line-height: 1.1;
}
@media (max-width: 900px) {
    .pr-rel-ocup-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Controles: busca + range + bulk */
.pr-rel-ocup-controls {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 16px;
    align-items: end;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
}
@media (max-width: 1024px) {
    .pr-rel-ocup-controls { grid-template-columns: 1fr; }
}
.pr-rel-ocup-search {
    position: relative;
}
.pr-rel-ocup-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pr-text-mute);
    pointer-events: none;
}
.pr-rel-ocup-search input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--pr-border-soft);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--pr-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .15s ease;
}
.pr-rel-ocup-search input:focus {
    border-color: var(--pr-blue, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Range slider duplo (faixa de % ocupação) */
.pr-rel-ocup-range { display: flex; flex-direction: column; gap: 6px; }
.pr-rel-ocup-range__lbl {
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text-mute);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.pr-rel-ocup-range__track {
    position: relative;
    height: 28px;
}
.pr-rel-ocup-range__track::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: var(--pr-border-soft);
    border-radius: 4px;
    pointer-events: none;
}
.pr-rel-ocup-range__fill {
    position: absolute; top: 50%; height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #5F6FFF, #06B6D4);
    border-radius: 4px;
    pointer-events: none;
}
.pr-rel-ocup-range__track input[type="range"] {
    position: absolute;
    left: 0; right: 0; top: 0;
    width: 100%; height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.pr-rel-ocup-range__track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #5F6FFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    cursor: grab;
    transition: transform .12s ease, box-shadow .15s ease;
}
.pr-rel-ocup-range__track input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pr-rel-ocup-range__track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; box-shadow: 0 0 0 6px rgba(95, 111, 255, 0.18); }
.pr-rel-ocup-range__track input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #5F6FFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    cursor: grab;
}
.pr-rel-ocup-range__vals {
    display: flex; justify-content: space-between;
    font-size: 11.5px; font-weight: 600;
    color: var(--pr-text);
}

/* Barra de bulk (aparece quando há seleção) */
.pr-rel-ocup-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(95, 111, 255, 0.08);
    border: 1px solid rgba(95, 111, 255, 0.22);
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--pr-text);
}
.pr-rel-ocup-bulk strong { color: #4338ca; font-weight: 700; }

/* Tabela com chip de % colorido */
.pr-rel-ocup-tabela { background: #fff; border-radius: 12px; padding: 14px; border: 1px solid var(--pr-border-soft); overflow-x: auto; }
.pr-rel-table--ocup { font-size: 12.5px; }
.pr-rel-table--ocup th, .pr-rel-table--ocup td { padding: 9px 8px; }
.pr-rel-ocup-th-cb { width: 36px; padding-left: 12px !important; }
.pr-rel-ocup-cb {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    width: 16px; height: 16px;
}
.pr-rel-ocup-cb input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.pr-rel-ocup-cb span {
    position: absolute; inset: 0;
    border: 1.5px solid var(--pr-border);
    border-radius: 4px;
    background: #fff;
    transition: background .12s ease, border-color .12s ease;
}
.pr-rel-ocup-cb input:checked + span {
    background: #5F6FFF;
    border-color: #5F6FFF;
}
.pr-rel-ocup-cb input:checked + span::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pr-rel-ocup-cb input:indeterminate + span {
    background: #5F6FFF;
    border-color: #5F6FFF;
}
.pr-rel-ocup-cb input:indeterminate + span::after {
    content: '';
    position: absolute;
    left: 3px; top: 6px;
    width: 8px; height: 2px;
    background: #fff;
}

.pr-rel-ocup-mon {
    display: inline-flex; align-items: center; gap: 8px;
}
.pr-rel-ocup-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pr-rel-ocup-dot--on  { background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18); }
.pr-rel-ocup-dot--off { background: #94A3B8; }

/* Chip de % colorido por faixa */
.pr-rel-ocup-chip {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 62px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.pr-rel-ocup-chip--baixa   { background: rgba(16, 185, 129, 0.12);  color: #047857; }
.pr-rel-ocup-chip--media   { background: rgba(245, 158, 11, 0.14);  color: #b45309; }
.pr-rel-ocup-chip--alta    { background: rgba(239, 68, 68, 0.12);   color: #b91c1c; }
.pr-rel-ocup-chip--estouro { background: rgba(124, 58, 237, 0.14);  color: #6d28d9; }

.pr-rel-ocup-action {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--pr-text-mute);
    border: 1px solid var(--pr-border-soft);
    background: #fff;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.pr-rel-ocup-action:hover {
    border-color: var(--pr-blue, #3B82F6);
    color: var(--pr-blue, #3B82F6);
    background: rgba(59, 130, 246, 0.06);
}
.pr-rel-ocup-action svg { width: 16px; height: 16px; }

.pr-rel-ocup-totais {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    font-weight: 700;
}
.pr-rel-ocup-totais td { border-top: 2px solid #cbd5e1 !important; }
.pr-rel-ocup-empty {
    padding: 40px 20px !important;
    text-align: center;
    color: var(--pr-text-mute);
    font-size: 13px;
    background: var(--pr-surface-soft);
}

@media print {
    .pr-rel-ocup-action, .pr-rel-ocup-th-cb, .pr-rel-table--ocup td:first-child { display: none; }
}

/* ============================================================
   v=146 — Player Download (Central de Downloads premium).
   Porte do /downloads.php legado pra dentro do shell premium.
   ============================================================ */
.pr-dl { display: flex; flex-direction: column; gap: 28px; padding-bottom: 30px; }

/* HERO — Detecção de SO + recomendação */
.pr-dl-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 35%, #1E3A8A 70%, #0F172A 100%);
    color: #fff;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.4);
}
.pr-dl-hero__bg {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.pr-dl-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: pr-dl-orb-float 12s ease-in-out infinite;
}
.pr-dl-hero__orb--1 { width: 320px; height: 320px; background: #6366F1; top: -60px; left: -60px; }
.pr-dl-hero__orb--2 { width: 280px; height: 280px; background: #06B6D4; top: 30%; right: -80px; animation-delay: -4s; }
.pr-dl-hero__orb--3 { width: 240px; height: 240px; background: #EC4899; bottom: -80px; left: 30%; animation-delay: -8s; }
@keyframes pr-dl-orb-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.08); }
}
.pr-dl-hero__content {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 36px 40px;
    align-items: center;
}
.pr-dl-hero__brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
}
.pr-dl-hero__logo {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #06B6D4, #6366F1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 10px 30px -8px rgba(99, 102, 241, 0.5);
}
.pr-dl-hero__logo svg { width: 28px; height: 28px; }
.pr-dl-hero__title {
    font-family: var(--pr-font-display);
    font-size: 32px; font-weight: 800;
    margin: 0;
    letter-spacing: -0.8px;
    background: linear-gradient(90deg, #fff, #C7D2FE);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.pr-dl-hero__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.3px;
}
.pr-dl-hero__pitch-title {
    font-family: var(--pr-font-display);
    font-size: 26px; font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}
.pr-dl-hero__pitch-sub {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}
.pr-dl-hero__cta {
    display: flex; flex-direction: column;
    gap: 10px;
}
.pr-dl-hero__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #1E1B4B;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.pr-dl-hero__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(15, 23, 42, 0.35);
    background: #fff;
}
.pr-dl-hero__btn svg {
    width: 22px; height: 22px;
    flex-shrink: 0;
    color: #4f46e5;
}
.pr-dl-hero__btn span { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pr-dl-hero__btn strong { font-size: 14px; font-weight: 700; }
.pr-dl-hero__btn small { font-size: 11.5px; color: var(--pr-text-soft); font-weight: 500; }
.pr-dl-hero__btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}
.pr-dl-hero__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
}
.pr-dl-hero__btn--ghost svg { color: rgba(255, 255, 255, 0.9); }
.pr-dl-hero__btn--ghost small { color: rgba(255, 255, 255, 0.65); }

@media (max-width: 900px) {
    .pr-dl-hero__content { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
    .pr-dl-hero__title { font-size: 26px; }
    .pr-dl-hero__pitch-title { font-size: 21px; }
}

/* NAV interno (links âncora) */
.pr-dl-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pr-dl-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 999px;
    color: var(--pr-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.pr-dl-nav__item:hover {
    border-color: #6366F1;
    color: #4338ca;
    transform: translateY(-1px);
}
.pr-dl-nav__item svg { width: 14px; height: 14px; }
.pr-dl-nav__cnt {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}

/* SEÇÕES */
.pr-dl-section {
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 14px;
    padding: 22px;
    scroll-margin-top: 80px;
}
.pr-dl-section__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.pr-dl-section__head-ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-dl-section__head-ico svg { width: 22px; height: 22px; }
.pr-dl-section__head-ico--win      { background: linear-gradient(135deg, #3B82F6, #2563EB); color: #fff; }
.pr-dl-section__head-ico--android  { background: linear-gradient(135deg, #10B981, #059669); color: #fff; }
.pr-dl-section__head-ico--tool     { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.pr-dl-section__head-ico--tutorial { background: linear-gradient(135deg, #EC4899, #DB2777); color: #fff; }
.pr-dl-section__title {
    font-family: var(--pr-font-display);
    font-size: 18px; font-weight: 700;
    margin: 0; color: var(--pr-text);
    letter-spacing: -0.3px;
}
.pr-dl-section__sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--pr-text-soft);
    line-height: 1.5;
}

/* GRID DE CARDS */
.pr-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.pr-dl-card {
    position: relative;
    background: linear-gradient(180deg, #fff, #FAFBFF);
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    padding: 18px;
    display: flex; flex-direction: column;
    gap: 14px;
    transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.pr-dl-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}
.pr-dl-card--full { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.pr-dl-card--full .pr-dl-card__body { flex: 1; }
.pr-dl-card--full .pr-dl-card__actions { flex-direction: column; gap: 8px; }

.pr-dl-card--latest {
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(180deg, #fff, #ECFDF5);
}
.pr-dl-card__badge {
    position: absolute;
    top: 12px; right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.5);
}
.pr-dl-card__badge svg { width: 11px; height: 11px; }

.pr-dl-card__icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-dl-card__icon svg { width: 26px; height: 26px; }
.pr-dl-card__icon--win      { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.pr-dl-card__icon--android  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.pr-dl-card__icon--tool     { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.pr-dl-card__icon--tutorial { background: rgba(236, 72, 153, 0.12); color: #DB2777; }

.pr-dl-card__body { flex: 1; min-width: 0; }
.pr-dl-card__nome {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pr-text);
    margin: 0 0 4px;
    word-break: break-all;
    line-height: 1.35;
}
.pr-dl-card__versao {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pr-dl-card__desc {
    font-size: 13px;
    color: var(--pr-text-soft);
    line-height: 1.55;
    margin: 8px 0 0;
}
.pr-dl-card__desc a { color: #6366F1; font-weight: 600; }
.pr-dl-card__meta {
    list-style: none;
    margin: 8px 0 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--pr-text-soft);
}
.pr-dl-card__meta li {
    display: inline-flex; align-items: center; gap: 5px;
}
.pr-dl-card__meta svg { width: 12px; height: 12px; opacity: 0.7; }

.pr-dl-card__actions {
    display: flex;
    gap: 8px;
}
.pr-dl-card__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, transform .12s ease, box-shadow .2s ease, color .15s ease;
}
.pr-dl-card__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pr-dl-card__btn--primary {
    background: linear-gradient(135deg, #5F6FFF, #4338CA);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(95, 111, 255, 0.4);
}
.pr-dl-card__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(95, 111, 255, 0.5); }
.pr-dl-card__btn--ghost {
    background: #fff;
    color: var(--pr-text-mute);
    border: 1px solid var(--pr-border-soft);
    flex: 0 0 auto;
    padding: 9px 12px;
}
.pr-dl-card__btn--ghost:hover { border-color: #6366F1; color: #4338ca; }
.pr-dl-card__btn--ghost.is-copiado {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.4);
}

/* HISTÓRICO (accordion) */
.pr-dl-historico {
    margin-top: 18px;
    border-top: 1px dashed var(--pr-border-soft);
    padding-top: 18px;
}
.pr-dl-historico summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--pr-text-mute);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    transition: background-color .15s ease;
}
.pr-dl-historico summary::-webkit-details-marker { display: none; }
.pr-dl-historico summary:hover { background: var(--pr-surface-soft); color: var(--pr-text); }
.pr-dl-historico summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.pr-dl-historico summary span { flex: 1; }
.pr-dl-historico__caret { transition: transform .2s ease; }
.pr-dl-historico[open] .pr-dl-historico__caret { transform: rotate(180deg); }
.pr-dl-historico__list {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 12px 0 0;
}
.pr-dl-historico__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--pr-surface-soft);
    border: 1px solid transparent;
    border-radius: 9px;
    transition: border-color .15s ease;
}
.pr-dl-historico__item:hover { border-color: var(--pr-border-soft); }
.pr-dl-historico__icon {
    width: 30px; height: 30px;
    background: rgba(99, 102, 241, 0.10);
    color: #6366F1;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pr-dl-historico__icon svg { width: 14px; height: 14px; }
.pr-dl-historico__info { flex: 1; min-width: 0; }
.pr-dl-historico__nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text);
    word-break: break-all;
}
.pr-dl-historico__meta {
    font-size: 11.5px;
    color: var(--pr-text-soft);
    margin-top: 2px;
}
.pr-dl-historico__btn {
    width: 30px; height: 30px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 7px;
    color: var(--pr-text-mute);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
    text-decoration: none;
}
.pr-dl-historico__btn:hover { border-color: #6366F1; color: #4338ca; }
.pr-dl-historico__btn svg { width: 13px; height: 13px; }

/* TUTORIAL EMBEDDED */
.pr-dl-tutorial {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}
.pr-dl-tutorial__player {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.3);
}
.pr-dl-tutorial__player video {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
.pr-dl-tutorial__side {
    display: flex; flex-direction: column;
    gap: 14px;
    justify-content: space-between;
}
.pr-dl-tutorial__info { display: flex; flex-direction: column; gap: 6px; }
.pr-dl-tutorial__nome {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pr-text);
    margin: 0;
    word-break: break-all;
}
.pr-dl-tutorial__desc {
    font-size: 12.5px;
    color: var(--pr-text-soft);
    line-height: 1.5;
    margin: 8px 0 0;
}
.pr-dl-tutorial__actions { display: flex; flex-direction: column; gap: 8px; }
.pr-dl-tutorial__actions .pr-dl-card__btn--ghost { padding: 9px 14px; justify-content: flex-start; }
.pr-dl-tutorial__actions .pr-dl-card__btn--ghost span { display: inline; margin-left: 4px; }
@media (max-width: 900px) {
    .pr-dl-tutorial { grid-template-columns: 1fr; }
}

/* FOOTER */
.pr-dl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--pr-surface-soft);
    border: 1px dashed var(--pr-border-soft);
    border-radius: 12px;
    color: var(--pr-text-mute);
    font-size: 12.5px;
    flex-wrap: wrap;
}
.pr-dl-footer__col { display: flex; flex-direction: column; gap: 2px; }
.pr-dl-footer__col--right { text-align: right; }
.pr-dl-footer__col strong { color: var(--pr-text); font-weight: 700; }
.pr-dl-footer__col small { color: var(--pr-text-soft); font-size: 11.5px; }
.pr-dl-footer code {
    background: rgba(95, 111, 255, 0.10);
    color: #4338ca;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
    font-size: 12px;
}


.pr-pdrop--field .pr-pdrop__btn:hover { border-color: var(--pr-blue); }
.pr-pdrop--field.is-open .pr-pdrop__btn {
    border-color: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #fff;
}
.pr-pdrop--field .pr-pdrop__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
    text-align: left;
}
.pr-pdrop--field .pr-pdrop__caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--pr-text-mute); }
.pr-pdrop--field .pr-pdrop__panel {
    left: 0; right: 0; min-width: 0;
    margin-top: 4px;
}
.pr-pdrop--field .pr-pdrop__list { max-height: 260px; }

/* ============================================================
   v=147 — Pacote de correções de responsividade mobile.
   Baseado no diagnóstico do Claude Web em 2026-06-27.
   Patches cirúrgicos por componente — sem reescrita estrutural.
   ============================================================ */

/* P1.1 — pdrop panel: nunca vaza além do viewport direito ----------- */
.pr-pdrop__panel {
    max-width: calc(100vw - 16px);
}
@media (max-width: 768px) {
    /* Quando o pdrop está no lado direito da toolbar, força alinhar pela direita
       em vez de left:0 (evita panel sumir parcialmente além da tela). */
    .pr-toolbar .pr-pdrop__panel { right: 0; left: auto; }
}

/* P1.2 — subtabs com indicador de scroll horizontal ----------------- */
.pr-subtabs, .pr-locais-tabs, .pr-colaboradores-tabs {
    position: relative;
}
@media (max-width: 768px) {
    /* Fade gradiente no lado direito sinalizando que há mais tabs */
    .pr-subtabs::after, .pr-locais-tabs::after, .pr-colaboradores-tabs::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 32px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
        z-index: 1;
    }
}

/* P1.3 — Relatórios: KPIs de ocupação colapsam em xs ---------------- */
@media (max-width: 480px) {
    .pr-rel-ocup-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pr-rel-ocup-kpi { padding: 10px 12px; }
    .pr-rel-ocup-kpi__num { font-size: 19px; }
}
@media (max-width: 380px) {
    .pr-rel-ocup-kpis { grid-template-columns: 1fr; }
}

/* P1.4 — chips-bar: scroll horizontal a partir de 768px (era 720)
   Cobre tablets portrait (768) que ficavam com chips em wrap empilhado.    */
@media (max-width: 768px) {
    .pr-chips-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 8px;
        margin-right: -14px; /* sangra na borda pra dar feedback de scroll */
    }
    .pr-chips-bar::-webkit-scrollbar { display: none; }
    .pr-chips-bar .pr-chip { flex-shrink: 0; }
}

/* P1.5 — pr-segment (Boletos): overflow horizontal em xs ----------- */
@media (max-width: 480px) {
    .pr-segment, .pr-seg-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .pr-segment::-webkit-scrollbar, .pr-seg-bar::-webkit-scrollbar { display: none; }
    .pr-segment > *, .pr-seg-bar > * { flex-shrink: 0; }
}

/* P2.1 — Modal de Programação: stats em 2 colunas em xs ----------- */
@media (max-width: 480px) {
    .pr-prog-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* P2.2 — Relatórios: tabs com min-width adaptativo ---------------- */
@media (max-width: 640px) {
    .pr-rel-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
    .pr-rel-tabs::-webkit-scrollbar { display: none; }
    .pr-rel-tab { min-width: auto; flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; }
    .pr-rel-tab svg { width: 14px; height: 14px; }
}

/* P2.3 — Monitor grid: 2 colunas controladas em xs --------------- */
@media (max-width: 480px) {
    .pr-monitor-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 380px) {
    .pr-monitor-grid { grid-template-columns: 1fr; }
}

/* P2.4 — Touch targets 44×44 em xs (WCAG) ----------------------- */
@media (max-width: 768px) {
    .pr-cli-act, .pr-loc-row__act, .pr-mid-act,
    .pr-mid-item__actions button, .pr-mid-item__actions a {
        min-width: 40px; min-height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}
@media (max-width: 480px) {
    .pr-cli-act, .pr-loc-row__act, .pr-mid-act,
    .pr-mid-item__actions button, .pr-mid-item__actions a {
        min-width: 44px; min-height: 44px;
    }
}

/* P2.5 — Relatórios: filtros colapsam em xs --------------------- */
@media (max-width: 480px) {
    .pr-rel-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .pr-rel-filter, .pr-rel-filter--grow {
        width: 100%;
        min-width: 0;
    }
    .pr-rel-filter--actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pr-rel-filter--actions .pr-btn { flex: 1 1 0; min-width: 0; }
    .pr-rel-export { flex: 1 1 100%; display: flex; gap: 8px; }
    .pr-rel-export .pr-btn { flex: 1; }
}

/* Bônus mobile: KPIs principais de relatórios → 1 coluna em xs --- */
@media (max-width: 480px) {
    .pr-rel-kpis { grid-template-columns: 1fr; gap: 10px; }
}

/* Bônus: ocup-controls (busca + range + bulk) empilham em xs ---- */
@media (max-width: 768px) {
    .pr-rel-ocup-controls { grid-template-columns: 1fr; gap: 12px; }
}

/* Bônus: comprovante de veiculação / ocupação — KPIs em 2 cols em xs,
   1 col em telas muito pequenas. Classe `.pr-cv__resumo` cobre tanto o
   Por Vídeo (3 KPIs) quanto o de Ocupação (4 KPIs). */
@media (max-width: 480px) {
    .pr-cv__resumo { grid-template-columns: 1fr 1fr; padding: 0 18px; gap: 10px; }
    .pr-cv__resumo-item { padding: 12px 14px; }
    .pr-cv__resumo-item b { font-size: 18px; }
}
@media (max-width: 380px) {
    .pr-cv__resumo { grid-template-columns: 1fr; }
}

/* ============================================================
   v=151 — Comprovante Diário (Checking) + dropdown split button.
   Pedido Lucas: ao lado do botão Comprovante, abrir menu com
   2 opções (Resumido e Diário com grade dia × monitor).
   ============================================================ */

/* Split button: [Comprovante] [▾] */
.pr-rel-pdf-split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}
.pr-rel-pdf-split .pr-rel-pdf-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.pr-rel-pdf-split .pr-rel-pdf-caret {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 8px; padding-right: 8px;
    border-left: 1px solid var(--pr-border-soft);
    min-width: 0;
}
.pr-rel-pdf-split .pr-rel-pdf-caret svg { width: 14px; height: 14px; }
.pr-rel-pdf-split.is-open .pr-rel-pdf-caret {
    background: var(--pr-surface-soft);
    border-color: var(--pr-blue);
}

.pr-rel-pdf-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--pr-border-soft);
    border-radius: 12px;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.20);
    overflow: hidden;
    z-index: 50;
    animation: pr-rel-pdf-menu-in .15s ease;
}
@keyframes pr-rel-pdf-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pr-rel-pdf-menu[hidden] { display: none; }
.pr-rel-pdf-menu__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--pr-border-soft);
    cursor: pointer;
    text-align: left;
    color: var(--pr-text);
    transition: background-color .12s ease;
}
.pr-rel-pdf-menu__item:last-child { border-bottom: 0; }
.pr-rel-pdf-menu__item:hover { background: var(--pr-surface-soft); }
.pr-rel-pdf-menu__item svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--pr-blue);
}
.pr-rel-pdf-menu__item strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pr-rel-pdf-menu__item small {
    display: block;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    line-height: 1.4;
}
@media (max-width: 480px) {
    .pr-rel-pdf-menu { min-width: 0; left: 0; right: 0; }
}

/* Grade do Comprovante Diário (Checking) */
.pr-cv__table--diario { font-size: 11.5px; table-layout: auto; }
.pr-cv__table--diario th,
.pr-cv__table--diario td {
    padding: 8px 6px;
    border: 1px solid #E5E7EB;
}
.pr-cv__table--diario thead th {
    background: #F4F6FB;
    color: #475569;
    font-weight: 600;
    text-transform: none;
    font-size: 11px;
    padding: 6px 4px;
}
.pr-cv__table--diario .r { text-align: center; }
.pr-cv__table--diario tbody td { font-variant-numeric: tabular-nums; }
.pr-cv__table--diario tbody tr td:first-child {
    background: #FAFBFF;
    font-weight: 600;
}
/* Impressão: bloco de dias NUNCA pode depender de overflow-x (o print recorta
   em vez de rolar — ressalva da homologação v155 em monitores de alto volume,
   ex: 16 dias × "4.421" ≈ 1098px > área útil do A4 retrato). Força largura 100%
   com colunas distribuídas e fonte menor: cabe sempre, qualquer volume. */
@media print {
    .pr-cv__table--diario {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 9.5px !important;
    }
    .pr-cv__table--diario th,
    .pr-cv__table--diario td {
        padding: 5px 2px !important;
        font-size: 9.5px !important;
        overflow: hidden;
    }
    .pr-cv__table--diario th:first-child,
    .pr-cv__table--diario td:first-child { width: 72px; }
}

@media print {
    .pr-rel-pdf-menu, .pr-rel-pdf-caret { display: none !important; }
}

/* ============================================================
   v=152 — Flatpickr datepicker + slide-over largo p/ editor de vídeo
   Pedidos Lucas: calendário no cadastro do vídeo + botão Editar
   em cada item do grupo (abre form em slide-over por cima da modal).
   ============================================================ */

/* Input visível do datepicker (o real é hidden) */
.pr-input--datepicker {
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px !important;
}
.pr-input--datepicker:focus, .pr-input--datepicker.active {
    border-color: var(--pr-blue, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pr-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--pr-text-soft);
    line-height: 1.5;
}

/* Override do Flatpickr pra harmonizar com a paleta premium */
.flatpickr-calendar {
    box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.20) !important;
    border-radius: 12px !important;
    border: 1px solid var(--pr-border-soft) !important;
    font-family: var(--pr-font-text, 'Inter', sans-serif) !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--pr-blue, #6366F1) !important;
    border-color: var(--pr-blue, #6366F1) !important;
}
.flatpickr-day.inRange {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(99, 102, 241, 0.20) !important;
    box-shadow: -5px 0 0 rgba(99, 102, 241, 0.12), 5px 0 0 rgba(99, 102, 241, 0.12) !important;
}
.flatpickr-day.today {
    border-color: var(--pr-blue, #6366F1) !important;
    color: var(--pr-blue, #6366F1) !important;
}
.flatpickr-day.today.selected { color: #fff !important; }
.flatpickr-day:hover {
    background: var(--pr-surface-soft) !important;
}
/* Z-index alto: precisa aparecer acima do slide-over (que é 220) quando o
   datepicker é usado dentro do midia-form aberto em slide-over (Pedido 2). */
.flatpickr-calendar { z-index: 9999 !important; }

/* Slide-over largo pra acomodar o midia-form completo (max-width 980px) */
.pr-slideover--midia-form {
    max-width: min(720px, 95vw) !important;
}
.pr-slideover--midia-form > .pr-modal {
    max-width: 100% !important;
    height: 100%;
    box-shadow: none;
    border-radius: 0;
}
.pr-slideover--midia-form .pr-modal__body {
    /* Garante scroll interno e que header/footer ficam ancorados */
    max-height: calc(100vh - 140px);
}
@media (max-width: 768px) {
    .pr-slideover--midia-form { max-width: 100% !important; }
}

/* ============================================================
   v=153 — Galeria de check-ins (screenshots semanais do player)
   no Comprovante Diário. Vem da pasta /pontos/<tenant>/<monitor>/<ano>/<semana>/<video>.png
   ============================================================ */
.pr-cv__checkins {
    margin-top: 18px;
    padding: 14px 16px;
    background: #F4F6FB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.pr-cv__checkins-titulo {
    font-family: var(--pr-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pr-cv__checkins-titulo svg { color: var(--pr-blue, #6366F1); }
.pr-cv__checkins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.pr-cv__checkin {
    margin: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.pr-cv__checkin img {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}
.pr-cv__checkin figcaption {
    padding: 6px 10px;
    font-size: 11.5px;
    color: #475569;
    background: #FAFBFF;
    border-top: 1px solid #E5E7EB;
    font-weight: 600;
}
@media print {
    /* Pra impressão, deixa as imagens em colunas fixas com tamanho controlado */
    .pr-cv__checkins-grid { grid-template-columns: repeat(4, 1fr); }
    .pr-cv__checkin { break-inside: avoid; }
}


/* Bônus: Downloads — cards em 1 coluna em xs ------------------- */
@media (max-width: 480px) {
    .pr-dl-grid { grid-template-columns: 1fr; }
    .pr-dl-nav { gap: 6px; }
    .pr-dl-nav__item { padding: 8px 11px; font-size: 12px; }
    .pr-dl-hero__content { padding: 22px 18px; }
    .pr-dl-hero__title { font-size: 23px; }
    .pr-dl-hero__pitch-title { font-size: 18px; }
}