/* Herramientas de artículos: diagnóstico de la moka y comparador de cafeína */
.dx, .caf { margin: clamp(28px, 4vw, 48px) 0; padding: clamp(20px, 3vw, 32px); background: var(--crema, #F1ECE6); border: 1px solid var(--linea, rgba(35,25,21,.18)); border-top: 3px solid var(--cereza, #A3132B); border-radius: var(--radius, 8px); }
.dx h2, .caf h2 { margin: 0 0 8px; }
.dx__lead, .caf__lead { margin: 0 0 18px; color: var(--tinta-suave, #5A524D); }
.dx__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dx__opt { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--tinta, #231915); border-radius: 999px; background: transparent; color: var(--tinta, #231915); font: 700 15px var(--sans, sans-serif); cursor: pointer; transition: background .25s, color .25s, transform .25s var(--ease, ease); }
.dx__opt:hover { transform: translateY(-2px); }
.dx__opt[aria-pressed="true"] { background: var(--tinta, #231915); color: var(--crema, #F1ECE6); }
.dx__opt:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.dx__panel { min-height: 120px; padding: 18px 20px; background: #fff; border-radius: var(--radius, 8px); border: 1px solid var(--linea, rgba(35,25,21,.18)); }
.dx__empty { margin: 0; color: var(--tinta-suave, #5A524D); }
.dx__res { animation: dx-in .45s var(--ease, ease) both; }
.dx__res p { margin: 0 0 8px; }
.dx__res ul { margin: 0 0 10px; padding-left: 20px; }
.dx__res li { margin: 4px 0; }
.dx__label { font: 700 12px/1 var(--sans, sans-serif) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--cereza, #A3132B); margin-top: 6px !important; }
.dx__warn { padding: 10px 12px; background: #FFF4E5; border-left: 3px solid #B26A00; border-radius: 4px; font-size: 15px; }
@keyframes dx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.caf__bars { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.caf__bars li { display: grid; grid-template-columns: minmax(130px, 1.1fr) 2fr 64px; gap: 12px; align-items: center; }
.caf__name { font-size: 15px; }
.caf__track { height: 14px; background: rgba(35,25,21,.08); border-radius: 999px; overflow: hidden; }
.caf__track i { display: block; height: 100%; background: var(--tinta, #231915); border-radius: 999px; transform-origin: left; transition: width .6s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.caf.is-pending .caf__track i { width: 0 !important; }
.caf__decaf .caf__track i { background: var(--cereza, #A3132B); }
.caf__decaf .caf__name, .caf__decaf b { color: var(--cereza, #A3132B); font-weight: 700; }
.caf__bars b { font-variant-numeric: tabular-nums; text-align: right; }
.caf__field { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.caf__field label { font-weight: 700; }
.caf__field output { font: 700 18px var(--sans, sans-serif); color: var(--cereza, #A3132B); }
.caf__field input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--cereza, #A3132B); }
.caf__field input:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.caf__sum { margin: 14px 0 0; font-weight: 700; }
.caf__note { margin: 8px 0 0; font-size: 13.5px; color: var(--tinta-suave, #5A524D); }
@media (max-width: 560px) { .caf__bars li { grid-template-columns: 1fr 56px; } .caf__track { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .dx__res { animation: none; } .caf__track i, .dx__opt { transition: none; } }