/* KELMATEC — acabado corporativo transversal. Solo presentación, sin lógica nueva. */
:root{--km-focus:#0c77d8;--km-surface:#fff;--km-muted:#526a85}
.app>aside{width:238px;flex:0 0 238px;z-index:5}
.app>aside .logo{padding:20px 16px 16px}
.app>aside .nav{display:flex;align-items:center;min-height:41px;margin:3px 10px;padding:9px 12px;font-weight:600;letter-spacing:.05px}
.app>aside .nav:not(.on){color:#d5e3f2}
.app>aside .sidefoot{margin-top:auto}
.km-toolbar{position:relative;z-index:2;min-height:65px}
.km-top-shortcut{border:1px solid #ffffff30;border-radius:8px;padding:7px 11px;color:#e9f5ff;text-decoration:none;font-weight:600;transition:background .15s}
.km-top-shortcut:hover{background:#ffffff18}
.km-hero{height:160px;margin:12px 0 20px;border-radius:15px;background:linear-gradient(110deg,#123250 2%,#14619d 61%,#0e2e4c 100%);box-shadow:0 9px 22px #123b6322}
.km-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#081b341c,transparent 68%)}
.km-hero-copy{z-index:2}.km-hero-art{width:49%;opacity:1;background-position:center right}
.km-hero-electricidad{background:linear-gradient(105deg,#102a49,#18558e 64%,#102a49)}
.km-hero-refrigeracion,.km-hero-mantenimiento{background:linear-gradient(105deg,#0b3b63,#1276ae 62%,#0c3b60)}
.km-hero-fiscal,.km-hero-contabilidad,.km-hero-bancos,.km-hero-pagos,.km-hero-facturacion{background:linear-gradient(105deg,#183351,#236a9a 62%,#142f4b)}
.app main .head{margin:12px 0 18px;gap:16px;flex-wrap:wrap}
.app main .head h1{color:#163555;letter-spacing:-.5px}
.app main .crumb{font-weight:700;color:#50749b;letter-spacing:.4px}
.app main .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:13px;background:transparent;border:0;box-shadow:none!important;padding:0;margin:16px 0 20px}
.app main .kpis .kpi{min-width:0;background:linear-gradient(180deg,#fff,#f9fcff);border:1px solid #dce8f4;border-radius:13px;padding:17px 19px;box-shadow:0 4px 11px #1747710d}
.app main .kpis .kpi small{display:block;color:#52708e;font-weight:600;font-size:12px;margin-bottom:7px}
.app main .kpis .kpi b{font-size:clamp(24px,2.1vw,34px);color:#133b64;font-weight:750;line-height:1.2}
.app main .card{background:#fff;border:1px solid #dce6f0;box-shadow:0 5px 15px #163a5d0b}
.app main .btn,.app main button{transition:box-shadow .15s,transform .15s,background .15s}
.app main .btn:hover,.app main button:hover{box-shadow:0 3px 12px #175c9926}
.app main .btn.p{background:#1674d6;color:white;border-color:#1674d6}
.app main .fld{border-radius:8px;border:1px solid #c9d8e8;background:#fff;min-height:38px}
.app main .fld:focus-visible,.app main a:focus-visible,.app main button:focus-visible,.app>aside a:focus-visible{outline:3px solid #74baff;outline-offset:2px}
.app main table{border-collapse:separate;border-spacing:0;min-width:max-content}
.app main th{font-size:11px;letter-spacing:.35px;text-transform:uppercase;font-weight:700;background:#eaf2fa;white-space:nowrap;border-bottom:1px solid #d9e6f2}
.app main td{border-bottom:1px solid #eaf0f6;vertical-align:middle}
.app main tbody tr:hover{background:#f3f8fe}
.app main .pill{font-weight:650}
.app main .mod38{max-width:none;width:100%}
@media(min-width:1200px){.app>main{padding-left:26px!important;padding-right:26px!important}.km-toolbar{margin-left:-26px;margin-right:-26px}}
@media(max-width:1050px){.app>aside{width:210px;flex-basis:210px}.km-top-shortcut{display:none}}
@media(max-width:850px){.app>aside{width:auto;flex-basis:auto}.km-hero{height:132px}.km-hero-art{width:55%;opacity:.68}.app main .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.km-hero{height:118px;padding:14px}.km-hero-art{opacity:.34}.km-hero-copy{max-width:100%}.km-hero p{max-width:260px}.app main .kpis{gap:8px}.app main .kpis .kpi{padding:12px}.app main .kpis .kpi b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.app main .btn,.app main button,.km-top-shortcut{transition:none}}