/* ============================================================
   FM Presupuestos · styles.css
   Sistema de diseño: cálido, elegante, tipo estudio creativo.
   ============================================================ */

:root{
  --bg:        #FCFBF8;   /* blanco cálido */
  --ivory:     #F6F3EE;   /* marfil */
  --champagne: #E8DCC8;
  --sand:      #D8C7B2;
  --rose:      #F2DED8;   /* rosa suave */
  --rose-deep: #D9A79B;
  --accent:    #B99257;   /* dorado sutil (configurable) */
  --ink:       #211B15;   /* negro elegante */
  --ink-soft:  #4C443B;
  --muted:     #97897A;
  --line:      #ECE5D8;
  --surface:   #FFFFFF;
  --ok:        #7C9B6F;
  --bad:       #C0776F;
  --warn:      #C99B3F;
  --info:      #8A97B8;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(60,48,32,.05), 0 2px 8px rgba(60,48,32,.04);
  --shadow-md: 0 2px 6px rgba(60,48,32,.06), 0 12px 32px rgba(60,48,32,.08);
  --shadow-lg: 0 8px 24px rgba(60,48,32,.10), 0 24px 64px rgba(60,48,32,.12);

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
  touch-action: manipulation;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(232,220,200,.45), transparent 60%),
    radial-gradient(900px 420px at -10% 15%, rgba(242,222,216,.35), transparent 55%),
    var(--bg);
  min-height: 100dvh;
}
body.no-scroll{ overflow: hidden; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -.01em; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
::selection{ background: var(--champagne); }

.ic{ flex: none; }

/* ============ LAYOUT ============ */
#app{ display: flex; min-height: 100dvh; }
.main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view{ flex: 1; }

/* --- Sidebar (desktop) --- */
#sidebar{
  width: 248px; flex: none;
  position: sticky; top: 0; height: 100dvh;
  padding: 28px 18px 20px;
  display: flex; flex-direction: column; gap: 26px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(246,243,238,.4));
  backdrop-filter: blur(8px);
}
.brand{ display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark{
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ink), #3A2F24);
  color: var(--champagne); font-size: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.brand-mark img{ width: 100%; height: 100%; object-fit: cover; }
.brand-name{ font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.brand-tag{ font-size: 11.5px; color: var(--muted); }

.side-nav{ display: flex; flex-direction: column; gap: 2px; }
.nav-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  color: var(--ink-soft); font-weight: 500; font-size: 14px;
  transition: background .18s, color .18s, transform .12s;
}
.nav-item:hover{ background: rgba(232,220,200,.35); color: var(--ink); }
.nav-item.active{ background: var(--ink); color: #FBF7EF; box-shadow: var(--shadow-sm); }
.nav-item:active{ transform: scale(.98); }

.side-cta{
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #D4B67E);
  color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 18px rgba(185,146,87,.35);
  transition: transform .15s, box-shadow .15s;
}
.side-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(185,146,87,.45); }
.side-foot{ font-size: 11px; color: var(--muted); text-align: center; }

/* --- Topbar (mobile) --- */
#topbar{
  display: none;
  position: sticky; top: 0; z-index: 40;
  align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: rgba(252,251,248,.85); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-brand{ display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 17px; }
.tb-mark{ width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--champagne); font-size: 13px; }
.tb-logo{ width: 30px; height: 30px; border-radius: 10px; object-fit: cover; }

/* --- Bottom nav (mobile) --- */
#bottomnav{
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: end; gap: 2px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(252,251,248,.92); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
#bottomnav .nav-item{
  flex-direction: column; gap: 3px; padding: 6px 4px;
  font-size: 10.5px; border-radius: 12px; justify-content: center; text-align: center;
}
#bottomnav .nav-item.active{ background: none; color: var(--accent); box-shadow: none; }
.bn-new{
  width: 54px; height: 54px; margin: 0 6px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ink), #3A2F24);
  color: var(--champagne);
  box-shadow: 0 8px 20px rgba(33,27,21,.3);
  transform: translateY(-10px);
  transition: transform .15s;
}
.bn-new:active{ transform: translateY(-8px) scale(.95); }

/* ============ PÁGINA ============ */
.page{ max-width: 1060px; margin: 0 auto; padding: 34px 30px 60px; display: flex; flex-direction: column; gap: 20px; }
.page.narrow{ max-width: 760px; }
.page-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head h1{ font-size: 32px; }
.page-sub{ color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.section-label{ font-size: 13px; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 6px; }

.hero{ padding: 6px 2px 0; }
.hero-kicker{ font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hero-title{ font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.hero-soft{ color: var(--muted); font-style: italic; font-weight: 400; }

/* ============ COMPONENTES ============ */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2{ font-size: 19px; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.two-col > *, .kpi-grid > *, .quick-actions > *{ min-width: 0; }
.link{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 600; font-size: 13px;
  border-radius: 8px; transition: opacity .15s;
}
.link:hover{ opacity: .75; }

/* --- Botones --- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 14px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: transform .12s, box-shadow .15s, background .15s, opacity .15s;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--ink); color: #FBF7EF; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ box-shadow: var(--shadow-md); }
.btn-gold{ background: linear-gradient(135deg, var(--accent), #D4B67E); color: #fff; box-shadow: 0 4px 14px rgba(185,146,87,.3); }
.btn-gold:hover{ box-shadow: 0 8px 20px rgba(185,146,87,.4); }
.btn-soft{ background: var(--ivory); color: var(--ink); border: 1px solid var(--line); }
.btn-soft:hover{ background: var(--champagne); }
.btn-ghost{ background: transparent; color: var(--ink-soft); }
.btn-ghost:hover{ background: var(--ivory); }
.btn-danger{ background: var(--bad); color: #fff; }
.btn.danger, .btn-ghost.danger{ color: var(--bad); }
.btn.sm{ padding: 8px 14px; font-size: 13px; border-radius: 11px; }
.btn.xl{ padding: 15px 26px; font-size: 16px; border-radius: 16px; width: 100%; }
.flex1{ flex: 1; }

.icon-btn{
  width: 38px; height: 38px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 12px; color: var(--ink-soft);
  transition: background .15s, color .15s, transform .12s;
}
.icon-btn:hover{ background: var(--ivory); color: var(--ink); }
.icon-btn:active{ transform: scale(.92); }
.icon-btn.subtle{ color: var(--muted); }
.icon-btn.subtle:hover{ color: var(--bad); background: #F8ECEA; }
.icon-btn.wa{ color: #4FA05C; }
.icon-btn.off{ color: var(--muted); opacity: .6; }
.icon-btn[disabled]{ opacity: .3; pointer-events: none; }

/* --- Badges de estado --- */
.badge{
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.st-neutral{ background: var(--ivory); color: var(--ink-soft); border: 1px solid var(--line); }
.st-info{ background: #EDF0F7; color: #5A6A94; }
.st-gold{ background: #F5EBD8; color: #96742F; }
.st-ok{ background: #EAF1E6; color: #587B4C; }
.st-done{ background: var(--champagne); color: #6B573B; }
.st-bad{ background: #F8ECEA; color: #A85D54; }
.st-warn{ background: #F9F0DC; color: #9C7A2E; }

/* --- Chips y toolbar --- */
.toolbar{ display: flex; flex-direction: column; gap: 12px; }
.chip-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row.scroll{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chip-row.scroll::-webkit-scrollbar{ display: none; }
.chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 99px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  transition: all .15s;
}
.chip:hover{ border-color: var(--sand); background: var(--ivory); }
.chip.on{ background: var(--ink); color: #FBF7EF; border-color: var(--ink); }

.search-box{
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 46px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  color: var(--muted); max-width: 420px;
  transition: box-shadow .15s, border-color .15s;
}
.search-box:focus-within{ border-color: var(--sand); box-shadow: 0 0 0 4px rgba(216,199,178,.25); }
.search-box input{ border: none; outline: none; background: none; flex: 1; font: inherit; color: var(--ink); min-width: 0; }
.search-box.big{ height: 54px; max-width: none; font-size: 16px; }

/* --- KPIs --- */
.kpi-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi{
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .2s;
}
a.kpi:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-hero{
  background: linear-gradient(135deg, var(--ink) 0%, #3D3126 100%);
  color: #FBF7EF; border-color: var(--ink);
}
.kpi-hero .kpi-label, .kpi-hero .kpi-foot{ color: rgba(251,247,239,.65); }
.kpi-label{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.kpi-value{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.kpi-value.kpi-gold{ color: var(--accent); }
.kpi-small{ font-size: 14px; color: var(--muted); font-family: var(--font-body); }
.kpi-foot{ font-size: 12px; color: var(--muted); }

/* --- Accesos rápidos --- */
.quick-actions{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qa{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 600; font-size: 13.5px; line-height: 1.25; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .2s, background .15s;
}
.qa:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.qa .ic{ color: var(--accent); }
.qa-primary{ background: linear-gradient(135deg, var(--rose), var(--champagne)); border-color: transparent; }
.qa-primary .ic{ color: var(--ink); }

/* --- Filas de listas --- */
.list-card{ padding: 8px; }
.list-card.faded{ opacity: .7; }
.row{
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: var(--r-md);
  cursor: pointer; transition: background .15s;
}
.row:hover{ background: var(--ivory); }
.row + .row{ border-top: 1px solid var(--line); }
.row-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong{ font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-body small{ color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-body .times{ color: var(--ink-soft); }
.row-side{ display: flex; align-items: center; gap: 10px; flex: none; }
.row-amount{ font-weight: 700; font-size: 14.5px; }
.row-amount.pend{ color: var(--bad); }
.avatar{
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, var(--rose), var(--champagne));
  font-family: var(--font-display); font-size: 17px; color: var(--ink);
}
.date-block{
  width: 48px; height: 52px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--ivory); border: 1px solid var(--line);
}
.db-day{ font-family: var(--font-display); font-size: 19px; line-height: 1; }
.db-month{ font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 2px; }

/* --- Recordatorios --- */
.reminder-list{ display: flex; flex-direction: column; }
.reminder{ display: flex; align-items: center; gap: 12px; padding: 10px 6px; transition: opacity .3s, transform .3s; }
.reminder + .reminder{ border-top: 1px solid var(--line); }
.reminder.late .reminder-body small{ color: var(--bad); font-weight: 600; }
.reminder.done-anim{ opacity: 0; transform: translateX(10px); }
.reminder-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reminder-body small{ color: var(--muted); font-size: 12px; }
.check{
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1.6px solid var(--sand); border-radius: 9px; color: transparent;
  transition: all .15s;
}
.check:hover{ background: var(--ok); border-color: var(--ok); color: #fff; }

/* --- Estados vacíos --- */
.empty{ text-align: center; padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-emoji{ font-size: 34px; margin-bottom: 4px; }
.empty h3{ font-size: 18px; }
.empty p{ color: var(--muted); font-size: 13.5px; max-width: 320px; }
.empty .btn{ margin-top: 12px; }

/* ============ FORMULARIOS ============ */
.form-grid{ display: grid; gap: 14px; grid-template-columns: 1fr; }
.form-grid.two{ grid-template-columns: 1fr 1fr; }
.form-grid.four{ grid-template-columns: repeat(4, 1fr); }
.span2{ grid-column: 1 / -1; }
.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label{ font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.field-hint{ font-size: 11.5px; color: var(--muted); }
.opt{ color: var(--muted); font-weight: 400; }
.input{
  width: 100%; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 14px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
select.input{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397897A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
.input:focus{ outline: none; border-color: var(--sand); box-shadow: 0 0 0 4px rgba(216,199,178,.25); }
.input.sm{ padding: 7px 11px; font-size: 13px; border-radius: 10px; width: auto; }
.input.big{ padding: 14px 18px; font-size: 16px; border-radius: 14px; }
.input.center{ text-align: center; }
textarea.input{ resize: vertical; min-height: 44px; }
.inline-select{ display: flex; gap: 8px; align-items: stretch; }
.inline-select select{ flex: 1; min-width: 0; }
.inline-select .btn{ flex: none; }
.input-prefix, .input-suffix{ position: relative; display: flex; align-items: center; }
.input-prefix span, .input-suffix span{
  position: absolute; font-size: 13.5px; color: var(--muted); pointer-events: none;
}
.input-prefix span{ left: 13px; }
.input-prefix .input{ padding-left: 28px; }
.input-suffix span{ right: 13px; }
.input-suffix .input{ padding-right: 40px; }
input[type="number"]{ -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; }
.help-text{ font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.help-text.center{ text-align: center; margin: 16px 0; }
.linked-box{ background: var(--ivory); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.linked-item{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.linked-item:hover{ color: var(--accent); }

/* ============ MODALES ============ */
#modal-root{ position: relative; z-index: 1000; }
.modal-back{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(33,27,21,.35); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .2s;
}
.modal-back.show{ opacity: 1; }
.modal{
  width: 100%; max-width: 460px; max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal-back.show .modal{ transform: none; }
.modal.wide{ max-width: 640px; }
.modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-title{ font-size: 22px; }
.modal-sub{ color: var(--muted); font-size: 13px; margin-top: 3px; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.confirm-msg{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 640px){
  .modal-back{ align-items: flex-end; padding: 0; }
  .modal{
    max-width: none; border-radius: 26px 26px 0 0;
    max-height: 92dvh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(40px);
  }
}

/* --- Toast --- */
#toast-root{
  position: fixed; z-index: 1000; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(92vw, 420px); pointer-events: none;
}
.toast{
  background: var(--ink); color: #FBF7EF;
  padding: 12px 20px; border-radius: 14px;
  font-size: 13.5px; font-weight: 500; text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: all .3s;
}
.toast.show{ opacity: 1; transform: none; }
@media (min-width: 900px){ #toast-root{ bottom: 30px; } }

/* ============ EDITOR DE PRESUPUESTOS ============ */
.editor-bar{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: -10px -6px 0;
  background: rgba(252,251,248,.9); backdrop-filter: blur(12px);
  border-radius: 0 0 18px 18px;
}
.editor-bar-title{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editor-bar-title h1{ font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-select{ max-width: 150px; }

.items-empty{
  padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px;
  background: var(--ivory); border-radius: var(--r-md); border: 1px dashed var(--sand);
  margin-top: 12px;
}
.item-head-row{
  display: grid; grid-template-columns: 1fr 64px 130px 130px 84px; gap: 10px;
  padding: 12px 6px 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.item-row{
  display: grid; grid-template-columns: 1fr 64px 130px 130px 84px; gap: 10px;
  align-items: start; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.item-row.hidden-item .item-main{ opacity: .5; }
.item-main{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-name{ font-weight: 600; }
.item-note{ font-size: 12.5px !important; padding: 7px 11px !important; background: var(--ivory); border-style: dashed; }
.item-btns{ display: flex; gap: 2px; justify-content: flex-end; }
.add-line{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 12px;
  border: 1.5px dashed var(--sand); border-radius: var(--r-md);
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
  transition: background .15s, border-color .15s;
}
.add-line:hover{ background: var(--ivory); border-color: var(--accent); }

/* segmentado */
.seg{
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 14px;
}
.seg-btn{
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted);
  transition: all .15s;
}
.seg-btn.on{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg.sm .seg-btn{ padding: 6px 13px; font-size: 12.5px; }

#pricing-inputs .mode-margin, #pricing-inputs .mode-fixed{ display: none; }
#pricing-inputs[data-mode="margin"] .mode-margin{ display: flex; }
#pricing-inputs[data-mode="fixed"] .mode-fixed{ display: flex; }
.quick-extra{ display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }

.calc-card{ background: linear-gradient(160deg, #FFFFFF 0%, #FBF6EC 100%); }
.calc-summary{
  margin-top: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--champagne);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 9px;
}
.calc-line{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.calc-line.muted{ color: var(--muted); }
.calc-line.gain{ color: var(--ok); font-weight: 600; }
.calc-line.gain small{ font-weight: 500; }
.calc-line.gain.warn{ color: var(--warn); }
.calc-total{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; margin: 4px 0;
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line);
}
.calc-total span{ font-weight: 600; }
.calc-total strong{ font-family: var(--font-display); font-size: 27px; }
.calc-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.calc-split > div{
  background: var(--ivory); border-radius: 12px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.calc-split span{ font-size: 12px; color: var(--muted); font-weight: 600; }
.calc-split strong{ font-size: 16px; }

.editor-actions{ display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }

/* pagos */
.pay-btns{ display: flex; gap: 8px; flex-wrap: wrap; }
.pay-list{ display: flex; flex-direction: column; }
.pay-row{ display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.pay-row strong{ margin-left: auto; }
.pay-type{ font-weight: 600; background: var(--ivory); border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.pay-date{ color: var(--muted); font-size: 12.5px; }
.pay-total{
  display: flex; justify-content: space-between; padding: 12px 4px 2px;
  border-top: 1.5px solid var(--ink); margin-top: 4px; font-size: 13.5px; color: var(--muted);
}
.pay-total strong{ color: var(--ink); }

/* selector de plantillas */
.tpl-pick{ display: flex; flex-direction: column; gap: 8px; }
.tpl-pick-item{
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s, transform .12s;
}
.tpl-pick-item:hover{ border-color: var(--sand); transform: translateX(2px); }
.tpl-pick-item > span:nth-child(2){ flex: 1; display: flex; flex-direction: column; }
.tpl-pick-item small{ color: var(--muted); font-size: 12.5px; }
.tpl-emoji{ font-size: 22px; }
.tpl-emoji.big{ font-size: 30px; }

/* ============ CALENDARIO ============ */
.cal-card{ padding: 18px; }
.cal-nav{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cal-nav.inline{ margin-bottom: 0; }
.cal-title{ font-size: 20px; flex: 1; text-align: center; }
.cal-title.sm{ font-size: 16px; flex: none; min-width: 140px; }
.cal-week-head{
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); text-align: center; padding-bottom: 8px;
}
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell{
  min-height: 74px; padding: 7px;
  border-radius: 12px; border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cal-cell:hover{ background: var(--ivory); border-color: var(--line); }
.cal-cell.blank{ pointer-events: none; }
.cal-cell.today{ background: var(--rose); }
.cal-cell.busy{ background: var(--ivory); border-color: var(--champagne); }
.cal-cell.today.busy{ background: var(--rose); }
.cal-num{ font-size: 12.5px; font-weight: 600; }
.cal-cell.today .cal-num{ color: var(--ink); }
.cal-dots{ display: flex; gap: 3px; flex-wrap: wrap; }
.cal-tag{
  font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dot{ width: 7px; height: 7px; flex: none; border-radius: 99px; display: inline-block; }
.d-ok{ background: var(--ok); }
.d-gold{ background: var(--accent); }
.d-neutral{ background: var(--sand); }
.d-outline{ background: transparent; border: 1.6px solid var(--sand); }
.d-bell{ background: var(--rose-deep); }
.cal-legend{
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); padding: 0 6px;
}
.cal-legend span{ display: inline-flex; align-items: center; gap: 6px; }

.week-list{ display: flex; flex-direction: column; gap: 6px; }
.week-day{ padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.week-day:hover{ background: var(--ivory); }
.week-day.today{ background: var(--rose); border-color: transparent; }
.week-day-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 13.5px; }
.today-pill{ font-size: 10.5px; font-weight: 700; background: var(--ink); color: #FBF7EF; border-radius: 99px; padding: 2px 9px; }
.week-free{ color: var(--muted); font-size: 12.5px; }
.wk-event{ display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13.5px; }
.wk-event .dot{ margin-top: 6px; }
.wk-event small{ display: block; color: var(--muted); font-size: 12px; }
.wk-event.soft{ opacity: .8; }

.day-sheet{ display: flex; flex-direction: column; gap: 8px; }
.day-item{
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s;
}
.day-item:not(.static):hover{ border-color: var(--sand); }
.day-item > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.day-item small{ color: var(--muted); font-size: 12px; }

/* ============ FINANZAS ============ */
.compare{ display: flex; flex-direction: column; gap: 12px; }
.compare-row{ display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.compare-row span{ color: var(--muted); font-weight: 500; }
.bar-track{ height: 12px; background: var(--ivory); border-radius: 99px; overflow: hidden; }
.bar{ height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.3,1); }
.bar.cur{ background: linear-gradient(90deg, var(--accent), #D4B67E); }
.bar.prev{ background: var(--sand); }
.compare-note{ font-size: 13px; font-weight: 600; margin-top: 4px; }
.compare-note.up{ color: var(--ok); }
.compare-note.down{ color: var(--bad); }
.pill-amount{ font-weight: 700; background: var(--ivory); padding: 5px 13px; border-radius: 99px; font-size: 13.5px; }
.fin-row{ cursor: pointer; }
.fin-table-head{
  display: grid; grid-template-columns: 1fr 110px 110px 110px; gap: 10px;
  padding: 6px 8px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.fin-table-row{
  display: grid; grid-template-columns: 1fr 110px 110px 110px; gap: 10px;
  align-items: center; padding: 12px 8px; border-top: 1px solid var(--line);
  font-size: 13.5px; cursor: pointer; border-radius: 10px;
  transition: background .15s;
}
.fin-table-row:hover{ background: var(--ivory); }
.fin-table-row small{ display: block; color: var(--muted); font-size: 12px; }
.ok-text{ color: var(--ok); font-weight: 600; }
.gold-text{ color: var(--accent); font-weight: 700; }

/* ============ PLANTILLAS ============ */
.tpl-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tpl-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s;
}
.tpl-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tpl-card h3{ font-size: 19px; }
.tpl-card p{ color: var(--muted); font-size: 13px; flex: 1; }
.tpl-meta{ display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.tpl-meta strong{ font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.tpl-gain{ font-size: 12px; color: var(--ok); font-weight: 600; }
.tpl-actions{ display: flex; gap: 8px; margin-top: 8px; }
.tpl-items-head{
  display: grid; grid-template-columns: 1fr 58px 108px 108px 34px; gap: 8px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 12px 2px 4px;
}
.tpl-item-row{
  display: grid; grid-template-columns: 1fr 58px 108px 108px 34px; gap: 8px;
  align-items: center; padding: 5px 0;
}

/* ============ CONFIGURACIÓN ============ */
.logo-upload{ display: flex; align-items: center; gap: 14px; }
.logo-preview{
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; background: var(--ivory);
  border: 1.5px dashed var(--sand); color: var(--muted);
  overflow: hidden;
}
.logo-preview img{ width: 100%; height: 100%; object-fit: cover; }
.logo-btns{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.color-pick{ display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.color-pick input[type="color"]{
  width: 52px; height: 40px; padding: 0; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); cursor: pointer;
}
.backup-btns{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ BUSCADOR / MÁS / BIENVENIDA ============ */
.search-modal-wrap .modal{ max-width: 560px; }
.search-h{
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 16px 0 6px;
}
.search-item{
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 12px; font-size: 14px;
  transition: background .15s;
}
.search-item:hover{ background: var(--ivory); }
.search-item > span{ flex: 1; min-width: 0; }
.search-item small{ color: var(--muted); }
#search-results{ margin-top: 14px; max-height: 50dvh; overflow-y: auto; }

.more-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600;
  transition: background .15s, transform .12s;
}
.more-item:hover{ background: var(--ivory); }
.more-item:active{ transform: scale(.96); }
.more-item .ic{ color: var(--accent); }

.welcome{ text-align: center; display: flex; flex-direction: column; gap: 14px; padding: 10px 4px; }
.welcome-mark{
  width: 64px; height: 64px; margin: 0 auto;
  display: grid; place-items: center; font-size: 26px;
  border-radius: 20px; background: linear-gradient(135deg, var(--ink), #3A2F24);
  color: var(--champagne); box-shadow: var(--shadow-md);
}
.welcome h2{ font-size: 26px; }
.welcome p{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.welcome form{ display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.welcome small{ color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ============ PANEL ADMIN (backoffice con interfaz propia) ============ */
body.admin-active #app{ display: none; }
#admin-root{ position: fixed; inset: 0; z-index: 400; background: var(--bg); overflow: auto; }
.admin-shell{ display: flex; min-height: 100dvh; }
.admin-side{
  width: 240px; flex: none;
  background: linear-gradient(180deg, #211B15, #16120D);
  color: #E8DCC8;
  display: flex; flex-direction: column; gap: 24px;
  padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
  position: sticky; top: 0; height: 100dvh;
}
.admin-logo{ display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 18px; color: #F6EFE2; padding: 0 6px; }
.admin-logo b{ color: var(--accent); font-weight: 500; }
.admin-nav{ display: flex; flex-direction: column; gap: 3px; }
.admin-nav-item{
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px;
  color: #C9BCA4; font-weight: 500; font-size: 14px;
  transition: background .15s, color .15s;
}
.admin-nav-item:hover{ background: rgba(232,220,200,.1); color: #F6EFE2; }
.admin-nav-item.on{ background: var(--accent); color: #1B1611; }
.admin-side-foot{ margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.admin-back{
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 10px 13px; border-radius: 10px; color: #9C8E79; font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.admin-back:hover{ background: rgba(232,220,200,.08); color: #E8DCC8; }
.admin-main{ flex: 1; min-width: 0; padding: 34px 34px 60px; max-width: 1120px; display: flex; flex-direction: column; gap: 20px; }
.admin-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-head h1{ font-size: 30px; }
.admin-sec{ font-family: var(--font-display); font-size: 20px; margin: 12px 0 -6px; }
.admin-denied{ min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
@media (max-width: 900px){
  .admin-shell{ flex-direction: column; }
  .admin-side{
    width: auto; height: auto; position: sticky; top: 0; z-index: 5;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-top));
    overflow-x: auto; scrollbar-width: none;
  }
  .admin-side::-webkit-scrollbar{ display: none; }
  .admin-logo span{ display: none; }
  .admin-nav{ flex-direction: row; gap: 4px; }
  .admin-nav-item{ padding: 8px 12px; white-space: nowrap; }
  .admin-side-foot{ margin: 0 0 0 auto; flex-direction: row; }
  .admin-back span{ display: none; }
  .admin-main{ padding: 20px 16px 50px; }
  .admin-head h1{ font-size: 24px; }
}

.admin-loading{ display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 40px 4px; font-size: 15px; }
.admin-plan{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-plan .plan-toggle{ padding: 5px 10px; font-size: 12px; }
.admin-users-head{ grid-template-columns: 1fr auto auto auto; }
.admin-user-row{ grid-template-columns: 1fr auto auto auto; align-items: center; }
.admin-user-row small{ display: block; color: var(--muted); font-size: 12px; }
.admin-seen{ display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 640px){
  .admin-users-head{ display: none; }
  .admin-user-row{ grid-template-columns: 1fr auto; }
  .admin-user-row span:nth-child(2){ display: none; }
}

/* ============ CAMPANITA / NOTIFICACIONES ============ */
.brand-txt{ min-width: 0; flex: 1; }
.brand > .bell-btn{ margin-left: auto; flex: none; }
.topbar-actions{ display: flex; align-items: center; gap: 2px; }
.bell-btn{ position: relative; }
.bell-badge{
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--bad); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 99px; border: 2px solid var(--bg);
}
.notif-panel{ display: flex; flex-direction: column; }
.notif-h{
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 16px 0 8px;
}
.notif-h:first-child{ margin-top: 4px; }
.notif-item{ display: flex; gap: 11px; padding: 10px 6px; border-top: 1px solid var(--line); }
.notif-item:first-of-type{ border-top: none; }
.notif-dot{ width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 99px; background: var(--sand); }
.notif-dot.news{ background: var(--accent); }
.notif-item.unread .notif-dot{ background: var(--rose-deep); box-shadow: 0 0 0 3px rgba(217,167,155,.25); }
.notif-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body strong{ font-size: 14px; }
.notif-body small{ color: var(--muted); font-size: 12.5px; }
.notif-date{ font-size: 11px !important; margin-top: 2px; }
.notif-reminders .reminder:first-child{ border-top: none; }

/* ============ PLANES / MURO DE PAGO ============ */
.plan-usage{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink-soft); }
.plan-usage span{ font-weight: 500; }
.paywall-reason{
  background: #F9F0DC; color: #9C7A2E; border-radius: 12px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin-bottom: 16px;
}
.paywall-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paywall-col{
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
}
.paywall-col.pro{
  border-color: var(--accent);
  background: linear-gradient(160deg, #FFFFFF, #FBF6EC);
  box-shadow: 0 6px 20px rgba(185,146,87,.15);
}
.paywall-plan{ font-family: var(--font-display); font-size: 18px; margin-bottom: 10px; }
.paywall-badge{ font-size: 14px; }
.paywall-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.paywall-list li{ font-size: 13px; line-height: 1.4; display: flex; align-items: flex-start; gap: 6px; }
.paywall-list.muted li{ color: var(--muted); }
.paywall-list .ic{ color: var(--ok); flex: none; margin-top: 1px; }
@media (max-width: 560px){ .paywall-cols{ grid-template-columns: 1fr; } }

.pdf-watermark{
  text-align: center; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed #E5DAC7;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #B6A588;
}

/* ============ PANTALLA DE ACCESO (AUTH) ============ */
body.auth-active #app{ display: none; }
#auth-root{ position: fixed; inset: 0; z-index: 500; }
.auth-screen{
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(232,220,200,.5), transparent 60%),
    radial-gradient(900px 420px at -10% 15%, rgba(242,222,216,.4), transparent 55%),
    var(--bg);
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; padding: 32px 26px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 16px;
}
.auth-brand{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-mark{
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 24px;
  border-radius: 18px; background: linear-gradient(135deg, var(--ink), #3A2F24);
  color: var(--champagne); box-shadow: var(--shadow-md); margin-bottom: 4px;
}
.auth-name{ font-family: var(--font-display); font-size: 24px; letter-spacing: .01em; }
.auth-tagline{ font-size: 12.5px; color: var(--muted); }
.auth-lang{ align-self: center; }
.auth-title{ font-size: 22px; text-align: center; margin-top: 4px; }
.auth-form{ display: flex; flex-direction: column; gap: 13px; }
.auth-form .btn.xl{ margin-top: 6px; }
.auth-links{ display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.auth-links .link{ font-size: 13.5px; }
.auth-foot{ text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.auth-msg{ font-size: 13px; border-radius: 12px; padding: 10px 14px; line-height: 1.45; }
.auth-msg.err{ background: #F8ECEA; color: #A85D54; }
.auth-msg.ok{ background: #EAF1E6; color: #587B4C; }

.auth-divider{ display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 2px 0; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background: var(--line); }
.auth-google-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; }

/* --- Variante ADMIN: oscura, sobria, tipo backoffice --- */
.auth-screen.admin-auth{
  background:
    radial-gradient(1000px 480px at 50% -12%, rgba(185,146,87,.18), transparent 60%),
    linear-gradient(180deg, #1B1611, #12100C);
}
.admin-auth .auth-card{
  background: #211B15;
  border: 1px solid #3A2F24;
  color: #F2EADB;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.admin-auth .auth-mark{
  background: linear-gradient(135deg, var(--accent), #D4B67E);
  color: #1B1611;
}
.admin-auth .auth-name{ color: #F6EFE2; letter-spacing: .02em; }
.admin-auth .admin-tag{
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--accent); border: 1px solid rgba(185,146,87,.5);
  border-radius: 6px; padding: 2px 7px; vertical-align: middle; margin-left: 6px;
}
.admin-auth .auth-tagline, .admin-auth .auth-foot{ color: #9C8E79; }
.admin-auth .auth-title{ color: #F6EFE2; }
.admin-auth .field-label{ color: #C9BCA4; }
.admin-auth .input{
  background: #2A231B; border: 1px solid #40352A; color: #F2EADB;
}
.admin-auth .input::placeholder{ color: #877A66; }
.admin-auth .input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(185,146,87,.2); }
.admin-auth .auth-admin-btn{
  background: linear-gradient(135deg, var(--accent), #D4B67E);
  color: #1B1611; box-shadow: 0 6px 18px rgba(185,146,87,.3);
}
.admin-auth .auth-links .link{ color: var(--accent); }

/* ============ PDF ============ */
#print-root{ display: none; }
.pdf-sheet{
  background: #fff; color: #262019;
  width: 100%; max-width: 210mm; margin: 0 auto;
  padding: 15mm 16mm;
  font-family: var(--font-body); font-size: 13px; line-height: 1.55;
}
.pdf-head{ text-align: center; margin-bottom: 22px; }
.pdf-logo{ max-height: 64px; max-width: 140px; object-fit: contain; margin-bottom: 8px; }
.pdf-brand{ font-family: var(--font-display); font-size: 24px; letter-spacing: .01em; }
.pdf-tagline{ font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: #9A8B77; margin-top: 2px; }
.pdf-rule{ width: 64px; height: 2px; background: var(--brand, #B99257); margin: 14px auto; border-radius: 2px; }
.pdf-title{ font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 29px; color: #262019; }
.pdf-meta{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  background: #FAF6EE; border-radius: 14px; padding: 16px 20px; margin-bottom: 18px;
}
.pdf-meta span{ display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #9A8B77; }
.pdf-meta strong{ font-size: 14px; }
.pdf-desc{ font-style: italic; color: #55493B; text-align: center; margin: 0 10px 18px; }
.pdf-includes h2{
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  border-bottom: 1px solid #EBE2D2; padding-bottom: 6px; margin-bottom: 10px;
}
.pdf-includes ul{ list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.pdf-includes li{ padding: 4px 0; break-inside: avoid; }
.pdf-includes em{ color: #9A8B77; font-style: normal; font-size: 12px; }
.pdf-check{ color: var(--brand, #B99257); font-weight: 700; margin-right: 8px; }
.pdf-total{ margin: 20px 0; }
.pdf-total-main{
  display: flex; justify-content: space-between; align-items: baseline;
  background: #262019; color: #FBF7EF;
  border-radius: 14px; padding: 16px 22px;
}
.pdf-total-main span{ font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #CBBFA8; }
.pdf-total-main strong{ font-family: var(--font-display); font-size: 30px; }
.pdf-total-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.pdf-total-split > div{
  border: 1px solid #EBE2D2; border-radius: 12px; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.pdf-total-split span{ font-size: 11.5px; color: #9A8B77; }
.pdf-total-split strong{ font-size: 16px; }
.pdf-terms{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pdf-terms h3{
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: #9A8B77; margin-bottom: 3px;
}
.pdf-terms p{ font-size: 12px; color: #55493B; }
.pdf-validity{ margin-top: 6px !important; }
.pdf-foot{ text-align: center; border-top: 1px solid #EBE2D2; padding-top: 16px; }
.pdf-closing{ font-style: italic; color: #55493B; margin-bottom: 10px; }
.pdf-sign{ font-family: var(--font-display); font-size: 20px; }
.pdf-contact{ font-size: 11px; color: #9A8B77; margin-top: 4px; }

.pdf-preview-wrap{
  background: var(--ivory); border-radius: var(--r-md);
  padding: 14px; overflow-y: auto; max-height: 60dvh;
}
.pdf-preview-wrap .pdf-sheet{ border-radius: 10px; box-shadow: var(--shadow-md); padding: 26px 28px; }

@media print{
  body{ background: #fff; }
  #app, #modal-root, #toast-root{ display: none !important; }
  #print-root{ display: block !important; }
  .pdf-sheet{ max-width: none; padding: 0; }
  @page{ margin: 14mm 13mm; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  #sidebar{ display: none; }
  #topbar{ display: flex; }
  #bottomnav{ display: grid; }
  .page{ padding: 20px 16px calc(110px + env(safe-area-inset-bottom)); gap: 16px; }
  .page-head h1{ font-size: 26px; }
  .two-col{ grid-template-columns: 1fr; }
  .editor-bar{ top: 54px; margin: -8px -4px 0; }
}
@media (max-width: 640px){
  .form-grid.two, .form-grid.four{ grid-template-columns: 1fr 1fr; }
  .quick-actions{ gap: 8px; }
  .qa{ flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; font-size: 12px; }
  .kpi{ padding: 15px; }
  .card{ padding: 16px; border-radius: 18px; }
  .item-head-row{ display: none; }
  .item-row{
    grid-template-columns: 1fr 1fr; gap: 8px;
    background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 12px; margin-top: 10px;
  }
  .item-main{ grid-column: 1 / -1; }
  .item-qty{ grid-column: auto; }
  .item-qty::before{ content: ''; }
  .item-cost, .item-price{ grid-column: auto; }
  .item-btns{ grid-column: 1 / -1; justify-content: flex-end; border-top: 1px dashed var(--sand); padding-top: 8px; }
  .item-row .item-qty{ max-width: 90px; }
  .calc-split{ grid-template-columns: 1fr; }
  .fin-table-head{ display: none; }
  .fin-table-row{ grid-template-columns: 1fr auto; }
  .fin-table-row span:nth-child(3){ display: none; }
  .cal-cell{ min-height: 54px; padding: 5px; }
  .cal-tag{ display: none; }
  .editor-actions .btn{ flex: 1 1 45%; }
  .tpl-items-head{ display: none; }
  .tpl-item-row{ grid-template-columns: 1fr 50px 34px; }
  .tpl-item-row .input-prefix{ grid-column: span 1; }
  .compare-row{ grid-template-columns: 84px 1fr auto; }
  .pdf-includes ul{ columns: 1; }
}

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