/* ====== Base limpia y pro ====== */
:root{
  --bg:#0b1222;
  --panel:#141b2b;
  --panel-2:#0f1626;
  --text:#ecf2ff;
  --muted:#a7b1c2;
  --azul:#00c2ff;
  --rosa:#ff5a7d;
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --borde:#22314f;
  --row:#10182a;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 15% -10%, #10243d 0%, transparent 60%),
			  linear-gradient(160deg, #0a0f1e, #111a2e 80%);
}

/* Header */
.site-header{
  text-align:center; padding:36px 16px 18px; position:relative;
  background:linear-gradient(180deg, rgba(0,194,255,.12), transparent);
}
.site-header h1{
  margin:0; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800;
  background:linear-gradient(90deg,var(--azul),var(--rosa));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(0,194,255,.35);
}

/* Layout */
.container{ max-width:1100px; margin:20px auto 80px; padding:0 16px; }

/* Filtros mínimos */
.filters{
  display:grid; grid-template-columns:1fr 1fr auto; gap:12px;
  background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:16px;
  box-shadow:var(--shadow);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:var(--muted); }
.field input[type="date"], .field select{
  appearance:none; background:var(--panel-2); color:var(--text);
  border:1px solid var(--borde); border-radius:10px; padding:10px 12px; font-size:14px;
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{
  border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,194,255,.18);
}
.btn{
  align-self:end; height:40px; padding:0 16px; border-radius:10px; border:1px solid transparent;
  font-weight:800; cursor:pointer;
}
.btn-primary{
  color:#001018; background:linear-gradient(135deg,var(--azul),#82e7ff); border-color:#49d4ff;
  box-shadow:0 10px 20px rgba(0,194,255,.25), inset 0 -1px 0 rgba(0,0,0,.2);
}
.btn-primary:active{ transform:translateY(1px) }

/* resumen */
.summary{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.chip{
  background:var(--panel-2); border:1px solid var(--borde); color:var(--text);
  padding:6px 10px; border-radius:999px; font-size:13px;
}
.chip.muted{ color:var(--muted) }

/* resultados */
.results{ display:flex; flex-direction:column; gap:14px; }
.empty{
  padding:22px; text-align:center; color:var(--muted); border:1px dashed var(--borde);
  border-radius:12px; background:rgba(255,255,255,.02);
}

/* Grupo por ejecutivo */
.exec{
  background:var(--panel); border:1px solid var(--borde); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.exec__head{
  display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  background:linear-gradient(180deg, rgba(0,194,255,.1), transparent);
}
.exec__title{ font-weight:800; letter-spacing:.2px }
.exec__meta{ color:var(--muted); font-size:13px }

/* tabla */
.table{
  width:100%; border-collapse:collapse; background:var(--row);
}
.table thead th{
  font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--borde); background:#0e1627;
}
.table tbody td{
  padding:10px 12px; border-bottom:1px solid #17223a; font-size:14px;
}
.table tbody tr:hover{ background:#0f1a30 }

/* badges de tiempo */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px;
  border:1px solid; white-space:nowrap;
}
.badge.ok{ color:#caffea; border-color:#1e3c2e; background:#0d261c; }
.badge.warn{ color:#fff1c6; border-color:#45340e; background:#2a210d; }
.badge.bad{ color:#ffd2d5; border-color:#4a2022; background:#2a0f12; }

/* error */
.error{
  margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid #5a1e22;
  background:#2a0f12; color:#ffd2d5;
}

/* loader */
.loader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(8,12,24,.68); backdrop-filter:blur(6px); z-index:9999;
}
.spinner{
  width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,.15); border-top-color:var(--azul);
  animation:spin 1s linear infinite;
}
.loader-text{ color:#bfefff; font-weight:800; letter-spacing:.4px }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* responsive */
@media (max-width:840px){
  .filters{ grid-template-columns:1fr; }
  .btn{ width:100% }
}