/* =====================================================================
   Portal do Revendedor — Preciso Imprimir
   Sistema de design. As CORES DA MARCA ficam todas no bloco :root abaixo;
   troque os valores de --brand* e --sidebar para casar 100% com o site.
   ===================================================================== */
:root {
    /* ---- MARCA (cores oficiais da Preciso Imprimir) ---- */
    --brand:        #005ca8;   /* Cor 01 — azul principal */
    --brand-600:    #004e8f;
    --brand-700:    #003f74;
    --brand-050:    #e9f2f9;
    --brand-100:    #cce0f0;
    --accent:       #da761b;   /* Cor 02 — laranja de destaque */
    --sidebar:      #043356;   /* azul escuro derivado da marca */

    /* ---- Neutros / base ---- */
    --ink:    #16202e;
    --muted:  #64748b;
    --bg:     #f4f2f2;         /* fundo padrão do site */
    --surface:#ffffff;
    --line:   #e6eaf0;

    --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#0ea5e9;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16,30,54,.06), 0 1px 3px rgba(16,30,54,.04);
    --shadow:    0 4px 16px rgba(16,30,54,.08);

    /* Sobrescreve tokens do Bootstrap */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 0,92,168;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-600);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,.fw-bold { letter-spacing: -.01em; }
a { text-decoration: none; }
code { color: var(--brand-600); background: var(--brand-050); padding: .05rem .35rem; border-radius: 5px; }

/* ---- Botões / badges de marca ---- */
.btn-primary{ --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-600); --bs-btn-hover-border-color:var(--brand-600); --bs-btn-active-bg:var(--brand-700); --bs-btn-active-border-color:var(--brand-700); --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); box-shadow: var(--shadow-sm); }
.btn-outline-primary{ --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand-100); --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-active-bg:var(--brand-600); }
.btn{ --bs-btn-font-weight:600; border-radius:9px; }
.text-bg-primary{ background-color:var(--brand)!important; }
.badge{ font-weight:600; letter-spacing:.01em; }

.card{ --bs-card-bg:var(--surface); --bs-card-border-color:var(--line); --bs-card-border-radius:var(--radius); box-shadow: var(--shadow-sm); }
.shadow-sm{ box-shadow: var(--shadow-sm)!important; }

/* =====================================================================
   Casca do painel: menu lateral + topo
   ===================================================================== */
.pi-body{ background: var(--bg); }
.pi-layout{ display:block; }

.pi-sidebar{
    background: var(--sidebar);
    color: #fff;
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-bg: var(--sidebar);
    --bs-offcanvas-color: #fff;
    border:0;
}
.pi-brand{ display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.pi-brand small{ display:block; font-weight:500; font-size:.72rem; color:rgba(255,255,255,.6); letter-spacing:.02em; }
.pi-logo{ width:34px; height:34px; border-radius:8px; background:#fff; color:var(--brand); display:grid; place-items:center; font-weight:900; flex:0 0 auto; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.pi-nav{ display:flex; flex-direction:column; gap:2px; margin-top:1rem; }
.pi-nav-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); padding:.5rem .85rem; margin-top:.5rem; }
.pi-nav-link{
    display:flex; align-items:center; gap:.7rem;
    color:rgba(255,255,255,.78); padding:.6rem .85rem; border-radius:9px;
    font-weight:600; font-size:.93rem; transition: background .15s, color .15s;
}
.pi-nav-link svg{ width:18px; height:18px; opacity:.85; flex:0 0 auto; }
.pi-nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.pi-nav-link.active{ background:var(--brand); color:#fff; box-shadow: var(--shadow-sm); }
.pi-nav-link.active svg{ opacity:1; }

@media (min-width:992px){
    .pi-layout{ display:flex; align-items:stretch; min-height:100vh; }
    .pi-sidebar.offcanvas-lg{
        flex:0 0 260px; width:260px; position:sticky; top:0; height:100vh; overflow-y:auto;
        background: var(--sidebar) !important;   /* vence o "transparent !important" do Bootstrap no lg+ */
        visibility: visible !important; transform: none !important;
    }
    .pi-sidebar .offcanvas-body{ background: transparent !important; }
}
.pi-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.pi-topbar{
    position:sticky; top:0; z-index:5;
    background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem;
}
.pi-topbar h1{ font-size:1.1rem; font-weight:800; margin:0; }
.pi-user{ display:flex; align-items:center; gap:.6rem; }
.pi-avatar{ width:36px; height:36px; border-radius:50%; background:var(--brand-050); color:var(--brand); display:grid; place-items:center; font-weight:800; }
.pi-content{ padding:1.5rem 1.25rem 3rem; }
@media (min-width:992px){ .pi-content{ padding:2rem 2rem 4rem; } .pi-topbar{ padding:1rem 2rem; } }
.pi-content-narrow{ max-width: 820px; }

/* ---- eyebrow / títulos de seção ---- */
.pi-eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }

/* ---- stat tiles ---- */
.pi-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem; box-shadow:var(--shadow-sm); }
.pi-stat .v{ font-size:1.7rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.pi-stat .l{ color:var(--muted); font-size:.82rem; margin-top:.35rem; }
.pi-stat .ic{ width:38px; height:38px; border-radius:10px; background:var(--brand-050); color:var(--brand); display:grid; place-items:center; }

/* ---- ações rápidas ---- */
.pi-action{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; height:100%; }
.pi-action:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand-100); }
.pi-action.is-locked{ opacity:.55; pointer-events:none; }
.pi-action .ic{ width:40px; height:40px; border-radius:10px; background:var(--brand-050); color:var(--brand); display:grid; place-items:center; margin-bottom:.7rem; }
.pi-action h3{ font-size:.98rem; font-weight:700; color:var(--ink); margin:0 0 .15rem; }
.pi-action p{ font-size:.83rem; color:var(--muted); margin:0; }

/* =====================================================================
   Assinatura: apostila como "capa de booklet"
   ===================================================================== */
.pi-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:1.25rem; }
.pi-cover-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .12s, box-shadow .12s; display:flex; flex-direction:column; }
.pi-cover-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pi-cover{ position:relative; padding:1.25rem 1.25rem 0; background:linear-gradient(180deg,var(--brand-050),#fff); }
.pi-cover .sheet{ position:relative; aspect-ratio:1/1.414; border-radius:4px 7px 7px 4px; background:#fff; box-shadow:0 1px 0 #cfd8e6, 0 10px 18px rgba(16,30,54,.16); overflow:hidden; border:1px solid #e7ebf2; }
.pi-cover .sheet::before{ /* lombada */ content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:linear-gradient(90deg, rgba(16,30,54,.18), rgba(16,30,54,0)); }
.pi-cover .sheet img{ width:100%; height:100%; object-fit:cover; display:block; }
.pi-cover .sheet .empty{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted); font-size:.78rem; background:repeating-linear-gradient(135deg,#f6f8fc,#f6f8fc 10px,#eef2f8 10px,#eef2f8 20px); }
.pi-cover-card .body{ padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.pi-cover-card .ttl{ font-weight:700; font-size:.95rem; line-height:1.25; color:var(--ink); }
.pi-cover-card .meta{ color:var(--muted); font-size:.8rem; margin-top:auto; }

/* ---- status badges ---- */
.pi-status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.pi-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pi-status.rascunho{ color:#64748b; background:#eef1f6; }
.pi-status.em_analise{ color:var(--warn); background:#fdf3e3; }
.pi-status.aprovada{ color:var(--ok); background:#e7f6ec; }
.pi-status.reprovada{ color:var(--bad); background:#fbe9e9; }
.pi-status.alteracoes{ color:var(--info); background:#e6f5fc; }

/* ---- dropzone de upload ---- */
.pi-drop{ border:2px dashed var(--brand-100); border-radius:var(--radius); background:var(--brand-050); padding:2rem 1.25rem; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.pi-drop:hover, .pi-drop.drag{ border-color:var(--brand); background:#e9f0fb; }
.pi-drop .ic{ width:48px; height:48px; border-radius:12px; background:#fff; color:var(--brand); display:grid; place-items:center; margin:0 auto .75rem; box-shadow:var(--shadow-sm); }
.pi-drop input[type=file]{ display:none; }
.pi-filelist{ margin-top:.85rem; display:flex; flex-direction:column; gap:.4rem; }
.pi-fileitem{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.5rem .75rem; font-size:.86rem; margin-top:.4rem; }
.pi-fileitem .nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.pi-fileitem .cost{ color:var(--brand); font-weight:600; white-space:nowrap; }
.pi-del{ border:0; background:transparent; color:var(--muted); padding:.2rem; border-radius:6px; display:inline-grid; place-items:center; cursor:pointer; }
.pi-del:hover{ color:var(--bad); background:#fbe9e9; }
.pi-printbox{ border:1px solid var(--brand-100); background:var(--brand-050); border-radius:14px; padding:1.1rem 1.25rem; }
.pi-printbox-head{ display:flex; align-items:center; gap:.75rem; }
.pi-printbox-head .ic{ width:40px; height:40px; border-radius:11px; background:var(--brand); color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.pi-costline{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; border:1px solid var(--brand-100); border-radius:10px; padding:.8rem 1rem; }
.pi-costline .lbl{ font-weight:600; }
.pi-costline .sub{ color:var(--muted); font-size:.78rem; max-width:46ch; }
.pi-costline .val{ font-size:1.5rem; font-weight:800; color:var(--brand); white-space:nowrap; }
.pi-fileitem .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- tabela limpa ---- */
.pi-table{ width:100%; }
.pi-table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); padding:.6rem .75rem; }
.pi-table tbody td{ padding:.7rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.pi-table tbody tr{ cursor:pointer; }
.pi-table tbody tr:hover{ background:var(--brand-050); }

/* ---- formulários ---- */
.form-control, .form-select{ background-color:var(--surface); border-radius:9px; border-color:var(--line); padding:.55rem .8rem; }
.form-control:focus, .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(0,92,168,.12); }
.form-label.small{ font-weight:600; color:#334155; }
.pi-section-title{ font-size:.95rem; font-weight:800; color:var(--ink); margin:0 0 .15rem; }

/* ---- página de login/cadastro ---- */
.pi-auth{ min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:992px){ .pi-auth{ grid-template-columns: 1.05fr .95fr; } }
.pi-auth-art{ display:none; }
@media (min-width:992px){
    .pi-auth-art{ display:flex; flex-direction:column; justify-content:space-between; padding:3rem; color:#fff;
        background: radial-gradient(1200px 500px at -10% -10%, rgba(255,255,255,.12), transparent), var(--sidebar); }
}
.pi-auth-art h2{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.pi-auth-art .pi-logo{ width:44px; height:44px; font-size:1.1rem; }
.pi-auth-form{ display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem; }
.pi-auth-form .inner{ width:100%; max-width:460px; }

/* ---- gestão de opções de impressão (Root) ---- */
.pi-optrow{ display:flex; align-items:center; gap:.75rem; padding:.65rem .25rem; border-bottom:1px solid var(--line); }
.pi-optrow:last-of-type{ border-bottom:0; }
.pi-optrow .nm{ font-weight:600; }
.pi-chip{ display:inline-block; font-size:.74rem; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.08rem .55rem; }
.pi-edit{ background:var(--brand-050); border:1px solid var(--brand-100); border-left:3px solid var(--brand); border-radius:10px; padding:1rem 1.1rem; margin:.4rem 0 1rem; }
.pi-edit-title{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-700); margin-bottom:.85rem; }
.pi-edit--add{ background:#fbfcff; border:1px dashed var(--line); border-left:3px dashed var(--brand-100); }
.pi-group-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; padding-bottom:.75rem; border-bottom:1px solid var(--line); margin-bottom:.5rem; }

/* legado */
.navbar-brand-bar{ background:var(--brand); }