/* Zavora Free Tools — estilos propios de /tools/sales/profit-margin-calculator. Se cargan solo en su página (tools.scripts),
   después de tools.css; lo compartido entre herramientas vive en tools.css. */
/* ---------- Calculadora de margen (/tools/sales/profit-margin-calculator) ----------
   Formulario a la izquierda y resultado a la derecha; «¿Y si das un descuento?» debajo, a todo el ancho (el foco
   sigue el orden en que se lee: formulario → resultado → descuento, igual que en el celular). Barra «De cada $100»: énfasis = la ganancia en violeta,
   el resto en grises de un mismo tono (separación validada ΔE ≥ 16), 2 px de superficie entre partes y
   leyenda con las cifras en texto (la barra es decorativa: aria-hidden). */
.pm.tl-tool { grid-template-areas: "form result" "whatif whatif"; }
.pm > .tl-tool__form { grid-area: form; }
.pm > .tl-tool__result { grid-area: result; }
.pm > .pm-whatif { grid-area: whatif; }

/* «Probar con un ejemplo»: objetivo táctil cómodo sin agrandar el título de la sección */
.pm .tl-section__t .tl-link { display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
.pm-mode { margin: 0; padding: 0; border: 0; min-width: 0; }
.pm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.pm-seg label { justify-content: center; min-height: 44px; padding: 0 10px; text-align: center; }
.pm-mode + .tl-hint { margin-top: 8px; }
.pm-round { margin-top: 12px; }
.tl-row + .pm-round, .pm-round + .tl-row, .pm-peek + .pm-round, .pm-peek + .tl-row { margin-top: 14px; }
/* Resumen corto bajo los datos (solo en el celular, donde el resultado queda lejos) */
.pm-peek { display: none; }

/* Más opciones */
.pm-more { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.pm-more__s { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--brand-ink); }
.pm-more__s::-webkit-details-marker { display: none; }
.pm-more__i { display: inline-grid; place-items: center; align-self: center; width: 22px; height: 22px; border: 1px solid var(--brand-line); border-radius: 6px; font-weight: 600; line-height: 1; }
.pm-more__i::before { content: "+"; } /* decorativo (aria-hidden): el estado abierto/cerrado ya lo anuncia <details> */
.pm-more[open] .pm-more__i::before { content: "−"; }
.pm-more__s small { font-weight: 400; font-size: .8125rem; color: var(--ink-3); }
.pm-more__s:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.pm-more__b { padding-top: 10px; }
.pm-vat-on { margin-top: 16px; }
.pm-vat { margin-top: 12px; max-width: 16rem; }

/* Resultado */
.pm-warn p + p { margin-top: 6px; }
.pm-warn { margin: 0 0 12px; }
/* Contraste AA: la etiqueta gris (#6e6880) sobre el violeta claro de --accent queda en 4,4:1 */
.pm .tl-stat--accent .tl-stat__l { color: var(--ink-2); }
.pm .tl-stat__l { display: block; line-height: 1.3; } /* etiquetas de dos líneas sin el interlineado del párrafo */
.pm .tl-stat--hero.is-loss { border-color: var(--bad); background: #fff; }
/* Las cifras no se parten entre dígitos («$300.00 / 0»): una línea, y el JS achica la letra si no cabe */
.pm .tl-stat__v { white-space: nowrap; overflow-wrap: normal; transition: none; } /* sin transición: con «reducir movimiento» site.css da .01ms a todo y la medida llegaría tarde */
.pm .tl-stat__v.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.pm-split { margin: 16px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.pm-split__t { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.pm-split__bar { display: flex; gap: 2px; height: 16px; margin-top: 10px; border-radius: 4px; overflow: hidden; overflow: clip; background: var(--bg-alt); }
.pm-split__seg { display: block; height: 100%; min-width: 0; flex: none; }
.pm-split__seg--cost, .pm-key--cost { background: #544e66; }
.pm-split__seg--other, .pm-key--other { background: #8a83a0; }
.pm-split__seg--tax, .pm-key--tax { background: #bcb5cc; }
.pm-split__seg--profit, .pm-key--profit { background: var(--brand); }
.pm-split__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .85rem; color: var(--ink-2); }
.pm-split__legend li { display: inline-flex; align-items: center; gap: 6px; }
.pm-split__legend strong { color: var(--ink); font-weight: 600; }
.pm-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pm-split__bar.is-loss + .pm-split__legend [data-leg="profit"] .pm-key { background: #fff; border: 2px solid var(--bad); }
.pm-sub { margin: 16px 0 8px; font: 600 .78rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pm-totals__list { padding: 4px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.pm-totals__list > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pm-totals__list > div:last-child { border-bottom: 0; }
.pm-totals__list dt { flex: 1 1 9rem; min-width: 0; font-size: .9rem; color: var(--ink-2); }
.pm-totals__list dt small { display: block; font-size: .78rem; color: var(--ink-3); }
.pm-totals__list dd { flex: none; max-width: 100%; margin: 0 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.pm-totals__sum { border-top: 2px solid var(--ink); }
.pm-totals__list > .pm-totals__sum { border-bottom: 0; }
.pm-totals__sum dt { font-weight: 600; color: var(--ink); }
.pm-totals__sum dt small { font-weight: 400; }
.pm-totals__sum dd { font-size: 1.2rem; font-weight: 700; }
.pm-totals__sum.is-loss { border-top-color: var(--bad); }
.pm-totals-hint { margin-top: 12px; }
.pm-explain { margin-top: 16px; }
.pm-explain .tl-formula, .pm-disc-msg .tl-formula { white-space: normal; overflow-wrap: anywhere; overflow-x: visible; }
.pm-formulas { margin: 6px 0 8px; }

/* ¿Y si das un descuento? */
.pm-whatif { padding: 24px 28px 28px; border-top: 1px solid var(--line); min-width: 0; }
.pm-whatif__t { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.01em; }
.pm-whatif__d { margin: 4px 0 14px; font-size: .9375rem; color: var(--ink-2); }
.pm-disc { max-width: 10rem; }
.pm-disc-stats { margin-top: 12px; }
.pm-disc-msg { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.pm-disc-msg p + .tl-formula { margin-top: 8px; }
.pm-disc-table { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.pm-disc-table:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pm-disc-table caption { padding: 10px 10px 4px; text-align: left; font-weight: 600; font-size: .875rem; color: var(--ink); white-space: normal; }
.pm-disc-table tr:last-child td { border-bottom: 0; }
.pm-disc-table tr.is-em td { background: var(--brand-tint); color: var(--ink); font-weight: 600; }
.pm-disc-table .tl-table th { white-space: normal; vertical-align: bottom; }
.pm-disc-table .tl-table td.num:last-child { white-space: normal; overflow-wrap: normal; } /* «Pierdes» y «(+166,7 %)» bajan de línea enteros */
.pm-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--brand-line); background: #fff; font-size: .7rem; font-weight: 600; color: var(--brand-ink); white-space: nowrap; }

/* PDF */
.pm-doc [hidden] { display: none; } /* la hoja de impresión vive fuera de [data-tool-root] */
.pm-doc .tl-stats, .pm-doc .pm-split, .pm-doc .pm-explain, .pm-doc .pm-totals { margin-top: 14px; }
.pm-doc .pm-doc__disc { margin-top: 6px; }

/* Escritorio: el bloque de descuento usa el ancho completo en dos columnas (datos y cifras | tabla) */
@media (min-width: 861px) {
  .pm-whatif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-content: start; }
  .pm-whatif > * { grid-column: 1; }
  .pm-whatif > .pm-disc-table { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin-top: 0; }
}
@media (max-width: 860px) {
  .pm.tl-tool { grid-template-areas: "form" "result" "whatif"; }
  .pm-peek:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--brand-line); border-radius: var(--r); background: var(--brand-tint); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
  .pm-peek .tl-link { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
}
@media (max-width: 640px) {
  .pm-whatif { padding: 20px 16px 24px; }
  .pm-plus { display: block; }
  .pm-disc-table .tl-table th, .pm-disc-table .tl-table td { padding-left: 6px; padding-right: 6px; }
  .pm-seg label { padding: 0 6px; font-size: .8125rem; }
}
@media (max-width: 380px) {
  .pm .tl-section__t { flex-wrap: wrap; row-gap: 2px; }
  .pm-seg label { padding: 0 4px; font-size: .78rem; }
  .pm-stats, .pm-disc-stats { grid-template-columns: minmax(0, 1fr); } /* cada cifra en su propia tarjeta a lo ancho */
  .pm-disc-table .tl-table { font-size: .8125rem; }
  .pm-disc-table .pm-tag { display: table; margin: 4px 0 0; }
}
@media print {
  .tl-print-sheet .pm-split, .tl-print-sheet .pm-explain { break-inside: avoid; }
}