:root {
  --blue:#0ea5e9; --blue-dark:#0369a1;
  --green:#16a34a; --green-dark:#166534;
  --red:#ef4444; --amber:#f59e0b;
  --muted:#6b7280; --border:#e5e7eb;
  --bg:#f7f7fb; --ink:#111827;
  --thead:#f1f5f9; --pill-bg:#eef2ff; --pill-br:#dbeafe;
}

/* Base */
*{box-sizing:border-box}
body {
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg); color:var(--ink);
}

/* Header */
header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:#fff; border-bottom:1px solid #eee;
  position:sticky; top:0; z-index:50;
}
h1{font-size:18px;margin:0}
.steps{display:flex; gap:10px; align-items:center}
.step {
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:#e0f2fe; color:var(--blue-dark); font-weight:700;
}
.cta{display:flex; gap:10px; flex-wrap:wrap}

/* Buttons */
.btn {
  border:1px solid var(--border); background:#fff; color:inherit;
  border-radius:10px; padding:9px 12px; font-weight:600; cursor:pointer;
  transition:background .15s, transform .05s;
}
.btn:hover { background:#f3f4f6 }
.btn:active { transform:translateY(1px) }
.btn.primary { background:var(--blue); color:#fff; border-color:var(--blue) }
.btn.primary:hover { background:#0284c7 }
.btn.danger { color:#b91c1c; border-color:#fca5a5 }
.btn.ghost { background:#fff }

/* Filters / Cards */
main { padding:16px 20px }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.card { background:#fff; border:1px solid #eee; border-radius:14px; padding:12px }

/* Pills */
.pill {
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--pill-bg); border:1px solid var(--pill-br);
  font-size:12px; font-weight:500; color:var(--blue-dark);
}

/* Inputs */
.date-input, .money, .note {
  border:1px solid var(--border); border-radius:10px; background:#fff;
  padding:8px 10px; font-size:14px;
}
.date-input { min-height:38px }
.money { width:120px }
.note { min-width:200px; max-width:420px; width:100% }

/* Money con prefijo $ */
.money-wrap { position:relative; display:inline-block }
.money-wrap .prefix {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); opacity:.8; pointer-events:none;
}
.money-wrap input.money { padding-left:24px }

/* Table */
table { width:100%; border-collapse:collapse; font-size:14px }
thead th {
  position:sticky; top:66px; background:var(--thead);
  border-bottom:1px solid var(--border); padding:8px;
  text-align:left; font-weight:700; z-index:1;
}
tbody td { border-bottom:1px solid #f1f5f9; padding:8px; vertical-align:middle }
tbody tr:nth-child(odd){ background:#fafafa }
tbody tr:hover{ background:#f5f7ff }

.center { text-align:center }
.small { font-size:12px; opacity:.8 }
.link { color:var(--blue-dark); text-decoration:underline; cursor:pointer }
.muted { color:var(--muted) }

/* Badges estado */
.badge-ok {
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; background:#dcfce7; color:var(--green-dark);
  border:1px solid #bbf7d0; font-weight:600;
}
.badge-pending {
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; background:#fff7ed; color:#9a3412;
  border:1px solid #ffedd5; font-weight:600;
}

.row-actions { display:flex; gap:6px; flex-wrap:wrap }

/* Footer */
.sticky-footer {
  position:sticky; bottom:0; background:#fff; border-top:1px solid #eee;
  padding:10px 12px; border-radius:12px; margin-top:12px;
  display:flex; gap:8px; justify-content:space-between; align-items:center;
}

/* Toast root */
#__fromapp_toast_root__ {
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; padding:16px; gap:10px;
}

/* Responsive */
@media (max-width:900px){
  thead th:nth-child(2), tbody td:nth-child(2){ display:none }  /* Code */
}
@media (max-width:720px){
  thead th:nth-child(3), tbody td:nth-child(3){ display:none }  /* Factures */
  .note{min-width:140px}
}
@media (max-width:560px){
  thead th:nth-child(6), tbody td:nth-child(6){ display:none }  /* Total facture */
  .filters{gap:8px}
  .btn{padding:8px 10px}
}
/* fila bloqueada tras guardar */
.row-locked td { opacity:.7 }
.row-locked:hover { background:#f3f4f6 !important }
.row-locked input,
.row-locked button { cursor:not-allowed }