.jl-p4{padding:clamp(16px,3vw,38px);max-width:1500px;margin:auto;color:var(--jl-brand-text,#2F2E2E)}
.jl-p4 h1{font-size:clamp(25px,3vw,36px);margin:12px 0}.jl-p4 h2{font-size:21px;margin:28px 0 12px}
.jl-p4-scroll{overflow-x:auto;max-width:100%;border:1px solid #dbe3ec;border-radius:14px;background:#fff}
.jl-p4-table{border-collapse:collapse;width:100%;min-width:790px;background:#fff;color:var(--jl-brand-text)}
.jl-p4-table th,.jl-p4-table td{border-bottom:1px solid #e7ebf2;text-align:left;padding:14px 12px;vertical-align:top}
.jl-p4-table th{background:#f2f6fb;font-size:13px}.jl-p4-table small{font-size:12px;color:#64748b}
.jl-p4-filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.jl-p4-secondary,.jl-p4-primary{padding:10px 14px;border:1px solid #b6c2d0;border-radius:9px;cursor:pointer;background:#fff;color:var(--jl-brand-text);font:inherit}
.jl-p4-primary,.jl-p4-selected{background:#1D5933;color:#fff;border-color:#1D5933}.jl-p4-primary:hover{background:#164529}
.jl-p4-summary{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#eff9f5;border:1px solid #a4deca;border-radius:12px;padding:17px;margin:8px 0}.jl-p4-warning{padding:12px 16px;border-radius:9px;border:1px solid #e7cd8d;background:#fff8e7;font-size:14px;color:#604b1f}
.jl-p4-confirm{min-width:235px;display:grid;gap:8px}.jl-p4-confirm label{display:grid;gap:3px;font-size:12px}.jl-p4-confirm input,.jl-p4-confirm select{max-width:100%;min-width:0;padding:6px;border:1px solid #b6c2d0;border-radius:6px;background:#fff;color:var(--jl-brand-text)}
.jl-p4-ok{border:1px solid #16a34a;background:#f0fdf4;color:#166534;padding:15px;border-radius:9px}


/* Correção Fase 4 - home: atalho pessoal e atalho de cliente utilizam o mesmo
   componente. O atalho precisa herdar o mesmo limite de largura do catálogo. */
.jl-home .jl-finance-home-shortcut {
    width: min(1080px, 100%);
    margin: 0 auto 30px;
    padding: clamp(17px, 2.4vw, 25px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    background: #f3faf6;
    border: 1px solid #d4e8db;
    border-radius: 17px;
    box-shadow: 0 6px 26px rgba(31, 89, 57, .045);
    color: #2e4038;
}
.jl-home .jl-finance-home-shortcut > div {
    display: flex;
    flex: 1 1 280px;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}
.jl-home .jl-finance-home-shortcut strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.35;
    font-weight: 750;
    color: #236145;
}
.jl-home .jl-finance-home-shortcut span {
    display: block;
    color: #5c7469;
    font-size: 13px;
    line-height: 1.55;
}
.jl-home .jl-finance-home-shortcut .jl-finance-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    min-height: 43px;
    padding: 10px 17px;
    border: 1px solid #1D5933;
    border-radius: 10px;
    background: #1D5933;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
    transition: background-color .18s, transform .18s;
}
.jl-home .jl-finance-home-shortcut .jl-finance-primary:hover {
    background: #153F26;
    transform: translateY(-1px);
}
.jl-home .jl-finance-home-shortcut .jl-finance-primary:focus-visible {
    outline: 3px solid #89bea1;
    outline-offset: 3px;
}

/* Correção Fase 3/4 - permissões por cliente. CSS com seletor específico,
   para evitar as regras globais de formulário e de .btn-primary. */
.jl-clients.jl-access-panel {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px) 22px 64px;
}
.jl-clients.jl-access-panel .jl-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.jl-clients.jl-access-panel .jl-head h1 { margin: 0 0 8px; line-height: 1.2; }
.jl-clients.jl-access-panel .jl-head p { line-height: 1.5; }
.jl-clients.jl-access-panel .jl-hint {
    margin: 0 0 22px;
    padding: 12px 15px;
    border: 1px solid #dcebe1;
    border-radius: 11px;
    background: #f4faf6;
    color: #52695b;
    line-height: 1.55;
    font-size: 13px;
    opacity: 1;
}
.jl-clients.jl-access-panel .jlClientAccessForm {
    width: 100%;
    max-width: 850px;
    margin: 0 0 18px;
}
.jl-clients.jl-access-panel .jl-access-member {
    min-width: 0;
    width: 100%;
    max-width: none;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: clamp(15px, 2.5vw, 24px);
    border: 1px solid #dbe5df;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(31, 89, 57, .045);
}
.jl-clients.jl-access-panel .jl-access-member legend {
    max-width: 100%;
    padding: 0 9px;
    color: #293e32;
    font-size: 15px;
    font-weight: 750;
    overflow-wrap: anywhere;
}
.jl-clients.jl-access-panel .jl-access-member legend small {
    display: inline-block;
    margin: 4px 0 0 6px;
    color: #72847a;
    font-size: 12px;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.jl-clients.jl-access-panel .jl-access-member label:not(.jl-access-check) {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    color: #374b40;
    font-size: 13px;
    font-weight: 650;
}
.jl-clients.jl-access-panel .jl-access-member select {
    width: auto;
    min-width: 135px;
    min-height: 37px;
    padding: 7px 11px;
    border: 1px solid #cbdcd1;
    border-radius: 9px;
    background: #fff;
    color: #263c2f;
    font: inherit;
    font-size: 13px;
}
.jl-clients.jl-access-panel .jl-access-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e2eae4;
    border-radius: 10px;
    background: #fafcfb;
    color: #384e41;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    cursor: pointer;
}
.jl-clients.jl-access-panel .jl-access-check input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #1D5933;
    cursor: pointer;
}
.jl-clients.jl-access-panel .jl-access-member .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: auto;
    min-width: 180px;
    max-width: 100%;
    min-height: 43px;
    padding: 10px 20px;
    margin-top: 4px;
    border: 1px solid #1D5933;
    border-radius: 10px;
    background: #1D5933;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    cursor: pointer;
}
.jl-clients.jl-access-panel .jl-access-member .btn-primary:hover { background: #153F26; }
.jl-clients.jl-access-panel .jl-access-feedback { font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
    .jl-home .jl-finance-home-shortcut { margin-bottom: 25px; padding: 17px; }
    .jl-home .jl-finance-home-shortcut .jl-finance-primary { width: 100%; }
    .jl-clients.jl-access-panel { padding: 18px 12px 45px; }
    .jl-clients.jl-access-panel .jl-access-member legend small { display: block; margin: 4px 0 0; }
    .jl-clients.jl-access-panel .jl-access-member .btn-primary { width: 100%; }
}


/* Fase 5.1 — melhoria visual do painel Minhas compras e financeiro */
.jl-p4-personal{display:grid;gap:18px}
.jl-p4-hero{background:linear-gradient(135deg,#ffffff 0%,#f6fbf8 100%);border:1px solid #dbe9e0;border-radius:22px;padding:clamp(18px,3vw,28px);box-shadow:0 10px 30px rgba(31,89,57,.05)}
.jl-p4-hero-top{display:flex;justify-content:flex-start;margin-bottom:10px}
.jl-p4-hero-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.95fr);gap:18px;align-items:start}
.jl-p4-kicker{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1D5933}
.jl-p4-lead{margin:0;color:#536779;font-size:15px;line-height:1.65;max-width:760px}
.jl-p4-side-note{padding:16px 18px;border:1px solid #e5c97d;background:#fff8e7;border-radius:16px;color:#5d4a23}
.jl-p4-side-note strong{display:block;margin-bottom:8px;font-size:14px;color:#7a5b1c}.jl-p4-side-note p{margin:0;line-height:1.6;font-size:14px}
.jl-p4-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jl-p4-stat{padding:17px 18px;border:1px solid #dbe3ec;border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.03)}
.jl-p4-stat span{display:block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#6b7e90;margin-bottom:8px}
.jl-p4-stat strong{display:block;font-size:clamp(22px,2.2vw,30px);line-height:1.2;color:#1f3448}.jl-p4-stat small{display:block;margin-top:6px;color:#6b7e90;font-size:12px}
.jl-p4-card{background:#fff;border:1px solid #dbe3ec;border-radius:22px;padding:clamp(18px,3vw,26px);box-shadow:0 8px 24px rgba(15,23,42,.04)}
.jl-p4-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.jl-p4-card-head h2{margin:0 0 6px}.jl-p4-card-head p{margin:0;color:#64748b;line-height:1.55}
.jl-p4-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#f1f5f9;border:1px solid #d8e1eb;color:#385064;font-size:12px;font-weight:700}
.jl-p4-empty{padding:28px;border:1px dashed #c9d6e2;border-radius:18px;background:linear-gradient(180deg,#fbfdff 0%,#f7fafc 100%);text-align:center;color:#526475}.jl-p4-empty strong{display:block;font-size:18px;color:var(--jl-brand-text);margin-bottom:8px}.jl-p4-empty p{max-width:560px;margin:0 auto;line-height:1.65}
.jl-p4-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;border:1px solid transparent}
.jl-p4-badge-pending{background:#fff7e9;color:#8a5a00;border-color:#f1d290}
.jl-p4-badge-paid{background:#eefbf4;color:#166534;border-color:#b6e4c8}
.jl-p4-badge-partial{background:#eef5ff;color:#2458a6;border-color:#bfd5ff}
.jl-p4-badge-cancelled{background:#fff1f2;color:#b42318;border-color:#fecdd3}
.jl-p4-footnote{margin:14px 0 0;color:#64748b}
@media (max-width: 980px){.jl-p4-hero-body{grid-template-columns:1fr}.jl-p4-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.jl-p4-stats{grid-template-columns:1fr}.jl-p4-card,.jl-p4-hero{border-radius:18px;padding:18px}.jl-p4-side-note{padding:14px 15px}}