/* ESTILO GENERAL - ADAPTADO PARA WEB */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #121212;
            color: white;
            text-align: center;
            padding: 5px;
            margin: 0;
            user-select: none;
            -webkit-user-select: none;
            /* Ajuste para navegador: Reducimos un poco el padding base respecto a la versión nativa */
            padding-top: calc(75px + env(safe-area-inset-top)); 
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
            min-height: 100vh;
            box-sizing: border-box;
        }

        /* BARRA SUPERIOR FIJA */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            /* Altura ajustada para navegador */
            height: calc(60px + env(safe-area-inset-top));
            background: #1f1f1f;
            border-bottom: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1000;
            padding: 0 10px;
            box-sizing: border-box;
            /* Padding superior para respetar el notch en iPhone Web */
            padding-top: env(safe-area-inset-top); 
        }

        .menu-btn { font-size: 1.8rem; background: none; border: none; color: white; cursor: pointer; padding: 0 10px; }
        .app-title { font-weight: 900; font-size: 1.2rem; color: #fff; letter-spacing: 1px; }

        /* HEADER BUTTONS */
        .header-actions { display: flex; gap: 8px; align-items: center; }
        .header-btn {
            height: 36px; padding: 0 12px; border-radius: 4px; font-weight: bold; font-size: 0.9rem;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            border: 1px solid #555; transition: all 0.2s;
        }
        .header-btn:active { transform: scale(0.96); }
        .btn-roster { background: #222; color: #ccc; font-size: 1.1rem; }
        .btn-roster.active-roster { background: #90caf9; color: #0d47a1; border-color: #64b5f6; box-shadow: 0 0 8px rgba(144, 202, 249, 0.4); }
        .btn-save { background: #00e676; color: black; border-color: #00e676; font-size: 0.8rem; }

        /* CAJAS */
        .box { background: #1e1e1e; padding: 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #333; }

        /* CRONO */
        #timer { 
            font-size: 2.8rem; color: #00e676; font-weight: 800; margin: 5px 0; 
            font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(0,230,118,0.2); 
            cursor: pointer; 
        }
        #timer:active { transform: scale(0.98); opacity: 0.8; }

        /* CONFIGURACION ARRIBA */
        .top-config { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-top: 5px; color: #ccc; }
        .time-check { display: flex; align-items: center; gap: 5px; }
        input[type="checkbox"] { transform: scale(1.3); }
        .vid-cfg { display: flex; align-items: center; gap: 3px; }
        .vid-cfg input { width: 30px; background: #222; border: 1px solid #555; color: white; text-align: center; padding: 4px; border-radius: 4px; font-size: 0.9rem; }

        /* ROSTER PANEL */
        .roster-panel { display: flex; gap: 8px; overflow-x: auto; padding: 10px 5px; margin-bottom: 5px; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .roster-panel::-webkit-scrollbar { display: none; }
        .btn-player { 
            min-width: 45px; height: 45px; border-radius: 50%; border: 2px solid #444; 
            background: #222; color: #aaa; font-weight: bold; font-size: 0.8rem; 
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
            transition: all 0.2s; cursor: pointer; 
        }
        .btn-player.selected { background: #00e676; color: black; border-color: #fff; transform: scale(1.1); box-shadow: 0 0 10px rgba(0,230,118,0.5); }

        /* BOTONERA DINÁMICA */
        .grid-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; padding-bottom: 20px; }
        .btn-game {
            padding: 10px 5px; font-size: 0.85rem; font-weight: bold; border: none; border-radius: 6px;
            color: white; cursor: pointer; box-shadow: 0 4px 0 #00000040; position: relative;
            min-height: 60px; word-wrap: break-word; text-transform: uppercase; 
            display: flex; align-items: center; justify-content: center;
        }
        .btn-game:active { transform: translateY(4px); box-shadow: none; }

        .rec-dot { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; background: #ff1744; border-radius: 50%; box-shadow: 0 0 8px #ff1744; animation: pulse-red 1s infinite; }
        .btn-add { background: #222; border: 2px dashed #555; color: #555; font-size: 2rem; box-shadow: none; }

        /* COLORES */
        .c-amarillo { background: #fbc02d; color: black; }
        .c-azul { background: #1565c0; }
        .c-rojo { background: #c62828; }
        .c-verde { background: #2e7d32; }
        .c-gris { background: #616161; }
        .c-naranja { background: #ef6c00; }
        .c-negro { background: #212121; border: 1px solid #444; }
        .c-morado { background: #6a1b9a; }

        /* TABS */
        .tabs-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; margin-bottom: 0; padding: 5px 0; }
        .tab-btn { flex: 1; background: none; color: #555; border: none; font-weight: bold; font-size: 0.75rem; padding: 8px 0; cursor: pointer; text-transform: uppercase; border-bottom: 3px solid transparent; transition: all 0.2s; }
        .tab-btn.active { color: #00e676; border-bottom-color: #00e676; }
        #tabBoard { order: 1; } #tabLog { order: 2; } #tabNotes { order: 3; }

        /* LISTA */
        .log-list { height: 260px; overflow-y: scroll; background: #1a1a1a; text-align: left; }
        .row { padding: 8px; border-bottom: 1px solid #333; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
        .rate-good { border-left: 6px solid #00e676; background: rgba(0, 230, 118, 0.35) !important; }
        .rate-bad { border-left: 6px solid #ff1744; background: rgba(255, 17, 68, 0.35) !important; }
        .row-actions { display: flex; gap: 5px; }
        .btn-icon { background: #333; border: 1px solid #555; padding: 4px 8px; border-radius: 4px; font-size: 1.1rem; transition: all 0.1s; cursor: pointer;}
        .btn-pressed-style { background: #111 !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.8); transform: translateY(2px); border-color: #222; }
        .icon-like.active { color: #00e676; } .icon-dislike.active { color: #ff1744; }
        .btn-del-row { background: #b71c1c; border-color: #d32f2f; color: white; }
        .audio-player { margin-top: 5px; width: 100%; height: 30px; }

        /* NOTAS Y PIZARRA */
        #notesArea { display: none; height: 260px; background: #1a1a1a; padding: 0; box-sizing: border-box; }
        #matchNotes { width: 100%; height: 100%; background: #222; border: 1px solid #444; color: white; resize: none; padding: 15px; font-size: 1rem; font-family: sans-serif; box-sizing: border-box; outline: none; border:none; }
        #matchNotes:focus { background: #2a2a2a; }

        #tacticalBoard { display: none; width: 100%; height: 260px; background: #2e7d32; position: relative; overflow: hidden; border: 2px solid #fff; box-sizing: border-box; touch-action: none; }
        .pitch-lines { position: absolute; width: 100%; height: 100%; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.3) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,0.3) 2px, transparent 2px); background-size: 50px 50px; }
        .center-circle { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
        .mid-line { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: rgba(255,255,255,0.4); pointer-events: none; }
        #paintCanvas { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 10; cursor: crosshair; touch-action: none; pointer-events: none;}

        .token { position: absolute; width: 24px; height: 24px; border-radius: 50%; font-size: 0.65rem; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.5); z-index: 20; cursor: grab; user-select: none; }
        .token:active { cursor: grabbing; }
        .token-red { background: #c62828; color: white; }
        .token-ball { background: white; border: 2px solid black; color: black; z-index: 21; font-size:0.6rem;}

        .board-toggle-btn { position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; background: #222; border: 1px solid #555; border-radius: 50%; color: white; z-index: 40; font-size: 1.2rem; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
        .board-controls { display: none; position: absolute; bottom: 60px; right: 10px; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 30; background: rgba(0,0,0,0.9); padding: 10px; border-radius: 8px; border: 1px solid #444; }
        .board-controls.visible { display: flex; animation: slideUp 0.2s; }
        @keyframes slideUp { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} }
        .board-row { display: flex; gap: 8px; align-items: center; }
        .btn-board { width: 32px; height: 32px; border-radius: 5px; border: 1px solid #555; background: #333; color: white; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
        .btn-board.active { background: #00e676; color: black; border-color: white;}
        .color-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #555; cursor: pointer; }
        .color-dot.selected { border-color: white; transform: scale(1.2); }

        /* CONTROLES FLOTANTES */
        .controls-float {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #1f1f1f;
            padding: 10px;
            /* Padding inferior para móviles web */
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
            display: flex;
            gap: 5px;
            box-sizing: border-box;
            border-top: 1px solid #333;
            z-index: 900;
        }
        .btn-ctrl { flex: 1; padding: 12px; font-weight: bold; border-radius: 5px; border:none; color: white; font-size: 1rem; cursor: pointer; }
        .bg-undo { background: #555; flex: 0.4; }
        .bg-redo { background: #777; flex: 0.4; }
        .bg-start { background: #00796b; flex: 1.5; }

        /* MENÚ LATERAL */
        .side-menu {
            position: fixed; top: 0; left: -100%; width: 85%; height: 100%; background: #1a1a1a; z-index: 2000; transition: 0.3s;
            border-right: 1px solid #333; display: flex; flex-direction: column;
            box-shadow: 5px 0 15px rgba(0,0,0,0.5);
            box-sizing: border-box;
            padding-top: calc(20px + env(safe-area-inset-top));
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }
        .menu-header { padding: 20px; background: #222; font-weight: bold; font-size: 1.2rem; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center;}
        .menu-content { padding: 20px; overflow-y: auto; flex: 1; text-align: left; padding-bottom: 60px; }
        .menu-section-title { color: #00e676; font-size: 0.9rem; margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }

        .settings-select { width: 100%; padding: 10px; background: #333; color: white; border: 1px solid #555; border-radius: 5px; margin-bottom: 10px; font-size: 1rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300e676%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; cursor: pointer; }

        .tutorial-btn { width: 100%; padding: 12px; background: #444; border: 1px solid #555; color: white; border-radius: 6px; font-weight: bold; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; }
        .tutorial-list { text-align: left; padding: 0 5px; overflow-y: auto; flex: 1; }
        .t-item { display: flex; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; }
        .t-icon { font-size: 1.5rem; width: 40px; text-align: center; margin-right: 15px; flex-shrink: 0; padding-top: 2px;}
        .t-desc { font-size: 0.9rem; color: #ddd; line-height: 1.4; }
        .t-strong { color: #00e676; font-weight: bold; display: block; margin-bottom: 4px; font-size: 1rem;}

        .profile-row { display: flex; gap: 5px; align-items: center; margin-bottom: 10px; }
        .btn-edit-profile { background: #444; border: 1px solid #555; color: white; padding: 10px; border-radius: 5px; cursor: pointer; }
        .donation-card { background: #2a2a2a; padding: 15px; border-radius: 8px; border: 1px solid #444; margin-top: 10px; text-align: center; }
        .dev-name { font-weight: bold; color: white; margin-bottom: 10px; display: block; font-size: 1rem; border-bottom: 1px solid #444; padding-bottom: 10px;}
        .donation-text { font-size: 0.85rem; color: #ccc; margin: 15px 0; line-height: 1.4; }
        .paypal-link { color: #4fc3f7; text-decoration: none; font-size: 1rem; font-weight: bold; display: block; margin-bottom: 15px; cursor: text;}
        .selectable-text { user-select: text; -webkit-user-select: text; cursor: text; }
        .thanks-text { font-size: 1.1rem; color: #00e676; font-weight: bold; margin-top: 10px; }
        .saved-match-card { background: #333; padding: 10px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #00e676; }
        .sm-title { font-weight: bold; font-size: 1rem; }
        .sm-date { font-size: 0.75rem; color: #aaa; }
        .sm-actions { margin-top: 8px; display: flex; gap: 10px; }
        .btn-sm { padding: 5px 10px; border-radius: 4px; border: none; color: white; font-size: 0.8rem; cursor: pointer; }
        .warning-box { background: #422800; border: 1px solid #ff8f00; color: #ffecb3; padding: 15px; border-radius: 8px; font-size: 0.8rem; margin-top: 15px; text-align: left; display:flex; align-items:flex-start; gap:10px; }

        /* MODALES */
        .modal-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); z-index: 3000; align-items: center; justify-content: center; }
        .modal-content { background: #222; color: white; padding: 20px; border-radius: 8px; width: 85%; border: 1px solid #555; text-align: center; max-height: 85vh; display: flex; flex-direction: column; }
        .color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0; }
        .color-opt { height: 35px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; }
        .color-opt.selected { border-color: white; transform: scale(1.1); }
        input[type="text"], textarea { width: 100%; padding: 10px; background: #333; border: 1px solid #555; color: white; border-radius: 5px; box-sizing: border-box;}

        .picker-frame { display: flex; justify-content: center; gap: 5px; height: 160px; margin: 15px 0; position: relative; background: #111; border-radius: 10px; border: 1px solid #333; overflow: hidden; }
        .picker-frame::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: linear-gradient(to bottom, #111, rgba(17,17,17,0)); pointer-events: none; z-index: 2; }
        .picker-frame::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: linear-gradient(to top, #111, rgba(17,17,17,0)); pointer-events: none; z-index: 2; }
        .picker-highlight { position: absolute; top: 50%; left: 0; width: 100%; height: 40px; margin-top: -20px; border-top: 2px solid #00e676; border-bottom: 2px solid #00e676; background: rgba(0, 230, 118, 0.1); pointer-events: none; z-index: 1; }
        .picker-col { flex: 1; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; position: relative; z-index: 3; }
        .picker-col::-webkit-scrollbar { display: none; }
        .picker-col-content { padding-top: 60px; padding-bottom: 60px; }
        .picker-item { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #888; scroll-snap-align: center; }
        .picker-sep { display:flex; align-items:center; font-weight:bold; font-size:1.5rem; color: #555; z-index: 3;}
        .input-error { border: 1px solid #d32f2f !important; animation: shake 0.5s; }
        @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

        #toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 5000; left: 50%; bottom: 80px; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,0.5); border-left: 5px solid #00e676; font-weight: bold; }
        #toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
        @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 80px; opacity: 1;} }
        @keyframes fadeout { from {bottom: 80px; opacity: 1;} to {bottom: 0; opacity: 0;} }

        /* ROSTER SELECTION */
        .roster-select-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; margin-top: 15px; }
        .btn-roster-opt { background: #333; padding: 12px; border: 1px solid #555; color: white; border-radius: 5px; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
        .btn-roster-opt.active { border-color: #00e676; background: rgba(0,230,118,0.1); }
        .btn-roster-del { background: #b71c1c; color: white; border: none; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; margin-left: 10px; cursor: pointer;}

        /* DRUM PICKER */
        .drum-container { height: 150px; overflow-y: scroll; background: #111; border: 1px solid #444; border-radius: 5px; margin-top: 10px; scroll-snap-type: y mandatory;}
        .drum-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #888; scroll-snap-align: center; border-bottom: 1px solid #222; cursor: pointer;}
        .drum-item.selected { background: #00e676; color: black; font-weight: 900; border-color: white; }

        /* AUDIO CONTROLS */
        .modal-audio-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; background: #333; padding: 10px; border-radius: 8px; }
        .btn-audio { width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center;}
        .btn-rec { background: #ff1744; color: white; }
        .btn-rec.recording { animation: pulse-rec 1s infinite; }
        .btn-stop { background: #fff; color: black; }
        .btn-del-audio { background: #333; border: 1px solid #555; color: #ccc; font-size: 1rem; width: 40px; height: 40px; }
        @keyframes pulse-rec { 0% { opacity: 1; transform:scale(1);} 50% { opacity: 0.8; transform:scale(1.1);} 100% { opacity: 1; transform:scale(1);} }

        /* AUDIO PLAYER RESET */
        audio::-webkit-media-controls-current-time-display,
        audio::-webkit-media-controls-time-remaining-display { display: none !important; }
        audio::-webkit-media-controls-timeline { flex: 1; }