/* ==========================================================================
   Mascotas: el estudio donde se diseñan los personajes (?raver_view=mascotas).
   La pantalla la arma assets/js/raver-mascotas-editor.js.
   ========================================================================== */

.ws-ed { position: relative; margin-top: 18px; color: var(--tinta-texto); }
.ws-ed-intro { max-width: 70ch; margin: 0 0 18px; color: var(--tinta-texto-3); font: 400 14px/1.55 var(--f-ui); }
.ws-ed-ayuda { margin: 0; color: var(--tinta-suave, var(--tinta-texto-3)); font: 400 12.5px/1.45 var(--f-ui); }
.ws-ed-vacio { margin: 18px 0 0; color: var(--tinta-suave, var(--tinta-texto-3)); font: 400 13px/1.5 var(--f-ui); }
.ws-ed h2 { margin: 0 0 8px !important; font: 600 11px/1.2 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-texto-3) !important; }
.ws-ed h3 { margin: 0 !important; font: 600 14px/1.3 var(--f-ui) !important; color: var(--tinta-texto) !important; }

/* ---------- Botones ---------- */
.ws-ed .ws-ed-btn {
    height: 32px !important; min-width: 0 !important; padding: 0 12px !important; margin: 0 !important;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: var(--r-1) !important;
    background: var(--tinta-campo) !important; box-shadow: none !important;
    color: var(--tinta-texto-2) !important; font: 500 12.5px/1 var(--f-ui) !important; letter-spacing: 0 !important;
    text-transform: none !important; text-decoration: none !important; cursor: pointer; white-space: nowrap;
}
.ws-ed .ws-ed-btn:hover { border-color: var(--tinta-texto-3) !important; color: var(--tinta-texto) !important; }
.ws-ed .ws-ed-btn:focus-visible { outline: none; box-shadow: var(--foco) !important; }
.ws-ed .ws-ed-btn.chico { height: 28px !important; padding: 0 9px !important; font-size: 12px !important; }
.ws-ed .ws-ed-btn.on { border-color: var(--tinta-acento-tx) !important; background: var(--tinta-acento-suave) !important; color: var(--tinta-texto) !important; }
.ws-ed .ws-ed-btn.primario { border-color: var(--tinta-acento) !important; background: var(--tinta-acento) !important; color: var(--tinta-sobre-acento, #fff) !important; }
.ws-ed .ws-ed-btn.primario:hover { background: var(--tinta-acento-hover, var(--tinta-acento)) !important; }
.ws-ed .ws-ed-btn.peligro { color: var(--tinta-mal) !important; }
.ws-ed .ws-ed-btn.peligro:hover { border-color: var(--tinta-mal) !important; }
.ws-ed .ws-ed-btn:disabled { opacity: .55; cursor: default; }

.ws-ed-sel, .ws-ed-nombre, .ws-ed-num {
    height: 32px !important; padding: 0 10px !important; margin: 0 !important;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: var(--r-1) !important;
    background: var(--tinta-campo) !important; box-shadow: none !important;
    color: var(--tinta-texto) !important; font: 400 13px/1 var(--f-ui) !important;
}
.ws-ed-sel:focus-visible, .ws-ed-nombre:focus-visible, .ws-ed-num:focus-visible { outline: none; box-shadow: var(--foco) !important; }
.ws-ed-num { width: 70px !important; font-family: var(--f-mono) !important; }

.ws-ed-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Pantalla 1: elegir la mascota ---------- */
.ws-ed-sec { margin: 0 0 4px !important; }
.ws-ed-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 10px 0 26px; }
.ws-ed .ws-ed-op {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    height: auto !important; min-width: 0 !important; padding: 8px 6px 9px !important; margin: 0 !important;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: var(--r-2) !important;
    background: var(--tinta-campo) !important; box-shadow: none !important;
    color: var(--tinta-texto-2) !important; font: 500 12px/1.2 var(--f-ui) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
}
.ws-ed .ws-ed-op:hover { border-color: var(--tinta-texto-3) !important; }
.ws-ed .ws-ed-op[aria-checked="true"] { border-color: var(--tinta-acento-tx) !important; background: var(--tinta-acento-suave) !important; color: var(--tinta-texto) !important; box-shadow: var(--foco) !important; }
.ws-ed .ws-ed-op:focus-visible { outline: 2px solid var(--tinta-acento-tx) !important; outline-offset: 2px; }
.ws-ed-op .ws-ed-mini { background: transparent; }

.ws-ed-tamanos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 26px; }
.ws-ed .ws-ed-tam {
    height: 34px !important; min-width: 0 !important; padding: 0 14px !important; margin: 0 !important;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: var(--r-2) !important;
    background: var(--tinta-campo) !important; box-shadow: none !important;
    color: var(--tinta-texto-2) !important; font: 500 12.5px/1 var(--f-ui) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
}
.ws-ed .ws-ed-tam:hover { border-color: var(--tinta-texto-3) !important; }
.ws-ed .ws-ed-tam[aria-checked="true"] { border-color: var(--tinta-acento-tx) !important; background: var(--tinta-acento-suave) !important; color: var(--tinta-texto) !important; box-shadow: var(--foco) !important; }
.ws-ed .ws-ed-tam:focus-visible { outline: 2px solid var(--tinta-acento-tx) !important; outline-offset: 2px; }

/* ---------- Pantalla 1: las tarjetas ---------- */
.ws-ed-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ws-ed-tarjeta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)); border-radius: var(--r-3);
    background: var(--tinta-sup);
}
.ws-ed-tarjeta.en-uso { border-color: var(--tinta-acento-tx); box-shadow: var(--foco); }
.ws-ed-nueva { border-style: dashed; background: transparent; }
.ws-ed-nueva .ws-ed-sel { width: 100%; }
.ws-ed-mini {
    display: block; align-self: center; flex: none;
    background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated;
    background-color: var(--tinta-campo); border-radius: var(--r-2);
}

/* ---------- Pantalla 2: el editor ---------- */
.ws-ed-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ws-ed-nombre { width: min(320px, 100%) !important; font-weight: 500 !important; }
.ws-ed-espacio { flex: 1; }

.ws-ed-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .ws-ed-cuerpo { grid-template-columns: 220px minmax(0, 1fr); } .ws-ed-der { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ws-ed-cuerpo { grid-template-columns: 1fr; } }
.ws-ed-col { padding: 14px; border: 1px solid var(--tinta-borde-2, var(--tinta-borde)); border-radius: var(--r-3); background: var(--tinta-sup); min-width: 0; }

.ws-ed-anims h3 { margin: 14px 0 6px !important; font: 600 10.5px/1 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave, var(--tinta-texto-3)) !important; }
.ws-ed-anims h3:first-child { margin-top: 0 !important; }
.ws-ed .ws-ed-anim {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100% !important; height: 32px !important; padding: 0 10px !important; margin: 0 0 2px !important;
    border: 1px solid transparent !important; border-radius: var(--r-1) !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--tinta-texto-2) !important; font: 500 13px/1 var(--f-ui) !important; letter-spacing: 0 !important; text-transform: none !important;
    text-align: left; cursor: pointer;
}
.ws-ed .ws-ed-anim:hover { background: var(--tinta-hover) !important; }
.ws-ed .ws-ed-anim.on { border-color: var(--tinta-acento-tx) !important; background: var(--tinta-acento-suave) !important; color: var(--tinta-texto) !important; }
.ws-ed .ws-ed-anim.vacia { color: var(--tinta-suave, var(--tinta-texto-3)) !important; }
.ws-ed .ws-ed-anim:focus-visible { outline: none; box-shadow: var(--foco) !important; }
.ws-ed-anim-n { font: 500 11px/1 var(--f-mono); color: var(--tinta-suave, var(--tinta-texto-3)); }
.ws-ed-anim-n.mal { color: var(--tinta-mal); }

.ws-ed-tit-anim { margin-bottom: 2px !important; }
.ws-ed-cen .ws-ed-ayuda { margin-bottom: 10px; }
.ws-ed-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.ws-ed-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--tinta-borde-2, var(--tinta-borde)); }
.ws-ed-rot { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-texto-3); font: 400 12.5px/1 var(--f-ui); }
.ws-ed-rot input[type=range] { accent-color: var(--tinta-acento); }

.ws-ed-lienzo-caja { position: relative; display: flex; justify-content: center; padding: 12px; border: 1px solid var(--tinta-borde); border-radius: var(--r-2); background: var(--tinta-hundido, var(--tinta-campo)); overflow: auto; }
.ws-ed-lienzo { display: block; max-width: 100%; image-rendering: pixelated; touch-action: none; cursor: crosshair; border-radius: 2px; }
.ws-ed-vacio-anim { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--tinta-texto-3); font: 400 13px/1.5 var(--f-ui); }
.ws-ed-vacio-anim[hidden] { display: none; }
.ws-ed-vacio-anim p { margin: 0; }
.ws-ed-lienzo-caja:has(.ws-ed-vacio-anim:not([hidden])) { min-height: 220px; }

.ws-ed-tira-caja { margin-top: 10px; }
.ws-ed-tira { display: flex; gap: 6px; padding: 6px 2px 8px; overflow-x: auto; }
.ws-ed .ws-ed-cuadro {
    display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none;
    width: auto !important; height: auto !important; min-width: 0 !important; padding: 4px !important; margin: 0 !important;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: var(--r-1) !important;
    background: var(--tinta-hundido, var(--tinta-campo)) !important; box-shadow: none !important; cursor: pointer;
}
.ws-ed .ws-ed-cuadro canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.ws-ed .ws-ed-cuadro span { color: var(--tinta-suave, var(--tinta-texto-3)); font: 500 10px/1 var(--f-mono); }
.ws-ed .ws-ed-cuadro.on { border-color: var(--tinta-acento-tx) !important; box-shadow: var(--foco) !important; }
.ws-ed .ws-ed-cuadro:focus-visible { outline: none; box-shadow: var(--foco) !important; }

.ws-ed-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 5px; margin-bottom: 10px; }
.ws-ed .ws-ed-color {
    width: 100% !important; height: auto !important; aspect-ratio: 1; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 2px solid var(--tinta-borde-2, var(--tinta-borde)) !important; border-radius: 6px !important; box-shadow: none !important; cursor: pointer;
}
.ws-ed .ws-ed-color:hover { border-color: var(--tinta-texto-3) !important; }
.ws-ed .ws-ed-color.on { border-color: var(--tinta-acento-tx) !important; box-shadow: var(--foco) !important; }
.ws-ed-nuevo-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--tinta-texto-3); font: 400 12.5px/1 var(--f-ui); }
.ws-ed-nuevo-color input { width: 44px; height: 28px; padding: 0; border: 1px solid var(--tinta-borde-2, var(--tinta-borde)); border-radius: var(--r-1); background: transparent; cursor: pointer; }
.ws-ed-h-prev { margin-top: 18px !important; }
.ws-ed-vistas { display: flex; gap: 8px; }
.ws-ed-vista { width: calc(50% - 4px); aspect-ratio: 1; image-rendering: pixelated; border-radius: var(--r-2); border: 1px solid var(--tinta-borde); }
/* Los dos fondos son los de los temas oscuro y claro del portal: se ve cómo queda en ambos. */
.ws-ed-vista.osc { background: #16181d; }
.ws-ed-vista.cla { background: #f1f2f5; }

/* ---------- La barra de herramientas (a la izquierda del lienzo) ---------- */
.ws-ed-area { display: flex; align-items: flex-start; gap: 10px; }
.ws-ed-area .ws-ed-lienzo-caja { flex: 1; min-width: 0; }
.ws-ed-herramientas {
    display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; padding: 6px;
    border: 1px solid var(--tinta-borde-2, var(--tinta-borde)); border-radius: var(--r-2); background: var(--tinta-campo);
}
.ws-ed-hr { display: block; width: 24px; height: 1px; margin: 4px 0; background: var(--tinta-borde-2, var(--tinta-borde)); }
.ws-ed-muestra { display: block; width: 28px; height: 28px; margin: 2px 0; border: 2px solid var(--tinta-borde-marcado, var(--tinta-borde-2)); border-radius: var(--r-1); }
.ws-ed .ws-ed-ic {
    display: flex; align-items: center; justify-content: center;
    width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 1px solid transparent !important; border-radius: var(--r-1) !important;
    background: transparent !important; box-shadow: none !important; color: var(--tinta-texto-2) !important; cursor: pointer;
}
.ws-ed .ws-ed-ic:hover { background: var(--tinta-hover) !important; color: var(--tinta-texto) !important; }
.ws-ed .ws-ed-ic.on { border-color: var(--tinta-acento-tx) !important; background: var(--tinta-acento-suave) !important; color: var(--tinta-texto) !important; }
.ws-ed .ws-ed-ic:focus-visible { outline: none; box-shadow: var(--foco) !important; }
.ws-ed .ws-ed-ic svg { display: block; }
@media (max-width: 760px) {
    .ws-ed-area { flex-direction: column; }
    .ws-ed-herramientas { flex-direction: row; flex-wrap: wrap; width: 100%; }
    .ws-ed-hr { width: 1px; height: 24px; margin: 0 4px; }
}

/* ---------- El aviso ---------- */
.ws-ed-aviso {
    position: fixed; left: 50%; bottom: 24px; z-index: 9200; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--r-2);
    background: var(--tinta-texto); color: var(--tinta-fondo); font: 500 13px/1.35 var(--f-ui);
    transition: opacity .18s, transform .18s;
}
.ws-ed-aviso.on { opacity: 1; transform: translate(-50%, 0); }
.ws-ed-aviso.mal { background: var(--tinta-mal); color: var(--tinta-sobre-acento, #fff); }
@media (prefers-reduced-motion: reduce) { .ws-ed-aviso { transition: none; } }