:root {
   --font-size-base: 16px;
   --font-size-lg: 1.25rem;
   --font-size-sm: 0.875rem;
   --text-indent: 1rem;

   /* Colors */
   --color-primary: blue;
   --color-background: #f9fafb;
   --color-shadow: rgba(0, 0, 0, 0.35);
   --color-overlay-light: rgba(255, 255, 255, 0.8);
   --color-error: rgba(255, 0, 0, 0.8);
   --color-text-light: white;
   --color-border: black;
   --color-text: blue;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

a,
a:visited {
   font-size: var(--font-size-lg);
   color: var(--color-primary);
}

body {
   overflow: hidden;
   background-color: var(--color-background);
   font-family: "Instrument Serif", serif;
   font-weight: 400;
   font-style: normal;
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.instrument-serif-regular {
   font-family: "Instrument Serif", serif;
   font-weight: 400;
   font-style: normal;
}

.instrument-serif-regular-italic {
   font-family: "Instrument Serif", serif;
   font-weight: 400;
   font-style: italic;
}

.square {
   position: absolute;
   overflow: hidden;
   user-select: none;
   cursor: move;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.square img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-fit: contain;
   opacity: 0;
   transition: opacity 0.3s ease;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   object-position: center;
   backface-visibility: hidden; /* Mejora el rendimiento */
}

.square img.loaded {
   opacity: 1;
}

.square:hover {
   box-shadow: 0 4px 12px var(--color-shadow);
   transform: scale(1.01);
}

.square .close-button {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 20px;
   height: 20px;
   background-color: var(--color-overlay-light);
   border-radius: 50%;
   cursor: pointer;
   display: none;
   justify-content: center;
   align-items: center;
   font-size: var(--font-size-base);
   line-height: 1;
   border: none;
}

.square:hover .close-button {
   display: flex;
}

.close-button:hover {
   background-color: var(--color-error);
   color: var(--color-text-light);
}
.wrapper {
   display: flex;
   justify-content: space-between;
}

.wrapper * {
   width: 50%;
}

.span-3 {
   grid-column: span 3;
}

.grid-6 {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1rem;
}

.instructions {
   position: fixed;
   top: 0;
   padding: 1rem;
   z-index: -1;
   user-select: none;
   pointer-events: none;
   border: 1px solid var(--color-text);
   margin: 1rem;
   height: 100%;
   height: -webkit-fill-available;
   height: fill-available;
   transition: filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.blur-effect {
   filter: blur(5px);
   opacity: 0.3;
   transform: scale(1.01);
}
.instructions * {
   grid-column: span 3;
   font-size: var(--font-size-lg);
}

.instructions h2,
.instructions b {
   font-weight: bold;
   font-style: italic;
}

.instructions article p + p {
   text-indent: var(--text-indent);
}

.instructions ul {
   padding-inline-start: 2rem;
}

.instructions aside {
   border-right: 1px solid;
}
.order-book {
   display: flex;
   justify-content: space-between;
}
.order-book * {
   font-size: var(--font-size-lg);
}

.canvas {
   width: 100vw;
   height: 100vh;
   cursor: crosshair;
   user-select: none;
   position: relative;
   z-index: 1;
}

.audio-controls {
   display: flex;
   gap: 1rem;
   align-items: center;
   z-index: 10;
}

.play-button {
   font-size: var(--font-size-lg);
   font-family: "Instrument Serif", serif;
   font-weight: 400;
   font-style: normal;
   color: var(--color-primary);
   text-decoration: underline;
   border: none;
   background: none;
   cursor: pointer;
   text-align: left;
}

.scale-select,
.waveform-select {
   padding: 0.5rem;
   border-radius: 0.25rem;
   border: 1px solid var(--color-border);
}

.clear-button {
   font-size: var(--font-size-lg);
   color: var(--color-primary);
   text-decoration: underline;
   text-align: right;
   border: none;
   background: none;
   cursor: pointer;
   z-index: 10;
   padding-right: 1rem;
}

.tools {
   padding: 0 2rem 2rem;
   position: fixed;
   bottom: 0rem;
   z-index: 10000;
   width: 100%;
   width: -webkit-fill-available;
   width: fill-available;
}

/* DEBUG SONIDO DEBUG SONIDO DEBUG SONIDO DEBUG SONIDO DEBUG SONIDO */

.debug-panel {
   position: fixed;
   right: 1rem;
   top: 1rem;
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 1rem;
   border-radius: 0.5rem;
   width: 300px;
   max-height: 90vh;
   overflow-y: auto;
   font-size: 0.875rem;
   z-index: 1000;
}

.debug-section {
   margin-bottom: 1.5rem;
}

.debug-section h3 {
   margin-bottom: 0.5rem;
   color: #00ff00;
   font-size: 1rem;
}

.control-group {
   margin-bottom: 0.5rem;
}

.control-group label {
   display: block;
   margin-bottom: 0.25rem;
}

.control-group input[type="range"] {
   width: 100%;
   background: #444;
   height: 6px;
   border-radius: 3px;
   -webkit-appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 12px;
   height: 12px;
   background: #00ff00;
   border-radius: 50%;
   cursor: pointer;
}

.control-group span {
   color: #00ff00;
}

/* CONTROL MOBILE TOUCH-DEVICES */

.mobile-warning {
   display: none;
   position: fixed;
   inset: 0;
   background: var(--color-primary);
   color: var(--color-text-light);
   z-index: 10000;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 2rem;
   font-family: "Instrument Serif", serif;
   font-size: var(--font-size-lg);
}

.mobile-warning h2 {
   margin-bottom: 1rem;
}

.mobile-warning p {
   max-width: 600px;
}

.mobile-warning a {
   color: white;
   text-decoration: underline;
   text-decoration-thickness: 0.1rem;
}

/* Detectar dispositivos móviles y pantallas pequeñas */
@media (max-width: 1024px), (pointer: coarse), (hover: none), (orientation: portrait) and (max-width: 1200px) {
   .mobile-warning {
      display: flex;
   }

   .canvas,
   .instructions,
   .tools,
   header,
   main {
      display: none !important;
   }
}