:root {
  --fondo: #eae5d9;
  --papel: #fff;
  --tinta: #000;
  --padding: 5px;
  --alto-control: 27px;
  --ancho-accion-cabecera: 60px;
  --duracion-transicion: 0.3s;
  --duracion-onda: 0.15s;
  color-scheme: light;
  font-family: Geneva, sans-serif;
}

* { box-sizing: border-box; }

*,
*::before,
*::after {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke, text-decoration-color;
  transition-duration: var(--duracion-transicion);
  transition-timing-function: ease;
}

html { background: #ece2cd; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse farthest-corner at 50% 0%,
      var(--fondo) 0%,
      #ebe4d4 55%,
      #ece2cd 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-size: 14px;
}

button,
input,
select,
textarea { font: inherit; color: inherit; }

button,
input[type="button"],
select {
  border-radius: 0;
}

button,
input[type="button"] { cursor: pointer; }

button:focus-visible,
input[type="button"]:focus-visible,
.control-zoom:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 0 2px #fff,
    inset 0 0 0 3px #000;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
  border: 0;
}

.onda-choque {
  --color-onda: #486686;
  position: fixed;
  z-index: 9999;
  width: 160px;
  height: 160px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.onda-choque__aura {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 8px solid color-mix(in srgb, var(--color-onda) 65%, transparent);
  box-shadow:
    0 0 16px 5px color-mix(in srgb, var(--color-onda) 48%, transparent),
    inset 0 0 14px 4px color-mix(in srgb, var(--color-onda) 38%, transparent);
  animation: onda-aura var(--duracion-onda) linear both;
}

@keyframes onda-aura {
  0%   { opacity: 0; transform: scale(.04); }
  28%  { opacity: .72; }
  100% { opacity: 0; transform: scale(1); }
}

a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

a:hover,
a:focus-visible,
.contacto:hover,
.contacto:focus-visible {
  color: #d95000;
  text-decoration: none;
}

.pagina {
  width: 100%;
  margin: 1px auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fila {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.herramienta {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.separador { display: none; }
.separador-horizontal { display: none; }

.columna-trabajo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cabecera { justify-content: center; }

.modulo {
  width: auto;
  margin: 0 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  background: var(--papel);
  overflow: hidden;
}

.modulo__cabecera {
  height: var(--alto-control);
  padding: 0 0 0 var(--padding);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.modulo__cabecera--entrada {
  --color-cabecera: #9f4c00;
  --color-cabecera-hover: #b65c0c;
}

.modulo__cabecera--proceso {
  --color-cabecera: #626c00;
  --color-cabecera-hover: #788400;
}

.modulo__cabecera--salida {
  --color-cabecera: #486686;
  --color-cabecera-hover: #5b7da1;
}

.modulo__cabecera--entrada,
.modulo__cabecera--proceso,
.modulo__cabecera--salida {
  background: var(--color-cabecera);
  color: #fff;
}

h1, h2 {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  text-transform: lowercase;
}

.cabecera-logo {
  flex: 0 1 650px;
  width: calc(100% - 4px);
  max-width: 650px;
  height: auto;
  margin: 5px 2px;
}

.cabecera-logo .marca {
  width: 100%;
  padding: 0;
  display: block;
}

.marca__imagen {
  display: block;
  width: 100%;
  height: auto;
}

.campo-marco {
  height: calc(var(--alto-control) * 5);
  min-height: calc(var(--alto-control) * 5);
}

.entrada-modulo {
  width: auto;
  min-width: 0;
  margin: 0 1px;
}

#entrada {
  display: block;
  width: 100%;
  height: calc(var(--alto-control) * 5);
  min-height: calc(var(--alto-control) * 5);
  padding: var(--padding);
  resize: none;
  border: 0;
  outline: 0;
  overflow: auto;
  scrollbar-width: thin;
  background: #f8f8f8;
  font-family: "Courier New", monospace;
  font-size: 16px;
  line-height: 22px;
}

#entrada:focus {
  background: #fff;
  box-shadow: none;
}

.accion-secundaria {
  --fondo-hover: var(--color-cabecera-hover);
  width: var(--ancho-accion-cabecera);
  min-width: var(--ancho-accion-cabecera);
  height: calc(var(--alto-control) - 1px);
  padding: 0 9px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #000;
  background: var(--color-cabecera);
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}

.cabecera-acciones {
  height: calc(var(--alto-control) - 1px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0;
}

.accion-secundaria[aria-pressed="true"] {
  --fondo-hover: var(--color-cabecera);
  color: #fff;
  background: var(--color-cabecera-hover);
}

.accion-secundaria--copiado { padding-inline: 2px; }

.control-zoom {
  width: calc(var(--ancho-accion-cabecera) * 2);
  min-width: calc(var(--ancho-accion-cabecera) * 2);
  height: calc(var(--alto-control) - 1px);
  margin: 0;
  padding: 0 8px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-cabecera);
  cursor: pointer;
  outline: 0;
}

.control-zoom::-webkit-slider-runnable-track {
  height: 1px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.control-zoom::-webkit-slider-thumb {
  width: 9px;
  height: 17px;
  margin-top: -8px;
  border: 1px solid #000;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}

.control-zoom::-moz-range-track {
  height: 1px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.control-zoom::-moz-range-thumb {
  width: 9px;
  height: 17px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
}

.teclado-panel {
  border: 0;
  background: var(--fondo);
}

.teclado-panel,
.comentario-opciones-panel {
  position: relative;
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: max-height, transform, filter, opacity;
}

.desplegable--abriendo {
  animation: desplegar-panel var(--duracion-transicion) cubic-bezier(.2,.75,.25,1) both;
}

.desplegable--cerrando {
  pointer-events: none;
  animation: plegar-panel var(--duracion-transicion) cubic-bezier(.55,0,.8,.25) both;
}

@keyframes desplegar-panel {
  0%   { max-height: 0; transform: scaleY(.08); filter: brightness(.08); opacity: .35; }
  100% { max-height: var(--alto-desplegable); transform: scaleY(1); filter: brightness(1); opacity: 1; }
}

@keyframes plegar-panel {
  0%   { max-height: var(--alto-desplegable); transform: scaleY(1); filter: brightness(1); opacity: 1; }
  100% { max-height: 0; transform: scaleY(.08); filter: brightness(.08); opacity: .35; }
}

.teclado {
  width: calc(100% + 2px);
  margin: 0 -1px -1px;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.teclado td {
  height: var(--alto-control);
  padding: 0;
  border: 1px solid #000;
}

.tecla {
  display: block;
  width: 100%;
  min-width: 0;
  height: calc(var(--alto-control) - 1px);
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Courier New", monospace;
  font-size: 15px;
}

.tecla--alfa { --fondo-hover: #dbeaf4; background: #eef4f8; }
.tecla--espanol { --fondo-hover: #d4e9d1; background: #e9f3e8; }
.tecla--numero { --fondo-hover: #eddfb5; background: #f8f1dc; }
.tecla--simbolo { --fondo-hover: #e4d5e9; background: #f3edf5; }
.tecla--parentesis { --fondo-hover: #ebcbb2; background: #f7e9dd; }
.tecla--corchetes { --fondo-hover: #d6d2ec; background: #e9e7f4; }
.tecla--llaves { --fondo-hover: #cfe6dc; background: #e5f1ec; }
.tecla--angulos { --fondo-hover: #e8cdd3; background: #f4e7ea; }
.tecla--interrogacion { --fondo-hover: #cce3ed; background: #e4f0f5; }
.tecla--exclamacion { --fondo-hover: #ead39b; background: #f8eccf; }
.tecla--comillas { --fondo-hover: #e4d1bc; background: #f2e9df; }

.tecla--espacio {
  --fondo-hover: #cbd000;
  background: #e1e434;
}

.tecla--borrar {
  --fondo-hover: #efbd24;
  background: #fbd752;
}

.tecla--salto {
  --fondo-hover: #55bce9;
  background: #91d3f1;
  font-weight: 700;
}

.proceso-modulo {
  width: auto;
  margin: 0 1px;
}

.proceso-barra { padding-left: var(--padding); }

.proceso-modulo:not(.proceso-modulo--abierto) .proceso-barra {
  border-bottom: 0;
}

.proceso-controles {
  height: calc(var(--alto-control) - 1px);
  display: flex;
  flex-wrap: nowrap;
}

.proceso-accion {
  --fondo-hover: var(--color-cabecera-hover);
  height: calc(var(--alto-control) - 1px);
  padding: 0 7px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #000;
  background: var(--color-cabecera);
  color: #fff;
  text-align: center;
}

.proceso-accion--nivel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.proceso-nivel__numero {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

#proceso-horizontal {
  width: 48px;
}

#proceso-vertical {
  width: 48px;
}

#proceso-comentario {
  width: 120px;
  font-family: Geneva, sans-serif;
  font-size: 11px;
}

#proceso-comentario[aria-expanded="true"] {
  --fondo-hover: var(--color-cabecera);
  background: var(--color-cabecera-hover);
}

.comentario-opciones-panel { background: var(--fondo); }

.comentario-opciones {
  width: calc(100% + 2px);
  margin: -1px -1px -1px;
  padding: 1px 0 0 1px;
  display: flex;
  flex-wrap: wrap;
}

.opcion-comentario {
  flex: 1 0 max-content;
  width: auto;
  min-width: max-content;
  height: calc(var(--alto-control) - 1px);
  padding: 0 5px;
  margin: -1px 0 0 -1px;
  border: 1px solid #000;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.opcion-comentario[aria-pressed="true"] {
  background-color: var(--fondo-activo) !important;
  font-weight: 700;
}

.opcion-comentario--color-0 { --fondo-hover: #dbeaf4; --fondo-activo: #94c5e3; background: #eef4f8; }
.opcion-comentario--color-1 { --fondo-hover: #d4e9d1; --fondo-activo: #96ca8f; background: #e9f3e8; }
.opcion-comentario--color-2 { --fondo-hover: #eddfb5; --fondo-activo: #e0c46d; background: #f8f1dc; }
.opcion-comentario--color-3 { --fondo-hover: #e4d5e9; --fondo-activo: #c3a5cf; background: #f3edf5; }
.opcion-comentario--color-4 { --fondo-hover: #ebcbb2; --fondo-activo: #dfa77d; background: #f7e9dd; }
.opcion-comentario--color-5 { --fondo-hover: #d6d2ec; --fondo-activo: #aaa1d8; background: #e9e7f4; }
.opcion-comentario--color-6 { --fondo-hover: #cfe6dc; --fondo-activo: #93c7b2; background: #e5f1ec; }
.opcion-comentario--color-7 { --fondo-hover: #e8cdd3; --fondo-activo: #d8a0ad; background: #f4e7ea; }
.opcion-comentario--color-8 { --fondo-hover: #cce3ed; --fondo-activo: #8fc5d8; background: #e4f0f5; }
.opcion-comentario--color-9 { --fondo-hover: #ead39b; --fondo-activo: #d8b459; background: #f8eccf; }
.opcion-comentario--color-10 { --fondo-hover: #e4d1bc; --fondo-activo: #caa47c; background: #f2e9df; }

.proceso-accion:hover,
.proceso-accion:focus-visible,
.opcion-comentario:hover,
.opcion-comentario:focus-visible,
.accion-secundaria:hover,
.accion-secundaria:focus-visible,
.tecla:hover,
.tecla:focus-visible {
  background-color: var(--fondo-hover) !important;
}

.salida-scroll {
  width: auto;
  overflow: auto;
  scrollbar-width: thin;
  background: #f8f8f8;
}

.salida-scroll:focus-within { background: #fff; }

#resultado {
  --tamano-salida: 8px;
  --escala-salida: 1;
  display: block;
  /* ui.js sustituye este ancho usando una réplica tipográfica de 1024 caracteres. */
  width: 976px;
  min-width: 0;
  height: 270px;
  margin: 0;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  overflow: auto;
  scrollbar-width: thin;
  background: #f8f8f8;
  font-family: "Courier New", monospace;
  font-size: var(--tamano-salida);
  font-weight: 700;
  line-height: var(--tamano-salida);
  white-space: pre;
}

#resultado:focus { background-color: #fff; }

.salida-modulo.regla-activa #resultado {
  background-color: #f8f8f8;
  background-image: url("asciifondo.gif");
  background-repeat: repeat-y;
  background-size: var(--ancho-regla, 1100px) calc(300px * var(--escala-salida));
}

.salida-modulo.regla-activa #resultado:focus { background-color: #fff; }

.salida-grupo {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.salida-modulo {
  display: flex;
  flex-direction: column;
}

.pie {
  width: 100%;
  min-height: 38px;
  padding: 4px 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #666;
  font-size: 11px;
  line-height: 14px;
}

.pie__principal {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr) minmax(max-content, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.pie__izquierda { justify-self: start; }
.pie__derecha { justify-self: end; }

.pie__centro {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.pie__centro > div { white-space: nowrap; }

.pie__privacidad {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  font-size: 10px;
}

.pie__privacidad > div { white-space: nowrap; }

.pie a,
.contacto {
  color: #555;
  font-weight: 700;
}

.contacto {
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
}

.pie a:hover,
.pie a:focus-visible,
.pie .contacto:hover,
.pie .contacto:focus-visible {
  color: #d95000;
}

.steviewonder { display: none !important; }

@media (max-width: 500px) {
  .pie__principal {
    grid-template-columns: 1fr 1fr;
  }

  .pie__izquierda {
    grid-column: 1;
    grid-row: 1;
  }

  .pie__derecha {
    grid-column: 2;
    grid-row: 1;
  }

  .pie__centro {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 650px) {
  .pagina {
    width: auto;
    margin: 1px 10px;
  }
}

@media (max-width: 1099px) {
  .pagina {
    min-height: calc(100vh - 2px);
  }

  .herramienta {
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .columna-trabajo { gap: 0; }

  .campo-marco {
    min-height: calc(var(--alto-control) * 2);
  }

  #entrada {
    height: 100%;
    min-height: 0;
  }

  .separador-horizontal {
    position: relative;
    display: block;
    height: 5px;
    min-height: 5px;
    margin: 0 1px;
    flex: 0 0 5px;
    cursor: row-resize;
    touch-action: none;
    outline: 0;
  }

  .separador-horizontal::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    left: 0;
    height: 1px;
    background: #000;
  }

  .separador-horizontal:hover::before,
  .separador-horizontal:focus-visible::before,
  .separador-horizontal--activo::before {
    top: 1px;
    height: 3px;
    background: #626c00;
  }

  html.separando-horizontal,
  html.separando-horizontal * {
    cursor: row-resize !important;
    user-select: none !important;
  }

  .salida-grupo,
  .salida-modulo,
  .salida-scroll {
    min-height: 0;
  }

  .salida-scroll {
    flex: 1 1 auto;
  }

  .salida-modulo {
    flex: 1 1 auto;
  }

  #resultado {
    height: 100%;
    min-height: calc(var(--alto-control) * 2);
  }
}

@media (min-width: 1100px) {
  .pagina {
    min-height: calc(100vh - 2px);
  }

  .herramienta {
    flex: 1 1 auto;
    grid-template-columns: minmax(320px, var(--ancho-columna-izquierda, 40%)) 5px minmax(640px, 1fr);
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  .separador {
    position: relative;
    display: block;
    min-width: 5px;
    cursor: col-resize;
    touch-action: none;
    outline: 0;
  }

  .separador::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 1px;
    background: #000;
  }

  .separador:hover::before,
  .separador:focus-visible::before,
  .separador--activo::before {
    left: 1px;
    width: 3px;
    background: #626c00;
  }

  html.separando,
  html.separando * {
    cursor: col-resize !important;
    user-select: none !important;
  }

  .columna-trabajo {
    min-height: 0;
  }

  .entrada-modulo {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .campo-marco {
    height: auto;
    min-height: calc(var(--alto-control) * 5);
    flex: 1 1 auto;
  }

  #entrada {
    height: 100%;
  }

  .proceso-modulo {
    flex: 0 0 auto;
  }

  .salida-scroll {
    min-height: 0;
    flex: 1 1 auto;
  }

  .salida-modulo { flex: 1 1 auto; }

  #resultado {
    height: 100%;
    min-height: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}