/* ═══════════════════════════════════════════════════════════════
   FOrdre — estils (mateixa paleta que FDins)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --bg: #12121F; --p: #1C1C30; --p2: #252542; --p3: #2E2E4A; --bd: #2A2A45;
    --tx: #D0D0E0; --dm: #8888A0; --ac: #4A90D9; --ok: #4CAF50; --wr: #E8A838;
    --er: #E53935; --wh: #F0F0FF; --esd: #FFC107; --liq: #29B6F6;
    --fn: 'Segoe UI', system-ui, sans-serif; --mn: 'SF Mono', 'Consolas', monospace;
}
:root[data-theme="light"] {
    --bg: #EEF0F5; --p: #FFFFFF; --p2: #F2F3F8; --p3: #E4E6EF; --bd: #D5D8E3;
    --tx: #23253A; --dm: #6A6D85; --wh: #10121F;
}
* { margin: 0; padding: 0; box-sizing: border-box }
html, body { height: 100% }
body { font-family: var(--fn); background: var(--bg); color: var(--tx); overflow: hidden; display: flex; flex-direction: column; font-size: 12px }
button, input, select, textarea { font-family: inherit; font-size: 11px; color: var(--tx) }

/* Barra superior */
.tb { min-height: 42px; background: var(--p); border-bottom: 1px solid var(--bd); display: flex; align-items: center; padding: 0 10px; gap: 5px; flex-wrap: wrap; z-index: 10 }
.tb-t { font-size: 14px; font-weight: 700; color: var(--wh); letter-spacing: .5px; margin-right: 8px; white-space: nowrap }
.tb-t span { color: var(--ac) }
.tb-n { font-size: 11px; color: var(--dm); margin-right: 6px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp { width: 1px; height: 20px; background: var(--bd); margin: 0 3px; flex-shrink: 0 }
.fl { flex: 1 }
.b { height: 28px; padding: 0 10px; border: 1px solid var(--bd); border-radius: 5px; background: var(--p2); color: var(--dm); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all .12s; white-space: nowrap; flex-shrink: 0 }
.b:hover { background: var(--p3); color: var(--tx) }
.b.on, .b.pr { background: var(--ac); color: #fff; border-color: var(--ac) }
.b.pr:hover, .b.on:hover { background: #5BA0E9 }
.b.dg:hover { background: var(--er); color: #fff; border-color: var(--er) }
.b.sm { height: 24px; padding: 0 7px; font-size: 10px }
.b:disabled { opacity: .45; cursor: default }

/* Disposició principal */
.mn { flex: 1; display: flex; min-height: 0 }
.pn { background: var(--p); display: flex; flex-direction: column; min-height: 0 }
.pn-l { width: 330px; border-right: 1px solid var(--bd) }
.pn-r { width: 340px; border-left: 1px solid var(--bd); overflow-y: auto }
.ca { flex: 1; position: relative; min-width: 0 }
#c3d { width: 100%; height: 100%; display: block; outline: none }
.ps { padding: 10px 12px; border-bottom: 1px solid var(--bd) }
.ps-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--dm); margin-bottom: 8px; display: flex; align-items: center; gap: 6px }
.ps-t .fl { flex: 1 }

/* Pestanyes */
.tabs { display: flex; border-bottom: 1px solid var(--bd) }
.tab { flex: 1; padding: 8px 0; text-align: center; cursor: pointer; color: var(--dm); font-weight: 600; font-size: 11px; border-bottom: 2px solid transparent }
.tab.on { color: var(--wh); border-bottom-color: var(--ac) }

/* Arbre */
.cerca { width: 100%; height: 26px; border: 1px solid var(--bd); border-radius: 5px; background: var(--p2); padding: 0 8px }
.arbre { flex: 1; overflow-y: auto; padding: 4px 0 10px; user-select: none }
.nd { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 0; cursor: pointer; white-space: nowrap; border-left: 3px solid transparent }
.nd:hover { background: var(--p2) }
.nd.sel { background: rgba(74, 144, 217, .22); border-left-color: var(--ac) }
.nd.fos { opacity: .5 }
.nd .tg { width: 14px; text-align: center; color: var(--dm); font-size: 9px; flex-shrink: 0 }
.nd .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, .3) }
.nd .pas { font-size: 9px; font-weight: 700; color: #fff; background: var(--ac); border-radius: 3px; padding: 0 4px; flex-shrink: 0 }
.nd .cd { font-family: var(--mn); font-size: 10px; color: var(--dm); flex-shrink: 0 }
.nd .nm { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0 }
.nd .q { font-family: var(--mn); font-size: 10px; color: var(--wh); flex-shrink: 0 }
.nd.cj > .nm { font-weight: 600; color: var(--wh) }
.bd { font-size: 9px; border-radius: 3px; padding: 0 3px; flex-shrink: 0; line-height: 14px }
.bd.esd { background: var(--esd); color: #000 }
.bd.liq { background: var(--liq); color: #000 }
.bd.mt { background: var(--p3); color: var(--tx) }
.bd.av { background: var(--er); color: #fff }
.arbre-acc { display: flex; gap: 4px; padding: 8px; border-top: 1px solid var(--bd); flex-wrap: wrap }

/* Taula de materials */
.tt { width: 100%; border-collapse: collapse; font-size: 11px }
.tt th { text-align: left; color: var(--dm); font-weight: 600; font-size: 10px; padding: 4px; position: sticky; top: 0; background: var(--p) }
.tt td { padding: 3px 4px; border-top: 1px solid var(--bd) }
.tt tr:hover td { background: var(--p2); cursor: pointer }
.tt .n { text-align: right; font-family: var(--mn) }

/* Formularis */
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px }
.fg .full { grid-column: 1 / -1 }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px }
.fi label { display: block; font-size: 10px; color: var(--dm); margin-bottom: 2px }
.fi input[type=text], .fi input[type=number], .fi select, .fi textarea { width: 100%; height: 26px; border: 1px solid var(--bd); border-radius: 4px; background: var(--p2); padding: 0 6px }
.fi textarea { height: 46px; padding: 4px 6px; resize: vertical }
.fi input[type=color] { width: 100%; height: 26px; border: 1px solid var(--bd); border-radius: 4px; background: var(--p2); padding: 1px }
.fi input:focus, .fi select:focus, .fi textarea:focus { border-color: var(--ac); outline: none }
.ck { display: flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; padding: 3px 0 }
.ck input { accent-color: var(--ac) }
.ajuda { font-size: 10px; color: var(--dm); line-height: 1.45 }
.fx { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.buit { color: var(--dm); font-size: 11px; text-align: center; padding: 24px 10px; line-height: 1.6 }

/* Informació de safates */
.sf { border: 1px solid var(--bd); border-radius: 6px; padding: 8px; margin-bottom: 8px; background: var(--p2) }
.sf.sel { border-color: var(--ac) }
.sf-h { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--wh); margin-bottom: 4px }
.sf-d { font-family: var(--mn); font-size: 10px; color: var(--dm) }
.av { color: var(--wr); font-size: 10px; margin-top: 3px }
.av.er { color: var(--er) }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 11px }
.kv dt { color: var(--dm) }
.kv dd { font-family: var(--mn); color: var(--wh) }
.prev-et { background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 60px; overflow: auto }
.prev-et svg { box-shadow: 0 1px 4px rgba(0, 0, 0, .35); max-width: 100% }

/* Cartell flotant a l'escena 3D */
.cartell { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); z-index: 5; display: none }
.cartell svg { display: block; background: #fff }
.cartell::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0 }
.cartell .cap { background: var(--p); color: var(--wh); font-size: 10px; padding: 3px 6px; font-weight: 600 }

.hn { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(28, 28, 48, .92); color: var(--wh); padding: 6px 14px; border-radius: 16px; font-size: 11px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 6 }
.hn.on { opacity: 1 }
.vbar { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; z-index: 4 }
.lleg { position: absolute; left: 10px; bottom: 10px; font-size: 10px; color: var(--dm); background: rgba(18, 18, 31, .7); padding: 6px 8px; border-radius: 6px; line-height: 1.6; pointer-events: none }

/* Barra d'estat */
.sb { height: 24px; background: var(--p); border-top: 1px solid var(--bd); display: flex; align-items: center; padding: 0 10px; gap: 8px; font-size: 10px; color: var(--dm); white-space: nowrap; overflow: hidden }
.sb b { color: var(--wh); font-weight: 600 }

/* Finestres modals */
.ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px }
.ov.on { display: flex }
.dlg { background: var(--p); border: 1px solid var(--bd); border-radius: 10px; width: 760px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .5) }
.dlg-h { padding: 12px 16px; border-bottom: 1px solid var(--bd); font-weight: 700; color: var(--wh); display: flex; align-items: center; gap: 8px }
.dlg-c { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px }
.dlg-f { padding: 10px 16px; border-top: 1px solid var(--bd); display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px }
.prev { overflow: auto; max-height: 180px; border: 1px solid var(--bd); border-radius: 6px }
.prev table { border-collapse: collapse; font-size: 10px; white-space: nowrap }
.prev td, .prev th { padding: 2px 6px; border-bottom: 1px solid var(--bd) }
.prev th { background: var(--p2); color: var(--dm); position: sticky; top: 0 }

@media (max-width: 900px) {
    html, body { height: auto }
    body { overflow: auto; display: block }
    .mn { flex-direction: column }
    .pn-l, .pn-r { width: 100%; max-height: none; border: none; border-bottom: 1px solid var(--bd) }
    .pn-l { height: 50vh }
    .pn-r { overflow: visible }
    .ca { height: 60vh; flex: none }
    .tb { padding: 6px 10px }
}

/* Diàleg del taller: camps d'entrada i botons amagats */
label.f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dm); margin: 6px 0 }
label.f input, label.f select { height: 28px; border: 1px solid var(--bd); border-radius: 4px; background: var(--p2); color: var(--tx); padding: 0 6px }
.b[hidden] { display: none }
.dlg a { color: var(--ac) }

/* Selector d'idioma i text del botó de configuració a la barra (en pantalles justes només queda la icona) */
.tb-txt { margin-left: 4px }
#selIdioma select { padding-right: 4px }
@media (max-width: 1560px) { .tb-txt { display: none } }