: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:10px;padding:16px}.grid-row{display:flex;gap:10px;justify-content:center}.pad{position:relative;flex:1 1 0;min-height:84px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;background:#fff;border:3px solid transparent;border-radius:var(--radio);box-shadow:0 2px 8px var(--sombra);color:var(--tinta);transition:transform .05s,box-shadow .1s;overflow:hidden}.pad-space{flex:1 1 100%;min-height:60px}.pad:active{transform:scale(.97)}.pad[data-color=verde]{background:#e3efee}.pad[data-color=mostaza]{background:#f6ecd2}.pad[data-color=terracota]{background:#f3ddd0}.pad.empty{background:#fff;border-style:dashed;border-color:var(--crema-2);color:var(--gris)}.pad-key{font-size:.7rem;font-weight:700;opacity:.55;text-transform:uppercase}.pad-name{font-size:.95rem;font-weight:600;line-height:1.1;word-break:break-word}.pad-add{font-size:.85rem;align-self:center;margin:auto 0}.pad-icons{display:flex;gap:4px;font-size:.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;gap:6px}.bb-color{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:0 1px 3px var(--sombra)}.bb-color[data-color=verde]{background:var(--verde)}.bb-color[data-color=mostaza]{background:var(--mostaza)}.bb-color[data-color=terracota]{background:var(--terracota)}.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 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:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}.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[data-color=verde]{border-left-color:var(--verde)}.active-item[data-color=mostaza]{border-left-color:var(--mostaza)}.active-item[data-color=terracota]{border-left-color:var(--terracota)}.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:.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[data-color=mostaza] .active-bar{background:var(--mostaza)}.active-item[data-color=terracota] .active-bar{background:var(--terracota)}.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}