/* Sistema de diseño Mapplics (general/Fuse pastel) adaptado a dashboard de ops.
   Series de datos: paleta categórica validada (dataviz) — no usar para estado. */

:root {
  /* marca (navy suave) + cálidos */
  --brand-50:#eef2f7; --brand-100:#dbe3ee; --brand-200:#b8c8dc; --brand-300:#8ea7c6;
  --brand-500:#4a6a90; --brand-600:#3b5473; --brand-700:#2f4257; --brand-900:#1c2733;
  --cream-50:#faf7f0; --cream-100:#f3ecdc; --cream-200:#e8ddc4;
  --sage-50:#eef4ee; --sage-100:#d9e7da; --sage-500:#6e9173; --sage-700:#4f6b53;
  --gold-50:#fbf3e4; --gold-100:#f5e3c1; --gold-400:#d9a84a; --gold-500:#c8912f;
  --blush-50:#fbeeef; --blush-200:#f0c3c6; --blush-500:#c85a63; --blush-600:#a8434b;
  --slate-500:#64748b; --slate-600:#475569; --slate-800:#1e293b;
  /* series de datos (paleta validada, modo claro) */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --surface-1:#ffffff;
  --shadow-soft:0 1px 3px rgba(28,39,51,.06),0 1px 2px rgba(28,39,51,.04);
  --shadow-lift:0 10px 30px -10px rgba(28,39,51,.25);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--slate-800);
       background:var(--cream-50); font-size:14px; }
.font-display,h1,h2,h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; }
.hidden { display:none !important; }
.muted { color:var(--slate-500); font-weight:400; font-size:.85em; }
.w-full { width:100%; }
.only-mobile { display:none; }

/* ---------- componentes base ---------- */
.card { background:var(--surface-1); border-radius:1rem; box-shadow:var(--shadow-soft);
        border:1px solid var(--cream-200); padding:1rem 1.25rem; }
.btn-primary,.btn-outline,.btn-ghost,.btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:.5rem; padding:.5rem 1rem; font:inherit; font-weight:500;
  cursor:pointer; transition:all .15s ease; border:1px solid transparent; }
.btn-primary { background:var(--brand-500); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover { background:var(--brand-600); }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn-outline { border-color:var(--cream-200); color:var(--slate-600); background:#fff; }
.btn-outline:hover { background:var(--cream-100); }
.btn-ghost { color:var(--slate-600); }
.btn-ghost:hover { background:var(--cream-100); }
.btn-danger { background:var(--blush-500); color:#fff; }
.btn-danger:hover { background:var(--blush-600); }
.btn-danger.rearm { background:var(--sage-500); }
.input { width:100%; border-radius:.5rem; border:1px solid var(--cream-200);
         background:#fff; padding:.55rem .75rem; font:inherit; color:var(--slate-800); }
.input:focus { outline:none; box-shadow:0 0 0 2px var(--brand-300); }
.label { font-size:.7rem; font-weight:600; text-transform:uppercase;
         letter-spacing:.08em; color:var(--slate-500); }
.badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:9999px;
         font-size:.75rem; font-weight:500; padding:.15rem .6rem; }
.badge .dot { width:.5rem; height:.5rem; border-radius:50%; }
.badge-good { background:var(--sage-50); color:var(--sage-700); }
.badge-good .dot { background:var(--sage-500); }
.badge-warn { background:var(--gold-50); color:var(--gold-500); }
.badge-warn .dot { background:var(--gold-400); }
.badge-bad { background:var(--blush-50); color:var(--blush-600); }
.badge-bad .dot { background:var(--blush-500); }
.badge-neutral { background:var(--brand-50); color:var(--brand-600); }
.badge-neutral .dot { background:var(--brand-300); }

/* ---------- splash ---------- */
.splash { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:1.5rem;
          background:linear-gradient(135deg,var(--cream-50),var(--cream-100),var(--cream-200)); }
.splash.fade-out { animation:fadeOut .4s ease forwards; }
.blob { position:absolute; width:22rem; height:22rem; border-radius:50%; filter:blur(64px); }
.blob-gold { background:rgba(236,207,148,.3); top:-6rem; right:-6rem; }
.blob-brand { background:rgba(184,200,220,.3); bottom:-6rem; left:-6rem; }
.logo-mark { font-family:'Fraunces',serif; font-size:3.5rem; color:var(--brand-500);
             background:#fff; border-radius:1.5rem; width:6rem; height:6rem;
             display:flex; align-items:center; justify-content:center;
             box-shadow:var(--shadow-lift); }
.logo-mark.big { font-size:4.5rem; width:8rem; height:8rem; }
.logo-mark.small { font-size:1.4rem; width:2.5rem; height:2.5rem; border-radius:.75rem;
                   box-shadow:var(--shadow-soft); }
.splash-logo { display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:1; }
.logo-text { font-family:'Fraunces',serif; font-size:1.5rem; color:var(--brand-700); }
.logo-text span { color:var(--gold-500); }
.scale-in { animation:scaleIn .35s ease; }
.dots { display:flex; gap:.5rem; z-index:1; }
.dots span { width:.6rem; height:.6rem; border-radius:50%; background:var(--brand-400,#6786ab);
             animation:pulse 1s ease-in-out infinite; }
.dots span:nth-child(2) { background:var(--gold-400); animation-delay:.15s; }
.dots span:nth-child(3) { animation-delay:.3s; }
@keyframes pulse { 0%,100%{opacity:.3;transform:scale(.85)} 50%{opacity:1;transform:scale(1)} }
@keyframes fadeOut { to{opacity:0;visibility:hidden} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

/* ---------- login ---------- */
.login { min-height:100vh; display:flex; }
.login-brand { position:relative; overflow:hidden; width:50%; display:flex;
               align-items:center; justify-content:center;
               background:linear-gradient(135deg,var(--cream-50),var(--cream-100),var(--cream-200)); }
.login-brand-inner { z-index:1; text-align:center; display:flex; flex-direction:column;
                     align-items:center; gap:1rem; padding:2rem; }
.login-brand h1 { color:var(--brand-700); font-size:2rem; }
.login-brand p { color:var(--slate-500); line-height:1.6; }
.login-form-panel { flex:1; background:#fff; display:flex; align-items:center;
                    justify-content:center; padding:2rem; }
.login-form { width:100%; max-width:24rem; display:flex; flex-direction:column; gap:.9rem; }
.login-form h2 { font-size:1.6rem; color:var(--brand-700); }
.error-block { background:var(--blush-50); border:1px solid var(--blush-200);
               color:var(--blush-600); border-radius:.5rem; padding:.6rem .8rem;
               font-size:.85rem; animation:fadeIn .2s ease; }
.spinner { width:1rem; height:1rem; border:2px solid rgba(255,255,255,.4);
           border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ---------- shell ---------- */
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center;
          gap:1rem; padding:.6rem 1.25rem; background:rgba(255,255,255,.92);
          backdrop-filter:blur(6px); border-bottom:1px solid var(--cream-200); }
.topbar-left { display:flex; align-items:center; gap:.75rem; }
.topbar-title { display:flex; flex-direction:column; line-height:1.2; }
.topbar-title strong { font-family:'Fraunces',serif; color:var(--brand-700); }
.topbar-status { flex:1; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.topbar-actions { display:flex; gap:.5rem; }
.content { max-width:1280px; margin:0 auto; padding:1.25rem; display:flex;
           flex-direction:column; gap:1.25rem; }
.footer { text-align:center; padding-bottom:2rem; }

.kills-banner { background:var(--blush-50); border:1px solid var(--blush-200);
                border-radius:1rem; padding: .9rem 1.25rem; color:var(--blush-600);
                display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
                animation:fadeIn .2s ease; }

/* ---------- tiles ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; }
.tile { background:#fff; border:1px solid var(--cream-200); border-radius:1rem;
        box-shadow:var(--shadow-soft); padding:.75rem 1rem; display:flex;
        flex-direction:column; gap:.2rem; min-width:0; }
.tile .label { font-size:.65rem; }
.tile .value { font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums;
               color:var(--slate-800); white-space:nowrap; }
.tile .sub { font-size:.72rem; color:var(--slate-500); font-variant-numeric:tabular-nums; }
.tile.accent .value { color:var(--brand-500); }
.tile.good .value { color:var(--sage-700); }
.tile.warn .value { color:var(--gold-500); }
.tile.bad .value { color:var(--blush-600); }

.feeds-row { display:flex; flex-wrap:wrap; gap:.4rem; }

/* ---------- charts ---------- */
.charts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:1rem; }
.chart-card h3 { font-size:1rem; color:var(--brand-700); margin-bottom:.5rem; }
.chart-card svg { display:block; width:100%; height:auto; }
.chart-legend { display:flex; gap:1rem; font-size:.75rem; color:var(--slate-600);
                margin-top:.25rem; }
.chart-legend .key { display:inline-flex; align-items:center; gap:.35rem; }
.chart-legend .swatch { width:1rem; height:2px; border-radius:1px; }
.chart-tip { position:fixed; pointer-events:none; background:var(--brand-900); color:#fff;
             font-size:.72rem; border-radius:.4rem; padding:.35rem .55rem; z-index:40;
             font-variant-numeric:tabular-nums; box-shadow:var(--shadow-lift);
             white-space:nowrap; }
.chart-empty { color:var(--slate-500); font-size:.85rem; padding:2rem 0; text-align:center; }

/* ---------- tablas ---------- */
.two-col { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
     color:var(--slate-500); padding:.45rem .6rem; border-bottom:1px solid var(--cream-200); }
td { padding:.45rem .6rem; border-bottom:1px solid var(--cream-100,#f3ecdc);
     font-size:.82rem; white-space:nowrap; }
tr:last-child td { border-bottom:none; }
h3 { font-size:1rem; color:var(--brand-700); margin-bottom:.5rem; }

.phase0 { display:flex; flex-direction:column; gap:.6rem; font-size:.85rem; }
.phase0 .verdict { border-radius:.75rem; padding:.7rem .9rem; font-weight:500; }
.phase0 .verdict.pending { background:var(--gold-50); color:var(--gold-500); }
.phase0 .verdict.go { background:var(--sage-50); color:var(--sage-700); }
.phase0 .verdict.stop { background:var(--blush-50); color:var(--blush-600); }
.phase0 dl { display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; }
.phase0 dt { color:var(--slate-500); }
.phase0 dd { font-variant-numeric:tabular-nums; }

/* ---------- modal ---------- */
.modal-overlay { position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.5);
                 backdrop-filter:blur(3px); display:flex; align-items:center;
                 justify-content:center; animation:fadeIn .2s ease; }
.modal { max-width:26rem; width:calc(100% - 2rem); padding:0; overflow:hidden; }
.modal-head { background:var(--blush-500); color:#fff; padding: .8rem 1.25rem;
              font-weight:600; font-family:'Fraunces',serif; }
.modal-head.info { background:var(--brand-500); }
.modal-body { padding:1rem 1.25rem; line-height:1.5; }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; padding:0 1.25rem 1rem; }

@media (max-width:900px) {
  .login-brand { display:none; }
  .only-mobile { display:flex; margin:0 auto 0.5rem; }
  .two-col { grid-template-columns:minmax(0,1fr); }
  .topbar { flex-wrap:wrap; }
  .topbar-status { order:3; width:100%; justify-content:flex-start; }
}