/* ZopiTech Smart Mining Twin | Mining Sand Light HUD v4
   Paneles claros / tipografía grafito / acentos arena / cero azul dominante */
:root{
  --navy:#f9faf8;
  --glass:rgba(255,254,250,.91);
  --border:rgba(109,98,79,.19);
  --muted:#5b6671;
  --green:#20825b;
  --gold:#ad7336;
  --blue:#68787b;
}
html,body{background:#e9e3d9;color:#26333a}
.mining-map{background:#c4b59c}
.map-color-grade{background:linear-gradient(90deg,rgba(255,248,232,.16),rgba(248,243,231,.04) 45%,rgba(48,35,23,.06) 100%)}
.map-edge{box-shadow:inset 0 0 110px rgba(77,61,37,.12)}
.hud-header{
  background:linear-gradient(180deg,rgba(255,253,246,.97),rgba(255,253,246,.70) 76%,transparent);
  border-bottom:0;
}
.hud-icon-btn{
  background:rgba(255,254,249,.96);border:1px solid rgba(119,105,82,.20);
  color:#30383a;box-shadow:0 6px 20px rgba(56,46,32,.11);
}
.hud-icon-btn:hover{background:#fff8e9;border-color:#c5a77e}
.logo-mark img{filter:none}
.brand-copy strong{color:#293437}
.brand-copy strong span{color:#aa7a43}
.brand-copy small{color:#637171}
.brand-copy i{color:#be8548}
.brand-divider{border-color:rgba(80,73,62,.23)}
.live-indicator{
  background:rgba(238,246,239,.94);border-color:rgba(31,132,89,.23);
  color:#2a7750;box-shadow:0 3px 9px rgba(81,91,67,.06);
}
.live-indicator i{background:#25a76e;box-shadow:0 0 0 3px #39b98128}
.hud-clock{color:#3d4a4b}
.kpi,.floating-inspector,.floating-notification,.hud-scenario,.status-dock{
  background:rgba(255,254,250,.93);
  border:1px solid rgba(106,93,71,.18);
  color:#2b3537;
  box-shadow:0 12px 34px rgba(61,48,33,.14);
}
.kpi small{color:#727b78}
.kpi strong{color:#263336}
.kpi p{color:#7e8984}
.kpi i{color:#b88b51}
.kpi.red{border-bottom-color:#cf7768}
.kpi.red i{color:#b65d54}
.kpi.green{border-bottom-color:#4caf82}
.kpi.cyan{border-bottom-color:#b89a6c}
.kpi.amber{border-bottom-color:#c79a5d}
.mining-drawer{
  background:linear-gradient(165deg,rgba(255,255,252,.98),rgba(248,247,241,.98));
  border-right:1px solid rgba(136,116,83,.24);
  color:#2a3638;
  box-shadow:16px 0 40px rgba(53,48,41,.14);
}
.drawer-head{border-bottom-color:#b3ab9d44}
.drawer-head small{color:#97703d}
.drawer-head h2{color:#2b393a}
.drawer-close{background:#fbf9f3;border:1px solid #a9a29365;color:#475653}
.drawer-tabs{background:#ebe8df;border-color:#e2dacb}
.drawer-tabs button{color:#69736d}
.drawer-tabs button.active{background:#fffef8;color:#986e35;box-shadow:0 2px 9px #5c45241b}
.drawer-info{color:#687772}
.dock-entry{color:#2d3e41}
.dock-entry.picked,.dock-entry:hover{background:#e6ede6;border-color:#b7cabc}
.dock-index{background:#eee5d7;color:#936b3c}
.dock-details small{color:#7d8982}
.drawer-foot{border-top-color:#b7b6a844}
.drawer-foot>div{color:#64716f}
.all-twins{color:#9b713b}
.drawer-card-head{color:#2e3b3c}
.drawer-card-head span{color:#20815c}
.zone-row{border-color:#e5ded3;background:#fdfbf5}
.zone-name strong{color:#313d3d}
.zone-name small{color:#737d76}
.bar-shell{background:#e5e0d7}
.bar-shell i{background:linear-gradient(90deg,#b78c51,#6dad84)}
.zone-value,.zone-target{color:#607068}
.zone-status.good{color:#218558}
.zone-status.warn{color:#b97927}
.zone-status.bad{color:#b34a49}
.recommend-panel{background:#f3efe6;border-color:#e6d6bb}
.recommend-panel small{color:#936d3c}
.recommend-panel strong{color:#2e3d3b}
.recommend-panel p{color:#637169}
.cta-button{background:#bf9660;border-color:#bf9660;color:#282c29}
.quiet-button{background:#ffffff;border-color:#d5d6cb;color:#495655}
.chart-label{color:#303f3b}
.chart-label span{color:#88938b}
.spark span{color:#697976}
.spark{background:linear-gradient(180deg,#a6c1a6,#b18b56)}
.compare-row .label{color:#4b5c59}
.compare-row .track{background:#e6e3dd}
.compare-row .track i{background:#c4a06c}
.compare-row .track.actual i{background:#5aaf83}
.compare-row .delta{color:#3f5752}
.state-card{background:#fdfbf7;border-color:#e0dfd5}
.state-card strong{color:#324642}
.state-card span{color:#65716b}
.layer-toggle{background:#f4eee3;border-color:#e1caa7}
.layer-toggle input{accent-color:#b98544}
.layer-toggle span b{color:#273939}
.layer-toggle span small{color:#66756f}
.inspector-top small{color:#897249}
.inspector-top button{color:#626d68}
.inspector-status-dot{color:#31a56f}
.inspector-main-title>strong{color:#263538}
.dock-badge{background:#e4f2e7;color:#267b53}
.dock-badge.warning{background:#f8eacc;color:#a16d28}
.dock-badge.danger{background:#f9dcd4;color:#aa4b48}
.throughput-mini span{color:#727f79}
.throughput-mini strong{color:#2d3b40}
.throughput-mini em{color:#728078}
.throughput-note{color:#6b7973}
.usage-track{background:#e6e2d7}
.usage-track i{background:linear-gradient(90deg,#c29c64,#6fae90)}
.metric{background:#f8f7f2;border-color:#e4e1d8}
.metric strong{color:#2d3e3f}
.metric span{color:#6d7b77}
.inspect-actions button{background:#fffdf7;color:#485650;border-color:#dbd7c9}
.inspect-actions button:hover{background:#ede7db}
.status-dock span{color:#546460}
.status-dock strong{color:#31403e}
.dot.green{background:#269e6e}
.dot.blue{background:#8b9b93}
.dot.orange{background:#d49d56}
.terrain-caption{color:#fdfcf8;text-shadow:0 2px 7px #3b3028}
.terrain-caption b{color:#f0e1c3}
.hud-scenario{background:rgba(255,254,250,.95)}
.scenario-kicker{color:#9c7647}
.scenario-kicker small{color:#2d403f}
.scenario-buttons button{color:#69756c}
.scenario-buttons button.active,.scenario-buttons button:hover{background:#f1e7d4;color:#91642b}
.hud-quick-actions button{background:#fffdf8;color:#4b5a54;border:1px solid #cfc5b4;box-shadow:0 6px 18px #5b50321c}
.hud-quick-actions button:last-child{background:#c39b68;color:#302918;border-color:#c39b68}
.hud-quick-actions button:hover{background:#f1e6d5}
.hud-quick-actions button:last-child:hover{background:#d1aa74}
.floating-notification{border-color:#e3d5ba}
.toast-icon{background:#ddbc82;color:#67451b}
.toast-content small{color:#a36c2e}
.toast-content strong{color:#354443}
.toast-content button{color:#9b6a30}
.toast-close{color:#78847d}
.attribution{
  background:rgba(255,252,245,.96);border:1px solid rgba(126,112,90,.25);
  box-shadow:0 4px 14px #4b45352b;border-radius:8px;
  color:#394947;text-shadow:none;font-size:9px;line-height:1.25;
  padding:6px 10px;bottom:3px;max-width:90%;white-space:normal;text-align:center;
}
.cesium-widget-credits{background:#fffefaad;border-radius:5px;padding:1px 4px}
.cesium-widget-credits a,.cesium-widget-credits span{color:#354141!important}
.demo-marker{
  position:absolute;z-index:5;top:81px;left:25px;
  max-width:350px;background:rgba(255,252,243,.95);border:1px solid #d7c5a3;
  color:#4f4b3e;font-size:10px;font-weight:800;line-height:1.55;
  padding:9px 12px;border-radius:8px;box-shadow:0 4px 18px #574c3525;
}
.demo-marker b{color:#9d682e;letter-spacing:.7px}
@media(max-width:1450px){.demo-marker{left:17px;top:77px}}
@media(max-width:1120px){.demo-marker{top:169px;max-width:280px;font-size:9px}.floating-notification{top:auto}}
@media(max-width:720px){.demo-marker{left:10px;right:10px;top:128px;max-width:230px}.attribution{display:none}.floating-inspector{top:196px}.brand-copy strong{font-size:17px}}

/* Aviso permanente arriba a la izquierda; alerta debajo, sin solaparse. */
@media(min-width:1121px){.floating-notification{top:148px}}
@media(min-width:721px) and (max-width:1120px){.floating-notification{top:222px}}

/* Rosario-inspired clean explorer controls, but built for the synthetic ZopiTech project. */
.hud-map-action{padding:12px 14px;border:1px solid #c8baa3;background:rgba(255,252,247,.96);color:#3a4644;font-size:11px;font-weight:850;white-space:nowrap;border-radius:10px;box-shadow:0 5px 16px #362c1f17}
.hud-map-action:hover{background:#f8ebd6;border-color:#b89d70}
.clean-map .hud-kpis,.clean-map .floating-inspector,.clean-map .hud-footer-left,.clean-map .hud-scenario,.clean-map .hud-quick-actions,.clean-map .floating-notification{display:none!important}
.clean-map .map-color-grade{background:transparent!important}
.clean-map .demo-marker{left:auto;right:20px;top:89px}
@media(max-width:1150px){.hud-map-action{font-size:10px;padding:10px 9px}.hud-clean{display:none}}
@media(max-width:750px){.hud-map-action{padding:8px 6px}.hud-right{gap:5px}.hud-header{gap:4px}}

/* Clean bottom overlays: no duplication behind the scenario control. */
.terrain-caption{display:none!important}
.attribution{bottom:4px;line-height:1.1;padding:4px 8px;font-size:8px;max-width:65%;opacity:.9}
@media(max-width:1150px){.attribution{max-width:60%;font-size:7px}}