.topbar nav { display:flex; flex-wrap:wrap; column-gap:1rem; row-gap:.35rem; align-items:center }
.topbar nav a { display:inline-block; white-space:nowrap; padding:.4rem .15rem; line-height:1.4 }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
.crm { background:#fff; border-radius:24px; padding:1.5rem; margin:1rem 0 2rem; box-shadow:0 12px 40px #0b3e5512 }
.crm-heading { border-bottom:1px solid #dce8e3; padding-bottom:1rem; margin-bottom:1.25rem }
.crm-heading .eyebrow { color:#007b4e; font-size:.68rem; font-weight:800; letter-spacing:.15em }
.crm-heading h1 { margin:.25rem 0 0; font-size:1.5rem; color:#133a32 }
.crm-tools { display:grid; grid-template-columns:minmax(220px,520px) minmax(135px,160px) auto; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem }
.crm-tools input,.crm-tools select { width:100%; min-height:46px; border:1px solid #d6e2dd; border-radius:10px; background:#fff; padding:0 .8rem; font:inherit }
.crm-new { background:#078454; color:#fff; justify-self:end; white-space:nowrap }
.crm-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.crm-column { min-width:0; background:#f3f7f5; border:1px solid #dbe7e1; border-radius:12px; overflow:hidden }
.crm-column[hidden],.crm-card[hidden],.crm-empty[hidden] { display:none!important }
.crm-column>header { display:flex; align-items:center; justify-content:space-between; padding:.7rem .8rem; border-bottom:1px solid #dbe7e1; gap:.5rem; font-size:.8rem; color:#153c32 }
.crm-count { background:#ddf2e7; color:#087b50; border-radius:50%; min-width:22px; height:22px; display:grid; place-items:center; font-size:.75rem }
.crm-cards { min-height:165px; padding:.5rem }
.crm-card { background:#fff; border:1px solid #d6e6dd; border-radius:10px; padding:.75rem; margin-bottom:.5rem; overflow-wrap:anywhere; box-shadow:0 2px 7px #163d3010 }
.crm-card h2 { font-size:1rem; margin:0 0 .3rem; color:#153c32 }
.crm-card p { margin:.2rem 0; font-size:.82rem; color:#526962 }
.crm-actions { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-top:.65rem }
.crm-actions a,.crm-actions button,.crm-move button { color:#087b50; border:0; background:none; padding:0; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; text-decoration:underline }
.crm-actions form { margin:0 }
.crm-move { border-top:1px solid #e4eee8; margin-top:.65rem; padding-top:.65rem; display:flex; gap:.4rem; align-items:end }
.crm-move label { flex:1; min-width:0; font-size:.72rem; color:#526962 }
.crm-move select { display:block; width:100%; margin-top:.2rem; padding:.3rem; border:1px solid #d6e2dd; border-radius:6px; background:#fff; font:inherit }
.crm-move button { padding-bottom:.3rem }
.crm-note,.crm-empty { color:#536b61; font-size:.85rem; margin:1rem 0 0 }
.document { max-width:840px; margin:1rem auto; padding:2.5rem; background:#fff; color:#183348; line-height:1.55 }
.document h1 { color:#083b66; margin:1rem 0 }
.document h2 { color:#083b66; margin-top:1.8rem; border-bottom:1px solid #c8d8e2; padding-bottom:.3rem }
.document .signature { display:flex; gap:2rem; justify-content:space-between; margin-top:5rem; text-align:center }
@media(max-width:1050px) { .crm-board { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:700px) { .topbar nav { overflow-x:auto; flex-wrap:nowrap; max-width:100%; column-gap:.9rem; padding:.4rem 0; scrollbar-width:thin } .topbar nav a { flex:0 0 auto } .crm { padding:1rem; border-radius:16px } .crm-tools { grid-template-columns:1fr 1fr } .crm-search { grid-column:1/-1 } .crm-new { justify-self:end } .crm-board { grid-template-columns:1fr } .crm-cards { min-height:95px } .document { padding:1.2rem } .document .signature { flex-direction:column } }
@media print { .topbar,.no-print,.alert { display:none!important } .container { max-width:none!important; padding:0!important } .document { border:0; box-shadow:none; margin:0; padding:0; max-width:none } @page { size:A4; margin:15mm } }


/* SOLARIO VENDAS COMPACTAS */
@media screen {
body:has(input[name="action"][value="sale-save"]) .page-head{
margin-bottom:12px}
body:has(input[name="action"][value="sale-save"]) .page-head h1{
font-size:32px}
form:has(input[value="sale-save"]) .panel{
padding:16px;margin:12px 0}
form:has(input[value="sale-save"]) h2{
font-size:20px;margin:0 0 12px}
form:has(input[value="sale-save"]) .form-grid{
gap:12px}
form:has(input[value="sale-save"]) input,
form:has(input[value="sale-save"]) select{
padding:9px 11px;margin-top:5px;min-height:40px}
form:has(input[value="sale-save"]) textarea{
padding:9px 11px;margin-top:5px;min-height:60px;height:60px}
form:has(input[value="sale-save"]) .span-2{
grid-column:1 / -1}
form:has(input[value="sale-save"]) .form-grid p{
margin:0;font-size:12px}
@media(min-width:1000px){
form:has(input[value="sale-save"]) .form-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:520px){
form:has(input[value="sale-save"]) input,
form:has(input[value="sale-save"]) select{
min-height:44px}
}
}


/* SOLARIO VENDAS MAIS COMPACTAS */
@media screen {
body:has(input[name="action"][value="sale-save"]) .page-head{
margin-bottom:8px!important}
body:has(input[name="action"][value="sale-save"]) .page-head h1{
font-size:26px!important;margin:4px 0!important}
form:has(input[value="sale-save"]) .panel{
padding:12px 16px!important;margin:8px 0!important}
form:has(input[value="sale-save"]) h2{
font-size:18px!important;margin:0 0 8px!important}
form:has(input[value="sale-save"]) .form-grid{
gap:8px 12px!important}
form:has(input[value="sale-save"]) input,
form:has(input[value="sale-save"]) select{
padding:7px 10px!important;margin-top:3px!important;
min-height:34px!important}
form:has(input[value="sale-save"]) textarea{
padding:7px 10px!important;margin-top:3px!important;
min-height:38px!important;height:38px!important;resize:vertical}
@media(min-width:1000px){
form:has(input[value="sale-save"]) .form-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important}
form:has(input[value="sale-save"]) .form-grid>label:has(textarea){
order:2;grid-column:span 2!important}
}
@media(max-width:520px){
form:has(input[value="sale-save"]) input,
form:has(input[value="sale-save"]) select{
min-height:44px!important}
}
}
/* FIM VENDAS MAIS COMPACTAS */


/* SOLARIO COMPACTO GERAL */
@media screen {
.container{margin-top:18px!important}
.container .page-head{margin-bottom:12px!important;gap:12px}
.container .page-head h1{
font-size:28px!important;margin:4px 0!important}
.container .panel{
padding:14px 16px!important;margin:10px 0!important;
border-radius:14px!important}
.container .panel h2{
font-size:19px!important;margin-bottom:10px!important}
.container .form-grid{gap:9px 12px!important}
.container .form-grid input:not([type="checkbox"]):not([type="radio"]),
.container .form-grid select{
padding:8px 10px!important;margin-top:4px!important;
min-height:36px!important}
.container .form-grid textarea{
padding:8px 10px!important;margin-top:4px!important;
height:48px!important;min-height:48px!important;resize:vertical}
.container .btn{padding:10px 15px}
.container table th{padding:9px 10px}
.container table td{padding:10px}
.container .stats{gap:10px!important;margin:12px 0!important}
.container .stats article{padding:14px!important}
.container .stats strong{font-size:24px!important}
.container .quote-view{gap:12px!important}
.container .quote-total{padding:12px!important;gap:10px!important}
@media(min-width:1000px){
.container .form-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important}
.container .form-grid>.span-2{grid-column:1 / -1}
}
@media(max-width:520px){
.container .page-head h1{font-size:25px!important}
.container .panel{padding:12px!important}
.container .form-grid{grid-template-columns:1fr!important}
.container .form-grid>.span-2{grid-column:1 / -1!important}
.container .form-grid input:not([type="checkbox"]):not([type="radio"]),
.container .form-grid select,
.container .btn{min-height:44px!important}
}
}
/* FIM SOLARIO COMPACTO GERAL */

/* SOLARIO PAINEL COMPACTO V1 */
main.container:has(>.hero){
    width:calc(100% - 28px)!important;
    max-width:1600px!important;
    margin:12px auto 24px!important;
}
.container:has(>.hero) .hero{
    padding:18px 22px!important;
    border-radius:14px;
    gap:12px;
}
.container:has(>.hero) .hero h1{
    font-size:28px!important;
    margin:4px 0;
}
.container:has(>.hero) .hero p{font-size:13px}
.container:has(>.hero) .stats{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
    margin:10px 0!important;
}
.container:has(>.hero) .stats article{
    padding:12px!important;
    border-radius:12px;
    min-width:0;
}
.container:has(>.hero) .stats span{
    margin-bottom:5px;
    font-size:12px;
}
.container:has(>.hero) .stats strong{
    font-size:22px!important;
    white-space:nowrap;
}
.container:has(>.hero) .panel{
    margin:10px 0!important;
    padding:14px!important;
    border-radius:12px;
}
.container:has(>.hero) .panel-head{gap:10px}
.container:has(>.hero) .panel-head h2{
    font-size:18px;
    margin:0;
}
.container:has(>.hero) .dashboard-shortcuts{
    margin:10px 0!important;
    gap:8px!important;
}
.container:has(>.hero) .dashboard-shortcuts .btn{
    min-height:38px!important;
    padding:8px 12px!important;
    flex:0 1 auto!important;
}
@media(max-width:900px){
    .container:has(>.hero) .stats{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .container:has(>.hero) .stats article:nth-child(4){
        grid-column:1/-1;
        grid-row:3;
    }
}
@media(max-width:600px){
    main.container:has(>.hero){
        width:calc(100% - 16px)!important;
        margin-top:8px!important;
    }
    .container:has(>.hero) .hero{
        padding:14px!important;
        gap:10px;
    }
    .container:has(>.hero) .hero h1{font-size:24px!important}
    .container:has(>.hero) .hero .btn{
        width:auto;
        min-height:40px!important;
        padding:8px 12px!important;
    }
    .container:has(>.hero) .stats{gap:8px!important}
    .container:has(>.hero) .stats strong{font-size:21px!important}
    .container:has(>.hero) .panel{padding:10px!important}
    .container:has(>.hero) .panel-head{
        flex-wrap:wrap;
        margin-bottom:8px;
    }
    .container:has(>.hero) .dashboard-shortcuts .btn{
        flex:1 1 140px!important;
        font-size:12px;
    }
}