/* Estilos de las paginas de la app migradas a WordPress.
 * Lo global (body, nav, footer, botones) lo maneja el tema; aca solo van
 * las clases propias de cada pagina, con la paleta clara. */

/* === Creador de personajes === */
.tool-wrap{max-width:1000px;margin:0 auto;padding:0 20px 60px}
.cp-layout{display:grid;grid-template-columns:1fr 320px;gap:22px}
.gallery{background:var(--soft);border:1px solid var(--soft);border-radius:14px;padding:14px}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:520px;overflow-y:auto}
.gal-item{border:2px solid transparent;border-radius:8px;background:var(--soft);cursor:pointer;padding:4px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.gal-item canvas{image-rendering:pixelated;max-width:100%;max-height:100%}
.gal-item.active{border-color:#6c34e0;background:rgba(108,52,224,.12)}
.card-panel{background:var(--soft);border:1px solid var(--soft);border-radius:14px;padding:18px;align-self:start;text-align:center}
#cardCanvas{width:100%;max-width:280px;border-radius:10px}
.card-panel input{width:100%;box-sizing:border-box;margin-top:10px;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(27,22,48,.10);color:var(--ink);font-family:inherit}
.swatches{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.swatch.active{border-color:var(--ink)}
.card-panel .tool-actions{display:flex;gap:8px;justify-content:center;margin-top:14px}
.card-panel button{font-family:inherit;font-weight:700;border:none;border-radius:8px;padding:10px 14px;cursor:pointer}
.btn-dl{background:#8b5cf6;color:#ffffff}
@media (max-width:820px){
.cp-layout{grid-template-columns:1fr}
}
@media (max-width:520px){
.gal-grid{grid-template-columns:repeat(4,1fr)}
}

/* === Creador de oficinas === */
.tool-wrap{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.tool-layout{display:grid;grid-template-columns:220px 1fr;gap:18px}
.palette{background:var(--soft);border:1px solid var(--soft);border-radius:14px;padding:14px;align-self:start}
.palette h4{margin:0 0 8px;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.pal-item{border:2px solid transparent;border-radius:8px;background:var(--soft);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative}
.pal-item canvas{image-rendering:pixelated;max-width:100%;max-height:100%}
.pal-item.active{border-color:var(--brand,#6c34e0);background:rgba(108,52,224,.12)}
.pal-item.tool-erase{font-size:1.3rem}
.char-scroll{max-height:260px;overflow-y:auto;padding-right:4px}
.pal-scroll{max-height:220px;overflow-y:auto;padding-right:4px}
.cat-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.cat-btn{font-family:inherit;font-size:.68rem;font-weight:700;border:1px solid var(--line);background:var(--soft);color:var(--muted);border-radius:99px;padding:.3rem .65rem;cursor:pointer;white-space:nowrap}
.cat-btn:hover{border-color:var(--brand,#6c34e0);color:var(--text)}
.cat-btn.active{background:var(--brand,#6c34e0);border-color:var(--brand,#6c34e0);color:#ffffff}
.pal-desk-row{margin-bottom:10px}
.asset-count{color:var(--muted);font-size:.72rem;margin:-6px 0 10px}
.canvas-wrap{background:var(--soft);border:1px solid var(--soft);border-radius:14px;padding:14px;text-align:center}
#officeCanvas{width:100%;height:auto;border-radius:8px;cursor:crosshair;background:#c9a877}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.tool-actions button{font-family:inherit;font-weight:700;border:none;border-radius:8px;padding:10px 16px;cursor:pointer}
.btn-save{background:var(--brand,#6c34e0);color:#ffffff}
.btn-dl{background:#8b5cf6;color:#ffffff}
.btn-clear{background:var(--line);color:var(--ink)}
.hint{color:var(--muted);font-size:.85rem;margin-top:10px}
@media (max-width:820px){
.tool-layout{grid-template-columns:1fr}
}

/* === Soporte === */
.card{width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px;}
.entry h1{font-size: 20px; margin: 0 0 6px;}
.entry p.sub{color: var(--muted); font-size: 13.5px; margin: 0 0 24px;}
.entry label{display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; margin-top: 16px;}
.entry input,.entry textarea{width: 100%; padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line); background: #ffffff; color:var(--ink); font-size: 14px; font-family: inherit;}
.entry textarea{resize: vertical; min-height: 110px;}
.entry input:focus,.entry textarea:focus{outline: none; border-color: #7c3aed;}
.entry button{width: 100%; margin-top: 22px; padding: 13px; border: none; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;}
.entry button:disabled{opacity: .5; cursor: default;}
.ok{text-align: center;}
.ok .big{font-size: 40px; margin-bottom: 8px;}
.err{color: #f87171; font-size: 12.5px; margin-top: 6px; display: none;}
.logo{font-weight: 800; font-size: 15px; margin-bottom: 18px; color: #a78bfa;}

/* === Demo === */
.demo-wrap{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.demo-chat{max-width:none}
.kanban-panel{background:var(--card);border:1px solid var(--brand);border-radius:16px;padding:1.2rem;box-shadow:0 0 30px rgba(108,52,224,.18)}
.kanban-panel h3{margin:0 0 1rem;font-size:1rem;text-align:center;color:var(--brand)}
.kanban-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kcol{background:var(--soft);border-radius:10px;padding:.5rem;min-height:190px}
.kcol-title{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem;text-align:center}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.5rem .55rem;font-size:.72rem;margin-bottom:.4rem;transition:transform .5s ease, opacity .4s ease}
.kcard.moving{border-color:var(--brand);box-shadow:0 0 12px rgba(108,52,224,.18)}
.kcard .kname{font-weight:700;display:block;margin-bottom:.15rem}
.kcard .kmeta{color:var(--muted);font-size:.66rem}
.stats-strip{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.stat-pill{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:.5rem 1rem;font-size:.78rem;color:var(--text)}
@media (max-width:860px){
.demo-grid{grid-template-columns:1fr}
}

/* ajustes propios */
.gal-item,.pal-item{border-color:var(--line)}
.gal-item:hover,.pal-item:hover{border-color:var(--brand-2,#8b5cf6)}
.entry > .card{margin-inline:auto;margin-block:1rem 3rem}