:root {
  --azul: #1e5aa8;
  --azul-osc: #16437d;
  --verde: #2e9e5b;
  --verde-osc: #247a47;
  --rojo: #c0392b;
  --gris: #f4f6f9;
  --gris-borde: #d9e0e8;
  --texto: #223;
  --sombra: 0 2px 8px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gris);
  color: var(--texto);
  line-height: 1.4;
}

/* ---------- Header ---------- */
.app-header {
  background: var(--azul);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--sombra);
}

.app-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

.rate-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rate-box > label {
  font-size: 0.72rem;
  opacity: 0.9;
}

.rate-input {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 6px;
  padding: 2px 6px;
}

.rate-symbol { color: var(--azul); font-weight: 700; }

.rate-input input {
  border: none;
  width: 90px;
  font-size: 1rem;
  padding: 4px;
  color: var(--texto);
}
.rate-input input:focus { outline: none; }

.btn-ghost {
  border: none;
  background: var(--gris);
  color: var(--azul);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 8px;
}
.btn-ghost:hover { background: var(--gris-borde); }

.rate-info {
  font-size: 0.68rem;
  opacity: 0.85;
  min-height: 0.9em;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  max-width: 1000px;
  margin: 0 auto;
}

.tab {
  flex: 1;
  border: none;
  background: #e3e9f0;
  color: var(--azul-osc);
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.tab.active {
  background: #fff;
  color: var(--azul);
  box-shadow: var(--sombra);
}

/* ---------- Panels ---------- */
.tab-panel {
  display: none;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--sombra);
}
.tab-panel.active { display: block; }

/* ---------- Form ---------- */
.item-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 16px;
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.75rem; font-weight: 600; color: #555; }
.field-desc { flex: 2 1 180px; }
.field-lugar { flex: 1 1 120px; }
.field-pasillo { flex: 1 1 110px; }
.field-cant { flex: 0 1 85px; }
.field-precio { flex: 1 1 110px; }
.field-moneda { flex: 0 1 115px; }
.field-add { flex: 0 1 auto; }

.field input,
.field select {
  padding: 9px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 0.95rem;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--azul);
}

.btn-primary {
  background: var(--verde);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--verde-osc); }

/* ---------- Contador de artículos ---------- */
.contador {
  font-size: 0.88rem;
  color: #666;
  margin-bottom: 8px;
}
.contador strong { color: var(--azul); }
.contador:empty { display: none; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th, td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--gris-borde);
}
th {
  background: var(--gris);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666;
}
td.num, th.num { text-align: right; }
.check-col, .acciones-col { text-align: center; width: 1%; white-space: nowrap; }
td.check-cell { text-align: center; }
td.check-cell input { width: 20px; height: 20px; cursor: pointer; }

/* Cabecera de columnas de check (Incluir / Comprado) */
.th-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.th-check input { width: 16px; height: 16px; cursor: pointer; }

/* Columnas ordenables */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #e7ecf2; }
th.sortable::after { content: "↕"; opacity: 0.35; margin-left: 4px; font-size: 0.85em; }
th.sortable.sort-asc::after { content: "▲"; opacity: 1; color: var(--azul); }
th.sortable.sort-desc::after { content: "▼"; opacity: 1; color: var(--azul); }

/* Fila excluida (no marcada en "Incluir") */
tr.excluido td:not(.check-cell):not(.acciones-col) {
  color: #bbb;
  text-decoration: line-through;
}

/* Edición en línea */
tr.editando { background: #fdf7e3; }
td .ed {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--azul);
  border-radius: 6px;
  font-size: 0.9rem;
}
td .ed-cant, td .ed-precio { text-align: right; }
.btn-save:hover { background: #e9f7ee; }
.btn-cancel:hover { background: #fdecea; }

.moneda-tag {
  display: inline-block;
  font-size: 0.7rem;
  color: #777;
  margin-left: 4px;
}

tr.comprado td {
  color: #999;
  text-decoration: line-through;
}
tr.comprado td.check-cell,
tr.comprado td.acciones-col { text-decoration: none; }

.empty {
  text-align: center;
  color: #999;
  padding: 24px;
  font-style: italic;
}

/* ---------- Row action buttons ---------- */
.btn-icon {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  padding: 4px 6px;
  border-radius: 6px;
}
.btn-icon:hover { background: var(--gris); }
.btn-del:hover { background: #fdecea; }

/* ---------- Totales ---------- */
.totales {
  margin-top: 20px;
  padding: 16px;
  background: var(--gris);
  border-radius: 10px;
}
.totales-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 1rem;
}
.totales-row.grand {
  border-top: 2px solid var(--gris-borde);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 1.25rem;
  color: var(--azul);
}
.totales-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  font-weight: 700;
  margin-bottom: 4px;
}
.totales-sep {
  height: 1px;
  background: var(--gris-borde);
  margin: 14px 0;
}
.descuento-row strong { color: var(--rojo); }
.comprado-row strong { color: var(--verde); }
.check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}
.check-inline input { width: 18px; height: 18px; }

/* ---------- Presupuesto ---------- */
.presupuesto {
  margin-top: 16px;
  padding: 16px;
  background: #eef4fb;
  border: 1px solid #d3e2f2;
  border-radius: 10px;
}
.presupuesto-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.presupuesto-input > label {
  font-weight: 700;
  color: var(--azul-osc);
  font-size: 0.95rem;
}
.pres-input {
  max-width: 220px;
  border: 1px solid var(--gris-borde);
}
.pres-input input {
  border: none;
  width: 100%;
  font-size: 1.05rem;
  padding: 6px 4px;
  background: transparent;
}
.pres-input input:focus { outline: none; }

.presupuesto-diffs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.diff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.diff-row strong { font-size: 1.05rem; }
.dif-ok { color: var(--verde-osc); }
.dif-mal { color: var(--rojo); }
.dif-neutro { color: #999; }

/* ---------- Acciones de lista (guardar en histórico) ---------- */
.acciones-lista {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.btn-hist {
  background: var(--azul);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-hist:hover { background: var(--azul-osc); }

/* ---------- Histórico ---------- */
.hist-intro { color: #666; margin: 0 0 16px; font-size: 0.95rem; }
.hist-lista { display: flex; flex-direction: column; gap: 12px; }

.hist-card {
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}
.hist-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.hist-nombre { font-weight: 700; color: var(--azul-osc); font-size: 1.05rem; }
.hist-meta { font-size: 0.8rem; color: #888; margin-top: 2px; }
.hist-total { font-size: 1.2rem; font-weight: 700; color: var(--azul); white-space: nowrap; }

.hist-detalle { display: none; margin-top: 12px; overflow-x: auto; }
.hist-card.abierto .hist-detalle { display: block; }
.hist-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hist-tabla th, .hist-tabla td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
}
.hist-tabla th { background: var(--gris); font-size: 0.72rem; text-transform: uppercase; color: #777; }
.hist-tabla td.num, .hist-tabla th.num { text-align: right; }

.hist-acciones {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-mini {
  border: 1px solid var(--gris-borde);
  background: var(--gris);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-mini:hover { background: #e7ecf2; }
.btn-hist-del:hover { background: #fdecea; border-color: #f0c4be; }
.btn-hist-cargar:hover { background: #e9f7ee; border-color: #bfe6cd; }

/* ---------- Footer ---------- */
.app-footer {
  max-width: 1000px;
  margin: 16px auto 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.btn-sec {
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--azul);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-sec:hover { background: #eef4fb; }
.save-status { color: var(--verde-osc); font-size: 0.9rem; }

@media (max-width: 640px) {
  .app-footer { flex-wrap: wrap; }
  .app-footer .btn-primary,
  .app-footer .btn-sec { flex: 1 1 auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .app-header { flex-direction: column; align-items: stretch; }
  .rate-box { align-items: stretch; }
  .field-desc, .field-precio, .field-moneda, .field-cant, .field-lugar { flex: 1 1 100%; }
  .field-add, .field-add .btn-primary { width: 100%; }
}