:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f6f7fb;background-color:#050816;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh;margin:0}#root{min-height:100vh}.app-container{flex-direction:column;min-height:100vh;display:flex}@media (max-width:900px){:root{font-size:15.5px}}@media (max-width:640px){:root{font-size:16px}body{overflow-x:hidden}}@media (max-width:380px){:root{font-size:15px}}.app-header{background:radial-gradient(circle at 0 0,#1d2340,#050816 60%);border-bottom:1px solid #23263a;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.header-info h1{margin:0;font-size:1.6rem}.header-subtitle{color:#a4b1d8;margin:.2rem 0 0;font-size:.9rem}.nav-links{gap:1rem;display:flex}.nav-links a{color:#c9d3ff;border:1px solid #0000;border-radius:9px;padding:.3rem .5rem;font-size:1rem;text-decoration:none}.nav-links a:hover{background-color:#10152b;border-color:#3c4fe0}.menu-toggle{cursor:pointer;z-index:1001;background:0 0;border:none;flex-direction:column;justify-content:space-between;width:30px;height:24px;padding:0;display:none}.menu-toggle span{background:#c9d3ff;border-radius:3px;width:100%;height:3px;transition:all .3s}.menu-toggle.active span:first-child{transform:translateY(10.5px)rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:translateY(-10.5px)rotate(-45deg)}.header-title-line1,.header-title-line2{display:inline}@media (max-width:900px){.app-header{padding:1rem 1.5rem}.header-info h1{font-size:1.4rem}.header-subtitle{font-size:.85rem}.nav-links{gap:.7rem}.nav-links a{padding:.25rem .4rem;font-size:.9rem}}@media (max-width:640px){.app-header{flex-wrap:wrap;padding:1rem;position:relative}.header-info{flex:1;min-width:calc(100% - 50px)}.header-info h1{font-size:1.1rem;line-height:1.4}.header-title-line1{display:block}.header-title-line2{margin-top:.1rem;font-size:.95em;display:block}.header-subtitle{margin-top:.3rem;font-size:.85rem}.menu-toggle{display:flex;position:absolute;top:1rem;right:1rem}.nav-links{z-index:1000;background:#070b18;border-left:1px solid #23263a;flex-direction:column;gap:.5rem;width:70%;max-width:280px;height:100vh;padding:5rem 1.5rem 2rem;transition:right .3s;position:fixed;top:0;right:-100%;box-shadow:-4px 0 20px #00000080}.nav-links.nav-open{right:0}.nav-links a{text-align:left;border:1px solid #0000;border-radius:.5rem;width:100%;padding:.7rem 1rem;font-size:1rem}.nav-links a:hover{background:#0b1021}}@media (max-width:380px){.header-info h1{font-size:1rem}.header-title-line2{font-size:.9em}.header-subtitle{font-size:.8rem}.nav-links{width:80%;max-width:100%}}.btn-primary,.btn-secondary,.btn-ghost{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;padding:.6rem 1.1rem;font-size:.95rem;font-weight:500;text-decoration:none;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#3c4fe0,#8c4dff)}.btn-primary:hover{filter:brightness(1.1)}.btn-secondary{color:#e1e6ff;background:linear-gradient(135deg,#3c4fe0,#8c4dff);border:1px solid #3c4fe0}.btn-secondary:hover{filter:brightness(1.1)}.btn-ghost{color:#c7cee9;background:0 0;border:1px dashed #3c4fe0}.btn-ghost:hover{background:#10152b}.small{padding:.4rem .8rem;font-size:.85rem}.btn-row{flex-wrap:nowrap;align-items:center;gap:.5rem;display:flex}.speed-active{background:#10152b;border-color:#3c4fe0}@media (max-width:640px){.btn-primary,.btn-secondary,.btn-ghost{padding:.7rem 1.1rem;font-size:.95rem;font-weight:600}.small{padding:.55rem .8rem;font-size:.85rem}.btn-row{flex-wrap:wrap;gap:.5rem}.accordion-content>.btn-primary,.accordion-content>.btn-secondary{width:100%}.accordion-content .btn-row{flex-wrap:nowrap;gap:.5rem;display:flex}.accordion-content .btn-row .btn-primary{flex:1}.accordion-content .btn-row .btn-ghost.small{flex:none;width:auto;padding:.7rem}.accordion-content .btn-row .btn-ghost.small:only-of-type{flex:1}.accordion-content .btn-row:has(.btn-ghost.small:nth-child(3)) .btn-ghost.small{flex:1}}@media (max-width:380px){.btn-primary,.btn-secondary,.btn-ghost{padding:.45rem .8rem;font-size:.85rem}.small{padding:.3rem .6rem;font-size:.75rem}}.panel-container{background:#070b18;border:1px solid #191d30;border-radius:1rem;padding:1rem 1.2rem;box-shadow:0 14px 26px #00000059}.panel-title{margin-top:0;margin-bottom:.8rem}.simulation-container{grid-template-columns:minmax(220px,260px) 2fr .8fr;align-items:start;gap:1rem;display:grid}.panel-controles{flex-direction:column;gap:.8rem;max-height:fit-content;display:flex}.panel-log{flex-direction:column;height:420px;min-height:420px;max-height:420px;display:flex;overflow:hidden}.simulation-canvas{height:420px;min-height:420px;max-height:420px;overflow:hidden}.canvas-area{box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;max-width:100%;height:100%;position:relative;overflow:hidden auto}.canvas-area::-webkit-scrollbar{width:6px}.canvas-area::-webkit-scrollbar-track{background:#191d304d;border-radius:10px}.canvas-area::-webkit-scrollbar-thumb{background:#646e9680;border-radius:10px}.canvas-area::-webkit-scrollbar-thumb:hover{background:#646e96b3}.canvas-placeholder{text-align:center;color:#aab3da;border:1px dashed #2b3152;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;height:100%;min-height:260px;padding:.8rem;display:flex}.instructions-box{background:linear-gradient(135deg,#1a1f3a 0%,#0f1428 100%);border:2px solid #3c4fe0;border-radius:.8rem;margin-top:0;margin-bottom:.2rem;padding:0;overflow:hidden;box-shadow:0 0 20px #3c4fe04d}.instructions-header{cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;padding:1rem 1.2rem;transition:background .2s;display:flex}.instructions-header:hover{background:#3c4fe01a}.instructions-title{color:#8c4dff;align-items:center;gap:.4rem;font-size:1rem;font-weight:700;display:flex}.toggle-icon{color:#3c4fe0;font-size:.8rem;transition:transform .3s}.toggle-icon.open{transform:rotate(180deg)}.instructions-list{flex-direction:column;gap:.6rem;margin:0;padding:0 1.2rem 1rem;list-style:none;animation:.3s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.instructions-list li{color:#d4dbff;padding-left:1.2rem;font-size:.9rem;line-height:1.5;position:relative}.instructions-list li:before{content:"▸";color:#3c4fe0;font-weight:700;position:absolute;left:0}.instructions-list li strong{color:#c9d3ff;font-weight:600}@media (max-width:1100px){.simulation-container{grid-template-columns:minmax(200px,240px) 1.5fr .9fr;gap:.8rem}.panel-container{padding:.9rem 1rem}}@media (max-width:900px){.simulation-container{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:1rem}.panel-controles{order:1}.simulation-canvas{order:2;min-height:300px}.panel-log{order:3;max-height:300px}}@media (max-width:640px){.simulation-container{gap:.8rem;max-width:100vw;padding:0;overflow-x:hidden}.panel-container{box-sizing:border-box;border-radius:.6rem;width:100%;padding:.8rem}.panel-title{margin-bottom:.8rem;font-size:1.25rem}.simulation-canvas{box-sizing:border-box;width:100%;height:480px;min-height:480px;max-height:480px}.panel-log{max-height:300px}.canvas-placeholder{min-height:220px;padding:1rem}.canvas-placeholder p{font-size:1rem}.instructions-box{margin-top:.8rem}.instructions-header{padding:1.1rem}.instructions-title{font-size:1rem}.instructions-list{gap:.8rem;padding:0 1.1rem 1.1rem}.instructions-list li{padding-left:1.3rem;font-size:.95rem;line-height:1.6}.instructions-box{margin-bottom:.3rem}}@media (max-width:380px){.panel-container{padding:.7rem}.simulation-canvas{min-height:240px}.panel-log{max-height:220px}}.field{flex-direction:column;gap:.25rem;font-size:.9rem;display:flex}.field span{color:#c7cee9}.field input,.field select{color:#f6f7fb;background:#050816;border:1px solid #262b43;border-radius:.6rem;padding:.35rem .5rem;font-size:1rem}.field input:focus,.field select:focus{border-color:#3c4fe0;outline:none}@media (max-width:640px){.field{gap:.3rem;font-size:.95rem}.field span{font-size:.95rem;font-weight:600}.field input,.field select{border-radius:.7rem;padding:.6rem .7rem;font-size:1rem}}.field-row{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.field-inline{flex-direction:column;gap:.25rem;display:flex}.field-inline span{white-space:nowrap;font-size:.85rem}.field-inline input,.field-inline select{width:100%;min-width:0}.control-accordion{display:block}.accordion-header{display:none}.accordion-content{flex-direction:column;gap:.8rem;display:flex}.accordion-content.is-closed,.accordion-content.is-open{display:flex}@media (max-width:640px){.field-row{grid-template-columns:1fr 1fr;gap:1.7rem;display:grid}.control-accordion{background:linear-gradient(135deg,#15192e 0%,#0a0d1c 100%);border:1.5px solid #262b47;border-radius:.8rem;margin-bottom:.5rem;overflow:hidden}.accordion-header{cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;padding:1rem 1.2rem;transition:background .2s;display:flex}.accordion-header:hover{background:#3c4fe014}.accordion-title{color:#7c8cff;flex:1;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;display:flex}.accordion-summary{color:#8a92b8;margin-left:.5rem;font-size:.85rem;font-weight:400}.accordion-content{flex-direction:column;gap:.8rem;padding:0 1.2rem 1.2rem;display:flex}.accordion-content.is-closed{display:none}.accordion-content.is-open{animation:.3s accordionSlide;display:flex}@keyframes accordionSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}}@media (max-width:380px){.field input,.field select{padding:.35rem .45rem;font-size:.9rem}.accordion-header{padding:.9rem 1rem}.accordion-content{padding:0 1rem 1rem}.accordion-title{font-size:.95rem}.accordion-summary{font-size:.8rem}}.main-container{flex:1;padding:1.5rem 2rem 2rem}.home-container{max-width:960px;margin:0 auto}.home-description{color:#c7cee9;margin-bottom:1.5rem}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.card-opcion{background:#0b1021;border:1px solid #1f2337;border-radius:1rem;padding:1.5rem;box-shadow:0 18px 30px #00000059}.card-opcion h2{margin-top:0;margin-bottom:.5rem}.card-opcion p{color:#d4dbff;margin-top:0;margin-bottom:.8rem}.card-list{color:#b2b8dc;margin:0 0 1.2rem;padding-left:1.1rem;font-size:1rem}.card-label{color:#c7cee9;font-weight:600}@media (max-width:900px){.main-container{padding:1.2rem 1.5rem 1.5rem}.home-container{max-width:100%}.cards-grid{grid-template-columns:1fr;gap:1.2rem}}@media (max-width:640px){.main-container{box-sizing:border-box;max-width:100vw;padding:.8rem;overflow-x:hidden}.home-container{text-align:center}.home-description{text-align:center;margin-bottom:1.2rem;font-size:1rem;line-height:1.4}.cards-grid{gap:1.5rem}.card-opcion{text-align:left;padding:1rem}.card-opcion h2{font-size:1.4rem}.card-opcion p{font-size:1.1rem;line-height:1.4}.card-list{font-size:1rem;line-height:1.6}.card-list li{margin-bottom:.3rem}}@media (max-width:380px){.home-description{font-size:1rem}.card-opcion{padding:1.1rem}.card-opcion h2{font-size:1.3rem}.card-opcion p{font-size:.95rem}.card-list{font-size:.9rem}}.canvas-area{background:radial-gradient(circle at top,#0b1021,#050816 65%);border:1px dashed #2b3152;border-radius:.8rem;min-height:260px;padding:.5rem;position:relative;overflow:hidden}.canvas-nodes{width:100%;height:100%;min-height:220px;position:relative}@media (max-width:900px){.canvas-area{min-height:280px}.canvas-nodes{min-height:240px}}@media (max-width:640px){.canvas-area{min-height:320px;padding:.6rem}.canvas-nodes{min-height:220px}}@media (max-width:380px){.canvas-area{min-height:220px}.canvas-nodes{min-height:180px}}.node{box-sizing:border-box;background:#0b1021;border:2px solid #2f3560;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;width:56px;height:56px;padding:8px 4px 4px;font-size:.8rem;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,opacity .18s;display:flex;position:absolute;box-shadow:0 0 12px #3c4fe059}.node-icon-row{justify-content:center;align-items:center;height:14px;display:flex;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.node-icon{font-size:1rem}.node-label{font-weight:600}.node-sub{color:#9aa3d5;font-size:.68rem}.node-leader{border-color:#8c4dff;position:relative;box-shadow:0 0 18px #8c4dffb3,0 0 32px #3c4fe099}.node-leader:before{content:"";border-radius:inherit;opacity:.8;pointer-events:none;border:1px solid #8c4dff80;position:absolute;inset:-6px;box-shadow:0 0 25px #8c4dffb3}.node-leader-new{animation:.6s ease-out leader-pop}@keyframes leader-pop{0%{box-shadow:0 0 4px #8c4dff4d}40%{box-shadow:0 0 26px #ffffffe6}to{box-shadow:0 0 18px #8c4dffb3,0 0 32px #3c4fe099}}.node-failed{opacity:.4;box-shadow:none;border-style:dashed}.node-initiator{border-color:#e1b12c;box-shadow:0 0 12px #e1b12cb3}.node-highlighted{box-shadow:0 0 16px #3c4fe0cc}@media (max-width:900px){.node{width:52px;height:52px;font-size:.75rem}.node-icon{font-size:.95rem}.node-sub{font-size:.65rem}}@media (max-width:640px){.node{width:48px;height:48px;padding:6px 3px 3px;font-size:.72rem}.node-icon-row{top:-7px}.node-icon{font-size:1rem}.node-label{font-size:.75rem}.node-sub{font-size:.6rem}}@media (max-width:380px){.node{width:44px;height:44px;font-size:.7rem}.node-icon{font-size:.85rem}.node-label{font-size:.72rem}.node-sub{font-size:.58rem}}.clock-grid{grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:100%;padding:.5rem;display:grid}.clock-node{background:linear-gradient(135deg,#0a0f1e 0%,#050816 100%);border:2px solid #191d30;border-radius:.8rem;padding:.7rem .8rem;transition:all .3s;position:relative;box-shadow:0 10px 18px #00000059}.clock-node.clock-server{background:linear-gradient(135deg,#1a1040 0%,#0a0520 100%);border-color:#8c4dff;box-shadow:0 0 20px #8c4dff66}.clock-node.clock-coordinator{background:linear-gradient(135deg,#0f1a3a 0%,#050f28 100%);border-color:#3c4fe0;box-shadow:0 0 20px #3c4fe066}.clock-title{justify-content:space-between;align-items:center;margin-bottom:.3rem;font-size:.8rem;font-weight:700;display:flex}.clock-role-badge{text-transform:uppercase;border-radius:999px;padding:.1rem .35rem;font-size:.6rem;font-weight:600}.clock-role-badge.server{color:#b794f6;background:#8c4dff33;border:1px solid #8c4dff}.clock-role-badge.coordinator{color:#7c8cff;background:#3c4fe033;border:1px solid #3c4fe0}.clock-role-badge.client{color:#9aa3d5;background:#6478b426;border:1px solid #3a4563}.clock-display{background:#000;border:1px solid #1a1d2e;border-radius:.5rem;margin:.4rem 0;padding:.5rem .7rem;box-shadow:inset 0 2px 8px #0009}.clock-time{letter-spacing:.08em;text-align:center;text-shadow:0 0 10px;margin:0;font-family:Share Tech Mono,JetBrains Mono,ui-monospace,monospace;font-size:1.1rem;font-weight:700;transition:color .3s}.clock-node.synced .clock-time{color:#0f8;text-shadow:0 0 15px #0f8,0 0 25px #0f84}.clock-node.desynced .clock-time{color:#f44;text-shadow:0 0 15px #f44,0 0 25px #f444}.clock-node.partial .clock-time{color:#fa0;text-shadow:0 0 15px #fa0,0 0 25px #fa04}.clock-info{flex-direction:column;gap:.2rem;margin-top:.3rem;font-size:.7rem;display:flex}.clock-offset{color:#9aa3d5;justify-content:space-between;font-size:.7rem;display:flex}.clock-rtt{color:#7c8cff;font-size:.65rem;font-style:italic}.clock-status{text-align:center;border-radius:.3rem;margin-top:.2rem;padding:.15rem .3rem;font-size:.65rem;font-weight:600}.clock-status.synced{color:#0f8;background:#00ff881a}.clock-status.desynced{color:#f44;background:#ff44441a}.clock-status.partial{color:#fa0;background:#ffaa001a}.clock-highlight{border-color:#3c4fe0;transform:scale(1.02);box-shadow:0 0 20px #3c4fe0e6}.clock-failed{opacity:.3;filter:grayscale();border-style:dashed}@media (max-width:640px){.clock-grid{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:.4rem;width:100%;padding:.3rem}.clock-node{box-sizing:border-box;padding:.4rem .5rem}.clock-title{margin-bottom:.25rem;font-size:.7rem}.clock-role-badge{padding:.05rem .25rem;font-size:.55rem}.clock-display{border-radius:.4rem;margin:.3rem 0;padding:.4rem .5rem}.clock-time{font-size:.95rem}.clock-info{gap:.3rem}.clock-offset,.clock-rtt{font-size:.6rem}.clock-status{margin-top:.3rem;padding:.15rem .35rem;font-size:.6rem}}.message-overlay{color:#c7cee9;z-index:10;background:#050816f2;border:1px solid #3c4fe0;border-radius:999px;width:fit-content;margin-bottom:.5rem;padding:.35rem .8rem;font-size:.85rem;font-weight:600;position:sticky;top:0;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000080}.message-line{transform-origin:50%;opacity:.95;pointer-events:none;z-index:2;background:linear-gradient(90deg,#3c4fe0,#8c4dff);border-radius:999px;height:2px;position:absolute;box-shadow:0 0 10px #3c4fe099}.message-line:after{content:"";border:6px solid #0000;border-left:10px solid #8c4dff;border-right-width:0;position:absolute;top:50%;right:0;transform:translateY(-50%)}.message-line-ok{background:linear-gradient(90deg,#1aa34a,#4fd16c);box-shadow:0 0 10px #1aa34ab3}.message-line-ok:after{border-color:#0000 #0000 #0000 #4fd16c}.message-line-ring2{background:linear-gradient(90deg,#8c4dff,#c07dff);box-shadow:0 0 10px #8c4dffb3}.message-line-ring2:after{border-color:#0000 #0000 #0000 #c07dff}.message-dot{background:#f6f7fb;border-radius:999px;width:8px;height:8px;animation:.9s linear infinite message-dot-move;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 0 8px #f6f7fbcc}@keyframes message-dot-move{0%{left:0%}to{left:100%}}.message-payload{color:#c7cee9;pointer-events:none;white-space:nowrap;background:#050816eb;border:1px solid #3c4fe0;border-radius:999px;padding:.2rem .5rem;font-size:.7rem;position:absolute}@media (max-width:900px){.message-overlay{padding:.2rem .5rem;font-size:.7rem}.message-payload{padding:.15rem .4rem;font-size:.65rem}}@media (max-width:640px){.message-overlay{padding:.25rem .5rem;font-size:.75rem;top:4px}.message-line{height:1.5px}.message-line:after{border-width:5px 0 5px 8px}.message-dot{width:6px;height:6px}.message-payload{padding:.2rem .4rem;font-size:.7rem}}@media (max-width:380px){.message-overlay{padding:.15rem .4rem;font-size:.6rem}.message-payload{padding:.12rem .3rem;font-size:.55rem}}.log-list{background:#050816;border:1px solid #191d30;border-radius:.6rem;margin-top:.5rem;padding:.4rem .3rem;font-size:.8rem;overflow-y:auto}.log-item{padding:.2rem .3rem}.info-hint{color:#9aa3d5;font-size:.8rem}@media (max-width:640px){.log-list{padding:.5rem .4rem;font-size:.85rem}.log-item{padding:.25rem .35rem;line-height:1.4}.info-hint{font-size:.85rem}}@media (max-width:380px){.log-list,.info-hint{font-size:.7rem}}.control-help{color:#9aa3d5;margin-top:.2rem;font-size:.75rem;font-style:italic}.status-badge{color:#8c4dff;background:#3c4fe033;border:1px solid #3c4fe0;border-radius:999px;padding:.2rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}@media (max-width:640px){.control-help{font-size:.8rem;line-height:1.4}.status-badge{margin-bottom:.5rem;padding:.3rem .7rem;font-size:.85rem}}