:root{
  --ink:#020100;
  --paper:#faf9f5;
  --paper-2:#f1efe7;
  --line:#e3e0d5;
  --amarillo:#fab714;
  --amarillo-deep:#c98f00;
  --verde:#2f7a4f;
  --verde-bg:#e7f3ec;
  --ambar:#a3690a;
  --ambar-bg:#fbeed6;
  --azul:#2d5a8c;
  --azul-bg:#e6eef7;
  --rojo:#9c3b2e;
  --rojo-bg:#f7e6e2;
  --gris:#545454;
  --gris-claro:#737373;
  --gris-bg:#eceae1;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:'Montserrat','Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--paper); color:var(--ink); }
h1,h2,h3{ font-family:'Montserrat',-apple-system,sans-serif; font-weight:700; }
.brand-logo{ display:block; height:34px; width:auto; }
a{ color:inherit; }
.app{ display:flex; min-height:100vh; }

.sidebar{ width:220px; flex-shrink:0; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; padding:24px 0; }
.brand{ padding:0 20px 22px 20px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:16px; }
.nav-item{ display:block; padding:11px 20px; cursor:pointer; font-size:14.5px; color:rgba(250,249,245,0.68); border-left:3px solid transparent; text-decoration:none; transition:background .15s; }
.nav-item:hover{ background:rgba(255,255,255,0.05); color:var(--paper); }
.nav-item.active{ background:rgba(250,183,20,0.1); border-left-color:var(--amarillo); color:var(--paper); font-weight:600; }

.main{ flex:1; padding:28px 36px; max-width:1180px; }
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.topbar h1{ font-size:22px; margin:0; }
.viewer{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--gris); }

select, input, textarea{ font-family:inherit; font-size:14px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:#fff; color:var(--ink); }
select:focus, input:focus, textarea:focus{ outline:2px solid var(--amarillo); outline-offset:1px; }
select:disabled, input:disabled{ background:var(--paper-2); color:var(--gris); }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.kpi .num{ font-family:'Montserrat'; font-size:26px; font-weight:800; }
.kpi .lbl{ font-size:12.5px; color:var(--gris); margin-top:2px; }

.panel{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:20px; }
.panel h2{ font-size:16px; margin:0 0 14px 0; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
form.inline{ display:inline; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; padding:9px 10px; color:var(--gris); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
td{ padding:10px 10px; border-bottom:1px solid var(--paper-2); vertical-align:middle; }
tr.row:hover{ background:var(--paper-2); }
tr.row td a.rowlink{ text-decoration:none; color:inherit; display:block; }

.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.b-prospecto{ background:var(--gris-bg); color:var(--gris); }
.b-tramite{ background:var(--ambar-bg); color:var(--ambar); }
.b-firmado{ background:var(--azul-bg); color:var(--azul); }
.b-activo{ background:var(--verde-bg); color:var(--verde); }
.b-cancelado{ background:var(--rojo-bg); color:var(--rojo); }
.b-vencido{ background:var(--rojo-bg); color:var(--rojo); }

.btn{ background:var(--amarillo); color:var(--ink); border:none; border-radius:6px; padding:9px 16px; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover{ background:var(--amarillo-deep); }
.btn-ghost{ background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:8px 14px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-ghost:hover{ background:var(--paper-2); }
.btn-danger{ background:none; border:1px solid var(--rojo); color:var(--rojo); border-radius:6px; padding:8px 14px; font-size:13px; cursor:pointer; }
.btn-danger:hover{ background:var(--rojo-bg); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

.com-group{ margin-bottom:22px; }
.com-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.com-head h3{ font-size:15px; margin:0; }
.com-count{ font-size:12.5px; color:var(--gris); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{ font-size:12.5px; color:var(--gris); display:block; margin-bottom:4px; font-weight:600; }
.field{ display:flex; flex-direction:column; }
.checks{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.checks label{ font-weight:400; color:var(--ink); display:flex; align-items:center; gap:6px; }

.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab{ padding:9px 14px; font-size:13.5px; cursor:pointer; color:var(--gris); border-bottom:2px solid transparent; text-decoration:none; }
.tab.active{ color:var(--ink); font-weight:700; border-bottom-color:var(--amarillo); }

.notes-list{ display:flex; flex-direction:column; gap:10px; max-height:300px; overflow-y:auto; margin-bottom:12px; }
.note{ background:var(--paper-2); border-radius:8px; padding:10px 12px; font-size:13.5px; }
.note .when{ font-size:11.5px; color:var(--gris); margin-bottom:3px; }

.empty{ text-align:center; padding:40px 20px; color:var(--gris); }
.row-actions{ display:flex; gap:10px; margin-top:20px; justify-content:space-between; align-items:center; }
.status-msg{ font-size:13px; padding:8px 12px; border-radius:6px; margin-bottom:14px; }
.status-ok{ background:var(--verde-bg); color:var(--verde); }
.status-err{ background:var(--rojo-bg); color:var(--rojo); }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--ink); }
.login-box{ background:#fff; border-radius:12px; padding:34px 32px; width:100%; max-width:360px; }
.login-box .brand{ border:none; padding:0; margin-bottom:26px; }

@media (max-width:760px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; overflow-x:auto; padding:12px; }
  .brand{ display:none; }
  .nav-item{ border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .nav-item.active{ border-left:none; border-bottom-color:var(--amarillo); }
  .main{ padding:18px; }
  .form-grid{ grid-template-columns:1fr; }
}

/* --- Panel de Tareas (Kanban) --- */
.kanban{ display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.kanban-col{ background:var(--paper-2); border-radius:10px; padding:12px; width:270px; flex-shrink:0; }
.kanban-col-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:0 2px; }
.kanban-col-head h3{ font-size:13.5px; margin:0; flex:1; }
.kanban-col-del{ background:none; border:none; color:var(--gris-claro); font-size:16px; cursor:pointer; line-height:1; padding:2px 4px; }
.kanban-col-del:hover{ color:var(--rojo); }
.kanban-drop{ min-height:60px; display:flex; flex-direction:column; gap:8px; }
.kanban-drop.drag-over{ background:rgba(250,183,20,0.12); border-radius:8px; }
.kanban-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.kanban-card:hover{ border-color:var(--amarillo-deep); }
.kanban-card.dragging{ opacity:0.4; }
.kanban-card-titulo{ font-size:13.5px; font-weight:600; margin-bottom:4px; }
.kanban-card-meta{ font-size:11.5px; color:var(--gris); }

.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(2,1,0,0.45); align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:#fff; border-radius:12px; padding:26px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; }
.modal-box h2{ font-size:17px; margin:0 0 16px 0; }