/* Solo lo específico de Llaveros; marca, tipografías y controles vienen de makers.css. */
.keychain-page [hidden]{display:none!important}
.kc-step{border-top:1px solid #e3dad1;padding:18px 0}
.kc-step h2{font-size:18px;margin:0 0 10px}
#kc-viewer{min-height:320px;height:46vh;max-height:520px;display:flex;align-items:center;justify-content:center;background:#f1eaf8;border-radius:14px;overflow:hidden}
#kc-viewer canvas{display:block;width:100%;height:100%}
#viewer-empty{color:#76695f;font-size:14px;padding:0 20px;text-align:center}
.kc-list{margin:6px 0 0;padding-left:18px;font-size:13px;color:#4c423b}
.kc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kc-candidates{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.kc-candidates label{display:block;border:2px solid #e3dad1;border-radius:12px;padding:8px;text-align:center;cursor:pointer;background:#fff}
.kc-candidates label:has(input:checked){border-color:#7a4bb3}
.kc-candidates input{position:absolute;opacity:0;pointer-events:none}
.kc-candidates img{display:block;max-width:100%;height:96px;margin:0 auto 6px;object-fit:contain;background:repeating-conic-gradient(#f4efe9 0 25%,#fff 0 50%) 50%/16px 16px}
.kc-stage{position:relative;display:inline-block;max-width:100%;touch-action:none;user-select:none;margin:8px 0}
.kc-stage img{display:block;max-width:100%;max-height:340px}
.kc-rect{position:absolute;border:2px solid #7a4bb3;background:rgba(122,75,179,.15);pointer-events:none}
.kc-colors{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.kc-colors label{display:flex;align-items:center;gap:6px;font-size:13px}
.kc-colors input[type=color]{width:42px;height:34px;padding:0;border:1px solid #d8cfc5;border-radius:8px;background:none}
#kc-units{max-width:140px}
.choice-row small{display:block;font-size:11px;color:#76695f}
@media (max-width:640px){#kc-viewer{height:38vh}.kc-candidates{grid-template-columns:repeat(2,1fr)}}