:root{--blue:#0867df;--blue2:#0754c6;--bg:#f4f6f9;--green:#0aaa55;--text:#172033;--muted:#748096;--red:#e93b3b;--orange:#ff7a18}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text)}
body{background:#e9edf3}
button,input{font:inherit}
.app-shell{max-width:520px;min-height:100vh;margin:auto;background:var(--bg);padding-bottom:86px;box-shadow:0 0 40px #0002}
.top{background:linear-gradient(135deg,#0878ee,var(--blue2));color:#fff;padding:22px 20px 30px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:14px;align-items:center}.brand b{font-size:20px}.brand small{display:block;opacity:.88;margin-top:4px}.hamb{font-size:24px}
.top-actions{display:flex;gap:10px;align-items:center}.sync-dot{font-size:11px}.logout{border:0;background:#ffffff18;color:white;border-radius:10px;width:38px;height:38px;font-size:22px}
main{padding:16px}
.hero-card,.summary,.clientbox,.total,.sync-big{background:#fff;border-radius:18px;padding:18px;box-shadow:0 5px 18px #15243b12;margin-bottom:14px}
.hero-line{display:flex;justify-content:space-between}.trend{background:#eaf2ff;color:var(--blue);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:22px}
.hero-card>strong{display:block;color:var(--green);font-size:28px;margin:8px 0}.hero-card small{color:var(--muted)}
.progress{height:8px;background:#e7ebf1;border-radius:8px;margin-top:12px}.progress i{display:block;background:var(--blue);height:100%;border-radius:8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stats div{background:#fff;border-radius:16px;padding:16px;box-shadow:0 5px 18px #15243b12}.stats small,.stats b,.stats em{display:block}.stats b{font-size:25px;margin:6px 0}.stats em{font-style:normal;color:var(--green);font-size:12px}.stats .warn{color:var(--orange)}
h3{margin:20px 4px 12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid a{background:#fff;border-radius:16px;padding:17px 8px;text-align:center;text-decoration:none;color:var(--text);box-shadow:0 5px 18px #15243b10;min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center}.grid b{display:block;font-size:12px;margin-top:8px}.ico{font-size:28px}
.summary h3{margin:0 0 14px}.summary-cols{display:flex;justify-content:space-between;gap:20px}.summary-cols span{flex:1;color:var(--muted)}.summary-cols b{display:block;color:var(--green);margin-top:8px}.danger{color:var(--red)!important}
.sync-card{background:#fff;border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 18px #15243b10}.sync-card>div{display:flex;align-items:center;gap:10px}.sync-card small{display:block;color:var(--muted);margin-top:4px}.sync-icon{font-size:24px;color:var(--blue)}.badge{border-radius:20px;padding:6px 10px;font-size:11px}.badge.ok{background:#e9fff2;color:var(--green)}
.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;height:72px;background:#fff;display:flex;justify-content:space-around;border-top:1px solid #e5e8ee;padding:8px 3px calc(8px + env(safe-area-inset-bottom));z-index:20}.bottom a{text-decoration:none;color:#7a8495;text-align:center;font-size:19px}.bottom small{display:block;font-size:10px;margin-top:4px}.bottom a.active{color:var(--blue)}
.titlebar{margin:-16px -16px 12px;background:var(--blue);color:#fff;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}.titlebar a{color:#fff;text-decoration:none;font-size:34px}.titlebar h2{margin:0;font-size:20px}
.search{background:#fff;border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 14px #15243b0d;margin-bottom:12px}.search input{border:0;outline:0;width:100%;font-size:16px;background:transparent}
.chips{display:flex;gap:8px;overflow:auto;margin-bottom:12px;padding-bottom:2px}.chips>*{white-space:nowrap;background:#fff;padding:9px 13px;border-radius:20px;font-size:12px}.chips b{background:var(--blue);color:#fff}
.product,.orderitem{display:flex;align-items:center;gap:12px;background:#fff;border-radius:15px;padding:13px;margin-bottom:10px;box-shadow:0 4px 14px #15243b0d}.pic,.avatar{font-size:30px;width:45px;text-align:center}.pinfo,.orderitem>div{flex:1;min-width:0}.pinfo b,.orderitem b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pinfo small,.orderitem small{display:block;color:var(--muted);margin-top:5px;font-size:11px}.price{text-align:right}.price strong{display:block;color:var(--green)}.price small{display:block;color:var(--muted);font-size:10px;margin-top:7px}.price em{display:block;color:var(--green);font-style:normal;font-size:12px;margin-top:2px}
.chev{font-size:25px;color:#9aa3b2}.fab{position:fixed;bottom:88px;margin-left:420px;border:0;background:var(--blue);color:#fff;width:54px;height:54px;border-radius:50%;font-size:30px;box-shadow:0 8px 20px #0867df55}
.tabs{display:flex;justify-content:space-around;margin:-12px -16px 14px;padding:10px;background:var(--blue);color:#fff;font-size:12px}.tabs b{border-bottom:3px solid #fff;padding-bottom:8px}
.clientbox{display:flex;align-items:center;gap:10px}.mini-avatar{background:#eaf2ff;border-radius:50%;width:42px;height:42px;display:grid;place-items:center}.clientbox>div:nth-child(2){flex:1;min-width:0}.clientbox small,.clientbox em{display:block;color:var(--muted);font-style:normal;font-size:11px}.clientbox b{display:block;margin:4px 0}.client-actions{color:var(--blue);font-size:20px}
.qty{display:inline-flex;background:#f1f3f6;border-radius:12px;margin-top:8px;overflow:hidden;align-items:center}.qty button{border:0;background:transparent;width:34px;height:34px}.qty span{min-width:30px;text-align:center}.item-total{display:flex!important;flex-direction:column;align-items:flex-end;gap:28px;flex:0 0 auto!important}.item-total span{color:#8c95a5}.note-link{display:inline-block;color:var(--blue);text-decoration:none;margin:2px 0 14px 8px;font-size:13px}
.total div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee}.total .grand{font-size:18px;border:0}.total .grand b{color:var(--blue)}.positive{color:var(--green)}
.primary{width:100%;border:0;background:var(--green);color:#fff;padding:16px;border-radius:12px;font-size:16px;font-weight:700;min-height:52px}
.sync-big{text-align:center;padding:28px 18px}.pulse{width:74px;height:74px;border-radius:50%;background:#eaf2ff;color:var(--blue);display:grid;place-items:center;font-size:34px;margin:0 auto 14px}.sync-big h2{margin:0 0 8px}.sync-big p,.muted{color:var(--muted)}.sync-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}.sync-numbers span{background:#f6f8fb;border-radius:13px;padding:12px;font-size:11px}.sync-numbers b{display:block;font-size:21px;color:var(--blue);margin-bottom:4px}

/* Login */
.login-page{background:linear-gradient(160deg,#0754c6 0,#0878ee 48%,#eff6ff 48%,#f6f8fb 100%);min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.login-shell{width:min(430px,100%)}
.login-brand{color:#fff;display:flex;align-items:center;gap:14px;margin:0 10px 26px}.carbon-mark{width:58px;height:58px;border-radius:18px;background:#fff;color:var(--blue);font-size:31px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 30px #00387d35}.login-brand h1{margin:0;font-size:27px}.login-brand p{margin:5px 0 0;opacity:.9}
.login-card{background:#fff;border-radius:24px;padding:26px;box-shadow:0 18px 45px #17365f2b}.login-card h2{margin:0 0 5px}.login-card>p{margin-top:0}.login-card label{display:block;font-weight:600;font-size:13px;margin:16px 0 6px}.login-card input[type=email],.login-card input[type=password]{width:100%;border:1px solid #dce2ea;background:#f8fafc;border-radius:12px;padding:13px 14px;outline:0;font-size:16px}.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #0867df18}.remember{display:flex!important;align-items:center;gap:8px;font-weight:400!important;color:var(--muted)}.alert{background:#fff0f0;color:#b82525;border:1px solid #ffd2d2;border-radius:11px;padding:10px 12px;font-size:13px}.login-foot{text-align:center;color:#6e7a8d;font-size:12px;margin-top:20px}

@media(max-width:519px){.fab{right:18px;margin-left:0}}
@media(min-width:700px){.app-shell{max-width:1000px}.bottom{max-width:1000px}.grid{grid-template-columns:repeat(5,1fr)}}


/* Carbon Mobile v0.7.7 - nome do produto em até duas linhas */
.product .pinfo{
    min-width:0;
}
.product .product-name{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    white-space:normal;
    text-overflow:ellipsis;
    line-height:1.2;
    max-height:2.4em;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.product .price{
    flex:0 0 auto;
}


/* Carbon Mobile v0.7.8 - força nome do produto em até duas linhas */
.product .pinfo .product-name{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    line-height:1.25!important;
    max-height:2.5em!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
}

/* Carbon Mobile v0.7.9 - restaura posição original do preço no card */
.product{
    align-items:center;
}
.product .price{
    align-self:center!important;
    flex:0 0 auto;
}


/* Carbon Mobile v0.7.10 - nome ocupa a largura do card até a margem direita */
.product{
    position:relative;
    align-items:center;
}
.product .pinfo{
    min-width:0;
    padding-right:92px;
}
.product .pinfo .product-name{
    margin-right:-92px!important;
    padding-right:0!important;
    width:auto!important;
    max-width:none!important;
}
.product .price{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    width:82px;
    text-align:right;
    align-self:auto!important;
}


/* Carbon Mobile v0.7.11 - editor rápido horizontal e status colorido */

/* Reserva espaço para o editor aberto, mas o nome continua usando toda a largura. */
.product .pinfo{
    padding-right:122px;
}
.product .pinfo .product-name{
    margin-right:-122px!important;
}

/* Bloco da direita permanece centralizado verticalmente. */
.product .price{
    width:112px;
}

/* Campo e botão lado a lado, sem aumentar desnecessariamente a altura do card. */
.product .quick-price-form{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    white-space:nowrap;
}
.product .quick-price-form input{
    width:54px;
    min-width:0;
    padding:6px 5px;
    border:1px solid #d9dfe7;
    border-radius:7px;
    font-size:11px;
}
.product .quick-price-form button{
    border:0;
    background:#0aaa55;
    color:#fff;
    padding:7px 7px;
    border-radius:7px;
    font-size:10px;
    line-height:1;
    cursor:pointer;
}

/* Identificação visual do estágio da sincronização. */
.product .sync-state{
    font-weight:600;
}
.product .sync-state-ok{
    color:#0a9b4f;
}
.product .sync-state-pending{
    color:#d88900;
}
.product .sync-state-processing{
    color:#0867df;
}
.product .sync-state-error{
    color:#d62828;
}
.product .sync-state-conflict{
    color:#7a3ee6;
}
.product .sync-state-default{
    color:#748096;
}


/* Carbon Mobile v0.7.15 - leitor de código de barras */
.barcode-input-wrap{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
}
.barcode-input-wrap input{
    flex:1;
    min-width:0;
    padding:12px;
    border:1px solid #dce2ea;
    border-radius:10px;
}
.barcode-scan-btn,
.search-barcode-btn{
    border:0;
    color:#0867df;
    background:#edf5ff;
    border-radius:9px;
    display:grid;
    place-items:center;
    cursor:pointer;
    font-weight:800;
}
.barcode-scan-btn{
    flex:0 0 44px;
    width:44px;
    height:44px;
    font-size:23px;
}
.search-barcode-btn{
    flex:0 0 34px;
    width:34px;
    height:34px;
    font-size:19px;
}
.barcode-scanner-open{
    overflow:hidden;
}
.barcode-scanner-modal[hidden]{
    display:none!important;
}
.barcode-scanner-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.barcode-scanner-backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,19,37,.74);
}
.barcode-scanner-sheet{
    position:relative;
    width:min(100%,520px);
    background:#fff;
    border-radius:20px 20px 0 0;
    padding:16px;
    box-shadow:0 -10px 40px #0005;
}
.barcode-scanner-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}
.barcode-scanner-head strong{
    display:block;
    font-size:17px;
}
.barcode-scanner-head small{
    display:block;
    color:#748096;
    margin-top:4px;
}
.barcode-scanner-close{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#f0f3f7;
    color:#354054;
    font-size:26px;
}
.barcode-video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    border-radius:14px;
    background:#0a0a0a;
}
.barcode-video-wrap video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.barcode-target{
    position:absolute;
    left:9%;
    right:9%;
    top:50%;
    height:110px;
    transform:translateY(-50%);
    border:2px solid rgba(255,255,255,.9);
    border-radius:12px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.24);
}
.barcode-target span{
    position:absolute;
    left:8px;
    right:8px;
    top:50%;
    height:2px;
    background:#ef3d3d;
    box-shadow:0 0 8px #ef3d3d;
}
.barcode-scanner-message{
    text-align:center;
    color:#536078;
    font-size:12px;
    min-height:18px;
    margin:11px 0;
}
.barcode-scanner-message.error{
    color:#d62828;
}
.barcode-scanner-cancel{
    width:100%;
    border:0;
    border-radius:10px;
    padding:11px;
    background:#eef2f7;
    color:#263248;
    font-weight:700;
}
@media(min-width:700px){
    .barcode-scanner-modal{
        align-items:center;
    }
    .barcode-scanner-sheet{
        border-radius:20px;
    }
}


/* Carbon Mobile v0.7.17 - botão Buscar sempre visível no iOS/Android */
.search{
    overflow:visible;
}
.search input{
    min-width:0;
    flex:1 1 auto;
}
.search .search-barcode-btn{
    flex:0 0 34px;
}
.search .product-search-submit{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    height:34px;
    padding:0 8px;
    border:0;
    background:transparent;
    color:#0867df;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    -webkit-appearance:none;
    appearance:none;
}

/* Carbon Mobile v0.7.18 - código de barras duplicado */
.barcode-check-status{min-height:16px;margin-top:5px;font-size:11px;color:#748096}
.barcode-check-status.checking{color:#0867df}
.barcode-check-status.ok{color:#0a9b4f}
.barcode-check-status.warning{color:#d88900}
.barcode-check-status.error{color:#d62828;font-weight:700}
.duplicate-barcode-modal[hidden]{display:none!important}
.duplicate-barcode-modal{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:18px}
.duplicate-barcode-backdrop{position:absolute;inset:0;background:rgba(8,20,39,.62)}
.duplicate-barcode-box{position:relative;width:min(100%,390px);border-radius:18px;background:#fff;padding:20px;box-shadow:0 18px 55px rgba(0,0,0,.28);text-align:center}
.duplicate-barcode-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#fff1f1;color:#d62828;font-size:27px;font-weight:900}
.duplicate-barcode-box h3{margin:0 0 7px;color:#18243a}
.duplicate-barcode-box p{margin:0;color:#657187;font-size:13px;line-height:1.45}
.duplicate-barcode-product{margin-top:12px;padding:10px;border-radius:10px;background:#f5f7fa;color:#263248;font-size:12px;font-weight:700}
.duplicate-barcode-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:16px}
.duplicate-barcode-actions button,.duplicate-barcode-actions a{min-height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-decoration:none}
.duplicate-ok{border:1px solid #dce2ea;background:#fff;color:#36445b}
.duplicate-view{background:#0867df;color:#fff}


/* Carbon Mobile v0.8.2 - módulo Clientes, sem alterar Produtos */
.client-row .avatar{
    width:42px;height:42px;border-radius:12px;background:#f0ebff;
    display:grid;place-items:center;font-size:22px;flex:0 0 42px;
}
.client-row .pinfo{min-width:0}
.client-row .client-name{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    white-space:normal;
    line-height:1.25;
}
.client-row .chev{
    color:#0867df;font-size:24px;font-weight:700;margin-left:auto;
}


/* Carbon Mobile v0.8.11 - FAB reutilizável */
.module-fab{
    position:fixed;
    right:max(18px, env(safe-area-inset-right));
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:56px;
    height:56px;
    border:0;
    border-radius:50%;
    background:#0b6fe8;
    color:#fff;
    display:grid;
    place-items:center;
    padding:0;
    margin:0;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(11,111,232,.32);
    z-index:950;
    -webkit-appearance:none;
    appearance:none;
}
.module-fab .module-fab-plus{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    padding:0;
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:32px;
    font-weight:300;
    line-height:56px;
    text-align:center;
}
.module-fab:active{transform:scale(.96)}
@media (min-width:768px){
    .module-fab{
        right:28px;
        bottom:28px;
    }
}




/* Carbon Mobile v0.8.20 - nome de cliente ocupa a largura real do card */
.client-row{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
}

.client-row .pinfo{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    padding-right:26px !important;
}

.client-row .client-name{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    line-height:1.25 !important;
    max-height:2.5em !important;
}

.client-row .chev{
    position:absolute !important;
    right:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    width:14px !important;
    text-align:center !important;
}