/* PerMaT-RP web · simulador de costes (interfaz) */
.sim { display: grid; grid-template-columns: minmax(340px, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 22px; }
.sim-form { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-1); display: grid; gap: 22px; }
.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-head h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg-soft); border: 1px dashed #b9c8de; }
.presets-lab { font: 700 .8125rem/1 var(--font-display); color: var(--muted); margin-right: 4px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #c3d0e4; background: #fff; color: var(--ink); font: 600 .875rem/1 var(--font-display); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease); }
.chip:hover { border-color: var(--blue); color: var(--blue-700); transform: translateY(-1px); }
.chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.sfield { display: grid; gap: 8px; }
.slab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slab label { font: 700 1rem/1.3 var(--font-display); color: var(--ink); }
.help-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--blue); cursor: pointer; display: grid; place-items: center; }
.help-btn:hover, .help-btn[aria-expanded="true"] { background: var(--sky); }
.help-btn svg { width: 22px; height: 22px; }
.help { padding: 12px 14px; border-radius: 12px; background: var(--sky); color: #12306e; font-size: .9rem; line-height: 1.55; }
.unit { font-size: .8125rem; color: var(--muted); }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.stepper button { min-height: 52px; border: 1.5px solid #c3d0e4; border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.stepper button:hover { background: var(--sky); border-color: var(--blue); }
.stepper button:active { transform: scale(.96); }
.stepper svg { width: 20px; height: 20px; }
.stepper .input { text-align: center; font: 700 1.25rem/1 var(--font-display); min-height: 52px; }
.sfield.is-invalid .input { border-color: #c62828; background-color: #fff8f8; }

/* Resultado */
.sim-result { display: grid; gap: 22px; position: sticky; top: 92px; }
.total-card { padding: clamp(22px, 3vw, 32px); border-radius: 24px; color: #d5e3ff; background: linear-gradient(125deg, #0b2f86 0%, #0f43b0 55%, #0e8f93 140%); box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
.total-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(53, 211, 199, .45), transparent 65%); pointer-events: none; }
.total-lab { font: 700 .8125rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #bcd0f8; }
.total-val { display: block; margin-top: 10px; font: 800 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.total-note { margin-top: 10px; font-size: .875rem; color: #c4d6fb; max-width: 56ch; position: relative; z-index: 1; }
.sim.is-busy .total-val { opacity: .7; transition: opacity .2s; }
.dist h3, .level h3 { font: 700 1rem/1.3 var(--font-display); margin-bottom: 12px; }
.costbar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: #e6edf7; }
.costbar span { height: 100%; transition: width .5s var(--ease); }
.s1 { background: #1553d6; } .s2 { background: #35a0f0; } .s3 { background: #7a5af8; } .s4 { background: #0e9f9a; } .s5 { background: #f0a020; } .s6 { background: #94a3bd; }
.legend-list { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(2, 1fr); }
.legend-list li { display: grid; grid-template-columns: 14px 1fr; gap: 4px 10px; align-items: center; font-size: .875rem; }
.legend-list li i { width: 12px; height: 12px; border-radius: 4px; grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
.legend-list li b { grid-column: 2; font-weight: 600; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9375rem; vertical-align: middle; }
.rtable thead th { background: var(--bg-soft); font: 700 .75rem/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rtable tbody th, .rtable tfoot th { font-weight: 600; color: var(--ink); }
.rtable td.num { text-align: right; white-space: nowrap; }
.rtable th.num { text-align: right; }
.rtable tbody tr:hover { background: #fafcff; }
.rtable tbody tr.fixed td, .rtable tbody tr.fixed th { color: var(--muted); }
.rtable tfoot tr.sub th, .rtable tfoot tr.sub td { background: var(--bg-soft); }
.rtable tfoot tr.sub th { text-align: right; font-weight: 600; color: var(--ink-2); }
.rtable tfoot tr.grand th, .rtable tfoot tr.grand td { background: var(--ink); color: #fff; font: 800 1.0625rem/1.3 var(--font-display); border-bottom: 0; }
.rtable tfoot tr.grand th { text-align: right; }
.level { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.level dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0; }
.level dt { font-size: .8125rem; color: var(--muted); }
.level dd { margin: 2px 0 0; font: 800 1.25rem/1.2 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }

.sim-bar { display: none; }

@media (max-width: 1279px) {
  .sim { grid-template-columns: 1fr; }
  .sim-result { position: static; }
  .sim-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--ink); color: #c9d6ee; box-shadow: 0 18px 40px rgba(10, 26, 51, .45); transform: translateY(140%); transition: transform .35s var(--ease); font-size: .8125rem; }
  .sim-bar.is-on { transform: none; }
  .sim-bar b { margin-left: auto; color: #fff; font: 800 1.1rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .legend-list { grid-template-columns: 1fr; }
}
/* Tabla de resultados como tarjetas en pantallas pequeñas */
@media (max-width: 640px) {
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable, .rtable tbody, .rtable tfoot, .rtable tr { display: block; }
  .rtable tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .rtable tbody th { display: block; padding: 0 0 8px; border: 0; font-size: 1rem; }
  .rtable tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; font-size: .9rem; }
  .rtable tbody td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .8125rem; }
  .rtable tbody td:not([data-label]) { display: none; }
  .rtable tbody tr.fixed td:not([data-label]) { display: none; }
  .rtable tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  .rtable tfoot th, .rtable tfoot td { display: block; padding: 0; border: 0 !important; background: transparent !important; color: inherit; }
  .rtable tfoot tr.sub { background: var(--bg-soft); }
  .rtable tfoot tr.grand { background: var(--ink); color: #fff; }
  .rtable tfoot th { text-align: left !important; }
  .rtable tfoot tr[hidden] { display: none; }
  .stepper { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .presets .chip { flex: 1 1 auto; }
}