/* --- ESTILOS GLOBALES Y DEL LAUNCHER --- */
html { height: 100%; }
body {
    background-color: #2c2c2c;
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
    margin: 0; padding: 20px;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    min-height: 100%;
}

.view { display: none; flex-grow: 1; }
.view.active { display: flex; flex-direction: column; }

/* LAUNCHER */
#app-launcher { text-align: center; justify-content: center; }
.launcher-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.launcher-title-container { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; margin-bottom: 30px;}
.launcher-title-container h1 { font-family: 'Geologica', sans-serif; font-weight: 300; font-size: 2.8em; color: #4c4c4c; margin: 8px 0; text-shadow: -1px -1px 1px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.05); }
.launcher-subtitle { font-family: 'Roboto Mono', monospace; font-size: 0.7em; color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 8px 0; }
#app-launcher h2 { font-weight: 400; color: #bbb; }
.logo-line { height: 1px; width: 100%; background-color: #4c4c4c; box-shadow: 0 1px 0 rgba(255,255,255,0.04); }

/* --- LAUNCHER UNIFICADO --- */
.app-choices { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 30px; 
    flex-wrap: wrap; 
    max-width: 1100px; /* Evita que se estiren demasiado en pantallas gigantes */
    margin-left: auto;
    margin-right: auto;
}

.choice-button { 
    background-color: #3a3a3a; 
    border: 2px solid #4CAF50; 
    color: #e0e0e0; 
    padding: 30px 20px; 
    border-radius: 12px; 
    cursor: pointer; 
    width: 280px;      /* Ancho fijo para consistencia */
    height: 180px;     /* Alto fijo para que los 3 sean iguales */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    text-align: center; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.choice-button:hover { 
    background-color: #4a4a4a; 
    transform: translateY(-8px); 
    border-color: #5cd660; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); 
}

.choice-button h2 { 
    margin: 0 0 10px 0; 
    color: #fff; 
    font-size: 1.5em;
    font-family: 'Geologica', sans-serif;
}

.choice-button p { 
    margin: 0;
    color: #aaa; 
    font-size: 0.9em;
    line-height: 1.4;
}

/* --- RESPONSIVIDAD --- */

/* Tablets (2 columnas arriba, 1 abajo centrada) */
@media (max-width: 900px) {
    .choice-button {
        width: 45%; /* Se adaptan al ancho de la pantalla */
        min-width: 280px;
    }
}

/* Celulares (Los 3 en lista vertical) */
@media (max-width: 600px) {
    .app-choices {
        flex-direction: column;
        align-items: center;
    }
    .choice-button {
        width: 100%;
        max-width: 320px;
        height: 150px; /* Un poco más bajos en móvil para ahorrar espacio */
    }
}

.app-footer { text-align: center; padding: 20px 0 0 0; width: 100%; margin-top: auto;}
.app-footer p { color: #4c4c4c; font-size: 0.9em; }
.back-to-menu-btn { background-color: #555; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; margin-right: 15px; }
.back-to-menu-btn:hover { background-color: #777; }

/* MEDIA QUERIES LAUNCHER */
@media (max-width: 480px) {
    .launcher-title-container h1 { font-size: 0; visibility: hidden; }
    .launcher-title-container h1::before { content: "Fragment Studio"; font-size: 2.2rem; visibility: visible; display: block; }
    .launcher-title-container h1::after { content: "Suite"; display: block; font-weight: 300; margin-top: -10px; font-size: 1.5rem; visibility: visible;}
}

/* --- ESTILOS APP MULTITRACK --- */
#multitrack-app .controls-container { background-color: #3a3a3a; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
#multitrack-app .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
#multitrack-app .logo-container { display: flex; flex-direction: column; }
#multitrack-app .logo-line { height: 1px; width: 100%; background-color: #4c4c4c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }
#multitrack-app #appName { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 2.2em; color: #4c4c4c; margin: 8px 0; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.05); }
#multitrack-app #app-subtitle { font-family: 'Roboto', monospace; font-size: 0.6em; color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 8px 2px; padding: 0; }
#multitrack-app #projectTitle { font-size: 1.1em; background-color: #2c2c2c; border: 1px solid #555; color: #e0e0e0; padding: 8px; border-radius: 5px; width: 300px; text-align: right; box-sizing: border-box; }
#multitrack-app .main-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; justify-content: space-between; }
#multitrack-app .control-group { display: flex; align-items: center; gap: 10px; background-color: #2c2c2c; padding: 8px; border-radius: 6px; }
#multitrack-app .master-fx-wrapper { display: flex; align-items: center; gap: 20px; flex-grow: 1; justify-content: flex-end; flex-wrap: wrap; }
#multitrack-app #timeDisplay { font-size: 1.5em; font-family: 'Roboto', monospace; font-weight: 500; color: #4CAF50; background-color: #222; padding: 5px 10px; border-radius: 5px; }
#multitrack-app .track { background-color: #4a4a4a; border: 2px solid transparent; border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; transition: all 0.3s ease; }
#multitrack-app .track.loaded { border-color: #4CAF50; }
#multitrack-app button, #multitrack-app .load-button-label { background-color: #555; color: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; display: inline-block; font-size: 14px; }
#multitrack-app button:hover:not(:disabled), #multitrack-app .load-button-label:hover { background-color: #777; }
#multitrack-app button:disabled { opacity: 0.5; cursor: not-allowed; }
#multitrack-app .muteButton.muted { background-color: #f39c12; }
#multitrack-app #newSongButton { background-color: #3498db; }
#multitrack-app #addTrackButton { background-color: #27ae60; width: 100%; margin-top: 10px; }
#multitrack-app .deleteTrackButton { background-color: #c0392b; font-weight: bold; padding: 4px 8px; line-height: 1; font-size: 1.2em; border-radius: 50%; width: 28px; height: 28px; flex-shrink: 0; }
#multitrack-app .clearTrackButton { background-color: #7f8c8d; }
#multitrack-app .track-header { display: flex; align-items: center; justify-content: space-between; }
#multitrack-app .track-input-controls { display: flex; align-items: center; gap: 10px; flex-grow: 1; margin-left: 10px; }
#multitrack-app .file-name-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#multitrack-app .master-volume-container, #multitrack-app .effect-container { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#multitrack-app .effects-controls { display: flex; gap: 20px; flex-wrap: wrap; }
#multitrack-app .eq-controls, #multitrack-app .eq-band { display: flex; align-items: center; }
#multitrack-app .eq-band { flex-direction: column; }
#multitrack-app .eq-slider { -webkit-appearance: none; appearance: none; width: 60px; height: 100px; background-color: #555; border-radius: 5px; outline: none; cursor: pointer; writing-mode: bt-lr; -webkit-appearance: slider-vertical; }
#multitrack-app .eq-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 24px; background: #a9ccee; border-radius: 3px; border: none; cursor: pointer; }
#multitrack-app .timeline { width: 100%; height: 12px; background-color: #555; margin: 10px 0; position: relative; cursor: pointer; border-radius: 6px; }
#multitrack-app .timeline-progress { height: 100%; background-color: #4CAF50; position: absolute; left: 0; top: 0; border-radius: 6px; pointer-events: none; }
#multitrack-app .timeline-handle { width: 12px; height: 24px; background-color: #2196F3; position: absolute; top: -6px; border-radius: 3px; pointer-events: none; }
#multitrack-app .knob { position: relative; width: 35px; height: 35px; background-color: #555; border: 2px solid #333; border-radius: 50%; cursor: ns-resize; transform: rotate(0deg); }
#multitrack-app .knob.disabled { opacity: 0.5; cursor: not-allowed; }
#multitrack-app .knob-indicator { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 2px; height: 10px; background-color: #f39c12; border-radius: 1px; }
#multitrack-app .custom-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 10px; background-color: #555; border-radius: 5px; outline: none; transition: opacity .2s; cursor: pointer; }
#multitrack-app .custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 24px; background: #a9ccee; border-radius: 3px; border: none; cursor: pointer; margin-top: -7px; }
#multitrack-app #masterVolume { width: 150px; }
#multitrack-app .track-output-controls { display: flex; align-items: center; gap: 15px; }
#multitrack-app .pan-container { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#multitrack-app .pan-container::before { content: 'Pan'; font-size: 12px; color: #ccc; }
#multitrack-app #main-display-container { position: relative; width: 100%; height: 100px; background-color: #333; border-radius: 6px; margin-top: 10px; }
#multitrack-app #main-display-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 950px) { #multitrack-app .app-header, #multitrack-app .main-controls { flex-direction: column; align-items: center; gap: 15px; } #multitrack-app #projectTitle { width: 100%; max-width: 400px; text-align: center; } #multitrack-app .master-fx-wrapper { justify-content: center; width: 100%; } }

/* --- ESTILOS APP LOOPER --- */
#looper-app #loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5em; z-index: 1000; transition: opacity 0.3s; pointer-events: none; opacity: 0;}
#looper-app #loadingOverlay.visible { opacity: 1; pointer-events: auto; }
#looper-app .container { background-color: #3a3a3a; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
#looper-app .app-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
#looper-app .logo-container { display: flex; flex-direction: column; }
#looper-app .logo-line { height: 1px; width: 100%; background-color: #4c4c4c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }
#looper-app #appName { font-family: 'Geologica', sans-serif; font-weight: 300; font-size: 2.2em; color: #4c4c4c; margin: 8px 0; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.05); }
#looper-app #app-subtitle { font-family: 'Roboto Mono', monospace; font-size: 0.6em; color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 8px 2px; }
#looper-app .project-section { display: flex; flex-direction: column; align-items: flex-end; gap: 10px;}
#looper-app #projectTitle { font-size: 1.1em; background-color: #2c2c2c; border: 1px solid #555; color: #e0e0e0; padding: 8px; border-radius: 5px; width: 300px; text-align: right; user-select: auto; }
#looper-app .session-controls { display: flex; gap: 10px; }
#looper-app .main-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
#looper-app .master-controls-left { display: flex; align-items: center; gap: 10px; }
#looper-app .master-controls-left #playPauseButton, #looper-app .master-controls-left #stopButton { width: 100px; padding: 10px 12px; font-size: 1.1em; }
#looper-app .master-volume-box { background-color: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 6px; padding: 10px 15px; display: flex; align-items: center; gap: 15px;}
#looper-app .center-playback-container { display: flex; flex-direction: column; align-items: center; margin-top: 20px;}
#looper-app .center-playback-controls { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; }
#looper-app .center-playback-controls .group { display: flex; align-items: center; gap: 15px; width: 100%; }
#looper-app .center-playback-controls .main-clock-group { justify-content: center; }
#looper-app .center-playback-controls .loop-controls-group { justify-content: space-between; }
#looper-app #loopButton { padding: 8px 16px; font-size: 1.1em; background-color: #f39c12; }
#looper-app #loopButton.active { background-color: #c0392b; box-shadow: 0 0 10px rgba(231, 76, 60, 0.7); }
#looper-app .mark-button { background-color: #6c757d; font-size: 0.9em; padding: 6px 10px; }
#looper-app #mainTimeDisplay { font-size: 3em; font-family: 'Roboto Mono', monospace; font-weight: 700; color: #4CAF50; background-color: transparent; }
#looper-app .loop-time-display { font-family: 'Roboto Mono', monospace; background-color: #2a2a2a; padding: 8px 12px; border-radius: 5px; font-size: 1.2em; text-align: center; }
#looper-app #regionStartTimeDisplay { color: #F39C12; } 
#looper-app #regionEndTimeDisplay { color: #E74C3C; }
#looper-app .waveform-container { position: relative; background-color: #222; border-radius: 6px; }
#looper-app #waveformCanvas { width: 100%; height: 80px; }
#looper-app .timeline-ruler { position: absolute; top: 0; left: 0; width: 100%; height: 20px; pointer-events: none; }
#looper-app .ruler-mark { position: absolute; font-size: 10px; color: #4CAF50; opacity: 0.7; transform: translateX(-50%); top: 5px;}
#looper-app .timeline-container { position: relative; }
#looper-app .timeline { width: 100%; height: 12px; background-color: #555; margin-top: 5px; position: relative; cursor: pointer; border-radius: 6px; }
#looper-app .timeline-progress { height: 100%; background-color: #4CAF50; position: absolute; left: 0; top: 0; border-radius: 6px; pointer-events: none; }
#looper-app .timeline-handle { width: 12px; height: 24px; background-color: #2196F3; position: absolute; top: -6px; border-radius: 3px; pointer-events: none; }
#looper-app #fragmentModeContainer { background-color: #333; }
#looper-app .region-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 15px; }
#looper-app .region-controls-buttons { display: flex; gap: 10px; }
#looper-app #regionNameInput {flex-grow: 1; max-width: 300px; text-align: center; padding: 8px; border-radius: 5px; border: 1px solid #777; background-color: #555; color: #fff; }
#looper-app .track { background-color: #4a4a4a; border: 2px solid transparent; border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; transition: all 0.3s ease; }
#looper-app .track.loaded { border-color: #4CAF50; }
#looper-app button, #looper-app .load-button-label { background-color: #555; color: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; display: inline-block; font-size: 14px; }
#looper-app button:hover:not(:disabled), #looper-app .load-button-label:hover { background-color: #777; }
#looper-app button:disabled { opacity: 0.5; cursor: not-allowed; }
#looper-app .muteButton.muted { background-color: #f39c12; }
#looper-app .track-input-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
#looper-app .track-controls-left, #looper-app .track-controls-right { display: flex; align-items: center; gap: 10px; }
#looper-app .knob { width: 30px; height: 30px; background-color: #666; border-radius: 50%; position: relative; cursor: pointer; }
#looper-app .knob-indicator { width: 4px; height: 8px; background-color: #fff; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); border-radius: 2px; }
#looper-app .pan-knob.disabled { opacity: 0.5; cursor: not-allowed; }
#looper-app .region-timeline { width: 100%; height: 14px; background-color: #666; position: relative; border-radius: 7px; }
#looper-app .region-handle { width: 12px; height: 28px; border-radius: 3px; position: absolute; top: -7px; cursor: ew-resize; z-index: 10; border: none; }
#looper-app #regionHandleStart { background-color: #F39C12; } 
#looper-app #regionHandleEnd { background-color: #E74C3C; }
#looper-app .region-selection-bar { height: 100%; background-color: rgba(76, 175, 80, 0.6); position: absolute; top: 0; pointer-events: none; z-index: 1; }
#looper-app #savedRegionsList { list-style: none; padding: 0; margin-top: 15px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#looper-app .region-tag { background-color: #777; color: #fff; width: 40px; height: 40px; border-radius: 5px; cursor: pointer; font-size: 12px; text-align: center; padding: 5px; transition: background-color 0.2s, transform 0.1s; display: flex; align-items: center; justify-content: center;}
#looper-app .region-tag:hover { transform: translateY(-2px); }
#looper-app .region-tag.selected { background-color: #4CAF50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.7); }
#looper-app .speed-control { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
#looper-app .speed-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;}
#looper-app .speed-button { padding: 6px 10px; }
#looper-app .speed-button.active { background-color: #3498db; color: white; box-shadow: 0 0 8px rgba(52, 152, 219, 0.7); }

@media (min-width: 821px) {
    #looper-app .center-playback-controls { flex-direction: row; }
    #looper-app .center-playback-controls .loop-controls-group { width: auto; }
}
@media (max-width: 820px) {
    #looper-app .app-header { flex-direction: column; align-items: center; }
    #looper-app .project-section { align-items: center; width: 100%; }
    #looper-app #projectTitle { width: 100%; text-align: center; }
    #looper-app .main-controls { flex-direction: column; gap: 15px; }
    #looper-app .master-controls-left, #looper-app .master-volume-box { width: 100%; justify-content: center; }
    #looper-app .center-playback-controls .group { flex-wrap: wrap; justify-content: center; }
    #looper-app #mainTimeDisplay { font-size: 2.5em; padding: 5px 10px; }
    #looper-app .loop-time-display { font-size: 1.1em; }
    #looper-app .track-input-controls { flex-direction: column; align-items: stretch; gap: 15px; }
    #looper-app .track-controls-left, #looper-app .track-controls-right { justify-content: space-between; }
    #looper-app #fragmentModeContainer { padding: 10px;}
    #looper-app .region-controls { width: 100%; }
    #looper-app #regionNameInput {width: 100%;}
    #looper-app .region-controls-buttons {justify-content: center; width: 100%;}
}