*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #F5EFE4;
  --card:   #FFFFFF;
  --pri:    #EF9F27;
  --pri-d:  #C87D10;
  --pri-l:  #FAEEDA;
  --ok:     #1D9E75;
  --ok-l:   #E3F5EE;
  --err:    #E24B4A;
  --err-l:  #FDEAEA;
  --warn:   #F59E0B;
  --warn-l: #FEF3C7;
  --info:   #3B82F6;
  --info-l: #DBEAFE;
  --txt:    #412402;
  --mut:    #9A7B5A;
  --bdr:    #E8D5B5;
  --shd:    rgba(65,36,2,0.11);
  --r:      16px;
  --rs:     10px;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

/* ── HEADER ── */
.topbar { position: sticky; top: 0; z-index: 200; }
.hdr {
  background: linear-gradient(135deg, #EF9F27 0%, #C87D10 100%);
  border: none;
  padding: 1.25rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  position: relative;
  top: 0;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(65,36,2,0.22);
}

/* ── CUENTI BRAND ── */
/* ── CUENTI LOGO COMPONENT ── */
.pema-brand { display: flex; align-items: center; }

.pema-logo { display: inline-flex; flex-direction: column; }
.pema-logo-l1 { display: flex; align-items: center; gap: 0.42rem; }
.pema-logo-word { font-family: 'Nunito', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; }
.pema-logo-sw { width: 56px; height: 28px; background: #fff; border: 2px solid #EF9F27; box-sizing: border-box; border-radius: 14px; padding: 3px; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; }
.pema-logo-sw-knob { width: 22px; height: 22px; border-radius: 50%; background: #EF9F27; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.18); animation: pema-sw-knob 20.9s ease-in-out infinite; }
.pema-logo-l2 { display: flex; align-items: baseline; gap: 0.2rem; line-height: 1; margin-top: 0.1rem; }
.pema-logo-modo { font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: -0.03em; }
.pema-logo-ahorro { font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: -0.03em; }
.pema-logo-sep { height: 1px; margin: 0.35rem 0 0.2rem; }
.pema-logo-l3 { font-family: 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

/* Variante header de la app (fondo naranja) */
.pema-logo--app .pema-logo-lphdr-wrap { display: flex; align-items: center; gap: 0.65rem; }
.pema-logo--app .pema-logo-lphdr-name { display: flex; flex-direction: column; }
.pema-logo--app .pema-logo-mark { position: relative; width: 42px; height: 42px; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pema-logo--app .pema-logo-mark-badge { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; background: #412402; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.pema-logo--app .pema-logo-modo { font-size: 1.5rem; color: #412402; }
.pema-logo--app .pema-logo-ahorro { font-size: 1.5rem; color: #fff; }
.pema-logo--app .pema-logo-sep { background: rgba(255,255,255,0.38); }
.pema-logo--app .pema-logo-l3 { font-size: 0.5rem; color: rgba(255,255,255,0.72); }

/* Variante login (fondo crema, tamaño grande) */
.pema-logo--login { margin-bottom: 2rem; }
.pema-logo--login .pema-logo-lphdr-wrap { display: flex; align-items: center; gap: 1rem; }
.pema-logo--login .pema-logo-lphdr-name { display: flex; flex-direction: column; }
.pema-logo--login .pema-logo-mark { position: relative; width: 64px; height: 64px; background: #EF9F27; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pema-logo--login .pema-logo-mark-badge { position: absolute; bottom: -5px; right: -5px; width: 24px; height: 24px; background: #412402; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.pema-logo--login .pema-logo-modo { font-size: 2rem; color: #412402; }
.pema-logo--login .pema-logo-ahorro { font-size: 2rem; color: #EF9F27; }
.pema-logo--login .pema-logo-sep { background: #E8D5BB; }
.pema-logo--login .pema-logo-l3 { font-size: 0.55rem; color: #B4906A; }

/* Variante header landing (fondo crema) */
.pema-logo--lphdr .pema-logo-lphdr-wrap { display: flex; align-items: center; gap: 0.75rem; }
.pema-logo--lphdr .pema-logo-lphdr-name { display: flex; flex-direction: column; }
.pema-logo--lphdr .pema-logo-modo { font-size: 1.1rem; color: #412402; }
.pema-logo--lphdr .pema-logo-ahorro { font-size: 1.1rem; color: #EF9F27; }
.pema-logo--lphdr .pema-logo-sep { background: #E8D5BB; margin: 0.22rem 0 0.12rem; }
.pema-logo--lphdr .pema-logo-l3 { font-size: 0.44rem; color: #B4906A; }
/* Mark: cuadrado naranja con chanchito y chapita calculadora */
.pema-logo--lphdr .pema-logo-mark { position: relative; width: 46px; height: 46px; background: #EF9F27; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pema-logo--lphdr .pema-logo-mark-badge { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; background: #412402; border-radius: 6px; display: flex; align-items: center; justify-content: center; }


@keyframes pema-sw-knob {
  /* Duración total: 20.9s — OFF 10s | slide→ON 0.6s | ON 10s | slide→OFF 0.3s */
  0%, 48%  { transform: translateX(0); }
  51%, 99% { transform: translateX(24px); }
  100%     { transform: translateX(0); }
}

/* Switch animado del hero de la landing */
.lp-hero-sw-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.lp-hero-sw-lbl {
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.lp-hero-sw {
  width: 160px; height: 80px;
  position: relative;
  background-color: rgba(255,255,255,0.25);
  background-image: linear-gradient(to right, rgba(0,0,0,0.12) 50%, rgba(255,255,255,0.12) 50%);
  border: 3px solid rgba(255,255,255,0.5); box-sizing: border-box;
  border-radius: 40px;
  cursor: pointer;
}
.lp-hero-sw-knob {
  position: absolute; left: 6px; top: 3px;
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: transform 0.5s ease-in-out;
}
.lp-hero-sw.sw-on .lp-hero-sw-knob { transform: translateX(80px); }
.lp-hero-activalo {
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem; font-weight: 900;
  color: #fff; text-transform: uppercase; letter-spacing: 0.14em;
  transition: opacity 0.4s ease-in-out;
}

/* ── SELECTORES ── */
.month-sel {
  background: #FCF7EE;
  border: 1px solid #E8C98F;
  color: #412402;
  height: 42px;
  box-sizing: border-box;
  padding: 0 0.9rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.month-sel:focus { outline: none; background: #FFF8EC; border-color: #C87D10; }
.month-sel option { background: #fff; color: #412402; }

/* ── GOOGLE DRIVE SYNC UI ── */
.gdr-wrap { display: flex; align-items: center; }

.gdr-signin {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: none;
  color: #412402;
  padding: 0.5rem 1rem;
  border-radius: var(--rs);
  font-size: 0.84rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.18s, transform 0.12s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gdr-signin:hover { filter: brightness(0.96); transform: translateY(-1px); }
.gdr-signin-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.gdr-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FCF7EE;
  border: 1px solid #E8C98F;
  border-radius: 12px;
  height: 42px;
  box-sizing: border-box;
  padding: 0 0.75rem 0 0.6rem;
}

.gdr-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #E8C98F;
  color: #412402;
  font-size: 0.85rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.gdr-info { display: flex; flex-direction: column; line-height: 1.25; max-width: 160px; }

.gdr-email-txt {
  font-size: 0.72rem; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gdr-status-txt { display: none; }

.gdr-signout {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap;
}
.gdr-signout:hover { background: rgba(255,255,255,0.35); }

/* ── NAV ── */
.nav {
  background: var(--card);
  border-bottom: 2px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.875rem 1.75rem;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(65,36,2,0.05);
}

.nav-btn {
  background: var(--card);
  border: 2px solid var(--bdr);
  border-radius: 14px;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  color: var(--txt);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  letter-spacing: 0.01em;
  text-align: center;
  flex-shrink: 0;
}
.nav-btn:hover { border-color: var(--pri); color: var(--pri); }
.nav-btn.active {
  background: var(--pri);
  color: #fff;
  border-color: var(--pri);
  box-shadow: 0 3px 14px rgba(239,159,39,0.38);
}

/* ── LAYOUT ── */
.main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.75rem; }
.tab { display: none; }
.tab.active { display: block; }

/* ── ACTION BUTTONS (+ Ingreso / + Gasto) ── */
.action-btns { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.action-btn {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--bdr);
  border-radius: var(--r);
  background: var(--card);
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  box-shadow: 0 2px 8px var(--shd);
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(65,36,2,0.12);
}
.ab-inc:hover { border-color: var(--ok); }
.ab-exp:hover { border-color: var(--err); }
.ab-goa:hover { border-color: var(--pri); }
.ab-inv:hover { border-color: var(--info); }

.action-btn.ab-inc.active {
  border-color: var(--ok);
  background: var(--ok);
  box-shadow: 0 6px 20px rgba(29,158,117,0.3);
  transform: translateY(-1px);
}
.action-btn.ab-exp.active {
  border-color: var(--err);
  background: var(--err);
  box-shadow: 0 6px 20px rgba(226,75,74,0.3);
  transform: translateY(-1px);
}
.action-btn.ab-goa.active {
  border-color: var(--pri);
  background: var(--pri);
  box-shadow: 0 6px 20px rgba(239,159,39,0.35);
  transform: translateY(-1px);
}
.action-btn.ab-inv.active {
  border-color: var(--info);
  background: var(--info);
  box-shadow: 0 6px 20px rgba(59,130,246,0.35);
  transform: translateY(-1px);
}

.ab-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
  transition: background 0.25s, transform 0.25s;
}
.ab-inc .ab-icon { background: var(--ok-l); }
.ab-inc.active .ab-icon { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.ab-exp .ab-icon { background: var(--err-l); }
.ab-exp.active .ab-icon { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.ab-goa .ab-icon { background: var(--pri-l); }
.ab-goa.active .ab-icon { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.ab-inv .ab-icon { background: var(--info-l); }
.ab-inv.active .ab-icon { background: rgba(255,255,255,0.22); transform: scale(1.08); }

.ab-txt { flex: 1; }
.ab-txt strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  transition: color 0.25s;
}
.ab-inc .ab-txt strong { color: var(--ok); }
.ab-inc.active .ab-txt strong { color: #fff; }
.ab-exp .ab-txt strong { color: var(--err); }
.ab-exp.active .ab-txt strong { color: #fff; }
.ab-goa .ab-txt strong { color: var(--pri-d); }
.ab-goa.active .ab-txt strong { color: #fff; }
.ab-inv .ab-txt strong { color: var(--info); }
.ab-inv.active .ab-txt strong { color: #fff; }
.ab-txt span {
  font-size: 0.78rem;
  color: var(--mut);
  font-weight: 600;
  transition: color 0.25s;
}
.action-btn.active .ab-txt span { color: rgba(255,255,255,0.82); }

.ab-chev {
  font-size: 1.2rem;
  color: var(--mut);
  transition: transform 0.3s ease, color 0.25s;
  flex-shrink: 0;
}
.action-btn.active .ab-chev { transform: rotate(180deg); color: rgba(255,255,255,0.85); }

/* ── FORM PANELS (accordion) ── */
.form-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1);
}
.form-panel.open { max-height: 1400px; overflow: visible; }
.form-panel { scroll-margin-top: 80px; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab.active { animation: fadeInUp 0.32s ease forwards; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── FORM VALIDATION ── */
.field.has-error input, .field.has-error select {
  border-color: var(--err) !important;
  box-shadow: 0 0 0 3px rgba(226,75,74,0.15) !important;
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}
}
.err-msg {
  font-size: 0.72rem; color: var(--err); font-weight: 700;
  display: none;
}
.field.has-error .err-msg { display: block; }

/* ── CURRENCY ROW ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Todos los inputs/selects/textareas usan el marrón de marca (los navegadores defaultean negro) */
input, select, textarea { color: var(--txt); font-family: 'Nunito', sans-serif; }
::placeholder { color: var(--mut); opacity: 1; }

/* ── HEADER MOTIVATOR ── */
.hdr-left { justify-self: start; display: flex; align-items: center; gap: 0.4rem; }
.hdr-motivator { justify-self: center; text-align: center; min-width: 0; overflow: hidden; }
.hdr-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.hdr-mot-txt { font-size: 1rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; transition: opacity 0.55s ease; text-shadow: 0 1px 4px rgba(0,0,0,0.22); }
.hdr-mot-txt.fade { opacity: 0; }
@media (max-width: 640px) { .hdr-motivator { display: none; } }

/* ── SECTION CONTROLS BAR ── */
.section-controls { background: var(--card); border-bottom: 2px solid var(--bdr); padding: 0.6rem 1.75rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.section-controls .sec-month-lbl { font-size: 0.85rem; font-weight: 800; color: var(--pri); letter-spacing: 0.03em; }
.sec-hoy-btn { background: var(--pri); color: #fff; border: none; font-weight: 800; font-size: 0.85rem; padding: 0.4rem 0.95rem; border-radius: var(--rs); cursor: pointer; font-family: 'Nunito', sans-serif; }
.sec-hoy-btn:hover { background: #C87D10; }
.inv-tips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; }
@media (max-width:900px){ .inv-tips-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .inv-tips-grid { grid-template-columns:1fr; } }
.sec-sel { background: var(--bg); border: 1.5px solid var(--bdr); color: var(--txt); padding: 0.45rem 0.8rem; border-radius: var(--rs); font-size: 0.875rem; font-weight: 700; font-family: 'Nunito', sans-serif; cursor: pointer; }
.sec-sel:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(239,159,39,0.15); }
#monthSel { background: rgba(239,159,39,0.13); border: 2px solid var(--pri); color: var(--pri); font-size: 1.05rem; font-weight: 900; padding: 0.5rem 1.1rem; border-radius: var(--rs); font-family: 'Nunito', sans-serif; cursor: pointer; }
#monthSel:focus { outline: none; box-shadow: 0 0 0 3px rgba(239,159,39,0.22); }
.cur-sel {
  flex-shrink: 0; align-self: flex-end;
  padding: 0.55rem 0.6rem;
  border: 1.5px solid var(--bdr);
  border-radius: var(--rs);
  font-size: 0.82rem; font-family: 'Nunito', sans-serif; font-weight: 700;
  color: var(--txt); background: #fff; cursor: pointer;
  transition: border-color 0.18s;
}
.cur-sel:focus { outline: none; border-color: var(--pri); }

/* ── CATEGORY ROW ── */
.cat-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.cat-row .field { flex: 1; }
.btn-add-cat {
  flex-shrink: 0; align-self: flex-end;
  width: 36px; height: 36px;
  background: var(--pri-l); border: 1.5px solid var(--bdr);
  border-radius: var(--rs); font-size: 1.3rem; font-weight: 900;
  color: var(--pri-d); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; line-height: 1;
}
.btn-add-cat:hover { background: var(--pri); color: #fff; border-color: var(--pri); }

/* ── CANCEL BUTTON ── */
.btn-cancel {
  background: transparent; color: var(--mut);
  border: 1.5px solid var(--bdr);
}
.btn-cancel:hover { background: var(--bg); color: var(--txt); border-color: var(--mut); }

/* ── FORM ACTION ROW ── */
.form-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }

/* ── TABLE ROW COLORS ── */
tbody tr.row-inc td { background: #f0faf6; }
tbody tr.row-exp td { background: #fef4f4; }
tbody tr.row-inc:hover td { background: #e3f5ee; }
tbody tr.row-exp:hover td { background: #fdeaea; }

.mov-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  margin-right: 0.3rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.arrow-up { background: var(--ok-l);  color: var(--ok); }
.arrow-dn { background: var(--err-l); color: var(--err); }

.td-amount {
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}

/* ── CARD ── */
.card {
  background: var(--card);
  border-radius: var(--r);
  padding: 1.75rem;
  border: 1.5px solid var(--bdr);
  box-shadow: 0 4px 20px var(--shd), 0 1px 4px rgba(65,36,2,0.05);
  margin-bottom: 1.5rem;
}

.card-ttl {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── SUMMARY CARDS ── */
.sum-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 600px) { .sum-row { grid-template-columns: 1fr; } }

.sc {
  background: var(--card);
  border-radius: var(--r);
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  border: 1.5px solid var(--bdr);
  box-shadow: 0 4px 20px var(--shd);
  border-left: 5px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sc:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(65,36,2,0.14); }
.sc.inc { border-left-color: var(--ok); }
.sc.exp { border-left-color: var(--err); }
.sc.bal { border-left-color: var(--pri); }

.sc .lbl {
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mut);
  margin-bottom: 0.5rem;
}
.sc .amt {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sc.inc .amt { color: var(--ok); }
.sc.exp .amt { color: var(--err); }

/* ── FORM ── */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 1rem;
}
.fgrid > * { min-width: 0; }  /* evita overflow de contenido sobre celda vecina */
@media (max-width: 480px) { .fgrid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.78rem; font-weight: 700; color: var(--mut); letter-spacing: 0.02em; }

.field input,
.field select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--bdr);
  border-radius: var(--rs);
  font-size: 0.9rem;
  font-family: 'Nunito', sans-serif;
  color: var(--txt);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(239,159,39,0.15);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.72rem 1.5rem;
  border: none;
  border-radius: var(--rs);
  font-size: 0.925rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: filter 0.18s, transform 0.15s, box-shadow 0.18s;
  line-height: 1;
  letter-spacing: 0.01em;
}
.btn:hover { filter: brightness(0.92); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(65,36,2,0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-pri { background: var(--pri); color: #fff; box-shadow: 0 3px 10px rgba(239,159,39,0.3); }
.btn-ok  { background: var(--ok);  color: #fff; box-shadow: 0 3px 10px rgba(29,158,117,0.3); }
.btn-err { background: var(--err); color: #fff; box-shadow: 0 3px 10px rgba(226,75,74,0.25); }
.btn-sm  { padding: 0.32rem 0.7rem; font-size: 0.78rem; border-radius: 6px; box-shadow: none; }
.btn-sm:hover { box-shadow: none; transform: none; }
.btn-edit { background: var(--pri); color: #fff; box-shadow: 0 3px 10px rgba(239,159,39,0.25); }
.btn-edit:hover { background: var(--pri-d); }
.grp-actions { display: flex; gap: 8px; flex-shrink: 0; }
.mt { margin-top: 1.5rem; }

/* ── TABLE ── */
.twrap { overflow-x: auto; border-radius: var(--rs); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  background: var(--pri-l);
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mut);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--rs) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--rs) 0 0; }
tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--bdr);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fffbf5; }

/* ── MOVIMIENTOS AGRUPADOS ── */
.grp-section-hdr {
  padding: 0.65rem 1.5rem 0.3rem;
  font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mut);
}
.grp-section-hdr:not(:first-child) { border-top: 2px solid var(--bdr); margin-top: 0.25rem; }
.grp-section-exp { color: var(--err); }
.grp-section-inc { color: var(--ok); }

.grp-block { border-bottom: 1px solid var(--bdr); border-left: 4px solid var(--err); }
.grp-block:last-of-type { border-bottom: none; }

.grp-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.5rem;
  background: rgba(0,0,0,0.02);
  cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.grp-header:hover { background: rgba(0,0,0,0.055); }
.grp-header-inc { background: rgba(52,199,89,0.05); }
.grp-header-inc:hover { background: rgba(52,199,89,0.1); }
.grp-icon  { font-size: 1rem; flex-shrink: 0; }
.grp-name  { flex: 1; font-weight: 900; font-size: 0.83rem; letter-spacing: 0.03em; color: var(--txt); }
.grp-count { font-size: 0.7rem; color: var(--mut); font-weight: 700;
             background: var(--bdr); padding: 1px 7px; border-radius: 99px; }
.grp-preview { font-weight: 800; font-size: 0.85rem; }
.grp-chev  { color: var(--mut); font-size: 0.82rem; margin-left: 0.15rem; flex-shrink:0; }

.grp-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.5rem 0.5rem 2.75rem;
  border-bottom: 1px solid var(--bdr);
  font-size: 0.855rem; transition: background 0.12s;
}
.grp-row:last-of-type { border-bottom: none; }
.grp-row-exp { background: var(--card); }
.grp-row-exp:hover { background: #f5f0e8; }
.grp-row-inc { background: #f5fbf8; }
.grp-row-inc:hover { background: #e9f7f0; }
.grp-date { color: var(--mut); font-size: 0.77rem; white-space: nowrap; min-width: 60px; flex-shrink:0; }
.grp-desc { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-pay  { font-size: 0.77rem; color: var(--mut); white-space: nowrap; min-width:60px; flex-shrink:0; }
.grp-meta { color: var(--mut); font-size: 0.82em; }
.grp-amt  { font-weight: 800; white-space: nowrap; text-align: right; min-width: 80px; flex-shrink:0; line-height: 1.25; }
.grp-amt .grp-meta { display: block; font-weight: 700; }

.grp-subtotal {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.42rem 1.5rem 0.42rem 2.75rem;
  background: rgba(0,0,0,0.035);
  font-size: 0.81rem; font-weight: 900; color: var(--txt);
  border-top: 1px solid var(--bdr);
}

/* ── BLOQUES ESPECIALES: Metas e Inversiones dentro de Salidas ── */
.grp-block-goa                      { border-left: 4px solid var(--pri); }
.grp-block-goa .grp-header          { background: rgba(239,159,39,0.10); }
.grp-block-goa .grp-header:hover    { background: rgba(239,159,39,0.19); }
.grp-block-goa .grp-row             { background: #fffbf0; }
.grp-block-goa .grp-row:hover       { background: #fef3d0; }
.grp-block-goa .grp-subtotal        { background: rgba(239,159,39,0.12); border-top-color: rgba(239,159,39,0.25); }

.grp-block-inv                      { border-left: 4px solid var(--info); }
.grp-block-inv .grp-header          { background: rgba(59,130,246,0.08); }
.grp-block-inv .grp-header:hover    { background: rgba(59,130,246,0.16); }
.grp-block-inv .grp-row             { background: #f0f7ff; }
.grp-block-inv .grp-row:hover       { background: #dbeafe; }
.grp-block-inv .grp-subtotal        { background: rgba(59,130,246,0.10); border-top-color: rgba(59,130,246,0.22); }
.grp-block-inc                      { border-left: 4px solid var(--ok); }
.grp-block-inc .grp-header          { background: rgba(52,199,89,0.06); }
.grp-block-inc .grp-header:hover    { background: rgba(52,199,89,0.12); }
.grp-block-inc .grp-subtotal        { background: rgba(52,199,89,0.10); border-top-color: rgba(52,199,89,0.22); }

/* ── COLUMNA INGRESOS: borde lateral verde ── */
.mov-col-inc { border-left: 4px solid var(--ok); }

.grp-totals {
  border-top: 2px solid var(--bdr);
  padding: 0.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.grp-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.28rem 0; font-size: 0.9rem; font-weight: 700; color: var(--txt);
}
.grp-tot-balance {
  margin-top: 0.4rem; padding-top: 0.45rem;
  border-top: 1.5px solid var(--bdr);
  font-size: 1rem; font-weight: 900;
}
/* ── MOBILE: grid vertical de filas (≤640px) ──────────────────────────────
   Fila 1: [fecha          | ✏ ✕]
   Fila 2: [descripción completa ]
   Fila 3: [       monto →→→→→→ ]
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .grp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date    actions"
      "desc    desc"
      "amt     amt";
    gap: 0.1rem 0.5rem;
    padding: 0.55rem 0.9rem 0.55rem 1.1rem;
  }
  .grp-date    { grid-area: date;    align-self: center; }
  .grp-actions { grid-area: actions; align-self: center; }
  .grp-desc    {
    grid-area: desc;
    white-space: normal; overflow: hidden;
    font-size: 0.88rem; line-height: 1.4;
  }
  .grp-amt     {
    grid-area: amt;
    text-align: right; white-space: normal;
    font-weight: 800;
  }
  .grp-pay     { display: none; }
  .grp-subtotal { padding-left: 1.1rem; }
}

/* ── DETALLE 2 COLUMNAS (tab Resumen de Movimientos) ── */
.mov-cols-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
}
.mov-col {
  background: var(--card);
  border-radius: var(--rs);
  border: 1.5px solid var(--bdr);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mov-col-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.77rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1.5px solid var(--bdr);
}
.mov-col-hdr-inc { background: var(--ok-l); color: #0D7A56; }
.mov-col-hdr-exp { background: var(--err-l); color: #B83130; }
.mov-col-hdr-goa { background: var(--pri-l); color: var(--pri-d); }
.mov-col-hdr-inv { background: var(--info-l); color: #1d4ed8; }
.mov-col-body { flex: 1; }
.mov-col-body > .grp-row { padding-left: 1.25rem; }
.mov-col-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.25rem;
  border-top: 2px solid var(--bdr);
  font-size: 0.88rem;
  font-weight: 900;
  background: rgba(0,0,0,0.025);
}
.mov-totals-bar {
  padding: 0.9rem 1.5rem;
  border-top: 2px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--txt);
  flex-wrap: wrap;
  background: rgba(0,0,0,0.02);
}
.mov-totals-resto { font-size: 1.05rem; font-weight: 900; }
@media (max-width: 768px) {
  .mov-cols-wrap { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
}

/* ── BADGES ── */
.badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.b-inc   { background: var(--ok-l);  color: #0D7A56; }
.b-exp   { background: var(--err-l); color: #B83130; }
.b-first { background: #DBEAFE;      color: #1E40AF; }
.b-cap   { background: var(--pri-l); color: #8B5000; }
.b-obl   { background: #F3E8FF;      color: #6B21A8; }
.b-gift  { background: #FCE7F3;      color: #9D174D; }

.c-inc { color: var(--ok);  font-weight: 700; }
.c-exp { color: var(--err); font-weight: 700; }
.c-goa { color: var(--pri-d); font-weight: 700; }
.c-inv { color: var(--info);  font-weight: 700; }

/* ── CHARTS ── */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.chbox { position: relative; height: 270px; }
.chbox-lg { height: 300px; }

/* ── GOALS ── */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

/* ── INVERSIONES ── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  border: 1.5px solid;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.inv-badge-accion   { color: #6366f1; background: #eef2ff; border-color: #c7d2fe; }
.inv-badge-plazo    { color: #059669; background: #ecfdf5; border-color: #a7f3d0; }
.inv-badge-proyecto { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.inv-notes { font-size: 0.8rem; color: var(--mut); font-style: italic; margin-top: 0.35rem; line-height: 1.45; }
.inv-summary { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.inv-sum-total {
  background: var(--pri);
  color: #fff;
  border-radius: var(--rs);
  padding: 0.9rem 1.25rem;
  font-weight: 900;
  font-size: 1.1rem;
  flex: 1;
  min-width: 180px;
}
.inv-sum-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}
.inv-sum-type {
  background: var(--card);
  border: 1.5px solid var(--bdr);
  border-radius: var(--rs);
  padding: 0.9rem 1.25rem;
  flex: 1;
  min-width: 160px;
}
.inv-sum-type .inv-sum-lbl { opacity: 1; color: var(--mut); }
.inv-sum-type .inv-sum-val { font-weight: 900; font-size: 1rem; color: var(--txt); }
.inv-aporte-amt { font-weight: 700; color: var(--ok); }
.btn-add-inv-type { width:36px; height:36px; background:var(--pri); color:#fff; border:none; border-radius:var(--rs); font-size:1.3rem; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; line-height:1; padding:0; }
.btn-add-inv-type:hover { background:var(--pri-d); }
.add-inv-type-panel { display:none; gap:6px; align-items:center; margin-top:0.5rem; flex-wrap:wrap; }
.add-inv-type-panel input { flex:1; min-width:140px; }
.inv-type-manage-link { font-size:0.73rem; color:var(--pri); background:none; border:none; cursor:pointer; padding:0; font-weight:700; text-decoration:underline; margin-top:0.3rem; display:none; }
.inv-type-manage-link:hover { color:var(--pri-d); }
.inv-custom-types-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:0.5rem; }
.inv-custom-type-tag { display:inline-flex; align-items:center; gap:4px; font-size:0.78rem; font-weight:700; background:var(--card); border:1.5px solid var(--bdr); border-radius:20px; padding:0.15rem 0.55rem; color:var(--txt); }
.inv-custom-type-tag .tag-del { background:none; border:none; cursor:pointer; color:var(--err); font-size:0.7rem; padding:0; line-height:1; font-weight:900; }

.gcrd {
  background: var(--card);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 4px 20px var(--shd);
}

.gcrd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.125rem;
}
.gcrd-head h3 { font-size: 1.05rem; font-weight: 900; color: var(--txt); margin: 0; line-height: 1.3; }

.grow { display: flex; justify-content: space-between; align-items: center; font-size: 0.845rem; margin-bottom: 0.45rem; }
.grow .gl { color: var(--mut); }
.grow .gv { font-weight: 700; }
.grow .gh { color: var(--pri); font-weight: 900; }

.ptrack {
  height: 10px;
  background: var(--bdr);
  border-radius: 99px;
  overflow: hidden;
  margin: 1rem 0 0.4rem;
}
.pfill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ok) 0%, #6ee7b7 100%);
  transition: width 0.5s ease;
}
.plbls {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--mut);
  margin-bottom: 1rem;
}
.pct-lbl { font-weight: 900; color: var(--ok); }

/* ── APORTE BUTTON ── */
.btn-reg-aporte { width: 100%; justify-content: center; margin-top: 0; }

/* ── APORTE PANEL ── */
.aporte-panel { margin-top: 0; }
.aporte-form {
  background: var(--pri-l);
  border: 1.5px solid rgba(239,159,39,0.25);
  border-radius: var(--rs);
  padding: 1rem 1rem 0.25rem;
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── APORTE HISTORY ── */
.aporte-hist {
  margin-top: 1.125rem;
  border-top: 1.5px solid var(--bdr);
  padding-top: 0.875rem;
}
.aporte-hist-ttl {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mut);
  margin-bottom: 0.625rem;
}
.aporte-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--bdr);
  font-size: 0.845rem;
}
.aporte-row:last-child { border-bottom: none; }
.aporte-date { color: var(--mut); flex: 1; }
.aporte-amt  { font-weight: 900; color: var(--ok); }

/* ── SC ICON ── */
.sc-ico { font-size: 1.6rem; margin-bottom: 0.5rem; line-height: 1; }

/* ── EMPTY ── */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--mut); font-size: 0.9rem; }

/* ── TOAST ── */
#toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  background: var(--txt);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--rs);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 4px 16px rgba(65,36,2,0.2);
  z-index: 9999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) { .main { padding: 1.25rem 1rem; } .hdr { padding: 1.125rem 1rem; } .nav { padding: 0.625rem 1rem; } }

/* ── MODAL OVERLAY ── */
.btn-ghost { background: var(--bdr); color: var(--txt); }

/* ── TOOLS CARD (exportar) ── */
.tools-card {
  background: var(--pri-l);
  border-color: rgba(239,159,39,0.3);
}
.tools-btns { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0; }
.tools-hint {
  font-size: 0.75rem;
  color: var(--mut);
  margin-top: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
}
.btn-tool-excel { background: var(--ok); color: #fff; box-shadow: 0 3px 10px rgba(29,158,117,0.3); }

/* ── PDF EXPORT BTN (Resumen) ── */
.btn-pdf { background: #412402; color: #fff; box-shadow: 0 3px 10px rgba(65,36,2,0.2); }
.res-export-row { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }

/* ── SC ICON ── */
.sc-ico { font-size: 1.6rem; margin-bottom: 0.35rem; line-height: 1; }
.sc .amt { font-size: 2.1rem; }

/* ── GOALS SUMMARY CARD (en Resumen) ── */
.goals-sum-card { background: linear-gradient(135deg, #F5EFE4 0%, #fff 60%); }

/* ── ONBOARDING OVERLAY (post login) ── */
#onboard-overlay {
  position: fixed; inset: 0;
  background: rgba(65,36,2,0.55);
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  transition: opacity 0.35s;
}
.onb-box {
  background: #fff; border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
  max-width: 480px; width: 100%;
  box-shadow: 0 32px 80px rgba(65,36,2,0.3);
  text-align: center;
  animation: lscIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.onb-hi { font-size: 3rem; margin-bottom: 0.5rem; }
.onb-title {
  font-size: 1.7rem; font-weight: 900; color: var(--txt);
  line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.onb-title span { color: var(--pri); }
.onb-sub {
  font-size: 0.9rem; color: var(--mut); font-weight: 600;
  margin-bottom: 1.75rem; line-height: 1.5;
}
.onb-steps { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.75rem; text-align: left; }
.onb-step {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem 1rem; background: var(--bg); border-radius: 12px;
  border: 1.5px solid var(--bdr); font-size: 0.88rem; font-weight: 600;
}
.onb-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pri) 0%, var(--pri-d) 100%);
  color: #fff; font-size: 0.82rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.onb-cta {
  width: 100%; padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--pri) 0%, var(--pri-d) 100%);
  color: #fff; border: none; border-radius: 14px;
  font-size: 1.05rem; font-weight: 900; font-family: 'Nunito', sans-serif;
  cursor: pointer; box-shadow: 0 6px 22px rgba(239,159,39,0.42);
  transition: transform 0.18s, filter 0.18s;
}
.onb-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ── LOGIN SCREEN ── */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: row;
  z-index: 400;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

/* Panel izquierdo — motivacional */
.lsc-left {
  flex: 1;
  background: linear-gradient(135deg, #EF9F27 0%, #C87D10 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  text-align: center;
  gap: 1.25rem;
}
.lsc-pig {
  font-size: 100px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.2));
}
.lsc-headline {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
  max-width: 340px;
}
.lsc-subline {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-size: 1.05rem;
}
.lsc-pills {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}
.lsc-pill {
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  font-size: 0.84rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
}

/* Panel derecho — login */
.lsc-right {
  flex: 1;
  background: #FDF6EA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  position: relative;
  overflow-y: auto;
}

.lsc-box {
  text-align: center;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: lscIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lscIn {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

@media (max-width: 768px) {
  #login-screen { flex-direction: column; overflow-y: auto; }
  .lsc-left { flex: none; padding: 2.25rem 1.5rem; gap: 1rem; }
  .lsc-pig { font-size: 72px; }
  .lsc-headline { font-size: 1.2rem; max-width: 280px; }
  .lsc-subline { font-size: 0.95rem; }
  .lsc-right { flex: 1; padding: 3.5rem 1.5rem 2.5rem; min-height: min-content; }
}


.lsc-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  background: #fff;
  border: 2px solid var(--bdr);
  color: var(--txt);
  padding: 0.95rem 2rem;
  border-radius: var(--r);
  font-size: 1.05rem; font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer; white-space: nowrap;
  width: 100%; max-width: 340px;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(65,36,2,0.1);
  margin-bottom: 0.875rem;
}
.lsc-google-btn:not(:disabled):hover {
  border-color: var(--pri);
  box-shadow: 0 8px 28px rgba(239,159,39,0.28);
  transform: translateY(-2px);
}
.lsc-google-btn:disabled { opacity: 0.5; cursor: default; }

.lsc-google-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.lsc-drive-note {
  font-size: 0.82rem; color: var(--mut); font-weight: 600;
  line-height: 1.55;
}

/* ── GASTO CONTINUO ── */
.continuo-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0;
}
.continuo-chk { width: 17px; height: 17px; accent-color: var(--pri); cursor: pointer; flex-shrink: 0; }
.continuo-lbl { font-size: 0.85rem; font-weight: 800; color: var(--txt); cursor: pointer; }
.continuo-hint { font-size: 0.75rem; color: var(--mut); font-weight: 600; }
.continuo-until-wrap { display: none; margin-top: 0.35rem; }
.continuo-until-wrap.show { display: block; }
.continuo-info-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 700; color: #059669;
  background: #ecfdf5; border: 1.5px solid #a7f3d0;
  border-radius: 99px; padding: 0.18rem 0.65rem;
  margin-top: 0.5rem;
}
.ico-continuo {
  font-size: 0.82em; opacity: 0.75; vertical-align: middle;
  cursor: default; margin-right: 0.1rem;
}

.lsc-reconnect-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding: 0.5rem 0 1rem;
}

.lsc-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--bdr);
  border-top-color: var(--pri);
  border-radius: 50%;
  animation: lscSpin 0.75s linear infinite;
}
@keyframes lscSpin { to { transform: rotate(360deg); } }

.lsc-reconnect-txt {
  font-size: 0.92rem; font-weight: 700; color: var(--mut);
}

/* ── EXCHANGE RATE FIELD (header) ── */
/* tc-wrap ocupa solo el alto del campo (42px); el sub-row cuelga absolutamente */
.tc-wrap { position: relative; flex-shrink: 0; }
.tc-field {
  display: flex; align-items: center; gap: 0.4rem;
  background: #FCF7EE;
  border: 1px solid #E8C98F;
  border-radius: 12px;
  width: 190px;
  height: 42px;
  box-sizing: border-box;
  padding: 0 0.75rem;
}
.tc-lbl { font-size: 0.78rem; font-weight: 800; color: #412402; white-space: nowrap; }
.tc-inp {
  flex: 1; min-width: 0; background: transparent;
  border: 1px solid #E8C98F; color: #412402;
  padding: 0.2rem 0.4rem; border-radius: 6px;
  font-size: 0.88rem; font-weight: 800; font-family: 'Nunito', sans-serif; text-align: right;
}
.tc-inp:focus { outline: none; background: rgba(232,201,143,0.2); border-color: #C87D10; }
.tc-inp::placeholder { color: rgba(65,36,2,0.35); }
/* sub-row: absoluto para no empujar los botones vecinos */
.tc-sub-row {
  position: absolute; top: calc(100% + 4px); right: 0;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; pointer-events: auto;
}
.tc-reset-btn { background: none; border: none; color: rgba(255,255,255,0.88); font-size: 0.6rem; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 2px; }
.tc-reset-btn:hover { color: #fff; text-decoration: underline; }
.tc-info-icon { font-size: 0.65rem; color: rgba(255,255,255,0.65); cursor: help; line-height: 1; user-select: none; position: relative; }
.tc-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 240px;
  background: #FCF7EE;
  color: #412402;
  border: 1.5px solid #EF9F27;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 6px 18px rgba(65,36,2,0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 50;
  white-space: normal;
}
.tc-tip b { display: block; margin-bottom: 0.3rem; }
.tc-tip span { display: block; margin-top: 0.25rem; }
.tc-info-icon:hover .tc-tip,
.tc-info-icon:focus .tc-tip { opacity: 1; visibility: visible; }

/* ── USER DROPDOWN ── */
.gdr-avatar-btn {
  display: flex; align-items: center; gap: 0.45rem;
  cursor: pointer; background: none; border: none;
  font-family: 'Nunito', sans-serif;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  transition: background 0.15s;
}
.gdr-avatar-btn:hover, .gdr-avatar-btn:focus-visible {
  background: rgba(65,36,2,0.08);
  outline: none;
}
.gdr-avatar-btn:hover .gdr-avatar {
  box-shadow: 0 0 0 2px rgba(65,36,2,0.3);
}
#gdr-avatar { display: none; }
.gdr-name-txt {
  font-size: 0.82rem; font-weight: 800; color: #412402;
  white-space: nowrap; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis;
}
.gdr-caret { font-size: 0.72rem; color: #EF9F27; border-left: 1.5px solid #EAD9BE; padding-left: 0.5rem; transition: transform 0.2s; }
.gdr-user.open .gdr-caret { transform: rotate(180deg); }
.gdr-wrap { position: relative; }
.gdr-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1.5px solid var(--bdr);
  border-radius: var(--r); box-shadow: 0 8px 32px rgba(65,36,2,0.18);
  min-width: 240px; z-index: 300; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s;
}
.gdr-user.open .gdr-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.gdr-dd-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; }
.gdr-dd-avatar-lg {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: #E8C98F; color: #412402;
  font-size: 1.15rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gdr-dd-header-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gdr-dd-name { font-size: 0.875rem; font-weight: 800; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdr-dd-email { font-size: 0.72rem; font-weight: 700; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdr-dd-item {
  display: flex; align-items: center; width: 100%; gap: 0.55rem;
  padding: 0.65rem 1rem; font-size: 0.875rem; font-weight: 700;
  font-family: 'Nunito', sans-serif; color: var(--txt);
  background: none; border: none; cursor: pointer;
  text-align: left; transition: background 0.15s;
}
.gdr-dd-item:hover { background: var(--pri-l); }
.gdr-dd-divider { height: 1px; background: var(--bdr); margin: 2px 0; }
.gdr-dd-danger { color: var(--err); font-weight: 800; }
.gdr-dd-danger:hover { background: var(--err-l); }
.gdr-dd-signout { color: var(--err); font-weight: 800; padding: 0.75rem 1rem; }
.gdr-dd-signout:hover { background: var(--err-l); }

/* ── PEMA MODALS ── */
.pema-modal-ov {
  position: fixed; inset: 0; background: rgba(65,36,2,0.45);
  z-index: 800; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; pointer-events: none;
  transition: opacity 0.2s; backdrop-filter: blur(4px);
}
.pema-modal-ov.open { opacity: 1; pointer-events: all; }
.pema-modal-box {
  position: relative;
  background: var(--card); border-radius: var(--r);
  padding: 2rem; max-width: 400px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  border: 1.5px solid var(--bdr);
  box-shadow: 0 24px 64px rgba(65,36,2,0.22);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  text-align: center;
}
.pema-modal-ov.open .pema-modal-box { transform: translateY(0) scale(1); }
.pema-edit-box {
  position: relative;
  background: var(--card); border-radius: var(--r);
  padding: 1.75rem; max-width: 580px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  border: 1.5px solid var(--bdr);
  box-shadow: 0 24px 64px rgba(65,36,2,0.22);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.pema-modal-ov.open .pema-edit-box { transform: translateY(0) scale(1); }
.pema-edit-title { font-size: 1.05rem; font-weight: 900; color: var(--txt); margin-bottom: 1.25rem; }
.pema-modal-logo { font-size: 2.4rem; line-height: 1; margin-bottom: 0.35rem; }
/* .pema-modal-brand was removed — no longer used */
@media (max-width: 640px) {
  #profile-modal {
    align-items: flex-start;
    padding-top: max(1rem, env(safe-area-inset-top));
  }
}
.pema-modal-msg {
  font-size: 0.935rem; font-weight: 700; color: var(--txt);
  line-height: 1.55; margin-bottom: 1.5rem; white-space: pre-line;
}
.pema-modal-inp {
  width: 100%; padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--bdr); border-radius: var(--rs);
  font-size: 0.9rem; font-family: 'Nunito', sans-serif; color: var(--txt);
  margin-bottom: 1.25rem; box-sizing: border-box;
}
.pema-modal-inp:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(239,159,39,0.15); }
.pema-modal-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.pema-modal-btns .btn { min-width: 110px; justify-content: center; }
.modal-close-x {
  position: absolute; top: 0.6rem; right: 0.65rem;
  width: 28px; height: 28px; padding: 0; border: none; background: none;
  color: var(--mut); font-size: 1.15rem; line-height: 1; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover { background: rgba(0,0,0,0.07); color: var(--txt); }

/* ── GOALS DETAIL LIST (Mi Resumen) ── */
.gdl-item {
  background: var(--bg); border: 1.5px solid var(--bdr);
  border-radius: var(--rs); padding: 0.875rem 1.125rem;
}
.gdl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.gdl-name { font-size: 0.9rem; font-weight: 900; color: var(--txt); }
.gdl-pct  { font-size: 0.78rem; font-weight: 900; color: var(--ok); }
.gdl-meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--mut); font-weight: 700; margin-bottom: 0.5rem;
}
.gdl-meta span strong { color: var(--txt); font-weight: 900; }
.gdl-track { height: 7px; background: var(--bdr); border-radius: 99px; overflow: hidden; }
.gdl-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ok) 0%, #6ee7b7 100%);
  transition: width 0.5s ease;
}

/* ── PRINT / PDF EXPORT ── */
#print-area { display: none; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; padding: 2rem; font-family: 'Helvetica Neue', Arial, sans-serif; color: #412402; }

  .pa-header { text-align: center; padding-bottom: 1.25rem; border-bottom: 3px solid #EF9F27; margin-bottom: 1.5rem; }
  .pa-logo { font-size: 2rem; font-weight: 900; color: #412402; }
  .pa-logo span { color: #EF9F27; }
  .pa-month { font-size: 1.15rem; font-weight: 700; color: #412402; margin-top: 0.3rem; }
  .pa-tagline { font-size: 0.82rem; color: #9A7B5A; margin-top: 0.1rem; }

  .pa-summary { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
  .pa-card { flex: 1; padding: 0.875rem 1rem; border: 1.5px solid #E8D5B5; border-radius: 8px; border-left: 4px solid #E8D5B5; }
  .pa-inc { border-left-color: #1D9E75; }
  .pa-exp { border-left-color: #E24B4A; }
  .pa-bal { border-left-color: #EF9F27; }
  .pa-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9A7B5A; font-weight: 700; margin-bottom: 0.25rem; }
  .pa-amt { font-size: 1.35rem; font-weight: 900; }
  .pa-inc .pa-amt { color: #1D9E75; }
  .pa-exp .pa-amt { color: #E24B4A; }

  .pa-section-ttl { font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.09em; color: #9A7B5A; margin: 1.25rem 0 0.75rem; }

  .pa-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
  .pa-table th { background: #FAEEDA; padding: 7px 9px; text-align: left; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; color: #9A7B5A; }
  .pa-table td { padding: 6px 9px; border-bottom: 1px solid #E8D5B5; vertical-align: middle; }
  .pa-table tbody tr:last-child td { border-bottom: none; }
  .pa-amt-cell { font-weight: 900; text-align: right; }
  .pa-inc-row td { background: #f0faf6; }
  .pa-exp-row td { background: #fef4f4; }

  .pa-footer { margin-top: 1.5rem; text-align: center; font-size: 9.5px; color: #9A7B5A; border-top: 1px solid #E8D5B5; padding-top: 0.75rem; }
}

/* ── TOUR GUIADO ──────────────────────────────────────────────────────────── */
.btn-tour { background: #FCF7EE; border: 1px solid #E8C98F; color: #412402; font-size: 0.82rem; font-weight: 800; height: 42px; padding: 0 16px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; font-family: 'Nunito', sans-serif; white-space: nowrap; }
.btn-tour:hover { background: #FFF0D6; border-color: #C87D10; }
.btn-guide { display: none; }
.guide-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.22s; }
.guide-backdrop.open { opacity: 1; }
.guide-box { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(65,36,2,0.18); width: 100%; max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; transform: scale(0.96); transition: transform 0.22s; }
.guide-backdrop.open .guide-box { transform: scale(1); }
.guide-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #EDE3D4; flex-shrink: 0; }
.guide-header-title { font-size: 1.05rem; font-weight: 900; color: var(--pri); display: flex; align-items: center; gap: 0.5rem; }
.guide-close { background: none; border: none; cursor: pointer; color: var(--mut); font-size: 1.3rem; line-height: 1; padding: 4px 8px; border-radius: 8px; transition: background 0.15s, color 0.15s; font-family: 'Nunito', sans-serif; }
.guide-close:hover { background: var(--err-l); color: var(--err); }
.guide-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.guide-nav { width: 210px; flex-shrink: 0; border-right: 1px solid #EDE3D4; padding: 0.75rem 0; overflow-y: auto; background: #FAF6F0; }
.guide-nav-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.1rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--txt); border-left: 3px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none; }
.guide-nav-item:hover { background: #F0E8D8; color: var(--pri-d); }
.guide-nav-item.active { background: var(--pri-l); color: var(--pri-d); border-left-color: var(--pri); font-weight: 700; }
.guide-nav-icon { font-size: 1rem; flex-shrink: 0; }
.guide-content { flex: 1; overflow-y: auto; padding: 1.75rem 2rem; }
.guide-section { display: none; }
.guide-section.visible { display: block; }
.guide-sec-title { font-size: 1.25rem; font-weight: 900; color: var(--txt); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid var(--pri-l); padding-bottom: 0.65rem; }
.guide-sec-title-icon { font-size: 1.3rem; }
.guide-p { font-size: 0.92rem; color: var(--txt); line-height: 1.7; margin-bottom: 0.8rem; }
.guide-ul { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.guide-ul li { font-size: 0.92rem; color: var(--txt); line-height: 1.65; padding: 0.28rem 0 0.28rem 1.4rem; position: relative; }
.guide-ul li::before { content: '·'; position: absolute; left: 0.4rem; color: var(--pri); font-weight: 900; font-size: 1.1em; }
.guide-hl { background: var(--pri-l); border-left: 3px solid var(--pri); border-radius: 0 8px 8px 0; padding: 0.7rem 1rem; margin: 0.4rem 0 1rem 0; font-size: 0.9rem; color: var(--txt); line-height: 1.65; }
.guide-hl-blue { background: #EFF6FF; border-left: 3px solid var(--info); border-radius: 0 8px 8px 0; padding: 0.7rem 1rem; margin: 0.4rem 0 1rem 0; font-size: 0.9rem; color: var(--txt); line-height: 1.65; }
.guide-h2 { font-size: 0.95rem; font-weight: 800; color: var(--pri-d); margin: 1.1rem 0 0.35rem 0; }
.guide-faq-item { border-bottom: 1px solid #EDE3D4; padding-bottom: 0.9rem; margin-bottom: 0.9rem; }
.guide-faq-item:last-child { border-bottom: none; margin-bottom: 0; }
.guide-faq-q { font-size: 0.93rem; font-weight: 700; color: var(--txt); margin-bottom: 0.3rem; }
.guide-faq-a { font-size: 0.9rem; color: #6B5340; line-height: 1.65; }
.guide-contact-btn { background: var(--pri); color: #fff; border: none; border-radius: var(--rs); padding: 0.65rem 1.25rem; font-size: 0.9rem; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; transition: background 0.15s; margin-top: 0.25rem; }
.guide-contact-btn:hover { background: var(--pri-d); }
@media (max-width: 640px) {
  .guide-body { flex-direction: column; }
  .guide-nav { width: 100%; border-right: none; border-bottom: 1px solid #EDE3D4; padding: 0.5rem 0.4rem; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.3rem; flex-shrink: 0; }
  .guide-nav-item { white-space: nowrap; border-left: 3px solid transparent; border-radius: 20px; padding: 0.38rem 0.7rem; font-size: 0.79rem; }
  .guide-nav-item.active { border-left-color: var(--pri); background: var(--pri-l); }
  .guide-content { padding: 1.1rem 1rem; }
  .guide-box { max-height: 92vh; }
}
#tour-ov { position: fixed; inset: 0; z-index: 9990; display: none; pointer-events: none; }
#tour-hl { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.58); border: 3px solid var(--pri); pointer-events: none; transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.2s ease; z-index: 9991; }
#tour-tip { position: fixed; background: var(--card); border-radius: 14px; padding: 1.3rem 1.4rem 1.1rem; max-width: 320px; width: calc(100vw - 32px); box-shadow: 0 6px 28px rgba(0,0,0,0.22); pointer-events: all; transition: left 0.3s ease, top 0.3s ease, opacity 0.2s ease; z-index: 9992; border-top: 4px solid var(--pri); }
#tour-step-num { font-size: 0.72rem; font-weight: 900; color: var(--pri); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.35rem; }
#tour-title { font-size: 1.08rem; font-weight: 900; color: var(--txt); margin-bottom: 0.4rem; }
#tour-desc { font-size: 0.9rem; color: var(--mut); line-height: 1.55; margin-bottom: 1rem; }
#tour-actions { display: flex; align-items: center; gap: 0.5rem; }
#tour-skip { background: none; border: none; color: var(--mut); font-size: 0.8rem; cursor: pointer; padding: 0; font-family: 'Nunito', sans-serif; text-decoration: underline; }
#tour-skip:hover { color: var(--txt); }
#tour-prev, #tour-next { border: none; border-radius: 8px; padding: 0.45rem 1rem; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.88rem; cursor: pointer; transition: background 0.15s; }
#tour-prev { background: var(--bdr); color: var(--txt); }
#tour-prev:hover, #tour-prev:active { background: #cfc8be; }
#tour-next { background: var(--pri); color: #fff; }
#tour-next:hover, #tour-next:active { background: var(--pri-d); }
#tour-prev:focus, #tour-next:focus { outline: none; }
#tour-prev:disabled, #tour-next:disabled { pointer-events: none; }
#tour-arr { display: none; position: absolute; font-size: 1.1rem; color: var(--pri); line-height: 1; pointer-events: none; }
#tour-arr.arr-up   { top: -1.25rem; }
#tour-arr.arr-down { bottom: -1.25rem; }

/* ── LANDING PAGE ──────────────────────────────────────────────────────────── */
#landing { display: none; background: var(--bg); }

.lp-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(245,239,228,0.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bdr);
  padding: 0.8rem 2rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.lp-hdr-login { background: var(--pri); color: #fff; border: none; border-radius: 10px; padding: 0.5rem 1.3rem; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: background 0.15s; font-family: 'Nunito', sans-serif; }
.lp-hdr-login:hover { background: var(--pri-d); }

.lp-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #EF9F27 0%, #C87D10 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 8rem 6% 4.5rem;
}
.lp-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; max-width: 680px; width: 100%; }
.lp-hero-tag { display: inline-block; background: rgba(255,255,255,0.25); color: #fff; border-radius: 100px; padding: 0.35rem 1.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-hero h1 { font-size: clamp(2.8rem, 5.5vw, 4rem); font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -0.04em; margin: 0; }
.lp-hero h1 em { font-style: normal; }
.lp-hero-sub { font-size: clamp(0.95rem, 1.8vw, 1.1rem); color: rgba(255,255,255,0.9); line-height: 1.65; margin: 0; }
.lp-hero-sub strong { font-weight: 700; color: #fff; }
.lp-hero-cta { background: #fff; color: #412402; border: none; border-radius: 40px; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Nunito', sans-serif; }
.lp-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.28); }
.lp-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.lp-scroll-arrow { cursor: pointer; opacity: 0.7; transition: opacity 0.2s; animation: lp-bounce 1.6s ease-in-out infinite; }
.lp-scroll-arrow:hover { opacity: 1; }
@keyframes lp-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}
.lp-hdr-mot { font-size: 1rem; color: var(--mut); font-style: italic; justify-self: center; text-align: center; padding: 0 1rem; transition: opacity 0.45s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lp-hdr .pema-logo--lphdr { justify-self: start; }
.lp-hdr .lp-hdr-login { justify-self: end; }
.lp-hdr-mot.fade { opacity: 0; }

.lp-section { padding: 5rem 2rem; max-width: 1080px; margin: 0 auto; }
.lp-sec-title { text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; color: var(--txt); margin-bottom: 0.4rem; }
.lp-sec-sub { text-align: center; color: var(--mut); font-size: 0.95rem; margin-bottom: 2.5rem; }

.lp-benefits-bg { background: #fff; }
.lp-benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.lp-benefit-card { background: var(--bg); border-radius: var(--r); padding: 1.75rem 1.5rem; text-align: center; border: 1px solid var(--bdr); transition: transform 0.2s, box-shadow 0.2s; }
.lp-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shd); }
.lp-benefit-icon { font-size: 2.4rem; margin-bottom: 0.75rem; display: block; }
.lp-benefit-title { font-size: 0.95rem; font-weight: 800; color: var(--txt); margin-bottom: 0.4rem; }
.lp-benefit-desc { font-size: 0.85rem; color: var(--mut); line-height: 1.5; }

.lp-features-bg { background: linear-gradient(180deg, #fffbf3 0%, var(--bg) 100%); }
.lp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2rem; }
.lp-feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.lp-feature-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--pri-l); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; border: 2px solid rgba(239,159,39,0.2); }
.lp-feature h3 { font-size: 1.08rem; font-weight: 900; color: var(--pri-d); margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.lp-feature p { font-size: 0.85rem; color: var(--mut); line-height: 1.55; }
.lp-feat-divider { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.lp-feat-divider::before, .lp-feat-divider::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--bdr)); }
.lp-feat-divider::after { background: linear-gradient(90deg, var(--bdr), transparent); }
.lp-feat-divider span { font-size: 1.4rem; flex-shrink: 0; opacity: 0.6; }

.lp-faq-wrap { background: var(--card); border-radius: var(--r); border: 1px solid var(--bdr); overflow: hidden; max-width: 680px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid var(--bdr); }
.lp-faq-item:last-child { border-bottom: none; }
.lp-faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--txt); user-select: none; gap: 1rem; }
.lp-faq-q:hover { background: var(--pri-l); }
.lp-faq-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--pri); transition: transform 0.25s; }
.lp-faq-item.open .lp-faq-arrow { transform: rotate(180deg); }
.lp-faq-a { display: none; padding: 0 1.5rem 1rem; font-size: 0.86rem; color: var(--mut); line-height: 1.6; }
.lp-faq-item.open .lp-faq-a { display: block; }

.lp-cta-bg { background: linear-gradient(135deg, #EF9F27 0%, #C87D10 100%); text-align: center; padding: 5rem 2rem; }
.lp-cta-bg h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 0.6rem; }
.lp-cta-bg p { color: rgba(255,255,255,0.85); margin-bottom: 2rem; font-size: 0.95rem; }
.lp-cta-btn { background: #fff; color: var(--pri-d); border: none; border-radius: 14px; padding: 0.95rem 2.4rem; font-size: 1.05rem; font-weight: 900; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Nunito', sans-serif; }
.lp-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.22); }

.lp-footer { background: var(--txt); color: rgba(255,255,255,0.65); text-align: center; padding: 2rem; font-size: 0.8rem; }
.lp-footer strong { color: var(--pri); }
.lp-guide-link { color: rgba(255,255,255,0.5); text-decoration: none; margin-top: 0.55rem; display: inline-block; font-size: 0.8rem; transition: color 0.15s; cursor: pointer; }
.lp-guide-link:hover { color: var(--pri); }


.lp-price-bg { background: linear-gradient(135deg, #EF9F27 0%, #C87D10 100%); padding: 5rem 2rem; text-align: center; }
.lp-price-bg > h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 2rem; }
.lp-price-box { max-width: 340px; margin: 0 auto; background: var(--bg); border-radius: 28px; padding: 2.5rem 2rem; box-shadow: 0 24px 64px rgba(0,0,0,0.24); }
.lp-price-amount { font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 900; color: var(--pri-d); line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.lp-price-sub { color: var(--mut); font-size: 0.88rem; margin-bottom: 1.75rem; }
.lp-price-btn { background: var(--pri); color: #fff; border: none; border-radius: 14px; padding: 0.9rem 2.4rem; font-size: 1rem; font-weight: 900; cursor: pointer; box-shadow: 0 6px 20px rgba(239,159,39,0.45); transition: background 0.15s, transform 0.15s, box-shadow 0.15s; font-family: 'Nunito', sans-serif; text-decoration: none; display: inline-block; }
.lp-price-btn:hover { background: var(--pri-d); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,125,16,0.5); }

.lsc-back-btn { position: absolute; top: 1.25rem; left: 1.25rem; background: none; border: none; color: var(--mut); font-size: 0.85rem; cursor: pointer; font-family: 'Nunito', sans-serif; padding: 0; text-decoration: underline; }
.lsc-back-btn:hover { color: var(--txt); }

[data-anim] { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-anim].visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .lp-hdr { padding: 0.8rem 1rem; }
  .lp-hdr-mot { display: none; }
  .lp-hero { padding: 7rem 5% 3.5rem; }
  .lp-hero-inner { gap: 1.4rem; }
  .lp-section { padding: 3.5rem 1.25rem; }
  /* En mobile los elementos con data-anim son visibles por defecto.
     La animación de scroll es un enhancement que puede no dispararse
     en pantallas chicas; nunca debe dejar contenido invisible. */
  [data-anim] { opacity: 1; transform: none; }
}

/* ── RESPONSIVE: NAV TABS ──────────────────────────────────── */
/* ≤699px: pestañas en grid 2×2 */
@media (max-width: 699px) {
  /* Pestañas en grilla 2×2, todas del mismo tamaño */
  .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
  }
  .nav-btn {
    flex: none;
    min-width: 0;
    min-height: 52px;
    font-size: 0.78rem;
    padding: 0.5rem 0.4rem;
    white-space: normal;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* ── RESPONSIVE: ACTION BUTTONS ────────────────────────────── */
/* 700-1199px: 2 columnas × 2 filas (no 3+1) */
@media (min-width: 700px) and (max-width: 1199px) {
  .action-btn {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-width: 0;
  }
}
/* ≤699px: columna única */
@media (max-width: 699px) {
  .action-btns { gap: 0.5rem; margin-bottom: 1rem; }
  .action-btn {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    gap: 0.7rem;
  }
  .ab-icon { width: 38px; height: 38px; font-size: 1.15rem; border-radius: 10px; }
  .ab-txt strong { font-size: 0.92rem; }
  .ab-txt span { font-size: 0.72rem; }
  .ab-chev { font-size: 1rem; }
}

/* ── RESPONSIVE: HEADER MOBILE ─────────────────────────────── */
/* ≤500px: compactar header */
@media (max-width: 500px) {
  /* Header en una columna */
  .hdr { grid-template-columns: 1fr; padding: 0.75rem; gap: 0.65rem; }
  .hdr-motivator { display: none; }
  .hdr-left { justify-content: flex-start; }

  /* Logo más chico */
  .hdr .pema-logo--app .pema-logo-mark { width: 32px; height: 32px; border-radius: 9px; }
  .hdr .pema-logo--app .pema-logo-mark svg { width: 20px; height: 20px; }
  .hdr .pema-logo--app .pema-logo-mark-badge { width: 13px; height: 13px; border-radius: 4px; }
  .hdr .pema-logo--app .pema-logo-modo,
  .hdr .pema-logo--app .pema-logo-ahorro { font-size: 0.92rem; }
  .hdr .pema-logo--app .pema-logo-l3 { font-size: 0.34rem; }
  .hdr .pema-logo--app .pema-logo-lphdr-wrap { gap: 0.4rem; }

  /* Fila de controles: año | dólar | tour se reparten parejo; avatar fijo.
     Con min-width:0 en los tres, es imposible que desborden a cualquier ancho. */
  .hdr-right {
    width: 100%; box-sizing: border-box;
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 6px; justify-content: flex-start;
  }
  .hdr-right > #yearSel,
  .hdr-right > .tc-wrap,
  .hdr-right > .btn-tour { flex: 1 1 0; min-width: 0; }
  .hdr-right > .gdr-wrap { flex: 0 0 auto; }

  /* Año — vence el min-width:95px que viene inline en el HTML */
  #yearSel.month-sel {
    min-width: 0 !important; width: 100%;
    height: 36px; padding: 0 0.25rem; font-size: 0.78rem;
  }

  /* Dólar */
  .tc-lbl { display: none; }
  .tc-sub-row { display: none !important; }
  .tc-field {
    width: 100%; height: 36px;
    padding: 0 0.3rem; box-sizing: border-box;
    justify-content: center; gap: 0;
  }
  .tc-inp {
    border: none; text-align: center;
    padding: 0; font-size: 0.82rem; width: 100%;
  }

  /* Tour */
  .btn-tour {
    width: 100%; height: 36px;
    padding: 0 4px; font-size: 0.7rem; gap: 3px;
    justify-content: center;
  }

  /* Avatar (P) — solo el círculo, sin fondo ni flechita */
  .gdr-name-txt, .gdr-status-txt, .gdr-caret { display: none; }
  #gdr-avatar { display: flex !important; width: 32px; height: 32px; }
  .gdr-avatar-btn { gap: 0; padding: 0; }
  .gdr-user { padding: 0; background: none; border: none; height: auto; }

  /* Menú desplegable del usuario: nunca más ancho que la pantalla */
  .gdr-dropdown {
    min-width: 0; width: calc(100vw - 24px); max-width: 300px;
    right: 0; left: auto;
  }
}

/* ── RESPONSIVE: FORMULARIOS ───────────────────────────────── */
/* ≤480px: campos del formulario en columna */
@media (max-width: 480px) {
  .frow { flex-direction: column; }
  .frow .fgroup { min-width: 0; }
  .main { padding: 1rem 0.75rem; }
  .nav { padding: 0.5rem 0.6rem; }
  .section-controls { padding: 0.6rem 0.75rem; gap: 0.5rem; justify-content: flex-start; }
  .section-controls .sec-month-lbl { white-space: nowrap; }
  .section-controls #monthSel { flex: 1; min-width: 0; height: 38px; padding: 0 0.7rem; }
  .sec-hoy-btn { flex-shrink: 0; white-space: nowrap; padding: 0 0.85rem; height: 38px; }
}

/* ── RESPONSIVE: TOTALES BAR ───────────────────────────────── */
@media (max-width: 600px) {
  .mov-totals-bar { font-size: 0.85rem; gap: 0.5rem; padding: 0.75rem 1rem; }
  .mov-totals-resto { font-size: 0.95rem; }
}

/* ── RESPONSIVE: MODAL GUÍA en mobile ──────────────────────── */
@media (max-width: 400px) {
  .guide-box { border-radius: 12px; }
  .guide-content { padding: 0.9rem 0.75rem; }
  .guide-sec-title { font-size: 1.1rem; }
}

/* ── BADGE BETA ─────────────────────────────────────────────── */
.beta-badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.92);
  color: var(--pri-d);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 99px;
  padding: 0.12rem 0.55rem;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.lp-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.9);
  color: var(--pri-d);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 99px;
  padding: 0.22rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── QUIÉNES SOMOS ──────────────────────────────────────────── */
.lp-qs-card {
  background: var(--bg); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 2.75rem 3rem;
  max-width: 760px; margin: 0 auto;
  text-align: center;
  box-shadow: 0 2px 14px var(--shd);
}
.lp-qs-text { max-width: 640px; margin: 0 auto; }
.lp-qs-text p {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem; color: var(--txt); line-height: 1.82;
  margin-bottom: 0.9rem;
}
.lp-qs-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .lp-qs-card { padding: 2rem 1.5rem; }
  .lp-qs-text p { font-size: 1.02rem; }
}

/* ── FOOTER INFO ────────────────────────────────────────────── */
.lp-footer-info {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.25rem 0;
  margin-bottom: 0.9rem; font-size: 0.82rem;
}
.lp-footer-loc { color: rgba(255,255,255,0.52); }
.lp-footer-sep { color: rgba(255,255,255,0.28); margin: 0 0.6rem; user-select: none; }
.lp-footer-link {
  color: var(--pri); text-decoration: none;
  border-bottom: 1px solid rgba(239,159,39,0.45);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.lp-footer-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.7); }
@media (max-width: 600px) {
  .lp-footer-info { flex-direction: column; gap: 0.45rem; }
  .lp-footer-sep { display: none; }
}

/* ── MODAL CONTACTO ─────────────────────────────────────────── */
.ct-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 0; transition: opacity 0.22s;
}
.ct-backdrop.open { opacity: 1; }
.ct-box {
  background: var(--card); border-radius: 18px;
  padding: 2rem 2rem 1.75rem;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(65,36,2,0.2);
  transform: scale(0.96); transition: transform 0.22s;
  position: relative;
}
.ct-backdrop.open .ct-box { transform: scale(1); }
.ct-close {
  position: absolute; top: 0.75rem; right: 0.9rem;
  background: none; border: none; cursor: pointer;
  color: var(--mut); font-size: 1.2rem; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-family: 'Nunito', sans-serif;
}
.ct-close:hover { background: var(--err-l); color: var(--err); }
.ct-ico { font-size: 2rem; margin-bottom: 0.4rem; }
.ct-title { font-size: 1.1rem; font-weight: 900; color: var(--txt); margin-bottom: 0.3rem; }
.ct-sub { font-size: 0.86rem; color: var(--mut); line-height: 1.55; margin-bottom: 1.4rem; }
.ct-lbl { display: block; font-size: 0.8rem; font-weight: 800; color: var(--txt); margin-bottom: 0.3rem; }
.ct-inp, .ct-sel, .ct-ta {
  width: 100%; padding: 0.62rem 0.85rem;
  border: 1.5px solid var(--bdr); border-radius: var(--rs);
  font-size: 0.9rem; font-family: 'Nunito', sans-serif;
  color: var(--txt); box-sizing: border-box; margin-bottom: 0.25rem;
  background: var(--card);
}
.ct-inp:focus, .ct-sel:focus, .ct-ta:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(239,159,39,0.15); }
.ct-ta { min-height: 100px; resize: vertical; }
.ct-err { font-size: 0.78rem; color: var(--err); font-weight: 700; min-height: 1.2em; margin-bottom: 0.7rem; display: none; }
.ct-btn {
  width: 100%; padding: 0.8rem;
  background: var(--pri); color: #fff; border: none;
  border-radius: var(--rs); font-size: 1rem; font-weight: 800;
  font-family: 'Nunito', sans-serif; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(239,159,39,0.35);
  margin-top: 0.5rem;
}
.ct-btn:hover { background: var(--pri-d); transform: translateY(-1px); }
.ct-success { display: none; text-align: center; padding: 1rem 0 0.5rem; }
.ct-success-icon { font-size: 2.8rem; margin-bottom: 0.65rem; }
.ct-success-title { font-size: 1.05rem; font-weight: 900; color: var(--ok); margin-bottom: 0.4rem; }
.ct-success-msg { font-size: 0.87rem; color: var(--mut); line-height: 1.6; }

.lp-price-desc {
  font-size: 0.92rem;
  color: var(--mut);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.lp-price-badge { display: inline-block; background: #EF9F27; color: #fff; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.32rem 0.95rem; border-radius: 99px; margin-bottom: 1.2rem; }
.lp-price-amount { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; margin-bottom: 0.5rem; }
.lp-price-num { font-size: 3rem; font-weight: 900; color: #412402; line-height: 1; }
.lp-price-per { font-size: 1.05rem; font-weight: 800; color: #9A7B5A; }
.lp-price-feat { display: flex; align-items: flex-start; gap: 0.5rem; background: #FCF7EE; border-radius: 12px; padding: 0.75rem 0.9rem; margin: 1.2rem 0 1.5rem; text-align: left; }
.lp-price-check { color: #EF9F27; font-size: 1.05rem; flex-shrink: 0; font-weight: 900; }
.lp-price-feat span:last-child { font-size: 0.83rem; color: #412402; font-weight: 700; line-height: 1.45; }
.lp-price-soon { font-size: 0.8rem; color: #B4906A; margin-top: 1.2rem; }
.lp-price-soon strong { color: #9A7B5A; }

#admin-panel { position: fixed; inset: 0; z-index: 5000; background: #F5EFE4; overflow-y: auto; }
.admin-topbar { background: #412402; color: #fff; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-topbar-brand { font-weight: 900; font-size: 1.05rem; }
.admin-back-btn { background: #EF9F27; color: #fff; border: none; border-radius: 10px; padding: 0.55rem 1.1rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; }
.admin-back-btn:hover { background: #C87D10; }
.admin-body { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-metric { background: #fff; border: 1.5px solid #E8D5B5; border-radius: 14px; padding: 1.1rem 1.3rem; }
.admin-metric-num { font-size: 1.8rem; font-weight: 900; color: #412402; line-height: 1; }
.admin-metric-lbl { font-size: 0.8rem; color: #9A7B5A; font-weight: 700; margin-top: 0.35rem; }
.admin-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.admin-search { flex: 1; padding: 0.7rem 1rem; border: 1.5px solid #E8D5B5; border-radius: 10px; font-family: 'Nunito', sans-serif; font-size: 0.95rem; }
.admin-search:focus { outline: none; border-color: #EF9F27; }
.admin-refresh-btn { background: #FAEEDA; color: #412402; border: 1.5px solid #E8D5B5; border-radius: 10px; padding: 0.7rem 1.2rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; }
.admin-table-wrap { background: #fff; border: 1.5px solid #E8D5B5; border-radius: 14px; overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th { background: #FCF7EE; text-align: left; padding: 0.85rem 1rem; font-weight: 800; color: #412402; border-bottom: 1.5px solid #E8D5B5; }
.admin-table td { padding: 0.8rem 1rem; border-bottom: 1px solid #F0E6D6; color: #412402; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.72rem; font-weight: 800; }
.admin-badge-trial { background: #FAEEDA; color: #854F0B; }
.admin-badge-active { background: #E1F5EE; color: #0F6E56; }
.admin-badge-cancelled { background: #FCEBEB; color: #A32D2D; }
.admin-empty { padding: 2.5rem; text-align: center; color: #9A7B5A; font-weight: 700; }
.admin-status-sel { padding: 0.4rem 0.6rem; border: 1.5px solid #E8D5B5; border-radius: 8px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; color: #412402; cursor: pointer; background: #fff; }
.admin-status-sel:focus { outline: none; border-color: #EF9F27; }

@media (max-width: 600px) {
  .lp-hdr { grid-template-columns: 1fr auto; padding: 0.7rem 1rem; }
  .lp-hdr-mot { display: none; }
  .lp-hdr .pema-logo--lphdr .pema-logo-mark { width: 38px; height: 38px; border-radius: 10px; }
  .lp-hdr .pema-logo--lphdr .pema-logo-mark svg { width: 22px; height: 22px; }
  .lp-hdr .pema-logo--lphdr .pema-logo-mark-badge { width: 16px; height: 16px; border-radius: 5px; }
  .lp-hdr .pema-logo--lphdr .pema-logo-modo,
  .lp-hdr .pema-logo--lphdr .pema-logo-ahorro { font-size: 0.92rem; }
  .lp-hdr .pema-logo--lphdr .pema-logo-l3 { font-size: 0.4rem; }
  .lp-hdr .pema-logo-lphdr-wrap { gap: 0.5rem; }
  .lp-hdr-login { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
}