:root {
 --blanco: #E6E6E6;
 --azul: #1362E3;
 --magenta: #DA64F0;
 --limon: #F8D309;
 --rojo: #E22D2C;
 --dark: #2B2B2B;
}


body {
   margin: 0;
   overflow-y: scroll;
   font-family: Arial, Helvetica, sans-serif, sans-serif;
   color: #E6E6E6;
   background-color: var(--blanco);  
}


.logo {
 position: fixed;
 top: 20px;     
 left: 10px;   
 width: 300px;  
 height: auto;
 z-index: 9999;
 transition: opacity 0.3s ease, transform 0.3s ease;
}


#logo-link {
 display: inline-block;
 cursor: pointer;
}


#logo-link:hover .logo {
 transform: rotate(-6deg);
}


#logo-subtitle {
 position: fixed;
 top: 20px;
 left: 20px;
 z-index: 9999;
 font-family: 'Inter', sans-serif;
 font-weight: 440;
 font-size: 16px;
 line-height: 18px;
 color: var(--dark);
 transition: opacity 0.3s ease;
}


/* IMAGE CONTAINER */
#elementos-canvas {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   z-index:20;
   pointer-events:none; z-index: 20;
}

#fondos-fijos {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 200vh;
   z-index: 1;          
   pointer-events: none;
}

.imagen-fija {
   position: absolute;
   width: 400px;       
   height: auto;
   pointer-events: none;
   user-select: none;
}


/* IMAGEN Y LETRA INDEPENDIENTE */


.imagen-movil {
   position:absolute;
   width:220px;
   height:auto;
   cursor:grab;
   user-select:none;
   touch-action:none;
   pointer-events:auto;
}




.imagen-movil:active {
   cursor:grabbing;
}


.letra-movil {
   position:absolute;
   width:40px;
   height:auto;
   cursor:grab;
   user-select:none;
   touch-action:none;
   pointer-events:auto;
}


.letra-movil:active {
   cursor:grabbing;
}


/* CANVAS */
#zona-dibujo {
   width: 100%;
   height: 200vh;
   position: relative;

}

canvas {
   display: block;
   background: #E6E6E6;
   cursor: crosshair;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;         
}



#canvas {
   height: 200vh;
   z-index: 5;
   background: transparent;
}


#text-canvas {
   width: 100%;
   height: 200vh;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 30;
   pointer-events: none;
   background: transparent;
}


/* BOTÓN TOOLS*/
/* BOTÓN CRAYON */


#crayon-btn {
   position: fixed;
   right: 20px;
   bottom: 20%;
   transform: translateY(-50%);


   width: 72px;
   height: 72px;


   border-radius: 50%;
   border: none;


   background: var(--limon);


   cursor: pointer;


   z-index: 5000;


   display: flex;
   align-items: center;
   justify-content: center;


   box-shadow: 0 4px 12px rgba(0,0,0,0.15);


   transition: transform 0.2s ease;
}


#crayon-btn:hover {
   transform: translateY(-50%) scale(1.08);
}


#crayon-btn img {
   width: 40px;
   height: auto;
   display: block;
   rotate: -45deg;
   pointer-events: none;
}



/* CRAYON */
#crayon-btn img {
   width: 40px;
   height: auto;
   display: block;
   pointer-events: none;
}


/* TOOL MENU */
#tools-menu {
   position: fixed;
   right: 25px;
   bottom: calc(20% + 90px);
   display: none;
   flex-direction: column;
   gap: 15px;
   z-index: 5001;
}


.tool-circle {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: none;
   cursor: pointer;


   display: flex;
   align-items: center;
   justify-content: center;


   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}




/* COLOR BUTTON */
#color-tool {
   background: var(--dark);
}


/* hidden native picker */
#color-picker {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}




#color-tool:hover {
   transform: translateY(-5%) scale(1.08);
}


/* TEXT */
#text-tool {
   background: var(--magenta);
   font-size: 24px;
   color: var(--blanco);
}


#text-tool:hover {
   transform: translateY(-5%) scale(1.08);
}


/* ERASER */
#eraser-tool {
   background: var(--azul);
}


#eraser-tool img {
   width: 35px;
   height: auto;
   pointer-events: none;
}


#eraser-tool:hover {
   transform: translateY(-5%) scale(1.08);
}


#mano-tool {
   background: var(--magenta);
   color: var(--blanco);
   font-size: 12px;
}


/* HAND */
#mano-tool:hover {
   transform: translateY(-5%) scale(1.08);
}


#mano-tool.activo {
   outline: 3px solid var(--dark);
}


#crayon-btn.activo {
   outline: 3px solid var(--dark);
}


/* BOTÓN ENVIAR */
#enviar {
   position: fixed;
   top: 20px;
   right: 20px;
   padding: 12px 20px;
    font-family: 'Inter', sans-serif;
   font-size: 16px;
   z-index: 200;
   background-color: #E6E6E6;
   color: var(--azul);
   border: none;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
}


#enviar:hover {
    background-color: var(--azul);
    color: var(--blanco);
}


/* GALERÍA */
#galeria-wrapper {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: #E6E6E6;
   backdrop-filter: blur(10px);
   border-top: 1px solid rgba(0,0,0,0.1);
   z-index: 9999;
}


#galeria-title {
   font-size: 14px;
   font-weight: bold;
   padding: 10px;
   color: var(--dark);
   border-bottom: 1px solid rgba(0,0,0,0.08);
}


#galeria {
   height: 120px;
   overflow-x: auto;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px;
}


#galeria img {
   height: 100px;
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2);
   cursor: pointer;
   transition: transform 0.2s ease;
}


#galeria img:hover {
   transform: scale(1.05);
}


/* POPUP */
#popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.8);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 99999;
}


#popup img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.5);
   background: var(--blanco);
}


/* BOTÓN SUGERIR */
#sugerir-btn {
   position: fixed;
   left: 20px;
   bottom: 200px;


   width: 60px;
   height: 60px;


   border-radius: 50%;
   border: none;


   background: var(--azul);
   color: var(--blanco);


   font-size: 30px;
   font-weight: bold;
   line-height: 1;


   display: flex;
   align-items: center;
   justify-content: center;


   cursor: pointer;


   z-index: 5000;


   box-shadow: 0 4px 12px rgba(0,0,0,0.15);


   transition: transform 0.2s ease;
}


#sugerir-btn span {
   display: block;
   margin-top: -2px;
   pointer-events: none;
}


#sugerir-btn:hover {
   transform: scale(1.08);
}


/* POPUP SUGERENCIAS */
#sugerir-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.7);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 99999;
}


#sugerir-popup-content {
   position: relative;
   background: var(--blanco);
   color: var(--dark);
   border-radius: 14px;
   padding: 30px;
   width: 90%;
   max-width: 420px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}


#sugerir-close {
   position: absolute;
   top: 10px;
   right: 14px;
   background: none;
   border: none;
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   color: var(--dark);
}


#sugerir-popup-content h3 {
   font-size: 16px;
   margin: 0 0 16px 0;
   padding-right: 24px;
   color: var(--dark);
}


#sugerencias-form {
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
}


#sugerencia-input {
   flex: 1;
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid rgba(0,0,0,0.15);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: var(--dark);
}


#sugerencia-btn {
   padding: 8px 16px;
   border-radius: 8px;
   border: none;
   background-color: var(--azul);
   color: var(--blanco);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s ease;
}


#sugerencia-btn:hover {
   background-color: var(--magenta);
}


#sugerencias-lista {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   max-height: 200px;
   overflow-y: auto;
}


.sugerencia-pill {
   background: var(--dark);
   color: var(--blanco);
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 13px;
   white-space: nowrap;
}

#mover-btn {
   position: fixed;
   right: 20px;
   bottom: calc(20% - 90px);
   transform: translateY(-50%);
   width: 72px;
   height: 72px;
   border-radius: 50%;
   border: none;
   background: var(--magenta);
   cursor: pointer;
   z-index: 5000;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transition: transform 0.2s ease;
}

#mover-btn:hover {
   transform: translateY(-50%) scale(1.08);
}

#mover-btn img {
   max-width: 38px;
   max-height: 38px;
   width: auto;
   height: auto;
   object-fit: contain;
   display: block;
   margin: auto;
   pointer-events: none;
}

#mover-btn.activo {
   outline: 3px solid var(--dark);
}

body.modo-dibujo .imagen-movil,
body.modo-dibujo .letra-movil {
   pointer-events: none;
}

body.modo-dibujo #canvas {
   z-index: 25;
}