/* ============================================================
   Budget Manager — estilo "libro de cuentas" (ledger)
   Papel crema, tinta, acento terracota, detalles tipo cuaderno.
   ============================================================ */
:root {
  --bg: #f3ecdd;
  --bg-lines: rgba(120, 100, 60, 0.08);
  --panel: #fdfaf2;
  --panel-2: #faf5ea;
  --ink: #262116;
  --muted: #8b7f68;
  --line: #ded2b8;
  --line-strong: #b9a880;
  --accent: #b4562e;       /* terracota */
  --accent-soft: #f3e0d4;
  --green: #2e6f4e;
  --green-soft: #dff0e4;
  --danger: #a63a2b;
  --danger-soft: #fae4df;
  --info: #1d4e89;
  --info-soft: #e2ecf7;
  --shadow: 0 2px 0 rgba(80, 60, 20, 0.08);
}

* { box-sizing: border-box; margin: 0; }
body {
  font-family: ui-rounded, "SF Pro Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--bg-lines) 27px 28px),
    var(--bg);
  min-height: 100vh;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--danger); font-size: .9rem; }
a { color: var(--accent); }

h1, h2, h3, table th { font-family: "Iowan Old Style", "Palatino", Georgia, serif; }
h1 { font-weight: 700; letter-spacing: .01em; }

/* ---------- botones ---------- */
button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .92rem;
  box-shadow: var(--shadow);
  transition: transform .04s ease;
}
button:active { transform: translateY(1px); box-shadow: none; }
button:hover { background: var(--panel-2); border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #9d4a26; }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: transparent; box-shadow: none; }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
button.danger:hover { background: var(--danger-soft); }
button.icon-btn { padding: 6px 9px; line-height: 1; }

/* ---------- inputs ---------- */
input, select {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 10px;
  border-radius: 6px;
  font-size: .93rem;
  width: 100%;
}
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* ---------- login / auth ---------- */
.auth-box {
  max-width: 380px; margin: 10vh auto; padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(80,60,20,.12);
  display: flex; flex-direction: column; gap: 14px;
}
.auth-box h1 { font-size: 1.5rem; }
.auth-box form { display: flex; flex-direction: column; gap: 10px; }
.auth-box.wide { max-width: 780px; }
.auth-box a { text-decoration: none; display: inline-block; margin-bottom: 8px; }
.auth-box table { margin-top: 12px; }

.admin-login-panel { margin-top: 12px; }
.admin-login-panel iframe { width: 740px; max-width: 84vw; height: 480px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 16px 26px;
  background: var(--panel);
  border-bottom: 2px solid var(--ink);
}
header h1 { font-size: 1.25rem; }
header h1::before { content: "✻ "; color: var(--accent); }
header nav { display: flex; gap: 6px; }
.tab-btn {
  background: transparent; box-shadow: none;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
}
.tab-btn.active { background: var(--accent-soft); border-color: var(--line-strong); border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 600; }
.user-info { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--muted); }

/* ---------- secciones ---------- */
.tab { padding: 26px; max-width: 1100px; margin: 0 auto; }
#tab-purchases { max-width: none; }
.card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 4px 4px 0 rgba(80,60,20,.08);
}
.card > input[type=file] { background: transparent; border: none; }

.preview img { max-height: 280px; border-radius: 8px; border: 1px solid var(--line); filter: sepia(.12); }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; max-height: 200px; overflow-y: auto; }
.thumbs img { max-height: 130px; border-radius: 6px; border: 1px solid var(--line); filter: sepia(.12); }
.processing { display: flex; align-items: center; gap: 10px; color: var(--info); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--info); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

#extract-result { background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 18px; display: grid; gap: 10px; }
#extract-result .fields {
  display: grid;
  /* una sola fila: Negocio (flexible) · Monto · Fecha · Categoría · Pago */
  grid-template-columns: minmax(220px, 2.4fr) 110px 122px 160px 165px;
  gap: 10px 12px;
  align-items: end;
}
#extract-result .fields input { width: 100%; }
#save-extract { align-self: flex-start; padding: 10px 26px; }
@media (max-width: 900px) {
  #extract-result .fields { grid-template-columns: 1fr 1fr; }
}

/* ---------- tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 10px 12px; border-bottom: 1px dashed var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
td.amount, th.amount { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.row-error { background: var(--danger-soft); }
tbody tr.row-error td { border-bottom-color: #eeccc4; }

/* edición inline dentro de la tabla */
#purchases-table input, #purchases-table select { padding: 7px 8px; font-size: .88rem; }
#purchases-table input[type="text"] { width: 100%; min-width: 150px; }
#purchases-table input.money { width: 96px; padding: 7px 6px; text-align: right; font-variant-numeric: tabular-nums; }
#purchases-table input[type="date"] { width: 122px; padding-right: 2px; }
/* FECHA solo ocupa lo que necesita (evita que la tabla reparta el sobrante ahí) */
#purchases-table th:first-child, #purchases-table td:first-child { width: 1%; }
#purchases-table td.cell-date { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
td .upload-ts { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; }
#purchases-table .combo-wrap { min-width: 110px; }
#purchases-container { overflow-x: auto; }

td.actions { display: inline-flex; gap: 6px; align-items: center; }
td.actions button { white-space: nowrap; }
td .error + button, td.error { white-space: nowrap; }

/* ---------- casa (espacios compartidos) ---------- */
.house-create { display: flex; gap: 18px; flex-wrap: wrap; }
.house-create form { gap: 8px; }
.upload-scope label { display: flex; gap: 8px; align-items: center; font-weight: 600; width: auto; font-size: .9rem; }
.upload-scope select { width: auto; min-width: 160px; }
#groups-list { display: flex; flex-direction: column; gap: 14px; }
.group-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group-head strong { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.05rem; }
.group-head .actions { margin-left: auto; display: flex; gap: 8px; }
.members { display: flex; gap: 8px; flex-wrap: wrap; }
.chip.member a { color: var(--danger); text-decoration: none; font-weight: 700; }
#house-msg { min-height: 1em; }
#house-msg code { background: var(--panel); border: 1px solid var(--line); padding: 2px 8px; border-radius: 4px; letter-spacing: .1em; }

/* ---------- chips / estados ---------- */
.chip { background: var(--panel-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 20px; font-size: .85rem; }
.category-chip { background: var(--accent-soft); color: var(--accent); border: 1px solid #e3c3b1; padding: 3px 10px; border-radius: 12px; font-size: .78rem; font-weight: 600; }
.state-ok { background: var(--green-soft); color: var(--green); border: 1px solid #b8d9c4; padding: 4px 10px; border-radius: 20px; font-size: .82rem; }
.state-wait { background: var(--info-soft); color: var(--info); border: 1px solid #bfd3e8; padding: 4px 10px; border-radius: 20px; font-size: .82rem; }
.state-err { background: #fff; border: 1px solid var(--danger); color: var(--danger); padding: 4px 10px; border-radius: 20px; font-size: .82rem; }

/* ---------- resumen mensual ---------- */
.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters label { display: flex; gap: 8px; align-items: center; width: auto; font-weight: 600; }
.filters select { width: 150px; max-width: none; }
#purchase-scope, #top-scope { width: 210px; }
.top-month select { width: auto; min-width: 170px; }
.month-row { display: grid; grid-template-columns: 90px 150px 1fr auto; gap: 14px; align-items: center; padding: 4px 0; }
.month-row strong { font-family: "Iowan Old Style", Georgia, serif; }
.month-row .bar {
  height: 12px; background: var(--accent); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  outline: 1px dashed var(--line-strong); outline-offset: 3px;
}
.month-row:nth-child(2) .bar { background: var(--green); }
.month-row:nth-child(3) .bar { background: var(--info); }
.month-row:nth-child(4) .bar { background: #8a6d3b; }
.month-row:nth-child(5) .bar { background: #6d5064; }

.section-title { font-size: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }

/* ---------- vista Resumen: top 3 por dimensión ---------- */
.top-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.top-month { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.top-month select { width: 180px; }
.top-total {
  align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 14px; font-size: .95rem;
}
.top-total strong { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.1rem; color: var(--accent); }
.top-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.top-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.top-card h3 { font-size: 1rem; border-bottom: 2px solid var(--line-strong); padding-bottom: 6px; }
.top-row { display: flex; gap: 10px; align-items: flex-start; }
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line-strong); background: var(--panel);
  font-family: "Iowan Old Style", Georgia, serif; font-weight: 700; font-size: .85rem;
}
.rank.first { background: var(--accent); border-color: var(--accent); color: #fff; }
.rank.second { background: var(--panel-2); color: var(--accent); }
.rank.third { background: transparent; color: var(--muted); }
.top-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.top-line { display: flex; justify-content: space-between; gap: 8px; }
.top-line .t-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-line .t-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-bar .bar { height: 10px; background: var(--accent); border-radius: 2px; min-width: 4px; }
.top-card .muted { font-size: .78rem; }

/* barra apilada por tipo + mosaicos de leyenda */
.stack-bar { display: flex; height: 22px; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.stack-seg { min-width: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: width .2s ease; }
.type-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.type-tile {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font-size: .85rem;
}
.type-tile .swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); flex-shrink: 0; }
.type-tile .t-name { font-weight: 600; }
.type-tile .t-amt { font-variant-numeric: tabular-nums; margin-left: auto; }

/* ---------- admin ---------- */
.admin-token { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.admin-token label { flex: 1; min-width: 220px; display: block; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { width: auto; flex: 1; min-width: 150px; }
#admin-result pre, #admin-result code {
  background: var(--panel-2); border: 1px solid var(--line); padding: 8px 12px;
  border-radius: 6px; font-size: 1rem; user-select: all; display: inline-block; letter-spacing: .08em;
}

/* ---------- modal imagen ---------- */
.modal { position: fixed; inset: 0; background: rgba(30, 22, 10, .55); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 24px; }
.modal-body { position: relative; max-width: 90vw; max-height: 90vh; }
.modal-body img { max-width: 90vw; max-height: 85vh; border-radius: 8px; display: block; border: 6px solid var(--panel); box-shadow: 0 12px 40px rgba(20,10,0,.4); transform: rotate(-.4deg); }
.close-btn { position: absolute; top: -12px; right: -12px; border-radius: 50%; width: 32px; height: 32px; background: var(--panel); font-size: .9rem; z-index: 401; }

/* ---------- combo ---------- */
.combo-wrap { position: relative; flex: 1; min-width: 0; }
.combo-wrap input { width: 100%; }
.combo-panel {
  position: fixed; left: 0; top: 0; width: max-content; min-width: 200px; max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(80,60,20,.15); z-index: 500;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.combo-panel::-webkit-scrollbar { width: 8px; }
.combo-panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.combo-panel::-webkit-scrollbar-track { background: transparent; }
.combo-item { padding: 9px 12px; cursor: pointer; font-size: .89rem; }
.combo-item:hover, .combo-item.active { background: var(--accent-soft); color: var(--accent); }
.combo-item.active::before { content: "▸ "; }

/* ---------- misc ---------- */
.banner { position: sticky; top: 0; background: var(--danger); color: #fff; padding: 10px 24px; z-index: 600; text-align: center; }

/* paginador de la tabla de compras */
.pager { display: flex; align-items: center; gap: 12px; justify-content: flex-start; flex-wrap: wrap; padding: 4px 0; }
.pager span { font-size: .9rem; }
.pager select { width: auto; min-width: 80px; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

#upload-ok { color: var(--green); font-size: .95rem; }