/* ==========================================================================
   VD Presupuestos — hoja de estilos común
   Herramienta interna: densidad alta, foco visible, nada de decoración.
   Los números siempre en monoespaciada tabular para poder compararlos de un
   vistazo, que es lo que se hace todo el rato en una pantalla de precios.
   ========================================================================== */

:root {
  --ink:        #101820;
  --slate:      #2e3a45;
  --muted:      #6b7a88;
  --faint:      #97a4b0;
  --rule:       #dde4e9;
  --wash:       #f3f6f8;
  --paper:      #ffffff;
  --accent:     #0b7285;
  --accent-dk:  #075661;
  --accent-soft:#e4f0f2;
  --ok:         #2f7a4f;
  --warn:       #9a6a1c;
  --danger:     #a4453b;
  --danger-soft:#fbeceb;

  --sans: "Segoe UI", -apple-system, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --mono: "Consolas", "SF Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;

  --r: 4px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 4px 12px rgba(16, 24, 32, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  background: var(--wash);
}

h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; }
h1 { font-size: 20px; letter-spacing: -.01em; }
h2 { font-size: 16px; }
h3 { font-size: 13px; }

a { color: var(--accent); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- controles ------------------------------------------------------------ */

button, .btn {
  font: inherit;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--slate);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--faint); background: #fbfdfd; }
button:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }

.btn-danger { color: var(--danger); border-color: #eccdc9; background: var(--danger-soft); }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: transparent; }

input, select, textarea {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
input[type="number"], input.num { font-family: var(--mono); text-align: right; }
textarea { min-height: 80px; resize: vertical; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

label.field { display: block; }
label.field > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* --- superficies ---------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.card > header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card > .body { padding: 16px; }

table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--wash);
  position: sticky;
  top: 0;
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--rule); }
table.data tbody tr:hover { background: #f8fbfc; }
table.data tr.clickable { cursor: pointer; }

.tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--wash);
  color: var(--muted);
  border: 1px solid var(--rule);
}
.tag.draft    { background: var(--wash);        color: var(--muted); }
.tag.sent     { background: var(--accent-soft); color: var(--accent-dk); border-color: #bcd9de; }
.tag.accepted { background: #e6f3ec;            color: var(--ok);     border-color: #bfdfcc; }
.tag.rejected { background: var(--danger-soft); color: var(--danger); border-color: #eccdc9; }
.tag.expired  { background: #f6f0e3;            color: var(--warn);   border-color: #e4d6b8; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.empty strong { display: block; color: var(--ink); margin-bottom: 4px; }

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
}
.toast.error { background: var(--danger); }

dialog {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(16, 24, 32, .25);
}
dialog::backdrop { background: rgba(16, 24, 32, .45); }
dialog header, dialog footer {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
dialog header { border-bottom: 1px solid var(--rule); }
dialog footer { border-top: 1px solid var(--rule); background: var(--wash); }
dialog .body { padding: 18px; max-height: 65vh; overflow: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}