/* ============================================================
   CID & ENGEL STUDIO — Stylesheet v2
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:    #071A35;
  --navy2:   #0D2B5C;
  --navy3:   #1A4B8C;
  --blue:    #3D7ECC;
  --blue2:   #6BA8E8;
  --bluepale:#D6E8F8;
  --bg:      #F0F4FB;
  --card:    #FFFFFF;
  --border:  #E2EAF4;
  --t1:      #071A35;
  --t2:      #4A5568;
  --t3:      #8A9BB5;
  --green:   #10B981;
  --yellow:  #F59E0B;
  --red:     #EF4444;
  --purple:  #8B5CF6;
  --orange:  #F97316;
  --sw:      260px;
  --r:       14px;
  --sh:      0 2px 12px rgba(7,26,53,.08);
  --sd:      0 8px 32px rgba(7,26,53,.18);
}
html,body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--t1);font-size:14px;line-height:1.6}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

/* ── LAYOUT ── */
.app-layout{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:var(--sw);background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);
  position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100}
.sb-brand{padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sb-mono{width:32px;height:32px;background:linear-gradient(135deg,var(--blue),var(--blue2));border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;
  margin-bottom:7px;box-shadow:0 4px 16px rgba(61,126,204,.35);letter-spacing:-1px}
.sb-name{font-size:13px;font-weight:700;color:#fff;line-height:1.15}
.sb-tag{font-size:10px;color:rgba(255,255,255,.35);margin-top:1px}
.sb-nav{flex:1;padding:8px 10px;overflow-y:auto;overflow-x:hidden;min-height:0}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.nav-label{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:0 10px;margin:9px 0 3px}
.nav-label:first-child{margin-top:1px}
.nav-link{display:flex;align-items:center;gap:9px;padding:5.5px 10px;border-radius:8px;
  color:rgba(255,255,255,.62);text-decoration:none;font-size:12.5px;font-weight:500;
  transition:background .15s,color .15s;margin-bottom:1px}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link.active{background:linear-gradient(135deg,rgba(61,126,204,.4),rgba(61,126,204,.14));
  color:#fff;box-shadow:inset 3px 0 0 var(--blue2)}
.nav-icon{font-size:13px;flex-shrink:0;width:20px;height:20px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.nav-link.active .nav-icon{background:rgba(255,255,255,.16)}
.sb-foot{padding:9px 10px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.user-box{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;background:rgba(255,255,255,.06)}
.user-av{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;color:#fff}
.user-role{font-size:11px;color:rgba(255,255,255,.38)}
.btn-logout{margin-left:auto;padding:6px 10px;background:rgba(239,68,68,.15);border:none;
  border-radius:8px;color:#FCA5A5;font-size:11px;cursor:pointer;font-family:inherit;
  font-weight:500;transition:background .2s;flex-shrink:0}
.btn-logout:hover{background:rgba(239,68,68,.3)}

/* ── MAIN ── */
.main-content{margin-left:var(--sw);flex:1;min-height:100vh}
.top-bar{background:var(--card);border-bottom:1px solid var(--border);padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.top-bar-title{font-size:17px;font-weight:700}
.top-bar-meta{font-size:12px;color:var(--t3);margin-top:2px}
.page-body{padding:24px 28px}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-bottom:24px}
.kpi-card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--sh);
  border:1px solid var(--border);position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi-green::before{background:var(--green)}.kpi-yellow::before{background:var(--yellow)}
.kpi-blue::before{background:var(--blue)}.kpi-purple::before{background:var(--purple)}
.kpi-red::before{background:var(--red)}.kpi-orange::before{background:var(--orange)}
.kpi-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:19px;margin-bottom:14px}
.kpi-green .kpi-icon{background:#DCFCE7}.kpi-yellow .kpi-icon{background:#FEF9C3}
.kpi-blue .kpi-icon{background:var(--bluepale)}.kpi-purple .kpi-icon{background:#EDE9FE}
.kpi-red .kpi-icon{background:#FEE2E2}.kpi-orange .kpi-icon{background:#FFEDD5}
.kpi-value{font-size:26px;font-weight:700;line-height:1}
.kpi-label{font-size:12px;color:var(--t3);margin-top:5px;font-weight:500}
.kpi-sub{font-size:12px;color:var(--t2);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

/* ── SECTION CARD ── */
.section-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  border:1px solid var(--border);margin-bottom:22px;overflow:hidden}
.section-header{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px}
.section-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600}
.badge-green{background:#DCFCE7;color:#16A34A}.badge-yellow{background:#FEF9C3;color:#B45309}
.badge-blue{background:var(--bluepale);color:var(--navy2)}.badge-red{background:#FEE2E2;color:#B91C1C}
.badge-purple{background:#EDE9FE;color:#7C3AED}.badge-gray{background:var(--border);color:var(--t2)}
.badge-orange{background:#FFEDD5;color:#C2410C}

/* ── TABLE ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--t3);background:#F8FAFD;border-bottom:1px solid var(--border)}
tbody td{padding:13px 14px;border-bottom:1px solid var(--border);color:var(--t2);
  font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#F8FAFD}
.td-name{font-weight:600;color:var(--t1)}
.td-sub{font-size:12px;color:var(--t3);margin-top:1px}

/* ── PROGRESS ── */
.prog-wrap{background:var(--border);border-radius:99px;height:5px;min-width:70px}
.prog-fill{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue2))}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;
  border:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--navy3)}
.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:#059669}
.btn-warning{background:var(--yellow);color:#fff}.btn-warning:hover{background:#D97706}
.btn-outline{background:transparent;color:var(--t2);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-danger{background:transparent;color:var(--red);border:1.5px solid #FECACA}
.btn-danger:hover{background:#FEE2E2}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:7px}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:6px}
.btn-group{display:flex;gap:6px;align-items:center}

/* ── PAYMENT STATUS CHIPS ── */
.pay-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:99px;font-size:11px;font-weight:600}
.pay-pending{background:#FEF9C3;color:#B45309}
.pay-done{background:#DCFCE7;color:#16A34A}
.pay-none{background:var(--border);color:var(--t3)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(7,26,53,.5);display:flex;
  align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(4px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:18px;width:100%;max-width:540px;margin:20px;
  box-shadow:var(--sd);transform:translateY(14px);transition:transform .2s;
  max-height:calc(100vh - 80px);display:flex;flex-direction:column}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{padding:22px 26px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:16px;font-weight:700}
.modal-close{width:30px;height:30px;border-radius:8px;border:none;background:var(--bg);
  color:var(--t2);font-size:16px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s}
.modal-close:hover{background:var(--border)}
.modal-body{padding:22px 26px;overflow-y:auto;flex:1}
.modal-footer{padding:14px 26px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}

/* ── CONFIRM MODAL (mark payment) ── */
.confirm-box{background:var(--bg);border-radius:12px;padding:18px;margin-bottom:16px;
  border:1px solid var(--border)}
.confirm-box .cb-label{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);margin-bottom:4px}
.confirm-box .cb-value{font-size:16px;font-weight:700;color:var(--t1)}
.confirm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.c1{grid-template-columns:1fr}
.form-row.c3{grid-template-columns:1fr 1fr 1fr}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--t2);margin-bottom:5px}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);
  border-radius:9px;font-family:inherit;font-size:14px;color:var(--t1);outline:none;
  transition:border .18s;background:#fff}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(61,126,204,.1)}
.form-textarea{min-height:70px;resize:vertical}
.form-hint{font-size:11px;color:var(--t3);margin-top:4px}

/* ── TOAST ── */
.toast-wrap{position:fixed;top:22px;right:22px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:13px 18px;border-radius:12px;background:var(--navy);color:#fff;font-size:13px;
  font-weight:500;box-shadow:var(--sd);display:flex;align-items:center;gap:8px;
  animation:sIn .22s ease;max-width:310px}
.toast.success{background:#065F46}.toast.error{background:#991B1B}
@keyframes sIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ── FILTER TABS ── */
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ftab{padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);background:transparent;
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--t2);transition:all .15s}
.ftab:hover{border-color:var(--blue);color:var(--blue)}
.ftab.active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── UTILS ── */
.text-green{color:var(--green)}.text-yellow{color:var(--yellow)}.text-red{color:var(--red)}
.text-blue{color:var(--blue)}.text-muted{color:var(--t3)}.text-sec{color:var(--t2)}
.fw6{font-weight:600}.fw7{font-weight:700}.tr{text-align:right}
.empty-state{text-align:center;padding:44px 20px;color:var(--t3)}
.empty-state .ei{font-size:38px;margin-bottom:10px}.empty-state p{font-size:14px}
.divider{height:1px;background:var(--border);margin:16px 0}
.info-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;
  background:var(--bluepale);color:var(--navy2);padding:4px 10px;border-radius:8px;font-weight:500}

/* ── PERIODO BADGE ── */
.periodo-chip{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600}
.periodo-mensual{background:#DCFCE7;color:#166534}
.periodo-bimestral{background:var(--bluepale);color:var(--navy2)}
.periodo-trimestral{background:#EDE9FE;color:#6D28D9}
.periodo-semestral{background:#FFEDD5;color:#C2410C}
.periodo-anual{background:#FEF9C3;color:#92400E}

/* ── KANBAN (Tareas) ── */
.kanban-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px}
.kanban-col{background:#F8FAFD;border-radius:12px;border:1px solid var(--border);min-height:200px;display:flex;flex-direction:column}
.kanban-col-head{padding:12px 14px;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border)}
.kanban-count{background:var(--border);color:var(--t2);font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px}
.kanban-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px}
.kanban-body.drag-over{background:var(--bluepale)}
.kcard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 12px;cursor:grab;box-shadow:var(--sh)}
.kcard:active{cursor:grabbing}
.kcard-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px}
.kcard-meta{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kcard-actions{display:flex;gap:4px;margin-top:8px}

/* ── PERSONAL / MI ESPACIO ── */
.personal-tabs{display:flex;gap:6px;margin-bottom:18px}
.balance-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);border-radius:16px;
  padding:26px 28px;color:#fff;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.balance-hero .bh-label{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:4px}
.balance-hero .bh-value{font-size:32px;font-weight:700}
.bh-sub{display:flex;gap:22px;flex-wrap:wrap}
.bh-sub div{text-align:right}
.bh-sub .n{font-size:16px;font-weight:700}
.bh-sub .l{font-size:11px;color:rgba(255,255,255,.5)}

/* ── SUELDOS: resaltado por persona ── */
.persona-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:700}
.persona-a{background:#DBEAFE;color:#1D4ED8}
.persona-s{background:#FCE7F3;color:#BE185D}
.sueldo-row{background:#FAFBFF}

/* ── DESCUENTO TIPO TOGGLE ── */
.desc-toggle{display:flex;gap:6px;margin-bottom:10px}
.desc-toggle button{flex:1}

/* ── PDF PRINT VIEW ── */
.pdf-page{max-width:800px;margin:26px auto;background:#fff;padding:50px 56px;box-shadow:var(--sd);border-radius:6px}
.pdf-toolbar{max-width:800px;margin:0 auto;padding:0 0 14px;display:flex;justify-content:flex-end;gap:10px}
.pdf-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--navy);padding-bottom:18px;margin-bottom:24px}
.pdf-brand{font-size:20px;font-weight:800;color:var(--navy)}
.pdf-brand small{display:block;font-size:11px;font-weight:500;color:var(--t3);margin-top:2px}
.pdf-folio{text-align:right;font-size:13px;color:var(--t2)}
.pdf-folio b{font-size:16px;color:var(--navy);display:block}
.pdf-meta{display:flex;justify-content:space-between;margin-bottom:22px;font-size:13px;gap:20px}
.pdf-meta .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:3px}
.pdf-table{width:100%;border-collapse:collapse;margin-bottom:18px}
.pdf-table th{background:var(--navy);color:#fff;padding:9px 12px;font-size:11px;text-align:left}
.pdf-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
.pdf-totals{margin-left:auto;width:280px}
.pdf-totals div{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.pdf-totals .tot{font-size:17px;font-weight:800;border-top:2px solid var(--navy);padding-top:8px;margin-top:4px;color:var(--navy)}
.pdf-box{background:#F8FAFD;border-radius:8px;padding:14px 16px;margin-top:16px;font-size:12.5px;color:var(--t2)}
.pdf-foot{margin-top:34px;text-align:center;font-size:11px;color:var(--t3)}
@media print{
  .no-print{display:none!important}
  .pdf-page{box-shadow:none;margin:0;padding:0;max-width:none}
  body{background:#fff}
}

/* ── LOGO ── */
.sb-logo-img{width:32px;height:32px;border-radius:9px;object-fit:cover;margin-bottom:7px;box-shadow:0 4px 16px rgba(61,126,204,.25)}
.pdf-logo-img{height:44px;object-fit:contain;margin-bottom:6px}
.login-logo-img{width:72px;height:72px;border-radius:18px;object-fit:cover;box-shadow:0 8px 24px rgba(61,126,204,.4)}

/* ── CONTADOR DE HORAS ── */
.clock-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);border-radius:16px;padding:30px 32px;color:#fff;margin-bottom:22px}
.clock-time{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
.clock-time.running{color:#6EE7B7}
.clock-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.clock-form input,.clock-form select{flex:1;min-width:180px}
.day-ruler{position:relative;height:28px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:18px;overflow:hidden}
.day-block{position:absolute;top:0;bottom:0;background:var(--blue2);border-radius:3px}
.day-block.running{background:#EF4444}
.day-marks{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.4);margin-top:4px}
.week-strip{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.week-card{flex:1;min-width:130px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.week-card .wn{font-size:20px;font-weight:800}
.week-card .wl{font-size:11px;color:var(--t3);margin-top:2px}

/* ── PAGE TABS (secciones unificadas del sidebar) ── */
.page-tabs{display:flex;gap:4px;padding:14px 24px 0;background:#fff;border-bottom:1px solid var(--border)}
.page-tab{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px 9px 0 0;
  font-size:13px;font-weight:600;color:var(--t3);text-decoration:none;border:1px solid transparent;
  border-bottom:none;transition:all .15s;position:relative;top:1px}
.page-tab:hover{color:var(--t1);background:#F8FAFD}
.page-tab.active{color:var(--blue);background:#fff;border-color:var(--border);border-bottom:1px solid #fff}
.page-tab .nt-emoji{font-size:14px}