:root{
  --bg:#f7f9fc; --card:#fff; --text:#111827; --muted:#6b7280;
  --line:#e5e7eb; --brand:#2563eb; --brand-2:#1d4ed8; --ok:#059669; --bad:#dc2626;
}

/* ===== Reset & base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ===== Layout ===== */
.container{max-width:860px;margin:0 auto;padding:14px}
.header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.title{font-weight:800;font-size:18px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-size:12px;font-weight:800}

/* ===== Nav tabs ===== */
.nav{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.tab{
  flex:1; white-space:nowrap; border:1px solid var(--line); background:#fff; color:#111;
  border-radius:10px; padding:10px 12px; text-align:center; font-weight:700;
}
.tab:hover{border-color:#cdd5e1}
.tab.active{border-color:var(--brand); outline:2px solid #dbeafe}

/* ===== Cards ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}

/* ===== Forms ===== */
label{font-weight:700;font-size:14px;margin:10px 0 6px;display:block}
input,select,textarea{
  width:100%;height:46px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;outline:none;font-size:16px;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
textarea{height:84px;resize:vertical}
.small{font-size:12px;color:var(--muted)}

/* Grid helpers */
.row{display:grid;gap:10px}
@media (min-width: 720px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
}

/* ===== Buttons ===== */
.btn{height:46px;padding:10px 14px;border:0;border-radius:10px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-soft{background:#eef2ff;color:#1e40af}
.btn-danger{background:var(--bad);color:#fff}

/* ===== KPIs ===== */
.kpi{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px dashed var(--line);border-radius:10px}
.kpi .v{font-weight:900}

/* ===== Table ===== */
.table{width:100%;border-collapse:separate;border-spacing:0 6px}
.table th{
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:0 6px; font-weight:800;
}
.table td{background:#fff;border:1px solid var(--line);padding:8px 6px;vertical-align:middle}
.table tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.table tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}

/* ===== Alerts (flash) ===== */
.alert{margin:8px 0 10px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); font-weight:700}
.alert-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.alert-err{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

/* ===== Popup centrado (modal) ===== */
body.modal-open { overflow: hidden; } /* bloquea scroll del fondo */
.modal-wrap{
  position: fixed;
  inset: 0;
  display: none;               /* oculto por defecto */
  z-index: 9999;               /* sobre todo */
}
.modal-wrap.show{
  display: grid;               /* centrado */
  place-items: center;
}
.modal-veil{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.modal-card{
  position: relative;
  z-index: 1;                  /* sobre el velo */
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:0 14px 50px rgba(0,0,0,.35)
}
.modal-title{font-weight:900;font-size:18px;margin:0 0 8px}
.modal-info{background:#f9fafb;border:1px dashed var(--line);border-radius:10px;padding:10px;margin:8px 0;color:#111}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.modal-input{height:44px}

/* ===== Utilities ===== */
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.hidden{display:none !important}
.center{text-align:center}
/* ===== Chips de hijos (pagaron / pendientes) ===== */
.list-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#1e3a8a;border:1px solid var(--line);font-weight:700;font-size:13px}