@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0F1117;
  --surface:#1A1D27;
  --surface2:#22263A;
  --border:#2E3350;
  --text:#E8EAF0;
  --muted:#6B7599;
  --blue:#4D7FFF;
  --blue-lt:#1A2A5E;
  --blue-dk:#2D5AE0;
  --green:#2ECC8A;
  --green-lt:#0D3D28;
  --amber:#F0A500;
  --amber-lt:#3D2A00;
  --red:#E05555;
  --red-lt:#3D1515;
  --gray-lt:#1E2235;
  --gray-dk:#9AA3C2;
  --purple-lt:#251A3D;
  --purple-dk:#A67FFF;
  --r:4px;--rs:3px;
}

body{
  font-family:'Rajdhani',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:20px;
  letter-spacing:.3px;
}

/* ── LOGIN ── */
#loginScreen{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:url('../img/fondo2.png') center center / cover no-repeat;
  position:relative;
}
#loginScreen::before{
  content:'';position:absolute;inset:0;
  background:rgba(5,7,15,0.35);
}
.login-card{
  position:relative;z-index:1;
  background:rgba(15,17,23,0.92);
  border:1px solid var(--border);
  border-top:2px solid var(--blue);
  border-radius:var(--r);padding:2rem;width:100%;max-width:380px;
  box-shadow:0 0 40px rgba(77,127,255,0.15), 0 8px 40px rgba(0,0,0,0.6);
}
.brand{text-align:center;margin-bottom:1.8rem}
.brand-logos{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:14px}
.logo-crs{height:56px;width:auto;object-fit:contain}
.logo-sep{font-size:20px;color:var(--border);font-weight:300;line-height:1}
.logo-prosman{height:46px;width:auto;object-fit:contain}
.brand h1{font-size:22px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.brand p{font-size:16px;color:var(--muted);margin-top:4px;letter-spacing:1px;text-transform:uppercase}

.field{margin-bottom:14px}
.field label{display:block;font-size:15px;color:var(--muted);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px}
.field input{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--rs);font-size:18px;
  background:var(--surface);color:var(--text);
  outline:none;transition:border .15s;
  font-family:'Rajdhani',sans-serif;letter-spacing:.3px;
}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,127,255,0.1)}
.field input::placeholder{color:var(--muted)}

.btn-primary{
  width:100%;padding:11px;background:var(--blue);color:#fff;
  border:none;border-radius:var(--rs);font-size:18px;font-weight:700;
  cursor:pointer;text-transform:uppercase;letter-spacing:2px;
  font-family:'Rajdhani',sans-serif;transition:background .15s;
}
.btn-primary:hover{background:var(--blue-dk)}
.login-error{font-size:16px;color:var(--red);text-align:center;margin-top:8px;min-height:18px;letter-spacing:.5px}

/* ── APP ── */
#app{display:none;flex-direction:column;min-height:100vh}
.page.active{overflow-y:auto}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:10;flex-wrap:wrap;
}
.topbar-title{font-size:18px;font-weight:700;flex:1;text-transform:uppercase;letter-spacing:2px;color:var(--text)}
.tabs{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:3px}
.tab{
  padding:5px 16px;border:none;background:transparent;border-radius:2px;
  font-size:16px;font-weight:700;cursor:pointer;color:var(--muted);
  transition:all .15s;text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Rajdhani',sans-serif;
}
.tab.active{background:var(--blue);color:#fff;}
.user-info{display:flex;align-items:center;gap:6px;font-size:12px}
.user-name{font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}
.btn-sm{
  padding:5px 10px;border:1px solid var(--border);border-radius:var(--rs);
  background:transparent;font-size:15px;cursor:pointer;color:var(--muted);
  font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  transition:all .15s;
}
.btn-sm:hover{background:var(--surface2);color:var(--text);border-color:var(--blue)}

.page{display:none}
.page.active{display:block}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px 20px}
.stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
  border-left:3px solid var(--blue);
}
.stat-label{
  font-size:15px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;
}
.stat-num{font-size:34px;font-weight:700}
.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-green{color:var(--green)}.c-red{color:var(--red)}.c-purple{color:var(--purple-dk)}

/* ── TOOLBAR ── */
.toolbar{display:flex;gap:8px;padding:0 20px 12px;flex-wrap:wrap}
.search{
  flex:1;min-width:180px;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--rs);
  background:var(--surface);font-size:18px;color:var(--text);outline:none;
  font-family:'Rajdhani',sans-serif;
}
.search:focus{border-color:var(--blue)}
.search::placeholder{color:var(--muted)}
select.filter{
  padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);
  background:var(--surface);font-size:18px;color:var(--text);outline:none;
  font-family:'Rajdhani',sans-serif;
}
select.filter option{background:var(--surface);color:var(--text)}
.btn-add{
  padding:8px 16px;background:var(--blue);color:#fff;
  border:none;border-radius:var(--rs);font-size:16px;font-weight:700;
  cursor:pointer;text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Rajdhani',sans-serif;
}
.btn-add:hover{background:var(--blue-dk)}

/* ── TABLE ── */
.table-wrap{padding:0 20px 24px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:18px;min-width:1000px}
th{
  text-align:left;padding:9px 10px;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);
  border-bottom:1px solid var(--border);background:var(--surface);
}
td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
tbody tr:hover td{background:var(--surface2)}

.badge{display:inline-block;padding:3px 10px;border-radius:2px;font-size:15px;font-weight:700;white-space:nowrap;letter-spacing:.8px;text-transform:uppercase}
.b-nuevo{background:var(--amber-lt);color:var(--amber)}
.b-seguimiento{background:var(--blue-lt);color:var(--blue)}
.b-reunion{background:var(--green-lt);color:var(--green)}
.b-finalizado{background:var(--purple-lt);color:var(--purple-dk)}
.b-sinresp{background:var(--gray-lt);color:var(--gray-dk)}
.b-crs{background:var(--blue-lt);color:var(--blue)}
.b-prosman{background:var(--green-lt);color:var(--green)}
.b-admin{background:var(--purple-lt);color:var(--purple-dk)}
.b-editor{background:var(--gray-lt);color:var(--gray-dk)}
.b-activo{background:var(--green-lt);color:var(--green)}
.b-inactivo{background:var(--red-lt);color:var(--red)}

.reunion-info{font-size:15px;color:var(--green);margin-top:2px}
.ip-info{font-size:15px;color:var(--muted);margin-top:1px;font-family:'Share Tech Mono',monospace}
.btn-edit{
  padding:4px 10px;border:1px solid var(--border);border-radius:var(--rs);
  background:transparent;font-size:15px;cursor:pointer;color:var(--muted);
  font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.btn-edit:hover{background:var(--surface2);color:var(--blue);border-color:var(--blue)}
.btn-del{
  padding:4px 10px;border:1px solid var(--red-lt);border-radius:var(--rs);
  background:transparent;font-size:15px;cursor:pointer;color:var(--red);
  font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.btn-del:hover{background:var(--red-lt)}
.empty{text-align:center;padding:3rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:13px}
.section-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 10px}
.section-title{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:2px}

/* ── OVERLAY / MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center;padding:1rem}
.overlay.open{display:flex}
.modal{
  background:var(--surface);border:1px solid var(--border);
  border-top:2px solid var(--blue);
  border-radius:var(--r);padding:1.5rem;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 0 40px rgba(77,127,255,0.1),0 8px 40px rgba(0,0,0,.5);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.modal-head h2{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.btn-close{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.btn-close:hover{color:var(--text)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.span2{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:15px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.fg input,.fg select,.fg textarea{
  padding:8px 10px;font-size:18px;
  border:1px solid var(--border);border-radius:var(--rs);
  background:var(--bg);color:var(--text);outline:none;
  font-family:'Rajdhani',sans-serif;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(77,127,255,0.1)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted)}
.fg select option{background:var(--surface);color:var(--text)}
.fg textarea{resize:vertical;min-height:72px}
.fg input[readonly]{background:var(--surface2);color:var(--muted);cursor:default}
.reunion-block{display:none;grid-column:1/-1}
.reunion-block.show{display:contents}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.2rem}
.btn-cancel{
  padding:8px 18px;border:1px solid var(--border);border-radius:var(--rs);
  background:transparent;font-size:16px;cursor:pointer;color:var(--muted);
  font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;
}
.btn-cancel:hover{border-color:var(--muted);color:var(--text)}
.btn-save{
  padding:8px 18px;background:var(--blue);color:#fff;
  border:none;border-radius:var(--rs);font-size:16px;font-weight:700;cursor:pointer;
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:1px;
}
.btn-save:hover{background:var(--blue-dk)}
.save-msg{font-size:16px;text-align:center;margin-top:8px;min-height:18px;letter-spacing:.5px}
.save-msg.ok{color:var(--green)}.save-msg.err{color:var(--red)}
.info-block{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
  padding:10px 12px;font-size:16px;color:var(--muted);grid-column:1/-1;
}
.info-block span{font-weight:600;color:var(--text);font-family:'Share Tech Mono',monospace}
.hint{font-size:15px;color:var(--muted);margin-top:2px;letter-spacing:.3px}
.divider{border:none;border-top:1px solid var(--border);margin:.8rem 0;grid-column:1/-1}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:1}
}

/* ── NXG POWERED BY ── */
#loginScreen{flex-direction:column;gap:0}
.login-powered{
  position:relative;z-index:1;
  margin-top:16px;
  text-align:center;
}
.nxg-logo{
  height:64px;width:auto;object-fit:contain;
  opacity:0.85;transition:opacity .2s;
}
.nxg-logo:hover{opacity:1}

/* ── STATS PANEL ── */
.stats-panel{display:flex;flex-direction:row;gap:16px;padding:16px 20px;align-items:stretch}
.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;min-width:190px;flex-shrink:0}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;border-left:3px solid var(--border)}
.stat-card-num{font-size:30px;font-weight:700;line-height:1;margin-bottom:4px}
.stat-card-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.main-chart-wrap{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;border-left:3px solid var(--blue);display:flex;flex-direction:column}
.main-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.main-chart-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.main-chart-inner{width:100%;display:flex;align-items:center;justify-content:center;padding:8px 0}
.donut-svg-wrap{display:flex;align-items:center;gap:24px;width:100%}
.donut-legend{display:flex;flex-direction:column;gap:8px;flex:1}
.donut-legend-item{display:flex;align-items:center;gap:8px}
.donut-legend-dot{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.donut-legend-label{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex:1}
.donut-legend-val{font-size:16px;font-weight:700;color:var(--text);min-width:24px;text-align:right;display:none;}

/* ── PERIOD BUTTONS ── */
.period-btn{padding:4px 8px;border:none;background:transparent;border-radius:2px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);transition:all .15s;text-transform:uppercase;letter-spacing:.5px;font-family:'Rajdhani',sans-serif}
.period-btn.active{background:var(--blue);color:#fff}

/* ── PÁGINA GRÁFICAS ── */
.chart-page{padding:16px 20px 24px}
.chart-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:8px}
.chart-page-title{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text)}
.chart-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;border-top:2px solid var(--blue)}
.chart-card-full{grid-column:1/-1}
.chart-card-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px}
.chart-wrap{position:relative;height:200px}
.chart-wrap-tall{height:300px}

@media(max-width:768px){
  .chart-cards{grid-template-columns:1fr}
  .chart-card-full{grid-column:1}
}

/* ── EXPORT BUTTON ── */
.btn-export{
  padding:8px 16px;background:transparent;color:var(--green);
  border:1px solid var(--green);border-radius:var(--rs);
  font-size:14px;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Rajdhani',sans-serif;transition:all .15s;
  white-space:nowrap;
}
.btn-export:hover{background:var(--green);color:#0F1117}

/* ── NUEVAS FUNCIONES CRM ── */
.c-orange{color:#F06A00}
.c-purple{color:var(--purple-dk)}

/* Prioridad badges */
.p-alta{background:#3D1515;color:#E05555;border-left:3px solid #E05555}
.p-media{background:#3D2A00;color:#F0A500;border-left:3px solid #F0A500}
.p-baja{background:#0D2A0D;color:#2ECC8A;border-left:3px solid #2ECC8A}

/* Vencido highlight */
tr.vencido td{background:rgba(224,85,85,0.07)!important}
tr.vencido td:first-child{border-left:3px solid #E05555}
.badge-vencido{background:#3D1515;color:#E05555;font-size:12px;padding:2px 6px;border-radius:2px;margin-left:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

/* Responsable */
.resp-badge{font-size:14px;color:var(--blue);font-weight:600}

/* Modal tabs */
.modal-tabs{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:3px;margin:14px 0 10px}
.mtab{padding:6px 16px;border:none;background:transparent;border-radius:2px;font-size:14px;font-weight:700;cursor:pointer;color:var(--muted);font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:1px;transition:all .15s}
.mtab.active{background:var(--blue);color:#fff}

/* Historial */
.historial-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-right:4px}
.hist-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.hist-icon{width:28px;height:28px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.hist-icon.estado{background:var(--blue-lt);color:var(--blue)}
.hist-icon.nota{background:#1E2235;color:var(--muted)}
.hist-icon.reunion{background:var(--green-lt);color:var(--green)}
.hist-icon.prioridad{background:var(--amber-lt);color:var(--amber)}
.hist-icon.responsable{background:var(--purple-lt);color:var(--purple-dk)}
.hist-icon.contacto{background:#3D2A00;color:#F0A500}
.hist-icon.creacion{background:var(--green-lt);color:var(--green)}
.hist-body{flex:1;min-width:0}
.hist-desc{font-size:15px;color:var(--text);line-height:1.4}
.hist-meta{font-size:13px;color:var(--muted);margin-top:3px}

/* Auditoría table */
#tbodyAudit td{font-size:13px}
.audit-accion{font-size:13px;background:var(--blue-lt);color:var(--blue);padding:2px 8px;border-radius:2px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

@media(max-width:900px){
  .stats-panel{flex-direction:column}
  .stat-cards{grid-template-columns:repeat(3,1fr);min-width:unset;width:100%}
}