/* daezpro.com — 13-dossier-content.css
   Dossier "pérdidas técnicas": tarjetas de mecanismo (.mech), bloque de fórmula
   (.fx), estado de resultados (.pnl), tabla de datos genérica (.dtable),
   calculadora del vacío (.nolo), jerarquía de intervención (.hier) y bloque de
   supuestos (.assum). */

/* --------------------------------------------------------- MECANISMOS */
.mech-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,24px);
  margin-top:clamp(32px,3.4vw,44px);
}
.mech{
  padding:clamp(22px,2.2vw,28px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
}
.mech__head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.mech__no{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px; height:32px;
  padding:0 8px;
  border:1.5px solid var(--text-strong);
  border-radius:var(--r-md);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--fs-sm);
  color:var(--text-strong);
}
.mech__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-0.01em;
  color:var(--text-strong);
}
.mech__grid{ display:grid; gap:14px; }
.mech__row dt{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:4px;
}
.mech__row dd{ font-size:var(--fs-body); line-height:1.55; color:var(--text-body); margin:0; }
.mech__row dd cite{
  display:block;
  margin-top:5px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-body);
  opacity:.75;
}

/* ------------------------------------------------------------- FÓRMULA */
.fx{
  margin:clamp(22px,2.4vw,30px) 0;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  background:var(--bg-canvas);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  text-align:center;
}
.fx__eq{
  font-family:var(--font-mono);
  font-size:clamp(18px,2vw,23px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--text-strong);
}
.fx__eq sub,.fx__eq sup{ font-size:.62em; }
.fx__where{
  max-width:60ch;
  margin:12px auto 0;
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--text-body);
}
.fx__where b{ color:var(--text-strong); font-weight:600; }

/* ------------------------------------------------- ESTADO DE RESULTADOS */
.pnl{
  width:100%;
  margin-top:clamp(20px,2.2vw,28px);
  border-collapse:collapse;
  font-size:var(--fs-body);
}
.pnl caption{
  caption-side:top;
  text-align:left;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-body);
  margin-bottom:14px;
}
.pnl th,.pnl td{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.pnl td{ font-family:var(--font-mono); color:var(--text-strong); }
.pnl th[scope="row"]{
  text-align:left;
  font-family:var(--font-ui);
  font-weight:500;
  color:var(--text-strong);
}
.pnl thead th{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-body);
  border-bottom:2px solid var(--text-strong);
}
.pnl thead th[scope="col"]:first-child{ text-align:left; }
.pnl__loss th,.pnl__loss td{ color:var(--accent-strong); }
.pnl__total th,.pnl__total td{
  border-top:2px solid var(--text-strong);
  border-bottom:none;
  padding-top:14px;
  font-weight:700;
  color:var(--text-strong);
}

/* -------------------------------------------------------- TABLA GENÉRICA */
.dtable-wrap{
  overflow-x:auto;
  margin-top:clamp(20px,2.2vw,28px);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.dtable{ width:100%; min-width:540px; border-collapse:collapse; font-size:var(--fs-body); }
.dtable th,.dtable td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
}
.dtable thead th{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-body);
  background:var(--bg-canvas);
}
.dtable tbody tr:last-child td{ border-bottom:none; }
.dtable tbody tr:hover{ background:var(--bg-canvas); }

/* --------------------------------------------------- CALCULADORA (NOLO) */
.nolo__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:16px;
  margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.nolo__k{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-strong);
}
.nolo__inputs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:26px;
}
.nolo__field{ display:grid; gap:8px; }
.nolo__field label{ font-size:var(--fs-sm); font-weight:600; color:var(--text-strong); }
.nolo__field input{
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  font-family:var(--font-mono);
  font-size:var(--fs-body);
  color:var(--text-strong);
  transition:border-color .16s ease;
}
.nolo__field input:focus-visible{ border-color:var(--accent-strong); }
.nolo__note{ font-size:var(--fs-xs); line-height:1.4; color:var(--text-body); }

.nolo__out{
  padding:26px;
  background:var(--bg-canvas);
  border-radius:var(--r-md);
  text-align:center;
}
.nolo__out .nolo__k{ display:block; margin-bottom:10px; }
.nolo__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(38px,5vw,56px);
  letter-spacing:-0.03em;
  line-height:1.05;
  color:var(--text-strong);
  margin:4px 0;
}
.nolo__sub{ font-size:var(--fs-body); line-height:1.5; color:var(--text-body); }
.nolo__foot{ margin-top:18px; font-size:var(--fs-xs); line-height:1.5; color:var(--text-body); }

/* ------------------------------------------------ JERARQUÍA DE INTERVENCIÓN */
.hier{
  display:grid;
  gap:1px;
  margin-top:clamp(28px,3vw,40px);
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.hier__item{
  display:flex;
  gap:22px;
  align-items:flex-start;
  padding:26px 28px;
  background:var(--surface);
}
.hier__rank{
  flex:0 0 auto;
  width:40px; height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--text-strong);
  color:var(--text-invert);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-title);
}
.hier__body{ flex:1 1 auto; min-width:0; }
.hier__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-0.01em;
  color:var(--text-strong);
  margin-bottom:8px;
}
.hier__desc{ font-size:var(--fs-body); line-height:1.55; color:var(--text-body); }
.hier__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.hier__capex,.hier__pay{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.03em;
}
.hier__capex{ background:var(--bg-canvas); color:var(--text-body); border:1px solid var(--border); }
.hier__pay{ background:var(--accent-soft); color:var(--accent-strong); }

/* ---------------------------------------------------------- SUPUESTOS */
.assum{
  margin-top:clamp(24px,2.6vw,34px);
  padding:20px 24px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-canvas);
}
.assum__k{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:10px;
}
.assum__list{ display:grid; gap:8px; }
.assum__list li{
  position:relative;
  padding-left:18px;
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--text-body);
}
.assum__list li::before{ content:"–"; position:absolute; left:0; color:var(--text-body); }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:900px){
  .mech-grid{ grid-template-columns:1fr; }
  .nolo__inputs{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .pnl{ font-size:var(--fs-sm); }
  .pnl th,.pnl td{ padding:9px 10px; }
  .hier__item{ flex-direction:column; gap:14px; }
  .fx__eq{ font-size:var(--fs-h3); }
  .mech__head{ gap:10px; }
}

/* ------------------------------------------------------------------ NOTA
   Nota al pie de sección: observación honesta, advertencia o salvedad.
   NO usar .cota para esto: .cota es marginalia absoluta (position:absolute +
   white-space:nowrap) pensada para etiquetas cortas sobre un visual; aplicada
   a un párrafo largo se sale del flujo y desborda la página en horizontal. */
.note{
  max-width:70ch;
  margin-top:26px;
  padding-left:16px;
  border-left:2px solid var(--accent);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text-body);
}
.sec--dark .note{ color:var(--text-body); }