/* =========================================
   COMPONENTES EXCLUSIVOS: JUAN STUDIO
   ========================================= */

.studio-badge {
    background: rgba(35, 119, 255, 0.1); 
    color: var(--accent); 
    padding: 5px 15px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: bold; 
    border: 1px solid var(--accent); 
    margin-bottom: 15px; 
    display: inline-block;
}

/* Selector de modos 2D y 3D */
.view-selector-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.mode-btn {
    background: var(--card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-btn:hover, .mode-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(35, 119, 255, 0.4);
}

/* =========================================
   LAYOUT A PANTALLA COMPLETA DEL EDITOR

   El <main> de la página del editor NO usa las clases .container ni
   .blog-layout justamente para no heredar de style.css (intocable) sus
   max-width de 1100px/800px ni su overflow-y:hidden — ese overflow hace que
   el eje horizontal pase a "auto", así que cualquier intento de desbordar
   hacia los costados desde adentro terminaba en scroll horizontal.
   Al quedar afuera, el editor puede ocupar todo el ancho sin pelearse con
   nada, y el resto del sitio sigue usando esas clases igual que siempre.
   ========================================= */
/* =========================================================================
   EL HUECO DE ARRIBA LO DECIDE LA BARRA, NO UN NUMERO ESCRITO A MANO

   La navbar es position:fixed con z-index 500000, y esta pagina no usa
   .container ni .blog-layout -que son las que en el resto del sitio dejan el
   hueco-. Habia 70px fijos. Medido el 12-ago: la barra mide 110px en pantalla
   ancha y hasta 172px cuando se parte en dos lineas. Con 70px, el badge
   "CREATIVIDAD SIN LIMITES" quedaba tapado SIEMPRE, y en ventanas bajas tambien
   el <h1> — con el boton de Discord justo encima, asi que hacer clic en el
   titulo abria Discord.

   --nav-alto lo mide el JS de la pagina y lo escribe acá. El valor de reserva
   de cada tamaño ya alcanza para el caso peor, asi que si el JS no corre no se
   tapa nada: el JS solo lo ajusta fino, no lo salva.
   ========================================================================= */
:root { --nav-alto: 120px; }

.studio-main {
    width: 100%;
    box-sizing: border-box;
    padding: calc(var(--nav-alto) + 16px) 20px 40px;
}

/* =========================================================================
   MIENTRAS EL EDITOR NO ESTA LISTO

   juanse-studio-core.js son 63 KB con defer: se baja despues de que la pagina
   ya se ve. En ese hueco los botones estaban encendidos y cada clic tiraba un
   ReferenceError en silencio.

   Se apagan de verdad -pointer-events y todo- y se avisa. No se ocultan: si
   desaparecieran, la pagina saltaria entera al aparecer.
   ========================================================================= */
.studio-cargando .studio-workspace,
.studio-cargando .view-selector-container {
    opacity: .45;
    pointer-events: none;
    user-select: none;
}
/* El texto sale de data-cargando del propio elemento y no está escrito acá:
   la página existe en tres idiomas y un CSS es uno solo. Con attr() cada
   idioma trae el suyo. Si el atributo faltara, attr() da cadena vacía y queda
   el velo sin texto — que sigue siendo mejor que "Cargando el editor…" en
   español en la versión en inglés. */
.studio-cargando .studio-workspace::after {
    content: attr(data-cargando);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-muted);
    background: rgba(10, 10, 14, .55);
    border-radius: 12px;
    z-index: 5;
}
.studio-workspace { position: relative; }

.studio-fallo .studio-workspace::after {
    content: attr(data-fallo);
    color: #ff8a8a;
}

@media (prefers-reduced-motion: reduce) {
    .studio-cargando .studio-workspace,
    .studio-cargando .view-selector-container { transition: none; }
}

/* Encabezado más compacto: cada píxel de alto que se ahorra acá se lo gana
   el área de dibujo */
.studio-welcome {
    padding: 0;
    border-bottom: none;
    text-align: center;
}
.studio-welcome h1 {
    margin-bottom: 8px;
}
.studio-welcome p {
    margin-bottom: 0;
}

/* Espacio de trabajo del Editor */
.studio-workspace {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px;
    gap: 15px;
    /* Ocupa el alto de la pantalla menos el navbar + encabezado. El
       min-height es la red de seguridad en portátiles de pantalla baja. */
    height: calc(100vh - 330px);
    min-height: 540px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

/* Barra de herramientas izquierda */
.studio-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #151515;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
}

.tool-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    width: 74px;
    padding: 8px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Nombre debajo del icono: sin esto la gente tiene que adivinar qué hace cada uno */
.tool-btn span {
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1;
}

.tool-btn:hover, .tool-btn.active {
    background: rgba(35, 119, 255, 0.2);
    color: var(--accent);
}

.tool-sep {
    border: 0;
    border-top: 1px solid #333;
    margin: 5px 0;
}

/* Área central de pintura */
.studio-canvas-area {
    flex-grow: 1;
    background: #0f0f12;
    border-radius: 8px;
    border: 1px solid #222;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.canvas-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Recordatorio de los controles de mouse, abajo a la izquierda del lienzo */
.canvas-hint {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 8px;
    pointer-events: none;
}

/* Panel de propiedades derecho */
.studio-properties {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Si los paneles suman más alto que el área de trabajo, scrollean acá
       adentro en vez de desbordar o quedar cortados */
    overflow-y: auto;
    padding-right: 4px;
}

.prop-box {
    background: #151515;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
}

.prop-title {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.layer-toggle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.layer-toggle label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-studio-action {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* =========================================================================
   LA ESCALERA DE TAMAÑOS

   Antes habia UN corte, en 800px: o escritorio entero, o celular. Todo lo del
   medio -una tablet en vertical, una tablet acostada, un portatil de 1280-
   caia en uno de los dos extremos y quedaba mal: o el panel de 260px se comia
   media pantalla, o se apilaba todo en una columna larguisima teniendo lugar
   de sobra al costado.

   Ahora hay cinco escalones, y cada uno cambia UNA cosa concreta:

     >1400   escritorio grande . el panel puede ser mas ancho
     1100    escritorio normal . lo de arriba, tal cual estaba
     900     portatil chico / tablet acostada . el panel se angosta, no se apila
     760     tablet vertical . se apila, pero el panel va en DOS columnas
     560     celular . una sola columna
     380     celular chico . se aprietan los espacios

   El corte de apilado bajo de 800 a 760 a proposito: una tablet vertical de
   768px ahora entra en el modo de dos columnas en vez de caer en el de celular.
   ========================================================================= */

/* --- Escritorio grande: sobra ancho, se lo damos al panel --- */
@media (min-width: 1400px) {
    .studio-properties { width: 300px; }
    .studio-workspace  { padding: 18px; gap: 18px; }
}

/* --- El alto del area de trabajo, atado a la barra de verdad ---
   Estaba calc(100vh - 330px): 330 es un numero que salio de una pantalla
   concreta. Ahora descuenta la barra medida mas lo que ocupa el encabezado. */
@media (min-width: 761px) {
    .studio-workspace {
        height: calc(100vh - var(--nav-alto) - 210px);
        min-height: 520px;
    }
}

/* --- Portatil chico y tablet acostada: NO apilar, angostar --- */
@media (min-width: 761px) and (max-width: 1099px) {
    .studio-properties { width: 216px; }
    .prop-box          { padding: 11px; }
    .prop-title        { font-size: .78rem; margin-bottom: 7px; }
    .tool-btn          { width: 58px; font-size: 1rem; }
    .tool-btn span     { font-size: .55rem; }
    .studio-workspace  { padding: 11px; gap: 11px; }
    .studio-main       { padding-left: 12px; padding-right: 12px; }
}

/* --- De acá para abajo se apila: el lienzo arriba, lo demas debajo --- */
@media (max-width: 760px) {
    .studio-main {
        padding: calc(var(--nav-alto) + 10px) 12px 30px;
    }
    .studio-workspace {
        flex-direction: column;
        /* En columna manda el contenido: nada de alto fijo de pantalla */
        height: auto;
        min-height: 0;
    }
    /* La barra de herramientas pasa a ser una fila. Con scroll horizontal
       propio en vez de envolverse en tres lineas: envolviendose empuja el
       lienzo hacia abajo y en un celular eso es todo lo que se ve. */
    .studio-toolbar {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    /* flex-shrink: 0 o el navegador aprieta los botones hasta que entren todos
       y entonces la barra NUNCA desborda — con lo cual el scroll no aparece y
       los botones quedan ilegibles. Ya paso una vez con las pestañas del panel. */
    .tool-btn {
        width: 46px;
        min-width: 46px;
        flex: 0 0 auto;
        padding: 9px 2px;
    }
    .tool-btn span { display: none; }
    /* El separador vertical no tiene sentido en una fila */
    .tool-sep {
        border-top: 0;
        border-left: 1px solid #333;
        margin: 0 3px;
        align-self: stretch;
    }
    .studio-properties {
        width: 100%;
        overflow-y: visible;
        padding-right: 0;
    }
    /* EL ALTO DEL LIENZO, ATADO A LA PANTALLA Y NO A UN NUMERO FIJO.
       Con 380px fijos, un celular alto (812, 900, 960 de alto) desperdiciaba
       media pantalla y uno bajo quedaba apretado igual. Con 44vh, cada
       telefono le da al dibujo la misma proporcion de su pantalla.
       El clamp pone piso y techo: nunca menos de 300 -abajo de eso no se
       distingue un pixel- ni mas de 520, que ya obliga a scrollear para
       llegar a las herramientas. */
    .studio-canvas-area {
        min-height: clamp(300px, 44vh, 520px);
    }
    /* El visor 3D se dimensiona por JS; en celular se lo deja escalar por
       CSS para que no obligue a scroll horizontal */
    #skinContainer3D canvas {
        max-width: 100%;
        height: auto;
    }
    /* Atajos de mouse: no aplican en pantalla táctil */
    .canvas-hint {
        display: none;
    }
}

/* --- Tablet chica y celular grande apaisado (561-760): apilado PERO en dos
   columnas de propiedades. Hay ancho de sobra: en una sola columna,
   "Gestión de Skin" queda a dos pantallazos de scroll del lienzo.

   OJO: una tablet de 768 en vertical NO cae acá — cae en el tramo de arriba y
   se queda con el editor al lado del panel, que en 768px todavía entra
   (comprobado: área de dibujo de 398px y el muñeco entero adentro). */
@media (min-width: 561px) and (max-width: 760px) {
    .studio-properties {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        align-items: start;
    }
    .studio-canvas-area { min-height: clamp(340px, 46vh, 560px); }
    .tool-btn { width: 54px; min-width: 54px; }
}

/* --- Celular --- */
@media (max-width: 560px) {
    .studio-workspace   { padding: 10px; gap: 10px; }
    .prop-box           { padding: 12px; }
    /* Los botones de descarga en fila de dos: uno debajo del otro son cuatro
       pantallazos de botones azules iguales. */
    .studio-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .btn-studio-action { font-size: .8rem; padding: 10px 6px; }
}

/* --- Celular chico (iPhone SE, 360px de Android) --- */
@media (max-width: 380px) {
    .studio-main        { padding-left: 8px; padding-right: 8px; }
    .studio-workspace   { padding: 8px; gap: 8px; }
    .tool-btn           { width: 42px; min-width: 42px; }
    .studio-actions     { grid-template-columns: 1fr; }
}

/* --- Celular ACOSTADO ---
   Poco alto y mucho ancho. Es el caso que peor quedaba: el area de dibujo con
   min-height de 420px no entraba en 375px de alto y habia que scrollear para
   ver el muñeco entero mientras se pinta.
   Se mide por ALTO, no por ancho: es el alto el que falta. */
@media (max-height: 500px) and (orientation: landscape) {
    .studio-main        { padding-top: calc(var(--nav-alto) + 6px); padding-bottom: 16px; }
    .studio-welcome     { display: none; }   /* el titulo se come media pantalla */
    .studio-workspace   { flex-direction: row; height: auto; min-height: 0; }
    .studio-canvas-area { min-height: 240px; }
    .studio-properties  { width: 210px; overflow-y: auto; max-height: 70vh; }
    .studio-toolbar     { flex-direction: column; overflow: visible; }
    .tool-btn           { width: 44px; min-width: 44px; }
}




/* SELECTOR DE PARTES DEL CUERPO */
.skin-limiter-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 10px auto;
    width: 100px;
}
.body-middle-row, .body-bottom-row {
    display: flex;
    gap: 4px;
}
.body-part-btn {
    border: 2px solid #e67e22; /* Tu naranja característico */
    background: rgba(230, 126, 34, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 3px;
}
.body-part-btn:hover {
    background: rgba(230, 126, 34, 0.4);
}
.body-part-btn.inactive {
    border-color: #444;
    background: #111;
    opacity: 0.3;
}
.part-head { width: 30px; height: 30px; }
.part-chest { width: 34px; height: 45px; }
.part-arm { width: 14px; height: 45px; }
.part-leg { width: 16px; height: 45px; }

/* Selectores compactos: Vista (Frente/Espalda), Capa (Base/Exterior) y
   Tamaño de Pincel. Reutilizan la misma idea visual que .mode-btn/.tool-btn
   pero más chicos, para caber en el panel de propiedades. */
.mini-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.mini-toggle-row:last-child {
    margin-bottom: 0;
}
.mini-toggle-btn {
    flex: 1;
    background: #1c1c1c;
    border: 1px solid #444;
    color: var(--text-muted);
    padding: 6px 4px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.mini-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--text-main);
}
.mini-toggle-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

#select-character-base {
    width: 100%; 
    background: #222; 
    color: #fff; 
    border: 1px solid #444; 
    padding: 8px; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer;
}

#skinCanvas2D {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transition: transform 0.1s ease; /* el zoom real ahora lo aplica el JS (zoomLevel) */
    cursor: crosshair;
    /* Evita que arrastrar el mouse dispare el drag/selección nativa del
       navegador, que interrumpía el trazo continuo al pintar */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

/* =========================================
   BARRA DE ATAJOS
   Va debajo del área de trabajo, aprovechando el ancho que sobra. En
   pantallas chicas se esconde: ahí no hay teclado ni mouse.
   ========================================= */
.shortcuts-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.shortcuts-titulo {
    font-weight: bold;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}
.shortcuts-sep {
    flex: 1;
    min-width: 0;
}
.shortcuts-bar kbd {
    display: inline-block;
    background: #1c1c1c;
    border: 1px solid #444;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 6px;
    margin-right: 3px;
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--text-main);
}

/* =========================================
   MODAL (Mezclar Skins)
   ========================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 100000; /* por encima del navbar, que va en 500000... */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-caja {
    background: #151515;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 22px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.modal-cabecera h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--accent);
}
.modal-cerrar {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.modal-cerrar:hover {
    color: #fff;
}
.modal-texto {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}
.modal-aviso {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 14px 0 10px;
}

/* Botones de parte, con la miniatura sacada de la skin de origen */
.mix-partes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mix-parte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #1c1c1c;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: bold;
    transition: all 0.2s;
}
.mix-parte:hover {
    border-color: var(--accent);
    color: var(--text-main);
    transform: translateY(-2px);
}
.mix-parte img {
    width: 44px;
    height: 60px;
    object-fit: contain;
    image-rendering: pixelated;
    background: repeating-conic-gradient(#2a2a2a 0% 25%, #222 0% 50%) 50% / 12px 12px;
    border-radius: 4px;
}

/* Botón secundario: mismo tamaño, menos peso visual que el principal */
.btn-secundario {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

/* 760 y no 800, para que coincida con el corte de apilado de mas arriba. Dos
   numeros distintos para el mismo salto es como se termina con una franja de
   40px donde el editor esta apilado pero la barra de atajos todavia se ve. */
@media (max-width: 760px) {
    /* Los atajos son de teclado: en una pantalla tactil no hay teclado que
       apretar y ocupan alto que le hace falta al lienzo. */
    .shortcuts-bar {
        display: none;
    }
    .mix-partes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En celular chico, una sola columna de partes: dos miniaturas al lado en
   360px salen del tamaño de una uña y no se distingue que parte es cual. */
@media (max-width: 400px) {
    .mix-partes {
        grid-template-columns: 1fr;
    }
}

/* Dos colores: principal y secundario, con botón para intercambiarlos */
.color-picker-wrapper.dos-colores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.color-campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.color-campo span {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.color-campo input[type="color"] {
    width: 52px;
    height: 32px;
    padding: 0;
    border: 1px solid #444;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.btn-swap {
    background: #1c1c1c;
    border: 1px solid #444;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s;
}
.btn-swap:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.color-nota {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 10px 0 0;
    line-height: 1.35;
}

/* Paleta de colores: fijos + usados recientemente */
.paleta-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    min-height: 22px;
}
.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--accent);
}
.paleta-vacia {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Zoom visible sobre el lienzo 2D, para quien no sepa que la rueda del
   mouse también sirve */
.zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.65);
    padding: 5px 8px;
    border-radius: 8px;
    z-index: 5;
}
.zoom-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #1c1c1c;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.zoom-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
#zoom-level {
    font-size: 0.75rem;
    color: #ccc;
    min-width: 34px;
    text-align: center;
}

/* Visor 3D. El tamaño real del <canvas> lo calcula el JS midiendo el área
   disponible (skinview3d dimensiona por JS, no por CSS), así que acá solo se
   lo centra y se lo deja crecer. */
#skinContainer3D {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
/* =========================================================================
   LOS HUECOS DE PUBLICIDAD DEL STUDIO

   Van al final de la pagina, despues de los atajos, y NO tocan el area de
   trabajo. En una herramienta donde la gente se queda dibujando, un anuncio al
   lado del lienzo es la forma mas rapida de que no vuelva.

   min-height 0 y sin borde: mientras no haya anuncio no se ve NADA. Un recuadro
   punteado vacio diciendo "publicidad" ocupa lugar y no paga. ads.js le pone el
   alto justo antes de cargar, asi que el texto no salta cuando entra
   (eso es el CLS que penaliza Google).
   ========================================================================= */
.studio-ads{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;
  margin:26px auto 40px;padding:0 16px;max-width:100%;
}
.studio-ads > div{min-height:0}

/* En pantalla chica va uno debajo del otro y mas pegado: dos banners al lado
   en 375px no entran, y forzarlos desborda la pagina en horizontal.
   760 para no dejar una franja donde el editor ya se apilo y esto no. */
@media (max-width:760px){
  .studio-ads{gap:12px;margin:18px auto 28px}
}
/* Un anuncio nunca puede sacar la pagina de cuadro: si el formato que sirve la
   red viene mas ancho que la pantalla, se achica en vez de empujar el resto.
   Esto es lo que evita el scroll horizontal, que en un celular arruina la
   pagina entera. */
.studio-ads > div,
.studio-ads iframe { max-width: 100%; }

/* Los botones del cuerpo ahora son role="button" y reciben foco. Sin este
   contorno, quien se mueve con Tab no ve donde esta parado. */
.body-part-btn:focus-visible{
  outline:2px solid #3ecf8e;outline-offset:2px;
}

/* =========================================================================
   BOTONES PARA DEDOS, NO PARA FLECHITA DE MOUSE

   Medido en 360px: los botones de zoom quedaban de 24x24 y los de Clásico/Slim,
   Frente/Espalda y el tamaño de pincel de 28px de alto. Con un mouse eso se
   acierta siempre; con el pulgar no, y en un editor de dibujo errarle a
   "Frente" y pegarle a "Espalda" te hace pintar del lado equivocado sin
   enterarte.

   SE PREGUNTA POR EL TIPO DE PUNTERO, NO POR EL ANCHO. Una tablet de 1024
   apaisada es ancha y se toca con el dedo igual; un monitor de 1024 no. El
   ancho no distingue esos dos casos y pointer: coarse sí.
   ========================================================================= */
@media (pointer: coarse) {
    .zoom-btn {
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
    }
    .mini-toggle-btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .btn-studio-action { min-height: 44px; }
    .tool-btn          { min-height: 46px; }
    /* Las partes del cuerpo son cuadraditos chicos a propósito -dibujan un
       muñeco- así que no se agrandan: se les da area de toque de mas por
       fuera, que no cambia como se ven. */
    .body-part-btn { position: relative; }
    .body-part-btn::after {
        content: '';
        position: absolute;
        inset: -6px;
    }
    /* El hover en pantalla tactil se queda "pegado" despues de tocar: el
       boton se ve iluminado como si siguiera seleccionado. */
    .tool-btn:hover:not(.active)      { background: transparent; color: var(--text-muted); }
    .body-part-btn:hover:not(:active) { background: rgba(230, 126, 34, 0.1); }
}