/* ============================================================
   Gestor de Proyectos — paleta blanco / azul / gris
   ============================================================ */
:root{
  --blue-900:#0b3d91;
  --blue-700:#1d4ed8;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-100:#dbeafe;
  --blue-50:#eff6ff;
  --gray-900:#1e293b;
  --gray-700:#334155;
  --gray-600:#475569;
  --gray-500:#64748b;
  --gray-300:#cbd5e1;
  --gray-200:#e2e8f0;
  --gray-100:#f1f5f9;
  --gray-50:#f8fafc;
  --white:#ffffff;
  --red-600:#dc2626;
  --red-100:#fee2e2;
  --amber-600:#d97706;
  --amber-100:#fef3c7;
  --green-600:#16a34a;
  --green-100:#dcfce7;
  --radius:10px;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--gray-50);
  color:var(--gray-900);
}
a{color:var(--blue-600)}
.muted{color:var(--gray-500)}
h1,h2,h3,h4{margin:0 0 8px;color:var(--gray-900)}
button{font-family:inherit}

/* ---------- Auth pages ---------- */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue-900),var(--blue-600) 60%,var(--gray-100));
  padding:20px;
}
.auth-card{
  background:var(--white);border-radius:16px;padding:36px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);
}
.auth-brand{text-align:center;margin-bottom:20px}
.auth-logo-img{max-width:220px;width:100%;height:auto;margin:0 auto 14px;display:block}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--gray-700)}

input,select,textarea{
  font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--gray-300);
  border-radius:8px;background:var(--white);color:var(--gray-900);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-500);outline-offset:1px;border-color:var(--blue-500)}
textarea{resize:vertical;min-height:70px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:14px;
  cursor:pointer;transition:.15s;text-decoration:none;
}
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-200)}
.btn-secondary:hover{background:var(--gray-200)}
.btn-ghost{background:transparent;color:var(--gray-600);border-color:var(--gray-300)}
.btn-ghost:hover{background:var(--gray-100)}
.btn-danger{background:var(--red-600);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.alert{padding:10px 14px;border-radius:8px;font-size:13.5px;margin-bottom:14px}
.alert-error{background:var(--red-100);color:#991b1b}
.alert-ok{background:var(--green-100);color:#166534}
.alert-info{background:var(--blue-50);color:var(--blue-900)}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:264px;flex-shrink:0;background:var(--white);border-right:1px solid var(--gray-200);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;padding:18px 16px;font-weight:800;color:var(--blue-900);
  border-bottom:1px solid var(--gray-200);font-size:15px;
}
.sidebar-logo-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0}
.nav-group{padding:14px 10px;border-bottom:1px solid var(--gray-100)}
.nav-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gray-500);padding:4px 10px 8px;letter-spacing:.04em}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  padding:9px 10px;border-radius:8px;color:var(--gray-700);font-size:13.5px;font-weight:600;cursor:pointer;
}
.nav-item .ic{width:18px;text-align:center}
.nav-item:hover{background:var(--gray-100)}
.nav-item.active{background:var(--blue-50);color:var(--blue-700)}
#btn-back-projects{color:var(--gray-500);margin-top:6px}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid var(--gray-200)}
.user-chip{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-100);color:var(--blue-800,var(--blue-700));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--blue-700)}
.user-meta{display:flex;flex-direction:column;font-size:12.5px;line-height:1.3}
.user-meta strong{color:var(--gray-900);font-size:13px}
.user-meta span{color:var(--gray-500)}

.sidebar-toggle{
  display:none;position:fixed;top:12px;left:12px;z-index:50;background:var(--white);border:1px solid var(--gray-200);
  border-radius:8px;width:38px;height:38px;font-size:16px;box-shadow:var(--shadow);
}

.main{flex:1;min-width:0;padding:26px 30px 60px}
.view-root{max-width:1180px;margin:0 auto}
.loading{padding:60px;text-align:center;color:var(--gray-500)}

.view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.view-header h2{font-size:21px}
.view-header p{margin:2px 0 0;color:var(--gray-500);font-size:13.5px}

/* ---------- Cards / tables ---------- */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h3{font-size:15px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.project-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.project-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;
  cursor:pointer;transition:.15s;box-shadow:var(--shadow);
}
.project-card:hover{border-color:var(--blue-400,var(--blue-500));transform:translateY(-2px)}
.project-card h4{font-size:15.5px;margin-bottom:6px}
.project-card .meta-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--gray-500)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge-blue{background:var(--blue-100);color:var(--blue-700)}
.badge-gray{background:var(--gray-100);color:var(--gray-600)}
.badge-green{background:var(--green-100);color:#166534}
.badge-amber{background:var(--amber-100);color:#92400e}
.badge-red{background:var(--red-100);color:#991b1b}
.new-project-card{
  border:2px dashed var(--gray-300);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;color:var(--gray-500);cursor:pointer;min-height:130px;font-weight:600;
}
.new-project-card:hover{border-color:var(--blue-400,var(--blue-500));color:var(--blue-600)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--gray-100)}
th{color:var(--gray-500);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover{background:var(--gray-50)}
.table-wrap{overflow-x:auto}
.table-actions{display:flex;gap:6px}
.empty-row td{text-align:center;color:var(--gray-500);padding:26px}

.kpi-tile{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpi-tile .kpi-label{font-size:12px;color:var(--gray-500);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi-tile .kpi-value{font-size:26px;font-weight:800;color:var(--blue-900);margin-top:4px}
.kpi-tile .kpi-sub{font-size:12px;color:var(--gray-500);margin-top:2px}
.progress-bar{height:8px;border-radius:999px;background:var(--gray-100);overflow:hidden;margin-top:8px}
.progress-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--blue-500),var(--blue-700))}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tag-btn{padding:6px 12px;border-radius:999px;border:1px solid var(--gray-300);background:var(--white);font-size:12.5px;font-weight:600;color:var(--gray-600);cursor:pointer}
.tag-btn.active{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-100)}
.modal-title{font-size:16px}
.modal-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--gray-500)}
.modal-body{padding:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
label.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--gray-600)}

.toast{position:fixed;top:18px;right:18px;background:var(--gray-900);color:#fff;padding:10px 18px;border-radius:8px;font-size:13.5px;z-index:200;box-shadow:var(--shadow-lg)}
.toast.error{background:var(--red-600)}
.toast.ok{background:var(--green-600)}

/* ---------- Alcance ---------- */
.scope-col h4{display:flex;align-items:center;gap:8px}
.scope-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.scope-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:8px;padding:8px 10px;font-size:13px}
.scope-list li button{background:none;border:none;color:var(--gray-400);cursor:pointer;font-size:12px}
.scope-list li button:hover{color:var(--red-600)}

/* ---------- EDT jerárquica ---------- */
tr.edt-package td{background:var(--blue-50)}
tr.edt-package b{color:var(--blue-800,var(--blue-700))}
.edt-toggle{background:none;border:1px solid var(--gray-300);border-radius:5px;width:20px;height:20px;line-height:1;font-size:11px;cursor:pointer;color:var(--gray-600);margin-right:6px;vertical-align:middle}
.edt-toggle:hover{background:var(--white)}
.tag-chip{display:inline-block;background:var(--blue-100);color:var(--blue-700);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600;margin:1px 3px 1px 0}
.check-list{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto;border:1px solid var(--gray-200);border-radius:8px;padding:8px 10px;font-weight:400}
.check-list label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:400;color:var(--gray-700)}
.check-list input{width:auto}

/* ---------- Kanban ---------- */
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media(max-width:900px){.kanban-board{grid-template-columns:1fr}}
.kanban-col{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:10px;min-height:120px;transition:.15s}
.kanban-col.drag-over{background:var(--blue-50);border-color:var(--blue-400,var(--blue-500))}
.kanban-col-header{font-size:12.5px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 4px}
.kanban-col-body{display:flex;flex-direction:column;gap:8px}
.kanban-card{background:#fff;border:1px solid var(--gray-200);border-radius:8px;padding:10px;box-shadow:var(--shadow);cursor:grab}
.kanban-card.dragging{opacity:.4}

/* ---------- Gantt ---------- */
.gantt-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius);background:#fff}
.gantt-grid{display:grid;min-width:900px}
.gantt-row-header{display:flex;align-items:center;padding:0 10px;font-size:12.5px;border-bottom:1px solid var(--gray-100);border-right:1px solid var(--gray-200);background:var(--gray-50);position:sticky;left:0}
.gantt-cell{border-bottom:1px solid var(--gray-100);position:relative;height:34px}
.gantt-bar{position:absolute;top:6px;height:22px;border-radius:6px;background:var(--blue-500);color:#fff;font-size:11px;display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.gantt-bar.critical{background:var(--red-600)}
.gantt-bar.done{background:var(--green-600)}
.gantt-bar .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.35)}
.gantt-legend{display:flex;gap:16px;font-size:12px;color:var(--gray-600);margin-top:10px;flex-wrap:wrap}
.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}

/* ---------- Matrices (poder/interés, riesgos) ---------- */
.matrix-wrap{position:relative;width:100%;max-width:640px;aspect-ratio:1/1;margin:0 auto;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px}
.matrix-quad-label{position:absolute;font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.03em}
.matrix-point{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--blue-600);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:translate(-50%,50%);cursor:default;box-shadow:var(--shadow);border:2px solid #fff}
.risk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:560px;margin:0 auto}
.risk-cell{aspect-ratio:1/1;border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.risk-axis-label{font-size:11px;color:var(--gray-500);text-align:center;margin-top:8px;font-weight:600}

/* ---------- CPM network ---------- */
.cpm-legend{font-size:12px;color:var(--gray-500);margin-top:8px}
.cpm-table td.critical-row{color:var(--red-600);font-weight:700}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .sidebar{position:fixed;left:-280px;top:0;z-index:60;transition:left .2s;box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .sidebar-toggle{display:flex;align-items:center;justify-content:center}
  .main{padding:70px 16px 40px}
  .form-grid{grid-template-columns:1fr}
}