:root{--bg:#f2f6f3;--panel:#fff;--text:#17251d;--muted:#64736a;--line:#d9e5dd;--brand:#176b3a;--brand2:#0e4d2a;--shadow:0 8px 22px rgba(19,50,30,.08)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.topbar{padding:16px 24px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;box-shadow:0 2px 14px rgba(0,0,0,.15)}.topbar h1{margin:0 0 4px;font-size:24px;letter-spacing:.2px}.topbar p{margin:0;opacity:.92;font-size:14px}
.layout{display:grid;grid-template-columns:400px 1fr;height:calc(100vh - 78px)}.panel{overflow:auto;padding:14px;background:#edf4ef;border-right:1px solid var(--line)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}.card h2{font-size:16px;margin:0 0 12px;color:#183c27;display:flex;align-items:center;gap:6px}
label{display:block;font-size:13px;color:#26362d;margin-bottom:10px}input,select{width:100%;padding:10px;border:1px solid #c7d5cc;border-radius:10px;margin-top:5px;background:white;font-size:14px}input[type=range]{padding:0;border:0}
button{border:1px solid #b8c8be;background:white;color:#14251b;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:700;transition:.15s ease;box-shadow:0 1px 1px rgba(0,0,0,.03)}button.primary{background:var(--brand);color:white;border-color:var(--brand)}button:hover{filter:brightness(.97);transform:translateY(-1px)}button.active{background:#143d27;color:#fff;border-color:#143d27}
.row{display:flex;gap:8px}.wrap{flex-wrap:wrap}.hint{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.35}.summary{font-size:13px;line-height:1.5}.mapArea{position:relative;background:#dfe7e0}#map{width:100%;height:100%}
.statsBar{position:absolute;z-index:700;left:18px;right:18px;top:18px;display:flex;gap:10px;pointer-events:none}.statsBar:empty{display:none}.statsBar div{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(193,211,199,.9);border-radius:14px;padding:10px 14px;min-width:110px;box-shadow:0 4px 18px rgba(0,0,0,.12)}.statsBar b{display:block;font-size:19px;color:#103b23}.statsBar span{display:block;font-size:11px;color:#5f7066;text-transform:uppercase;letter-spacing:.04em}
.legend{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}.dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #888}.excelente{background:#1a9850}.buena{background:#fee08b}.regular{background:#f46d43}.critica{background:#d73027}
.leaflet-popup-content{font-size:13px}.badge{display:inline-block;padding:2px 7px;border-radius:999px;color:white;font-weight:bold;text-transform:capitalize}.badge.excelente{background:#1a9850}.badge.buena{background:#c49a00;color:#111}.badge.regular{background:#f46d43}.badge.critica{background:#d73027}.leaflet-container{font-family:Arial,Helvetica,sans-serif}
.file-inline{width:100%;font-size:13px;color:#26362d;margin-top:8px}.file-inline input{margin-top:5px}.save-ok{padding:9px;border-radius:10px;background:#e8f5ec;border:1px solid #b8dbc2}.save-error{padding:9px;border-radius:10px;background:#fff1f0;border:1px solid #f0b7b0}.marker-table{font-size:12px;width:100%;border-collapse:collapse;margin-top:8px}.marker-table td,.marker-table th{border-bottom:1px solid #dde7df;padding:6px;text-align:left;vertical-align:top}.marker-table button{padding:4px 7px;border-radius:7px}.marker-table small{color:#66756b}.advanced{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}.advanced summary{cursor:pointer;font-weight:700;color:#244b32;margin-bottom:8px}.zone-div-icon span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:white;border:2px solid #176b3a;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:16px}.bovintel-surface-canvas{mix-blend-mode:multiply}
@media(max-width:900px){.layout{grid-template-columns:1fr;height:auto}.panel{height:auto}.mapArea{height:72vh}.topbar h1{font-size:20px}.statsBar{position:static;padding:8px;display:grid;grid-template-columns:1fr 1fr;background:#edf4ef}.statsBar div{min-width:0}}
@media print{.panel{overflow:visible}.topbar,.card button,.file-inline,#csvFile,#mapFile,.advanced{display:none!important}.layout{display:block;height:auto}.mapArea{height:65vh;border:1px solid #ccc}.card{break-inside:avoid}.statsBar{position:static;margin-bottom:10px}.bovintel-surface-canvas{mix-blend-mode:normal}}