/* ====== Base UI ====== */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:#f5f8ff;color:#0f172a}
.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* Topbar / Nav */
.topbar{background:linear-gradient(90deg,#1d4ed8,#9333ea);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar nav{display:flex;gap:14px;align-items:center}
.topbar a{color:#fff;text-decoration:none;opacity:.95}
.topbar a:hover{opacity:1;text-decoration:underline}
.btn{background:#2563eb;padding:9px 13px;border-radius:10px}

/* Branding */
.logo{height:34px}
h1,h2{color:#0f172a;margin:16px 0}

/* Cards / Grid */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 6px 22px rgba(2,6,23,.07)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Forms / Tables */
label{font-size:.9rem;color:#334155}
input,select,textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;outline:none;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}

/* Badges / Utils */
.badge{padding:4px 8px;border-radius:999px;font-size:.75rem;background:#eef2ff;color:#3730a3}
.actions a{margin-right:8px;text-decoration:none}
.alert{background:#ecfeff;border:1px solid #67e8f9;color:#155e75;padding:8px 12px;border-radius:10px;margin:10px 0}
.footer{padding:16px 0;color:#64748b}
.form-actions{display:flex;gap:10px;justify-content:flex-end}
.primary{background:#1d4ed8;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer}
.secondary{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;cursor:pointer}
.small{font-size:.82rem;color:#6b7280}

/* ====== Login (card centrado con degradado) ====== */
.auth-bg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background: radial-gradient(1200px 600px at 80% 90%, #f59e0b 0%, transparent 60%),
              radial-gradient(900px 500px at 0% 0%, #2563eb 0%, transparent 60%),
              linear-gradient(135deg,#1e3a8a 0%, #3b82f6 40%, #f97316 100%);
}
.auth-wrap{padding:24px;width:100%}
.auth-card{
  width:min(520px,92vw);background:#fff;border-radius:22px;padding:28px;margin:0 auto;
  box-shadow:0 30px 60px rgba(2,6,23,.20),0 6px 18px rgba(2,6,23,.10);border:1px solid #e5e7eb;
}
.auth-logo{display:flex;justify-content:center;margin:6px 0}
.auth-logo img{height:56px}
.auth-title{font-size:28px;text-align:center;margin:6px 0 0;color:#6b21a8;font-weight:800}
.auth-subtitle{font-size:14px;text-align:center;color:#64748b;margin:4px 0 14px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.auth-tabs .tab{padding:10px 0;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc;font-weight:600;color:#334155}
.auth-tabs .tab.active{background:#e2e8f0}
.auth-tabs .tab[disabled]{opacity:.6;cursor:not-allowed}
.auth-form label{font-size:.86rem;color:#334155;margin-top:8px;display:block}
.input-ico{position:relative}
.input-ico .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.9rem;color:#64748b}
.input-ico input{width:100%;padding:12px 12px 12px 34px;border:1px solid #cbd5e1;border-radius:12px;outline:none;background:#fff}
.input-ico input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.btn-gradient{width:100%;margin-top:14px;padding:12px 16px;border:0;border-radius:12px;color:#fff;font-weight:800;letter-spacing:.3px;cursor:pointer;background:linear-gradient(90deg,#2563eb,#9333ea,#f97316);background-size:200% 100%;transition:background-position .4s ease,transform .05s ease,box-shadow .2s ease;box-shadow:0 8px 20px rgba(2,6,23,.12)}
.btn-gradient:hover{background-position:100% 0}
.btn-gradient:active{transform:scale(.99)}
.auth-alert{margin-bottom:12px}
.auth-help{font-size:.8rem;color:#6b7280;text-align:center;margin-top:10px}

/* ====== Dashboard estilo referencia ====== */
.dash-title{font-size:30px;font-weight:800;letter-spacing:.2px;margin:14px 0 18px}

.kpi4{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{
  position:relative;
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  padding:18px 16px;box-shadow:0 12px 28px rgba(2,6,23,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  border-left:3px solid transparent;
}
.kpi::before{
  content:"";
  position:absolute; left:-3px; top:10px; bottom:10px; width:3px;
  border-radius:6px;
  background: linear-gradient(#3b82f6, #60a5fa);
  opacity:.0; transform:scaleY(.6);
  transition: opacity .18s ease, transform .18s ease;
}
.kpi:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(2,6,23,.12), 0 6px 18px rgba(2,6,23,.08);
}
.kpi:hover::before{ opacity:1; transform:scaleY(1); }

.kpi-icon{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;box-shadow:0 14px 22px rgba(2,6,23,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover .kpi-icon{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 24px rgba(2,6,23,.16);
}
.kpi-blue .kpi-icon{background:#3b82f6}
.kpi-green .kpi-icon{background:#10b981}
.kpi-purple .kpi-icon{background:#8b5cf6}
.kpi-orange .kpi-icon{background:#f97316}
.kpi-name{color:#475569;font-weight:700;margin-bottom:4px}
.kpi-val{font-size:26px;font-weight:800;letter-spacing:.2px}

/* Colores de acento para el borde animado */
.kpi-green::before { background: linear-gradient(#10b981,#34d399); }
.kpi-purple::before{ background: linear-gradient(#8b5cf6,#a78bfa); }
.kpi-orange::before{ background: linear-gradient(#f97316,#fb923c); }

/* Panels */
.panel.ref-panel{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 10px 24px rgba(2,6,23,.07);
  transition: transform .18s ease, box-shadow .18s ease; will-change: transform;}
.ref-panel:hover{ transform: translateY(-4px); box-shadow:0 16px 30px rgba(2,6,23,.10),0 6px 14px rgba(2,6,23,.06); }

.ref-head{
  padding:14px 16px;border-bottom:2px solid #e5e7eb;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px
}
.ref-head.orange{border-bottom-color:#fed7aa}
.hd-ico{font-size:18px;line-height:1}
.ref-body{padding:10px 8px}
.empty{padding:14px;color:#64748b}

.ref-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #f1f5f9
}
.ref-row:last-child{border-bottom:0}
.ref-left{display:block}
.ref-title{line-height:1.2}
.ref-sub{color:#64748b;margin-top:4px}
.li-dot-ico{font-size:10px;color:#2563eb;margin-right:8px;position:relative;top:-1px}
.li-dot-ico.orange{color:#f97316}
.pill{background:#eef2ff;color:#3730a3;border-radius:999px;padding:4px 10px;font-weight:800}

/* ====== Responsive ====== */
@media (max-width: 1024px){ .kpi4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 640px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .topbar nav{gap:8px}
  .kpi4{grid-template-columns:1fr}
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .kpi, .kpi-icon, .ref-panel { transition:none !important; transform:none !important; }
}