:root{
  --cream:#FBF7F1;
  --cream-deep:#F2ECE2;
  --pink:#FEB4B1;
  --pink-deep:#F0908C;
  --mint:#9FDDB3;
  --mint-deep:#6EBE8B;
  --blue:#C4D2DC;
  --blue-deep:#9FB2C0;
  --ink:#3A332F;
  --ink-soft:#8A8078;
  --white:#FFFDFA;
  font-size:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--cream);
}
.script{font-family:'Caveat',cursive;}

/* ================= LOGIN ================= */
.login-wrap{ display:flex; min-height:100vh; }
.login-brand{
  flex:0 0 44%; position:relative; overflow:hidden;
  background-image:linear-gradient(160deg, rgba(159,221,179,0.72) 0%, rgba(254,180,177,0.72) 100%), url('../img/login-bg.jpg');
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px;
}
.login-logo{ position:relative; width:100%; max-width:320px; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.08)); }

.login-form-wrap{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--cream); padding:32px; }
.login-form{ width:100%; max-width:340px; }
.login-form h2{ font-size:1.5rem; margin:0 0 4px; }
.login-form p.sub{ color:var(--ink-soft); margin:0 0 28px; font-size:.9rem; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8rem; font-weight:500; margin-bottom:6px; color:var(--ink-soft); }
.field input{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--cream-deep);
  font-family:'Poppins'; font-size:.9rem; background:var(--white); color:var(--ink);
}
.field input:focus{ outline:none; border-color:var(--mint-deep); }
.btn-login{
  width:100%; padding:13px; border:none; border-radius:14px; background:var(--pink-deep);
  color:var(--white); font-weight:600; font-size:.92rem; cursor:pointer; margin-top:8px;
}
.btn-login:hover{ background:var(--pink); }
.olvide{ display:block; text-align:center; margin-top:16px; font-size:.82rem; color:var(--ink-soft); text-decoration:none; }
.login-error{
  background:#FCE4E3; color:#B23A34; border-radius:10px; padding:10px 14px;
  font-size:.82rem; margin-bottom:16px;
}
.password-wrap{ position:relative; }
.password-wrap input{ padding-right:44px; }
.toggle-password{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  display:flex; align-items:center; padding:4px;
}
.toggle-password:hover{ color:var(--ink); }

/* ================= SHELL (dashboard general) ================= */
.shell{ display:flex; width:100%; min-height:100vh; }
.sidebar{
  flex:0 0 232px; background:var(--white); border-right:1px solid var(--cream-deep);
  padding:24px 16px; display:flex; flex-direction:column;
}
.side-logo{ font-size:1.6rem; padding:4px 8px 20px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:var(--ink-soft); font-size:.88rem; font-weight:500; margin-bottom:2px; cursor:pointer;
  text-decoration:none;
}
.nav-item svg{ width:18px; height:18px; flex:none; }
.nav-item.active{ background:var(--pink); color:var(--ink); }
.nav-item:not(.active):hover{ background:var(--cream-deep); }
.sidebar-foot{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px; }
.avatar-sm{ width:34px; height:34px; border-radius:50%; background:var(--mint); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; color:var(--ink); }

.main{ flex:1; padding:32px 40px; }
.top-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }
.top-row h1{ font-size:1.7rem; margin:0; }
.top-row .greet-script{ font-size:2.1rem; color:var(--pink-deep); }
.top-row .date{ color:var(--ink-soft); font-size:.85rem; margin-top:2px; }

/* paneles genéricos */
.panel{ flex:1; background:var(--white); border:1px solid var(--cream-deep); border-radius:24px; padding:22px 24px; }
.panel h3{ font-size:1rem; margin:0 0 16px; }

/* actividad / historial */
.activity-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--cream-deep); }
.activity-item:last-child{ border-bottom:none; }
.dot{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex:none; }
.dot.proj{ background:var(--pink-deep); }
.dot.pago{ background:var(--mint-deep); }
.dot.contr{ background:var(--blue-deep); }
.activity-item .t{ font-size:.86rem; font-weight:500; }
.activity-item .s{ font-size:.78rem; color:var(--ink-soft); }

/* ================= CLIENTES ================= */
.clientes-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; }
.search{ flex:1; max-width:320px; padding:11px 16px; border-radius:14px; border:1.5px solid var(--blue); font-family:'Poppins'; font-size:.85rem; background:var(--white); }
.search:focus{ outline:none; border-color:var(--blue-deep); }
.btn-new{ padding:11px 20px; border-radius:14px; border:none; background:var(--pink-deep); color:var(--white); font-weight:600; font-size:.85rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap; }
.btn-new:hover{ background:var(--pink); }
.client-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.client-card{ background:var(--white); border:1px solid var(--cream-deep); border-radius:22px; padding:20px; text-decoration:none; color:var(--ink); display:block; }
.client-card:hover{ border-color:var(--blue-deep); }
.client-card .head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.client-avatar{ width:44px; height:44px; border-radius:50%; background:var(--mint); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--ink); flex:none; }
.client-card .name{ font-weight:600; font-size:.92rem; }
.badge{ display:inline-block; font-size:.7rem; padding:3px 10px; border-radius:999px; background:var(--cream-deep); color:var(--ink-soft); margin-top:2px; }
.badge.inactivo{ background:#FCE4E3; color:#B23A34; }
.client-meta{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-soft); border-top:1px solid var(--cream-deep); padding-top:12px; }
.client-meta b{ color:var(--ink); font-size:.85rem; display:block; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }

/* ================= FORMULARIOS (modal) ================= */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(58,51,47,.4);
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal-box{ background:var(--white); border-radius:24px; padding:28px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; }
.modal-box h2{ font-size:1.3rem; margin:0 0 20px; }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.btn-secondary{
  flex:1; padding:12px; border-radius:12px; border:1.5px solid var(--cream-deep); background:var(--white);
  color:var(--ink-soft); font-weight:500; font-size:.88rem; cursor:pointer; text-align:center; text-decoration:none;
}
.btn-secondary:hover{ background:var(--cream-deep); }
.btn-primary{
  flex:1; padding:12px; border-radius:12px; border:none; background:var(--pink-deep);
  color:var(--white); font-weight:600; font-size:.88rem; cursor:pointer;
}
.btn-primary:hover{ background:var(--pink); }
textarea.field-textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--cream-deep);
  font-family:'Poppins'; font-size:.9rem; background:var(--white); color:var(--ink); resize:vertical; min-height:80px;
}

/* ================= DETALLE DE CLIENTE ================= */
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); text-decoration:none; font-size:.85rem; margin-bottom:16px; }
.back-link:hover{ color:var(--ink); }
.detail-grid{ display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:flex-start; }
.info-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--cream-deep); font-size:.85rem; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color:var(--ink-soft); }
.info-row .v{ font-weight:500; text-align:right; }
.alert-ok{ background:#E4F5EA; color:#2E7D52; border-radius:10px; padding:10px 14px; font-size:.82rem; margin-bottom:16px; }
.alert-error{ background:#FCE4E3; color:#B23A34; border-radius:10px; padding:10px 14px; font-size:.82rem; margin-bottom:16px; }

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .main{ padding:24px; }
  .client-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-grid{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .login-wrap{ flex-direction:column; }
  .login-brand{ flex:0 0 220px; padding:24px; }
  .login-logo{ max-width:220px; }
  .login-form-wrap{ padding:32px 20px; }

  .shell{ flex-direction:column; }
  .sidebar{
    flex:none; width:100%; flex-direction:row; align-items:center;
    padding:12px 16px; overflow-x:auto; border-right:none; border-bottom:1px solid var(--cream-deep);
  }
  .side-logo{ padding:4px 12px 4px 0; white-space:nowrap; }
  .sidebar nav{ display:flex; gap:4px; }
  .nav-item{ white-space:nowrap; margin-bottom:0; }
  .nav-item span{ display:none; }
  .sidebar-foot{ margin-top:0; margin-left:auto; padding:4px; }

  .top-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .client-grid{ grid-template-columns:1fr; }
  .clientes-top{ flex-direction:column; align-items:stretch; }
  .search{ max-width:none; }
}

@media (max-width:480px){
  .login-brand{ flex:0 0 160px; }
  .main{ padding:16px; }
}