/* Recorridos visuales del editor: dinámico y cuadrícula. No son el editor real. */
.build-section{padding-top:105px;padding-bottom:115px;background:linear-gradient(155deg,#f4f9ff,#f1f9f3)}
.build-heading{max-width:780px;margin:0 auto 42px;text-align:center}
.build-heading h2{font-size:clamp(40px,4.8vw,62px);margin:0 0 18px}
.build-heading h2 span{color:#16875f}
.build-heading p{max-width:650px;margin:0 auto;color:var(--muted);font-size:18px}
.build-demos{--build-card-width:min(84%,900px);display:flex;gap:22px;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--build-card-width))/2);overscroll-behavior-x:contain;padding:12px calc((100% - var(--build-card-width))/2) 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.build-demos::-webkit-scrollbar{display:none}
.build-demo{flex:0 0 var(--build-card-width);min-width:0;padding:20px;border:1px solid #d9e6e5;border-radius:27px;background:#fff;box-shadow:0 22px 42px rgba(30,86,73,.09);scroll-snap-align:center}
.has-js .build-demo.visible:not(.is-active){opacity:.62;transform:scale(.965)}
.has-js .build-demo.visible.is-active{opacity:1;transform:none}
.build-slider-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto}
.build-slider-arrow{width:46px;height:46px;border:1px solid #c9dedd;border-radius:50%;background:#fff;color:#155a4b;font-size:23px;font-weight:800;cursor:pointer;box-shadow:0 5px 15px rgba(22,78,64,.09)}
.build-slider-arrow:hover,.build-slider-arrow:focus-visible{background:#e6f5eb}
.build-slider-dots{display:flex;align-items:center;gap:4px}
.build-slider-dot{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.build-slider-dot::before{content:"";width:11px;height:11px;border-radius:50%;background:#b7cec6;transition:width .25s,background .25s}
.build-slider-dot.is-active::before{width:27px;border-radius:999px;background:#16875f}
.build-slider-hint{margin:8px auto 0!important;text-align:center;color:#55726a;font-size:13px!important}
.build-demo-copy{min-height:0}
.build-demo h3{font-size:24px;letter-spacing:-.04em;margin:0 0 8px}
.build-demo p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
.build-demo .board-demo-header{margin:14px 0 11px}
.build-screen{height:520px;position:relative;overflow:hidden;border:7px solid #263940;border-radius:17px;background:#f8fafc;color:#172033;font-family:Arial,Helvetica,sans-serif}
.build-setup-panel{width:min(89%,450px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:17px;border-radius:18px;background:#fff;box-shadow:0 15px 38px rgba(15,23,42,.18);animation:build-setup-arrive .35s both}
.build-setup-panel h4,.build-modal h4{margin:0 0 5px;font-size:17px;text-align:center;color:#1e293b}
.build-setup-panel p{font-size:10px;text-align:center;margin:0 0 13px}
.build-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.build-mode-option{min-height:90px;padding:11px;border:2px solid #cbd5e1;border-radius:12px;background:#f8fafc;color:#1d4ed8;font-size:14px;font-weight:900}
.build-mode-option small{display:block;margin-top:5px;color:#475569;font-size:9px;font-weight:600;line-height:1.3}
.build-mode-dynamic{border-color:#4f6ef7;background:#eff6ff}
.build-mode-grid{border-color:#0ea5e9;background:#f0f9ff;color:#0369a1}
.build-mode-option.is-current{box-shadow:0 0 0 4px rgba(79,110,247,.25);transform:scale(1.025)}
.build-dimensions{margin-top:12px;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}
.build-dimensions strong{display:block;font-size:11px}
.build-dimension-values{display:flex;gap:8px;margin:8px 0}
.build-dimension-values span{flex:1;padding:7px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;font-size:11px;font-weight:800}
.build-action{display:block;padding:8px 10px;border-radius:8px;color:#fff;text-align:center;font-size:11px;font-weight:900}
.build-action-green{background:#22c55e}.build-action-blue{background:#4f6ef7}
.build-editor{position:absolute;inset:0;display:flex;background:#f8fafc}
.build-editor-sidebar{z-index:1;width:120px;flex:0 0 120px;display:flex;flex-direction:column;gap:4px;padding:7px 5px;background:#fff;border-right:1px solid #e2e8f0;overflow:hidden}
.build-editor-title{padding-bottom:5px;border-bottom:1px solid #e2e8f0;color:#64748b;font-size:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.build-editor-button{min-height:24px;flex:0 0 auto;padding:4px 5px;border:1px solid transparent;border-radius:7px;background:#eef2ff;color:#1d4ed8;display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;font-weight:850;white-space:nowrap}
.build-editor-settings{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.build-editor-cat-settings{border-color:#4f6ef7;background:#fff;color:#4f6ef7}
.build-editor-picto{background:#4f6ef7;color:#fff}
.build-editor-category{background:#f59e0b;color:#fff}
.build-editor-spacer{border-color:#64748b;background:#fff;color:#64748b}
.build-editor-keyboard{background:#eff6ff;border-color:#2563eb}
.build-editor-url{background:#ecfeff;border-color:#0891b2;color:#0e7490}
.build-editor-formats{background:#fff;border-color:#8b5cf6;color:#8b5cf6}
.build-editor-select{background:#fff;border-color:#93c5fd;color:#2563eb}
.build-editor-delete{background:#fff;border-color:#ef4444;color:#dc2626}
.build-editor-reset{background:#fff;border-color:#fecaca;color:#ef4444}
.build-editor-save{background:#22c55e;color:#fff}
.build-editor-cancel{background:#f8fafc;border-color:#e2e8f0;color:#64748b}
.build-editor-button.is-current{box-shadow:0 0 0 3px rgba(79,110,247,.25),0 0 12px rgba(79,110,247,.25);transform:scale(1.03)}
.build-sidebar-spacer{flex:1;min-height:2px}
.build-editor-dimension{min-height:41px;flex:0 0 auto;padding:4px 5px;border:1.5px solid #8b5cf6;border-radius:8px;background:#f8fafc;color:#7c3aed}
.build-editor-dimension strong{display:block;margin-bottom:3px;text-align:center;font-size:8px;letter-spacing:.08em}
.build-editor-dimension-values{display:flex;align-items:center;justify-content:space-between;gap:3px}
.build-editor-dimension-values span{flex:1;min-width:0;padding:1px;border:1px solid #cbd5e1;border-radius:4px;background:#fff;text-align:center;font-size:11px;font-weight:900}
.build-editor-dimension-values b{min-width:13px;text-align:center;font-size:10px;color:#1e293b}
.build-editor-rows{border-color:#0ea5e9;color:#0284c7}
.build-editor-canvas{flex:1;min-width:0;overflow:hidden}
.build-board-grid{height:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:6px;background:#f8fafc}
.build-dynamic-grid{grid-template-rows:repeat(7,minmax(0,1fr))}
.build-fixed-grid{grid-template-rows:repeat(6,minmax(0,1fr))}
.build-board-grid .tb-card{min-width:0;min-height:0;border-width:1.5px;border-radius:4px}
.build-board-grid .tb-card-label{font-size:clamp(4px,.48vw,7px)}
.build-board-grid .tb-card-art img{padding:1px 2px}
.build-board-grid .tb-folder{border:0;border-radius:0}
.build-board-grid .tb-folder .tb-card-body{border-width:1.5px}
.build-empty-cell{min-width:0;min-height:0;display:grid;place-items:center;border:1.5px dashed #bdcbd9;border-radius:6px;background:#fff;color:#9aa9b8;font-size:18px;font-weight:500}
.build-empty-cell.is-target{border-color:#4f6ef7;background:#e9efff;color:#3155db;box-shadow:0 0 0 3px rgba(79,110,247,.18);animation:build-target 1s ease-in-out infinite}
.build-empty-hint{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:#94a3b8;font-size:16px;font-weight:800;text-align:center}
.build-overlay{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding:14px;background:rgba(15,23,42,.56);backdrop-filter:blur(2px)}
.build-modal{width:min(92%,440px);max-height:96%;overflow:hidden;padding:13px;border-radius:14px;background:#fff;box-shadow:0 15px 36px rgba(0,0,0,.27);animation:build-arrive .35s both}
.build-tabs{margin:10px -13px;padding:8px 12px;background:#eef2ff;color:#1d4ed8;font-size:10px;font-weight:800;text-align:center}
.build-field-label{display:block;margin-bottom:6px;color:#64748b;font-size:9px;font-weight:800}
.build-word-list{max-height:100px;overflow:hidden;padding:8px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#334155;font-size:9px;line-height:1.4}
.build-multiple-modal .build-action{margin-top:9px}
.build-result-count{display:block;margin:8px 0 5px;color:#166534;font-size:10px}
.build-result-previews{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,35px);gap:3px;overflow:hidden}
.build-result-previews .tb-card{min-width:0;min-height:0;border-width:1px;border-radius:3px}
.build-result-previews .tb-card-label{font-size:5px}
.build-result-previews .tb-card-art img{padding:0}
.build-space-modal{max-width:420px}
.build-modal-note{margin:3px 0 12px!important;color:#64748b!important;text-align:center;font-size:11px!important;line-height:1.35!important}
.build-space-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.build-space-choice{min-height:70px;padding:10px 4px;border-radius:11px;background:#4f6ef7;color:#fff;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:850}
.build-choice-category{background:#f59e0b}
.build-choice-keyboard{background:#2563eb}
.build-choice-url{background:#0891b2}
.build-space-choice.is-current{box-shadow:0 0 0 3px #4f6ef7,0 0 14px rgba(79,110,247,.35);transform:scale(1.04)}
.build-modal-cancel{display:block;margin-top:9px;padding:8px;border:1px solid #dce4ed;border-radius:8px;background:#f8fafc;color:#64748b;text-align:center;font-size:11px;font-weight:800}
.build-single-modal{max-width:380px;display:flex;flex-direction:column;align-items:center;gap:8px}
.build-single-input-row{display:flex;width:100%;gap:6px}
.build-single-value{flex:1;min-width:0;padding:9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;font-size:12px;font-weight:700}
.build-single-mic{width:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid #4f6ef7;border-radius:7px;background:#eef2ff;color:#3155db;font-size:19px}
.build-single-hint{color:#64748b;font-size:10px;text-align:center}
.build-single-modal>.tb-card{width:95px;height:95px;flex:0 0 95px}
.build-single-modal .tb-card-label{font-size:9px}
.build-single-modal .build-action{width:100%}
.build-saved{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);padding:15px 22px;border-radius:13px;background:#22c55e;color:#fff;font-size:18px;font-weight:900;white-space:nowrap;box-shadow:0 12px 32px rgba(16,129,68,.4);animation:build-saved .45s both}
@keyframes build-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes build-setup-arrive{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes build-target{50%{box-shadow:0 0 0 6px rgba(79,110,247,.14)}}
@keyframes build-saved{from{opacity:0;transform:translate(-50%,-45%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:1000px){.build-demos{--build-card-width:88%}}
@media(max-width:520px){.build-section{padding-top:75px;padding-bottom:80px}.build-heading{margin-bottom:26px}.build-heading h2{font-size:clamp(38px,10vw,50px)}.build-heading p{font-size:16px}.build-demo{padding:10px}.build-demo h3{font-size:21px}.build-demo .board-demo-header{flex-wrap:wrap}.build-screen{height:390px;border-width:5px}.build-editor-sidebar{width:78px;flex-basis:78px;gap:2px;padding:4px 3px}.build-editor-title{font-size:6px;padding-bottom:3px}.build-editor-button{min-height:17px;padding:2px;font-size:6px;border-radius:4px}.build-editor-dimension{min-height:31px;padding:2px 3px;border-radius:5px}.build-editor-dimension strong{font-size:6px;margin-bottom:1px}.build-editor-dimension-values span{font-size:8px;padding:0}.build-editor-dimension-values b{font-size:8px}.build-board-grid{gap:2px;padding:3px}.build-board-grid .tb-card{border-width:1px}.build-board-grid .tb-card-label{font-size:4px}.build-board-grid .tb-folder .tb-card-body{border-width:1px}.build-setup-panel{padding:10px}.build-mode-option{padding:7px;min-height:77px;font-size:11px}.build-mode-option small{font-size:7px}.build-modal{padding:9px}.build-tabs{margin:8px -9px;font-size:8px}.build-word-list{max-height:82px;font-size:7px}.build-result-previews{grid-template-rows:repeat(2,27px)}.build-result-previews .tb-card-label{font-size:4px}.build-space-choice{font-size:8px;min-height:48px}.build-modal-note{font-size:8px!important}.build-single-hint{font-size:8px}.build-saved{font-size:14px}}
@media(max-width:520px){.build-demos{--build-card-width:90%;gap:12px;padding-bottom:22px}.build-slider-hint{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.build-setup-panel,.build-editor,.build-modal,.build-saved,.build-empty-cell.is-target{animation:none!important}}
@media(prefers-reduced-motion:reduce){.build-demos{scroll-behavior:auto}.build-demo{transition:none!important}.build-slider-dot::before{transition:none!important}}

/* Instalación: el primer uso con conexión deja preparado el tablero para uso local. */
.offline-section{padding-top:100px;padding-bottom:105px;background:#fff}
.offline-heading{max-width:820px;margin:0 auto 42px;text-align:center}
.offline-heading h2{font-size:clamp(38px,4.5vw,60px);margin:0 0 16px}
.offline-heading h2 span{color:#16875f}
.offline-heading p{max-width:690px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.55}
.offline-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1140px;margin:0 auto}
.offline-step{position:relative;min-height:282px;padding:27px 27px 25px;border:1px solid #d8e9e2;border-radius:23px;background:linear-gradient(145deg,#f9fcfb,#eff8f4);box-shadow:0 12px 26px rgba(32,83,68,.06)}
.offline-step-ready{background:linear-gradient(145deg,#edf8ff,#eaf7f0);border-color:#cae7db}
.offline-step-number{display:block;color:#16875f;font-size:13px;font-weight:900;letter-spacing:.12em}
.offline-step-icon{position:absolute;right:24px;top:19px;width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:#dff4e9;color:#136c52;font-size:26px;font-weight:800}
.offline-step h3{font-size:24px;margin:29px 0 11px;color:#153c34}
.offline-step p{font-size:15px;line-height:1.58;color:#35534b;margin:0}
.offline-step p a{color:#146b58;font-weight:800;text-underline-offset:3px}
.offline-help{display:inline-block;margin-top:16px;color:#116c59;font-size:13px;font-weight:800;text-underline-offset:3px}
.offline-step a:focus-visible{outline:3px solid #195cd1;outline-offset:4px;border-radius:3px}
.offline-note{max-width:1140px;margin:23px auto 0;padding:17px 20px;border-left:4px solid #16875f;border-radius:0 11px 11px 0;background:#f2f8f5;color:#35534b;font-size:14px;line-height:1.5}
@media(max-width:850px){.offline-steps{grid-template-columns:1fr 1fr}.offline-step-ready{grid-column:1/-1;min-height:0}}
@media(max-width:590px){.offline-section{padding-top:75px;padding-bottom:80px}.offline-heading{margin-bottom:28px}.offline-heading p{font-size:16px}.offline-steps{grid-template-columns:1fr;gap:13px}.offline-step,.offline-step-ready{grid-column:auto;min-height:0;padding:23px}.offline-step h3{margin-top:20px}.offline-note{font-size:13px}}