/* Maquetador de tarjetas (/tarjetas.php) */
.cm-full { width: min(1480px, calc(100vw - 2.5rem)); position: relative; left: 50%; transform: translateX(-50%); }
.cm-head h1 { margin: .2rem 0 .3rem; }
.cm-head p { margin: 0 0 1rem; color: #7b6877; }
.cm { background: #fff; border-radius: 1.25rem; padding: 1rem; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18); }
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }

.cm-topbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cm-sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cm-size { display: flex; flex-direction: column; text-align: left; gap: .1rem; background: #fff; border: 2px solid #e6dce3; border-radius: .8rem; padding: .5rem .9rem; cursor: pointer; font: inherit; color: inherit; }
.cm-size span { font-size: .75rem; color: #7b6877; }
.cm-size.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); }
.cm-actions { display: flex; align-items: center; gap: .5rem; }
.cm-ico { width: 2.4rem; height: 2.4rem; border-radius: .6rem; border: 1.5px solid #d9cdd5; background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--primary); }
.cm-ico:disabled { opacity: .35; cursor: default; }
.cm-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; margin: 0; }
.cm-check input { width: auto; margin: 0; }
.cm-restore { background: #fff6e0; border-radius: .6rem; padding: .5rem .8rem; font-size: .85rem; margin: 0 0 .75rem; }
.cm-restore button { background: none; border: 0; text-decoration: underline; color: var(--primary); cursor: pointer; font: inherit; }

.cm-body { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tools" "props"; }
.cm-stage { grid-area: stage; min-width: 0; }
.cm-tools { grid-area: tools; min-width: 0; }
.cm-props { grid-area: props; min-width: 0; }
.cm-stage-wrap { background: repeating-conic-gradient(#ece6ea 0% 25%, #f6f2f5 0% 50%) 0 0 / 22px 22px; border-radius: .9rem; padding: 1rem; display: flex; justify-content: center; align-items: center; min-height: 240px; }
#cmCanvas { display: block; touch-action: none; box-shadow: 0 8px 28px rgba(0,0,0,.28); background: #fff; max-width: 100%; }
.cm-hint { font-size: .8rem; color: #7b6877; margin: .6rem 0 0; }

@media (min-width: 760px) and (max-width: 1099px) {
  .cm-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage stage" "tools props"; }
}
@media (min-width: 1100px) {
  .cm-body { grid-template-columns: 310px minmax(0, 1fr) 300px; grid-template-areas: "tools stage props"; align-items: start; }
  .cm-tools, .cm-props { max-height: calc(100vh - 150px); overflow-y: auto; position: sticky; top: 1rem; }
}

.cm-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.cm-tabs button { border: 1.5px solid #e0d6dd; background: #fff; border-radius: 999px; padding: .4rem .8rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; color: #5b4a57; }
.cm-tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cm-panel[hidden], [hidden] { display: none !important; }
.cm-note { font-size: .8rem; color: #7b6877; margin: .2rem 0 .6rem; }
.cm-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); margin: 1rem 0 .4rem; font-family: 'DM Sans', sans-serif; }
.cm-btnrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.cm-btnrow .btn-secondary, .cm-panel .btn-secondary, .cm-propsbox .btn-secondary { padding: .4rem .9rem; font-size: .82rem; }
.cm-panel .btn-primary { padding: .55rem 1.1rem; font-size: .9rem; }
.cm-upload { cursor: pointer; }
.cm-panel textarea, .cm-panel input[type=text], .cm-propsbox textarea, .cm-propsbox input[type=text], .cm-propsbox select { width: 100%; margin: 0 0 .5rem; font-size: .9rem; }

.cm-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cm-templates button { padding: 0; border: 2px solid #e6dce3; border-radius: .5rem; overflow: hidden; cursor: pointer; background: #fff; display: flex; flex-direction: column; }
.cm-templates button:hover { border-color: var(--primary); }
.cm-templates canvas { width: 100%; height: auto; display: block; }
.cm-templates span { font-size: .72rem; padding: .25rem; color: #5b4a57; }
.cm-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .25rem; }
.cm-emojis button { font-size: 1.35rem; background: #fff; border: 1px solid #eadfe6; border-radius: .5rem; padding: .2rem; cursor: pointer; line-height: 1.2; }
.cm-emojis button:hover { background: #f5eef3; }
.cm-assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.cm-assets button { padding: 0; border: 2px solid #e6dce3; border-radius: .5rem; overflow: hidden; background: #f3eef2; cursor: pointer; aspect-ratio: 1; }
.cm-assets img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); gap: .35rem; margin-bottom: .5rem; }
.cm-swatches button { aspect-ratio: 1; border-radius: .5rem; border: 2px solid #fff; box-shadow: 0 0 0 1px #d9cdd5; cursor: pointer; padding: 0; }
.cm-inline { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; }
.cm-inline input[type=color], .cm-propsbox input[type=color] { width: 2.6rem; height: 2rem; padding: 0; border: 1px solid #d9cdd5; border-radius: .4rem; background: #fff; margin: 0; }
.cm-range { display: grid; grid-template-columns: 6.2rem 1fr auto; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; margin: .3rem 0; }
.cm-range input[type=range] { width: 100%; margin: 0; padding: 0; }
.cm-range output { font-size: .75rem; color: #7b6877; min-width: 2.6rem; text-align: right; }
.cm-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.cm-shapes button { font-size: 1.6rem; background: #fff; border: 1.5px solid #e0d6dd; border-radius: .6rem; padding: .35rem; cursor: pointer; color: var(--primary); }
.cm-phrases { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.cm-phrases button { text-align: left; background: #faf5f8; border: 1px solid #eadfe6; border-radius: .6rem; padding: .5rem .7rem; font: inherit; font-size: .85rem; cursor: pointer; }
.cm-phrases button:hover { border-color: var(--primary); }
.cm-ai-status { font-size: .82rem; color: #7b6877; min-height: 1.2rem; margin: .5rem 0 0; }
.cm-ai-status.err { color: #ac2d16; }

.cm-propsbox { background: #faf7f9; border-radius: .8rem; padding: .8rem; }
.cm-propsbox h3 { margin: 0 0 .5rem; font-size: .95rem; }
.cm-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .4rem 0; }
.cm-row > label { font-size: .82rem; font-weight: 500; margin: 0; display: flex; align-items: center; gap: .35rem; }
.cm-row input[type=checkbox] { width: auto; margin: 0; }
.cm-seg { display: inline-flex; border: 1.5px solid #d9cdd5; border-radius: .5rem; overflow: hidden; }
.cm-seg button { background: #fff; border: 0; padding: .3rem .6rem; cursor: pointer; font: inherit; font-size: .85rem; min-width: 2rem; }
.cm-seg button.on { background: var(--primary); color: #fff; }
.cm-layers { display: flex; flex-direction: column; gap: .25rem; }
.cm-layer { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid #eadfe6; border-radius: .5rem; background: #fff; cursor: pointer; font-size: .82rem; text-align: left; font-family: inherit; }
.cm-layer.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, white); }
.cm-layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.cm-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #efe6ec; }
.cm-qty { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: 0; }
.cm-qty input { width: 4.5rem; margin: 0; }
.cm-price { display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem; color: #7b6877; }
.cm-price strong { font-size: 1.4rem; color: var(--primary); }

dialog.cm-preview { border: 0; border-radius: 1.2rem; padding: 1.2rem; width: min(900px, 94vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
dialog.cm-preview::backdrop { background: rgba(30,20,30,.6); }
.cm-preview h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.cm-preview-img { background: #eee; border-radius: .8rem; padding: .8rem; margin: .6rem 0 1rem; display: flex; justify-content: center; }
.cm-preview-img img { max-width: 100%; max-height: 60vh; box-shadow: 0 6px 22px rgba(0,0,0,.3); display: block; }

@media (max-width: 600px) {
  .cm { padding: .6rem; border-radius: 1rem; }
  .cm-stage-wrap { padding: .5rem; }
  .cm-foot { justify-content: stretch; }
  .cm-foot .btn-primary { width: 100%; justify-content: center; }
}

.cm-faces { display: flex; gap: .4rem; margin-bottom: .6rem; }
.cm-faces[hidden] { display: none !important; }
.cm-faces button { flex: 1; border: 2px solid #e0d6dd; background: #fff; border-radius: .7rem; padding: .5rem; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; color: #5b4a57; }
.cm-faces button.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.cm-preview-img { gap: 1rem; flex-wrap: wrap; }
.cm-preview-img figure { margin: 0; text-align: center; flex: 1 1 280px; min-width: 0; }
.cm-preview-img figcaption { font-size: .8rem; font-weight: 700; color: #5b4a57; margin-top: .4rem; }
dialog.cm-sides { width: min(560px, 94vw); }
.cm-sides-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.cm-sides-opts button { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; background: #fff; border: 2px solid #e0d6dd; border-radius: 1rem; padding: 1.1rem .6rem; cursor: pointer; font: inherit; color: inherit; }
.cm-sides-opts button:hover, .cm-sides-opts button:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, white); }
.cm-sides-opts strong { font-size: 1.05rem; }
.cm-sides-opts span { font-size: .8rem; color: #7b6877; }
.cm-sides-opts em { font-style: normal; font-weight: 800; color: var(--primary); font-size: 1.2rem; }
.cm-sides-ico { font-size: 1.6rem !important; color: var(--primary) !important; letter-spacing: -.1em; }
@media (max-width: 480px) { .cm-sides-opts { grid-template-columns: 1fr; } }

.cm-fold-q { margin: .8rem 0 .3rem; }
.cm-fold-pick { margin-bottom: .3rem; }
.cm-fold-pick button { padding: .45rem 1rem; }
.am-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem; }
.am-chip { border:1px solid #e0d3dc; background:#fff; border-radius:999px; padding:.28rem .7rem; font:inherit; font-size:.78rem; cursor:pointer; color:#5b4a57; }
.am-chip.on { background:#77556f; color:#fff; border-color:#77556f; }