:root{
  --bg:#0b0b0b;
  --panel:#161616;
  --muted:#a3a3a3;
  --ring:#2b2b2b;
  --green:#22c55e;
  --yellow:#eab308;
  --red:#ef4444;
  --text:#f3f3f3;
  --brand:#C68642;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg); color:var(--text);
}
.container{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px;}
.grid{display:grid; gap:24px; grid-template-columns:1fr; max-width:1100px; width:100%;}
@media (min-width:900px){ .grid{grid-template-columns:1fr 1fr;} }
.card{background:var(--panel); border:1px solid var(--ring); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.h1{font-size:28px; font-weight:700; margin:0}
.sub{color:var(--muted); font-size:13px; margin-top:4px}
.brandbar{display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--ring); padding-bottom:12px; margin-bottom:16px;}
.brandleft{display:flex; align-items:center; gap:10px; color:#fff}
.brandleft img{width:28px; height:28px; border-radius:6px; box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.brandname{font-weight:800; letter-spacing:.3px}
.brandpill{padding:4px 10px; border-radius:999px; background:#9D6A33; color:#fff; font-size:12px; border:1px solid #744E24}
.row{display:flex; align-items:center; gap:24px; margin-top:24px}
.circle{width:220px; height:220px; border-radius:50%; box-shadow: inset 0 10px 40px rgba(0,0,0,.35); transition: all .25s ease}
.circle.verde{background:var(--green)}
.circle.amarillo{background:var(--yellow)}
.circle.rojo{background:var(--red)}
.big{font-size:56px; font-weight:800; letter-spacing:-.02em}
.btn{border:0; padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer; background:var(--brand); color:#1b140b; border:1px solid #744E24}
.btn:hover{filter:brightness(1.05)}
.legend{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:16px}
.legend .item{background:#1d1d1d; border:1px solid var(--ring); border-radius:12px; padding:10px; font-size:13px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.dot.g{background:var(--green)} .dot.y{background:var(--yellow)} .dot.r{background:var(--red)}
.label{font-size:16px; font-weight:600; margin-top:18px}
input[type="number"], input[type="range"]{
  width:100%; background:#1d1d1d; color:#fff; border:1px solid var(--ring); border-radius:10px; padding:8px 10px;
}
.small{font-size:12px; color:var(--muted)}
.hr{height:1px; background:var(--ring); margin:14px 0}
.kicker{font-size:18px; font-weight:600; margin-top:10px}
.brandtag{font-size:12px; color:var(--muted)}