/* =========================================================
 * f5node · Diseñador de ropa
 * ---------------------------------------------------------
 * Estilos del editor, portados de ropa.neoncm.es (que a su vez los trajo de la
 * NUI de dsx_clothingdesigner). Los paneles se dejan como estaban: estan
 * afinados para el ancho que tienen y tocarlos solo los empeora.
 *
 * Lo que sí cambia es el alcance. Alli el editor ERA la pagina y podia estilar
 * button, input o select a secas; aqui vive dentro de una pagina de f5node que
 * ya tiene los suyos, asi que TODO cuelga de .ropa-app. Las variables tambien:
 * en :root pisarian las de f5node.css.
 *
 * Los colores de dentro del editor siguen siendo los suyos (azul de acento). El
 * rojo y el cian de Neon son de la pagina que lo rodea, y meterlos aqui rompe la
 * regla de la marca: el rojo no representa datos.
 * ========================================================= */

.ropa-app {
    --fondo:      rgba(14, 16, 22, 0.94);
    --fondo-alto: rgba(24, 27, 36, 0.96);
    --borde:      rgba(255, 255, 255, 0.10);
    --texto:      #e7e9ef;
    --tenue:      #8b90a0;
    --acento:     #4f8cff;
    --ok:         #2fbf71;
    --aviso:      #e0a83f;
    --peligro:    #e5484d;

    font-family: 'Familjen Grotesk', 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--texto);
    /* Arrastrar sobre el lienzo no debe ir seleccionando media interfaz. Los
       campos de texto lo recuperan mas abajo. */
    user-select: none;
}

.ropa-app * { box-sizing: border-box; }

.ropa-app .oculto { display: none !important; }

/* El editor no puede crecer con la pagina: es una rejilla de tres columnas con
   scroll propio en cada una, y sin altura fija las columnas se estirarian hasta
   donde llegue su contenido en vez de desplazarse.
 *
   Con tope por los dos lados: por debajo del minimo la columna izquierda se
   pasa media pantalla desplazandose, y por encima del maximo la central queda
   desierta. Los tres valores llevan 150 px de mas sobre lo que pedia la
   maquetacion: el editor gana alto a costa de que la pagina se desplace, y en
   una herramienta que se usa de pie es el cambio que compensa. */
.ropa-app #app {
    height: clamp(810px, calc(88vh + 150px), 1130px);
    display: grid;
    grid-template-columns: var(--col-izq, 250px) 10px minmax(0, 1fr) 10px var(--col-der, 360px);
    gap: 6px;
}

/* ---------------- Avisos ----------------

   Flotan sobre el editor en vez de ocupar sitio en la maquetación: son
   efímeros, y empujar los paneles cada vez que sale uno movería el lienzo justo
   mientras se está trabajando en él.

   En ropa.neoncm.es colgaban de la barra del editor. Aquí la barra es la de
   f5node y el editor está a media página, así que van pegados abajo a la
   derecha: es el único sitio donde no tapan ni el lienzo ni los paneles. */

.ropa-app .avisos {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
    pointer-events: none;
}

.ropa-app .aviso {
    pointer-events: auto;
    background: var(--fondo-alto);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: entra 0.16s ease-out;
}

.ropa-app .aviso-bien { border-left-color: var(--ok); }
/* Los errores no se van solos: se cierran haciendo clic. */
.ropa-app .aviso-mal { border-left-color: var(--peligro); cursor: pointer; }

@keyframes entra {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------- Barras de desplazamiento ----------------

   El CEF pinta las del sistema: anchas, grises y en estilo Windows, que sobre
   los paneles oscuros cantan mas que el propio contenido.

   Se usan SOLO los pseudoelementos -webkit-, sin scrollbar-width ni
   scrollbar-color. No es descuido: en cuanto se declara scrollbar-width, el
   Chromium moderno ignora por completo las reglas ::-webkit-scrollbar y pinta su
   barra "thin" de 12 px. Poner las dos cosas daba una barra distinta en el juego
   y en el navegador de escritorio, que es justo donde se revisa la interfaz.

   Ojo con el ancho: la barra ocupa sitio en el layout, no flota por encima. A
   8 px la columna de propiedades gana los 9 que se comia la del sistema. */

.ropa-app ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Sin fondo: el carril se ve como parte del panel y solo destaca el pulgar. */
.ropa-app ::-webkit-scrollbar-track { background: transparent; }

.ropa-app ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
}

.ropa-app ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.ropa-app ::-webkit-scrollbar-thumb:active { background: var(--acento); }

/* Sin esto el cuadradito donde se cruzan las dos barras sale blanco. */
.ropa-app ::-webkit-scrollbar-corner { background: transparent; }

/* Los botones de flecha de los extremos: el CEF los dibuja aunque el resto este
   estilado, y quedan como dos cuadros grises pegados al pulgar. */
.ropa-app ::-webkit-scrollbar-button { display: none; }

/* ---------------- Tiradores ---------------- */

.ropa-app .tirador {
    position: relative;
    cursor: col-resize;
    border-radius: 3px;
    transition: background 0.12s;
}

/* La línea se pinta con un pseudoelemento fino y centrado, pero el que recibe
   el ratón es el tirador entero: una zona de 2 px sería imposible de agarrar. */
.ropa-app .tirador::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--borde);
    border-radius: 2px;
    transition: background 0.12s;
}

.ropa-app .tirador:hover::after,
.ropa-app .tirador:focus-visible::after { background: var(--acento); }
.ropa-app .tirador:focus-visible { outline: none; background: rgba(79, 140, 255, 0.12); }

/* Mientras se arrastra, el cursor manda en toda la página y se desactiva la
   selección: sin esto, mover el borde va seleccionando el texto de los paneles
   por los que pasa. */
body.ajustando { cursor: col-resize; user-select: none; }
body.ajustando * { cursor: col-resize !important; }
/* El visor 3D y el lienzo no deben capturar el ratón mientras se ajusta. */
body.ajustando canvas { pointer-events: none; }

/* ---------------- Paneles ---------------- */

.ropa-app .panel {
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.ropa-app .panel-cab h1 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.ropa-app .bloque {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* Solo el bloque de capas crece; el resto conserva su altura natural para que
   la lista no empuje los botones fuera del panel cuando hay muchas capas. */
.ropa-app .bloque-crece {
    flex: 1;
    min-height: 0;
}

.ropa-app .bloque-tit {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tenue);
}

.ropa-app .nota, .ropa-app .vacio {
    margin: 0;
    font-size: 11px;
    color: var(--tenue);
    line-height: 1.45;
}

/* ---------------- Controles ---------------- */

.ropa-app button, .ropa-app select, .ropa-app input[type="text"], .ropa-app input[type="number"] {
    font: inherit;
    font-size: 12px;
    color: var(--texto);
    background: var(--fondo-alto);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 7px 9px;
    outline: none;
}

.ropa-app button {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.ropa-app button:hover { background: rgba(255, 255, 255, 0.09); }
.ropa-app button.acento { background: var(--acento); border-color: var(--acento); color: #fff; }
.ropa-app button.ok { background: var(--ok);     border-color: var(--ok);     color: #06210f; }
/* El borrado no lleva color de relleno: solo el borde. Un boton rojo macizo
   junto a Publicar invita a pulsarlo por error. */
.ropa-app button.peligro { border-color: var(--peligro); color: var(--peligro); }
.ropa-app button.peligro:hover { background: var(--peligro); color: #fff; }
.ropa-app button.ancho { width: 100%; }

.ropa-app .botonera {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ropa-app .botonera > button { flex: 1 1 auto; }

.ropa-app input[type="color"] {
    width: 100%;
    height: 30px;
    padding: 2px;
    background: var(--fondo-alto);
    border: 1px solid var(--borde);
    border-radius: 6px;
    cursor: pointer;
}

/* El margen por defecto del range suma sobre el 100% de ancho y saca barra de
   scroll horizontal en el panel de propiedades. */
.ropa-app input[type="range"] {
    width: 100%;
    margin: 0;
    height: 18px;
    accent-color: var(--acento);

    /* El range nativo del CEF se pinta sin relleno: la barra parecía inerte
       aunque el valor sí estuviera cambiando. Se dibuja a mano la parte
       recorrida con un degradado duro, y el JS actualiza --pct al arrastrar. */
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(
        to right,
        var(--acento) 0 var(--pct, 0%),
        rgba(255, 255, 255, 0.14) var(--pct, 0%) 100%);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.ropa-app input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.ropa-app input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--acento);
    cursor: grab;
}

.ropa-app input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

/* Valor numérico al lado de la etiqueta del deslizador. */
.ropa-app .campo label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ropa-app .campo label .valor {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

/* ---------------- Galeria de logos ---------------- */

.ropa-app .galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}

.ropa-app .galeria .logo {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--fondo-alto);
    cursor: grab;
}

.ropa-app .galeria .logo:hover { border-color: var(--acento); }
.ropa-app .galeria .logo:active { cursor: grabbing; }

/* La plantilla de color, al final de la lista de capas. Se marca como fija
   porque no se puede borrar ni mover: es el fondo, y siempre hay una. */
.ropa-app .capas li.plantilla {
    opacity: .85;
    border-style: dashed;
}

.ropa-app .capas li.plantilla .nombre { font-style: italic; }

/* Selector de plantilla: miniaturas y no un desplegable, porque "Burdeos" no
   dice como queda la tela y el criterio para elegir es justo ese. */
.ropa-app .plantillas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ropa-app .plantilla-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--fondo-alto);
    cursor: pointer;
    font-size: 10px;
    color: var(--tenue);
}

.ropa-app .plantilla-op img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.ropa-app .plantilla-op:hover { border-color: var(--borde); }
.ropa-app .plantilla-op.sel {
    border-color: var(--acento);
    color: var(--texto);
}

/* Mis imagenes: rejilla corta que crece con lo que haya, sin robarle alto a la
   galeria de logos ni a la lista de capas, que son las que hay que ver. */
.ropa-app .galeria-subidas {
    max-height: 132px;
    margin-bottom: 6px;
}

.ropa-app .galeria .logo .quitar {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--fondo);
    color: var(--tenue);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    /* Solo al pasar por encima de la miniatura: con doce imagenes, doce aspas
       permanentes convierten la rejilla en ruido. */
    opacity: 0;
    transition: opacity .12s;
}

.ropa-app .galeria .logo:hover .quitar { opacity: 1; }
.ropa-app .galeria .logo .quitar:hover {
    color: #fff;
    border-color: var(--peligro);
    background: var(--peligro);
}

/* Boton de subir. Con borde discontinuo para que se lea como "aqui se añade"
   y no como una accion mas de la botonera de arriba. */
.ropa-app .soltar {
    width: 100%;
    padding: 9px;
    border: 1px dashed var(--borde);
    border-radius: 6px;
    background: transparent;
    color: var(--tenue);
    font-size: 12px;
    cursor: pointer;
}

.ropa-app .soltar:hover {
    border-color: var(--acento);
    color: var(--texto);
}

.ropa-app .galeria .logo img {
    max-width: 100%;
    max-height: 100%;
    /* Muchos logos son claros sobre transparente y desaparecerian sobre el
       panel oscuro. La sombra les da un borde minimo para que se distingan. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

/* Miniatura que sigue al cursor mientras se arrastra un logo al lienzo.
   Se usa arrastre propio con eventos de raton en vez del drag & drop de HTML5
   porque en el CEF sin ventana de FiveM ese API no dispara de forma fiable. */
.ropa-app .fantasma {
    position: fixed;
    z-index: 99;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    pointer-events: none;
    opacity: 0.8;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.ropa-app .lienzo-caja.soltar { outline: 2px dashed var(--acento); outline-offset: -4px; }

/* ---------------- Lista de capas ---------------- */

.ropa-app .capas {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ropa-app .capas li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 6px;
    background: var(--fondo-alto);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px;
}

.ropa-app .capas li.sel { border-color: var(--acento); }

.ropa-app .capas .nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ropa-app .capas .mini {
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--tenue);
    font-size: 12px;
    line-height: 1;
}
.ropa-app .capas .mini:hover { color: var(--texto); background: none; }
.ropa-app .capas .mini.quitar:hover { color: var(--peligro); }

/* ---------------- Centro libre y barra de camara ---------------- */

.ropa-app .centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 8px;
    min-width: 0;
    /* Sin fondo y sin capturar el raton por defecto: con el visor apagado, por
       aqui se ve el juego. Los hijos que si son interfaz lo reactivan. */
    pointer-events: none;
}

/* ---------------- Visor 3D ---------------- */

.ropa-app .visor-caja {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--fondo);
    pointer-events: auto;
    overflow: hidden;
}

.ropa-app .visor-caja.oculto { display: none; }

.ropa-app #visor {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}
.ropa-app #visor:active { cursor: grabbing; }

.ropa-app .visor-tit {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tenue);
    pointer-events: none;
}

.ropa-app .visor-estado {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--tenue);
    pointer-events: none;
}

.ropa-app .barra-camara {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    pointer-events: auto;
}

.ropa-app .barra-camara button { padding: 7px 12px; }
.ropa-app .barra-camara button.activo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}

/* ---------------- Lienzo ---------------- */

.ropa-app .lienzo-caja {
    position: relative;
    /* El lienzo es cuadrado y no debe deformarse nunca: una textura de ropa
       estirada se ve al instante sobre el modelo.

       Ocupa TODO el ancho de su columna, que es lo que hace útil poder
       arrastrarla: ensanchar la columna es la forma de dibujar más grande.
       Antes había un tope en vh para que no empujara las propiedades fuera del
       panel; ahora el panel hace scroll, así que el tope sobra y solo impedía
       aprovechar el ancho. */
    aspect-ratio: 1 / 1;
    width: 100%;
    margin: 0 auto;
    /* Sin esto el flex de la columna lo comprime en vertical y se salta el
       aspect-ratio: el lienzo sale rectangular y el diseno se pinta deformado
       sobre la prenda. */
    flex: none;
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    background:
        repeating-conic-gradient(#1b1e26 0% 25%, #23262f 0% 50%) 50% / 24px 24px;
}

.ropa-app #lienzo {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Despiece de la prenda sobre el UV: dice que zona de la textura corresponde a
   cada parte. Nunca captura el raton, o no se podrian arrastrar las capas. */
.ropa-app .wireframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Recuadro de la capa seleccionada. Es solo un indicador visual, no captura el
   raton: los arrastres los gestiona el canvas. */
.ropa-app .marco {
    position: absolute;
    border: 1px dashed var(--acento);
    pointer-events: none;
}

.ropa-app .ayuda {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    color: var(--tenue);
}

.ropa-app kbd {
    background: var(--fondo-alto);
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
}

/* ---------------- Propiedades ---------------- */

/* La columna derecha apila lienzo + propiedades + acciones, y su alto depende
   de cuantas propiedades tenga la capa seleccionada. Se desplaza la columna
   entera en vez de cada bloque por su cuenta: con scroll anidado, los botones
   de abajo se salian del panel en pantallas bajas. */
.ropa-app .panel-der { overflow-y: auto; }

/* flex: none en TODOS los bloques, no solo en los que crecen. Por defecto un
   hijo de flex puede encogerse por debajo de su contenido, y al hacerlo el texto
   no desaparece: se sale del bloque y se superpone al de abajo. Con flex: none
   cada bloque conserva su alto real y lo que se desplaza es la columna. */
.ropa-app .panel-der .bloque { flex: none; }

.ropa-app #props {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Nunca en horizontal: el panel tiene ancho fijo y cualquier desbordamiento
       lateral es un fallo de un control, no algo que deba poder desplazarse. */
    overflow-x: hidden;
}

.ropa-app .campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ropa-app .campo label {
    font-size: 11px;
    color: var(--tenue);
}

.ropa-app .campo-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

/* ---------------- Salida al juego ----------------

   El bloque que convierte el diseño en el archivo que entiende GTA. Vive al
   final de la columna derecha, después de guardar: primero se diseña, luego se
   genera. */

.ropa-app .campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ropa-app .campo > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tenue);
}

/* El nombre y la ruta del archivo están para copiarlos y pegarlos en el FTP,
   así que aquí sí se permite seleccionar: el body lo tiene desactivado para que
   arrastrar sobre el lienzo no seleccione media interfaz. */
.ropa-app .destino {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 10px 12px;
    word-break: break-all;
    user-select: all;
}

.ropa-app .destino .k {
    display: block;
    font-family: 'Familjen Grotesk', 'Segoe UI', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--tenue);
    margin-top: 8px;
    user-select: none;
}
.ropa-app .destino .k:first-child { margin-top: 0; }

.ropa-app .estado {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--tenue);
    min-height: 16px;
}
.ropa-app .estado.bien { color: var(--ok); }
.ropa-app .estado.mal { color: var(--peligro); }

/* Convertir un PNG que ya existe es el camino secundario -viene del editor
   in-game-, así que va plegado para no competir con el flujo normal. */
.ropa-app .desde-url summary {
    font-size: 11px;
    color: var(--tenue);
    cursor: pointer;
    padding: 4px 0;
}
.ropa-app .desde-url summary:hover { color: var(--texto); }

.ropa-app .desde-url > input,
.ropa-app .desde-url > button { width: 100%; margin-top: 6px; }

/* Los campos de texto sí se pueden seleccionar aunque el body lo desactive. */
.ropa-app input, .ropa-app select, .ropa-app textarea { user-select: text; }

/* ---------------- Secciones plegables ----------------

   La columna izquierda junta cinco secciones y en pantallas bajas no caben
   todas abiertas. Cada una se pliega por su cabecera y recuerda cómo estaba. */

.ropa-app .plegable { gap: 0; }

.ropa-app .bloque-cab {
    /* Es un <button> de verdad, no un div con onclick: así entra en el orden de
       tabulación y responde al teclado sin tener que reimplementarlo. Pierde
       todo el aspecto de botón. */
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
    border-radius: 6px;
}

.ropa-app .bloque-cab:hover .bloque-tit { color: var(--texto); }
.ropa-app .bloque-cab:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.ropa-app .plegable-flecha {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--tenue);
    transition: transform 0.15s;
}

.ropa-app .plegable.plegada .plegable-flecha { transform: rotate(-90deg); }

.ropa-app .plegable-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    min-height: 0;
}

.ropa-app .plegable.plegada .plegable-cuerpo { display: none; }
/* Plegada deja de reclamar el espacio que pedía por ser bloque-crece. */
.ropa-app .plegable.plegada.bloque-crece { flex: none; }

/* Al pulsar «Plantilla» en la lista de capas, la sección del color se abre y
   parpadea: sin esto, si ya estaba abierta al otro extremo de la columna, el
   clic no parecía hacer nada. */
@keyframes resalte {
    0%   { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.55); }
    100% { box-shadow: 0 0 0 8px rgba(79, 140, 255, 0); }
}

.ropa-app .plegable.resaltada {
    border-radius: 8px;
    animation: resalte 1.2s ease-out;
}

/* Doce colores no caben de golpe en una columna estrecha. */
.ropa-app #colores .plantillas { max-height: 30vh; overflow-y: auto; }

/* ---------------- Selector de género ----------------

   Dos opciones fijas entre las que se alterna constantemente para comprobar
   que el diseño cuadra en las dos: botones, no un desplegable que hay que
   abrir cada vez. */

.ropa-app .segmentado {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--borde);
    border-radius: 7px;
}

.ropa-app .seg-op {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--tenue);
}

.ropa-app .seg-op:hover { background: rgba(255, 255, 255, 0.06); color: var(--texto); }
.ropa-app .seg-op.sel { background: var(--acento); color: #fff; }
.ropa-app .seg-op.sel:hover { background: var(--acento); }


/* ---------------- Lo que se añade aquí ----------------

   Controles que en ropa.neoncm.es no existian porque los cubria el servidor:
   traer una imagen por enlace y convertir un PNG que ya se tiene hecho. */

/* Fila de "campo ancho + boton corto". La repiten el enlace de la imagen y el
   del PNG ya hecho. */
.ropa-app .fila-url {
    display: flex;
    gap: 6px;
}
.ropa-app .fila-url input { flex: 1; min-width: 0; }
.ropa-app .fila-url button { flex: none; }

/* Soltar un archivo encima del boton de subir. */
.ropa-app .soltar.encima {
    border-color: var(--acento);
    background: rgba(79, 140, 255, 0.12);
}

/* El nombre del archivo se escribe, no se copia: es el unico dato de salida que
   decide quien descarga, y por eso va como campo y no dentro de .destino. */
.ropa-app #nombreArchivo {
    width: 100%;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
}

/* Enlace a la documentacion desde dentro de un bloque. */
.ropa-app .ayuda a,
.ropa-app .nota a { color: var(--acento); }

/* ---------------- La columna izquierda tambien se desplaza ----------------

   En ropa.neoncm.es el editor ocupaba la pantalla entera y los cinco bloques de
   la izquierda cabian de sobra. Aqui vive dentro de un bloque de la pagina, con
   bastante menos alto, y no caben.

   Al ser hijos de un contenedor flex se encogian para caber igualmente, y el
   que lo pagaba entero era «Capas»: es `bloque-crece`, o sea `flex: 1 1 0%`, y
   una base de cero con permiso para encoger da exactamente cero.

   Que se quedara invisible no era solo feo. La lista de capas es el unico sitio
   desde donde se borra una: sin ella, un tinte puesto por error no habia manera
   de quitarlo y la prenda se quedaba oscurecida para siempre.

   La solucion es la que ya llevaba la columna derecha: que se desplace la
   columna entera y que ningun bloque se encoja por debajo de su contenido. */

.ropa-app .panel-izq { overflow-y: auto; }
.ropa-app .panel-izq .bloque { flex: none; }

/* Capas sigue siendo el unico que crece, pero ya no encoge: `1 0 auto` en vez
   de `1 1 0%`. El minimo garantiza tres o cuatro filas aunque el resto de la
   columna vaya lleno. */
.ropa-app .panel-izq .bloque-crece {
    flex: 1 0 auto;
    min-height: 148px;
}

/* Las miniaturas se encogian por lo mismo, y ademas llevan `overflow-y: auto`,
   asi que al quedarse en cero no desbordaban: desaparecian. Parecia que subir
   una imagen no hacia nada. */
.ropa-app .galeria-subidas {
    flex: none;
    min-height: 67px;
}

/* El editor es un escritorio: tres columnas, dos tiradores y un lienzo que se
   arrastra con el raton. En un movil no hay nada de eso, y fingir que sí es
   peor que decirlo. */
.ropa-solo-escritorio {
    display: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px 22px;
    text-align: center;
    color: var(--ink-dim);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .ropa-app { display: none; }
    .ropa-solo-escritorio { display: block; }
}