:root{--azul_oscuro: #1c1c3b;--azul_intermedio: #4a4e68;--azul_claro: #7109aa;--amarillo_alto: #ffff00;--amarillo_medio: #fab700;--naranja_medio: #f45e01;--celeste: #65b5f6;--celeste_dos:#7a9bc8;--rojo_intermedio:#CD0074}*{box-sizing:border-box;padding:0;margin:0}html{font-size:62.5%}body{background:#23272e;font-family:Fira Mono,Consolas,Menlo,monospace}main{width:100%;height:auto;display:flex;flex-direction:column;margin:0 auto}header{width:100%;display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem}header .header__text{color:#61dafb;font-size:2.2rem;letter-spacing:2px;text-align:center}.header__text p{font-size:1.8rem;color:var(--azul_intermedio)}.computer-icon{width:5rem;height:3.5rem;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%2365b5f6'%20viewBox='0%200%20640%20512'%3e%3c!--!Font%20Awesome%20Free%206.7.2%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202025%20Fonticons,%20Inc.--%3e%3cpath%20d='M64%2096c0-35.3%2028.7-64%2064-64l384%200c35.3%200%2064%2028.7%2064%2064l0%20256-64%200%200-256L128%2096l0%20256-64%200L64%2096zM0%20403.2C0%20392.6%208.6%20384%2019.2%20384l601.6%200c10.6%200%2019.2%208.6%2019.2%2019.2c0%2042.4-34.4%2076.8-76.8%2076.8L76.8%20480C34.4%20480%200%20445.6%200%20403.2zM281%20209l-31%2031%2031%2031c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-48-48c-9.4-9.4-9.4-24.6%200-33.9l48-48c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9zM393%20175l48%2048c9.4%209.4%209.4%2024.6%200%2033.9l-48%2048c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l31-31-31-31c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200z'/%3e%3c/svg%3e")}.code-icon{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23ffff00'%20viewBox='0%200%20576%20512'%3e%3c!--!Font%20Awesome%20Free%206.7.2%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202025%20Fonticons,%20Inc.--%3e%3cpath%20d='M9.4%2086.6C-3.1%2074.1-3.1%2053.9%209.4%2041.4s32.8-12.5%2045.3%200l192%20192c12.5%2012.5%2012.5%2032.8%200%2045.3l-192%20192c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3L178.7%20256%209.4%2086.6zM256%20416l288%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-288%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32z'/%3e%3c/svg%3e");width:1rem;height:1rem}.file-icon{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23fab700'%20viewBox='0%200%20384%20512'%3e%3c!--!Font%20Awesome%20Free%206.7.2%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202025%20Fonticons,%20Inc.--%3e%3cpath%20d='M64%200C28.7%200%200%2028.7%200%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-288-128%200c-17.7%200-32-14.3-32-32L224%200%2064%200zM256%200l0%20128%20128%200L256%200zM153%20289l-31%2031%2031%2031c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200L71%20337c-9.4-9.4-9.4-24.6%200-33.9l48-48c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9zM265%20255l48%2048c9.4%209.4%209.4%2024.6%200%2033.9l-48%2048c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l31-31-31-31c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200z'/%3e%3c/svg%3e");width:1.5rem;height:2rem}.icon{display:inline-block;background-position:center;background-repeat:no-repeat;background-size:cover}.editor-container{width:95%;margin:0 auto;min-width:310px;max-width:1100px;margin:1rem auto;background:#282c34;padding:2rem 1.5rem;border-radius:1rem}.editor-box{background:#21252b;border-radius:6px;padding:12px 12px 0;box-shadow:0 2px 8px #0004}.editor-box__text{display:flex;justify-content:flex-start;align-items:center;gap:.5rem}.editor-label{color:#abb2bf;font-size:1.5rem;margin-bottom:6px;font-weight:700}.editor{width:100%;min-height:180px;background:#1e2127;color:#d4d7db;border:none;border-radius:4px;font-size:1.1rem;font-family:inherit;padding:12px;resize:vertical;outline:none;box-shadow:0 1px 4px #0002 inset;transition:box-shadow .2s}.editor:focus{outline:none;border-color:var(--celeste);box-shadow:0 0 0 3px #4a90e233}.editor::placeholder{color:var(--celeste_dos);font-size:14px;letter-spacing:.5px}.editor:focus{box-shadow:0 0 0 2px var(--azul_intermedio)}.controls{margin-top:14px;display:flex;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}.compile-btn{background:linear-gradient(90deg,#61dafb,#21a1f3);color:#23272e;font-weight:700;border:none;border-radius:4px;padding:10px 28px;font-size:1.1rem;cursor:pointer;box-shadow:0 2px 8px #0003;transition:background .2s,color .2s}.compile-btn:hover{background:linear-gradient(90deg,#21a1f3,#61dafb);color:#fff}.file-upload{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.file-upload-label{color:#abb2bf;font-size:1.3rem}#file-upload{background:#23272e;color:#abb2bf;border:none;border-radius:4px;padding:4px 0;font-size:1rem}.output-section{background:#21252b;border-radius:6px;margin-top:1rem;padding:1rem;box-shadow:0 2px 8px #0002}.output-label{color:#61dafb;font-size:1.5rem;margin-bottom:16px;letter-spacing:1px}.output-section h2{color:var(--amarillo_medio);font-size:1.1rem;margin-top:18px;margin-bottom:8px}#output-lexico,#output-sintactico,#output-codigo{background:#1e2127;border-radius:4px;padding:10px 14px;min-height:40px;font-size:1rem;color:#d4d7db;margin-bottom:10px;white-space:pre-wrap;box-shadow:0 1px 4px #0002 inset;display:flex;justify-content:center}#compilation-success{background:#232;color:#98c379;border:1px solid #98c379;border-radius:4px;padding:10px 16px;margin:18px 0 0;font-weight:700;box-shadow:0 1px 4px #0002 inset;display:none}.error-container{background:#2c2323;border:1.5px solid #e06c75;border-radius:6px;margin-top:24px;padding:12px 16px;box-shadow:0 2px 8px #0002;display:none}.error-label{color:#e06c75;font-size:1.1rem;font-weight:700;margin-bottom:6px}.error-box{color:#e06c75;background:#3a2323;border-radius:4px;padding:8px 12px;font-size:1rem;white-space:pre-wrap}.error-active,#compilation-success.active{display:block}.glass-table{width:75%;min-width:280px;border-collapse:separate;border-spacing:0;background:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 4px 30px #0000001a;border:1px solid rgba(255,255,255,.3)}.glass-table th{background:none;color:var(--amarillo_alto);padding:.5rem .8rem;text-align:left;font-weight:500}.glass-table td{padding:.5rem .8rem;border-bottom:1px solid rgba(0,0,0,.05);transition:all .3s ease}.glass-table tr:hover td{background:#0078ff1a;color:#fff}.json-key{color:var(--amarillo_alto)}.json-string{color:var(--celeste)}.json-number{color:var(--azul_claro)}.json-boolean{color:var(--rojo_intermedio)}.json-null{color:#6c757d}