/* Simulador de mantenimiento de caja de engranajes */
.cajad { background: var(--card, #fff); border: 1px solid var(--line, #cfdae6); border-radius: 8px; padding: 18px; margin: 26px 0; display: flex; flex-direction: column; gap: 16px; color: var(--navy, #0b1f33); }
.cajad * { box-sizing: border-box; }
.cd-head { display: flex; flex-direction: column; gap: 2px; }
.cd-head strong { font-size: 1.1rem; }
.cd-head span { color: var(--muted, #4a5d70); font-size: .92rem; line-height: 1.5; }
.cd-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .cd-top { grid-template-columns: minmax(0, 1fr); } }
.cd-dg { border: 1px solid var(--line, #cfdae6); border-radius: 6px; background: #fbfdff; padding: 8px; }
.cd-dg svg { display: block; width: 100%; height: auto; }
.cd-info { margin-top: 8px; padding: 8px 10px; border-left: 4px solid var(--accent, #e0731a); background: #fff7ef; border-radius: 4px; font-size: .88rem; line-height: 1.5; }
.cd-info p { margin: 2px 0 0; }
.cd-part { cursor: pointer; outline: none; }
.cd-part:hover > *, .cd-part:focus-visible > * { filter: brightness(.93); stroke: var(--accent, #e0731a); }
.cd-part:focus-visible { outline: 3px solid var(--accent, #e0731a); outline-offset: 2px; }
.cd-part.sel > * { stroke: var(--accent, #e0731a); stroke-width: 3; }
.cd-part.hl > * { animation: cdpulse 1.2s ease-in-out infinite; stroke: #b91c1c; stroke-width: 3; }
@keyframes cdpulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cd-part.hl > * { animation: none; } }
.cd-body { fill: #e4eaf0; stroke: #6b7f93; stroke-width: 2.5; }
.cd-foot { fill: #cfd8e1; stroke: #6b7f93; stroke-width: 2; }
.cd-fin { stroke: #b4c4d4; stroke-width: 3; fill: none; }
.cd-oil { fill: rgba(224, 175, 20, .45); }
.cd-lvl { stroke: #a37a00; stroke-width: 1.5; stroke-dasharray: 5 4; }
.cd-tx { font: 700 11px system-ui, sans-serif; fill: #0b1f33; }
.cd-shaft { fill: #8aa0b5; stroke: #4a5d70; stroke-width: 1.5; }
.cd-gear { stroke-width: 1.8; }
.cd-gear.a { fill: #fde3cc; stroke: #e0731a; }
.cd-gear.b { fill: #cfe3f5; stroke: #2a6fb0; fill-opacity: .9; }
.cd-brg { fill: #fff; stroke: #0b1f33; stroke-width: 2; }
.cd-seal { fill: #1f2937; stroke: #0b1f33; }
.cd-vent { fill: #f2c94c; stroke: #8a6d00; stroke-width: 1.5; }
.cd-sight { fill: #fff; stroke: #0b1f33; stroke-width: 2.5; }
.cd-sight2 { fill: rgba(224, 175, 20, .6); }
.cd-plug { fill: #4a5d70; stroke: #0b1f33; stroke-width: 1.5; }
.cd-mag { fill: #b91c1c; stroke: #7f1d1d; stroke-width: 1.5; }
.cd-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cajad fieldset { border: 1px solid var(--line, #cfdae6); border-radius: 6px; padding: 10px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cajad legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }
.cd-chk { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; cursor: pointer; line-height: 1.4; }
.cd-chk input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--accent, #e0731a); }
.cajad select, .cajad input[type=text] { font: inherit; font-size: .92rem; padding: 8px 10px; border: 1px solid var(--line, #cfdae6); border-radius: 4px; background: #fff; color: var(--navy, #0b1f33); width: 100%; min-width: 0; }
.cajad select:disabled { opacity: .5; }
.cajad input:focus-visible, .cajad select:focus-visible { outline: 3px solid var(--accent, #e0731a); outline-offset: 2px; }
.cd-g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cd-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-f label { font-size: .82rem; font-weight: 600; }
.cd-out { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line, #cfdae6); border-radius: 6px; padding: 12px; background: #f7fafc; }
.cd-out h4, .cd-out p { margin: 0; }
.cd-alert { background: #fdecec; color: #721c24; font-weight: 700; padding: 8px 10px; border-radius: 4px; font-size: .9rem; line-height: 1.45; }
.cd-warn { background: #fff6e0; color: #6b4b00; padding: 6px 10px; border-radius: 4px; font-size: .86rem; }
.cd-causes, .cd-acts { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; line-height: 1.45; }
.cd-causes small { display: block; color: var(--muted, #4a5d70); }
.cd-pct { color: var(--muted, #4a5d70); font-size: .84rem; }
.cd-bar { height: 7px; background: #e1e8ef; border-radius: 4px; margin: 3px 0; overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: var(--accent, #e0731a); }
.cd-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #fff; background: #4a5d70; }
.cd-acts .p1 .cd-tag { background: #b91c1c; } .cd-acts .p2 .cd-tag { background: #c2610b; }
.cd-vout { display: flex; flex-direction: column; gap: 8px; font-size: .92rem; line-height: 1.5; }
.cd-vout p { margin: 0; }
.cd-vg { font-size: 1.2rem; padding: 10px 14px; border-left: 4px solid var(--accent, #e0731a); background: #fff7ef; border-radius: 4px; }
.cd-vg b { font-size: 1.9rem; margin-left: 6px; }
.cd-vg small { display: block; font-size: .8rem; color: var(--muted, #4a5d70); }
.cd-tbl, .cd-small, .cd-note { font-size: .8rem; color: var(--muted, #4a5d70); line-height: 1.5; margin: 0; }
.cd-sout { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.cd-sout p { margin: 0; }
.cd-tw { overflow-x: auto; max-width: 100%; }
.cd-t { border-collapse: collapse; width: 100%; font-size: .84rem; }
.cd-t th, .cd-t td { border: 1px solid var(--line, #cfdae6); padding: 6px 8px; text-align: left; vertical-align: top; }
.cd-t th { background: #eef2f6; }
@media (max-width: 520px) { .cajad { padding: 12px; } .cd-t th, .cd-t td { padding: 5px 6px; } }