:root{
  --p-bg:#F3EFE6;
  --p-paper:#FFFFFF;
  --p-ink:#0A1A3C;
  --p-ink-2:#132a5c;
  --p-muted:#6b7280;
  --p-line:#e7e2d6;
  --p-gold:#C9A227;
  --p-gold-2:#e0bb3d;
  --p-gold-soft:#F6ECC9;
  --p-gold-ink:#7a5c17; /* gold itself is too light to read as text on gold-soft; use this instead */
  --p-success:#2f6b4f;
  --p-success-soft:#E1EDE6;
  --p-warn:#8a5a12;
  --p-warn-soft:#F3E7D2;
  --p-danger:#B4432C;
  --p-danger-soft:#F6E2DD;
  --p-info:#2b4f7c;
  --p-info-soft:#DDE6F1;
  --p-sidebar:#0A1A3C;
  --p-sidebar-line:#1c355c;
  --serif:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --sans:'Lato',sans-serif;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--p-bg);color:var(--p-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;letter-spacing:-0.005em}
a{color:inherit}
.app{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.sidebar{width:236px;flex-shrink:0;background:var(--p-sidebar);color:#E7E9EC;display:flex;flex-direction:column;padding:22px 0}
.brand{padding:0 22px 20px 22px;border-bottom:1px solid var(--p-sidebar-line);margin-bottom:16px;display:flex;align-items:center;gap:11px}
.brand .mono{width:38px;height:38px;border:1.4px solid var(--p-gold);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;color:var(--p-gold)}
.brand .word{font-family:var(--serif);font-size:15px;line-height:1.25;color:#F2EFE7}
.brand .sub{font-size:9px;color:#8892A0;letter-spacing:0.08em;text-transform:uppercase;margin-top:2px}
.nav-section{font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:#6E7889;padding:15px 22px 6px 22px}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 12px}
.nav button{display:flex;align-items:center;gap:10px;background:none;border:none;color:#C4C9D2;font-family:var(--sans);font-size:13.5px;font-weight:600;text-align:left;padding:9px 12px;border-radius:999px;cursor:pointer;transition:background .12s ease,color .12s ease,transform 140ms ease-out;width:100%}
.nav button:hover{background:#132a4d;color:#F0EDE5}
.nav button.active{background:var(--p-gold);color:#1B1607}
.nav button:active{transform:scale(0.98)}
.nav .icon{width:16px;text-align:center;opacity:.9;font-size:13.5px}

.sidebar-footer{margin-top:auto;padding:14px 22px 2px 22px;border-top:1px solid var(--p-sidebar-line);display:flex;align-items:center;gap:10px;font-size:12.5px;color:#C4C9D2}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--p-gold);display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#1B1607;flex-shrink:0}
.logout-link{font-size:11px;color:#8892A0;margin-top:2px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;background:none;border:none;font-family:var(--sans);padding:0}
.logout-link:hover{color:#C4C9D2}

/* ---------- LOGIN ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--p-sidebar);background-image:radial-gradient(circle at 15% 15%,#132a4d 0%,var(--p-sidebar) 55%);padding:24px}
.login-card{width:380px;background:var(--p-paper);border-radius:var(--r-lg);padding:34px 32px 28px 32px;box-shadow:0 18px 50px rgba(0,0,0,0.28);text-align:center}
.login-mono{width:46px;height:46px;margin:0 auto 14px auto;border:1.4px solid var(--p-gold);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;color:var(--p-gold)}
.login-brand{font-family:var(--serif);font-size:18px;color:var(--p-ink)}
.login-sub{font-size:12px;color:var(--p-muted);margin-top:4px;margin-bottom:24px}
.login-label{display:block;text-align:left;font-size:11.5px;color:var(--p-muted);margin:14px 0 6px 0}
.login-input{width:100%;padding:10px 12px;border:1px solid var(--p-line);border-radius:var(--r-sm);font-size:13.5px;font-family:var(--sans);color:var(--p-ink);background:var(--p-bg)}
.login-input:focus{outline:none;border-color:var(--p-gold);background:#fff}
.login-btn{width:100%;margin-top:20px;padding:12px;font-size:13.5px}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.login-error{display:none;margin-top:14px;padding:9px 11px;background:var(--p-danger-soft);color:var(--p-danger);border-radius:var(--r-sm);font-size:12px;text-align:left}
.login-error.show{display:block}
.login-back{display:inline-block;margin-top:22px;font-size:11.5px;color:var(--p-muted);text-decoration:none}
.login-back:hover{color:var(--p-gold)}

/* ---------- MAIN ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:15px 30px;border-bottom:1px solid var(--p-line);background:var(--p-paper)}
.search{display:flex;align-items:center;gap:8px;background:var(--p-bg);border:1px solid var(--p-line);border-radius:999px;padding:8px 14px;width:320px;color:var(--p-muted);font-size:13px}
.topbar-right{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--p-muted)}
.bell{position:relative;font-size:16px;color:var(--p-ink)}
.bell .dot{position:absolute;top:-3px;right:-5px;width:7px;height:7px;border-radius:50%;background:var(--p-danger);border:1.5px solid var(--p-paper)}
.content{padding:28px 30px 60px 30px;overflow-y:auto}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.page-head h1{font-size:2.1rem;margin:0}
.page-head .desc{color:var(--p-muted);font-size:13px;margin-top:6px}
.btn{font-family:var(--sans);font-size:13px;font-weight:700;padding:11px 20px;border-radius:999px;border:1.5px solid var(--p-ink);background:var(--p-ink);color:#fff;cursor:pointer;transition:transform 140ms ease-out,background .12s ease,opacity .12s ease}
.btn.secondary{background:transparent;color:var(--p-ink);border-color:var(--p-ink)}
.btn.secondary:hover{background:var(--p-ink);color:#fff}
.btn.gold{background:var(--p-gold);border-color:var(--p-gold);color:#1B1607}
.btn.gold:hover{background:var(--p-gold-2);border-color:var(--p-gold-2)}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* ---------- SKELETON LOADING ---------- */
@keyframes skel-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,#EBE6D8 25%,#F6F3EA 37%,#EBE6D8 63%);background-size:400% 100%;animation:skel-shimmer 1.5s ease-in-out infinite;border-radius:var(--r-sm);display:inline-block}
.skel-line{height:11px;display:block}
.skel-kpi{height:28px;width:56px;border-radius:var(--r-sm)}
.skel-chip{height:23px;width:64px;border-radius:999px}

@keyframes content-reveal{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.content-reveal{animation:content-reveal 240ms cubic-bezier(0.23,1,0.32,1)}

@media (prefers-reduced-motion: reduce){
  .skel{animation:none}
  .content-reveal{animation:none}
  .btn,.filter-chip,.nav button,.view-toggle button,.kpi{transition:none!important}
  .kpi:hover{transform:none}
}

.demo-banner{background:var(--p-sidebar);color:#E9E2CE;border-radius:var(--r-md);padding:12px 18px;font-size:12.5px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.demo-banner b{color:var(--p-gold)}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.kpi{background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--r-md);padding:19px 22px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(10,26,60,.04);transition:transform 180ms cubic-bezier(0.23,1,0.32,1),box-shadow 180ms ease-out}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,26,60,.09)}
.kpi::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--p-line)}
.kpi .num{font-family:var(--serif);font-size:2.2rem;line-height:1.15;font-weight:700}
.kpi .lbl{font-size:11px;color:var(--p-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi.warn::before{background:var(--p-warn)}
.kpi.gold::before{background:var(--p-gold)}
.kpi.ink::before{background:var(--p-ink)}
.kpi.success::before{background:var(--p-success)}

.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.panel{background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--r-md);overflow:hidden;box-shadow:0 1px 2px rgba(10,26,60,.04)}
.panel-head{padding:16px 20px;border-bottom:1.5px solid var(--p-line);display:flex;align-items:center;justify-content:space-between}
.panel-head h3{font-family:var(--serif);font-size:1.05rem;margin:0;font-weight:600}
.panel-body{padding:4px 0}
.row-item{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--p-line);font-size:13.5px;gap:10px}
.row-item:last-child{border-bottom:none}
.row-item .rl{font-weight:600}
.row-item .rsub{font-size:12px;color:var(--p-muted);margin-top:2px}

.tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.tag.danger{background:var(--p-danger-soft);color:var(--p-danger)}
.tag.warn{background:var(--p-warn-soft);color:var(--p-warn)}
.tag.success{background:var(--p-success-soft);color:var(--p-success)}
.tag.info{background:var(--p-info-soft);color:var(--p-info)}
.tag.neutral{background:#EEEBE3;color:var(--p-muted)}
.tag.gold{background:var(--p-gold-soft);color:var(--p-gold-ink)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;font-size:12px;letter-spacing:0.02em;color:var(--p-ink);font-weight:700;padding:16px 20px;border-bottom:1.5px solid var(--p-line)}
tbody td{padding:15px 20px;border-bottom:1px solid var(--p-line);vertical-align:top}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:#FAF8F2}
.client-name{font-weight:600}
.client-sub{font-size:12px;color:var(--p-muted);margin-top:2px}
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.filter-chip{font-size:12.5px;padding:9px 18px;border:1.5px solid var(--p-ink);border-radius:999px;background:transparent;color:var(--p-ink);font-weight:600;cursor:pointer;transition:transform 140ms ease-out,background .12s ease,color .12s ease,border-color .12s ease}
.filter-chip.active{background:var(--p-ink);color:#fff;border-color:var(--p-ink)}
.filter-chip:active{transform:scale(0.96)}
.view-toggle{display:flex;border-radius:999px;overflow:hidden;border:1.5px solid var(--p-gold);margin-left:auto}
.view-toggle button{border:none;background:var(--p-paper);padding:9px 18px;font-size:12.5px;font-weight:700;color:var(--p-ink);cursor:pointer;transition:transform 140ms ease-out,background .12s ease,color .12s ease}
.view-toggle button.active{background:var(--p-ink);color:#fff}
.view-toggle button:active{transform:scale(0.96)}

/* ---------- KANBAN ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kcol{background:#EFEAD9;border-radius:var(--r-md);padding:12px}
.kcol-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px 6px;font-size:12.5px;font-weight:700;color:var(--p-ink-2)}
.kcol-head .count{background:#fff;border:1px solid var(--p-line);border-radius:999px;font-size:11px;padding:1px 9px;color:var(--p-muted)}
.kcard{background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:9px;font-size:12.5px}
.kcard .kexp{font-weight:700;margin-bottom:3px}
.kcard .kclient{color:var(--p-muted);font-size:11.5px;margin-bottom:8px}
.kcard .kfoot{display:flex;justify-content:space-between;align-items:center}
.kcard .kfoot .kavatar{width:20px;height:20px;border-radius:50%;background:var(--p-sidebar);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}

/* ---------- CLIENT PROFILE ---------- */
.profile-header{background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--r-md);padding:22px 26px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:18px;box-shadow:0 1px 2px rgba(10,26,60,.04)}
.profile-title{font-size:1.4rem;margin:0 0 4px 0}
.profile-meta{font-size:12.5px;color:var(--p-muted)}
.profile-meta span{margin-right:14px}
.drive-card{border:1px dashed #C9C2AE;border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;background:#FBFAF6;margin-bottom:10px}
.drive-card:last-child{margin-bottom:0}
.drive-file{display:flex;align-items:center;gap:10px;font-size:12.5px}
.drive-icon{font-size:16px}
.drive-link{font-size:11.5px;color:var(--p-gold);font-weight:700;text-decoration:none}

/* ---------- CALENDAR ---------- */
.cal-legend{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--p-muted)}
.leg .dotc{width:9px;height:9px;border-radius:50%}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--p-line);border:1px solid var(--p-line);border-radius:var(--r-md);overflow:hidden}
.cal-dow{background:#F3F1EB;padding:10px 0;text-align:center;font-size:11px;color:var(--p-ink);font-weight:700;letter-spacing:0.04em}
.cal-cell{background:var(--p-paper);min-height:88px;padding:8px;font-size:12px;cursor:pointer}
.cal-cell:hover{background:#FAF8F2}
.cal-cell .dnum{color:var(--p-muted);font-size:11.5px;margin-bottom:4px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-cell.mute{background:#F7F5F0;color:#C9C3B5}
.cal-cell.today .dnum{background:var(--p-gold);color:#1B1607;font-weight:700}
.cal-evt{font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:6px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-more{font-size:10px;color:var(--p-muted)}

/* ---------- RAVEN / PLANTILLAS ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.doc-card{border:1px solid var(--p-line);border-radius:var(--r-md);padding:16px;display:block;text-decoration:none;color:inherit;transition:border-color .12s ease,box-shadow .12s ease}
.doc-card:hover{border-color:var(--p-gold);box-shadow:0 6px 16px rgba(10,26,60,.06)}
.doc-icon{font-size:18px;margin-bottom:8px}
.doc-name{font-size:13px;font-weight:600}
.doc-meta{font-size:11.5px;color:var(--p-muted);margin-top:3px}
.doc-cat{display:inline-block;margin-top:8px}

.view{display:none}
.view.active{display:block}
.kview{display:none}
.kview.active{display:block}

/* ---------- MODAL / FORMS ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,26,60,0.55);z-index:500;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal-card{background:var(--p-paper);border-radius:var(--r-lg);width:100%;max-width:460px;max-height:90vh;overflow-y:auto;padding:28px 28px 24px;box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.modal-card h3{font-family:var(--serif);font-size:1.3rem;margin:0 0 4px 0}
.modal-card .desc{color:var(--p-muted);font-size:12.5px;margin-bottom:18px}
.modal-close{float:right;background:none;border:none;font-size:20px;color:var(--p-muted);cursor:pointer;line-height:1}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--p-ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;border:1.5px solid var(--p-line);border-radius:var(--r-sm);font-size:13px;font-family:var(--sans);color:var(--p-ink);background:var(--p-bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--p-gold);background:#fff}
.field textarea{resize:vertical;min-height:70px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.alert-box{padding:11px 15px;border-radius:var(--r-sm);font-size:12.5px;margin-bottom:14px;line-height:1.6}
.alert-box.info{background:var(--p-gold-soft);color:#6b4f1c}
.alert-box.error{background:var(--p-danger-soft);color:var(--p-danger)}
.alert-box code{display:block;margin-top:6px;font-size:13px;font-weight:700;user-select:all}
.empty-hint{padding:26px;text-align:center;color:var(--p-muted);font-size:13px}
.kcard select.ketapa{width:100%;font-size:11px;padding:5px 8px;border:1px solid var(--p-line);border-radius:var(--r-sm);background:var(--p-paper);margin-top:6px}
.locked-nav{display:none !important}

@media(max-width:960px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr 1fr}
  .doc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .sidebar{width:72px}
  .brand .word,.brand .sub,.nav-section,.nav button .lbl{display:none}
  .nav button{justify-content:center}
  .search{width:auto;flex:1}
  .kpi-row{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
}