/* ===========================================================
   NANAS SEGURAS — Premium UI Overrides
   Diseño SaaS premium · sólidos · sin degradados
   Aplica encima de los <style> existentes sin romper la lógica
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

:root{
  --ns-navy:#03045E;
  --ns-navy-700:#0a0c7a;
  --ns-pink:#FFAFCC;
  --ns-pink-600:#f593b8;
  --ns-sky:#B9E4F5;
  --ns-yellow:#FFD166;
  --ns-white:#FFFFFF;
  --ns-bg:#F7F8FA;
  --ns-line:#E6E8EF;
  --ns-line-2:#EEF1F6;
  --ns-text:#111827;
  --ns-muted:#5B6478;
  --ns-success:#15803D;
  --ns-danger:#D92D20;

  /* Sombras suaves premium */
  --ns-shadow-sm: 0 2px 6px rgba(15,23,42,.06);
  --ns-shadow:    0 8px 24px rgba(15,23,42,.08);
  --ns-shadow-lg: 0 16px 40px -16px rgba(3,4,94,.22);
  --ns-shadow-xl: 0 24px 60px -20px rgba(3,4,94,.28);

  --ns-radius:14px;
  --ns-radius-lg:20px;
  --ns-radius-xl:24px;

  /* Re-mapeo de variables del tema admin existente */
  --brand-blue:var(--ns-navy);
  --brand-pink:var(--ns-pink);
  --brand-sky:var(--ns-sky);
  --brand-gold:var(--ns-yellow);
  --bg:var(--ns-bg);
  --line:var(--ns-line);
  --shadow:var(--ns-shadow);
}

/* =================== BASE =================== */
html,body{ font-family:"Poppins","Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; }
body{
  background:var(--ns-bg) !important;
  color:var(--ns-text) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
*{ -webkit-tap-highlight-color:transparent; }

/* Mata degradados de fondo del template viejo */
[style*="linear-gradient"],
[style*="radial-gradient"]{ background-image:none !important; }

/* Scroll suave, nicer scrollbars */
html{ scroll-behavior:smooth; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cfd4e0; border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:#a9b1c2; }

/* Tipografía de títulos */
h1,h2,h3,h4{ font-family:"Poppins",sans-serif; letter-spacing:-.02em; color:var(--ns-navy); }
h1{ font-weight:800; }
h2{ font-weight:800; }
h3{ font-weight:700; }
.muted, small.muted{ color:var(--ns-muted) !important; }

/* Animación global */
@keyframes nsFadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes nsFadeIn{ from{opacity:0;} to{opacity:1;} }
.ns-fade-up,.card,.stat,.lead-card,.kanban-col,.choice-card,.form-box,.hero,.box{ animation:nsFadeUp .32s ease-out both; }

/* =================== BOTONES =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px;
  border-radius:12px;
  background:var(--ns-navy) !important;
  color:#fff !important;
  border:1px solid var(--ns-navy) !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  box-shadow:var(--ns-shadow-sm);
  transition:transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--ns-shadow); background:var(--ns-navy-700) !important; }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid rgba(255,175,204,.55); outline-offset:2px; }

.btn2, .btn.btn2{
  background:#fff !important;
  color:var(--ns-navy) !important;
  border:1px solid var(--ns-line) !important;
}
.btn2:hover{ background:var(--ns-bg) !important; border-color:#cfd4e0 !important; }

.btn-gold, .btn.btn-gold{
  background:var(--ns-yellow) !important;
  border-color:var(--ns-yellow) !important;
  color:var(--ns-navy) !important;
}
.btn-gold:hover{ filter:brightness(.96); }

.btn-pink{
  background:var(--ns-pink) !important;
  border-color:var(--ns-pink) !important;
  color:var(--ns-navy) !important;
}
.btn-pink:hover{ background:var(--ns-pink-600) !important; }

/* Botón verde antiguo del login admin → navy elegante */
button.btn[style*="#20c96b"], .btn[style*="#20c96b"]{ background:var(--ns-navy) !important; border-color:var(--ns-navy) !important; }

/* Botones primary del front */
.btn-primary{
  background:var(--ns-navy) !important; color:#fff !important; border:1px solid var(--ns-navy) !important;
  border-radius:999px !important; padding:13px 22px !important; font-weight:700 !important;
  box-shadow:var(--ns-shadow-sm);
}
.btn-primary:hover{ background:var(--ns-navy-700) !important; }
.btn-secondary{
  background:var(--ns-pink) !important; color:var(--ns-navy) !important; border:1px solid var(--ns-pink) !important;
  border-radius:999px !important; padding:13px 22px !important; font-weight:700 !important;
}
.btn-secondary:hover{ background:var(--ns-pink-600) !important; }

/* =================== INPUTS / FORMS =================== */
input,select,textarea{
  font-family:inherit !important;
  border:1px solid var(--ns-line) !important;
  background:#fff !important;
  color:var(--ns-text) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--ns-navy) !important;
  box-shadow:0 0 0 4px rgba(255,175,204,.35) !important;
}
label{ color:var(--ns-navy) !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.01em; }

.form-box, .login-card, .box{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:var(--ns-radius-xl) !important;
  box-shadow:var(--ns-shadow) !important;
  padding:28px !important;
}
.form-title h1{ font-size:30px; }
.form-title p{ color:var(--ns-muted); }

/* =================== CARDS / HERO / STATS =================== */
.card{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:var(--ns-radius-lg) !important;
  box-shadow:var(--ns-shadow) !important;
  padding:18px !important;
  transition:transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--ns-shadow-lg); }

.hero{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:var(--ns-radius-xl) !important;
  box-shadow:var(--ns-shadow) !important;
  padding:24px !important;
}
.hero h2{ color:var(--ns-navy) !important; font-weight:800; letter-spacing:-.02em; }

.stats{ gap:14px !important; }
.stat{
  position:relative;
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:var(--ns-radius-lg) !important;
  padding:18px !important;
  box-shadow:var(--ns-shadow-sm) !important;
  transition:transform .2s ease, box-shadow .22s ease, border-color .2s ease;
  overflow:hidden;
}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ns-pink);
}
.stat:nth-child(2)::before{ background:var(--ns-sky); }
.stat:nth-child(3)::before{ background:var(--ns-yellow); }
.stat:nth-child(4)::before{ background:var(--ns-navy); }
.stat:nth-child(5)::before{ background:var(--ns-pink); }
.stat:nth-child(6)::before{ background:var(--ns-sky); }
.stat:hover{ transform:translateY(-2px); box-shadow:var(--ns-shadow); border-color:#dfe3ec; }
.stat p{ color:var(--ns-muted) !important; font-weight:700 !important; font-size:11px !important; }
.stat h3{ color:var(--ns-navy) !important; font-weight:800 !important; font-size:28px !important; line-height:1.1; }
.stat small{ color:var(--ns-muted) !important; }

/* =================== SIDEBAR / TOPBAR =================== */
.sidebar{
  background:#fff !important;
  border-right:1px solid var(--ns-line) !important;
  box-shadow:1px 0 0 rgba(15,23,42,.02);
}
.brand strong{ color:var(--ns-navy) !important; letter-spacing:-.02em; }
.brand small{ color:var(--ns-muted) !important; }
.brand img{
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:var(--ns-shadow-sm);
}
.adminbox{
  background:#FAFBFD !important;
  border:1px solid var(--ns-line) !important;
  border-radius:16px !important;
}
.avatar{
  background:var(--ns-pink) !important;
  color:var(--ns-navy) !important;
  border-radius:14px !important;
  box-shadow:var(--ns-shadow-sm);
}
.menu-title{ color:#94A1B5 !important; font-weight:800 !important; font-size:11px !important; }
.menu a{
  display:flex; align-items:center; gap:11px;
  margin:4px 12px !important;
  padding:11px 13px !important;
  border-radius:12px !important;
  color:#1f2a3d !important;
  font-weight:600 !important;
  transition:background .18s ease, color .18s ease, transform .15s ease;
}
.menu a:hover{ background:#F4F6FB !important; color:var(--ns-navy) !important; transform:translateX(2px); }
.menu a.active{
  background:var(--ns-navy) !important;
  color:#fff !important;
  box-shadow:var(--ns-shadow-sm);
}
.menu a.active .icon, .menu a.active svg{ color:#fff !important; fill:#fff !important; }

.topbar{
  background:#fff !important;
  border-bottom:1px solid var(--ns-line) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  height:76px !important;
}
.topbar h1{ color:var(--ns-navy) !important; font-weight:700 !important; }

/* =================== KANBAN PREMIUM =================== */
.kanban{ gap:16px !important; }
.kanban-col{
  background:#FBFCFE !important;
  border:1px solid var(--ns-line) !important;
  border-radius:20px !important;
  padding:12px !important;
  box-shadow:var(--ns-shadow-sm);
}
.kanban-head{
  position:relative;
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:14px !important;
  padding:11px 12px !important;
  box-shadow:var(--ns-shadow-sm);
  overflow:hidden;
}
.kanban-head::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--ns-pink);
}
.kanban-head.stage-pink::before{ background:var(--ns-pink); }
.kanban-head.stage-sky::before{ background:var(--ns-sky); }
.kanban-head.stage-blue::before{ background:var(--ns-navy); }
.kanban-head.stage-gold::before{ background:var(--ns-yellow); }
.kanban-head.stage-green::before{ background:#22c55e; }
.kanban-head.stage-red::before{ background:#ef4444; }
.kanban-head.stage-gray::before{ background:#94a3b8; }
.kanban-head b{ color:var(--ns-navy) !important; text-transform:uppercase; letter-spacing:.06em; font-size:12px !important; }
.count{
  background:var(--ns-navy) !important; color:#fff !important;
  border:none !important; padding:3px 9px !important; font-weight:700 !important;
}

.lead-card{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:16px !important;
  padding:14px !important;
  box-shadow:0 6px 16px -10px rgba(3,4,94,.18) !important;
  transition:transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}
.lead-card:hover{
  transform:translateY(-3px);
  border-color:var(--ns-pink) !important;
  box-shadow:0 18px 40px -18px rgba(3,4,94,.28) !important;
}
.lead-name{ color:var(--ns-navy) !important; font-weight:700 !important; }
.lead-sub{ color:var(--ns-muted) !important; }
.meta{ color:var(--ns-muted) !important; }
.card-actions .btn{ padding:7px 11px !important; font-size:12px !important; border-radius:10px !important; }

/* Tags / stages — bordes redondeados premium */
.stage,.tag{ border-radius:999px !important; font-weight:700 !important; }
.tag-pink,.stage-pink{ background:#FFE4EE !important; color:#9D174D !important; }
.tag-sky,.stage-sky{ background:#DFF1FB !important; color:#036783 !important; }
.tag-blue,.stage-blue{ background:#E4E8FF !important; color:#1E256D !important; }
.tag-gold,.stage-gold{ background:#FFF1C2 !important; color:#92400E !important; }
.tag-green,.stage-green{ background:#DCFCE7 !important; color:#166534 !important; }
.tag-red,.stage-red{ background:#FEE2E2 !important; color:#991B1B !important; }
.tag-gray,.stage-gray{ background:#F1F4FA !important; color:#475569 !important; }

/* =================== TABLAS =================== */
.table-wrap{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:18px !important;
  box-shadow:var(--ns-shadow) !important;
  overflow:hidden;
}
table th{
  background:#FAFBFD !important;
  color:#5B6478 !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  padding:14px 16px !important;
}
table td{
  padding:14px 16px !important;
  border-bottom:1px solid var(--ns-line-2) !important;
  font-size:14px !important;
  color:#1f2a3d !important;
}
table tbody tr{ transition:background .15s ease; }
table tbody tr:hover{ background:#FAFBFD !important; }

/* =================== MODALES =================== */
.ns-modal{ background:rgba(3,4,94,.55) !important; backdrop-filter:blur(4px); animation:nsFadeIn .2s ease both; }
.ns-modal-box{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:24px !important;
  box-shadow:var(--ns-shadow-xl) !important;
  animation:nsFadeUp .25s ease-out both;
}
.ns-modal-head h3{ color:var(--ns-navy) !important; font-weight:800; }
.ns-modal-close{
  background:#F4F6FB !important;
  border:1px solid var(--ns-line) !important;
  color:var(--ns-navy) !important;
}

/* =================== HEADER / FOOTER FRONT =================== */
.header{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ns-line);
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.footer{ background:#0a0a3a !important; color:#cfd6f5 !important; border-top:0 !important; }

/* Choice cards de /registro */
.choice-card{
  background:#fff !important;
  border:1px solid var(--ns-line) !important;
  border-radius:var(--ns-radius-xl) !important;
  box-shadow:var(--ns-shadow) !important;
  padding:28px !important;
  transition:transform .22s ease, box-shadow .25s ease, border-color .2s ease;
}
.choice-card:hover{
  transform:translateY(-4px);
  border-color:var(--ns-pink) !important;
  box-shadow:var(--ns-shadow-lg) !important;
}
.choice-icon{
  border-radius:18px !important;
  background:var(--ns-sky) !important;
  color:var(--ns-navy) !important;
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--ns-shadow-sm);
}
.choice-icon.pink{ background:var(--ns-pink) !important; }

/* =================== UTILIDADES =================== */
.ns-shadow{ box-shadow:var(--ns-shadow) !important; }
.ns-shadow-lg{ box-shadow:var(--ns-shadow-lg) !important; }
.ns-rounded{ border-radius:var(--ns-radius-lg) !important; }
.ns-hover-lift{ transition:transform .2s ease, box-shadow .22s ease; }
.ns-hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--ns-shadow-lg); }

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  .sidebar{ position:relative; width:100% !important; height:auto !important; box-shadow:none; }
  .layout{ display:block; }
  .main{ margin-left:0 !important; width:100% !important; }
  .stats{ grid-template-columns:repeat(2,1fr) !important; }
  .topbar{ padding:0 16px !important; height:64px !important; }
  .topbar h1{ font-size:18px !important; }
  .content{ padding:16px !important; }
  .menu a{ padding:13px !important; font-size:15px; }
}
@media (max-width:600px){
  .stats{ grid-template-columns:1fr !important; }
  .form-box, .login-card, .box, .card, .hero, .choice-card{ padding:18px !important; border-radius:18px !important; }
  .form-title h1{ font-size:24px !important; }
  .kanban-col{ width:86vw !important; min-width:86vw !important; }
  .btn, .btn-primary, .btn-secondary{ width:100%; }
  .top-actions{ gap:6px !important; }
  .theme-toggle button{ padding:8px 9px !important; font-size:12px !important; }
}

/* Dark mode — armoniza con la paleta navy */
body.dark{
  --bg:#0B1020; --card:#111933; --text:#E6EAF7; --muted:#94A3B8; --line:#1E2A48; --soft:#172033;
}
body.dark .sidebar{ background:#0B1020 !important; border-color:#1E2A48 !important; }
body.dark .topbar, body.dark .card, body.dark .stat, body.dark .form-box, body.dark .login-card,
body.dark .hero, body.dark .lead-card, body.dark .kanban-head, body.dark .table-wrap, body.dark .ns-modal-box{
  background:#111933 !important; border-color:#1E2A48 !important; color:#E6EAF7 !important;
}
body.dark .menu a{ color:#cfd6f5 !important; }
body.dark .menu a:hover{ background:#172033 !important; color:#fff !important; }
body.dark .menu a.active{ background:var(--ns-navy) !important; color:#fff !important; }
body.dark input, body.dark select, body.dark textarea{ background:#0B1020 !important; color:#E6EAF7 !important; border-color:#1E2A48 !important; }
body.dark table th{ background:#0B1020 !important; color:#94A3B8 !important; }
body.dark table td{ color:#E6EAF7 !important; border-color:#1E2A48 !important; }
body.dark .stat h3, body.dark .topbar h1, body.dark .hero h2, body.dark .lead-name, body.dark .ns-modal-head h3{ color:#fff !important; }