:root{
  /* ===== CONTROL VISUAL RÁPIDO ===== */
  --app-max-width:1180px;
  --main-text-height:210px;
  --dialog-text-min-height:120px;
  --menu-dot-bg:#ef4444;
  --menu-dot-color:#ffffff;
  --menu-bg:rgba(255,255,255,.98);
  --history-item-limit:10;
  /* ===== COLORES BASE ===== */
  --bg1:#eef4fb;--bg2:#dde8f3;--glass:rgba(255,255,255,.68);--glass2:rgba(255,255,255,.46);
  --line:rgba(40,56,80,.12);--text:#1e2433;--muted:#697387;--blue:#2477ff;--cyan:#14b8d4;
  --green:#32c85f;--orange:#e59a2f;--red:#e86b4b;--shadow:0 24px 70px rgba(48,60,84,.15);
  --radius:28px;--radius2:18px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:
  radial-gradient(circle at 20% 0%,rgba(156,202,255,.55),transparent 34%),
  radial-gradient(circle at 90% 10%,rgba(191,235,225,.48),transparent 30%),
  linear-gradient(135deg,var(--bg1),var(--bg2));}
.wrap{max-width:var(--app-max-width);margin:auto;padding:32px 18px 54px}
.header,.panel,.soft-card,.player,.gemini,.history,.multi-box{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px 28px;margin-bottom:18px}
h1{font-size:34px;line-height:1;margin:0;font-weight:900;letter-spacing:-.04em}.sub{margin-top:9px;color:#455066;font-weight:600}.top{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pill{height:36px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.58);padding:0 15px;font-weight:800;color:#273044;cursor:pointer;box-shadow:0 8px 22px rgba(80,100,130,.08)}.pill:active{transform:scale(.98)}
.panel{padding:24px}.label{display:block;font-size:20px;font-weight:900;margin:0 0 12px}.mainText,textarea.dialogText{width:100%;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.58);color:#1f2937;padding:22px;outline:none;resize:vertical;font-size:18px;line-height:1.55;font-weight:650;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.mainText{height:var(--main-text-height)}.mainText::placeholder,textarea.dialogText::placeholder{color:#8994a8}
.mode-row{display:flex;align-items:center;gap:10px;margin:18px 0 14px;font-size:18px;font-weight:900}.mode-row input{width:20px;height:20px;accent-color:var(--blue)}
.grid{display:grid;grid-template-columns:1.35fr .85fr .85fr .85fr;gap:14px;margin-top:16px}.soft-card{padding:16px;min-height:108px;border-radius:22px}.soft-card h3{margin:0 0 12px;font-size:17px}select,input[type="text"],input[type="password"]{width:100%;height:48px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.72);color:#1f2937;font-weight:800;padding:0 14px;outline:none}input[type="range"]{width:100%;accent-color:var(--blue)}.value{font-weight:900;color:#2d405d;margin-top:6px}.hidden{display:none!important}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.btn{height:38px;padding:0 22px;border:0;border-radius:999px;color:#152033;font-weight:900;font-size:12px;cursor:pointer;box-shadow:0 12px 25px rgba(68,84,108,.12);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.65)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.read{background:linear-gradient(180deg,#7cf18c,#32d35f)}.pause,.resume,.clear{background:rgba(255,255,255,.7)}.stop{background:linear-gradient(180deg,#ffc36e,#e79427)}.download{background:linear-gradient(180deg,#8fd8ff,#36a9f4);color:#0b2840}.record{background:linear-gradient(180deg,#d8e3ff,#a9c4ff);color:#17243e}
.player{margin-top:18px;padding:16px;border-radius:22px;position:relative;z-index:50;overflow:visible}.bar{height:13px;border-radius:999px;background:rgba(45,61,86,.12);overflow:hidden}.fill{height:100%;width:0%;background:linear-gradient(90deg,#28c7aa,#2ab8ee,#2a72ff);transition:width .1s linear}.time{display:flex;justify-content:space-between;font-weight:900;color:#334155;margin-top:8px;font-size:13px}.status{margin-top:11px;font-weight:900;color:#24553c;white-space:pre-wrap}.status.error{color:#a12d2d}.status.info{color:#244b82}    
.record.recording-active{
  color:#c0392b !important;

}
.multi-box{padding:18px;margin-top:14px;border-radius:24px}.multi-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.multi-head p{margin:0;color:#5d687a;font-weight:700}.add-row{display:flex;gap:10px;align-items:end;margin-bottom:14px}.add-row .grow{flex:1}.small-btn{height:44px;border:0;border-radius:999px;padding:0 16px;font-weight:900;background:#1d4ed8;color:#fff;cursor:pointer}.small-btn.light{background:rgba(255,255,255,.7);color:#243044;border:1px solid var(--line)}.dialog-list{display:grid;gap:14px}.dialog-card{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:22px;padding:16px}.dialog-top{display:grid;grid-template-columns:90px 1fr 1fr auto;gap:10px;align-items:center;margin-bottom:12px}.tag{font-weight:950;font-size:20px;color:#1d4ed8}.nameInput{height:44px}.dialogText{min-height:var(--dialog-text-min-height)}.removeBtn{height:40px;width:40px;border:0;border-radius:50%;background:#fee2e2;color:#991b1b;font-weight:900;cursor:pointer}.hint{font-size:13px;color:#6b7280;font-weight:700;margin-top:8px}.active-now{outline:3px solid rgba(36,119,255,.22)}

/* ===== MENÚ POR NARRADOR: EFECTOS Y TONOS ===== */
.dialog-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.dialog-menu-btn{width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.62);color:#17243e;font-size:22px;font-weight:950;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dialog-menu-btn:hover{background:rgba(36,119,255,.10);transform:scale(1.04)}
.dialog-effects-panel{margin:10px 0 12px auto;max-width:360px;padding:14px;border-radius:18px;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 16px 38px rgba(48,60,84,.16);position:relative;z-index:200}
.dialog-effects-panel label{display:block;font-size:13px;font-weight:950;margin:0 0 6px;color:#334155}
.dialog-effects-panel select{height:42px;margin-bottom:10px;background:#fff}
.dialog-effects-row{display:flex;gap:8px}
.dialog-effects-row button{height:36px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.75);font-weight:900;cursor:pointer;padding:0 12px;color:#1d4ed8}
.dialog-effects-row button.danger{color:#991b1b;background:#fee2e2}
.effect-badge{font-size:12px;font-weight:900;color:#1d4ed8;margin:6px 0 0 96px}

.gemini{margin-top:18px;padding:18px;border-radius:24px;position:relative;z-index:1}.gemini-title{font-size:18px;font-weight:950;margin-bottom:12px}.gemgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.note{margin-top:12px;color:#5f6b7a;font-weight:650;line-height:1.45}.history{margin-top:18px;padding:18px;border-radius:24px}.history h3{margin:0 0 12px}.hist{display:grid;gap:10px}.hist-item{padding:12px;border-radius:16px;background:rgba(255,255,255,.58);border:1px solid var(--line);font-size:14px;color:#374151}.hist-item b{color:#111827}

.time-right{position:relative;display:inline-flex;align-items:center;gap:8px}
.timeline-menu-btn{width:28px;height:28px;border:0;border-radius:999px;background:var(--menu-dot-bg);color:var(--menu-dot-color);font-size:20px;font-weight:900;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 15px rgba(68,84,108,.10)}
.timeline-menu-btn:hover{filter:brightness(.95);transform:scale(1.04)}
.timeline-menu-pop{position:absolute;right:0;top:34px;z-index:9999;min-width:190px;padding:8px;border-radius:16px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 18px 45px rgba(48,60,84,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.timeline-menu-pop button{width:100%;height:38px;border:0;background:transparent;text-align:left;border-radius:12px;padding:0 10px;font-weight:850;color:#243044;cursor:pointer}
.timeline-menu-pop button:hover{background:rgba(36,119,255,.10)}
.timeline-menu-pop button.danger{color:#991b1b}

.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.history-head h3{margin:0}
.history-clear{height:34px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);color:#991b1b;font-size:12px;font-weight:900;padding:0 12px;cursor:pointer}
.history-clear:hover{background:#fee2e2}

audio{width:100%;display:none;margin-top:12px}.file-input{display:none}
@media(max-width:850px){.header{display:block}.top{justify-content:flex-start;margin-top:16px}.grid,.gemgrid,.dialog-top{grid-template-columns:1fr}.btn{width:100%}h1{font-size:28px}.add-row{display:block}.small-btn{margin-top:10px;width:100%}}

/* ===== MEZCLADOR DE AUDIO 6.4 PRO ===== */
.audio-mixer{margin-top:18px;padding:14px 18px 18px;border-radius:18px;background:linear-gradient(180deg,#101722,#070b12);border:1px solid rgba(0,220,255,.25);box-shadow:0 0 0 1px rgba(168,85,247,.25),0 18px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);color:#e8f2ff}
.mixer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.mixer-title{font-size:18px;font-weight:950;background:linear-gradient(90deg,#a855f7,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}.mixer-actions{display:flex;gap:10px;align-items:center}.mixer-actions button,.mixer-actions select{height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#e8f2ff;font-weight:800;padding:0 12px}.mixer-grid{display:grid;grid-template-columns:repeat(6,1fr) 1.6fr;gap:12px}.mix-channel,.mix-options{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:12px;min-height:170px}.mix-channel h4{margin:0 0 8px;text-align:center;font-size:13px}.mix-range{display:flex;justify-content:center;align-items:center;height:86px}.mix-range input{width:88px;transform:rotate(-90deg);accent-color:#22c55e}.mix-value{text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:8px;padding:7px 4px;font-weight:950;color:#60a5fa}.vu{height:72px;width:9px;border-radius:8px;margin:auto;background:linear-gradient(0deg,#22c55e 35%,#facc15 65%,#ef4444 100%);opacity:.85;filter:drop-shadow(0 0 8px rgba(34,197,94,.35))}.mix-options label{display:block;font-size:12px;font-weight:750;margin:8px 0;color:#d8e6f7}.mix-options input{accent-color:#1687ff}.mix-options select{width:100%;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.13);background:#111827;color:#e8f2ff;font-weight:750;margin-top:4px}
@media(max-width:1000px){.mixer-grid{grid-template-columns:repeat(2,1fr)}.mix-options{grid-column:1/-1}}


/* ===== AGREGADO SEGURO: VOZ ESPECIAL 6.4 PRO ===== */
.voice-card-special{min-height:175px}
.specialVoiceBox{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(40,56,80,.16)}
.specialVoiceBox label{display:block;font-size:12px;font-weight:950;color:#334155;margin:0 0 6px}
.specialVoiceBox select{height:42px;border-radius:16px}
.specialVoiceNote{margin-top:7px;font-size:12px;font-weight:900;color:#64748b}
.specialVoiceBoxSmall{margin-top:8px;padding-top:8px}
.dialog-special-wrap{margin:8px 0 10px 96px;max-width:360px}
.dialog-special-wrap label{display:block;font-size:12px;font-weight:950;color:#334155;margin:0 0 5px}
.dialog-special-wrap select{height:42px}
@media(max-width:850px){.voice-card-special{min-height:auto}.dialog-special-wrap{margin-left:0;max-width:none}}


/* ==========================================================
   PROCESADOR DE VOZ ESPECIAL 6.4
   SOLO ESTÉTICA - encajado dentro del panel existente
   Alto final: 140px
   No redefine html/body. No toca la lógica JS.
========================================================== */

.ovp-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 140px;
    margin: 12px 0 16px;

    display: grid;
    grid-template-columns: 210px 80px 104px 170px minmax(0, 1fr) 155px;
    grid-template-rows: 62px 78px;
    gap: 0;

    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(48, 60, 84, .12), inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;
    position: relative;
}

.ovp-shell::before,
.ovp-shell::after {
    content: "";
    position: absolute;
    top: 13px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2b3341;
    box-shadow: 0 102px 0 #2b3341;
    opacity: .95;
    z-index: 5;
}

.ovp-shell::before { left: 10px; }
.ovp-shell::after { right: 10px; }

.ovp-brandbar {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 12px 32px;
    border-right: 1px solid var(--line);
}

.ovp-logo {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 2px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-size: 23px;
    background: rgba(255,255,255,.68);
    box-shadow: 0 0 12px rgba(36,119,255,.18);
}

.ovp-titlebox h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: .1px;
    color: #1f2937;
}

.ovp-titlebox p {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    color: #526174;
}

.ovp-actions {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px 8px;
    border-right: 1px solid var(--line);
}

.ovp-actions button,
.ovp-power span {
    width: 100%;
    height: 33px;
    border-radius: 8px;
    border: 1px solid rgba(36,119,255,.25);
    background: rgba(255,255,255,.78);
    color: var(--blue);
    font-size: 10px;
    font-weight: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ovp-power input { display: none; }

.ovp-power span {
    color: #238c43;
    border-color: rgba(50,200,95,.45);
}

.ovp-power input:not(:checked) + span {
    color: #7b8494;
    border-color: rgba(40,56,80,.14);
}

.ovp-bypass {
    color: #c2412d !important;
    border-color: rgba(232,107,75,.48) !important;
}

.ovp-knobs {
    grid-column: 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 9px 7px;
    border-right: 1px solid var(--line);
}

.ovp-knob-box {
    text-align: center;
    min-width: 0;
}

.ovp-knob-box label {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 950;
    color: #253044;
}

.ovp-knob {
    width: 42px;
    height: 42px;
    margin: auto;
    border-radius: 50%;
    border: 1px solid #aebed0;
    background: radial-gradient(circle at 45% 38%, #fff 0, #edf3f8 36%, #b8c4d4 38%, #fff 66%, #aab8c9 68%, #fff 100%);
    box-shadow: inset 0 0 6px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
    position: relative;
}

.ovp-knob::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 20px;
    width: 3px;
    height: 15px;
    border-radius: 4px;
    background: var(--blue);
}

.ovp-knob-box output {
    display: inline-block;
    min-width: 38px;
    height: 18px;
    line-height: 17px;
    margin-top: 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255,255,255,.82);
    color: var(--blue);
    font-size: 11px;
    font-weight: 950;
}

.ovp-curve {
    grid-column: 4;
    grid-row: 1 / 3;
    margin: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(#dce5ef 1px, transparent 1px), linear-gradient(90deg, #dce5ef 1px, transparent 1px), rgba(255,255,255,.52);
    background-size: 24px 14px;
    overflow: hidden;
}

.ovp-curve svg { width: 100%; height: 100%; }
.ovp-curve path { fill: none; stroke: var(--blue); stroke-width: 3; }
.ovp-curve line { stroke: rgba(36,119,255,.28); stroke-width: 2; }
.ovp-curve circle { fill: var(--blue); }

.ovp-meters {
    grid-column: 5;
    grid-row: 1;
    display: grid;
    grid-template-rows: 17px 42px;
    gap: 1px;
    padding: 6px 10px 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.ovp-leds,
.ovp-bars {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 7px;
    align-items: center;
}

.ovp-leds i {
    height: 9px;
    border: 1px solid rgba(36,119,255,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    position: relative;
}

.ovp-leds i::before {
    content: "";
    position: absolute;
    inset: 2px 7px;
    border-radius: 8px;
    background: var(--blue);
    box-shadow: 0 0 7px rgba(36,119,255,.40);
}

.ovp-bars b {
    height: 38px;
    border: 1px solid #b8c9df;
    border-radius: 6px;
    background: repeating-linear-gradient(to top, #27c443 0 4px, transparent 4px 6px, #facc15 6px 10px, transparent 10px 12px, #ff7a00 12px 16px, transparent 16px 18px, #ef4444 18px 22px, transparent 22px 24px);
    position: relative;
}

.ovp-bars b::before {
    content: attr(data-num);
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 900;
    color: #334155;
}

.ovp-controls {
    grid-column: 5;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 7px;
    padding: 3px 10px 8px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.ovp-fader {
    --accent: var(--blue);
    min-width: 0;
    display: grid;
    grid-template-rows: 13px 42px 15px;
    align-items: center;
    justify-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.70);
    text-align: center;
    padding: 3px 3px 2px;
    box-shadow: 0 4px 9px rgba(10,31,68,.05);
}

.ovp-fader h3 {
    margin: 0;
    font-size: 8px;
    line-height: 1;
    color: #1f2937;
    font-weight: 950;
}

.ovp-fader input {
    width: 18px;
    height: 40px;
    display: block;
    margin: 0;
    accent-color: var(--accent);
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
}

.ovp-fader output {
    display: block;
    width: 100%;
    height: 14px;
    line-height: 13px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--accent);
    background: rgba(255,255,255,.70);
    font-size: 8px;
    font-weight: 950;
    overflow: hidden;
}

.ovp-fader.blue { --accent: #2477ff; }
.ovp-fader.green { --accent: #32c85f; }
.ovp-fader.orange { --accent: #e59a2f; }
.ovp-fader.cyan { --accent: #14b8d4; }
.ovp-fader.purple { --accent: #7c3aed; }
.ovp-fader.pink { --accent: #db2777; }
.ovp-fader.yellow { --accent: #eab308; }
.ovp-fader.violet { --accent: #6d4aff; }

.ovp-preset {
    grid-column: 6;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px 30px 18px 10px;
    font-size: 10px;
    font-weight: 950;
    color: var(--blue);
}

.ovp-preset select {
    width: 100%;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    color: #253044;
    font-size: 11px;
    font-weight: 850;
    outline: 0;
    padding: 0 7px;
}

/* ==========================================================
   MEZCLADOR DE AUDIO 6.4
   Carátula clara, acorde al entorno actual
========================================================== */

.audio-mixer {
    margin-top: 18px;
    padding: 16px 18px 18px;
    border-radius: 24px;
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    color: var(--text);
}

.mixer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mixer-title {
    font-size: 18px;
    font-weight: 950;
    color: #1d4ed8;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.mixer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mixer-actions button,
.mixer-actions select {
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.68);
    color: #273044;
    font-weight: 850;
    padding: 0 12px;
}

.mixer-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 1.55fr;
    gap: 12px;
}

.mix-channel,
.mix-options {
    background: rgba(255,255,255,.58);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    min-height: 185px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.50);
}

.mix-channel h4 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 13px;
    color: #273044;
}

.mix-range {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.mix-range input {
    width: 22px;
    height: 94px;
    transform: none;
    accent-color: #32c85f;
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
}

.mix-value {
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 4px;
    font-weight: 950;
    color: #2477ff;
    background: rgba(255,255,255,.62);
}

.vu {
    height: 70px;
    width: 10px;
    border-radius: 8px;
    margin: auto;
    background: linear-gradient(0deg, #32c85f 35%, #facc15 66%, #e86b4b 100%);
    opacity: .92;
    filter: drop-shadow(0 0 6px rgba(50,200,95,.25));
}

.mix-options b {
    display: block;
    margin-bottom: 8px;
    color: #1f2937;
}

.mix-options label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin: 8px 0;
    color: #334155;
}

.mix-options input { accent-color: var(--blue); }

.mix-options select {
    width: 100%;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.72);
    color: #273044;
    font-weight: 800;
    margin-top: 5px;
}

@media (max-width: 1000px) {
    .mixer-grid { grid-template-columns: repeat(2, 1fr); }
    .mix-options { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
    .ovp-shell {
        height: auto;
        min-height: 140px;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .ovp-brandbar,
    .ovp-actions,
    .ovp-knobs,
    .ovp-curve,
    .ovp-meters,
    .ovp-controls,
    .ovp-preset {
        grid-column: 1;
        grid-row: auto;
        border-right: 0;
        border-left: 0;
    }

    .ovp-controls,
    .ovp-leds,
    .ovp-bars {
        grid-template-columns: repeat(3, 1fr);
    }
}


.tone-card{
    min-height:175px;
}

.tone-card label{
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:900;
    color:#334155;
}

.tone-card input[type="range"]{
    margin-top:4px;
}


/* ===== Colores individuales para las barras de Tono ===== */

#toneBrightness{
    accent-color:#facc15;   /* Amarillo mostaza */
}

#toneWarmth{
    accent-color:#ff7a00;   /* Naranja cálido */
}

#tonePresence{
    accent-color:#22c55e;   /* Verde neón */
}

/* ==========================================================
   OVERRIDE FINAL - PROCESADOR DE VOZ ESPECIAL 6.4 STUDIO 430
   Reemplaza visualmente el rack compacto anterior.
========================================================== */
.ovp-studio{
  width:100%;
  min-height:430px;
  margin:18px 0 18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(40,56,80,.14);
  border-radius:18px;
  box-shadow:0 18px 46px rgba(48,60,84,.14), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  position:relative;
}
.ovp-studio::before,.ovp-studio::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#202838;top:28px;box-shadow:0 292px 0 #202838;z-index:3}
.ovp-studio::before{left:12px}.ovp-studio::after{right:12px}
.ovp-studio-head{height:88px;padding:16px 22px 14px 44px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(40,56,80,.12);background:rgba(255,255,255,.42)}
.ovp-head-left{display:flex;align-items:center;gap:16px}.ovp-studio-logo{width:52px;height:52px;border:2px solid #0057ff;border-radius:50%;display:grid;place-items:center;color:#0057ff;font-size:28px;background:#fff;box-shadow:0 0 0 6px rgba(0,87,255,.04)}
.ovp-studio-head h2{margin:0;font-size:29px;line-height:.95;font-weight:950;letter-spacing:-.035em;color:#121a31}.ovp-studio-head p{margin:7px 0 0;font-size:16px;font-weight:650;color:#273044}
.ovp-head-actions{display:flex;gap:10px;align-items:center}.ovp-studio-power input{display:none}.ovp-studio-power span,.ovp-studio-reset{height:52px;min-width:165px;border-radius:8px;border:1px solid rgba(35,140,67,.45);background:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:950;color:#238c43;cursor:pointer}.ovp-studio-reset{border-color:rgba(36,119,255,.48);color:#0057ff}.ovp-studio-power input:not(:checked)+span{color:#7b8494;border-color:rgba(40,56,80,.18)}
.ovp-studio-main{height:228px;display:grid;grid-template-columns:200px 345px minmax(0,1fr);border-bottom:1px solid rgba(40,56,80,.12)}
.ovp-nav-pad{padding:18px 12px 18px 34px;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-right:1px solid rgba(40,56,80,.12)}
.ovp-nav-pad button{height:72px;border-radius:8px;border:1px solid rgba(40,56,80,.14);background:rgba(255,255,255,.72);color:#0057ff;font-size:13px;font-weight:950;box-shadow:0 6px 16px rgba(48,60,84,.10);cursor:pointer}.ovp-nav-pad button b{display:block;font-size:28px;line-height:1.05;margin-top:5px}.ovp-nav-pad #ovpBypass{color:#1456c8}
.ovp-eq-area{padding:12px 16px;display:grid;grid-template-rows:118px 68px 24px;border-right:1px solid rgba(40,56,80,.12)}.ovp-big-knobs{display:flex;justify-content:center;gap:34px}.studio-knob label{font-size:16px;color:#111827}.studio-knob .ovp-knob{width:84px;height:84px}.studio-knob .ovp-knob::before{top:13px;left:39px;width:6px;height:28px}.studio-knob output{display:block;margin:7px auto 0;border:0;background:transparent;font-size:18px;color:#0057ff;font-weight:950}.studio-knob small{display:block;font-size:12px;font-weight:850;color:#222}
.ovp-studio-curve{height:58px;border:1px solid rgba(40,56,80,.14);border-radius:8px;background:linear-gradient(#d9e3ee 1px,transparent 1px),linear-gradient(90deg,#d9e3ee 1px,transparent 1px),rgba(255,255,255,.62);background-size:38px 29px;overflow:hidden}.ovp-studio-curve svg{width:100%;height:100%}.ovp-studio-curve path{fill:none;stroke:#0057ff;stroke-width:3}.ovp-studio-curve line{stroke:rgba(36,119,255,.24);stroke-width:2}.ovp-studio-curve circle{fill:#0057ff}
.ovp-legend{display:flex;align-items:center;justify-content:center;gap:19px;font-size:12px;font-weight:900}.ovp-legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}.ovp-legend .green::before{background:#22a83a}.ovp-legend .orange::before{background:#f97316}.ovp-legend .red::before{background:#dc2626}.ovp-legend .yellow::before{background:#eab308}.ovp-legend .purple::before{background:#6d28d9}
.ovp-meter-area{padding:13px 26px 12px 20px}.ovp-mute-label{height:28px;font-size:16px;font-weight:900;color:#0057ff}.ovp-mute-label i{display:inline-block;width:18px;height:2px;background:#0057ff;margin-left:12px;vertical-align:middle}.ovp-meter-grid{display:grid;grid-template-columns:50px repeat(9,minmax(44px,1fr));gap:13px;align-items:end;height:158px}.ovp-scale{height:128px;display:flex;flex-direction:column;justify-content:space-between;align-items:end;font-size:13px;font-weight:800;color:#111827;padding-top:22px}.ovp-meter-strip{height:154px;position:relative;display:grid;grid-template-rows:26px 1fr 26px;justify-items:center}.ovp-meter-strip::before{content:attr(data-num);position:absolute;top:-22px;font-size:15px;font-weight:850;color:#111827}.ovp-meter-strip i{width:42px;height:22px;border-radius:10px;border:1px solid #b8c9df;background:linear-gradient(#fff,#eaf1f8);position:relative}.ovp-meter-strip i::after{content:"";position:absolute;inset:6px 11px;border-radius:9px;background:#096bff;box-shadow:0 0 8px rgba(9,107,255,.45)}.ovp-meter-strip b{width:38px;height:118px;border:1px solid #c8d6e7;border-radius:8px;background:repeating-linear-gradient(to top,#259e34 0 9px,transparent 9px 13px,#62bd35 13px 22px,transparent 22px 26px,#eed000 26px 35px,transparent 35px 39px,#f97316 39px 48px,transparent 48px 52px,#c82723 52px 61px,transparent 61px 65px);box-shadow:inset 0 0 5px rgba(0,0,0,.08);}.ovp-meter-strip em{width:42px;height:22px;border-radius:12px;border:1px solid #b8c9df;background:linear-gradient(#fff,#eaf1f8);position:relative}.ovp-meter-strip em::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#096bff;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 7px rgba(9,107,255,.45)}
.ovp-io-row{height:28px;margin-left:50px;display:grid;grid-template-columns:1fr 80px 1fr;gap:14px;align-items:center;color:#0057ff;font-weight:950;font-size:16px}.ovp-io-row span{display:flex;align-items:center;gap:10px}.ovp-io-row span::before,.ovp-io-row span::after{content:"";height:2px;background:#0057ff;flex:1;opacity:.85}.ovp-io-row button{height:28px;border-radius:8px;border:1px solid #0057ff;background:rgba(255,255,255,.76);color:#0057ff;font-weight:950}
.ovp-divider-title{height:42px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:0 26px;color:#273044}.ovp-divider-title span{height:1px;background:rgba(36,119,255,.26)}.ovp-divider-title b{font-size:17px;letter-spacing:.02em}
.ovp-studio-faders{height:176px;display:grid;grid-template-columns:repeat(9,1fr);gap:0;border-top:1px solid rgba(40,56,80,.08);border-bottom:1px solid rgba(40,56,80,.10)}.ovp-studio-faders .ovp-fader{height:176px;border:0;border-right:1px solid rgba(40,56,80,.12);border-radius:0;background:transparent;box-shadow:none;grid-template-rows:26px 26px 86px 32px;padding:8px 12px 6px}.ovp-studio-faders .ovp-fader h3{font-size:14px;color:#1b2537}.ovp-studio-faders .ovp-icon{font-size:25px;color:#0057ff;line-height:1}.ovp-studio-faders .ovp-fader input{width:26px;height:86px;accent-color:var(--accent);writing-mode:vertical-lr;direction:rtl;appearance:slider-vertical;-webkit-appearance:slider-vertical}.ovp-studio-faders .ovp-fader output{width:100%;height:32px;line-height:30px;border-radius:7px;font-size:17px;background:rgba(255,255,255,.70);border:1px solid rgba(40,56,80,.10);color:var(--accent)}
.ovp-fader.blue{--accent:#0057ff}.ovp-fader.green{--accent:#27a645}.ovp-fader.orange{--accent:#d98b1f}.ovp-fader.cyan{--accent:#06a9d5}.ovp-fader.purple{--accent:#6736e8}.ovp-fader.pink{--accent:#db2777}.ovp-fader.yellow{--accent:#d4a400}.ovp-fader.violet{--accent:#4f46e5}
.ovp-studio-footer{height:62px;display:grid;grid-template-columns:220px 1fr 220px 255px;gap:16px;align-items:center;padding:10px 26px 10px}.ovp-footer-btn{height:45px;border-radius:8px;border:1px solid rgba(36,119,255,.32);background:rgba(255,255,255,.70);color:#0057ff;font-size:15px;font-weight:950;cursor:pointer}.ovp-current-preset{display:grid;grid-template-columns:auto minmax(220px,380px);justify-content:center;align-items:center;gap:12px;font-size:15px;color:#0057ff;font-weight:950}.ovp-current-preset select{height:40px;border-radius:8px;background:rgba(255,255,255,.74);border:1px solid rgba(40,56,80,.14);font-size:15px;color:#111827}
@media(max-width:1100px){.ovp-studio{min-height:auto}.ovp-studio-main{height:auto;grid-template-columns:1fr}.ovp-nav-pad{grid-template-columns:repeat(3,1fr);padding:16px}.ovp-eq-area{border-top:1px solid rgba(40,56,80,.12);border-right:0}.ovp-meter-grid{grid-template-columns:50px repeat(3,1fr);height:auto}.ovp-meter-area{overflow:auto}.ovp-studio-faders{height:auto;grid-template-columns:repeat(3,1fr)}.ovp-studio-faders .ovp-fader{height:176px}.ovp-studio-footer{height:auto;grid-template-columns:1fr}.ovp-current-preset{grid-template-columns:1fr}}


/* ==========================================================
   PROCESADOR DE VOZ ESPECIAL 6.4 - CLEAN CORE PANEL
   Carátula nueva: compacta, alineada, sin vumeters fuera de foco.
   Alto controlado: 280px aprox. No usa clases viejas .ovp-*.
========================================================== */
.vcore-panel{
  width:100%;
  height:280px;
  margin:16px 0 18px;
  padding:0;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(40,56,80,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.62));
  box-shadow:0 18px 45px rgba(48,60,84,.14), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  position:relative;
}
.vcore-panel::before,.vcore-panel::after{content:"";position:absolute;top:28px;width:14px;height:14px;border-radius:50%;background:#202938;box-shadow:0 205px 0 #202938;opacity:.92;z-index:2}.vcore-panel::before{left:18px}.vcore-panel::after{right:18px}
.vcore-top{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px 12px 58px;border-bottom:1px solid rgba(40,56,80,.10)}
.vcore-brand{display:flex;align-items:center;gap:14px;min-width:0}.vcore-mark{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;color:#0b63ff;font-size:34px;font-weight:900;background:linear-gradient(180deg,#fff,#edf4ff);border:1px solid rgba(36,119,255,.25);box-shadow:0 8px 22px rgba(36,119,255,.12)}
.vcore-brand h2{margin:0;font-size:28px;line-height:.95;letter-spacing:-.04em;color:#151b2c;font-weight:950}.vcore-brand p{margin:8px 0 0;color:#3d485a;font-weight:800;font-size:14px}.vcore-actions{display:flex;align-items:center;gap:10px;padding-right:28px}.vcore-actions button,.vcore-toggle span{height:44px;min-width:120px;border-radius:14px;border:1px solid rgba(36,119,255,.22);background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;font-weight:950;color:#1d4ed8;letter-spacing:.02em;box-shadow:0 8px 18px rgba(48,60,84,.08);cursor:pointer}.vcore-toggle input{display:none}.vcore-toggle span{color:#23723a;border-color:rgba(50,200,95,.35)}.vcore-toggle input:not(:checked)+span{color:#707b8b}.vcore-actions #ovpBypass{color:#7b4b23;border-color:rgba(229,154,47,.34)}
.vcore-body{height:158px;display:grid;grid-template-columns:250px minmax(360px,1fr) 430px;gap:16px;padding:16px 44px 12px 58px;align-items:stretch}.vcore-status{border-right:1px solid rgba(40,56,80,.10);padding-right:16px;display:grid;grid-template-rows:34px 1fr 48px;gap:10px}.vcore-chip{height:34px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(40,56,80,.10);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:950;color:#2d405d}.vcore-chip b{width:9px;height:9px;border-radius:50%;background:#32c85f;box-shadow:0 0 0 5px rgba(50,200,95,.12)}.vcore-preset-box label{display:block;margin-bottom:8px;font-size:12px;font-weight:950;color:#1d4ed8}.vcore-preset-box select{height:46px;border-radius:14px;background:rgba(255,255,255,.78);font-weight:900}.vcore-mini-readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vcore-mini-readouts div{border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(40,56,80,.10);display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:0 12px}.vcore-mini-readouts span{font-size:11px;font-weight:950;color:#64748b}.vcore-mini-readouts strong{font-size:18px;color:#0b63ff}.vcore-mini-readouts small{font-size:10px;color:#64748b;font-weight:900;margin-left:3px}
.vcore-sliders{display:grid;grid-template-rows:repeat(5,1fr);gap:8px}.vcore-line{--accent:#2477ff;display:grid;grid-template-columns:118px 1fr 70px;gap:12px;align-items:center;height:24px}.vcore-line label{font-size:12px;font-weight:950;text-transform:uppercase;color:#263449}.vcore-line input{width:100%;height:18px;accent-color:var(--accent)}.vcore-line output{height:28px;border-radius:10px;background:rgba(255,255,255,.72);border:1px solid rgba(40,56,80,.10);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:950;font-size:13px}.vcore-line.blue,.vcore-dial.blue{--accent:#2477ff}.vcore-line.green{--accent:#2f8f45}.vcore-line.orange{--accent:#c47c25}.vcore-line.cyan{--accent:#159ec2}.vcore-line.purple{--accent:#594be3}.vcore-dial.pink{--accent:#b73173}.vcore-dial.yellow{--accent:#b98a20}.vcore-dial.violet{--accent:#293f9e}
.vcore-mix{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.vcore-dial{--accent:#2477ff;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(40,56,80,.10);padding:12px 10px;display:grid;grid-template-rows:24px 1fr 30px;align-items:center;justify-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}.vcore-dial span{font-size:12px;text-transform:uppercase;font-weight:950;color:#263449;text-align:center}.vcore-dial input{width:96px;accent-color:var(--accent)}.vcore-dial output{min-width:70px;height:30px;border-radius:10px;background:rgba(255,255,255,.76);border:1px solid rgba(40,56,80,.10);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:950}
.vcore-bottom{height:50px;display:grid;grid-template-columns:minmax(200px,1fr) 180px 180px 220px;gap:14px;align-items:center;padding:8px 44px 12px 58px;border-top:1px solid rgba(40,56,80,.09)}.vcore-signal{height:26px;border-radius:999px;background:rgba(255,255,255,.54);border:1px solid rgba(40,56,80,.08);display:flex;align-items:center;gap:6px;padding:0 13px;overflow:hidden}.vcore-signal i{height:8px;flex:1;border-radius:6px;background:linear-gradient(90deg,#32c85f,#e5c42f,#e86b4b);opacity:.75}.vcore-soft-btn{height:36px;border-radius:12px;border:1px solid rgba(36,119,255,.20);background:rgba(255,255,255,.68);color:#1d4ed8;font-weight:950;cursor:pointer}.vcore-soft-btn.strong{border-color:rgba(36,119,255,.35);background:rgba(36,119,255,.08)}
@media(max-width:1050px){.vcore-panel{height:auto}.vcore-body{height:auto;grid-template-columns:1fr}.vcore-status{border-right:0;padding-right:0}.vcore-bottom{grid-template-columns:1fr 1fr}.vcore-signal{grid-column:1/-1}.vcore-mix{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.vcore-top{height:auto;align-items:flex-start;flex-direction:column;padding-left:24px}.vcore-actions{padding-right:0;flex-wrap:wrap}.vcore-body{padding:14px 20px}.vcore-bottom{padding:10px 20px;grid-template-columns:1fr}.vcore-brand h2{font-size:22px}.vcore-line{grid-template-columns:1fr}.vcore-line{height:auto}.vcore-mix{grid-template-columns:1fr}.vcore-panel::before,.vcore-panel::after{display:none}}


/* ==========================================================
   PROCESADOR DE VOZ ESPECIAL 6.4 - RACK UNIFORME 400
   Sustituye únicamente el procesador, sin tocar el resto.
   Ajuste rápido:
   --ovp400-height: 400px;
   --ovp400-width: 100%;
========================================================== */
:root{
  --ovp400-width:100%;
  --ovp400-height:400px;
  --ovp400-blue:#2477ff;
  --ovp400-green:#32c85f;
  --ovp400-gold:#e59a2f;
  --ovp400-red:#d64b3f;
  --ovp400-line:rgba(40,56,80,.14);
  --ovp400-text:#1e2433;
}

.ovp400{
  width:var(--ovp400-width);
  max-width:100%;
  height:var(--ovp400-height);
  margin:12px 0 16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--ovp400-line);
  border-radius:22px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  color:var(--ovp400-text);
  overflow:hidden;
  position:relative;
}

.ovp400-header{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 20px;
  border-bottom:1px solid var(--ovp400-line);
}

.ovp400-title{display:flex;align-items:center;gap:12px;min-width:0}
.ovp400-logo{width:42px;height:42px;border:1.5px solid var(--ovp400-blue);border-radius:50%;display:grid;place-items:center;color:var(--ovp400-blue);font-size:26px;font-weight:950;background:rgba(255,255,255,.55)}
.ovp400-title h2{margin:0;font-size:22px;line-height:1;font-weight:950;letter-spacing:-.03em;color:#1f2937}
.ovp400-title p{margin:3px 0 0;font-size:12px;font-weight:750;color:#526174}

.ovp400-status{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ovp400-status button,.ovp400-power span{height:32px;min-width:96px;border-radius:10px;border:1px solid var(--ovp400-line);background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:950;cursor:pointer;box-shadow:0 6px 14px rgba(48,60,84,.07)}
.ovp400-power input{display:none}.ovp400-power span{color:#238c43;border-color:rgba(50,200,95,.42)}.ovp400-power input:not(:checked)+span{color:#7b8494;border-color:rgba(40,56,80,.14)}
.ovp400 .status-reset{color:var(--ovp400-blue);border-color:rgba(36,119,255,.30)}
.ovp400 .status-bypass{color:#9a4b20;border-color:rgba(229,154,47,.40)}
.ovp400 .status-bypass.on{color:var(--ovp400-red);border-color:rgba(214,75,63,.55);background:rgba(255,235,232,.78)}

.ovp400-rack{height:106px;margin:10px 14px 5px;display:grid;grid-template-columns:150px 166px 190px minmax(0,1fr);border:1px solid var(--ovp400-line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.50);position:relative}.ovp400-rack:before,.ovp400-rack:after{content:"";position:absolute;top:10px;width:10px;height:10px;border-radius:50%;background:#2b3341;box-shadow:0 76px 0 #2b3341;z-index:5}.ovp400-rack:before{left:8px}.ovp400-rack:after{right:8px}
.rack-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px 8px 9px 24px;border-right:1px solid var(--ovp400-line)}.rack-nav button{border:1px solid rgba(36,119,255,.22);background:rgba(255,255,255,.70);border-radius:8px;color:var(--ovp400-blue);font-size:10px;font-weight:950;cursor:pointer}.rack-nav span{display:block;font-size:16px;line-height:12px}.rack-nav button:active{transform:scale(.97)}

.rack-master-faders{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:7px 9px;border-right:1px solid var(--ovp400-line)}.mini-fader{border:1px solid rgba(40,56,80,.12);border-radius:10px;background:rgba(255,255,255,.62);text-align:center;padding:4px 3px}.mini-fader label{display:block;height:13px;line-height:13px;font-size:10px;font-weight:950;color:#263449}.mini-fader input{width:22px;height:52px;writing-mode:bt-lr;appearance:slider-vertical;-webkit-appearance:slider-vertical;accent-color:var(--ovp400-blue);display:block;margin:1px auto}.mini-fader output{display:block;height:16px;line-height:15px;border:1px solid var(--ovp400-line);border-radius:5px;color:var(--ovp400-blue);font-size:10px;font-weight:950;background:rgba(255,255,255,.72)}

.rack-curve{padding:8px 8px 4px;border-right:1px solid var(--ovp400-line)}.rack-curve svg{width:100%;height:64px;border:1px solid var(--ovp400-line);border-radius:8px;background:linear-gradient(#dce5ef 1px,transparent 1px),linear-gradient(90deg,#dce5ef 1px,transparent 1px),rgba(255,255,255,.45);background-size:22px 13px}.rack-curve path{fill:none;stroke:var(--ovp400-blue);stroke-width:3}.rack-curve line{stroke:rgba(36,119,255,.28);stroke-width:2}.rack-curve circle{fill:var(--ovp400-blue)}.ovp400 .legend{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:3px;font-size:9px;font-weight:850}.ovp400 .legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px}.ovp400 .g{background:#22c55e}.ovp400 .o{background:#f97316}.ovp400 .r{background:#ef4444}.ovp400 .y{background:#facc15}

.rack-meters{padding:5px 16px 5px 10px}.meter-head{display:grid;grid-template-columns:1fr 56px 1fr;text-align:center;align-items:center;color:var(--ovp400-blue);font-size:12px;font-weight:950;margin-bottom:2px}.meter-head b{border-top:1px solid rgba(36,119,255,.35);padding-top:2px}.meter-head em{font-style:normal;color:#64748b;font-size:10px}.meter-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}.ovp-channel{text-align:center;min-width:0}.ovp-channel span{display:block;font-size:8px;line-height:8px;font-weight:950}.ovp-channel input{width:10px;height:10px;accent-color:var(--ovp400-blue);margin:0}.ovp-vu{width:18px;height:48px;margin:0 auto 2px;border:1px solid #b8c9df;border-radius:5px;background:rgba(255,255,255,.75);display:flex;flex-direction:column-reverse;gap:2px;padding:3px}.ovp-vu i{height:4px;border-radius:2px}.ovp-vu .green{background:#22c55e}.ovp-vu .yellow{background:#facc15}.ovp-vu .orange{background:#f97316}.ovp-vu .red{background:#ef4444}.ovp-channel button{width:18px;height:11px;border:1px solid rgba(36,119,255,.35);background:#eaf3ff;border-radius:10px;padding:0}.ovp-channel button:before{content:"";display:block;width:7px;height:7px;margin:auto;border-radius:50%;background:var(--ovp400-blue)}

.processor-line{height:19px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 32px}.processor-line span{height:1px;background:rgba(36,119,255,.32)}.processor-line b{font-size:12px;white-space:nowrap;color:#263449;font-weight:950}
.processor-controls{height:116px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;padding:0 14px 8px}.pro-fader{--accent:var(--ovp400-blue);border:1px solid rgba(40,56,80,.12);border-radius:10px;background:rgba(255,255,255,.58);text-align:center;padding:5px 4px;box-shadow:0 4px 9px rgba(48,60,84,.05)}.pro-fader label{display:block;height:14px;line-height:14px;font-size:9px;font-weight:950;color:#263449}.pro-fader input{width:22px;height:62px;writing-mode:bt-lr;appearance:slider-vertical;-webkit-appearance:slider-vertical;accent-color:var(--accent);display:block;margin:2px auto}.pro-fader output{display:block;height:18px;line-height:17px;border:1px solid var(--ovp400-line);border-radius:5px;color:var(--accent);font-size:10px;font-weight:950;background:rgba(255,255,255,.70);overflow:hidden}.pro-fader.blue{--accent:#2477ff}.pro-fader.green{--accent:#32c85f}.pro-fader.orange{--accent:#e59a2f}.pro-fader.cyan{--accent:#14b8d4}.pro-fader.purple{--accent:#7c3aed}.pro-fader.pink{--accent:#db2777}.pro-fader.yellow{--accent:#eab308}.pro-fader.violet{--accent:#6d4aff}

.ovp400-footer{height:38px;display:grid;grid-template-columns:170px minmax(0,1fr) 160px 190px;gap:10px;padding:0 14px 8px}.ovp400-footer button,.ovp400-footer label{height:30px;border:1px solid var(--ovp400-line);border-radius:8px;background:rgba(255,255,255,.70);color:var(--ovp400-blue);font-size:11px;font-weight:950;display:flex;align-items:center;justify-content:center;overflow:hidden}.ovp400-footer label{justify-content:flex-start;padding:0 10px}.ovp400-footer label span{margin-right:8px;white-space:nowrap}.ovp400-footer select{height:26px;flex:1;border:0;outline:0;background:transparent;font-size:11px;font-weight:850;color:#253044;min-width:0}.ovp400-footer .engine{color:#7c3aed;border-color:rgba(124,58,237,.28)}.ovp400-displays{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:950px){.ovp400{height:auto}.ovp400-header{height:auto;align-items:flex-start;flex-direction:column}.ovp400-rack{height:auto;grid-template-columns:1fr}.rack-nav,.rack-master-faders,.rack-curve{border-right:0;border-bottom:1px solid var(--ovp400-line)}.processor-controls,.meter-grid{grid-template-columns:repeat(3,1fr);height:auto}.ovp400-footer{height:auto;grid-template-columns:1fr}.ovp400-footer button,.ovp400-footer label{height:34px}}


/* =====================================================
   OPENNEWS 6.4
   TARJETA VELOCIDAD — CORRECCIÓN DE NITIDEZ
===================================================== */

.speed-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background-image:url("../images/ui/speed-bg.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    background-color:#07132c;

    transition:transform .35s ease, box-shadow .35s ease;
}

.speed-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(3,15,40,.38) 0%,
            rgba(3,15,40,.14) 38%,
            rgba(3,15,40,0) 68%
        );

    pointer-events:none;
    z-index:0;
}

.speed-card::after{
    content:"";
    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.20) 0%,
            rgba(0,120,255,.08) 40%,
            transparent 72%
        );

    top:18%;
    left:32%;

    pointer-events:none;
    z-index:1;

    animation:speedGlow 6s ease-in-out infinite;
}

.speed-card > *{
    position:relative;
    z-index:2;
}

.speed-card h3,
.speed-card .value{
    color:#fff;

    text-shadow:
        0 2px 4px rgba(0,0,0,.85),
        0 0 10px rgba(0,80,180,.55);
}

.speed-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 0 24px rgba(0,128,255,.16);
}

@keyframes speedGlow{
    0%,100%{
        transform:scale(.92);
        opacity:.25;
    }

    50%{
        transform:scale(1.12);
        opacity:.55;
    }
}

/* ==========================================================
   OPENNEWS 6.4
   PATCH FINAL — MEZCLADOR OSCURO
   Conserva estructura y funciones del mezclador claro.
   Solo reemplaza colores, bordes, fondos y sombras.
========================================================== */

.audio-mixer{
    background:linear-gradient(180deg,#101722 0%,#070b12 100%) !important;
    border:1px solid rgba(0,220,255,.25) !important;
    border-radius:18px !important;
    color:#e8f2ff !important;
    box-shadow:
        0 0 0 1px rgba(168,85,247,.25),
        0 18px 50px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.audio-mixer .mixer-title{
    background:linear-gradient(90deg,#a855f7,#06b6d4) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
}

.audio-mixer .mixer-actions button,
.audio-mixer .mixer-actions select{
    border:1px solid rgba(255,255,255,.13) !important;
    background:rgba(255,255,255,.06) !important;
    color:#e8f2ff !important;
    border-radius:9px !important;
}

.audio-mixer .mixer-actions select option,
.audio-mixer .mix-options select option{
    background:#111827;
    color:#e8f2ff;
}

.audio-mixer .mix-channel,
.audio-mixer .mix-options{
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:8px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.audio-mixer .mix-channel h4,
.audio-mixer .mix-options b{
    color:#e8f2ff !important;
}

.audio-mixer .mix-options label{
    color:#d8e6f7 !important;
}

.audio-mixer .mix-value{
    border:1px solid rgba(255,255,255,.11) !important;
    background:rgba(7,11,18,.72) !important;
    color:#60a5fa !important;
    border-radius:8px !important;
}

.audio-mixer .mix-options select{
    border:1px solid rgba(255,255,255,.13) !important;
    background:#111827 !important;
    color:#e8f2ff !important;
    border-radius:8px !important;
}

.audio-mixer .mix-options input{
    accent-color:#1687ff !important;
}

.audio-mixer .mix-range input{
    accent-color:#22c55e !important;
}

.audio-mixer .vu{
    background:linear-gradient(
        0deg,
        #22c55e 35%,
        #facc15 65%,
        #ef4444 100%
    ) !important;
    opacity:.85 !important;
    filter:drop-shadow(0 0 8px rgba(34,197,94,.35)) !important;
}




/* ==========================================================
   PATCH #005
   Reducir botones BACK / NEXT / MENU / ENTER
========================================================== */

.rack-nav{
    gap:4px;
    padding:8px 8px 8px 22px;
}

.rack-nav button{

    height:36px;

    border-radius:6px;

    font-size:9px;

    line-height:1;

    padding:2px;

    font-weight:900;
}

.rack-nav button span{

    display:block;

    margin-top:2px;

    font-size:13px;

    line-height:1;
}



/* ==========================================================
   OPENNEWS 6.4
   PATCH SIDEBAR DAVID iA
========================================================== */

:root{
    --sidebar-width:161px;
}

body{
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(156,202,255,.40),
            transparent 34%
        ),
        linear-gradient(135deg,#f4f8fd,#e8f0fa) !important;
}

.wrap{
    width:auto;
    max-width:1180px !important;

    margin-left:calc(var(--sidebar-width) + 18px) !important;
    margin-right:auto !important;
}

.ms-sidebar{
    position:fixed;
    left:0;
    top:0;

    width:var(--sidebar-width);
    height:100vh;

    padding:18px 12px;

    background:rgba(255,255,255,.90);
    border-right:1px solid rgba(40,56,80,.10);

    box-shadow:6px 0 18px rgba(48,60,84,.08);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    display:flex;
    flex-direction:column;

    overflow-y:auto;
    z-index:999;
}

.ms-brand{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:24px;

    font-size:18px;
    font-weight:800;
    color:#1f2937;
}

.ms-logo{
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        conic-gradient(
            from 90deg,
            #f25022 0deg 90deg,
            #7fba00 90deg 180deg,
            #00a4ef 180deg 270deg,
            #ffb900 270deg 360deg
        );

    color:transparent;
}

.ms-menu{
    display:grid;
    gap:8px;

}

.ms-menu button{
    width:100%;
    height:44px;

    padding:0 14px;

    border:none;
    border-radius:12px;

    background:transparent;

    text-align:left;
    font-size:15px;
    font-weight:700;
    color:#263343;

    cursor:pointer;
    transition:
        background .20s ease,
        color .20s ease,
        transform .20s ease;
}

.ms-menu button:hover{
    background:#f2f7fd;
    color:#0067ff;
    transform:translateX(1px);
        transform:none;

}

.ms-menu button.active{
    background:#eef6ff;
    color:#0067ff;
}

.ms-info-card{
    margin-top:auto;
    padding:14px;

    border-radius:14px;

    background:#fff;
    border:1px solid rgba(40,56,80,.10);

    box-shadow:0 8px 20px rgba(48,60,84,.08);
}

.ms-info-card h3{
    margin:0 0 8px;
    font-size:18px;
    color:#1f2937;
}

.ms-info-card p{
    margin:0;

    font-size:13px;
    line-height:1.4;
    color:#425166;
}

.ms-info-card a{
    display:block;

    margin-top:10px;
    padding-top:10px;

    border-top:1px solid rgba(40,56,80,.10);

    font-size:14px;
    font-weight:800;
    color:#0067ff;

    text-decoration:none;
}

@media(max-width:950px){

    .ms-sidebar{
        position:relative;

        width:100%;
        height:auto;

        overflow:visible;
    }

    .wrap{
        width:auto;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .ms-menu{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ms-info-card{
        margin-top:18px;
    }
}
    




/* ==========================================================
   ICONOS SVG DEL MENÚ LATERAL
========================================================== */

.ms-nav-icon{
    width:20px;
    height:20px;

    flex:0 0 20px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        color .20s ease,
        filter .20s ease;
}

/* Algunos iconos usan relleno */
.icon-inicio path,
.icon-efectos path{
    fill:currentColor;
    stroke:none;
}

/* Colores por módulo */
.icon-inicio{
    color:#1473e6;
}

.icon-narracion{
    color:#00a6c7;
}

.icon-voces{
    color:#7657d5;
}

.icon-efectos{
    color:#f2a400;
}

.icon-mezclador{
    color:#11a56b;
}

.icon-historial{
    color:#e45873;
}

.icon-ajustes{
    color:#66758a;
}

/* El texto conserva su color normal */
.ms-menu button span{
    color:#263343;
}

/* Al pasar el cursor, solo se realza el icono */
.ms-menu button:hover .ms-nav-icon{
    filter:brightness(1.12);
}

/* Botón seleccionado */
.ms-menu button.active .ms-nav-icon{
    filter:
        brightness(1.05)
        drop-shadow(0 2px 3px rgba(0,0,0,.12));
}


/* ==========================================================
   OPENNEWS 6.4
   PANEL FLOTANTE DEL MANUAL DE USUARIO

   ✔ Se abre únicamente al hacer clic en Ajustes.
   ✔ Ocupa aproximadamente el 48 % de la pantalla.
   ✔ Mantiene visible la aplicación principal.
   ✔ Tiene desplazamiento interno.
   ✔ Se cierra al sacar el cursor.
========================================================== */

.manual-floating-panel {
    position: fixed;

    /* Debe coincidir aproximadamente con el ancho del menú izquierdo */
    left: var(--sidebar-width, 250px);

    top: 14px;
    bottom: 14px;

    /* Casi la mitad de la pantalla */
    width: min(900px, 48vw);

    background: #0d1117;
    border: 1px solid rgba(0, 229, 255, 0.32);
    border-radius: 18px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(0, 229, 255, 0.10);

    overflow: hidden;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-22px) scale(0.985);

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}

/* Estado abierto */
.manual-floating-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

/* Cabecera del panel */
.manual-panel-header {
    height: 68px;
    padding: 10px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        135deg,
        #17212b,
        #101820
    );

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.manual-panel-header strong {
    display: block;
    color: #00e5ff;
    font-size: 17px;
}

.manual-panel-header span {
    display: block;
    margin-top: 2px;
    color: #a9b3bf;
    font-size: 12px;
}

/* Botón de cierre de respaldo */
.manual-close-button {
    width: 36px;
    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.manual-close-button:hover {
    background: rgba(255, 100, 100, 0.18);
    border-color: rgba(255, 100, 100, 0.55);
}

/* HTML completo del manual */
.manual-iframe {
    display: block;

    width: 100%;
    height: calc(100% - 68px);

    border: 0;
    background: #0d1117;
}

/* Pantallas medianas */
@media (max-width: 1100px) {
    .manual-floating-panel {
        left: var(--sidebar-width, 230px);
        width: calc(100vw - var(--sidebar-width, 230px) - 18px);
    }
}

/* Teléfonos y tabletas pequeñas */
@media (max-width: 760px) {
    .manual-floating-panel {
        left: 4vw;
        right: 4vw;
        top: 3vh;
        bottom: 3vh;

        width: auto;
        max-width: none;
    }
}




/* ==========================================================
   PANEL INFORMATIVO INTEGRADO
   NARRADOR DE TEXTO A VOZ 6.4
========================================================== */

.app-info-panel{
    margin-top:24px;
    padding:26px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(18,27,39,.98),
            rgba(11,18,28,.98)
        );

    border:1px solid rgba(0,200,255,.16);

    box-shadow:
        0 14px 34px rgba(23,35,54,.16),
        inset 0 1px 0 rgba(255,255,255,.04);

    color:#ffffff;
    overflow:hidden;
}

/* CABECERA */

.app-info-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    padding-bottom:20px;
    margin-bottom:22px;

    border-bottom:1px solid rgba(255,255,255,.10);
}

.app-info-header h3{
    margin:0 0 7px;

    color:#35d6ff;

    font-size:20px;
    font-weight:800;
}

.app-info-header p{
    margin:0;

    color:#c8d3df;

    font-size:14px;
    line-height:1.5;
}

.app-info-badge{
    flex:0 0 auto;

    padding:8px 12px;

    border-radius:999px;

    background:rgba(0,195,255,.12);
    border:1px solid rgba(0,195,255,.25);

    color:#5de0ff;

    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

/* COLUMNAS */

.app-info-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}

.app-info-column h4{
    margin:0 0 12px;

    color:#35d6ff;

    font-size:15px;
    font-weight:800;
}

.app-info-column p{
    margin:7px 0;

    color:#d8e1ea;

    font-size:14px;
    line-height:1.45;
}

.app-info-column a{
    color:#d8e1ea;
    text-decoration:none;
}

.app-info-column a:hover{
    color:#5de0ff;
}

/* ENLACES LEGALES */

.app-info-link{
    display:block;
    margin:8px 0;

    font-size:14px;
}

/* REDES SOCIALES */

.app-social-links{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:8px;
}

.app-social-links a{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.app-social-links a:hover{
    background:rgba(0,195,255,.18);
    border-color:#35d6ff;

    transform:
        translateY(-2px)
        scale(1.08);
}

.app-social-links a:hover img{
    filter:
        brightness(1.35)
        contrast(1.30)
        saturate(1.35);
}

.app-social-links img{
    width:32px;
    height:32px;

    object-fit:contain;
    display:block;

    filter:
        brightness(1.15)
        contrast(1.15)
        saturate(1.20);

    transition:
        transform .18s ease,
        filter .18s ease;
}

/* PIE INFERIOR */

.app-info-footer{
    margin-top:24px;
    padding-top:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 18px;

    border-top:1px solid rgba(255,255,255,.10);

    color:#9eacba;

    font-size:12px;
    text-align:center;
}

.app-info-footer span:not(:last-child)::after{
    content:"•";
    margin-left:18px;
    color:#35d6ff;
}

/* RESPONSIVE */

@media(max-width:850px){

    .app-info-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .app-info-header{
        flex-direction:column;
    }

    .app-info-footer span:not(:last-child)::after{
        display:none;
    }
}

/* botton de windows cerrar*/

/*==========================================
  BOTONES DEL MANUAL
==========================================*/

.manual-buttons{
    display:flex;
    align-items:center;
    gap:8px;
}

.manual-window-button,
.manual-close-button{

    width:28px;
    height:28px;

    border:none;
    border-radius:8px;

    cursor:pointer;

    color:#fff;

    font-size:18px;

    transition:.20s;

}

.manual-window-button{

    background:#3b82f6;

}

.manual-window-button:hover{

    background:#2563eb;

}

.manual-close-button{

    background:#d32f2f;

}

.manual-close-button:hover{

    background:#ef4444;

}


/*==========================================
  MANUAL AMPLIADO
==========================================*/

.manual-floating-panel.maximized{

    position:fixed;

    top:18px;
    left:18px;
    right:18px;
    bottom:18px;

    width:auto !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    z-index:999999;

}

/*==========================================
  parche para control de botones centrados 
==========================================*/

.controls{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:18px auto 0;
    padding:0;
}


/* ==========================================================
   OPENNEWS 6.4 PRO
   MORFOLOGÍA VOCAL DEL NAVEGADOR

   CONTROLES:
   ✔ Inocencia
   ✔ Energía
   ✔ Diseño compacto
   ✔ Colores neón diferenciados
   ✔ No modifica JavaScript
========================================================== */


/* ==========================================================
   TARJETA TONO
   Se mantiene alineada con las demás tarjetas
========================================================== */

#normalGrid .vocal-tone-card{
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    box-sizing: border-box;
    overflow: hidden;
}


/* ==========================================================
   MORFOLOGÍA VOCAL
========================================================== */

.vocal-morphology{
    margin-top: 7px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vocal-morphology-title{
    margin: 0 0 2px;
    padding: 0;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 700;
    color: #202020;
}


/* Cada fader */

.vocal-morphology-control{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    margin: 0;
    padding: 0;
}

.vocal-morphology-control label{
    grid-column: 1 / 2;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.05;
    font-weight: 800;
    color: #202020;
}

.vocal-morphology-control output{
    grid-column: 2 / 3;
    grid-row: 1;
    min-width: 28px;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    color: #444;
}


/* ==========================================================
   ESTRUCTURA GENERAL DE LOS FADERS
========================================================== */

.vocal-morphology-control input[type="range"]{
    grid-column: 1 / 3;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

.vocal-morphology-control input[type="range"]::-webkit-slider-runnable-track{
    height: 6px;
    border-radius: 999px;
    background: #252525;
    box-shadow:
        inset 0 0 2px rgba(255,255,255,.25),
        0 0 5px rgba(0,0,0,.15);
}

.vocal-morphology-control input[type="range"]::-moz-range-track{
    height: 6px;
    border-radius: 999px;
    background: #252525;
}


/* ==========================================================
   INOCENCIA — CIAN NEÓN
========================================================== */

#vocalInnocence::-webkit-slider-runnable-track{
    background: linear-gradient(
        90deg,
        #00e5ff 0%,
        #00b8d4 50%,
        #252525 50%,
        #252525 100%
    );

    box-shadow:
        0 0 6px rgba(0,229,255,.75),
        inset 0 0 2px rgba(255,255,255,.30);
}

#vocalInnocence::-webkit-slider-thumb{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid #d9fbff;
    border-radius: 50%;
    background: #00d9f5;

    box-shadow:
        0 0 5px #00e5ff,
        0 0 10px rgba(0,229,255,.90);
}

#vocalInnocence::-moz-range-progress{
    height: 6px;
    border-radius: 999px;
    background: #00d9f5;
    box-shadow: 0 0 7px #00e5ff;
}

#vocalInnocence::-moz-range-thumb{
    width: 15px;
    height: 15px;
    border: 2px solid #d9fbff;
    border-radius: 50%;
    background: #00d9f5;
    box-shadow: 0 0 8px #00e5ff;
}


/* ==========================================================
   ENERGÍA — ROSA/ROJO NEÓN
========================================================== */

#vocalEnergy::-webkit-slider-runnable-track{
    background: linear-gradient(
        90deg,
        #ff2f86 0%,
        #ff1744 50%,
        #252525 50%,
        #252525 100%
    );

    box-shadow:
        0 0 6px rgba(255,47,134,.75),
        inset 0 0 2px rgba(255,255,255,.30);
}

#vocalEnergy::-webkit-slider-thumb{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid #ffe0eb;
    border-radius: 50%;
    background: #ff276f;

    box-shadow:
        0 0 5px #ff2f86,
        0 0 10px rgba(255,47,134,.90);
}

#vocalEnergy::-moz-range-progress{
    height: 6px;
    border-radius: 999px;
    background: #ff276f;
    box-shadow: 0 0 7px #ff2f86;
}

#vocalEnergy::-moz-range-thumb{
    width: 15px;
    height: 15px;
    border: 2px solid #ffe0eb;
    border-radius: 50%;
    background: #ff276f;
    box-shadow: 0 0 8px #ff2f86;
}


/* ==========================================================
   TONO PRINCIPAL COMPACTO
========================================================== */

#normalGrid .vocal-tone-card #pitch{
    margin-bottom: 2px;
}

#normalGrid .vocal-tone-card #pitchVal{
    margin-top: 0;
    margin-bottom: 3px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px){

    #normalGrid .vocal-tone-card{
        height: auto;
        min-height: 310px;
        max-height: none;
    }

}