/* ====== Tema (por variables CSS) ====== Mantenemos el diseño original (oscuro) y añadimos tema claro. El tema activo se controla con el atributo data-theme en . */ :root{ /* Oscuro (por defecto) */ --bg:#0b0f14; --card:#121822; --muted:#1b2330; --accent:#1f66ff; --text:#e6eefc; --sub:#9fb2d1; --ok:#49d17a; --warn:#f0ad4e; --danger:#ff5c5c; --radius:12px; --shadow:0 6px 20px rgba(0,0,0,.25); --track-grad: linear-gradient(90deg,#274267,#1f66ff); } :root[data-theme="light"]{ --bg:#f6f7fb; --card:var(--bg); --muted:#eef2f7; --accent:#1f66ff; --text:#0e1622; --sub:#4a5b78; --ok:#1a9150; --warn:#af7b24; --danger:#d23a3a; --shadow:0 6px 20px rgba(0,0,0,.08); --track-grad: linear-gradient(90deg,#d7e1f2,#78a6ff); } *{box-sizing:border-box} body{margin:0; font-family:system-ui, Segoe UI, Roboto, sans-serif; color:var(--text); background:var(--bg);} main{max-width:1000px; margin:0 auto; padding:20px;} .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px} .theme-toggle{gap:8px; user-select:none} h1{margin:8px 0 16px; font-size:1.35rem; font-weight:700} .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px} .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .stack{display:flex; flex-direction:column; gap:8px} details{border:1px solid #20304933; background:var(--card); border-radius:var(--radius); margin:12px 0; box-shadow:var(--shadow)} summary{list-style:none; cursor:pointer; padding:14px 16px; background:linear-gradient(180deg,#16213422,#121a2822); border-radius:inherit; font-weight:700; display:flex; align-items:center; gap:10px} summary::marker{display:none} summary .tag{font-size:.8rem; color:var(--sub); font-weight:600; background:color-mix(in oklab, var(--muted), transparent 40%); border:1px solid #2b3f6022; padding:2px 8px; border-radius:999px} details>div{padding:14px 16px} select, button, input[type="range"]{ width:100%; border:1px solid #2b3f60; background:color-mix(in oklab, var(--card), #0a0e13 8%); color:var(--text); border-radius:10px; padding:10px; outline:none; } button{cursor:pointer; font-weight:700} button.primary{background:var(--accent); border-color:#2b67ff; color:#fff} button.ghost{background:color-mix(in oklab, var(--card), #0a0e13 12%)} button:disabled{opacity:.6; cursor:not-allowed} .btn-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} .btn-row-2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px} label{font-size:.95rem; color:var(--sub)} small{color:color-mix(in oklab, var(--sub), #98a6be 20%)} .cfg-slot{align-items:center} .cfg-slot select{width:auto; min-width:80px} /* Range styling */ input[type="range"]{height:36px; padding:0 4px; background:transparent} input[type="range"]::-webkit-slider-runnable-track{ height:8px; background:var(--track-grad); border-radius:999px; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top:-6px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.35); } input[type="range"]::-moz-range-track{ height:8px; background:var(--track-grad); border-radius:999px; } input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent); } /* Cards */ .card{border:1px solid #20304933; background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow)} /* Meter */ .meter-wrap{height:14px; background:color-mix(in oklab, var(--muted), #000 12%); border:1px solid #22324f44; border-radius:999px; overflow:hidden; position:relative} .meter{ height:100%; width:0%; background:linear-gradient(90deg, var(--ok) 0%, var(--warn) 74%, var(--danger) 92%); box-shadow: inset 0 0 10px rgba(0,0,0,.15); transition: width .06s linear; } .peak-hold{position:absolute; top:0; bottom:0; width:3px; background:#ffd1d1; opacity:.9} .clip-dot{width:12px; height:12px; border-radius:50%; background:#5a6372; display:inline-block} .clip-dot.on{background:var(--danger); box-shadow:0 0 0 2px color-mix(in oklab, var(--danger), transparent 65%)} #log, #trafico{ white-space:pre-wrap; border:1px solid #22324f44; padding:12px; background:color-mix(in oklab, var(--muted), #000 10%); border-radius:var(--radius); max-height:260px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem } /* Toast */ .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:color-mix(in oklab, var(--card), #051018 20%); color:var(--text); border:1px solid #24406b44; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease} .toast.show{opacity:1} @media (max-width: 820px){ .grid-2, .grid-3, .btn-row, .btn-row-2{grid-template-columns:1fr} } /* Centrar textos informativos */ .card small, details > small, section small, main small { display:block; text-align:center; } /* Alineación vertical de controles en la fila compacta */ .row.cfg-slot select { vertical-align:middle; } /* === Patch: tabs sizing & centering === */ .tabs, .tab-header, .tab-headers, .tab-buttons, .tabs-container, .tabs-bar, .tabs-row { display: flex; gap: .5rem; justify-content: center; align-items: center; flex-wrap: nowrap; } .tabs button, .tab-button, .tab-btn, .tablink, .tablinks, .tab, button.tab, .tabs .tab, .tabs .tablink { width: auto !important; max-width: 100%; white-space: nowrap; padding: 6px 12px; box-sizing: border-box; } /* prevent full-width buttons if applied elsewhere */ button[style*="width:"], .tablinks[style*="width:"], .tab-button[style*="width:"] { width: auto !important; } /* Ensure container itself is centered horizontally */ #procesamiento, .processing-window, .processing, .panel-procesamiento { display: flex; flex-direction: column; align-items: center; } /* Keep the four buttons on one line if space allows */ .tabs, .tab-headers, .tab-buttons, .tabs-row { flex-wrap: nowrap; } /* === End patch === */ /* === Patch: preset description === */ .preset-description { display:block; text-align:center; margin: .5rem 0; font-weight: 500; } /* === End patch === */ /* === Patch: processing tabs inline & centered === */ .btn-row.processing-tabs{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:nowrap; } .btn-row.processing-tabs > *{ width:auto; } .btn-row.processing-tabs select{ width:auto; min-width:unset; } .btn-row.processing-tabs button{ white-space:nowrap; } /* === End patch === */