:root{
  --navy-900:#0b1220;
  --navy-800:#101a2e;
  --navy-700:#16213e;
  --navy-600:#1c2b4a;
  --cyan:#22d3ee;
  --cyan-dark:#0891b2;
  --blue:#3b82f6;
  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;
  --text-light:#e6edf7;
  --text-muted:#93a4c3;
  --card-bg:#ffffff;
  --radius:14px;
}

*{box-sizing:border-box;}

body.bg-app{
  background: radial-gradient(1200px 600px at 10% -10%, #16213e 0%, var(--navy-900) 55%) fixed;
  color: var(--text-light);
  font-family: 'Segoe UI', Roboto, Inter, Arial, sans-serif;
  min-height:100vh;
  margin:0;
  padding-bottom: 40px;
}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  background: linear-gradient(90deg, var(--navy-800), var(--navy-700));
  border-bottom: 1px solid rgba(34,211,238,0.25);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.topbar-title{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--text-light);
}
.topbar-title i{ color: var(--cyan); margin-right:8px; }
.topbar-sub{ color:var(--text-muted); font-size:.85rem; margin-left:6px; }

/* ---------- Tarjetas ---------- */
.corporate-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color:#1a2333;
}

.module-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  color: var(--text-light);
  padding: 22px;
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}
.module-card:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(34,211,238,0.08), transparent 60%);
  pointer-events:none;
}
.module-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(34,211,238,0.18);
  border-color: rgba(34,211,238,0.35);
}
.module-card .icon-wrap{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: rgba(34,211,238,0.12);
  color: var(--cyan);
  font-size:1.3rem;
  margin-bottom:14px;
}
.module-card h5{ font-weight:700; margin-bottom:6px; }
.module-card p{ color: var(--text-muted); font-size:.9rem; margin-bottom:16px; }

/* ---------- Botones ---------- */
.corporate-btn{
  background: linear-gradient(90deg, var(--cyan-dark), var(--cyan));
  border:none;
  font-weight:600;
  color:#04222c;
}
.corporate-btn:hover{ filter:brightness(1.08); color:#04222c; }

.btn-chip{
  border-radius:8px;
  font-size:.8rem;
  padding:6px 12px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.15);
  color: var(--text-light);
  background: rgba(255,255,255,0.04);
}
.btn-chip:hover{ background: rgba(34,211,238,0.15); color:#fff; }

/* ---------- Badges de estado ---------- */
.badge-estado{
  padding:4px 10px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.badge-activo{ background: rgba(34,197,94,0.15); color:#16a34a; }
.badge-inactivo{ background: rgba(239,68,68,0.15); color:#dc2626; }

/* ---------- Tabla ---------- */
.table-corporate{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
}
.table-corporate thead{
  background: var(--navy-800);
  color:#fff;
}
.table-corporate thead th{
  border:none;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color: var(--cyan);
  white-space:nowrap;
}
.table-corporate tbody tr:hover{ background: #f4faff; }
.table-corporate tbody td{ white-space:nowrap; }

/* Panel de tabla con altura fija y scroll interno (horizontal + vertical),
   para que la barra de desplazamiento quede siempre visible sin tener
   que bajar por cientos de filas. !important asegura que ninguna otra
   hoja de estilo (Bootstrap, etc.) la pise. */
.table-responsive{
  overflow:auto !important;
  max-height:72vh !important;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.table-responsive .table-corporate{ min-width:1500px !important; margin-bottom:0; box-shadow:none; }
.table-responsive thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2;
  background: var(--navy-800) !important;
}
.table-responsive::-webkit-scrollbar{ height:12px; width:12px; }
.table-responsive::-webkit-scrollbar-track{ background:#0b1220; border-radius:8px; }
.table-responsive::-webkit-scrollbar-thumb{ background: var(--cyan-dark); border-radius:8px; }
.table-responsive::-webkit-scrollbar-thumb:hover{ background: var(--cyan); }

/* ---------- KPI cards (dashboard) ---------- */
.kpi-card{
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-light);
  padding: 18px 20px;
}
.kpi-card .kpi-value{ font-size:2rem; font-weight:800; color:#fff; }
.kpi-card .kpi-label{ color: var(--text-muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; }
.kpi-card .kpi-icon{ color: var(--cyan); font-size:1.4rem; }

.chart-card{
  background:#fff;
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  color:#1a2333;
}
.chart-card h6{ font-weight:700; color:#1a2333; margin-bottom:12px; }

/* ---------- Modal historial ---------- */
.timeline{ list-style:none; padding-left:0; margin:0; }
.timeline li{
  border-left:3px solid var(--cyan);
  padding:8px 0 8px 16px;
  margin-bottom:8px;
  position:relative;
}
.timeline li:before{
  content:"";
  position:absolute; left:-7px; top:14px;
  width:11px; height:11px; border-radius:50%;
  background: var(--cyan);
}
.timeline .fecha{ font-size:.75rem; color:#6b7a99; }
.timeline .evento{ font-weight:600; color:#1a2333; }

/* Filtros estilo PowerBI */
.filter-bar{
  background:#fff;
  border-radius: var(--radius);
  padding:14px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color:#1a2333;
}