/* Bootstrap/MDB article layout, scoped to avoid changing the shared site chrome. */
.knowledge-template { --knowledge-ink: #00204c; --knowledge-blue: #0269fe; --knowledge-gold: #fac63f; --knowledge-paper: #e1ebff; color: #263340; }
.knowledge-template .knowledge-template-section { margin-block: 2.5rem; scroll-margin-top: 6rem; }
#evidence-articulos .knowledge-template article > section { padding-block: 0; }
.knowledge-template .knowledge-template-meta { font-size: .9rem; line-height: 1.75; }
.knowledge-template .knowledge-template-figure figcaption { margin-top: .5rem; color: #6c757d; font-size: .9rem; }
.knowledge-template .knowledge-template-steps { counter-reset: knowledge-step; padding-left: 0; list-style: none; }
.knowledge-template .knowledge-template-steps li { position: relative; padding: 0 0 1.25rem 3.5rem; }
.knowledge-template .knowledge-template-steps li::before { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--knowledge-ink); color: #fff; font-weight: 700; counter-increment: knowledge-step; content: counter(knowledge-step, decimal-leading-zero); }
.knowledge-template .knowledge-template-steps strong { display: block; }
.knowledge-template details summary { cursor: pointer; min-height: 2.75rem; display: list-item; }
.knowledge-template a:focus-visible,
.knowledge-template summary:focus-visible { outline: 3px solid var(--knowledge-blue); outline-offset: 4px; }
.knowledge-template-skip { position: absolute; top: .5rem; left: .5rem; transform: translateY(-200%); padding: .75rem 1rem; z-index: 10000; background: #fff; color: #00204c; }
.knowledge-template-skip:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .knowledge-template *, .knowledge-template *::before, .knowledge-template *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* OEE article: in-page navigation, lists, totals only on tables marked has-total and the scroll target of the appointment block. */
.knowledge-template .knowledge-template-toc { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; border-left: .25rem solid var(--knowledge-blue); background: var(--knowledge-paper); }
.knowledge-template .knowledge-template-toc ol { margin: 0; padding-left: 1.25rem; }
.knowledge-template h3 { margin-top: 1.75rem; }
.knowledge-template #evaluacion { scroll-margin-top: 6rem; }
.knowledge-template .card > img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.knowledge-template .knowledge-template-steps h3 { margin: .35rem 0 .5rem; font-size: 1.2rem; }
.knowledge-template .knowledge-template-formula { margin: 1.25rem 0; padding: 1rem; border-radius: .5rem; background: var(--knowledge-paper); color: var(--knowledge-ink); text-align: center; }
.knowledge-template .knowledge-template-toc a { color: var(--knowledge-ink); text-decoration: underline; }
.knowledge-template .knowledge-template-resource { padding: 1rem; border-left: .25rem solid var(--knowledge-gold); background: #fff8e2; overflow-wrap: anywhere; }
.knowledge-template .knowledge-template-list { padding-left: 1.25rem; }
.knowledge-template .knowledge-template-list li { margin-bottom: .75rem; }
.knowledge-template .knowledge-template-list li::marker { color: var(--knowledge-blue); }
.knowledge-template table.has-total tbody tr:last-child > * { background: var(--knowledge-paper); color: var(--knowledge-ink); font-weight: 700; }

.knowledge-template #faq,
.knowledge-template #fuentes { scroll-margin-top: 6rem; }
.knowledge-template sup a { text-decoration: none; font-weight: 600; }
.knowledge-template .knowledge-template-list strong { color: var(--knowledge-ink); }
.knowledge-template table th[scope="row"] { color: var(--knowledge-ink); }

.knowledge-template .knowledge-template-plain-steps { padding-left: 1.4rem; }
.knowledge-template .knowledge-template-plain-steps li { margin-bottom: .6rem; }
.knowledge-template .knowledge-template-plain-steps li::marker { color: var(--knowledge-ink); font-weight: 700; }
.knowledge-template .knowledge-template-resource { margin-block: 1.25rem; }

/* The question the article answers, set apart from the intro as the reader's own words. */
.knowledge-template .oee-question { margin: 1.25rem 0; padding: .25rem 0 .25rem 1rem; border-left: .25rem solid var(--knowledge-gold); color: var(--knowledge-ink); font-size: 1.3rem; font-weight: 600; line-height: 1.35; }

/* Loss cascade: the worked example as minutes of one shift. Each row keeps a solid bar (time still productive) and a
   hatched slice in its factor's colour (time that factor took away); the empty track to the right is what earlier
   factors already lost. Blue = availability, gold = performance, red = quality; the last bar is green: good product. */
.knowledge-template .oee-cascade { --oee-track: #e6edf8; margin: 1.75rem 0; padding: 1.25rem; border: 1px solid #d6e2f5; border-radius: .75rem; background: #f7faff; view-timeline-name: --oee-cascade; }
.knowledge-template .oee-cascade figcaption { margin-bottom: 1rem; color: var(--knowledge-ink); font-weight: 600; }
.knowledge-template .oee-cascade-rows { margin: 0; padding: 0; list-style: none; }
.knowledge-template .oee-cascade-row { --tone: var(--knowledge-ink); display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: .55rem 0; }
.knowledge-template .oee-cascade-row + .oee-cascade-row { border-top: 1px dashed #d6e2f5; }
.knowledge-template .oee-cascade-row.is-availability { --tone: var(--knowledge-blue); }
.knowledge-template .oee-cascade-row.is-performance { --tone: #d9a21b; }
.knowledge-template .oee-cascade-row.is-quality { --tone: #b42318; }
.knowledge-template .oee-cascade-label { grid-row: span 2; margin: 0; line-height: 1.25; }
.knowledge-template .oee-cascade-label strong { display: block; color: var(--knowledge-ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.knowledge-template .oee-cascade-label span { color: #4a5868; font-size: .85rem; }
.knowledge-template .oee-cascade-track { display: flex; height: 1.5rem; overflow: hidden; border-radius: .3rem; background: var(--oee-track); }
.knowledge-template .oee-cascade-keep { width: calc(var(--keep) * 1%); background: var(--knowledge-ink); transform-origin: left center; }
.knowledge-template .oee-cascade-row.is-quality .oee-cascade-keep { background: #1a7f4b; }
.knowledge-template .oee-cascade-loss { width: calc(var(--loss) * 1%); background: repeating-linear-gradient(135deg, var(--tone) 0 3px, transparent 3px 7px); box-shadow: inset 2px 0 0 #fff; }
.knowledge-template .oee-cascade-note { margin: .35rem 0 0; color: #263340; font-size: .86rem; line-height: 1.4; }
.knowledge-template .oee-cascade-row:not(.is-plan) .oee-cascade-note { padding-left: .5rem; border-left: 3px solid var(--tone); }
.knowledge-template .oee-cascade-result { display: inline-block; margin: 1rem 0 .5rem; padding: .5rem .9rem; border-radius: .4rem; background: var(--knowledge-ink); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.knowledge-template .oee-cascade-foot { margin: 0; color: #6c757d; font-size: .82rem; }
/* Where scroll-driven animations exist, the shift fills in and then each factor shaves its slice off, one row after
   another, as the figure enters the viewport. The bar starts at the previous row's length and shrinks to its own. */
@supports (animation-timeline: view()) {
    .knowledge-template .oee-cascade .oee-cascade-keep { --from: calc((var(--keep) + var(--loss)) / var(--keep)); animation: oee-shave linear both; animation-timeline: --oee-cascade; }
    .knowledge-template .oee-cascade .oee-cascade-loss { animation: oee-reveal linear both; animation-timeline: --oee-cascade; }
    .knowledge-template .oee-cascade .oee-cascade-row.is-plan .oee-cascade-keep { animation-name: oee-fill; animation-range: entry 5% entry 35%; }
    .knowledge-template .oee-cascade .oee-cascade-row:nth-child(2) > .oee-cascade-track > * { animation-range: entry 30% entry 55%; }
    .knowledge-template .oee-cascade .oee-cascade-row:nth-child(3) > .oee-cascade-track > * { animation-range: entry 50% entry 75%; }
    .knowledge-template .oee-cascade .oee-cascade-row:nth-child(4) > .oee-cascade-track > * { animation-range: entry 70% entry 95%; }
    @keyframes oee-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes oee-shave { from { transform: scaleX(var(--from)); } to { transform: scaleX(1); } }
    @keyframes oee-reveal { from { opacity: 0; } to { opacity: 1; } }
}
/* Calculator: a worksheet (inputs on white) over a tray holding the same cascade as the worked example, now with the
   visitor's minutes. Only the scroll figure animates on view; here the bars move when the visitor calculates. */
.knowledge-template .oee-calc { margin-top: 1.5rem; overflow: hidden; border: 1px solid #d6e2f5; border-radius: .75rem; background: #fff; }
.knowledge-template .oee-calc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: start; padding: 1.5rem; }
.knowledge-template .oee-calc-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.knowledge-template .oee-calc-field label { margin: 0; color: var(--knowledge-ink); font-size: .95rem; font-weight: 600; }
.knowledge-template .oee-calc-field input { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid #b9c6d8; border-radius: .5rem; background: #fff; color: #263340; font-size: 1rem; font-variant-numeric: tabular-nums; }
.knowledge-template .oee-calc-field input:focus-visible { outline: 3px solid var(--knowledge-blue); outline-offset: 2px; }
.knowledge-template .oee-calc-field small { color: #5b6876; font-size: .82rem; line-height: 1.4; }
.knowledge-template .oee-calc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.knowledge-template .oee-calc-error { grid-column: 1 / -1; margin: 0; color: #b42318; font-weight: 600; }
.knowledge-template .oee-calc-result { padding: 1.5rem; border-top: 1px solid #d6e2f5; background: #f7faff; }
.knowledge-template .oee-calc-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .35rem; color: var(--knowledge-ink); font-weight: 600; }
.knowledge-template .oee-calc-total strong { font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.knowledge-template .oee-calc-caption { margin: 0 0 .75rem; color: #4a5868; font-size: .9rem; }
.knowledge-template .oee-calc .oee-cascade-keep,
.knowledge-template .oee-calc .oee-cascade-loss { width: 0; transition: width .45s ease-out; }
.knowledge-template .oee-calc .oee-cascade-row:nth-child(2) > .oee-cascade-track > * { transition-delay: .15s; }
.knowledge-template .oee-calc .oee-cascade-row:nth-child(3) > .oee-cascade-track > * { transition-delay: .3s; }
.knowledge-template .oee-calc .oee-cascade-row:nth-child(4) > .oee-cascade-track > * { transition-delay: .45s; }
.knowledge-template .oee-calc .oee-cascade-note:empty { display: none; }
.knowledge-template .oee-calc-warning { margin: .75rem 0 0; padding: .6rem .8rem; border-left: 3px solid #d9a21b; background: #fff8e2; color: #5c4410; font-size: .9rem; }
.knowledge-template .oee-calc-reading { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: .5rem; background: var(--knowledge-paper); color: var(--knowledge-ink); white-space: pre-line; }
.knowledge-template .oee-calc-note { margin: 0; padding: .9rem 1.5rem; border-top: 1px solid #d6e2f5; color: #6c757d; font-size: .82rem; }
@media (max-width: 575px) {
    .knowledge-template .oee-calc-form { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
    .knowledge-template .oee-calc-result { padding: 1rem; }
    .knowledge-template .oee-calc-note { padding: .9rem 1rem; }
    .knowledge-template .oee-calc-total strong { font-size: 2.25rem; }
    .knowledge-template .oee-cascade { padding: 1rem; }
    .knowledge-template .oee-cascade-row { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; }
    .knowledge-template .oee-cascade-label { grid-row: auto; }
    .knowledge-template .oee-cascade-label strong { display: inline; margin-right: .35rem; }
    .knowledge-template .oee-question { font-size: 1.15rem; }
}