/* Approved workshop surfaces, 13 October 2026 */
#app{background:#050f16;color:#e9f0f6}#app main{background:radial-gradient(ellipse at 50% 0,#0b1c28 0,transparent 65%),#050f16}.sidebar{background:#040e15;border-right:1px solid #172934;width:238px}.content{padding:22px 24px 28px}.panel,.ref-card{background:linear-gradient(135deg,#0c1d28,#08151e);border:1px solid #1c3443;border-radius:10px;box-shadow:0 10px 26px #0002}.ref-card{padding:20px;min-width:0}.ref-card h3,.office-panel-title h3{font-size:17px;font-weight:650;margin:0 0 17px;position:relative}.ref-card h3:after,.office-panel-title h3:after{content:'';display:block;width:48px;height:3px;background:#f3192c;margin-top:9px}.ref-card p,.ref-muted{color:#a5bacb;font-size:13px;line-height:1.6}.ref-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.ref-heading h2{font-size:28px;margin:0 0 6px}.ref-heading p{margin:0;color:#abc0cf}.ref-columns{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.ref-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ref-stack{display:grid;align-content:start;gap:16px}.ref-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ref-fields label,.ref-card>label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#e7edf3}.ref-fields .wide{grid-column:1/-1}.ref-card input,.ref-card select,.ref-card textarea,.ref-search{background:#122431;border:1px solid #355162;color:#f1f5fa;padding:11px 12px;border-radius:6px;width:100%;font:inherit}.ref-card textarea{resize:vertical;min-height:90px}.ref-card input:focus,.ref-card select:focus,.ref-card textarea:focus{outline:2px solid #4b9fdf;outline-offset:1px}.ref-card input[type=checkbox]{width:auto}.ref-card button,.ref-heading button{cursor:pointer}.ref-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ref-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;padding:14px 18px}.ref-stepper{display:flex;justify-content:space-between;gap:14px;margin:0 0 22px;padding:0;list-style:none}.ref-stepper li{display:flex;align-items:center;gap:12px;flex:1;font-size:13px}.ref-stepper b{display:grid;place-items:center;width:39px;height:39px;border:1px solid #547084;border-radius:50%;background:#1b2f3e;flex-shrink:0}.ref-stepper .active b{background:#e80d24;outline:2px solid #f32438;outline-offset:3px}.ref-stepper .done b{background:#176a4a}.ref-stepper small{display:block;color:#91aabd;margin-top:5px}.ref-tabs{display:flex;gap:6px;border-bottom:1px solid #28404f;padding-bottom:1px;margin:20px 0;overflow:auto}.ref-tabs button{border:0;background:transparent;color:#9fb5c6;padding:13px 20px;white-space:nowrap;cursor:pointer}.ref-tabs button.active{color:#fff;border-bottom:3px solid #ef1c30;background:#13222f}.ref-hero{display:grid;grid-template-columns:150px minmax(0,1fr) 240px;align-items:center;gap:24px;padding:20px}.ref-car{display:grid;place-items:center;min-height:100px;background:#10232e;border-radius:8px}.ref-car svg{width:110px;height:65px;stroke:#94b4ca;fill:none;stroke-width:2}.ref-car img{max-width:100%;height:100px;object-fit:contain}.ref-hero h2{margin:5px 0 8px}.ref-hero p{margin:4px 0}.ref-hero .plate{font-size:20px}.ref-dl{margin:0}.ref-dl div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #203541}.ref-dl dt{color:#abc0cf;font-size:13px}.ref-dl dd{margin:0;text-align:right;font-size:14px}.ref-total{font-size:27px!important;color:#fff}.ref-avatar{display:grid;place-items:center;width:45px;height:45px;background:#1b5377;border:1px solid #427493;border-radius:50%;font-size:17px;flex-shrink:0}.ref-client-list{display:flex;flex-direction:column;gap:7px;margin-top:15px}.ref-client-row{display:flex;gap:12px;align-items:center;background:#0b1923;border:1px solid #223c4d;border-radius:7px;color:#fff;padding:13px;text-align:left;width:100%;cursor:pointer}.ref-client-row.active{border-color:#328bc9;background:#173249}.ref-client-row small{display:block;color:#99b1c2;margin-top:5px}.ref-customer-layout{display:grid;grid-template-columns:315px minmax(0,1fr);gap:18px}.ref-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ref-stat-grid article{padding:17px;background:#102430;border:1px solid #2a4253;border-radius:8px}.ref-stat-grid span{display:block;color:#a9becf;font-size:13px}.ref-stat-grid strong{display:block;font-size:24px;margin-top:8px}.ref-history{list-style:none;padding:0;margin:0}.ref-history li{padding:11px 0;border-bottom:1px solid #203746;display:flex;justify-content:space-between;gap:10px}.ref-empty{padding:25px 15px;text-align:center;color:#91a9b9}.ref-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ref-gallery img{width:100%;height:100px;object-fit:cover;border-radius:5px}.ref-file{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding:10px;background:#10212c;border:1px solid #233f50;border-radius:6px;color:#d4e2ec}.ref-upload{border:1px dashed #4c718b;background:#0a1922;border-radius:8px;padding:22px 15px;text-align:center;margin:12px 0;display:block}.ref-upload input{margin-top:12px}.ref-week{display:grid;grid-template-columns:50px repeat(6,minmax(110px,1fr));min-width:740px}.ref-week>div{border-right:1px solid #223d4d;border-bottom:1px solid #203541;min-height:54px;padding:6px}.ref-week .ref-week-day{background:#142a38;min-height:55px;text-align:center;font-weight:600}.ref-week .ref-hour{font-size:12px;color:#98aebd;text-align:center}.ref-event{display:block;border-left:3px solid #268fc9;background:#143752;border-radius:5px;color:white;padding:7px 5px;font-size:11px;text-align:left;width:100%;border-top:0;border-bottom:0;border-right:0;cursor:pointer}.ref-event small{display:block;color:#bad2e2}.ref-calendar-grid{overflow:auto}.ref-month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ref-month>div{min-height:95px;border:1px solid #244251;padding:8px;border-radius:5px}.ref-integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.ref-integration-grid h3{margin-top:12px}.ref-integration-grid .status-pill{font-size:11px}.ref-integration-symbol{display:grid;place-items:center;width:44px;height:44px;border:1px solid #27638a;border-radius:9px;background:#133450;color:#75c5fa;font-size:20px}.ref-note{padding:14px;background:#102630;border:1px solid #285160;border-radius:8px;color:#bdd6e0;font-size:13px}.ref-brand-logo{width:185px;max-height:95px;object-fit:contain}.workshop-brand:has(.ref-brand-logo) .garage-car,.workshop-brand:has(.ref-brand-logo)>div:not(.garage-car){display:none}.workshop-brand:has(.ref-brand-logo){padding:10px 18px 22px;justify-content:center}.office-hero blockquote{display:none}.office-kpis{grid-template-columns:repeat(5,1fr)!important}.office-kpis>article:last-child{display:none}.office-main-grid{grid-template-columns:1fr!important}.office-side-panels{display:none!important}.office-bottom{display:grid;grid-template-columns:repeat(3,1fr)!important;gap:15px;margin-top:16px}.office-panel-title h3{margin-bottom:8px}.office-kanban{grid-template-columns:repeat(5,minmax(0,1fr))!important}.office-col .vehicle-card{padding:10px 7px 10px 12px;border:0;border-radius:0;border-bottom:1px solid #28404c;background:transparent;box-shadow:none;position:relative;margin:0 0 3px}.office-col .vehicle-card:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:5px;background:#e91f31;border-radius:3px}.office-col.quote .vehicle-card:before{background:#ecb00e}.office-col.ready .vehicle-card:before{background:#13b867}.vehicle-card .plate{background:transparent;padding:0;border:0;color:#fff;letter-spacing:0;font-size:15px}.vehicle-card h4{font-size:12px;margin:5px 0}.vehicle-card p{font-size:12px;margin:0;color:#b4c9d7}.vehicle-meta{font-size:10px;color:#849fb3}.ref-dashboard-list article{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #233b49}.ref-dashboard-list strong{display:block;font-size:13px}.ref-dashboard-list small{color:#9eb6c7;display:block;margin-top:4px}.ref-dashboard-list time{margin-left:auto;color:#a5bfce;font-size:11px}.ref-donut-wrap{display:flex;align-items:center;gap:18px;margin:18px 0}.ref-donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;position:relative;flex-shrink:0}.ref-donut:before{content:'';position:absolute;inset:22px;background:#0b1c27;border-radius:50%}.ref-donut b{z-index:1;text-align:center;font-size:30px}.ref-donut b small{display:block;font-size:12px;font-weight:400}.ref-legend{flex:1}.ref-legend p{display:flex;justify-content:space-between;font-size:12px}.ref-legend i{width:10px;height:10px;display:inline-block;border-radius:3px;margin-right:8px}.ref-table{width:100%;border-collapse:collapse}.ref-table th{text-align:left;color:#96b0c1;background:#132938;font-size:11px;padding:11px}.ref-table td{padding:12px 10px;border-bottom:1px solid #243d4d;font-size:13px}.ref-table small{display:block;color:#96aec0;margin-top:5px}.ref-scroll{overflow:auto}.ref-check{display:flex;gap:10px;align-items:center;padding:9px 0}.ref-check input{width:auto}.ref-cta{color:#fff;border:1px solid #385365;background:#173040;padding:10px 14px;border-radius:6px;cursor:pointer}.ref-danger{color:#ff7681}.ref-flash{margin:14px 0;color:#73d5ab;white-space:pre-wrap}.ref-flash.error{color:#ff8590}.ref-wizard-page[hidden]{display:none}.md-tabs .md-tab.active{border-bottom:3px solid #f31b30;color:#fff;background:#172c3a}.md-top{background:#06131c}.md-card{background:linear-gradient(135deg,#0d202c,#071720);border-color:#254252}.md-flow{background:#112430}.md-content{max-width:1536px}.md-original{border-left:3px solid #2cab7b}.md-shell .md-top h1{font-size:28px}.md-shell .md-greeting p{color:#a5bdce}.md-shell .md-brand svg{height:32px}.md-section-hidden{display:none!important}.md-tabs{position:sticky;top:0;z-index:3;background:#06131b;padding-top:8px}.md-bottom:has(.md-section-hidden){grid-template-columns:1fr}.md-diagnosis-grid.md-section-hidden{display:none}.md-right{align-self:start}.md-vehicle{min-height:170px}.md-vehicle .md-client{border-left:1px solid #2b4354;padding-left:22px}.md-footer{border-top:1px solid #223a4b}.ref-backoffice-note{display:none}
@media(min-width:1600px){.content{padding:28px 32px}}@media(max-width:1200px){.ref-columns{grid-template-columns:minmax(0,1fr) 275px}.ref-integration-grid{grid-template-columns:repeat(2,1fr)}.office-bottom{grid-template-columns:1fr 1fr!important}.office-bottom>section:last-child{grid-column:1/-1}.ref-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.ref-columns,.ref-customer-layout{grid-template-columns:1fr}.ref-hero{grid-template-columns:100px 1fr}.ref-hero>div:last-child{grid-column:1/-1}.office-kpis{grid-template-columns:repeat(3,1fr)!important}.office-kanban{min-width:850px}.office-flow{overflow:auto}.ref-stepper small{display:none}.ref-stepper li{font-size:11px}.ref-stepper b{width:30px;height:30px}.ref-two{grid-template-columns:1fr}.ref-client-list{max-height:260px;overflow:auto}}@media(max-width:600px){.content{padding:16px}.office-kpis{grid-template-columns:repeat(2,1fr)!important}.office-bottom{grid-template-columns:1fr!important}.ref-fields,.ref-stat-grid,.ref-integration-grid{grid-template-columns:1fr}.ref-heading{align-items:flex-start;flex-direction:column}.ref-heading h2{font-size:24px}.ref-stepper{gap:8px}.ref-stepper li{flex-direction:column;text-align:center}.ref-card{padding:15px}.ref-tabs button{padding:11px}.ref-donut-wrap{gap:12px}.ref-hero{gap:13px;padding:16px}.ref-footer{align-items:stretch;flex-direction:column}.ref-footer button{width:100%}.ref-actions{gap:7px}}
#app{font-size:14px}#app .sidebar nav{margin-top:8px;gap:1px;padding:8px 11px}#app .sidebar nav a{font-size:13px;min-height:39px;padding:5px 11px;font-weight:500;line-height:1.2}#app>.sidebar>.workshop-brand{width:100%;overflow:hidden;min-height:106px;height:106px}#app .workshop-brand strong{font-size:15px;max-width:152px;word-break:normal}#app .office-col{min-height:305px;background:linear-gradient(135deg,#0c1e2a,#0a1923);border:1px solid #1e3747;margin:0 5px;border-radius:8px;overflow:hidden}#app .office-kanban{gap:0;padding:7px 5px 12px}#app .office-col h4{background:#102734;color:#e8f0f7;font-size:13px;padding:13px 12px;margin:0 0 7px;min-height:45px}#app .office-col h4 b{background:#223c4e;padding:4px 8px;border-radius:50%}#app .office-col .empty-col{min-height:160px;border:0;background:none;font-size:12px;padding:25px 12px;color:#8ca8bb;display:grid;place-content:center}#app .office-panel-title h3{display:block;font-size:17px}#app .office-panel-title h3:after{margin-top:9px}#app .office-kpis span{font-size:13px}#app .office-kpis small{font-size:11px}#app .office-kpis article{background:linear-gradient(135deg,#10212c,#081923);border-color:#1c3546;border-radius:8px;min-height:122px}#app .office-kpis strong{font-size:30px}#app .office-bottom{margin-top:16px}#app .office-hero time{display:grid;grid-template-columns:28px auto;font-size:13px;gap:4px 12px}#app .office-hero time>span{grid-row:1/3}#app .office-hero time strong{grid-column:2}#app .ref-actions .btn-accent,#app .ref-footer .btn-accent,#app .ref-card>.btn-accent,#app .ref-card form>.btn-accent{background:linear-gradient(#f51c31,#d80920);box-shadow:0 5px 15px #e60b2222;border-radius:6px}#app .ref-actions .btn-secondary,#app .ref-footer .btn-secondary{border-radius:6px;background:linear-gradient(#172c3a,#11212d);border-color:#354e60}#app .ref-receipt-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr) minmax(270px,1fr);gap:15px}#app .ref-receipt-grid .ref-fields{grid-template-columns:repeat(3,1fr)}#app .ref-receipt-services{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}#app .ref-receipt-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}#app .ref-upload-preview{display:flex;gap:8px;flex-wrap:wrap}#app .ref-upload-preview img{width:70px;height:65px;object-fit:cover;border-radius:5px}#app .ref-receipt-grid .ref-card h3{font-size:16px}#app .ref-receipt-grid label{font-size:12px}#app .ref-receipt-grid .ref-upload{padding:18px 12px}#app .ref-receipt-grid .ref-fields input[readonly]{color:#9cb3c4}#app .ref-receipt-services .ref-fields{grid-template-columns:1fr 1fr}#app .ref-integration-symbol svg{max-width:28px;max-height:28px;stroke:currentColor}
@media(max-width:1300px){#app .ref-receipt-grid{grid-template-columns:minmax(0,1fr) 285px}#app .ref-receipt-grid>.ref-stack{grid-column:1/-1;grid-template-columns:1fr 1fr}}@media(max-width:900px){#app .ref-receipt-grid,#app .ref-receipt-services,#app .ref-receipt-bottom{grid-template-columns:1fr}#app .ref-receipt-grid>.ref-stack{grid-template-columns:1fr}#app .office-kpis article{min-height:108px}}@media(max-width:600px){#app .ref-receipt-grid .ref-fields{grid-template-columns:1fr 1fr}#app .office-kpis span{font-size:12px}}
#app .ref-tabs,#mechanic-app .md-tabs{display:flex;flex-direction:row;align-items:center;gap:5px;overflow:auto;margin:18px 0;padding:0;border-bottom:1px solid #2a4352}#mechanic-app .md-tabs .md-tab{width:auto;min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;flex:0 0 auto;border-radius:0;font-size:13px;background:transparent;border:0;color:#a5bdce}#mechanic-app .md-tabs .md-tab.active{border-bottom:3px solid #f71c31;color:white;background:#142a38}#mechanic-app .md-tabs .md-tab svg{flex:0 0 18px}#app .ref-tabs button{width:auto;flex:0 0 auto}#app .ref-receipt-grid{align-items:start}#app .ref-receipt-grid>.ref-stack{grid-column:3;grid-row:1/3}#app .ref-receipt-grid>.ref-card:nth-child(4){grid-column:1;grid-row:2}#app .ref-receipt-grid>.ref-card:nth-child(5){grid-column:2;grid-row:2}#app .ref-receipt-grid>.ref-card{margin:0}#app .ref-receipt-grid .ref-fields input,#app .ref-receipt-grid .ref-fields select{padding:9px 10px}#app .ref-receipt-grid>.ref-card:nth-child(4) .ref-fields,#app .ref-receipt-grid>.ref-card:nth-child(5) .ref-fields{grid-template-columns:1fr 1fr}#app .ref-receipt-grid>.ref-card:nth-child(4) textarea{min-height:76px}
@media(max-width:1300px){#app .ref-receipt-grid>.ref-stack{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr}#app .ref-receipt-grid>.ref-card:nth-child(2){grid-column:1;grid-row:2}#app .ref-receipt-grid>.ref-card:nth-child(4){grid-column:1;grid-row:3}#app .ref-receipt-grid>.ref-card:nth-child(5){grid-column:2;grid-row:4}}@media(max-width:900px){#app .ref-receipt-grid{display:flex;flex-direction:column}#app .ref-receipt-grid>*{width:100%}#app .ref-receipt-grid>.ref-stack{display:flex;flex-direction:column}}
#app>.sidebar>.ref-text-brand{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:13px 14px}#app>.sidebar>.ref-text-brand .garage-car{width:165px;height:28px}#app>.sidebar>.ref-text-brand .garage-car svg{width:165px;height:28px}#app>.sidebar>.ref-text-brand>div:last-child{text-align:center}#app>.sidebar>.ref-text-brand strong{font-size:17px;display:block;max-width:200px}#app .ref-card .btn-accent{background:linear-gradient(#f51c31,#d80920);box-shadow:0 5px 15px #e60b2222;border-radius:6px}
#app .office-col .vehicle-card h4{padding:0;margin:4px 0;background:transparent;border:0;min-height:0;font-size:12px;font-weight:400;color:#c3d7e3}#app .ref-fields label.ref-check{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}#app .ref-fields label.ref-check input{width:auto}.ref-card [data-ref-editor-intent]{width:100%}.ref-vehicle-open{border:0;background:transparent;color:#7bc6f4;text-align:left;padding:6px 0 0;font-size:11px;cursor:pointer}

/* Dashboard proportions matched to dashboard_oficina.png, 14 October 2026 */
#app .office-hero h1 .greeting-name{color:#f3192c}
#app .office-hero{margin-bottom:18px}
#app .office-hero h1{font-size:28px}
#app .ref-text-brand strong{font-size:13px!important;max-width:207px!important;white-space:nowrap;letter-spacing:.2px}
#app .office-kpis article{padding:17px 16px;gap:15px;align-items:flex-start;min-height:124px}
#app .office-kpis article>i{margin-top:1px}
#app .office-kpis article>div{display:grid;grid-template-columns:minmax(0,1fr);flex:1}
#app .office-kpis article strong{order:0;margin:0 0 4px;font-size:28px}
#app .office-kpis article span{order:1;font-size:12px;font-weight:600}
#app .office-kpis article small{order:2;margin-top:15px;font-size:12px}
#app .office-panel-title a{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid #284352;border-radius:6px;background:linear-gradient(#152a37,#0b1b26);font-size:12px;color:#e4edf5}
#app .office-col .mini-action{border:0;border-top:1px solid #203a49;background:transparent;border-radius:0;color:#edf4f8;text-align:left;padding:11px 8px;margin:6px 7px 0;font-size:12px}
#app .office-bottom>.ref-card{padding:17px;display:flex;flex-direction:column}
#app .office-bottom>.ref-card>.btn-secondary{margin-top:auto;width:100%;text-align:left;padding:11px 13px;border:1px solid #2a4253;border-radius:6px;background:linear-gradient(#162b38,#0b1b26)}
#app .ref-donut-wrap{margin:14px 0;gap:16px}
#app .ref-donut.is-empty{background:#263e4d!important}
#app .ref-donut.is-empty b small{color:#9eb5c5}
@media(min-width:1201px){#app .approved-office-dashboard{padding:22px 22px 26px}#app .office-col{min-height:305px}}
@media(max-width:1050px){#app .office-kpis article{padding:13px 10px;gap:9px}#app .office-kpis article small{font-size:11px}}
@media(max-width:600px){#app .office-hero h1{font-size:25px}#app .office-kpis article{min-height:113px;padding:12px 9px}#app .office-kpis article span{font-size:11px}#app .office-kpis article small{font-size:10px;margin-top:10px}}

/* Workshop account dropdown */
#app .office-account{position:relative}
#app .office-account-toggle{display:flex;align-items:center;gap:13px;border:0;background:transparent;color:inherit;padding:4px 0;cursor:pointer;text-align:left;font:inherit}
#app .office-account-toggle:focus-visible{outline:2px solid #28a9ff;outline-offset:5px;border-radius:5px}
#app .office-account-toggle .avatar{display:grid;place-items:center;flex-shrink:0}
#app .office-account-menu{position:absolute;right:0;top:calc(100% + 12px);width:200px;padding:6px;background:#0c2130;border:1px solid #315267;border-radius:8px;box-shadow:0 12px 30px #0008;z-index:50}
#app .office-account-menu[hidden]{display:none}
#app .office-account-menu button{display:flex;gap:10px;align-items:center;width:100%;border:0;border-radius:5px;padding:12px;background:transparent;color:#eff6fc;font:inherit;text-align:left;cursor:pointer}
#app .office-account-menu button:hover,#app .office-account-menu button:focus-visible{background:#143d58;outline:2px solid #28a9ff;outline-offset:-2px}