/* ══════════════════════════════════════════════════════════════════
   SimFísica — Full d'estil principal
   Tema: científic fosc inspirat en GitHub Dark
══════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────── */
:root,
[data-theme="fosc"] {
    --bg-0:        #0d1117;
    --bg-1:        #161b22;
    --bg-2:        #21262d;
    --bg-3:        #2d333b;
    --border:      #30363d;
    --border-light:#444c56;
    --text-1:      #e6edf3;
    --text-2:      #8b949e;
    --text-3:      #6e7681;
    --blue:        #58a6ff;
    --green:       #3fb950;
    --orange:      #d29922;
    --red:         #f85149;
    --purple:      #bc8cff;
    --yellow:      #ffd166;
    --cyan:        #39d353;
    --nav-w:       210px;
    --ctrl-w:      280px;
    --header-h:    52px;
    --toolbar-h:   44px;
    --data-h:      220px;
    --radius:      6px;
    /* Canvas */
    --canvas-bg:    #0d1117;
    --canvas-grid:  rgba(255,255,255,0.05);
    --canvas-axis:  rgba(255,255,255,0.25);
    --canvas-tick:  rgba(255,255,255,0.15);
    --canvas-label: rgba(255,255,255,0.40);
    --canvas-label2:rgba(255,255,255,0.55);
}

[data-theme="clar"] {
    --bg-0:        #ffffff;
    --bg-1:        #f6f8fa;
    --bg-2:        #eaeef2;
    --bg-3:        #d0d7de;
    --border:      #d0d7de;
    --border-light:#afb8c1;
    --text-1:      #1f2328;
    --text-2:      #656d76;
    --text-3:      #9198a1;
    --blue:        #0969da;
    --green:       #1a7f37;
    --orange:      #9a6700;
    --red:         #d1242f;
    --purple:      #8250df;
    --yellow:      #9a6700;
    --cyan:        #1a7f37;
    --canvas-bg:    #f0f4f8;
    --canvas-grid:  rgba(0,0,0,0.06);
    --canvas-axis:  rgba(0,0,0,0.28);
    --canvas-tick:  rgba(0,0,0,0.18);
    --canvas-label: rgba(0,0,0,0.45);
    --canvas-label2:rgba(0,0,0,0.65);
}

[data-theme="terminal"] {
    --bg-0:        #000000;
    --bg-1:        #060606;
    --bg-2:        #0d0d0d;
    --bg-3:        #141414;
    --border:      #1a3300;
    --border-light:#2a5500;
    --text-1:      #00ff41;
    --text-2:      #00cc33;
    --text-3:      #007722;
    --blue:        #00ff41;
    --green:       #00ff41;
    --orange:      #ffff00;
    --red:         #ff3333;
    --purple:      #00ffff;
    --yellow:      #ffff00;
    --cyan:        #00ffff;
    --canvas-bg:    #000000;
    --canvas-grid:  rgba(0,255,65,0.08);
    --canvas-axis:  rgba(0,255,65,0.40);
    --canvas-tick:  rgba(0,255,65,0.20);
    --canvas-label: rgba(0,255,65,0.55);
    --canvas-label2:rgba(0,255,65,0.75);
}
[data-theme="terminal"],
[data-theme="terminal"] body,
[data-theme="terminal"] input,
[data-theme="terminal"] select,
[data-theme="terminal"] button {
    font-family: 'Courier New', Courier, monospace;
}

[data-theme="sepia"] {
    --bg-0:        #faf5e4;
    --bg-1:        #f2edd8;
    --bg-2:        #e6ddc0;
    --bg-3:        #d8cfa0;
    --border:      #c8b878;
    --border-light:#b8a060;
    --text-1:      #2c1810;
    --text-2:      #5a3e28;
    --text-3:      #8a6040;
    --blue:        #1a4f7a;
    --green:       #1a6035;
    --orange:      #c47a10;
    --red:         #922b21;
    --purple:      #6c3483;
    --yellow:      #b7860d;
    --cyan:        #1a6060;
    --canvas-bg:    #faf5e4;
    --canvas-grid:  rgba(100,70,20,0.07);
    --canvas-axis:  rgba(100,70,20,0.30);
    --canvas-tick:  rgba(100,70,20,0.18);
    --canvas-label: rgba(100,70,20,0.45);
    --canvas-label2:rgba(100,70,20,0.65);
}

[data-theme="cosmos"] {
    --bg-0:        #020a1a;
    --bg-1:        #051428;
    --bg-2:        #081e38;
    --bg-3:        #0c2848;
    --border:      #1a4080;
    --border-light:#2a60aa;
    --text-1:      #c8e0ff;
    --text-2:      #7aa8d4;
    --text-3:      #4a7090;
    --blue:        #4db8ff;
    --green:       #40d9a0;
    --orange:      #ffaa44;
    --red:         #ff5555;
    --purple:      #cc88ff;
    --yellow:      #ffe066;
    --cyan:        #40d9d9;
    --canvas-bg:    #020a1a;
    --canvas-grid:  rgba(100,160,255,0.05);
    --canvas-axis:  rgba(100,160,255,0.28);
    --canvas-tick:  rgba(100,160,255,0.15);
    --canvas-label: rgba(100,160,255,0.45);
    --canvas-label2:rgba(100,160,255,0.65);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    background: var(--bg-0);
    color: var(--text-1);
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────── */
.app-header {
    height: var(--header-h);
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    gap: 16px;
    z-index: 10;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-icon {
    font-size: 24px;
    line-height: 1;
}
.header-brand h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.3px;
}
.header-brand small {
    display: block;
    font-size: 10px;
    color: var(--text-3);
    margin-top: 1px;
}
.header-sim-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
}
.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.theme-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
}
#sim-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}
.sim-desc {
    font-size: 11px;
    color: var(--text-3);
    font-family: monospace;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Layout principal ─────────────────────────────────────────── */
.app-layout {
    flex: 1;
    display: grid;
    grid-template-columns: var(--nav-w) 1fr var(--ctrl-w);
    grid-template-rows: 1fr;
    overflow: hidden;
    min-height: 0;
}

/* ── Sidebar de navegació ─────────────────────────────────────── */
.sidebar {
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    overflow: hidden;   /* el scroll el gestiona #sim-nav internament */
    display: flex;
    flex-direction: column;
    transition: min-width 0.22s ease;
    min-width: 0;
}
/* El contingut és l'element que fa scroll */
#sim-nav {
    overflow-y: auto;
    flex: 1;
}
.sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#sim-nav details {
    border-bottom: 1px solid var(--border);
}
#sim-nav summary {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-2);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
#sim-nav summary::-webkit-details-marker { display: none; }
#sim-nav summary::before { content: '▶'; font-size: 9px; transition: transform .2s; }
#sim-nav details[open] > summary::before { transform: rotate(90deg); }
#sim-nav summary:hover { background: var(--bg-2); color: var(--text-1); }
#sim-nav ul { list-style: none; padding: 2px 0 6px; }
#sim-nav li a {
    display: block;
    padding: 5px 12px 5px 24px;
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    border-radius: var(--radius);
    margin: 1px 4px;
    transition: background .15s, color .15s;
}
#sim-nav li a:hover       { background: var(--bg-3); color: var(--text-1); }
#sim-nav li a.active      { background: var(--blue); color: #fff; font-weight: 600; }
#sim-nav li a.nav-disabled{ color: var(--text-3); cursor: not-allowed; font-style: italic; }

/* ── Àrea principal ───────────────────────────────────────────── */
.main-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── Canvas de simulació ──────────────────────────────────────── */
.sim-section {
    flex: 1;
    min-height: 0;
    background: var(--bg-0);
    position: relative;
}
#sim-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbar {
    height: var(--toolbar-h);
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    flex-shrink: 0;
}
.toolbar-left, .toolbar-center, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.toolbar-center { flex: 1; justify-content: center; }
.toolbar-right  { gap: 4px; }
.toolbar-label  { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.toolbar-select {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 12px;
    padding: 3px 6px;
    border-radius: var(--radius);
}
.toolbar-btn {
    padding: 5px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-1);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.toolbar-btn:hover    { background: var(--bg-3); border-color: var(--border-light); }
.btn-play             { background: var(--green); border-color: var(--green); color: #000; font-weight: 700; }
.btn-play:hover       { background: #4fca60; }
.btn-pause            { background: var(--orange); border-color: var(--orange); color: #000; font-weight: 700; }
.btn-pause:hover      { background: #e0a832; }
.toolbar-btn.active   { background: var(--yellow); border-color: var(--yellow); color: #000; }

/* Zoom */
.zoom-widget {
    display: flex;
    align-items: center;
    gap: 2px;
}
.zoom-widget .toolbar-btn {
    min-width: 28px;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

/* Cronòmetre */
.stopwatch-widget {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 6px;
}
.stopwatch-display {
    font-family: monospace;
    font-size: 13px;
    color: var(--green);
    min-width: 75px;
    letter-spacing: 0.5px;
}
.btn-sw {
    padding: 3px 6px;
    font-size: 11px;
    border: none;
    background: transparent;
}
.btn-sw:hover { background: var(--bg-3); }

/* ── Secció de dades ──────────────────────────────────────────── */
.data-section {
    height: var(--data-h);
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
}

/* Pestanyes */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.tab-btn {
    padding: 7px 14px;
    font-size: 12px;
    background: transparent;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.tab-btn:hover  { color: var(--text-1); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.tab-panel {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tab-panel.hidden { display: none; }

/* ── Gràfica ──────────────────────────────────────────────────── */
.graph-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px 4px 0;
}
.graph-legend {
    display: flex;
    gap: 10px;
    padding: 4px 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}
.legend-item input[type=checkbox] { width: 13px; height: 13px; cursor: pointer; }
.legend-dot {
    width: 12px; height: 3px;
    border-radius: 2px;
    display: inline-block;
}
#graph-canvas { flex: 1; width: 100%; min-height: 0; }

/* ── Taula de dades ───────────────────────────────────────────── */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.table-count { font-size: 11px; color: var(--text-3); flex: 1; }
.btn-icon {
    padding: 3px 8px;
    font-size: 11px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: var(--radius);
    cursor: pointer;
}
.btn-icon:hover { background: var(--bg-3); color: var(--text-1); }
.table-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: monospace;
}
.data-table th {
    position: sticky;
    top: 0;
    background: var(--bg-2);
    color: var(--blue);
    font-size: 11px;
    padding: 5px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    z-index: 2;
}
.data-table th small { display: block; color: var(--text-3); font-weight: normal; }
.data-table td {
    padding: 3px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(48,54,61,0.5);
    color: var(--text-2);
}
.data-table tr:hover td { background: var(--bg-2); color: var(--text-1); }
.data-table tr:last-child td { color: var(--text-1); font-weight: 600; }

/* ── Activitat ────────────────────────────────────────────────── */
.activity-panel {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}
.activity-header { margin-bottom: 8px; }
.act-counter {
    font-size: 11px;
    color: var(--text-3);
    background: var(--bg-2);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--border);
}
.act-question {
    font-size: 13px;
    color: var(--text-1);
    margin: 10px 0;
    line-height: 1.5;
}
.act-answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.act-input {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    padding: 6px 10px;
    border-radius: var(--radius);
    font-size: 13px;
    width: 160px;
}
.act-input:focus { outline: none; border-color: var(--blue); }
.act-unit { color: var(--text-3); font-size: 12px; }
.act-feedback {
    margin: 6px 0;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
}
.act-feedback.correct   { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.act-feedback.incorrect { background: rgba(248,81,73,0.15);  color: var(--red);   border: 1px solid rgba(248,81,73,0.3); }
.act-nav-row { display: flex; gap: 8px; margin-top: 10px; }
.act-hint {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(210,153,34,0.1);
    border: 1px solid rgba(210,153,34,0.3);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--orange);
    line-height: 1.5;
}
.no-activity { color: var(--text-3); font-style: italic; }

/* ── Panell de control (dreta) ────────────────────────────────── */
.control-sidebar {
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: min-width 0.22s ease;
    min-width: 0;
}
.control-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 9px 12px 9px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Botó de col·lapse dels panells ──────────────────────────── */
.panel-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-3);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.22s ease;
    user-select: none;
}
.panel-toggle-btn:hover {
    background: var(--bg-3);
    color: var(--text-1);
    border-color: var(--border-light);
}

/* ── Col·lapse: estat tancat ──────────────────────────────────── */
/* La variable controla l'amplada de la tira col·lapsada */
:root { --collapsed-w: 36px; }

.sidebar.collapsed,
.control-sidebar.collapsed {
    min-width: var(--collapsed-w);
}

/* Amaga el contingut quan es col·lapsa */
.sidebar.collapsed .panel-title-text,
.sidebar.collapsed #sim-nav,
.control-sidebar.collapsed .panel-title-text,
.control-sidebar.collapsed #control-panel {
    display: none;
}

/* Centra el botó en la tira estreta */
.sidebar.collapsed .sidebar-title {
    justify-content: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.control-sidebar.collapsed .control-sidebar-title {
    justify-content: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

/* Gira el botó quan el panell és col·lapsat */
.sidebar.collapsed .panel-toggle-btn,
.control-sidebar.collapsed .panel-toggle-btn {
    transform: scaleX(-1);
}

/* Ajust del grid quan un o els dos panells estan col·lapsats */
.app-layout:has(.sidebar.collapsed):not(:has(.control-sidebar.collapsed)) {
    grid-template-columns: var(--collapsed-w) 1fr var(--ctrl-w);
}
.app-layout:has(.control-sidebar.collapsed):not(:has(.sidebar.collapsed)) {
    grid-template-columns: var(--nav-w) 1fr var(--collapsed-w);
}
.app-layout:has(.sidebar.collapsed):has(.control-sidebar.collapsed) {
    grid-template-columns: var(--collapsed-w) 1fr var(--collapsed-w);
}
.control-panel-inner {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

/* ── Controls: elements ───────────────────────────────────────── */
.ctrl-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ctrl-group { margin-bottom: 10px; }
.ctrl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.ctrl-header label {
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
}
.ctrl-value-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.ctrl-value {
    font-size: 12px;
    font-family: monospace;
    color: var(--blue);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    width: 62px;
    text-align: right;
    padding: 1px 3px;
    outline: none;
    -moz-appearance: textfield;
    transition: border-color 0.15s, background 0.15s;
}
.ctrl-value::-webkit-outer-spin-button,
.ctrl-value::-webkit-inner-spin-button { -webkit-appearance: none; }
.ctrl-value:hover  { border-color: var(--border-light); }
.ctrl-value:focus  { border-color: var(--blue); background: var(--bg-2); }
.ctrl-unit {
    font-size: 11px;
    color: var(--text-3);
    font-family: monospace;
    white-space: nowrap;
}
input[type=range] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: var(--bg-3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(88,166,255,0.5);
}
input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--blue);
    border: none;
    cursor: pointer;
}

.ctrl-btn {
    padding: 6px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-1);
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background .15s;
}
.ctrl-btn:hover     { background: var(--bg-3); }
.btn-primary        { background: var(--blue); border-color: var(--blue); color: #000; font-weight: 700; }
.btn-primary:hover  { background: #79b8ff; }

.ctrl-btn-row {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}
.ctrl-btn-row .ctrl-btn { width: auto; flex: 1; }

.ctrl-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    margin: 5px 0;
    user-select: none;
}
.ctrl-checkbox input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: var(--blue);
    cursor: pointer;
}

.ctrl-select {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 12px;
    padding: 5px 8px;
    border-radius: var(--radius);
    margin-top: 3px;
}

.ctrl-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: 10px 0 6px;
    position: relative;
    text-align: center;
}
.ctrl-separator span {
    background: var(--bg-1);
    padding: 0 6px;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    top: -9px;
}

.ctrl-info-box {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 10px;
    font-family: monospace;
    font-size: 11px;
    margin-top: 4px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(48,54,61,0.4);
}
.info-row:last-child  { border-bottom: none; }
.info-row span:first-child { color: var(--text-3); }
.info-row span:last-child  { color: var(--blue); font-weight: 600; }
.info-row.formula span     { color: var(--orange) !important; }

/* ── Barres de navegació/controls mòbil ──────────────────────── */
/* Visibles únicament en mòbil (< 768px); ocultes en desktop/tablet */
.mob-nav-bar,
.mob-ctrl-bar { display: none; }

/* ── Utilitats ────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* Contingut accessible únicament per a lectors de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enllaç "saltar al contingut principal" — visible en rebre focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--bg-2);
    color: var(--blue);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
    border: 1px solid var(--border);
    transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* Focus visible per a navegació per teclat */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* touch-action: none al canvas per a pan/pinch sense interferències del navegador */
#sim-canvas { touch-action: none; }

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — SimFísica
   Estratègia: mobile-first overrides afegits AL FINAL.
   No es toca cap lògica JS. El canvas segueix llegint getBoundingClientRect.
   Drawers controlats només per CSS (classe .is-open toglejada per JS mínim).
══════════════════════════════════════════════════════════════════ */

/* ── Variables addicionals per al sistema de drawers ─────────────
   Definides a :root per heretar-se en tots els temes               */
:root {
    --drawer-nav-w:  280px;   /* amplada del drawer de navegació */
    --drawer-ctrl-w: 300px;   /* amplada del drawer de controls  */
    --overlay-z:     100;
    --drawer-z:      110;
    --header-btn-z:  120;
    --mob-data-h:    45vh;    /* alçada secció dades en mòbil     */
    --mob-canvas-min: 180px;  /* mínim canvas en mòbil            */
}


/* ══════════════════════════════════════════════════════════════════
   TABLET  (768 px – 1024 px)
   Layout de 3 columnes es conserva però els panells laterals
   es poden col·lapsar amb botons toggle al header.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Reduïm les columnes laterals per guanyar espai central */
    :root {
        --nav-w:  180px;
        --ctrl-w: 240px;
    }

    /* Header: afegim botons toggle visibles en tablet */
    .btn-toggle-nav,
    .btn-toggle-ctrl {
        display: flex;
    }

    /* Canvas: alçada mínima raonable en tablet */
    .sim-section {
        min-height: 220px;
    }

    /* Secció dades: una mica menys rígida */
    .data-section {
        height: auto;
        min-height: 180px;
        max-height: var(--data-h);
    }

    /* Toolbar: botons una mica més grans per al tàctil */
    .toolbar-btn {
        min-height: 36px;
        padding: 6px 10px;
    }
}

/* Col·lapse en tablet: mateixa variable --collapsed-w que en desktop */
/* (les regles generals ja estan definides fora de media queries)     */


/* ══════════════════════════════════════════════════════════════════
   MÒBIL  (< 768 px)
   Layout transforma a 1 columna. Sidebars passen a drawers/overlays.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Body: permetre scroll vertical en mòbil ──────────────────
       IMPORTANT: el JS usa overflow:hidden per evitar que el body
       s'escapi, però en mòbil necessitem scroll. Canviem a 'auto'
       únicament quan NO hi ha cap drawer obert (gestió via JS).    */
    html, body {
        overflow: auto;
        height: auto;
    }

    /* Quan hi ha un drawer obert, bloquejar el scroll del fons */
    body.drawer-open {
        overflow: hidden;
        height: 100%;
    }

    /* ── Layout: 1 columna, altura automàtica ────────────────────*/
    .app-layout {
        flex: none;            /* cancel·la flex:1 del desktop (evita col·lapse) */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        overflow: visible;
        min-height: 0;
    }

    /* Ocultem els panells originals del grid; seran drawers */
    .sidebar,
    .control-sidebar {
        display: none;
    }

    /* ── Main area: columna única ────────────────────────────────*/
    .main-area {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }

    /* ── Canvas: aspect ratio 16:9 amb mínim garantit ───────────
       getBoundingClientRect() retornarà dimensions correctes
       perquè el CSS les determina; el JS les llegeix DESPRÉS.    */
    .sim-section {
        flex: none;            /* cancel·la flex:1 del desktop */
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: var(--mob-canvas-min);
        flex-shrink: 0;
        overflow: hidden;
        background: var(--bg-0);
        position: relative;
    }
    #sim-canvas {
        width:  100%;
        height: 100%;
        display: block;
        touch-action: none;
    }

    /* ── Toolbar mòbil: 2 línies amb scroll horitzontal ─────────*/
    .toolbar {
        height: auto;
        min-height: var(--toolbar-h);
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .toolbar::-webkit-scrollbar { display: none; }

    .toolbar-left {
        flex: 0 0 auto;
        gap: 4px;
    }
    .toolbar-center {
        flex: 0 0 auto;
        justify-content: flex-start;
        order: 3;              /* tercera línia si no cap */
    }
    .toolbar-right {
        flex: 0 0 auto;
        gap: 4px;
        order: 2;
        flex-wrap: wrap;
    }

    /* Botons WCAG 44x44 mínim */
    .toolbar-btn {
        min-height: 44px;
        min-width:  44px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .zoom-widget .toolbar-btn {
        min-width:  44px;
        min-height: 44px;
        font-size: 18px;
        padding: 8px;
    }
    .btn-sw {
        min-height: 44px;
        min-width:  36px;
        padding: 8px 6px;
    }

    /* Cronòmetre: display una mica més gran per llegir-se */
    .stopwatch-display {
        font-size: 14px;
        min-width: 82px;
    }
    .stopwatch-widget {
        padding: 4px 8px;
    }

    /* ── Secció de dades: alçada flexible en mòbil ───────────────*/
    .data-section {
        height: var(--mob-data-h);
        max-height: none;
        flex-shrink: 0;
    }

    /* Pestanyes: una mica més altes per al tàctil */
    .tab-btn {
        padding: 10px 12px;
        font-size: 12px;
        flex: 1;
        text-align: center;
    }

    /* ── Header compacte ─────────────────────────────────────────*/
    .app-header {
        height: auto;
        min-height: var(--header-h);
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    /* En mòbil amaguen el subtítol de la simulació al header
       per estalviar espai; el títol es veu a l'overlay si cal */
    .header-sim-info {
        display: none;
    }

    /* Marca i selector de tema compactes */
    .header-brand h1 {
        font-size: 15px;
    }
    .header-brand small {
        display: none;
    }

    /* ── Botons hamburguesa (sempre visibles en mòbil) ───────────*/
    .btn-toggle-nav,
    .btn-toggle-ctrl {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width:  44px;
        min-height: 44px;
        padding: 0;
        background: var(--bg-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text-1);
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s;
        z-index: var(--header-btn-z);
    }
    .btn-toggle-nav:hover,
    .btn-toggle-ctrl:hover {
        background: var(--bg-3);
    }
    /* Indicador visual quan el drawer és obert */
    .btn-toggle-nav.active,
    .btn-toggle-ctrl.active {
        background: var(--blue);
        border-color: var(--blue);
        color: #000;
    }

    /* Evitar selecció de text accidental en tocs ràpids */
    .toolbar,
    .toolbar-btn,
    .tab-btn,
    .btn-toggle-nav,
    .btn-toggle-ctrl {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Taula de dades: scroll horitzontal intern (no del viewport) */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Activitat: font lleugera gran per llegibilitat en mòbil */
    .act-question { font-size: 14px; }
    .act-input    { font-size: 16px; } /* evita zoom automàtic d'iOS en inputs */

    /* ── Barra de navegació mòbil ─────────────────────────────── */
    .mob-nav-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 16px;
        background: var(--bg-1);
        border: none;
        border-bottom: 2px solid var(--blue);
        color: var(--text-1);
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        flex-shrink: 0;
        transition: background 0.15s;
        user-select: none;
        -webkit-user-select: none;
    }
    .mob-nav-bar:active,
    .mob-nav-bar:focus-visible {
        background: var(--bg-2);
    }
    .mob-nav-bar-icon {
        font-size: 18px;
        color: var(--blue);
        flex-shrink: 0;
    }
    #mob-nav-bar-label {
        flex: 1;
        font-weight: 600;
        color: var(--text-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-nav-bar-arrow {
        font-size: 16px;
        color: var(--text-3);
        flex-shrink: 0;
        transition: transform 0.2s;
    }
    /* Quan el drawer és obert, gira la fletxa */
    .mob-nav-bar.drawer-open .mob-nav-bar-arrow {
        transform: rotate(90deg);
    }

    /* ── Barra de controls mòbil ──────────────────────────────── */
    .mob-ctrl-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 16px;
        background: var(--bg-1);
        border: none;
        border-top: 1px solid var(--border);
        border-bottom: 2px solid var(--orange);
        color: var(--text-1);
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        flex-shrink: 0;
        transition: background 0.15s;
        user-select: none;
        -webkit-user-select: none;
    }
    .mob-ctrl-bar:active,
    .mob-ctrl-bar:focus-visible {
        background: var(--bg-2);
    }
    .mob-ctrl-bar-icon {
        font-size: 18px;
        color: var(--orange);
        flex-shrink: 0;
    }
    .mob-ctrl-bar-label {
        flex: 1;
        font-weight: 600;
        color: var(--text-1);
    }
    .mob-ctrl-bar-arrow {
        font-size: 16px;
        color: var(--text-3);
        flex-shrink: 0;
        transition: transform 0.2s;
    }
    .mob-ctrl-bar.drawer-open .mob-ctrl-bar-arrow {
        transform: rotate(90deg);
    }
}


/* ══════════════════════════════════════════════════════════════════
   DRAWERS I OVERLAY  (visibles a mòbil i tablet)
   Controlats per la classe .is-open afegida/eliminada per JS.
══════════════════════════════════════════════════════════════════ */

/* ── Overlay fosc del fons ────────────────────────────────────── */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--overlay-z);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Animació d'entrada */
    opacity: 0;
    transition: opacity 0.25s ease;
}
.drawer-overlay.is-open {
    display: block;
    opacity: 1;
}

/* ── Drawer base (comú als dos drawers) ───────────────────────── */
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--drawer-z);
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Forcem el drawer a mostrar-se però fora de pantalla per defecte */
    will-change: transform;
}

/* ── Drawer de navegació (esquerra) ──────────────────────────────*/
.drawer-nav {
    left: 0;
    width: var(--drawer-nav-w);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
}
.drawer-nav.is-open {
    transform: translateX(0);
}

/* ── Drawer de controls (dreta) ──────────────────────────────────*/
.drawer-ctrl {
    right: 0;
    width: var(--drawer-ctrl-w);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
}
.drawer-ctrl.is-open {
    transform: translateX(0);
}

/* ── Capçalera dels drawers ───────────────────────────────────── */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: var(--header-h);
}
.drawer-header-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:  36px;
    min-height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.drawer-close:hover {
    background: var(--bg-3);
    color: var(--text-1);
}

/* ── Contingut dels drawers: scroll intern ────────────────────── */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── Adaptar l'estil del sidebar existent dins del drawer ────────
   El #sim-nav ja té tot l'estil; simplement el reusem               */
.drawer-nav .drawer-body {
    padding: 0;
}
.drawer-ctrl .drawer-body {
    padding: 0;  /* control-panel-inner ja té el seu propi padding */
}

/* Targets tàctils adequats per al nav dins del drawer */
.drawer-nav #sim-nav summary {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
}
.drawer-nav #sim-nav li a {
    min-height: 44px;
    padding: 10px 14px 10px 30px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

/* Controls dins del drawer: sliders amb més espai */
.drawer-ctrl .ctrl-group {
    margin-bottom: 14px;
}
.drawer-ctrl input[type=range] {
    height: 6px;
}
.drawer-ctrl input[type=range]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}
.drawer-ctrl input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
}
.drawer-ctrl .ctrl-btn {
    min-height: 44px;
    font-size: 14px;
}

/* ── Scrollbars fins dins els drawers ───────────────────────────*/
.drawer-body::-webkit-scrollbar       { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 2px; }


/* ══════════════════════════════════════════════════════════════════
   BOTONS TOGGLE AL HEADER
   Ocults per defecte (desktop); visibles a tablet/mòbil.
   HTML nou: .btn-toggle-nav i .btn-toggle-ctrl dins .header-tools
══════════════════════════════════════════════════════════════════ */
.btn-toggle-nav,
.btn-toggle-ctrl {
    display: none;   /* ocults en desktop per defecte */
}


/* ══════════════════════════════════════════════════════════════════
   AJUST DE MIDES DELS DRAWERS PER PANTALLES MOLT ESTRETES
══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    :root {
        --drawer-nav-w:  85vw;
        --drawer-ctrl-w: 90vw;
    }
    /* Canvas: mínim absolut en pantalles molt estretes */
    .sim-section {
        min-height: 150px;
    }
    /* Secció dades: una mica menys per deixar veure el canvas */
    .data-section {
        height: 40vh;
    }
}