/* ============================================================
   SR · Capa de herramientas — diagnostico / pipeline / viabilidad
   Consume /css/sr.css. Solo capa visual: la logica de calculo,
   los formularios de Netlify y los flujos por pasos no se tocan.
   ============================================================ */
/* ── Puente de nombres. El HTML que genera el JS todavía usa los nombres
      viejos de variable; acá apuntan a los tokens del sistema. Cero hex. ── */
:root{
--ink:var(--sr-ink);--ink-2:var(--sr-mid);--paper:var(--sr-paper);
--paper-2:var(--sr-surface);--rule:var(--sr-line);--mute:var(--sr-mid);
--accent:var(--sr-ink);--accent-hover:var(--sr-mid);--accent-light:var(--sr-surface);
--danger:var(--sr-ink);
--serif:var(--sr-font);--sans:var(--sr-font);--mono:var(--sr-font)}

html{scroll-behavior:smooth}
body{margin:0}
.app{max-width:1080px;margin:0 auto;padding:var(--sr-3) var(--sr-4) var(--sr-6);min-height:100vh}

/* nav */
.tool-nav{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sr-3);
  padding:0 0 var(--sr-2);border-bottom:1px solid var(--sr-ink);margin-bottom:var(--sr-5)}
.sr a.tool-nav-brand{display:flex;align-items:baseline;gap:var(--sr-2);color:var(--sr-ink);border-bottom:0;padding-bottom:0}
.tool-nav-brand-meta{font-size:var(--sr-micro);color:var(--sr-mid)}
.sr a.tool-nav-back{font-size:var(--sr-micro);color:var(--sr-mid);border-bottom:0;padding-bottom:0;white-space:nowrap}
.sr a.tool-nav-back:hover{color:var(--sr-ink)}

/* hero */
.tool-hero{margin-bottom:var(--sr-5)}
.tool-hero-num{font-size:var(--sr-micro);color:var(--sr-mid);margin-bottom:var(--sr-2)}
.sr .tool-hero h1{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;margin-bottom:var(--sr-2);max-width:22ch}
.sr .tool-hero p{font-size:var(--sr-lead);font-weight:var(--sr-text);line-height:1.4;
  letter-spacing:-.015em;color:var(--sr-ink);max-width:47ch}

/* progreso — 4px, sin radio, relleno ink, canal line */
.progress-bar{display:flex;gap:var(--sr-1);margin-bottom:var(--sr-1)}
.progress-step{flex:1;height:4px;background:var(--sr-line);cursor:pointer}
.progress-step.active,.progress-step.done{background:var(--sr-ink)}
.progress-labels{display:flex;gap:var(--sr-1);margin-bottom:var(--sr-5)}
.progress-label{flex:1;font-size:var(--sr-micro);color:var(--sr-mid);cursor:pointer;padding-top:var(--sr-1)}
.progress-label.active{color:var(--sr-ink);font-weight:var(--sr-emph)}

/* cabecera de paso */
.step-header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sr-3);
  padding-bottom:var(--sr-2);border-bottom:1px solid var(--sr-ink)}
.sr .step-title{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;line-height:1.12;margin:0}
.step-count{font-size:var(--sr-micro);color:var(--sr-mid);white-space:nowrap}
.step-desc{font-size:var(--sr-body);color:var(--sr-ink);margin:var(--sr-2) 0 var(--sr-4);max-width:47ch}

/* bloques de carga */
.card{background:var(--sr-paper);border:1px solid var(--sr-line);padding:var(--sr-3);margin-bottom:var(--sr-2)}
.card-header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sr-2);
  margin-bottom:var(--sr-2);padding-bottom:var(--sr-1);border-bottom:1px solid var(--sr-line)}
.sr .card-header h3{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;line-height:1.5;margin:0}
.card-remove{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sr-font);font-size:var(--sr-micro);color:var(--sr-mid)}
.card-remove:hover{color:var(--sr-ink)}

/* formulario */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sr-2) var(--sr-3)}
.form-group{display:flex;flex-direction:column;gap:var(--sr-1)}
.form-group label{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;color:var(--sr-ink)}
.form-group input{padding:var(--sr-1) 0;border:0;border-bottom:1px solid var(--sr-line);
  font-family:var(--sr-font);font-size:var(--sr-body);color:var(--sr-ink);background:transparent}
.form-group input:focus{outline:none;border-bottom-color:var(--sr-ink)}
.form-group input::placeholder{color:var(--sr-mid)}
.form-hint{font-size:var(--sr-micro);color:var(--sr-mid);line-height:1.6}
.section-label{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;color:var(--sr-ink);
  margin:var(--sr-3) 0 var(--sr-2);padding-bottom:var(--sr-1);border-bottom:1px solid var(--sr-ink)}

/* acción */
.btn{display:inline-flex;align-items:center;gap:var(--sr-1);font-family:var(--sr-font);
  font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;
  padding:8px 16px;border:1px solid var(--sr-ink);cursor:pointer;background:transparent}
.btn-primary{background:var(--sr-ink);color:var(--sr-paper)}
.btn-primary:hover{background:var(--sr-paper);color:var(--sr-ink)}
.btn-secondary{background:transparent;color:var(--sr-ink);border-color:var(--sr-line)}
.btn-secondary:hover{border-color:var(--sr-ink)}
.btn-ghost{background:transparent;color:var(--sr-mid);border-color:transparent}
.btn-ghost:hover{color:var(--sr-ink)}
.btn-add{width:100%;padding:var(--sr-2);border:1px dashed var(--sr-line);background:transparent;
  color:var(--sr-mid);font-family:var(--sr-font);font-size:var(--sr-label);font-weight:var(--sr-emph);cursor:pointer}
.btn-add:hover{border-color:var(--sr-ink);color:var(--sr-ink)}
.btn-row{display:flex;justify-content:space-between;gap:var(--sr-2);
  margin-top:var(--sr-4);padding-top:var(--sr-3);border-top:1px solid var(--sr-line)}
.btn-row-right{display:flex;gap:var(--sr-1)}

/* tablero */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--sr-ink);border-left:1px solid var(--sr-line);margin-bottom:var(--sr-4)}
.dash-card{padding:var(--sr-3);border-right:1px solid var(--sr-line);border-bottom:1px solid var(--sr-line)}
.dash-card .label{font-size:var(--sr-micro);color:var(--sr-mid);margin-bottom:var(--sr-1)}
.dash-card .value{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;line-height:1.12}
.dash-card .sub{font-size:var(--sr-micro);color:var(--sr-mid);margin-top:var(--sr-1)}

/* tabla */
.client-table{width:100%;border-collapse:collapse;font-size:var(--sr-label);margin-bottom:var(--sr-4)}
.client-table th{text-align:left;font-size:var(--sr-micro);font-weight:var(--sr-emph);letter-spacing:0;
  color:var(--sr-mid);padding:0 var(--sr-2) var(--sr-1) 0;border-bottom:1px solid var(--sr-ink)}
.client-table td{padding:var(--sr-1) var(--sr-2) var(--sr-1) 0;border-bottom:1px solid var(--sr-line);vertical-align:top}
.client-table th:last-child,.client-table td:last-child{padding-right:0}
.client-table th:not(:first-child),.client-table td:not(:first-child){text-align:right}

/* estado por forma, no por color */
.icp-badge{display:inline-block;font-size:var(--sr-micro);font-weight:var(--sr-emph);letter-spacing:0;
  padding:3px 7px;border:1px solid var(--sr-line);color:var(--sr-mid);background:transparent;white-space:nowrap}
.icp-star{border-color:var(--sr-ink);color:var(--sr-ink)}
.icp-star::before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;margin-right:5px}
.icp-stable{border-color:var(--sr-line);color:var(--sr-mid)}
.icp-review{border-color:var(--sr-ink);color:var(--sr-ink);border-style:dashed}

/* gráfico */
.chart-box{border:1px solid var(--sr-line);padding:var(--sr-3);margin-bottom:var(--sr-3);min-width:0}
.sr .chart-box h3{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;
  margin-bottom:var(--sr-2);padding-bottom:var(--sr-1);border-bottom:1px solid var(--sr-line)}

/* bloque oscuro */
.net-result{background:var(--sr-ink);color:var(--sr-paper);padding:var(--sr-4);margin-bottom:var(--sr-4)}
.net-result .label{font-size:var(--sr-micro);color:var(--sr-line);margin-bottom:var(--sr-1)}
.net-result .big-value{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;line-height:1.12}
.net-result .sub{font-size:var(--sr-micro);color:var(--sr-line);margin-top:var(--sr-1)}
.net-result-row{display:flex;flex-wrap:wrap;gap:var(--sr-5);margin-top:var(--sr-3);
  padding-top:var(--sr-2);border-top:1px solid var(--sr-mid)}
.net-result-item .value{font-size:var(--sr-lead);font-weight:var(--sr-emph);line-height:1.4}

/* pesos */
.weight-row{display:flex;align-items:center;gap:var(--sr-2);margin-bottom:var(--sr-1)}
.weight-row label{min-width:200px;font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;color:var(--sr-ink)}
.weight-row input[type=range]{flex:1;accent-color:var(--sr-ink)}
.weight-row .wval{min-width:40px;text-align:right;font-size:var(--sr-label);font-weight:var(--sr-emph);color:var(--sr-ink)}
.weight-hint{font-size:var(--sr-micro);color:var(--sr-mid);margin:0 0 var(--sr-2)}
.weight-total{display:inline-block;margin-top:var(--sr-2);padding:3px 7px;
  font-size:var(--sr-micro);font-weight:var(--sr-emph);border:1px solid var(--sr-line);color:var(--sr-mid)}
.weight-ok{border-color:var(--sr-ink);color:var(--sr-ink)}
.weight-bad{border-color:var(--sr-ink);color:var(--sr-ink);border-style:dashed}

/* cierre */
.tool-cta{background:var(--sr-ink);color:var(--sr-paper);padding:var(--sr-5) var(--sr-4);margin-top:var(--sr-5)}
.sr .tool-cta h2{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;margin-bottom:var(--sr-2);max-width:24ch}
.tool-cta p{font-size:var(--sr-body);color:var(--sr-line);max-width:47ch;margin-bottom:var(--sr-3)}
.sr .tool-cta a{display:inline-flex;align-items:center;gap:var(--sr-1);background:var(--sr-paper);
  color:var(--sr-ink);border:1px solid var(--sr-paper);padding:8px 16px;
  font-size:var(--sr-label);font-weight:var(--sr-emph)}
.sr .tool-cta a:hover{background:var(--sr-ink);color:var(--sr-paper)}
.tool-cta a svg{width:14px;height:14px}

.hidden{display:none!important}

/* puerta de email — sessionStorage y fetch a Netlify quedan como están */
.gate-overlay{position:fixed;inset:0;background:var(--sr-paper);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:var(--sr-4);overflow-y:auto}
.gate-box{max-width:560px;width:100%}
.gate-mark{display:flex;align-items:baseline;gap:var(--sr-2);
  margin-bottom:var(--sr-4);padding-bottom:var(--sr-2);border-bottom:1px solid var(--sr-ink)}
.gate-mark-meta{font-size:var(--sr-micro);color:var(--sr-mid)}
.gate-num{font-size:var(--sr-micro);color:var(--sr-mid);margin-bottom:var(--sr-2)}
.sr .gate-box h1{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;margin-bottom:var(--sr-2);max-width:22ch}
.sr .gate-box>p{font-size:var(--sr-body);color:var(--sr-ink);margin-bottom:var(--sr-3);max-width:47ch}
.gate-form{display:flex;flex-direction:column;gap:var(--sr-2);max-width:380px}
.gate-form input{padding:var(--sr-1) 0;border:0;border-bottom:1px solid var(--sr-line);
  font-family:var(--sr-font);font-size:var(--sr-body);color:var(--sr-ink);background:transparent}
.gate-form input:focus{outline:none;border-bottom-color:var(--sr-ink)}
.gate-form input::placeholder{color:var(--sr-mid)}
.gate-form button{margin-top:var(--sr-1);padding:8px 16px;background:var(--sr-ink);color:var(--sr-paper);
  border:1px solid var(--sr-ink);font-family:var(--sr-font);font-size:var(--sr-label);
  font-weight:var(--sr-emph);cursor:pointer}
.gate-form button:hover{background:var(--sr-paper);color:var(--sr-ink)}
.gate-note{font-size:var(--sr-micro);color:var(--sr-mid);margin-top:var(--sr-2)}
.sr a.gate-back{display:inline-block;margin-top:var(--sr-4);font-size:var(--sr-micro);
  color:var(--sr-mid);border-bottom:1px solid var(--sr-line)}
.sr a.gate-back:hover{color:var(--sr-ink);border-color:var(--sr-ink)}

@media(max-width:760px){
  .app{padding:var(--sr-2) var(--sr-3) var(--sr-5)}
  .tool-nav-brand-meta{display:none}
  .form-grid{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .btn-row,.btn-row-right{flex-direction:column}
  .net-result-row{flex-direction:column;gap:var(--sr-2)}
  .client-table{font-size:var(--sr-micro)}
  .weight-row{flex-wrap:wrap}
  .weight-row label{min-width:0;flex:1 0 100%}
  .tool-cta{padding:var(--sr-4) var(--sr-3)}
}

/* ============ herramientas 02 y 03 ============ */

/* tabla generica */
.tbl{width:100%;border-collapse:collapse;font-size:var(--sr-label);margin-bottom:var(--sr-4)}
.tbl th{text-align:left;font-size:var(--sr-micro);font-weight:var(--sr-emph);letter-spacing:0;
  color:var(--sr-mid);padding:0 var(--sr-2) var(--sr-1) 0;border-bottom:1px solid var(--sr-ink)}
.tbl td{padding:var(--sr-1) var(--sr-2) var(--sr-1) 0;border-bottom:1px solid var(--sr-line);vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right}

/* estado por forma, no por color */
.badge{display:inline-block;font-size:var(--sr-micro);font-weight:var(--sr-emph);letter-spacing:0;
  padding:3px 7px;border:1px solid var(--sr-line);color:var(--sr-mid);background:transparent;white-space:nowrap}
.b-green{border-color:var(--sr-ink);color:var(--sr-ink)}
.b-green::before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;margin-right:5px}
.b-yellow,.b-blue,.b-gray{border-color:var(--sr-line);color:var(--sr-mid)}
.b-red{border-color:var(--sr-ink);color:var(--sr-ink);border-style:dashed}

/* bloques oscuros */
.forecast-box,.big-box{background:var(--sr-ink);color:var(--sr-paper);padding:var(--sr-4);margin-bottom:var(--sr-4)}
.forecast-box .label,.big-box .label{font-size:var(--sr-micro);color:var(--sr-line);margin-bottom:var(--sr-1)}
.forecast-box .big-value,.big-box .big-value{font-size:var(--sr-cap);font-weight:var(--sr-emph);
  letter-spacing:-.03em;line-height:1.12}
.forecast-box .sub,.big-box .sub{font-size:var(--sr-micro);color:var(--sr-line);margin-top:var(--sr-1)}
.forecast-row,.big-box-row{display:flex;flex-wrap:wrap;gap:var(--sr-5);margin-top:var(--sr-3);
  padding-top:var(--sr-2);border-top:1px solid var(--sr-mid)}
.forecast-item .value,.big-box-item .value{font-size:var(--sr-lead);font-weight:var(--sr-emph);line-height:1.4}

/* barra de avance: 4px, relleno ink, canal line, sin condicional de color */
.progress-ring{width:100%;height:4px;background:var(--sr-line);overflow:hidden;margin:var(--sr-1) 0}
.progress-fill{height:100%;background:var(--sr-ink)}

/* benchmark: el marcador es una forma, no un tono */
.bench-bar{display:flex;align-items:center;gap:var(--sr-2);margin-bottom:var(--sr-1)}
.bench-label{min-width:130px;font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;color:var(--sr-ink)}
.bench-track{flex:1;height:16px;position:relative;background:var(--sr-paper);border:1px solid var(--sr-line)}
.bench-range{position:absolute;height:100%;background:var(--sr-surface)}
.bench-marker{position:absolute;top:50%;width:7px;height:7px;margin:-4px 0 0 -3px;background:var(--sr-ink)}
.bench-vals{display:flex;justify-content:space-between;font-size:var(--sr-micro);color:var(--sr-mid);margin-top:var(--sr-1)}

/* escenarios */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:var(--sr-4);
  border-top:1px solid var(--sr-ink);border-left:1px solid var(--sr-line)}
.scenario-card{padding:var(--sr-3);border-right:1px solid var(--sr-line);border-bottom:1px solid var(--sr-line);background:transparent}
.scenario-card.highlight{background:var(--sr-surface)}
.sr .scenario-card h4{font-size:var(--sr-label);font-weight:var(--sr-emph);letter-spacing:0;
  color:var(--sr-ink);margin:0 0 var(--sr-2)}
.scenario-card .sv{font-size:var(--sr-lead);font-weight:var(--sr-emph);letter-spacing:-.015em;line-height:1.4}
.scenario-card .sl{font-size:var(--sr-micro);color:var(--sr-mid)}

/* nota al pie de una herramienta */
.disclaimer{font-size:var(--sr-micro);color:var(--sr-mid);line-height:1.7;padding:var(--sr-3);
  background:var(--sr-surface);border:1px solid var(--sr-line);margin-bottom:var(--sr-3)}

@media(max-width:760px){
  .scenario-grid{grid-template-columns:1fr}
  .forecast-row,.big-box-row{flex-direction:column;gap:var(--sr-2)}
  .bench-bar{flex-wrap:wrap}
  .bench-label{min-width:0;flex:1 0 100%}
  .tbl{font-size:var(--sr-micro)}
}

/* select: mismo tratamiento que el input, sin chrome del navegador */
.form-group select,.card select,select.sr-sel{
  padding:var(--sr-1) 0;border:0;border-bottom:1px solid var(--sr-line);background:transparent;
  font-family:var(--sr-font);font-size:var(--sr-body);color:var(--sr-ink);
  appearance:none;-webkit-appearance:none;cursor:pointer}
.form-group select:focus,.card select:focus{outline:none;border-bottom-color:var(--sr-ink)}
.form-group select option,.card select option{color:var(--sr-ink);background:var(--sr-paper)}