:root {
    --fondo:  #11162a;
    --panel:  #1a2240;
    --linea:  #2b3661;
    --texto:  #dfe6f7;
    --suave:  #8d9cc9;
    --acento: #ffd45e;
    --ok:     #74dd93;
    --mal:    #ff7d72;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--fondo); color: var(--texto);
    font: 14px/1.45 system-ui, sans-serif;
    height: 100vh; display: flex; flex-direction: column;
  }

  header {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px; border-bottom: 1px solid var(--linea);
    background: var(--panel);
  }
  header h1 { font-size: 15px; margin: 0; letter-spacing: .04em; }
  header .maquina { color: var(--acento); font-weight: 600; }
  header .hueco { flex: 1; }

  button {
    background: var(--linea); color: var(--texto); border: 0;
    border-radius: 5px; padding: 6px 12px; font: inherit; cursor: pointer;
  }
  button:hover { background: #3a4border; }
  button.principal { background: var(--acento); color: #241d00; font-weight: 600; }
  button.activo { background: var(--acento); color: #241d00; }

  nav {
    display: flex; gap: 4px; padding: 6px 14px 0;
    border-bottom: 1px solid var(--linea); background: var(--panel);
  }
  nav button { border-radius: 6px 6px 0 0; }

  /* Tres columnas: a los lados, el titulo y la ayuda; en medio, la
   * herramienta. El editor nacio para una pantalla de mano y en un
   * monitor sobraba sitio por todos lados. */
  main { flex: 1; overflow: hidden; display: grid;
         grid-template-columns: 25% 50% 25%; }

  #col-izq, #col-der {
    padding: 18px; overflow-y: auto; border-color: var(--linea);
    background: #141a33;
  }
  #col-izq { border-right: 1px solid var(--linea); }
  #col-der { border-left: 1px solid var(--linea); }

  #col-izq h2 {
    font-size: 26px; margin: 0 0 4px; letter-spacing: -.02em;
    color: var(--acento);
  }
  #col-izq .sub { color: var(--suave); font-size: 12px;
                  text-transform: uppercase; letter-spacing: .1em;
                  margin-bottom: 14px; }
  #col-izq img { width: 100%; border-radius: 8px; display: block;
                 margin-bottom: 14px; border: 1px solid var(--linea); }
  #col-izq .hueco-img {
    width: 100%; aspect-ratio: 4/3; border-radius: 8px;
    border: 1px dashed var(--linea); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #52608f; font-size: 12px; text-align: center;
    padding: 10px; line-height: 1.4;
  }
  #col-izq p { color: var(--suave); line-height: 1.6; margin: 0; }

  #col-der h3 { font-size: 12px; color: var(--acento); margin: 18px 0 6px;
                text-transform: uppercase; letter-spacing: .08em; }
  #col-der h3:first-child { margin-top: 0; }
  #col-der p, #col-der li { color: var(--suave); line-height: 1.6;
                            margin: 0 0 8px; }
  #col-der ul { margin: 0 0 10px; padding-left: 18px; }
  #col-der code, #col-der kbd {
    background: #0c1024; padding: 1px 5px; border-radius: 4px;
    font: 12px ui-monospace, monospace; color: var(--texto);
  }

  #centro-col { overflow: hidden; display: flex; }
  .pagina { display: none; width: 100%; height: 100%; }
  .pagina.puesta { display: flex; }

  /* En pantallas estrechas, las columnas de los lados estorban mas de
   * lo que ayudan. */
  @media (max-width: 1180px) {
    main { grid-template-columns: 1fr; }
    #col-izq, #col-der { display: none; }
  }

  /* --- dibujar --- */
  #lista {
    width: 190px; border-right: 1px solid var(--linea);
    overflow-y: auto; padding: 8px;
  }
  #lista .item {
    padding: 5px 8px; border-radius: 5px; cursor: pointer;
    font: 12px ui-monospace, monospace; color: var(--suave);
    display: flex; justify-content: space-between; gap: 6px;
  }
  #lista .item:hover { background: var(--panel); }
  #lista .item.puesto { background: var(--acento); color: #241d00; font-weight: 600; }
  #lista .item small { opacity: .7; }

  #centro { flex: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 10px;
            padding: 14px; overflow: auto; }
  #lienzo { image-rendering: pixelated; cursor: crosshair;
            background: #0a0e1e; border: 1px solid var(--linea);
            border-radius: 6px; touch-action: none; }
  .datos { color: var(--suave); font: 12px ui-monospace, monospace; }

  #colores { width: 150px; border-left: 1px solid var(--linea);
             padding: 10px; overflow-y: auto; }
  #colores h2, #lista h2 {
    font-size: 11px; margin: 0 0 8px; color: var(--suave);
    text-transform: uppercase; letter-spacing: .08em;
  }
  .tinta { display: flex; align-items: center; gap: 8px;
           padding: 3px 5px; border-radius: 5px; cursor: pointer; }
  .tinta:hover { background: var(--panel); }
  .tinta.puesta { background: var(--linea); }
  .tinta i { width: 22px; height: 22px; border-radius: 4px;
             border: 1px solid #0007; display: block; }
  .tinta span { font: 11px ui-monospace, monospace; color: var(--suave); }

  /* --- escribir --- */
  #escribir { width: 100%; height: 100%; display: flex;
               min-width: 0; }
  #numeros {
    /* Sin margen: un <pre> trae uno de una linea por arriba, y los
     * numeros salian trece pixeles mas abajo que el texto. El fallo
     * marcado en la 16 señalaba la 15. */
    margin: 0;
    background: var(--panel); color: var(--suave); text-align: right;
    padding: 10px 6px; font: 13px/1.5 ui-monospace, monospace;
    user-select: none; overflow: hidden; min-width: 44px;
  }
  #codigo {
    flex: 1; min-width: 0; background: #0c1024; color: var(--texto); border: 0;
    padding: 10px; font: 13px/1.5 ui-monospace, monospace;
    resize: none; outline: none; white-space: pre; overflow-x: auto;
  }
  #avisos {
    width: 210px; border-left: 1px solid var(--linea); padding: 10px;
    overflow-y: auto; font: 12px/1.5 ui-monospace, monospace;
  }
  #avisos .mal { color: var(--mal); }
  #avisos .ok  { color: var(--ok); }

  #herramientas { display: flex; gap: 6px; flex-wrap: wrap;
                  justify-content: center; }
  #herramientas button { font-size: 12px; padding: 5px 10px; }
  .botones-lista { display: flex; gap: 4px; margin-top: 10px; }
  .botones-lista button { flex: 1; font-size: 11px; padding: 5px 2px; }

  /* --- mapa --- */
  #mp-izq { width: 170px; border-right: 1px solid var(--linea);
            padding: 10px; overflow-y: auto; }
  #mp-mapas { display: flex; flex-direction: column; gap: 3px;
              margin-bottom: 12px; }
  #mp-mapas button { font-size: 11px; padding: 5px 8px; text-align: left; }

  #mp-izq h2 { font-size: 11px; margin: 0 0 8px; color: var(--suave);
               text-transform: uppercase; letter-spacing: .08em; }
  #mp-centro { flex: 1; display: flex; flex-direction: column;
               min-width: 0; padding: 10px; }
  #mp-barra { display: flex; gap: 6px; flex-wrap: wrap;
              align-items: center; margin-bottom: 8px; }
  #mp-barra button { font-size: 12px; padding: 5px 9px; }
  /* El marco es lo que se desplaza: el lienzo puede ser enorme y aqui
   * se ve el trozo que quepa, con barras en los dos sentidos. */
  #mp-marco { flex: 1; overflow: auto; border: 1px solid var(--linea);
              border-radius: 6px; background: #0a0e1e; }
  #mp-lienzo { image-rendering: pixelated; display: block;
               cursor: crosshair; touch-action: none; }
  .mp-tesela { display: flex; align-items: center; gap: 8px;
               padding: 4px 5px; border-radius: 5px; cursor: pointer;
               font: 11px ui-monospace, monospace; }
  .mp-tesela:hover { background: var(--panel); }
  .mp-tesela.puesta { background: var(--linea); }
  .mp-tesela canvas { image-rendering: pixelated; border-radius: 3px;
                      background: #0a0e1e; }
  .mp-tesela b { width: 14px; color: var(--acento); }
  .mp-tesela span { flex: 1; color: var(--suave); }
  .mp-tesela i.marca { color: var(--acento); }
  .mp-tesela i { font-style: normal; font-size: 11px; opacity: .85;
                 width: 12px; text-align: center; }

  /* --- sonar --- */
  #melodia { width: 100%; padding: 14px; overflow: auto; }
  #m-barra { display: flex; align-items: center; gap: 10px;
             margin-bottom: 12px; }
  #m-rejilla { display: inline-block; }
  .m-fila { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
  .m-fila > b { width: 76px; font: 11px ui-monospace, monospace;
                color: var(--suave); font-weight: 400; text-align: right;
                padding-right: 6px; }
  .m-celda { width: 26px; height: 22px; border-radius: 3px;
             background: #0e1430; cursor: pointer;
             font: 9px ui-monospace, monospace; color: var(--texto);
             display: flex; align-items: center; justify-content: center; }
  .m-celda.suena { background: var(--linea); }
  .m-celda.pulso { outline: 1px solid #2b366199; }
  .m-celda.ahora { background: var(--acento); color: #241d00; }

  /* --- jugar --- */
  #jugar { width: 100%; display: flex; flex-direction: column;
           align-items: center; gap: 12px; padding: 16px; overflow: auto; }
  #j-barra { display: flex; align-items: center; gap: 8px; }
  #j-barra button { font-size: 15px; min-width: 44px; padding: 6px 10px; }
  #pantalla { image-rendering: pixelated; background: #000;
              border: 1px solid var(--linea); border-radius: 6px;
              max-width: 100%; }
  #j-teclas { text-align: center; }
  #j-fallo { max-width: 620px; font: 12px/1.5 ui-monospace, monospace;
             background: #2a1520; padding: 10px; border-radius: 6px; }

  /* Clases en vez de style="..." dentro del HTML.
   *
   * Un servidor con politica de seguridad estricta prohibe los estilos
   * escritos en el propio elemento igual que prohibe un <style> suelto,
   * asi que aqui no queda ninguno. */
  .ancho-todo  { width: 100%; margin-top: 10px; }
  .ancho-todo2 { width: 100%; margin-top: 4px; }
  .sep-arriba  { margin-top: 12px; }
  .sep-corta   { margin-top: 8px; }
  .apagado     { color: var(--suave); }
  .oculto      { display: none; }

  .vacio { color: var(--suave); text-align: center; padding: 40px 20px; }
  .vacio b { color: var(--texto); }