@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

/* ============ VARIABLES ============ */
:root {
  --t:#5bbfbf; --td:#3d9e9e; --tl:#e8f7f7;
  --dk:#0f172a; --dk2:#1e293b; --dk3:#334155;
  --gr:#64748b; --grl:#94a3b8;
  --bd:#e2e8f0; --bg:#f8fafc; --wh:#ffffff;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --info:#3b82f6;
  --sb-width: 220px;
  --top-h: 56px;
}

/* ============ RESET TOTAL ============ */
#psn-wrap, #psn-wrap * {
  box-sizing: border-box !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
#psn-wrap { all: initial; display: flex; }
#psn-wrap h1,#psn-wrap h2,#psn-wrap h3,#psn-wrap h4,
#psn-wrap p,#psn-wrap span,#psn-wrap div,#psn-wrap a {
  all: unset;
  font-family: 'Inter', sans-serif !important;
}

/* ============ LAYOUT ============ */
#psn-wrap {
  display: flex !important;
  min-height: 100vh !important;
  background: var(--bg) !important;
  font-size: 14px !important;
  color: var(--dk) !important;
  line-height: 1.5 !important;
  width: 100% !important;
}

/* ============ SIDEBAR ============ */
#psn-sb {
  width: var(--sb-width) !important;
  background: var(--dk) !important;
  min-height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important;
}

.psn-logo {
  padding: 22px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.psn-logo span {
  display: block !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.psn-logo span em { color: var(--t) !important; font-style: normal !important; }
.psn-logo small {
  display: block !important;
  color: rgba(255,255,255,.3) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}

.psn-nav { flex: 1 !important; padding: 12px 0 !important; overflow-y: auto !important; }
.psn-nav-sec {
  display: block !important;
  padding: 8px 18px 3px !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.25) !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
}
.psn-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 18px !important;
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-left: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.psn-nav a:hover, .psn-nav a.on {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border-left-color: var(--t) !important;
}
.psn-nav a .ni { width: 16px !important; text-align: center !important; font-size: 14px !important; flex-shrink: 0 !important; }

.psn-usr {
  padding: 14px 18px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.psn-av {
  width: 32px !important; height: 32px !important;
  background: var(--t) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.psn-un { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: #fff !important; }
.psn-ur { display: block !important; font-size: 10px !important; color: var(--grl) !important; text-transform: capitalize !important; }

/* ============ MAIN ============ */
#psn-main {
  margin-left: var(--sb-width) !important;
  flex: 1 !important;
  min-height: 100vh !important;
  min-width: 0 !important;
}

.psn-top {
  background: #fff !important;
  border-bottom: 1px solid var(--bd) !important;
  padding: 0 24px !important;
  height: var(--top-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.psn-top h1 {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Syne', sans-serif !important;
  color: var(--dk) !important;
}
.psn-top a {
  display: inline-block !important;
  font-size: 12px !important;
  color: var(--gr) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.psn-body { padding: 24px !important; }

/* ============ CARDS ============ */
.psn-card {
  display: block !important;
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}
.psn-ch {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--bd) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.psn-ct {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dk) !important;
}
.psn-cb { padding: 18px !important; }

/* ============ STATS ============ */
.psn-sg {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.psn-st {
  display: flex !important;
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid var(--bd) !important;
  padding: 18px !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.psn-si {
  width: 40px !important; height: 40px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
.psn-si.t { background: var(--tl) !important; }
.psn-si.g { background: #d1fae5 !important; }
.psn-si.o { background: #fef3c7 !important; }
.psn-si.r { background: #fee2e2 !important; }
.psn-si.b { background: #dbeafe !important; }
.psn-sv {
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--dk) !important;
  font-family: 'Syne', sans-serif !important;
  line-height: 1 !important;
}
.psn-sl {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--gr) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-top: 4px !important;
}
.psn-sc { display: block !important; font-size: 10.5px !important; font-weight: 600 !important; margin-top: 5px !important; }
.psn-sc.up { color: var(--ok) !important; }
.psn-sc.dn { color: var(--err) !important; }
.psn-sc.n  { color: var(--gr) !important; }

/* ============ GRIDS ============ */
.g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
.g3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 14px !important; }

/* ============ TABLE ============ */
.psn-tbl { width: 100% !important; border-collapse: collapse !important; }
.psn-tbl th {
  padding: 9px 12px !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--gr) !important;
  border-bottom: 1px solid var(--bd) !important;
  background: var(--bg) !important;
}
.psn-tbl td {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--bd) !important;
  font-size: 12.5px !important;
  color: var(--dk2) !important;
  vertical-align: middle !important;
}
.psn-tbl tr:last-child td { border-bottom: none !important; }
.psn-tbl tr:hover td { background: var(--bg) !important; }
.psn-tbl td.fw { font-weight: 600 !important; color: var(--dk) !important; }

/* ============ BADGES ============ */
.b {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
.b.frio     { background: #f1f5f9 !important; color: var(--gr) !important; }
.b.tibio    { background: #fef3c7 !important; color: #92400e !important; }
.b.caliente { background: #fee2e2 !important; color: #991b1b !important; }
.b.cliente, .b.activo, .b.pagada, .b.completada { background: #d1fae5 !important; color: #065f46 !important; }
.b.pausado, .b.pendiente { background: #fef3c7 !important; color: #92400e !important; }
.b.baja, .b.vencida, .b.cancelada { background: #fee2e2 !important; color: #991b1b !important; }
.b.lead, .b.en_progreso { background: #dbeafe !important; color: #1e40af !important; }
.b.ia       { background: #f0fdf4 !important; color: #166534 !important; }
.b.humano   { background: #eff6ff !important; color: #1e40af !important; }
.b.mixto    { background: #fdf4ff !important; color: #6b21a8 !important; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  transition: all .15s !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
}
.btn-p { background: var(--t) !important; color: #fff !important; }
.btn-p:hover { background: var(--td) !important; color: #fff !important; }
.btn-s { background: var(--bg) !important; color: var(--dk) !important; border: 1px solid var(--bd) !important; }
.btn-s:hover { background: var(--bd) !important; }
.btn-g { background: transparent !important; color: var(--t) !important; border: 1px solid var(--t) !important; }
.btn-g:hover { background: var(--tl) !important; color: var(--td) !important; }
.btn-d { background: var(--err) !important; color: #fff !important; }
.btn-sm { padding: 4px 9px !important; font-size: 11px !important; }

/* ============ FORMS ============ */
.psn-fg { display: block !important; margin-bottom: 14px !important; }
.psn-lbl { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: var(--dk) !important; margin-bottom: 5px !important; }
.psn-inp, .psn-sel, .psn-ta {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: 7px !important;
  padding: 8px 11px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--dk) !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color .2s !important;
}
.psn-inp:focus, .psn-sel:focus, .psn-ta:focus {
  border-color: var(--t) !important;
  box-shadow: 0 0 0 3px rgba(91,191,191,.12) !important;
}
.psn-ta { resize: vertical !important; min-height: 70px !important; }
.psn-sel {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%2364748b' d='M5 7L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  padding-right: 30px !important;
  cursor: pointer !important;
}
.fr { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

/* ============ MODAL ============ */
.psn-ov {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s !important;
}
.psn-ov.on { opacity: 1 !important; pointer-events: all !important; }
.psn-mo {
  display: block !important;
  background: #fff !important;
  border-radius: 14px !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  transform: translateY(20px) !important;
  transition: transform .2s !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}
.psn-ov.on .psn-mo { transform: translateY(0) !important; }
.psn-mh {
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--bd) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  background: #fff !important;
  z-index: 1 !important;
}
.psn-mti { display: block !important; font-size: 15px !important; font-weight: 700 !important; font-family: 'Syne', sans-serif !important; color: var(--dk) !important; }
.psn-mc-btn { display: inline-block !important; background: none !important; border: none !important; cursor: pointer !important; font-size: 18px !important; color: var(--gr) !important; line-height: 1 !important; }
.psn-mb { padding: 22px !important; }
.psn-mf { padding: 14px 22px !important; border-top: 1px solid var(--bd) !important; display: flex !important; justify-content: flex-end !important; gap: 9px !important; }

/* ============ PIPELINE ============ */
.psn-pip { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 14px !important; }
.psn-pc { display: block !important; background: var(--bg) !important; border-radius: 9px !important; padding: 13px !important; min-height: 180px !important; }
.psn-pch { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 11px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--dk) !important; }
.psn-pk { display: block !important; background: #fff !important; border-radius: 8px !important; padding: 11px !important; margin-bottom: 8px !important; border: 1px solid var(--bd) !important; cursor: pointer !important; transition: box-shadow .15s !important; }
.psn-pk:hover { box-shadow: 0 3px 10px rgba(0,0,0,.07) !important; }
.psn-pk h4 { display: block !important; font-size: 12.5px !important; font-weight: 600 !important; margin-bottom: 3px !important; color: var(--dk) !important; }
.psn-pk p { display: block !important; font-size: 11px !important; color: var(--gr) !important; margin: 0 !important; }

/* ============ TAREAS ============ */
.psn-tarea { display: flex !important; align-items: center !important; gap: 11px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--bd) !important; }
.psn-tarea:last-child { border-bottom: none !important; }
.psn-tck {
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important; border: 2px solid var(--bd) !important;
  cursor: pointer !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .2s !important;
}
.psn-tck.done { background: var(--ok) !important; border-color: var(--ok) !important; }
.psn-tck.done::after { content: '✓' !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; }
.psn-ti { flex: 1 !important; min-width: 0 !important; }
.psn-tt { display: block !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--dk) !important; }
.psn-tt.done { text-decoration: line-through !important; color: var(--gr) !important; }
.psn-tm { display: block !important; font-size: 10.5px !important; color: var(--grl) !important; margin-top: 1px !important; }

/* ============ CARGA EQUIPO ============ */
.psn-bar { height: 5px !important; background: var(--bd) !important; border-radius: 3px !important; overflow: hidden !important; margin-top: 4px !important; }
.psn-fill { height: 100% !important; border-radius: 3px !important; background: var(--t) !important; transition: width .5s !important; }
.psn-fill.alta { background: var(--warn) !important; }
.psn-fill.crit { background: var(--err) !important; }

/* ============ FINANCIERO ============ */
.psn-gan {
  display: block !important;
  background: linear-gradient(135deg, var(--dk), #1a3a3a) !important;
  border-radius: 12px !important;
  padding: 22px !important;
  color: #fff !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}
.psn-gan .v { display: block !important; font-size: 36px !important; font-weight: 800 !important; color: var(--t) !important; font-family: 'Syne', sans-serif !important; }
.psn-gan .l { display: block !important; font-size: 11px !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-top: 3px !important; }
.fin-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 9px 0 !important; border-bottom: 1px solid var(--bd) !important; font-size: 13px !important; color: var(--dk) !important; }
.fin-row:last-child { border-bottom: none !important; border-top: 2px solid var(--t) !important; font-size: 15px !important; font-weight: 700 !important; margin-top: 4px !important; }
.fin-neg { color: var(--err) !important; }
.fin-pos { color: var(--ok) !important; }
.fin-teal { color: var(--t) !important; font-weight: 700 !important; }

/* ============ LOADER / EMPTY ============ */
.psn-ld { display: flex !important; align-items: center !important; justify-content: center !important; padding: 40px !important; color: var(--gr) !important; gap: 9px !important; font-size: 13px !important; }
.psn-sp { display: block !important; width: 18px !important; height: 18px !important; border: 2px solid var(--bd) !important; border-top-color: var(--t) !important; border-radius: 50% !important; animation: psn-spin .7s linear infinite !important; flex-shrink: 0 !important; }
@keyframes psn-spin { to { transform: rotate(360deg); } }
.psn-em { display: block !important; text-align: center !important; padding: 36px 20px !important; color: var(--gr) !important; }
.psn-em-ico { display: block !important; font-size: 36px !important; margin-bottom: 10px !important; }
.psn-em h3 { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--dk2) !important; margin-bottom: 4px !important; }

/* ============ LINKS ============ */
.psn-lnk { display: inline-block !important; color: var(--t) !important; text-decoration: none !important; font-weight: 500 !important; cursor: pointer !important; }
.psn-lnk:hover { color: var(--td) !important; text-decoration: underline !important; }
a.lnk-c { display: inline-block !important; color: var(--t) !important; text-decoration: none !important; font-weight: 600 !important; cursor: pointer !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  :root { --sb-width: 50px; }
  #psn-sb .psn-nav a span:not(.ni) { display: none !important; }
  #psn-sb .psn-logo span { display: none !important; }
  #psn-sb .psn-nav-sec { display: none !important; }
  #psn-sb .psn-un, #psn-sb .psn-ur { display: none !important; }
}
@media (max-width: 768px) {
  :root { --sb-width: 0px; }
  #psn-sb { display: none !important; }
  #psn-main { margin-left: 0 !important; }
  .g2, .g3 { grid-template-columns: 1fr !important; }
  .psn-pip { grid-template-columns: 1fr 1fr !important; }
  .psn-sg { grid-template-columns: 1fr 1fr !important; }
  .fr { grid-template-columns: 1fr !important; }
}