/* Centelleo Now v2.0 — Estilos */
:root{--bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--card:#111827;--b:#1f2937;--accent:#38bdf8}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Ubuntu}
header{display:flex;align-items:center;gap:.75rem;padding:12px 16px;border-bottom:1px solid var(--b);position:sticky;top:0;background:rgba(15,23,42,.92);backdrop-filter:blur(6px);z-index:10;flex-wrap:wrap}
select,button,input,label{background:#111827;color:var(--fg);border:1px solid #334155;border-radius:10px;padding:8px 12px}
label{display:flex;gap:6px;align-items:center}
input[type="number"]{width:140px}
main{max-width:1100px;margin:0 auto;padding:16px;display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--b);border-radius:16px;overflow:hidden}
.card h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--b);font-size:16px;color:var(--muted)}
.map-wrap{position:relative;overflow:hidden;cursor:grab;touch-action:none}
.map-wrap:active{cursor:grabbing}
.map-inner{transform-origin:top left;transition:transform .1s linear}
.map{display:block;width:100%;height:auto;background:#000}
.badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:10px;font-size:12px}
.pin{position:absolute;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,.25),0 0 8px rgba(56,189,248,.4)}
.hint{font-size:12px;color:var(--muted);padding:0 16px 10px}
footer{color:var(--muted);font-size:12px;text-align:center;padding:16px}
.controls{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.error{color:#fecaca}
.btn{user-select:none}

/* Timeline */
.hist-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.grid{display:grid;gap:8px;padding:0 16px 16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.thumb{width:100%;height:auto;border-radius:10px;display:block;border:1px solid #334155;background:#000;cursor:pointer}
.thumb:hover{outline:2px solid #334155}
.hist-meta{font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
.thumb-date{font-size:11px;color:#94a3b8;text-align:center;margin-top:2px}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#0b1226;border:1px solid #1f2937;font-size:11px;color:#9aa6b2}

/* Ribbons */
.mode-ribbon{position:absolute;left:8px;top:8px;z-index:5;padding:6px 10px;border-radius:10px;font-weight:600;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.is-live .mode-ribbon{background:#065f46;border:1px solid #064e3b}
.is-hist .mode-ribbon{background:#7c2d12;border:1px solid #78350f}

/* Watermark */
.watermark{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;font-size:48px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.08);text-shadow:0 0 2px rgba(0,0,0,.2)}
.is-hist .watermark{display:flex}

/* Mail */
.mail{color:inherit;text-decoration:none;cursor:pointer;font-weight:500}
.mail:hover{color:#38bdf8}

/* Loading overlay */
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.7);z-index:4;pointer-events:none}
.spinner{width:40px;height:40px;border:4px solid var(--b);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile menu */
.menu-toggle{display:none;background:var(--card);border:1px solid var(--b);border-radius:8px;padding:8px 12px;color:var(--fg);cursor:pointer;font-size:18px}
.controls.collapsed{display:none}

/* Responsive */
@media(max-width:900px){
  header{gap:.5rem;padding:8px 12px}
  .controls{margin-left:0;width:100%;flex-direction:column;align-items:flex-start}
  .menu-toggle{display:inline-block}
  .controls.collapsed{display:none}
  .controls.expanded{display:flex}
  .row{width:100%}
  input[type="number"]{width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

@media(max-width:480px){
  .hist-controls{flex-direction:column;align-items:flex-start}
  select,button,input{font-size:13px;padding:6px 10px}
}

/* Prediction panel */
.predict-box{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:12px 16px}
.predict-box p{margin:6px 0;line-height:1.5}
.predict-level{font-size:14px}