:root{--crema: #f4ead5;--crema-2: #ece0c6;--tinta: #2a241a;--verde: #2a7f7a;--mostaza: #d8a531;--terracota: #c4622d;--gris: #b9ac90;--sombra: rgba(42, 36, 26, .18);--radio: 14px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--crema);color:var(--tinta);font-family:system-ui,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}button{font:inherit;cursor:pointer;border:none;border-radius:10px}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--crema);z-index:50}.login-card{display:flex;flex-direction:column;gap:12px;width:min(90vw,340px);padding:32px;background:#fff;border-radius:var(--radio);box-shadow:0 10px 40px var(--sombra);text-align:center}.login-card h1{margin:0;color:var(--verde);font-size:1.8rem}.login-card .tagline{margin:0 0 8px;color:var(--terracota);font-style:italic}.login-card input,.bb-vol input{font:inherit}.login-card input{padding:12px;border:2px solid var(--crema-2);border-radius:10px}.login-card button{padding:12px;background:var(--verde);color:#fff;font-weight:600}.error{color:var(--terracota);margin:0;font-size:.9rem}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--verde);color:var(--crema)}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:40px;height:40px;border-radius:50%;background:var(--crema);flex:0 0 auto}.brand strong{font-size:1.2rem}.brand span{opacity:.85;margin-left:4px}.topbar-actions{display:flex;gap:8px}.topbar-actions .ghost{background:#ffffff26;color:#fff;padding:8px 12px}.panic{background:var(--terracota);color:#fff;font-weight:700;padding:8px 16px}.grid{display:flex;flex-direction:column;gap:clamp(3px,.8vw,10px);padding:clamp(4px,1.2vw,16px)}.grid-row{display:flex;gap:clamp(3px,.8vw,10px);justify-content:center}.pad{position:relative;flex:1 1 0;min-width:0;aspect-ratio:1.6 / 1;padding:clamp(3px,.6vw,8px);display:block;text-align:left;background:#fff;border:clamp(2px,.3vw,3px) solid transparent;border-radius:clamp(6px,1vw,14px);box-shadow:0 2px 8px var(--sombra);color:var(--tinta);transition:transform .05s,box-shadow .1s;overflow:hidden}.pad-space{flex:1 1 100%;aspect-ratio:auto;height:clamp(26px,6vh,64px);min-height:0}.pad:active{transform:scale(.97)}.pad.empty{background:#fff;border-style:dashed;border-color:var(--crema-2);color:var(--gris)}.pad-key{display:inline-block;vertical-align:middle;margin-right:4px;font-size:clamp(.4rem,1.2vw,.7rem);font-weight:700;text-transform:uppercase;border:1px solid currentColor;border-radius:4px;padding:0 clamp(1px,.4vw,4px);line-height:1.25;opacity:.65}.pad-name{display:inline;vertical-align:middle;font-size:clamp(.46rem,1.25vw,.85rem);font-weight:600;line-height:1.15;word-break:break-word}.pad-add{display:inline;font-size:clamp(.5rem,1.3vw,.85rem)}.pad-icons{position:absolute;bottom:2px;right:3px;display:flex;gap:3px;font-size:clamp(.55rem,1.2vw,.95rem)}.pad-icons .ic{color:var(--verde)}.pad.selected{border-color:var(--mostaza)}.pad.dragover{border-style:solid;border-color:var(--verde);background:#d4e8e6;transform:scale(1.03)}.pad.playing{box-shadow:0 0 0 3px var(--terracota),0 0 18px var(--terracota)}.pad.loading:after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;border:2px solid var(--gris);border-top-color:var(--verde);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.bottombar{position:sticky;bottom:0;display:flex;flex-direction:column;gap:8px;padding:10px 16px 14px;background:var(--crema-2);border-top:2px solid var(--gris)}.bb-info{display:flex;align-items:center;gap:12px;font-weight:600}.bb-name-input{flex:1;min-width:0;max-width:320px;font:inherit;font-weight:600;padding:6px 10px;border:1px solid var(--gris);border-radius:8px;background:#fff}.bb-colors{display:flex;align-items:center;gap:10px}.bb-hues,.bb-ints{display:flex;gap:6px}.bb-ints{padding-left:10px;border-left:2px solid var(--gris)}.bb-int{background:var(--gris)}.bb-color{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:0 1px 3px var(--sombra)}.bb-color.active{border-color:var(--tinta);transform:scale(1.12)}.bb-time{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--verde);font-weight:600}.bb-wave{position:relative;height:96px}.bb-canvas{width:100%;height:100%;background:#fff;border-radius:10px;touch-action:none}.bb-handle{position:absolute;top:0;width:12px;height:100%;margin-left:-6px;cursor:ew-resize;background:var(--mostaza);opacity:.85;border-radius:4px;touch-action:none}.bb-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bb-controls button,.bb-controls select{padding:8px 12px;background:#fff;border:1px solid var(--gris);border-radius:8px}.bb-play{background:var(--verde)!important;color:#fff;min-width:44px}.bb-check{display:inline-flex;align-items:center;gap:4px}.bb-vol,.bb-mode{display:inline-flex;align-items:center;gap:6px}.bb-spacer{flex:1}.danger{color:var(--terracota);font-weight:600}.body{display:flex;align-items:stretch}.body>.grid{flex:1;min-width:0}.active-col{flex:0 0 clamp(110px,24vw,230px);display:flex;flex-direction:column;border-left:2px solid var(--crema-2);background:#ffffff59}.active-title{margin:0;padding:12px 14px 8px;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--verde)}.active-list{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:10px 12px 14px;overflow-y:auto}.active-item{position:relative;padding:8px 28px 10px 10px;margin-bottom:8px;background:#fff;border-radius:10px;box-shadow:0 2px 6px var(--sombra);border-left:4px solid var(--verde);overflow:hidden;transition:height .22s ease,opacity .18s ease,margin .22s ease,padding .22s ease}.active-item.enter{animation:active-in .18s ease-out}@keyframes active-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.active-name{display:block;font-size:clamp(.72rem,1.5vw,.9rem);font-weight:600;line-height:1.15;word-break:break-word;margin-bottom:8px}.active-progress{height:6px;background:var(--crema-2);border-radius:4px;overflow:hidden}.active-bar{height:100%;width:0%;background:var(--verde);transition:width .08s linear}.active-item.loop .active-progress{box-shadow:inset 0 0 0 1px var(--gris)}.active-x{position:absolute;top:6px;right:6px;width:20px;height:20px;line-height:1;padding:0;font-size:.8rem;color:var(--terracota);background:var(--crema);border-radius:6px;display:grid;place-items:center}.active-x:hover{background:var(--terracota);color:#fff}body{background-color:var(--crema);background-image:linear-gradient(#f4ead580,#f4ead580),url(/fondo.jpg);background-position:center;background-size:cover;background-repeat:no-repeat}.topbar{flex-wrap:wrap;gap:8px}.topbar-actions{flex-wrap:wrap;justify-content:flex-end}.school-link{align-self:center;color:var(--crema);text-decoration:none;font-weight:600;font-size:.85rem;opacity:.95;max-width:30ch}.school-link:hover{text-decoration:underline}.social{display:inline-flex;align-items:center;gap:6px}.social a{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.social a:hover{filter:brightness(1.08)}.social svg,.social img{width:30px;height:30px;display:block}.edit-only{display:none}body.edit-mode .edit-only{display:inline-flex}.ghost-dark{background:var(--crema-2)!important;color:var(--tinta)!important}body:not(.edit-mode) .pad-add{display:none}body:not(.edit-mode) .pad.empty{border-style:solid;border-color:transparent;background:#ffffff40;cursor:default}.quote{position:fixed;left:50%;bottom:16px;transform:translate(-50%);margin:0;max-width:min(92vw,1100px);text-align:center;font-style:italic;font-size:clamp(2.85rem,4vw,3.6rem);line-height:1.12;color:var(--tinta);text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.75);pointer-events:none;opacity:.92}@media (max-width: 1000px),(max-height: 720px){.quote{display:none}}body.edit-mode .quote{display:none}@media (max-width: 760px){.brand-tag,.school-link{display:none}.brand strong{font-size:1rem}.topbar,.panic{padding:8px 10px}}.pad.empty{background:#fff}.bb-hue[data-hue=vermello]{background:#c6372a}.pad[data-color=vermello-int]{background:#eab3ae}.active-item[data-color=vermello-int]{border-left-color:#a02c22}.active-item[data-color=vermello-int] .active-bar{background:#a02c22}.pad[data-color=vermello]{background:#f0d4d1}.active-item[data-color=vermello]{border-left-color:#c6372a}.active-item[data-color=vermello] .active-bar{background:#c6372a}.pad[data-color=vermello-cla]{background:#f6eae9}.active-item[data-color=vermello-cla]{border-left-color:#d6665c}.active-item[data-color=vermello-cla] .active-bar{background:#d6665c}.bb-hue[data-hue=laranxa]{background:#c66b2a}.pad[data-color=laranxa-int]{background:#eac7ae}.active-item[data-color=laranxa-int]{border-left-color:#a05622}.active-item[data-color=laranxa-int] .active-bar{background:#a05622}.pad[data-color=laranxa]{background:#f0ded1}.active-item[data-color=laranxa]{border-left-color:#c66b2a}.active-item[data-color=laranxa] .active-bar{background:#c66b2a}.pad[data-color=laranxa-cla]{background:#f6efe9}.active-item[data-color=laranxa-cla]{border-left-color:#d68f5c}.active-item[data-color=laranxa-cla] .active-bar{background:#d68f5c}.bb-hue[data-hue=mostaza]{background:#c6972a}.pad[data-color=mostaza-int]{background:#ead8ae}.active-item[data-color=mostaza-int]{border-left-color:#a07a22}.active-item[data-color=mostaza-int] .active-bar{background:#a07a22}.pad[data-color=mostaza]{background:#f0e7d1}.active-item[data-color=mostaza]{border-left-color:#c6972a}.active-item[data-color=mostaza] .active-bar{background:#c6972a}.pad[data-color=mostaza-cla]{background:#f6f2e9}.active-item[data-color=mostaza-cla]{border-left-color:#d6b15c}.active-item[data-color=mostaza-cla] .active-bar{background:#d6b15c}.bb-hue[data-hue=amarelo]{background:#c6b12a}.pad[data-color=amarelo-int]{background:#eae2ae}.active-item[data-color=amarelo-int]{border-left-color:#a08f22}.active-item[data-color=amarelo-int] .active-bar{background:#a08f22}.pad[data-color=amarelo]{background:#f0ecd1}.active-item[data-color=amarelo]{border-left-color:#c6b12a}.active-item[data-color=amarelo] .active-bar{background:#c6b12a}.pad[data-color=amarelo-cla]{background:#f6f4e9}.active-item[data-color=amarelo-cla]{border-left-color:#d6c65c}.active-item[data-color=amarelo-cla] .active-bar{background:#d6c65c}.bb-hue[data-hue=verdeclaro]{background:#6bc62a}.pad[data-color=verdeclaro-int]{background:#c7eaae}.active-item[data-color=verdeclaro-int]{border-left-color:#56a022}.active-item[data-color=verdeclaro-int] .active-bar{background:#56a022}.pad[data-color=verdeclaro]{background:#def0d1}.active-item[data-color=verdeclaro]{border-left-color:#6bc62a}.active-item[data-color=verdeclaro] .active-bar{background:#6bc62a}.pad[data-color=verdeclaro-cla]{background:#eff6e9}.active-item[data-color=verdeclaro-cla]{border-left-color:#8fd65c}.active-item[data-color=verdeclaro-cla] .active-bar{background:#8fd65c}.bb-hue[data-hue=verde]{background:#2ac6ac}.pad[data-color=verde-int]{background:#aeeae0}.active-item[data-color=verde-int]{border-left-color:#22a08b}.active-item[data-color=verde-int] .active-bar{background:#22a08b}.pad[data-color=verde]{background:#d1f0eb}.active-item[data-color=verde]{border-left-color:#2ac6ac}.active-item[data-color=verde] .active-bar{background:#2ac6ac}.pad[data-color=verde-cla]{background:#e9f6f4}.active-item[data-color=verde-cla]{border-left-color:#5cd6c2}.active-item[data-color=verde-cla] .active-bar{background:#5cd6c2}.bb-hue[data-hue=turquesa]{background:#2aacc6}.pad[data-color=turquesa-int]{background:#aee0ea}.active-item[data-color=turquesa-int]{border-left-color:#228ba0}.active-item[data-color=turquesa-int] .active-bar{background:#228ba0}.pad[data-color=turquesa]{background:#d1ebf0}.active-item[data-color=turquesa]{border-left-color:#2aacc6}.active-item[data-color=turquesa] .active-bar{background:#2aacc6}.pad[data-color=turquesa-cla]{background:#e9f4f6}.active-item[data-color=turquesa-cla]{border-left-color:#5cc2d6}.active-item[data-color=turquesa-cla] .active-bar{background:#5cc2d6}.bb-hue[data-hue=azul]{background:#2a6bc6}.pad[data-color=azul-int]{background:#aec7ea}.active-item[data-color=azul-int]{border-left-color:#2256a0}.active-item[data-color=azul-int] .active-bar{background:#2256a0}.pad[data-color=azul]{background:#d1def0}.active-item[data-color=azul]{border-left-color:#2a6bc6}.active-item[data-color=azul] .active-bar{background:#2a6bc6}.pad[data-color=azul-cla]{background:#e9eff6}.active-item[data-color=azul-cla]{border-left-color:#5c8fd6}.active-item[data-color=azul-cla] .active-bar{background:#5c8fd6}.bb-hue[data-hue=violeta]{background:#782ac6}.pad[data-color=violeta-int]{background:#ccaeea}.active-item[data-color=violeta-int]{border-left-color:#6122a0}.active-item[data-color=violeta-int] .active-bar{background:#6122a0}.pad[data-color=violeta]{background:#e0d1f0}.active-item[data-color=violeta]{border-left-color:#782ac6}.active-item[data-color=violeta] .active-bar{background:#782ac6}.pad[data-color=violeta-cla]{background:#f0e9f6}.active-item[data-color=violeta-cla]{border-left-color:#995cd6}.active-item[data-color=violeta-cla] .active-bar{background:#995cd6}.bb-hue[data-hue=rosa]{background:#c62a78}.pad[data-color=rosa-int]{background:#eaaecc}.active-item[data-color=rosa-int]{border-left-color:#a02261}.active-item[data-color=rosa-int] .active-bar{background:#a02261}.pad[data-color=rosa]{background:#f0d1e0}.active-item[data-color=rosa]{border-left-color:#c62a78}.active-item[data-color=rosa] .active-bar{background:#c62a78}.pad[data-color=rosa-cla]{background:#f6e9f0}.active-item[data-color=rosa-cla]{border-left-color:#d65c99}.active-item[data-color=rosa-cla] .active-bar{background:#d65c99}