/* Calculadora de gastos de compraventa, Noguera Real Estate
   Tokens del sistema de diseño «Marta Noguera Real Estate». */

.mn-calc{
  --bg:#FAF9F6; --surface:#FFFFFF; --ink:#1D1D1B; --acc:#D4F53C; --acc-h:#9DBD0A;
  --acc-w:#FAFEE8; --txt2:#6B675C; --bord:#E4E1D8;
  --serif:"Playfair Display",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --r-btn:8px; --r-card:12px; --r-tag:6px;
  max-width:1280px; margin:0 auto; padding:0 32px 48px;
  font-family:var(--sans); color:var(--ink); font-size:16px; line-height:1.6;
  box-sizing:border-box;
}
.mn-calc *,.mn-calc *::before,.mn-calc *::after{box-sizing:border-box}
.mn-calc :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- tipografía ---------- */
.mn-calc .mn-ovl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt2);margin:0 0 12px
}
.mn-calc h2.mn-h,.mn-calc h3.mn-h{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;color:var(--ink);
  text-wrap:balance
}
.mn-calc h2.mn-h{font-size:34px;line-height:1.2}
.mn-calc h3.mn-h{font-size:20px;line-height:1.2}
.mn-calc .mn-h em{font-style:italic}
.mn-calc .mn-lead{margin:16px 0 0;color:var(--txt2);max-width:62ch;font-size:16px}
.mn-calc .mn-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- encabezado de sección ---------- */
.mn-calc .mn-head{
  padding-bottom:16px;border-bottom:1px solid var(--bord);margin-bottom:24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap
}
.mn-calc .mn-read{font-family:var(--mono);font-size:13px;color:var(--txt2)}

/* ---------- paneles ---------- */
.mn-calc .mn-panel{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-card);
  margin-top:24px
}
.mn-calc .mn-panel__hd{
  padding:16px 24px;border-bottom:1px solid var(--bord);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.mn-calc .mn-panel__hd h3{display:flex;align-items:center;gap:12px}
.mn-calc .mn-step{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--acc);border-radius:var(--r-tag);padding:3px 8px
}
.mn-calc .mn-panel__bd{padding:24px}

/* ---------- formulario ---------- */
.mn-calc .mn-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.mn-calc .mn-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.mn-calc .mn-f > label,.mn-calc .mn-f > .mn-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)
}
.mn-calc .mn-help{font-size:12px;color:var(--txt2);line-height:1.4}
.mn-calc input[type=text],.mn-calc input[type=number],.mn-calc select{
  width:100%;background:var(--bg);border:1px solid var(--bord);border-radius:var(--r-btn);
  color:var(--ink);padding:11px 12px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:14px;line-height:1.3;-webkit-appearance:none;appearance:none
}
.mn-calc select{
  font-family:var(--sans);font-size:14px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B675C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px
}
.mn-calc input:hover,.mn-calc select:hover{border-color:var(--ink)}
.mn-calc .mn-cash{position:relative}
.mn-calc .mn-cash > b{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--txt2);font-family:var(--mono);font-weight:400;font-size:15px;pointer-events:none
}
.mn-calc .mn-cash input{padding-left:27px;font-size:17px}

/* segmentado sí / no */
.mn-calc .mn-seg{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--bord);border-radius:var(--r-btn);overflow:hidden}
.mn-calc .mn-seg button{
  border:0;background:var(--bg);color:var(--txt2);font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;padding:11px 0;cursor:pointer;transition:background .15s,color .15s
}
.mn-calc .mn-seg button + button{border-left:1px solid var(--bord)}
.mn-calc .mn-seg button[aria-pressed=true]{background:var(--ink);color:var(--acc)}

/* base de liquidación */
.mn-calc .mn-base{
  margin-top:24px;background:var(--acc-w);border:1px solid var(--acc-h);border-radius:var(--r-card);
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap
}
.mn-calc .mn-base .mn-ovl{margin:0 0 6px;color:var(--ink)}
.mn-calc .mn-base .mn-v{font-family:var(--mono);font-size:28px;line-height:1;letter-spacing:-.02em}
.mn-calc .mn-base .mn-why{font-size:13px;color:var(--txt2);max-width:46ch;margin:0}

/* avisos */
.mn-calc .mn-flag{
  margin-top:16px;border:1px solid var(--bord);border-left:3px solid var(--ink);
  border-radius:var(--r-tag);padding:14px 16px;font-size:13px;line-height:1.5;
  color:var(--txt2);background:var(--bg)
}
.mn-calc .mn-flag b{color:var(--ink);font-weight:600}
.mn-calc .mn-flag--acc{border-left-color:var(--acc-h);background:var(--acc-w)}

/* ---------- resumen ---------- */
.mn-calc .mn-sum{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:16px;margin-top:24px}
.mn-calc .mn-tile{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-card);padding:24px
}
.mn-calc .mn-tile .mn-ovl{margin:0 0 10px}
.mn-calc .mn-tile .mn-big{
  font-family:var(--mono);font-size:30px;line-height:1.05;letter-spacing:-.03em;color:var(--ink)
}
.mn-calc .mn-tile .mn-sub{font-family:var(--mono);font-size:12px;color:var(--txt2);margin-top:6px}
.mn-calc .mn-tile--total{background:var(--ink);border-color:var(--ink)}
.mn-calc .mn-tile--total .mn-ovl{color:var(--acc)}
.mn-calc .mn-tile--total .mn-big{color:var(--surface);font-size:38px}
.mn-calc .mn-tile--total .mn-sub{color:rgba(255,255,255,.62)}
.mn-calc .mn-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-top:16px;background:rgba(255,255,255,.18)}
.mn-calc .mn-bar i{display:block;transition:width .3s ease}
.mn-calc .mn-bar .mn-bv{background:var(--surface)}
.mn-calc .mn-bar .mn-bc{background:var(--acc)}
.mn-calc .mn-key{
  display:flex;gap:16px;margin-top:10px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62);flex-wrap:wrap
}
.mn-calc .mn-key span{display:inline-flex;align-items:center;gap:6px}
.mn-calc .mn-key i{width:8px;height:8px;border-radius:2px;display:block}

/* ---------- libros vendedor / comprador ---------- */
.mn-calc .mn-books{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.mn-calc .mn-book{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-card);overflow:hidden
}
.mn-calc .mn-book__hd{
  padding:16px 24px;border-bottom:1px solid var(--bord);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px
}
.mn-calc .mn-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-tag);padding:4px 9px;background:var(--ink);color:var(--acc)
}
.mn-calc .mn-tag--inv{background:var(--acc);color:var(--ink)}
.mn-calc .mn-book__tot{font-family:var(--mono);font-size:17px;letter-spacing:-.02em}
.mn-calc .mn-row{
  display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 24px;
  border-bottom:1px solid var(--bord)
}
.mn-calc .mn-row:last-child{border-bottom:0}
.mn-calc .mn-row .mn-cn{grid-column:1;font-size:14px;min-width:0}
.mn-calc .mn-row .mn-cb{grid-column:1;font-family:var(--mono);font-size:11px;color:var(--txt2);line-height:1.45}
.mn-calc .mn-row .mn-cv{
  grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap
}
.mn-calc .mn-row--grp{background:var(--bg);padding-top:10px;padding-bottom:10px}
.mn-calc .mn-row--grp .mn-cn{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)
}
.mn-calc .mn-row--tt{background:var(--bg)}
.mn-calc .mn-row--tt .mn-cn{font-weight:600;font-size:14px}
.mn-calc .mn-row--tt .mn-cv{font-size:16px}
.mn-calc .mn-empty{padding:28px 24px;color:var(--txt2);font-size:14px;text-align:center}

/* ---------- destinatarios ---------- */
.mn-calc .mn-payees{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-card);
  overflow:hidden;margin-top:16px
}
.mn-calc .mn-payee{background:var(--surface);padding:20px 24px}
.mn-calc .mn-payee .mn-ovl{margin:0 0 8px}
.mn-calc .mn-payee .mn-a{font-family:var(--mono);font-size:20px;letter-spacing:-.02em}
.mn-calc .mn-payee .mn-d{font-size:12px;color:var(--txt2);margin-top:4px}
.mn-calc .mn-payee--tot{background:var(--ink)}
.mn-calc .mn-payee--tot .mn-ovl{color:var(--acc)}
.mn-calc .mn-payee--tot .mn-a{color:var(--surface)}
.mn-calc .mn-payee--tot .mn-d{color:rgba(255,255,255,.62)}

/* ---------- ajustes avanzados ---------- */
.mn-calc .mn-adv{
  margin-top:24px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-card)
}
.mn-calc .mn-adv > summary{
  cursor:pointer;padding:18px 24px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt2);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px
}
.mn-calc .mn-adv > summary::-webkit-details-marker{display:none}
.mn-calc .mn-adv > summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--ink)}
.mn-calc .mn-adv[open] > summary::after{content:"\2212"}
.mn-calc .mn-adv > summary:hover{color:var(--ink)}
.mn-calc .mn-sub-adv{border-top:1px solid var(--bord)}
.mn-calc .mn-sub-adv > summary{
  cursor:pointer;padding:14px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt2);list-style:none;
  display:flex;justify-content:space-between;align-items:center
}
.mn-calc .mn-sub-adv > summary::-webkit-details-marker{display:none}
.mn-calc .mn-sub-adv > summary::after{content:"+";font-family:var(--mono);color:var(--txt2)}
.mn-calc .mn-sub-adv[open] > summary::after{content:"\2212"}
.mn-calc .mn-grid-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:0 24px 20px}
.mn-calc .mn-grid-p .mn-f > label{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none}
.mn-calc .mn-grid-p input{padding:8px 10px;font-size:13px}
.mn-calc .mn-note{padding:0 24px 20px;font-size:13px;color:var(--txt2);line-height:1.6;max-width:80ch}
.mn-calc .mn-note b{color:var(--ink);font-weight:600}
.mn-calc .mn-reset{
  display:block;width:calc(100% - 48px);margin:0 24px 24px;background:transparent;
  border:1px solid var(--bord);border-radius:var(--r-btn);color:var(--txt2);
  padding:11px;font-family:var(--mono);font-size:12px;cursor:pointer
}
.mn-calc .mn-reset:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- llamado a la acción ---------- */
.mn-calc .mn-cta{
  margin-top:24px;background:var(--ink);border-radius:var(--r-card);padding:32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap
}
.mn-calc .mn-cta h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;color:var(--surface);margin:0}
.mn-calc .mn-cta h3 em{font-style:italic}
.mn-calc .mn-cta p{margin:8px 0 0;color:rgba(255,255,255,.62);font-size:15px;max-width:52ch}
.mn-calc .mn-btn{
  display:inline-block;background:var(--acc);color:var(--ink);border:0;border-radius:var(--r-btn);
  padding:14px 24px;font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background .15s
}
.mn-calc .mn-btn:hover,.mn-calc .mn-btn:focus{background:var(--acc-h);color:var(--ink)}

/* ---------- legal ---------- */
.mn-calc .mn-legal{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--bord);
  font-size:12px;color:var(--txt2);line-height:1.7
}
.mn-calc .mn-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.mn-calc .mn-legal b{color:var(--ink);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .mn-calc .mn-sum{grid-template-columns:1fr 1fr}
  .mn-calc .mn-tile--total{grid-column:1/-1}
}
@media (max-width:767px){
  .mn-calc{padding:0 20px 40px}
  .mn-calc h2.mn-h{font-size:26px}
  .mn-calc .mn-sum,.mn-calc .mn-books{grid-template-columns:1fr}
  .mn-calc .mn-panel__bd,.mn-calc .mn-payee{padding:20px}
  .mn-calc .mn-row{padding:12px 20px}
  .mn-calc .mn-panel__hd,.mn-calc .mn-book__hd{padding:14px 20px}
  .mn-calc .mn-grid-p,.mn-calc .mn-note{padding-left:20px;padding-right:20px}
  .mn-calc .mn-reset{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
  .mn-calc .mn-cta{padding:24px}
  .mn-calc .mn-btn{width:100%;text-align:center}
  .mn-calc .mn-tile .mn-big{font-size:26px}
  .mn-calc .mn-tile--total .mn-big{font-size:32px}
}
@media (prefers-reduced-motion:reduce){.mn-calc *{transition:none!important}}

/* ==========================================================================
   Condiciones secundarias plegables
   ========================================================================== */
.mn-calc .mn-more{margin-top:16px}
.mn-calc .mn-more > summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border:1px solid var(--bord);border-radius:var(--r-btn);background:var(--bg);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2)
}
.mn-calc .mn-more > summary::-webkit-details-marker{display:none}
.mn-calc .mn-more > summary::after{content:"+";font-family:var(--mono);font-size:15px;color:var(--ink)}
.mn-calc .mn-more[open] > summary::after{content:"\2212"}
.mn-calc .mn-more > summary:hover{border-color:var(--ink);color:var(--ink)}
.mn-calc .mn-more > .mn-fields{margin-top:16px}
@media (min-width:768px){
  .mn-calc .mn-more{margin-top:0}
  .mn-calc .mn-more > summary{display:none}
  .mn-calc .mn-more > .mn-fields{margin-top:16px}
}

/* ==========================================================================
   Interruptor de detalle en los libros
   ========================================================================== */
.mn-calc .mn-toggle{
  display:flex;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--mono);font-size:12px;color:var(--txt2);cursor:pointer
}
.mn-calc .mn-toggle input{accent-color:var(--ink);width:16px;height:16px;cursor:pointer;flex:none}
.mn-calc .mn-toggle:hover{color:var(--ink)}
.mn-calc .mn-books{margin-top:12px}
.mn-calc.is-compact .mn-cb{display:none}
.mn-calc.is-compact .mn-row{padding-top:10px;padding-bottom:10px}

/* ==========================================================================
   Barra fija de resultado (solo movil)
   ========================================================================== */
.mn-calc .mn-sbar{display:none}
@media (max-width:767px){
  .mn-calc .mn-sbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--ink);color:var(--surface);cursor:pointer;
    padding:10px 84px 10px 20px;gap:16px;align-items:center;justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.14)
  }
  .mn-calc .mn-sbar__t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mn-calc .mn-sbar__t .mn-ovl{margin:0;color:var(--acc);font-size:9.5px;letter-spacing:.12em}
  .mn-calc .mn-sbar__t b{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--surface)}
  .mn-calc .mn-sbar__p{
    display:flex;flex-direction:column;gap:3px;text-align:right;
    font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.62);white-space:nowrap
  }
  .mn-calc .mn-sbar__p b{color:var(--surface);font-weight:500}
  .mn-calc{padding-bottom:104px}
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */
.mn-calc .mn-faq{margin-top:48px;padding-top:32px;border-top:1px solid var(--bord)}
.mn-calc .mn-faq .mn-ovl{margin:0 0 10px}
.mn-calc .mn-faq__list{
  margin-top:24px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-card);overflow:hidden
}
.mn-calc .mn-q{border-bottom:1px solid var(--bord)}
.mn-calc .mn-q:last-child{border-bottom:0}
.mn-calc .mn-q > summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:20px 24px;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);line-height:1.35
}
.mn-calc .mn-q > summary::-webkit-details-marker{display:none}
.mn-calc .mn-q > summary::after{
  content:"+";font-family:var(--mono);font-size:18px;font-weight:400;color:var(--txt2);flex:none;line-height:1.2
}
.mn-calc .mn-q[open] > summary::after{content:"\2212";color:var(--ink)}
.mn-calc .mn-q > summary:hover{background:var(--bg)}
.mn-calc .mn-q[open] > summary{padding-bottom:8px}
.mn-calc .mn-q__a{padding:0 24px 22px}
.mn-calc .mn-q__a p{margin:0;color:var(--txt2);font-size:15px;line-height:1.65;max-width:70ch}
.mn-calc .mn-q__a b{color:var(--ink);font-weight:600}
@media (max-width:767px){
  .mn-calc .mn-faq{margin-top:32px;padding-top:24px}
  .mn-calc .mn-q > summary{padding:16px 20px;font-size:15px;gap:14px}
  .mn-calc .mn-q__a{padding:0 20px 18px}
  .mn-calc .mn-q__a p{font-size:14px}
}