/* =====================================================================
   ESTILOS CSS - MOBILE FIRST & TEMA DARK
   AUTOR: Jossian Brito | ANO: 2026 | ÚLTIMA MODIFICAÇÃO: 25/10/2026 01:00 (GMT-3)
   VERSÃO: 0.10.25-beta - [TAG-CMD-002] .telegraph-* → .station-container /
   .lever-slider; estilos da chave seletora, lâmpadas, parada de emergência e
   painel do passadiço.
   ===================================================================== */
:root {
    --bg-color: #121212; --panel-bg: #1e1e1e; --text-main: #e0e0e0;
    --accent-blue: #00bcd4; --accent-green: #4caf50; --accent-red: #f44336;
    --accent-orange: #ff9800; --accent-purple: #9c27b0; --slot-border: #555;
    --nav-bg: #212121;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ALARMES E MODAIS */
#global-alarm-banner { background-color: var(--accent-red); color: white; text-align: center; padding: 10px; font-weight: bold; display: none; animation: blink 1s infinite; z-index: 1000; cursor: pointer; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }

#info-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 2000; justify-content: flex-start; align-items: center; padding-left: 10vw;
}
.modal-box {
    background: rgba(18, 22, 28, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    width: 90%; max-width: 360px; border-radius: 16px;
    border: 1px solid rgba(0, 188, 212, 0.4); border-left: 4px solid var(--accent-blue);
    padding: 20px; box-shadow: 10px 10px 40px rgba(0,0,0,0.6);
    max-height: 88dvh; overflow-y: auto;
}
@media (max-width: 1000px) {
    #info-modal-overlay { justify-content: center; padding-left: 0; }
}
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px; }
.modal-title { font-size: 1.2rem; font-weight: bold; color: var(--accent-blue); }
.close-btn { background: none; border: none; color: #aaa; font-size: 1.5rem; cursor: pointer; }
.modal-data-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1rem; border-bottom: 1px dashed #333; padding-bottom: 5px;}
.modal-data-label { color: #888; }
.modal-data-value { font-weight: bold; color: var(--text-main); font-family: 'Courier New', monospace; }
.modal-tab-row { display: grid;
        grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.modal-tab-btn { padding: 10px 6px; border: 1px solid #444; border-radius: 8px; background: #252525; color: #aaa; font-size: 0.72rem; font-weight: bold; text-transform: uppercase; cursor: pointer; }
.modal-tab-btn.active { background: rgba(0, 188, 212, 0.18); border-color: rgba(0, 188, 212, 0.45); color: var(--accent-blue); }
.modal-fifi-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }

/* ÁREA PRINCIPAL */
#main-display { flex: 1; position: relative; overflow: hidden; padding: 10px; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.screen { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; overflow-y: auto; padding-bottom: 60px;}
.screen.active { display: flex; }
.screen-title { font-size: 1.1rem; margin: 10px 0; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 1px; text-align: center; flex-shrink: 0;}

/* CASCO E SLOTS (Topologia Damen ASD 2411) */
.hull-container {
    display: none; /* fallback */
}
#pixi-hull-container {
    width: 95%; max-width: 450px; height: 85vh; min-height: 400px; max-height: 800px;
    background-color: transparent; display: flex; flex-shrink: 0;
    justify-content: center; align-items: center; margin-bottom: 20px;
}
#pixi-hull-container canvas {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 20px;
}
.hull-container {
    width: 95%; max-width: 450px; height: auto; min-height: 80%;
    border: 3px solid var(--accent-blue); border-radius: 50% 50% 20px 20px / 15% 15% 10px 10px;
    background-color: #1a252c; padding: 50px 15px 15px 15px; display: grid;
        grid-template-rows: 1fr; flex-shrink: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto; gap: 6px;
    grid-template-areas:
        "peak-fwd peak-fwd peak-fwd peak-fwd"
        "winch    tk-hyd   chiller  chiller"
        "manifold manifold manifold manifold"
        "tk02     tk02     tk02     tk02"
        "tk06     mca-ps   mca-sb   tk07"
        "tk06     tk04     tk05     tk07"
        "tk06     tk03     tk03     tk07"
        "mcp-ps   fifi     fifi     mcp-sb"
        "tk11     tk-od    tk-od    tk12"
        "tk11     tk13     tk14     tk12"
        "tk15     tk15     tk16     tk16"
        "peak-aft peak-aft peak-aft peak-aft"
        "zd-ps    zd-ps    zd-sb    zd-sb";
}

.slot { border: 1px dashed var(--slot-border); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.65rem; text-align: center; padding: 5px; color: #aaa; position: relative; overflow: hidden; z-index: 1; cursor: pointer; transition: 0.2s;}
.slot:active { transform: scale(0.95); }
.slot-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background-color: rgba(0, 188, 212, 0.25); z-index: -1; transition: height 0.5s linear; }
.slot span.capacity { font-size: 0.55rem; color: #fff; margin-top: 2px; font-weight: bold;}
.slot.type-tank { border-color: rgba(0, 188, 212, 0.4); }
.slot.type-engine { border-color: rgba(255, 152, 0, 0.4); }
.slot.type-propeller { border-color: rgba(156, 39, 176, 0.4); }

.area-manifold { grid-area: manifold; background-color: rgba(76, 175, 80, 0.1); border-color: var(--accent-green); color: var(--accent-green);}
.area-peak-fwd { grid-area: peak-fwd; width: 88%; justify-self: center; } .area-tk02 { grid-area: tk02; } .area-tk06 { grid-area: tk06; } .area-tk07 { grid-area: tk07; }
.area-mca-ps { grid-area: mca-ps; } .area-mca-sb { grid-area: mca-sb; }
.area-tk04 { grid-area: tk04; } .area-tk05 { grid-area: tk05; } .area-tk03 { grid-area: tk03; }
.area-mcp-ps { grid-area: mcp-ps; } .area-fifi { grid-area: fifi; } .area-mcp-sb { grid-area: mcp-sb; }
.area-tk11 { grid-area: tk11; } .area-tk-od { grid-area: tk-od; } .area-tk13 { grid-area: tk13; } .area-tk14 { grid-area: tk14; } .area-tk12 { grid-area: tk12; }
.area-tk15 { grid-area: tk15; } .area-tk16 { grid-area: tk16; } .area-peak-aft { grid-area: peak-aft; }
.area-winch { grid-area: winch; } .area-tk-hyd { grid-area: tk-hyd; } .area-chiller { grid-area: chiller; }
.slot.type-winch { border-color: rgba(156,39,176,0.5); background: rgba(156,39,176,0.05); }
.slot.type-hyd { border-color: rgba(33,150,243,0.5); background: rgba(33,150,243,0.05); }
.slot.type-chiller { border-color: rgba(0,188,212,0.4); background: rgba(0,188,212,0.05); }
.slot.type-fifi { border-color: rgba(244,67,54,0.45); background: rgba(244,67,54,0.08); min-height: 44px; }
.slot.type-fifi .capacity { color: #ff8a80; }
.area-zd-ps { grid-area: zd-ps; } .area-zd-sb { grid-area: zd-sb; }
.slot.type-lo { border-color: rgba(255, 193, 7, 0.5); min-height: 36px; flex-direction: row; gap: 8px; justify-content: center; align-items: center; }
.slot.type-overflow { border-color: rgba(244, 67, 54, 0.5); background: rgba(244,67,54,0.05); }
.slot.type-ballast { border-color: rgba(33, 150, 243, 0.45); background: rgba(33,150,243,0.08); }
.slot.type-od { border-color: rgba(255, 152, 0, 0.45); background: rgba(255,152,0,0.08); }
.slot.type-engine { min-height: 44px; }
.carter-meter { background: #1a1100; border: 1px inset #8a6000; padding: 8px; text-align: center; border-radius: 4px; position: relative; overflow: hidden; flex: 1; }
.carter-meter-bar { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255,193,7,0.3); transition: height 0.5s; }
.carter-meter .meter-val { color: #ffc107; position: relative; z-index: 1; }
.carter-meter .meter-label { font-size: 0.6rem; color: #8a7000; text-transform: uppercase; position: relative; z-index: 1; }

/* PAINÉIS DE CONTROLE E COMPONENTES */
.control-panel { width: 95%; max-width: 400px; background: var(--panel-bg); padding: 20px; border-radius: 10px; border: 2px solid #333; margin-top: 15px; flex-shrink: 0;}
.control-btn { width: 100%; padding: 15px; background: #444; color: white; border: 2px solid transparent; border-radius: 5px; font-size: 1rem; margin-bottom: 10px; cursor: pointer; transition: 0.3s; font-weight: bold; }
.control-btn:hover:not(:disabled) { background: #555; border-color: #777; }
.control-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.control-btn.active { background: var(--accent-green); color: black;}
.control-btn.active:hover:not(:disabled) { background: #43a047; }
.control-btn.pump-on { background: var(--accent-orange); animation: pulse 1s infinite; }
.drawer-tab-row { width:95%; max-width:400px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:8px 0 12px; }
.drawer-tab-row.tab-row-2 { grid-template-columns:repeat(2, 1fr); }
.drawer-tab-btn { padding:10px 8px; background:#252525; color:#8fa5af; border:1px solid #444; border-radius:8px; font-size:0.76rem; font-weight:bold; text-transform:uppercase; cursor:pointer; transition:0.2s; }
.drawer-tab-btn.active { background:rgba(0,188,212,0.16); color:var(--accent-blue); border-color:rgba(0,188,212,0.45); }
.drawer-tab-panel { width:100%; display:block; }
.drawer-tab-hidden-toggle { display:none !important; }
.control-select { width: 100%; padding: 12px; margin-bottom: 15px; background: #222; color: white; border: 1px solid #555; border-radius: 5px; font-size: 1rem; }
.panel-label { color: #aaa; font-size: 0.9rem; margin-bottom: 5px; display: block;}

.busbar-status { background: #222; border: 2px solid #555; padding: 15px; text-align: center; font-weight: bold; font-size: 1.2rem; border-radius: 8px; margin-bottom: 20px; transition: 0.3s; }
.busbar-status.live { border-color: var(--accent-green); color: var(--accent-green); background: rgba(76, 175, 80, 0.1); text-shadow: 0 0 10px var(--accent-green); }
.busbar-status.dead { border-color: var(--accent-red); color: var(--accent-red); }

.generator-box { border: 1px solid #444; border-radius: 8px; padding: 15px; margin-bottom: 15px; background: #1a1a1a; }
.gen-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; }
.gen-title { font-weight: bold; color: var(--accent-blue); }
.gen-status { font-size: 0.8rem; padding: 3px 8px; border-radius: 12px; background: #333; }
.gen-status.running { background: var(--accent-green); color: black; }
.gen-status.starting { background: var(--accent-orange); color: black; animation: blink 0.8s infinite; }
.gen-status.error { background: var(--accent-red); color: white; }

.meter-grid { display: grid;
        grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.meter { background: #000; border: 1px inset #555; padding: 10px; text-align: center; border-radius: 4px; }
.meter-val { font-family: 'Courier New', Courier, monospace; font-size: 1.2rem; color: var(--accent-green); font-weight: bold; }
.meter-label { font-size: 0.6rem; color: #888; text-transform: uppercase; }
.qep-unit-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.qep-subpanel { border-radius:6px; padding:8px; min-width:0; }
.qep-subpanel-motor { border:1px solid rgba(255,152,0,0.35); }
.qep-subpanel-gen { border:1px solid rgba(0,188,212,0.35); }
.qep-meter-grid-3 { grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:6px; }
.qep-meter-grid-2 { grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.qep-carter-row { display:flex; gap:6px; }
.qep-fill-btn { min-width:0; }
.system-strip { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#101820; border:1px solid rgba(33,150,243,0.35); border-radius:6px; padding:8px 10px; margin-bottom:10px; }
.system-strip-title { font-size:0.75rem; color:#2196f3; font-weight:bold; }
.system-strip-value { font-family:'Courier New', monospace; color:#bbb; font-size:0.8rem; }
.system-strip-badge { font-size:0.7rem; padding:2px 8px; border-radius:10px; background:#333; color:#888; }
.fluid-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.fluid-card { background:#111; border:1px solid #333; border-radius:6px; padding:8px; text-align:center; }
.fluid-card-title { font-size:0.62rem; text-transform:uppercase; color:#888; margin-bottom:4px; }
.fluid-card-value { font-family:'Courier New', monospace; font-size:0.95rem; font-weight:bold; }
.prop-visual { display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(76,175,80,0.08)); border:1px solid rgba(76,175,80,0.2); border-radius:6px; margin-bottom:10px; }
.prop-disc { width:18px; height:18px; border:2px solid #666; border-radius:50%; position:relative; }
.prop-disc.spin { border-color:var(--accent-green); box-shadow:0 0 10px rgba(76,175,80,0.4); animation:spin 0.45s linear infinite; }
.prop-disc::before, .prop-disc::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:18px; background:currentColor; transform-origin:center; opacity:0.9; }
.prop-disc::before { transform:translate(-50%, -50%) rotate(45deg); }
.prop-disc::after { transform:translate(-50%, -50%) rotate(-45deg); }
.prop-flow { font-size:0.7rem; color:#aaa; text-transform:uppercase; letter-spacing:0.4px; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.breaker-btn { width: 100%; padding: 12px; border: 2px solid #555; background: #222; color: white; font-weight: bold; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.breaker-btn:hover:not(:disabled) { background: #333; border-color: #888; }
.breaker-btn.closed { background: rgba(76, 175, 80, 0.2); border-color: var(--accent-green); color: var(--accent-green); }
.breaker-btn.closed:hover:not(:disabled) { background: rgba(76, 175, 80, 0.35); }
.station-container { margin-top: 15px; background: #222; padding: 15px; border-radius: 8px; border: 1px solid #444; }
.lever-slider { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; background: #555; outline: none; transition: opacity .2s; margin-top: 10px; }
.lever-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 35px; border-radius: 4px; background: var(--accent-orange); cursor: pointer; border: 2px solid #fff; }
.lever-slider:disabled { opacity: 0.3; cursor: not-allowed;}

/* [TAG-CMD-002] 0.10.25-beta (25/10/2026) - Chave seletora LOCAL / PASSADIÇO do MCP.
   Chave rotativa de painel: o "knob" gira -45° (LOCAL) ou +45° (PASSADIÇO), como a
   chave de posto de comando de um console de praça de máquinas. Lâmpadas acendem
   (classe .on): âmbar = comando no passadiço; verde = pronto p/ partida remota. */
.station-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.station-pos { font-size: 0.72rem; font-weight: bold; color: #777; letter-spacing: 0.04em; }
.station-pos.active { color: #fff; }
.station-switch { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #666; background: radial-gradient(circle at 40% 35%, #555, #1b1b1b); cursor: pointer; padding: 0; }
.station-switch:disabled { cursor: not-allowed; opacity: 0.6; }
.station-knob { position: absolute; left: 50%; top: 6px; width: 8px; height: 20px; margin-left: -4px; border-radius: 4px; background: #ffc107; transform-origin: 50% 20px; transform: rotate(-45deg); transition: transform .25s; }
.station-switch[data-station="PASSADICO"] .station-knob { transform: rotate(45deg); }
.station-lamps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.station-lamp { font-size: 0.62rem; font-weight: bold; padding: 3px 7px; border-radius: 10px; border: 1px solid #444; color: #666; background: #161616; }
.station-lamp.amber.on { color: #1a1100; background: #ffb300; border-color: #ffd54f; box-shadow: 0 0 8px rgba(255,179,0,0.6); }
.station-lamp.green.on { color: #04140a; background: #4caf50; border-color: #81c784; box-shadow: 0 0 8px rgba(76,175,80,0.6); }
.estop-btn { width: 100%; margin-top: 8px; padding: 8px; background: #3a0000; border: 2px solid var(--accent-red); color: #ffcdd2; font-weight: bold; }
.estop-btn:disabled { opacity: 0.35; }
.bridge-station-badge { font-size: 0.62rem; font-weight: bold; padding: 2px 6px; border-radius: 8px; background: #333; color: #aaa; }
.bridge-station-badge.on { background: #ffb300; color: #1a1100; }
.bridge-mcp-line { font-size: 0.75rem; color: #9ed8b0; font-family: monospace; margin: 6px 0; }
.bridge-btn-row { display: flex; gap: 6px; }
.lever-readout { text-align: center; color: var(--accent-orange); font-weight: bold; font-size: 0.8rem; margin-top: 4px; }
#three-d-drive-panel .three-d-drive-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bridge-btn { flex: 1; padding: 8px 4px; margin: 0; font-size: 0.72rem; }

.fan-blade { font-size: 2rem; color: #888; display: inline-block; margin: 4px; transition: color 0.3s; }
.fan-blade.spinning { color: #4caf50; animation: spin 0.8s linear infinite; }
.fan-blade.exhaust.spinning { color: #ff9800; animation: spin 0.8s linear infinite backwards; }
.blink-red { animation: blink-fast-red 0.5s infinite alternate; }
@keyframes blink-fast-red { 0% { color: #ff1744; text-shadow: 0 0 5px #ff1744; } 100% { color: #aa0000; text-shadow: none; } }
.aux-grid { display: grid;
        grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.aux-btn { padding: 10px 5px; background: #333; border: 1px solid #555; color: #888; font-size: 0.8rem; border-radius: 4px; cursor: pointer; transition: 0.3s; font-weight: bold;}
.aux-btn:hover:not(:disabled) { background: #444; border-color: #777; color: #bbb; }
.aux-btn.active { background: rgba(76, 175, 80, 0.2); color: var(--accent-green); border-color: var(--accent-green); }
.aux-btn.active:hover:not(:disabled) { background: rgba(76, 175, 80, 0.35); }
.aux-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.clutch-btn { background: #552222; border-color: #883333; margin-top: 10px; }
.clutch-btn:hover:not(:disabled) { background: #6e2b2b; border-color: #aa4444; }
.clutch-btn.engaged { background: var(--accent-purple); border-color: #ba68c8; color: white; animation: pulse 2s infinite; }
.clutch-btn.engaged:hover:not(:disabled) { background: #7b1fa2; }

/* BARRA INFERIOR DE NAVEGAÇÃO */
#bottom-nav { display: flex; background-color: var(--nav-bg); border-top: 1px solid #333; height: 70px; flex-shrink: 0; }
.nav-btn { flex: 1; background: none; border: none; color: #888; font-size: 0.75rem; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s; }
.nav-btn:hover { color: #bbb; background-color: rgba(255,255,255,0.05); }
.nav-btn.active { color: var(--accent-blue); border-top: 3px solid var(--accent-blue); background-color: rgba(0, 188, 212, 0.1); }
.nav-btn.active:hover { background-color: rgba(0, 188, 212, 0.15); }
.nav-icon { font-size: 1.5rem; margin-bottom: 4px; }
.quick-panel-btn { width: 95%; max-width: 450px; margin-top: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(0, 188, 212, 0.35); background: linear-gradient(180deg, rgba(0, 188, 212, 0.12), rgba(0, 188, 212, 0.04)); color: var(--accent-blue); font-weight: bold; cursor: pointer; }
.stability-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.stability-card { background:#161616; border:1px solid #333; border-radius:8px; padding:12px; text-align:center; }
.stability-value { font-family:'Courier New', monospace; font-size:1.3rem; font-weight:bold; }
.stability-label { font-size:0.7rem; text-transform:uppercase; color:#888; margin-top:4px; }
.water-panel { border-color: rgba(0, 188, 212, 0.45); background: linear-gradient(180deg, rgba(0, 188, 212, 0.08), rgba(0, 188, 212, 0.03)); }
.water-panel-header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #24414a; }
.water-panel-title { color: var(--accent-blue); font-weight: bold; letter-spacing: 0.6px; }
.water-panel-badge { font-size:0.72rem; padding:4px 8px; border-radius:999px; background:rgba(0,188,212,0.18); color:var(--accent-blue); border:1px solid rgba(0,188,212,0.28); }
.three-d-panel { width:95%; max-width:960px; background:linear-gradient(180deg, #162028, #0d1319); border:1px solid rgba(0,188,212,0.28); border-radius:16px; padding:14px; box-shadow:0 16px 40px rgba(0,0,0,0.32); }
.three-d-stage { width:100%; height:420px; border-radius:14px; overflow:hidden; background:radial-gradient(circle at top, rgba(104,185,220,0.12), rgba(7,16,24,0.92)); border:1px solid rgba(255,255,255,0.06); }
.three-d-stage canvas { width:100%; height:100%; display:block; }
.three-d-panel:fullscreen { width:100vw; max-width:none; height:100vh; border-radius:0; padding:12px; display:flex; flex-direction:column; overflow:auto; }
.three-d-panel:fullscreen .three-d-stage { flex:1; height:auto; min-height:60vh; }
.three-d-panel:fullscreen .three-d-hud { margin-top:10px; }
.three-d-panel:fullscreen.three-d-config-open .three-d-stage { flex:0 0 48vh; min-height:48vh; }
.three-d-panel:fullscreen.three-d-config-open .three-d-anchor-panel { margin-bottom:12px; }
.three-d-hud { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; margin-top:12px; }
.three-d-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:10px; }
.three-d-card-label { font-size:0.72rem; color:#7e99a8; text-transform:uppercase; margin-bottom:6px; }
.three-d-card-value { font-family:'Courier New', monospace; font-size:1rem; color:#dff8ff; font-weight:bold; }
.three-d-actions { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.three-d-btn { width:auto; min-width:240px; margin-bottom:0; background:linear-gradient(180deg, rgba(244,67,54,0.18), rgba(244,67,54,0.08)); border-color:rgba(244,67,54,0.4); color:#ffd8d8; }
.three-d-config-btn { background:linear-gradient(180deg, rgba(0,188,212,0.18), rgba(0,188,212,0.08)); border-color:rgba(0,188,212,0.38); color:#d9fbff; min-width:220px; }
.three-d-mooring-status { font-size:0.85rem; color:#9ed8b0; font-weight:bold; letter-spacing:0.04em; }
#ui-3d-model-status { display:none; }
.three-d-anchor-panel { margin-top:12px; padding:14px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.three-d-anchor-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.three-d-anchor-title { color:var(--accent-blue); font-weight:bold; letter-spacing:0.04em; }
.three-d-anchor-save-status { font-size:0.75rem; color:#ffcc80; font-weight:bold; }
.three-d-select { max-width:220px; margin-bottom:12px; }
.three-d-anchor-slider-row { display:flex; align-items:center; justify-content:space-between; margin:8px 0 4px; gap:12px; }
.three-d-anchor-slider-label { font-size:0.8rem; color:#8aa3af; }
.three-d-anchor-slider-value { font-family:'Courier New', monospace; font-weight:bold; color:#dff8ff; }
.three-d-anchor-slider { margin-top:0; margin-bottom:8px; }
.three-d-save-btn { width:auto; min-width:220px; margin-top:10px; margin-bottom:0; background:linear-gradient(180deg, rgba(76,175,80,0.2), rgba(76,175,80,0.08)); border-color:rgba(76,175,80,0.35); color:#dcffe0; }
.three-d-drive-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.three-d-drive-box { padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); }
.three-d-legend { margin-top:10px; color:#8aa3af; font-size:0.82rem; line-height:1.4; }

#screen-propulsion .drawer-tab-row.tab-row-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#screen-propulsion .control-panel {
    width: 100%;
    max-width: 420px;
    padding: 14px;
}

#screen-propulsion .generator-box {
    padding: 12px;
    overflow: hidden;
}

#screen-propulsion .gen-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#screen-propulsion .gen-title,
#screen-propulsion .gen-status,
#screen-propulsion .system-strip-value,
#screen-propulsion .system-strip-badge,
#screen-propulsion .meter-val {
    white-space: normal;
    overflow-wrap: anywhere;
}

#screen-propulsion .system-strip {
    flex-wrap: wrap;
    align-items: flex-start;
}

#propulsion-air-panel .meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#propulsion-air-panel .meter {
    min-width: 0;
    padding: 8px;
}

#propulsion-air-panel .meter-val {
    font-size: 1rem;
    line-height: 1.15;
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #main-display.desktop-layout {
        width: 100%;
        max-width: 1180px;
        /* [TAG-RESP-014] 18/10/2026 - Altura flexível (flex:1 herdado) em vez de
           calc(100vh - 70px): o banner de alarme não corta mais o rodapé dos painéis. */
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 auto;
        padding: 4px 12px 8px;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: minmax(250px, 320px) minmax(320px, 390px) minmax(250px, 320px);
        gap: 10px;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
    }

    #main-display.desktop-layout .screen {
        height: 100%;
        min-height: 0;
        width: 100%;
        max-width: none;
        overflow-y: hidden;
        padding-bottom: 0;
    }

    #main-display.desktop-layout .desktop-core {
        grid-column: 2;
        align-self: center;
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 390px;
        height: fit-content;
        justify-self: center;
    }

    #main-display.desktop-layout .desktop-side-panel {
        align-self: stretch;
        justify-self: stretch;
        background: rgba(10, 18, 24, 0.78);
        border: 1px solid rgba(0, 188, 212, 0.2);
        border-radius: 16px;
        padding: 0 0 10px;
        box-shadow: 0 18px 34px rgba(0,0,0,0.2);
        
        overflow-y: auto;
        overflow-x: hidden;
    }

    #main-display.desktop-layout .desktop-side-left { grid-column: 1; }
    #main-display.desktop-layout .desktop-side-right { grid-column: 3; }

    #main-display.desktop-layout .desktop-side-panel .control-panel,
    #main-display.desktop-layout .desktop-side-panel .three-d-panel,
    #main-display.desktop-layout .desktop-side-panel .quick-panel-btn {
        width: calc(100% - 14px);
        max-width: none;
    }

    #main-display.desktop-layout .desktop-side-panel .screen-title {
        text-align: left;
        width: calc(100% - 14px);
        font-size: 0.92rem;
        margin-top: 0;
        margin-bottom: 6px;
    }

    #main-display.desktop-layout .desktop-core .screen-title {
        margin-top: 0;
        margin-bottom: 6px;
        font-size: 0.98rem;
    }

    #main-display.desktop-layout .desktop-side-panel .control-btn,
    #main-display.desktop-layout .desktop-side-panel .control-select,
    #main-display.desktop-layout .desktop-side-panel .aux-btn {
        font-size: 0.82rem;
    }

    #main-display.desktop-layout .desktop-core .hull-container,
    #main-display.desktop-layout .desktop-core .quick-panel-btn {
        max-width: 390px;
        width: 100%;
    }

    #main-display.desktop-layout .desktop-core .hull-container {
        padding: 28px 8px 8px;
        gap: 3px;
    }

    #main-display.desktop-layout .desktop-core .slot {
        font-size: 0.5rem;
        padding: 3px;
    }

    #main-display.desktop-layout .desktop-core .slot span.capacity {
        font-size: 0.42rem;
    }

    #main-display.desktop-layout .desktop-core .slot.type-engine {
        min-height: 34px;
    }

    #main-display.desktop-layout .desktop-core .slot.type-lo {
        min-height: 26px;
        gap: 4px;
    }

    #main-display.desktop-layout .desktop-side-panel .control-panel {
        padding: 12px;
        margin-top: 10px;
    }

    #main-display.desktop-layout .desktop-side-panel .generator-box {
        padding: 10px;
        margin-bottom: 10px;
    }

    #main-display.desktop-layout .desktop-side-panel .meter-grid {
        gap: 6px;
    }

    #main-display.desktop-layout .desktop-side-panel .meter {
        padding: 7px 5px;
    }

    #main-display.desktop-layout .desktop-side-panel .meter-val {
        font-size: 0.9rem;
    }

    #main-display.desktop-layout .desktop-side-panel .meter-label {
        font-size: 0.52rem;
        line-height: 1.1;
    }

    #screen-power.desktop-side-panel .qep-unit-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #screen-power.desktop-side-panel .qep-meter-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    #screen-power.desktop-side-panel .qep-meter-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-panel {
        padding: 10px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-stage {
        height: 220px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-hud {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card {
        padding: 7px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card-label {
        font-size: 0.62rem;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card-value {
        font-size: 0.76rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-actions {
        gap: 6px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-btn,
    #main-display.desktop-layout .desktop-side-panel .three-d-config-btn,
    #main-display.desktop-layout .desktop-side-panel .three-d-save-btn {
        min-width: 100%;
        width: 100%;
    }
}
@media (min-width: 1280px) {
    #main-display.desktop-layout {
        width: 100%;
        max-width: 1500px;
        /* [TAG-RESP-014] 18/10/2026 - Altura flexível (flex:1 herdado) em vez de
           calc(100vh - 70px): o banner de alarme não corta mais o rodapé dos painéis. */
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 auto;
        padding: 0 12px 8px;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: minmax(300px, 380px) minmax(420px, 500px) minmax(300px, 380px);
        gap: 10px;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
    }

    #main-display.desktop-layout .screen {
        height: 100%;
        min-height: 0;
        width: 100%;
        overflow-y: hidden;
        padding-bottom: 0;
    }

    #main-display.desktop-layout .desktop-core {
        grid-column: 2;
        align-self: center;
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 500px;
        height: fit-content;
        justify-self: center;
    }

    #main-display.desktop-layout .desktop-side-panel {
        align-self: stretch;
        justify-self: stretch;
        background: rgba(10, 18, 24, 0.78);
        border: 1px solid rgba(0, 188, 212, 0.2);
        border-radius: 18px;
        padding: 0 0 60px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.22);
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 188, 212, 0.35) rgba(255,255,255,0.04);
    }

    #main-display.desktop-layout .desktop-side-left { grid-column: 1; }
    #main-display.desktop-layout .desktop-side-right { grid-column: 3; }

    #main-display.desktop-layout .desktop-side-panel .control-panel,
    #main-display.desktop-layout .desktop-side-panel .three-d-panel,
    #main-display.desktop-layout .desktop-side-panel .quick-panel-btn {
        width: calc(100% - 18px);
        max-width: none;
    }

    #main-display.desktop-layout .desktop-side-panel .control-panel:first-of-type,
    #main-display.desktop-layout .desktop-side-panel .three-d-panel:first-of-type,
    #main-display.desktop-layout .desktop-side-panel .quick-panel-btn:first-of-type {
        margin-top: 2px;
    }

    #main-display.desktop-layout .desktop-side-panel .screen-title {
        text-align: left;
        width: calc(100% - 18px);
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 8px;
    }

    #main-display.desktop-layout .desktop-core .screen-title {
        margin-top: 0;
        margin-bottom: 6px;
    }

    #main-display.desktop-layout .desktop-side-panel .panel-label,
    #main-display.desktop-layout .desktop-side-panel .meter-label,
    #main-display.desktop-layout .desktop-side-panel .system-strip-title,
    #main-display.desktop-layout .desktop-side-panel .gen-title {
        white-space: nowrap;
    }

    #main-display.desktop-layout .desktop-side-panel .control-btn,
    #main-display.desktop-layout .desktop-side-panel .control-select,
    #main-display.desktop-layout .desktop-side-panel .aux-btn {
        font-size: 0.92rem;
    }

    #main-display.desktop-layout .desktop-core .hull-container,
    #main-display.desktop-layout .desktop-core .quick-panel-btn {
        max-width: 500px;
        width: 100%;
    }

    #main-display.desktop-layout .desktop-core .hull-container {
        padding: 36px 12px 12px 12px;
        gap: 4px;
    }

    #main-display.desktop-layout .desktop-core .slot {
        font-size: 0.58rem;
        padding: 4px;
    }

    #main-display.desktop-layout .desktop-core .slot span.capacity {
        font-size: 0.48rem;
    }

    #main-display.desktop-layout .desktop-core .slot.type-engine {
        min-height: 38px;
    }

    #main-display.desktop-layout .desktop-core .slot.type-lo {
        min-height: 30px;
        gap: 5px;
    }

    #screen-power.desktop-side-panel .busbar-status {
        font-size: 0.92rem;
        line-height: 1.3;
        padding: 12px;
        margin-bottom: 14px;
        word-break: break-word;
    }

    #screen-power.desktop-side-panel .generator-box {
        padding: 12px;
        margin-bottom: 12px;
    }

    #screen-power.desktop-side-panel .gen-header {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }

    #screen-power.desktop-side-panel .meter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #screen-power.desktop-side-panel .meter {
        padding: 8px;
    }

    #screen-power.desktop-side-panel .meter-val {
        font-size: 0.95rem;
    }

    #screen-power.desktop-side-panel .breaker-btn {
        font-size: 0.84rem;
        padding: 10px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-panel {
        padding: 12px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-stage {
        height: 300px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-hud {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card {
        padding: 8px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card-label {
        font-size: 0.68rem;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-card-value {
        font-size: 0.82rem;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-actions {
        gap: 8px;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-btn,
    #main-display.desktop-layout .desktop-side-panel .three-d-config-btn,
    #main-display.desktop-layout .desktop-side-panel .three-d-save-btn {
        min-width: 100%;
        width: 100%;
    }
}
@media (min-width: 1280px) and (max-width: 1460px) {
    #main-display.desktop-layout {
        max-width: 1360px;
        grid-template-columns: minmax(270px, 330px) minmax(400px, 460px) minmax(270px, 330px);
        gap: 10px;
    }

    #main-display.desktop-layout .desktop-side-panel .control-btn,
    #main-display.desktop-layout .desktop-side-panel .control-select,
    #main-display.desktop-layout .desktop-side-panel .aux-btn {
        font-size: 0.88rem;
    }

    #main-display.desktop-layout .desktop-core,
    #main-display.desktop-layout .desktop-core .hull-container,
    #main-display.desktop-layout .desktop-core .quick-panel-btn {
        max-width: 460px;
    }

    #main-display.desktop-layout .desktop-core .hull-container {
        padding: 32px 10px 10px 10px;
        gap: 3px;
    }

    #main-display.desktop-layout .desktop-core .slot {
        font-size: 0.54rem;
        padding: 3px;
    }

    #main-display.desktop-layout .desktop-core .slot span.capacity {
        font-size: 0.44rem;
    }

    #main-display.desktop-layout .desktop-side-panel .three-d-stage {
        height: 270px;
    }
}
@media (max-width: 720px) {
    .control-panel { width: 100%; max-width: 100%; padding: 14px; }
    #screen-power .control-panel { padding: 12px; }
    #screen-power .generator-box { padding: 12px; }
    #screen-power .gen-header { align-items: center; gap: 8px; }
    #screen-power .gen-title { font-size: 0.78rem; }
    #screen-power .gen-status { font-size: 0.72rem; }
    #screen-power .qep-unit-grid { grid-template-columns: 1fr; gap: 10px; }
    #screen-power .qep-subpanel { padding: 8px; }
    #screen-power .qep-meter-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #screen-power .qep-meter-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #screen-power .meter { padding: 8px 4px; min-width: 0; }
    #screen-power .meter-val { font-size: 0.95rem; }
    #screen-power .meter-label { font-size: 0.52rem; line-height: 1.1; }
    #screen-power .carter-meter { padding: 8px 4px; min-width: 0; }
    #screen-power .qep-fill-btn { font-size: 0.66rem !important; padding: 7px 4px !important; }
    #screen-power .breaker-btn,
    #screen-power .control-btn { font-size: 0.92rem; }
    .three-d-stage { height:320px; }
    .three-d-hud { grid-template-columns:1fr 1fr; }
    .three-d-anchor-header { align-items:flex-start; flex-direction:column; }
    .three-d-drive-grid { grid-template-columns:1fr; }
}













/* =====================================================================
   [TAG-RESP-015] 18/10/2026 - Autor: Jossian Brito - v0.9.2-beta
   CORREÇÃO: no desktop a coluna central (.desktop-core) usava
   align-self:center + height:fit-content. Quando a altura do casco (85vh)
   + título + botão superava a área útil, o excesso transbordava para CIMA
   (título e proa cortados em 1024–1366 px de largura).
   Agora a coluna ocupa 100% da altura da grade e o canvas da planta
   (#pixi-hull-container) recebe flex:1 — "lastro variável": ele absorve
   exatamente o espaço que sobra entre o título e o botão de banda/trim.
   ===================================================================== */
@media (min-width: 1024px) {
    /* Grid auto-placement: #screen-build (coluna 2) vem ANTES do painel esquerdo
       (coluna 1) no DOM; sem grid-row explícito o navegador empurra o painel
       esquerdo para uma 2ª linha implícita. Fixamos as três colunas na linha 1. */
    #main-display.desktop-layout .desktop-core,
    #main-display.desktop-layout .desktop-side-left,
    #main-display.desktop-layout .desktop-side-right {
        grid-row: 1;
    }
    #main-display.desktop-layout .desktop-core {
        align-self: stretch;
        position: relative;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #main-display.desktop-layout .desktop-core #pixi-hull-container {
        flex: 1 1 auto;
        height: auto;
        min-height: 320px;
        max-height: none;
        margin-bottom: 10px;
    }
}

/* =====================================================================
   [TAG-UI-010] PAINEL SINÓPTICO (MÍMICO P&ID) - 18/10/2026
   Autor: Jossian Brito - v0.9.3-beta
   Paleta e disposição no padrão dos consoles de simulador de praça de
   máquinas: fundo verde de console, tubulação azul-clara (FW) / âmbar
   (FO), caixas de valor pretas com texto amarelo, leituras G/P/T em
   verde-claro, manômetros bege, equipamentos cinza, botoneira na base.
   ===================================================================== */
:root {
    --mm-green: #23793a;        /* fundo do diagrama */
    --mm-green-dark: #165227;   /* molduras e barra de status */
    --mm-green-btn: #2e8b45;    /* botoneira */
    --mm-ink: #0b0b0b;          /* texto escuro sobre verde/bege */
    --mm-reading: #b6ff9c;      /* leituras G / P / T */
    --mm-yellow: #ffe14d;       /* valores em caixa preta */
    --mm-beige: #efe5bf;        /* manômetros */
    --mm-steel: #a9adb1;        /* equipamentos */
}

#screen-mimic { padding-bottom: 0; }
#screen-mimic.active { display: flex; }
.mm-console {
    width: 100%; height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--mm-green-dark);
    border: 2px solid #0c2f16; border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--mm-ink);
}

/* Barra superior: relógio | picture | título | alarmes */
.mm-topbar { display: grid; grid-template-columns: auto auto 1fr minmax(160px, 34%); gap: 4px; padding: 4px; background: var(--mm-green); border-bottom: 2px solid #0c2f16; }
.mm-cell { display: flex; flex-direction: column; justify-content: center; padding: 2px 10px; border: 1px solid #0c2f16; background: var(--mm-green-dark); font-size: 0.72rem; color: #d7f5d0; line-height: 1.2; }
#mm-clock { font-family: 'Courier New', monospace; font-weight: bold; color: #e8ffe0; }
.mm-run { color: #7dff6a; font-weight: bold; }
.mm-title { display: flex; align-items: center; padding: 0 14px; border: 1px solid #0c2f16; font-size: clamp(1rem, 2.1vw, 1.7rem); color: var(--mm-ink); background: var(--mm-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-alarms { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border: 1px solid #0c2f16; background: var(--mm-green-dark); font-size: 0.7rem; color: #d7f5d0; cursor: pointer; overflow: hidden; }
#mm-alarm-text { flex: 1; padding: 2px 6px; background: #0e3a1c; color: #9ccf9a; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mm-alarm-text.on { background: #e53935; color: #fff; animation: blink 1s infinite; }

/* Área do diagrama */
.mm-canvas { flex: 1 1 auto; min-height: 0; background: var(--mm-green); overflow: auto; -webkit-overflow-scrolling: touch; }
#mm-svg { display: block; width: 100%; height: 100%; min-width: 900px; min-height: 420px; }

/* Linha de status + legenda */
.mm-statusline { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 8px; background: var(--mm-green); border-top: 1px solid #0c2f16; font-size: 0.66rem; color: #d7f5d0; flex-wrap: wrap; }
#mm-alarm-state { padding: 1px 6px; background: #0e3a1c; color: #9ccf9a; font-weight: bold; }
#mm-alarm-state.on { background: #c6ff00; color: #102800; }
.mm-legend i { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 8px; vertical-align: middle; border: 1px solid #0c0c0c; }
.mm-lg-open { background: #fff; }
.mm-lg-closed { background: #1b1b1b; }
.mm-lg-flow { background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 7px); border-color: transparent !important; }

/* Botoneira inferior */
.mm-buttons { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));   /* 0.10.24: +1 botão (Quadro); +MD 04 (0.10.18) = 9 */ gap: 6px; padding: 6px; background: var(--mm-green); border-top: 2px solid #0c2f16; }
.mm-btn { padding: 6px 4px; background: var(--mm-green-btn); color: var(--mm-ink); border: 1px solid #0c2f16; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.35); font-size: 0.74rem; line-height: 1.15; cursor: pointer; }
.mm-btn:hover { background: #38a052; }
.mm-btn.active { background: #c9e8b8; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.35); }

/* ---------- Elementos SVG ---------- */
#mm-svg text { font-family: Arial, Helvetica, sans-serif; user-select: none; }
.mm-label { font-size: 11px; fill: #eaffe4; font-weight: bold; }
.mm-small { font-size: 9px; fill: #eaffe4; }
.mm-dark { fill: var(--mm-ink) !important; }
.mm-section { font-size: 12px; fill: #eaffe4; font-weight: bold; letter-spacing: 0.5px; }
.mm-reading { font-size: 10.5px; fill: var(--mm-reading); font-family: 'Courier New', monospace !important; font-weight: bold; }
/* [TAG-OPS-025] 0.10.19-beta: leitura do retorno por gravidade (alerta, piscando) */
.mm-reading-alert { fill: #ff5a4f; animation: mm-alert-blink 1s steps(2, start) infinite; }
@keyframes mm-alert-blink { to { visibility: hidden; } }
.mm-valbox { fill: #050505; stroke: #3d3d3d; stroke-width: 1; }
.mm-valtext { font-size: 10.5px; fill: var(--mm-yellow); font-family: 'Courier New', monospace !important; font-weight: bold; }

/* Tubulação: casca escura + núcleo colorido + overlay de fluxo animado */
.mm-pipe-casing { fill: none; stroke: #0e3a1c; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.mm-pipe { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.mm-flow { fill: none; stroke: #ffffff; stroke-width: 2; stroke-dasharray: 8 10; stroke-linecap: round; display: none; animation: mm-dash 1s linear infinite; }
.mm-pipe-group.active .mm-flow { display: inline; }
.mm-pipe-group.active .mm-pipe { opacity: 1; }
.mm-pipe-group.selected .mm-pipe-casing { stroke: var(--mm-yellow); stroke-width: 9; }
.mm-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; pointer-events: stroke; }
@keyframes mm-dash { to { stroke-dashoffset: -36; } }
.mm-tee { fill: #0e3a1c; }

.mm-valve { fill: #1b1b1b; stroke: #0b0b0b; stroke-width: 1.2; }
.mm-valve.open { fill: #ffffff; }

.mm-pump-body { fill: #0b0b0b; stroke: #8a8a8a; stroke-width: 2.5; }
.mm-pump-arrow { fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mm-pump.running .mm-pump-body { stroke: #7dff6a; }
.mm-pump.running .mm-pump-arrow { stroke: #7dff6a; }

.mm-tank-body { fill: #c9cbcd; stroke: #1c1c1c; stroke-width: 1.5; }
.mm-tank-level { opacity: 0.9; transition: y 0.6s ease, height 0.6s ease; }
.mm-tank-label { font-size: 10px; font-weight: bold; fill: var(--mm-ink); }
.mm-tank-pct { font-size: 10px; font-weight: bold; fill: var(--mm-ink); }
.mm-tank, .mm-engine { cursor: pointer; }
.mm-tank:hover .mm-tank-body, .mm-engine:hover .mm-engine-body { stroke: var(--mm-yellow); }

.mm-engine-body { fill: var(--mm-steel); stroke: #1c1c1c; stroke-width: 1.5; }
.mm-engine-head { fill: #8f9397; stroke: #1c1c1c; stroke-width: 1; }
.mm-engine-label { font-size: 12px; font-weight: bold; fill: var(--mm-ink); }
.mm-lamp { fill: #4a4a4a; stroke: #111; stroke-width: 1; }
.mm-lamp.on { fill: #39ff14; }
.mm-lamp.warn { fill: #ffab00; }
.mm-lamp.fault { fill: #ff1744; animation: blink 0.8s infinite; }

.mm-station { fill: var(--mm-beige); stroke: #1c1c1c; stroke-width: 1.5; }
.mm-cooler-body { fill: #b8bcc0; stroke: #1c1c1c; stroke-width: 1.5; }
.mm-cooler-tube { stroke: #5ec8f2; stroke-width: 2; }
.mm-tcv { fill: #ffffff; stroke: #0b0b0b; stroke-width: 1.5; }
.mm-purifier-bowl { fill: #6d7175; stroke: #111; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.mm-purifier-bowl.spinning { animation: mm-spin 0.6s linear infinite; }
@keyframes mm-spin { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } }

/* [TAG-UI-031] 0.10.15-beta (25/10/2026 01:00) QEP do purificador no MD 01:
   caixa bege de quadro elétrico, lâmpadas apagadas em tom escuro e acesas com halo. */
.mm-qep-cable { fill: none; stroke: #ffd54f; stroke-width: 1.5; stroke-dasharray: 3 3; }
.mm-qep-body { fill: #d9cfae; stroke: #1c1c1c; stroke-width: 1.5; }
.mm-qep-head { fill: #37474f; }
.mm-qep-title { font-size: 8.5px; font-weight: bold; fill: #ffffff; }
.mm-qep-small { font-size: 6px; font-weight: bold; fill: #222222; }
.mm-qep-lamp { stroke: #1c1c1c; stroke-width: 1.2; }
.mm-qep-lamp-power { fill: #555555; }
.mm-qep-lamp-run { fill: #1b3a1d; }
.mm-qep-lamp-acc { fill: #4a3a10; }
.mm-qep-lamp-trip { fill: #3d1512; }
.mm-qep-lamp-power.on { fill: #fffde7; filter: drop-shadow(0 0 3px #fffde7); }
.mm-qep-lamp-run.on { fill: #4caf50; filter: drop-shadow(0 0 3px #4caf50); }
.mm-qep-lamp-acc.on { fill: #ffb300; filter: drop-shadow(0 0 3px #ffb300); animation: blink 1s infinite; }
.mm-qep-lamp-trip.on { fill: #f44336; filter: drop-shadow(0 0 3px #f44336); animation: blink 0.6s infinite; }
.mm-qep-display { fill: #000000; }
.mm-qep-digits { font-size: 9px; fill: #ffeb3b; font-family: 'Consolas', 'Courier New', monospace; }
.mm-qep-btn { stroke: #1c1c1c; stroke-width: 1.5; cursor: pointer; }
.mm-qep-btn:hover { stroke: var(--mm-yellow); stroke-width: 2.5; }
.mm-qep-btn-start { fill: #2e7d32; }
.mm-qep-btn-stop { fill: #c62828; }
.mm-qep-btn-reset { fill: #1565c0; }
.mm-qep-plate { fill: #263238; }
.mm-qep-feed { font-size: 7px; font-weight: bold; fill: #b2ff59; }
.mm-qep-msg { font-size: 6px; fill: #cfd8dc; }
.mm-qep-msg.trip { fill: #ff8a80; font-weight: bold; }

.mm-gauge-body { fill: var(--mm-beige); stroke: #1c1c1c; stroke-width: 1.5; }
.mm-gauge-title { font-size: 10px; font-weight: bold; fill: var(--mm-ink); }
.mm-gauge-num { font-size: 9px; fill: var(--mm-ink); }
.mm-gauge-tick { stroke: #1c1c1c; stroke-width: 1.4; }
.mm-gauge-needle { stroke: #0b0b0b; stroke-width: 2.5; stroke-linecap: round; transition: all 0.6s ease; }
.mm-gauge-hub { fill: #0b0b0b; }

/* Quadro didático (lousa verde, escrita a giz) */
.mm-edu-board { fill: #12391d; stroke: #e7e3c4; stroke-width: 2; }
.mm-edu-title { font-size: 11.5px; font-weight: bold; fill: #fff6b0; letter-spacing: 0.6px; }
.mm-edu-line { font-size: 10.5px; fill: #f3f6ee; font-family: 'Courier New', monospace !important; }
.mm-edu-small { font-size: 9px; fill: #c5d8bf; font-style: italic; }
.mm-edu-wall { stroke: #e7e3c4; stroke-width: 2; }
.mm-edu-profile { fill: rgba(94, 200, 242, 0.25); stroke: #5ec8f2; stroke-width: 2; }
/* [TAG-UI-034] 25/10/2026 - v0.10.24-beta - Quadro dinâmico: some/aparece com
   fade de 200 ms; oculto não captura toque (o tubo por baixo continua clicável). */
.mm-edu, .mm-edu-chip { transition: opacity 0.2s ease; }
.mm-edu-off { opacity: 0; pointer-events: none; }
.mm-edu-close { cursor: pointer; }
.mm-edu-close rect { fill: #0b2613; stroke: #e7e3c4; stroke-width: 1; }
.mm-edu-close-x { font-size: 11px; font-weight: bold; fill: #fff6b0; }
.mm-edu-fixed .mm-edu-close { display: none; }   /* modo SEMPRE: sem ✕ */
.mm-edu-chip { cursor: pointer; }
.mm-edu-chip rect { fill: #12391d; stroke: #e7e3c4; stroke-width: 1.5; opacity: 0.92; }
.mm-edu-chip-txt { font-size: 11px; font-weight: bold; fill: #fff6b0; }
.mm-edu-mode[data-mode="always"] { box-shadow: inset 0 0 0 2px #fff6b0; }
.mm-edu-mode[data-mode="hidden"] { opacity: 0.75; }
/* Nível de qualidade baixo (TugQuality, v0.10.23): sem transição */
.q-low .mm-edu, .q-low .mm-edu-chip { transition: none; }
/* Desktop: com o Tutor aberto o diagrama encolhe para a esquerda do painel
   (380 px + 12 px de margem), senão o quadro aberto pelo Tutor ficaria
   escondido justamente atrás dele. */
@media (min-width: 1024px) {
    body.tutor-open #screen-mimic .mm-canvas { padding-right: 392px; transition: padding-right 0.28s ease; }
    /* sem o mínimo de 900 px: em ~1100 px o diagrama encolhe em vez de transbordar */
    body.tutor-open #screen-mimic #mm-svg { min-width: 0; }
}

/* Desktop: o Sinóptico ocupa as três colunas */
@media (min-width: 1024px) {
    #main-display.desktop-layout.mimic-mode { display: flex; max-width: none; padding: 6px 10px 8px; }
    #main-display.desktop-layout.mimic-mode #screen-mimic { width: 100%; height: 100%; overflow: hidden; }
}
/* Mobile: diagrama rola horizontalmente; botoneira em 3 colunas */
@media (max-width: 760px) {
    .mm-topbar { grid-template-columns: auto 1fr; }
    .mm-topbar .mm-cell:nth-child(2) { display: none; }
    .mm-alarms { grid-column: 1 / -1; }
    .mm-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* 9 botões em 2 linhas (5 + 4) */
    .mm-legend { display: none; }
    #mm-svg { height: auto; min-height: 0; }
}

/* =====================================================================
   [TAG-RESP-017] SINÓPTICO NO CELULAR - 22/10/2026 05:00 - Jossian Brito - v0.10.5-beta
   Problema (relato de Charlie Bravo): no celular em pé o MD 02 aparecia
   cortado à direita (PEAK VANTE, cooler, MCP BE) e, deitado, sobravam só
   ~175 px de altura para o diagrama.

   Por que acontece - a "razão de aspecto" é a boca/comprimento da tela:
     diagrama  = 1280 / 600  ≈ 2,13 : 1  (largo, como um sheer plan)
     celular em pé  = 390 / 844  ≈ 0,46 : 1
     celular deitado = 844 / 390 ≈ 2,16 : 1  (quase igual ao diagrama!)
   Em paisagem o desenho cabe inteiro DESDE QUE a altura não seja gasta com
   barras. Com preserveAspectRatio="meet" a escala é
     k = min(L_canvas / 1280, A_canvas / 600)
   Ex.: canvas 680 × 304 px → k = min(0,53; 0,51) = 0,51 → diagrama 649 × 304.
   Cada 30 px de barra a menos dão +64 px de largura útil ao desenho (30·2,13).
   Então, em paisagem baixa: título fino, botoneira vira coluna à direita
   (sobra largura, falta altura) e a navegação inferior perde os rótulos.
   ===================================================================== */

/* Aviso de girar: escondido por padrão; só aparece no retrato estreito */
.mm-rotate-hint { display: none; align-items: center; gap: 8px; padding: 6px 8px; background: #0e3a1c; border-bottom: 1px solid #0c2f16; color: #e8ffe0; font-size: 0.78rem; line-height: 1.25; }
.mm-rotate-icon { font-size: 1.3rem; color: var(--mm-yellow); animation: mm-rotate-nudge 2.4s ease-in-out infinite; display: inline-block; }
.mm-rotate-hint span:nth-child(2) { flex: 1; }
.mm-rotate-hint button { flex-shrink: 0; padding: 4px 8px; background: var(--mm-green-btn); color: var(--mm-ink); border: 1px solid #0c2f16; font-size: 0.72rem; cursor: pointer; }
/* O ícone "balança" 90° como o celular sendo deitado (lembrete visual) */
@keyframes mm-rotate-nudge { 0%, 60%, 100% { transform: rotate(0deg); } 30% { transform: rotate(90deg); } }

@media (max-width: 760px) and (orientation: portrait) {
    .mm-console:not(.mm-hint-off) .mm-rotate-hint { display: flex; }
}

/* Paisagem baixa (celular deitado): altura <= 500 px.
   Tablets e desktop (altura maior) não são afetados. */
@media (orientation: landscape) and (max-height: 500px) {
    #main-display:has(#screen-mimic.active) { padding: 2px 4px; }
    .mm-console {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px;   /* diagrama | botoneira */
        grid-template-rows: auto minmax(0, 1fr);       /* título  | corpo     */
        border-width: 1px;
        padding-left: 42px;   /* calha à esquerda para os botões ? e Tutor (34 px) */
    }
    /* Barra de título numa linha fina (≈ 26 px) */
    .mm-topbar { grid-column: 1 / -1; grid-template-columns: auto auto 1fr minmax(120px, 30%); gap: 2px; padding: 2px; }
    .mm-cell { flex-direction: row; gap: 6px; align-items: center; padding: 1px 6px; font-size: 0.64rem; }
    .mm-title { padding: 0 8px; font-size: 0.85rem; }
    .mm-alarms { grid-column: auto; padding: 1px 6px; font-size: 0.62rem; }   /* desfaz a 2ª linha do bloco ≤ 760 px */
    /* Diagrama ocupa a célula inteira, escala "meet" sem rolagem */
    .mm-canvas { grid-column: 1; grid-row: 2; overflow: hidden; }
    #mm-svg { width: 100%; height: 100%; min-width: 0; min-height: 0; }
    /* Linha de status: o estado do alarme já está na barra de título */
    .mm-statusline { display: none; }
    /* Botoneira em coluna à direita: 7 botões dividem a altura */
    .mm-buttons { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 3px; padding: 3px; border-top: 0; border-left: 2px solid #0c2f16; }
    .mm-btn { padding: 2px; font-size: 0.62rem; line-height: 1.1; overflow: hidden; }
    /* Navegação inferior só com ícones (70 px → 40 px) */
    body:has(#screen-mimic.active) #bottom-nav { height: 40px; }
    body:has(#screen-mimic.active) .nav-btn { font-size: 0; }
    body:has(#screen-mimic.active) .nav-icon { margin-bottom: 0; }
}

/* =====================================================================
   [TAG-UI-011] MD 03 - PIANO DE VÁLVULAS - 18/10/2026 - Jossian Brito - v0.9.5-beta
   Válvula de 1/4 de volta com alavanca: alavanca ao longo do tubo = aberta.
   ===================================================================== */
.mm-lever-valve { cursor: pointer; }
.mm-valve-lg { stroke-width: 1.6; }
.mm-lever-valve.open .mm-valve { fill: #ffffff; }
.mm-lever { stroke: #b8733a; stroke-width: 5; stroke-linecap: round; transition: all 0.25s ease; }
.mm-lever-valve.open .mm-lever { stroke: #ffd54f; }
.mm-lever-hub { fill: #2b2b2b; }
.mm-hit-rect { fill: transparent; }
.mm-lever-valve:hover .mm-valve { stroke: var(--mm-yellow); stroke-width: 2.5; }
.mm-tag { font-size: 11px; font-weight: bold; fill: var(--mm-yellow); font-family: 'Courier New', monospace !important; }
.mm-spool { fill: #f2f2f2; stroke: #1c1c1c; stroke-width: 1.2; }
.mm-blind { fill: #f2f2f2; stroke: #1c1c1c; stroke-width: 1.5; }
.mm-drain-line { stroke: #e0a63a; stroke-width: 3; }
.mm-gauge-board { fill: #d9dcdf; stroke: #1c1c1c; stroke-width: 1.5; }
.mm-status-board { fill: #0d2e17; stroke: #e7e3c4; stroke-width: 1.5; }

/* =====================================================================
   [TAG-OPS-012/013] VÁLVULAS DOS DAY TANKS E ALÍVIO - 21/10/2026 - Jossian Brito - v0.9.9-beta
   Painel de alimentação OD: verde = ABERTA, cinza = FECHADA; PSV aliviando em vermelho.
   No MD 01, as válvulas clicáveis ganham contorno amarelo ao passar o mouse.
   ===================================================================== */
.fv-panel-box { background: #2a2a2a; padding: 10px; border-radius: 6px; margin-bottom: 10px; }
.fv-panel-title { font-size: 0.8rem; color: #fff; font-weight: bold; display: block; margin-bottom: 6px; }
.fv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.fv-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* [TAG-FIFI-004] 25/10/2026 - Jossian Brito - v0.10.14-beta: 5 VA (4 motores + FIFI) */
.fv-row-va { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* [TAG-OPS-017] 0.10.3-beta: filtro duplex com alavanca de 3 posições + 2 trocas */
.fv-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-row-5 .fv-swap { grid-column: span 1; }
.fv-row-5 .fv-swap:disabled { opacity: 0.4; cursor: not-allowed; }
.fv-title.fv-alarm { color: #ff6b6b; }
.fv-title { grid-column: 1 / -1; font-size: 0.7rem; color: #bbb; font-weight: bold; }
.fv-btn { min-width: 0; padding: 4px 2px; font-size: 0.7rem; line-height: 1.25; }
.fv-btn small { font-weight: normal; }
.fv-psv { font-size: 0.72rem; color: #9fdc9f; font-family: 'Courier New', monospace; margin-top: 4px; overflow-wrap: anywhere; }
.fv-psv.lifting { color: #ff6b6b; font-weight: bold; }
.mm-valve.mm-clickable { cursor: pointer; }
.mm-valve.mm-clickable:hover { stroke: var(--mm-yellow); stroke-width: 2.5; }
.mm-psv { fill: #1b1b1b; stroke: #0b0b0b; stroke-width: 1.2; }
.mm-psv.lifting { fill: #e53935; }

/* =====================================================================
   [TAG-OPS-014] PAINEL DO INSTRUTOR - 21/10/2026 - Jossian Brito - v0.10.0-beta
   Painel flutuante escondido (Shift+I + PIN). Fica acima do tutor.
   ===================================================================== */
#instructor-panel { display: none; position: fixed; right: 16px; top: 64px; z-index: 3000; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow: auto; background: #0f2416; border: 1px solid #e7e3c4; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); color: #e8f5e9; font-size: 0.8rem; }
#instructor-panel.open { display: block; }
.ins-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #2e5a3a; background: #143320; }
.ins-head span { color: #ffd54f; font-family: 'Courier New', monospace; }
.ins-x { margin-left: auto; background: none; border: none; color: #e8f5e9; font-size: 1.2rem; cursor: pointer; }
.ins-body { padding: 10px 12px; display: grid; gap: 8px; }
.ins-body input[type="password"] { padding: 6px; background: #000; color: #ffd54f; border: 1px solid #555; border-radius: 4px; }
.ins-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-row .aux-btn { padding: 4px 10px; }
.ins-check { display: flex; gap: 6px; align-items: center; }
.ins-fault { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid #2e5a3a; border-radius: 6px; }
.ins-fault small { display: block; color: #9fbfa6; }
.ins-fault .aux-btn { padding: 4px 8px; font-size: 0.7rem; }
.ins-state { font-family: 'Courier New', monospace; font-size: 0.7rem; }
.ins-ativa { color: #ff6b6b; font-weight: bold; }
.ins-armada { color: #ffd54f; }
.ins-log { width: 100%; border-collapse: collapse; font-family: 'Courier New', monospace; font-size: 0.7rem; }
.ins-log th, .ins-log td { border-bottom: 1px solid #2e5a3a; padding: 3px 4px; text-align: left; vertical-align: top; }
@media (max-width: 560px) { .ins-fault { grid-template-columns: 1fr 1fr; } }

/* [TAG-OPS-016] 0.10.2-beta: checklist de pré-partida e alinhamento de serviço */
.ps-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 6px; }
#prestart-panel .ps-tabs .aux-btn.ps-eng, #main-display.desktop-layout .desktop-side-panel #prestart-panel .aux-btn.ps-eng { font-size: 0.66rem; padding: 6px 0; min-width: 0; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ps-eng.ready:not(.active) { border-color: #4caf50; color: #9fdc9f; }
.ps-summary { font-size: 0.75rem; color: #ffcc66; font-family: 'Courier New', monospace; margin-bottom: 4px; }
.ps-summary.ready { color: #4caf50; font-weight: bold; }
.ps-list { list-style: none; margin: 0 0 8px; padding: 0; }
.ps-item { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; font-size: 0.74rem; padding: 3px 0; border-bottom: 1px solid #333; }
.ps-item.ok { color: #9fdc9f; }
.ps-item.pending { color: #ff9a9a; }
.ps-mark { font-weight: bold; text-align: center; }
.ps-label { overflow-wrap: anywhere; }
.ps-show { font-size: 0.68rem; padding: 3px 6px; background: #1d3a5c; color: #cfe6ff; border: 1px solid #3a6ea5; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ps-align { width: 100%; }
.ps-align:disabled { opacity: 0.45; cursor: not-allowed; }
.ps-lock { display: block; font-size: 0.68rem; color: #aaa; margin-top: 4px; }

/* [TAG-UI-029] 0.10.20-beta (25/10/2026 00:30, Jossian Brito): recebimento de ELC
   e visor dos tanques de expansão. O visor é um "vidro de nível" vertical com
   os riscos MIN / FRIO / QUENTE / GARGALO; a cor do líquido segue o produto
   (vermelho = ELC, azul = água). */
.elc-badge { background: rgba(229,57,53,0.18); color: #ff8a80; border-color: rgba(229,57,53,0.35); }
.elc-red { color: #ff5252 !important; }
.elc-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.elc-btn-row .control-btn, .elc-btn-row .aux-btn { width: 100%; margin: 0; font-size: 0.72rem; }
.elc-pump-btn { background: #2a0606; color: #ff8a80; }
.elc-pump-btn.active { background: #b71c1c; color: #fff; }
.elc-topup-btn { background: #1d1d1d; color: #ffcdd2; }
.elc-drain-btn { background: #1a1a1a; color: #bbb; font-size: 0.72rem; }
.elc-air-info { font-family: 'Courier New', monospace; font-size: 0.7rem; color: #90caf9; margin: 2px 0 4px; }
.elc-air-info.alarm { color: #ff8a80; font-weight: bold; }
.elc-target-info { font-family: 'Courier New', monospace; font-size: 0.72rem; color: #ffcc80; margin: 4px 0; }
.elc-systems { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.elc-sys { border: 1px solid #333; border-radius: 6px; padding: 4px; text-align: center; font-size: 0.66rem; color: #ccc; cursor: pointer; }
.elc-sys.selected { border-color: #ff5252; }
.elc-sys.alarm { background: rgba(255,82,82,0.12); }
.elc-sys-name { font-weight: bold; white-space: nowrap; overflow: hidden; }
.elc-glass { position: relative; height: 90px; width: 26px; margin: 4px auto; border: 1px solid #777; border-radius: 4px; background: #0d0d0d; overflow: hidden; }
.elc-fill { position: absolute; left: 0; right: 0; bottom: 0; background: #e53935; transition: height 0.4s; }
.elc-fill.fw { background: #29b6f6; }
.elc-mark { position: absolute; left: 0; right: 0; border-top: 1px dashed #fff; opacity: 0.7; }
.elc-mark.min { border-color: #ffd54f; }
.elc-mark.neck { border-top-style: solid; border-color: #ff5252; }
.elc-cold-band { position: absolute; left: 0; right: 0; background: rgba(76,175,80,0.25); }
.elc-sys-val { font-family: 'Courier New', monospace; }
.elc-sys-state { font-size: 0.6rem; color: #9fdc9f; min-height: 1.4em; }
.elc-sys.alarm .elc-sys-state { color: #ff8a80; font-weight: bold; }
.elc-hint { font-size: 0.68rem; color: #aaa; margin-top: 6px; }
.eng-exp-row { font-family: 'Courier New', monospace; font-size: 0.72rem; color: #ffcdd2; margin: 4px 0; }

/* [TAG-UI-030] 0.10.20-beta: proteções do MCA e botão do PMS (standby automático) */
.eng-prot-row { font-family: 'Courier New', monospace; font-size: 0.68rem; color: #9fdc9f; margin: 2px 0 4px; overflow-wrap: anywhere; }
.eng-prot-row.alarm { color: #ff8a80; font-weight: bold; }
.pms-btn { width: 100%; margin: 2px 0 6px; font-size: 0.7rem; padding: 6px 4px; }
/* =============================================================================
   [TAG-ALM-002] 0.10.11-beta (25/10/2026) - Jossian Brito
   QUADRO DE ALARMES. Convenção de console de praça de máquinas:
     - pisca  = NÃO reconhecido (exige ACK);  fixo = reconhecido;
     - vermelho = classe A, âmbar = B, amarelo = C;
     - verde piscando = voltou ao normal antes do ACK; branco fixo = aguarda RESET.
   ============================================================================= */
#global-alarm-banner.alm-banner-ack { animation: none; }
#global-alarm-banner.alm-cls-B { background-color: #ef6c00; }
#global-alarm-banner.alm-cls-C { background-color: #f9a825; color: #1a1300; }
#global-alarm-banner.alm-banner-event { background-color: #37474f; color: #eceff1; animation: none; font-weight: 600; }
#global-alarm-banner.alm-banner-unack { animation: alm-flash 0.8s steps(1) infinite; }
@keyframes alm-flash { 0% { filter: none; } 50% { filter: brightness(0.55); } }

#alarm-fab { position: fixed; z-index: 2500; left: 68px; bottom: 84px; height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 22px; background: linear-gradient(180deg, #37474f, #263238); color: #eceff1; font-weight: 700; font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4); cursor: pointer; }
#alarm-fab.alm-ack { background: linear-gradient(180deg, #c62828, #8e1c1c); }
#alarm-fab.alm-unack { background: linear-gradient(180deg, #e53935, #b71c1c); animation: alm-flash 0.8s steps(1) infinite; }
#alarm-fab.alm-unack.alm-cls-B { background: linear-gradient(180deg, #fb8c00, #e65100); }
#alarm-fab.alm-unack.alm-cls-C { background: linear-gradient(180deg, #fdd835, #f9a825); color: #1a1300; }

#alarm-board { display: none; position: fixed; left: 16px; top: 64px; z-index: 3000; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 160px); overflow: auto; background: #10161b; border: 1px solid #b0bec5; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); color: #eceff1; font-size: 0.8rem; }
#alarm-board.open { display: block; }
.alm-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #1c262e; border-bottom: 1px solid #37474f; position: sticky; top: 0; }
.alm-counts { flex: 1; color: #b0bec5; font-size: 0.72rem; }
.alm-x { background: none; border: 0; color: #eceff1; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.alm-body { padding: 8px 12px 12px; }
.alm-table { width: 100%; border-collapse: collapse; }
.alm-table th { text-align: left; font-size: 0.68rem; color: #90a4ae; border-bottom: 1px solid #37474f; padding: 4px; }
.alm-table td { padding: 5px 4px; border-bottom: 1px solid #22303a; vertical-align: top; }
.alm-row { cursor: pointer; }
.alm-tag { font-family: monospace; font-size: 0.68rem; color: #b0bec5; word-break: break-all; }
.alm-state { font-size: 0.66rem; white-space: nowrap; }
.alm-empty { text-align: center; color: #81c784; padding: 16px !important; }
.alm-badge { display: inline-block; min-width: 20px; text-align: center; border-radius: 3px; font-weight: 800; }
.alm-badge.alm-cls-A { background: #e53935; color: #fff; }
.alm-badge.alm-cls-B { background: #fb8c00; color: #1a0e00; }
.alm-badge.alm-cls-C { background: #fdd835; color: #1a1300; }
.alm-unack.alm-cls-A td { background: rgba(229, 57, 53, 0.35); }
.alm-unack.alm-cls-B td { background: rgba(251, 140, 0, 0.30); }
.alm-unack.alm-cls-C td { background: rgba(253, 216, 53, 0.22); }
.alm-unack td, .alm-rtn-unack td { animation: alm-flash 0.8s steps(1) infinite; }
.alm-ack.alm-cls-A td { background: rgba(229, 57, 53, 0.18); }
.alm-ack.alm-cls-B td { background: rgba(251, 140, 0, 0.15); }
.alm-ack.alm-cls-C td { background: rgba(253, 216, 53, 0.12); }
.alm-rtn-unack td { background: rgba(102, 187, 106, 0.25); }
.alm-rtn-ack td { color: #cfd8dc; background: rgba(236, 239, 241, 0.06); }
.alm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.alm-btn { flex: 1 1 120px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 6px; border: 2px solid #546e7a; background: #263238; color: #eceff1; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em; cursor: pointer; }
.alm-btn small { font-weight: 500; font-size: 0.62rem; letter-spacing: 0; color: #b0bec5; }
.alm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.alm-btn-ack:not(:disabled) { border-color: #fdd835; background: #4a3f00; }
.alm-btn-reset:not(:disabled) { border-color: #66bb6a; background: #133d1a; }
.alm-btn-silence.active { border-color: #90caf9; background: #0d2a45; }
.alm-events ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 160px; overflow: auto; }
.alm-events li { padding: 3px 0; border-bottom: 1px dashed #263238; color: #b0bec5; font-size: 0.72rem; }
.alm-events li span { color: #78909c; font-family: monospace; margin-right: 6px; }
@media (max-width: 760px) {
    #alarm-board { left: 0; right: 0; top: 0; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
    .alm-state { white-space: normal; }
    .alm-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .alm-unack td, .alm-rtn-unack td, #alarm-fab.alm-unack, #global-alarm-banner.alm-banner-unack { animation-duration: 2s; }
}

/* [TAG-ALM-006] Sinóptico: ACK/RESET na linha de status e faixa fixa quando reconhecida */
.mm-alarm-ctl { display: inline-flex; align-items: center; gap: 4px; }
.mm-ack-btn { padding: 1px 8px; font: inherit; font-weight: 800; background: #0e3a1c; color: #d7f5d0; border: 1px solid #9ccf9a; cursor: pointer; }
.mm-ack-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#mm-alarm-text.ack { background: #b71c1c; color: #fff; animation: none; }
/* No Sinóptico a faixa "Alarmes" e os botões ACK/RESET do console já fazem o
   papel do 🔔; escondê-lo evita cobrir a botoneira MD 01 */
body:has(#screen-mimic.active) #alarm-fab { display: none; }
/* [TAG-UI-026] 0.10.16-beta (25/10/2026 03:30) - Filtros duplex PRIMÁRIO e SECUNDÁRIO no MD 01 */
.mm-duplex-can { fill: #d9dcdf; stroke: #1c1c1c; stroke-width: 1.2; }
.mm-duplex-can.on { fill: #7a4a1e; }                         /* em serviço: marrom diesel (ISO 14726) */
.mm-duplex-lever { stroke: #ffe14d; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.mm-duplex-label { font-size: 8px; font-weight: bold; fill: #ffe14d; paint-order: stroke; stroke: #0b3d1c; stroke-width: 2px; }
.mm-duplex.dp-alarm .mm-duplex-can { stroke: #ffb300; stroke-width: 2.2; animation: mm-duplex-blink 1s steps(2, start) infinite; }
.mm-duplex.low .mm-duplex-can { stroke: #ff3b30; stroke-width: 2.4; }
.mm-duplex-hit { fill: transparent; cursor: pointer; }
.mm-duplex-hit:hover { fill: rgba(255, 225, 77, 0.12); }
@keyframes mm-duplex-blink { to { stroke: #1c1c1c; } }
@media (prefers-reduced-motion: reduce) { .mm-duplex.dp-alarm .mm-duplex-can { animation: none; } }
/* Quadro dos filtros (modal): um bloco por motor; botões grandes para o dedo */
.fv-filter-block { border: 1px solid #333; border-radius: 6px; padding: 6px; margin: 6px 0; }
.fv-filter-head { font-size: 0.72rem; font-weight: bold; color: #ddd; margin-bottom: 4px; }
.fv-filter-head.fv-alarm { color: #ff6b6b; }
.fv-filter-formula { font-family: monospace; font-size: 0.72rem; color: #9be29b; line-height: 1.5; margin-bottom: 6px; }
#modal-content .fv-btn { min-height: 44px; }
/* [TAG-UI-028] 0.10.18-beta (25/10/2026) - MD 04: régua de trim */
.mm-trim-water { stroke: #5ec8f2; stroke-width: 2; stroke-dasharray: 8 5; }
.mm-trim-hull-body { fill: #b9bec4; stroke: #20272d; stroke-width: 2; }
.mm-trim-hull-house { fill: #e7e3c4; stroke: #20272d; stroke-width: 1.5; }
.mm-trim-mark { stroke: #ffd84a; stroke-width: 2; }
.mm-trim-tick { stroke: #e7e3c4; stroke-width: 1.5; }
.mm-trim-needle { fill: #ffd84a; stroke: #20272d; stroke-width: 1; }
.mm-pump.mm-clickable { cursor: pointer; }
/* =====================================================================
   [TAG-OPS-028] 0.10.21-beta (25/10/2026 02:30) - Jossian Brito
   Vazão combinada com o caminhão (aba Recebimento e painel 3D)
   ===================================================================== */
.recv-flow-box { margin: 10px 0 12px; padding: 10px; border: 1px solid #24414a; border-radius: 8px; background: rgba(0, 188, 212, 0.05); }
.recv-flow-range { width: 100%; accent-color: var(--accent-blue); margin: 8px 0 4px; height: 28px; touch-action: pan-y; }
.recv-flow-info { font-size: 0.78rem; color: #9fc7d6; min-height: 1.2em; }
.recv-flow-box .tanks3d-open-btn { width: 100%; margin-top: 10px; }

/* =====================================================================
   [TAG-3D-028] 0.10.21-beta (25/10/2026 02:30) - Jossian Brito
   Painel TANQUES 3D em tela cheia. A cena (canvas) fica embaixo; cabeçalho,
   vistas, legenda, vazão e etiquetas flutuam por cima. Mobile-first: no
   celular a legenda some e o painel de vazão recolhe com um toque.
   ===================================================================== */
html.tanks3d-lock, html.tanks3d-lock body { overflow: hidden; }
.tanks3d-overlay { position: fixed; inset: 0; z-index: 3000; background: #050c12; color: #cfe8f5; }
.tanks3d-overlay[hidden] { display: none; }
.tanks3d-stage { position: absolute; inset: 0; }
.tanks3d-stage canvas { display: block; touch-action: none; }
.tanks3d-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(#0b1c28ee, #0b1c2800); pointer-events: none; }
.tanks3d-head > * { pointer-events: auto; }
.tanks3d-title { color: #7cdeff; font-weight: 700; letter-spacing: 0.06em; }
.tanks3d-sub { font-size: 0.72rem; color: #8fb3c6; }
.tanks3d-btn { border: 1px solid #2d5a72; background: #0b1c28cc; color: #cfe8f5; border-radius: 6px; padding: 7px 10px; font-size: 0.72rem; font-weight: 600; cursor: pointer; min-width: 44px; min-height: 32px; }
.tanks3d-btn.on { border-color: #7cdeff; color: #7cdeff; }
.tanks3d-close { margin-left: auto; }
.tanks3d-views { position: absolute; top: 50px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
.tanks3d-legend { position: absolute; left: 12px; bottom: 12px; background: #0b1c28cc; border: 1px solid #2d5a72; border-radius: 8px; padding: 8px 10px; font-size: 0.72rem; line-height: 1.7; pointer-events: none; }
.tanks3d-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tanks3d-flow { position: absolute; right: 12px; bottom: 12px; width: 300px; background: #0b1c28e6; border: 1px solid #2d5a72; border-radius: 10px; padding: 8px 12px 10px; font-size: 0.75rem; }
.tanks3d-flow-toggle { background: none; border: 0; color: #7cdeff; font-weight: 700; letter-spacing: 0.05em; font-size: 0.75rem; padding: 4px 0; cursor: pointer; width: 100%; text-align: left; }
.tanks3d-flow-toggle::after { content: ' ▾'; }
.tanks3d-flow.collapsed .tanks3d-flow-toggle::after { content: ' ▸'; }
.tanks3d-flow.collapsed .tanks3d-flow-body { display: none; }
.tanks3d-flow label { display: block; margin-top: 6px; color: #cfe8f5; }
.tanks3d-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tanks3d-tag { position: absolute; background: #0b1c28ee; border: 1px solid; border-radius: 6px; padding: 4px 7px; font-size: 0.7rem; line-height: 1.35; white-space: nowrap; transform: translate(-50%, -100%); }
.tanks3d-tag b { display: block; }
.tanks3d-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 0.7rem; color: #8fb3c6; background: #0b1c28aa; padding: 4px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap; }
.tanks3d-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; text-align: center; background: #0b1c28; border: 1px solid #ffb74d; color: #ffd36e; border-radius: 8px; padding: 14px; }
@media (max-width: 1100px) { .tanks3d-hint { display: none; } }
@media (max-width: 900px) {
    .tanks3d-sub, .tanks3d-legend { display: none; }
    .tanks3d-flow { width: 230px; right: 8px; bottom: 8px; padding: 6px 10px 8px; }
    .tanks3d-views { top: 46px; left: 8px; }
    .tanks3d-btn { padding: 6px 8px; font-size: 0.68rem; }
}
@media (max-width: 900px) and (orientation: portrait) {
    .tanks3d-views { flex-direction: row; }
    .tanks3d-flow { left: 8px; width: auto; }
}
/* =====================================================================
   [TAG-UI-036] 0.10.23-beta (25/10/2026 02:00) - Jossian Brito
   Selo e seletor do nível de qualidade visual (TugQuality) e aviso único
   do Visual 3D. Aparece na splash (abaixo de INICIAR/MANUAL) e no topo do
   painel Visual 3D. A cor da borda indica o nível, como as luzes de um
   quadro: âmbar = Leve, ciano = Intermediário, verde = Total.
   ===================================================================== */
.tug-quality { margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 193, 7, 0.45); background: rgba(0, 0, 0, 0.22); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.72rem; line-height: 1.35; }
html.q-med .tug-quality { border-color: rgba(0, 188, 212, 0.5); }
html.q-high .tug-quality { border-color: rgba(129, 199, 132, 0.6); }
.tug-quality__notice { flex: 1 1 220px; margin: 0; color: var(--cv-text, #eef8ef); }
.tug-quality__pick { display: inline-flex; align-items: center; gap: 6px; color: var(--cv-text-muted, #a8c8ae); white-space: nowrap; }
.tug-quality__pick select { min-height: 32px; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(182, 255, 156, 0.4); background: #0b1f12; color: #eef8ef; font-size: 0.74rem; }
.tug-quality--inline { margin: 0 0 10px; }
/* Celular deitado (altura curta): a splash já vai no limite, fica só o seletor */
@media (orientation: landscape) and (max-height: 480px) {
    .tug-splash .tug-quality { margin-top: 6px; padding: 4px 8px; }
    .tug-splash .tug-quality__notice { display: none; }
}
.tug-quality-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 5000; width: min(92vw, 460px); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #0b1f12; border: 1px solid rgba(255, 193, 7, 0.55); color: #eef8ef; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.tug-quality-toast button { flex: 0 0 auto; min-width: 44px; min-height: 36px; border-radius: 6px; border: 1px solid rgba(182, 255, 156, 0.5); background: rgba(182, 255, 156, 0.12); color: #b6ff9c; font-weight: bold; cursor: pointer; }
/* No celular o painel 3D mostra só o seletor: o aviso completo já vai no toast único */
@media (max-width: 760px) { .tug-quality--inline .tug-quality__notice { display: none; } .tug-quality--inline { padding: 6px 8px; } }
/* =============================================================================
   [TAG-UI-036] 0.10.27-beta (25/10/2026 05:30 GMT-3) - Jossian Brito
   Painel local FIFI (3 botões lidos de baixo para cima) e controle dos canhões.
   Lâmpadas: off (cinza, bloqueado), ready (âmbar, pode apertar), busy (azul
   piscando, em curso), on (verde, concluído) - mesma linguagem do console real.
   ============================================================================= */
.fifi-local-panel, .fifi-monitor-ctrl { display:flex; flex-direction:column; gap:6px; margin:8px 0 12px; padding:10px; border-radius:10px; background:#0d1a14; border:1px solid rgba(255,255,255,0.08); }
.fifi-panel-title { font-size:0.78rem; font-weight:700; letter-spacing:0.06em; color:#cfe6d6; }
.fifi-panel-title small { font-weight:400; color:#8aa; letter-spacing:0; }
.fifi-seq-btn { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; min-height:48px; padding:8px 10px; border-radius:8px; border:1px solid #2c3d35; background:#16241d; color:#e8f5ec; text-align:left; cursor:pointer; font:inherit; }
.fifi-seq-num { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#24382e; font-weight:800; }
.fifi-seq-label { font-size:0.82rem; font-weight:700; }
.fifi-seq-state { display:flex; align-items:center; gap:6px; font-size:0.72rem; color:#b9cbc0; white-space:nowrap; }
.fifi-lamp { width:11px; height:11px; border-radius:50%; background:#555; box-shadow:inset 0 0 2px #000; }
.fifi-lamp-ready .fifi-lamp { background:#ffb74d; box-shadow:0 0 6px #ffb74d; }
.fifi-lamp-ready { border-color:#7a5a20; }
.fifi-lamp-busy .fifi-lamp { background:#4fc3f7; box-shadow:0 0 6px #4fc3f7; animation:fifiBlink 1s steps(2) infinite; }
.fifi-lamp-on .fifi-lamp { background:#66bb6a; box-shadow:0 0 6px #66bb6a; }
.fifi-lamp-on { border-color:#2e6b3a; background:#173022; }
.fifi-lamp-off { opacity:0.6; }
@keyframes fifiBlink { 50% { opacity:0.25; } }
.fifi-warm { margin-top:4px; font-size:0.74rem; color:#b9cbc0; }
.fifi-warm-row { display:flex; justify-content:space-between; gap:8px; }
.fifi-warm-row b { color:#fff; }
.fifi-warm-bar { height:6px; margin:4px 0; border-radius:3px; background:#24382e; overflow:hidden; }
.fifi-warm-bar i { display:block; height:100%; }
.fifi-status-line { font-size:0.78rem; font-weight:700; color:#7cdeff; }
.fifi-estop { padding:9px; background:#7f1d1d !important; color:#fff; }
.fifi-sel-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.fifi-sel-btn { padding:8px 4px; border-radius:6px; border:1px solid #2c3d35; background:#16241d; color:#cfe6d6; font-size:0.72rem; font-weight:700; cursor:pointer; }
.fifi-sel-btn.active { background:#1f5130; border-color:#66bb6a; color:#fff; }
.fifi-pad { display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,48px); gap:6px; justify-content:center; margin:4px 0; }
.fifi-pad-btn { border-radius:8px; border:1px solid #3a6ea5; background:#1d3a5c; color:#fff; font-size:1.2rem; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; }
.fifi-pad-btn:active { background:#2f6aa8; }
.fifi-pad-locked .fifi-pad-btn { opacity:0.4; }
.fifi-pad-center { display:flex; align-items:center; justify-content:center; font-size:0.68rem; color:#8aa; }
.fifi-aim-table { width:100%; border-collapse:collapse; font-size:0.76rem; color:#e8f5ec; }
.fifi-aim-table th, .fifi-aim-table td { padding:3px 4px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.06); }
.fifi-aim-table th { color:#8aa; font-weight:600; }
.fifi-jet-read { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:0.74rem; color:#b9cbc0; }
.fifi-hint { font-size:0.68rem; color:#8aa; }
.fifi-3d-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; }
/* =============================================================================
   [TAG-3D-035] 0.10.28-beta (25/10/2026 - Jossian Brito): barra de pontos de
   vista sobre a cena 3D. Fica dentro do #three-d-stage (position:relative).
   ============================================================================= */
.three-d-stage { position:relative; }
.three-d-cam-bar { position:absolute; top:8px; left:8px; right:8px; display:flex; flex-wrap:wrap; gap:6px; z-index:3; pointer-events:none; }
.three-d-cam-btn { pointer-events:auto; padding:6px 10px; min-height:32px; border-radius:8px; border:1px solid rgba(124,222,255,0.35); background:rgba(6,16,23,0.72); color:#cfeff8; font-size:0.7rem; font-weight:bold; letter-spacing:0.5px; cursor:pointer; backdrop-filter:blur(2px); }
.three-d-cam-btn.active { background:rgba(255,183,77,0.22); border-color:#ffb74d; color:#ffe2a8; }
@media (max-width: 600px) { .three-d-cam-btn { padding:5px 7px; font-size:0.62rem; min-height:30px; } }

/* =============================================================================
   [TAG-UI-035] 0.10.28-beta: painel do guincho de manobra (aba Guincho)
   Grade auto-ajustável: 4–5 colunas no desktop, 2 no celular deitado, 1 em pé.
   ============================================================================= */
.winch-panel { margin-top:12px; border:2px solid #2a4553; border-radius:12px; background:linear-gradient(#0d1d26, #09141b); padding:10px; color:#cfe3ea; }
.winch-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:baseline; margin-bottom:8px; }
.winch-title { color:#ffb74d; font-weight:bold; letter-spacing:1.5px; font-size:0.85rem; }
.winch-msg { color:#7fdcff; font-size:0.72rem; font-family:'Courier New', monospace; min-height:1em; }
.winch-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px; }
.winch-box { border:1px solid #23404d; border-radius:9px; background:#0a171f; padding:8px; min-width:0; }
.winch-lbl { font-size:0.62rem; letter-spacing:0.8px; color:#8aa3af; text-align:center; margin-top:3px; text-transform:uppercase; }
.winch-lbl-gap { margin:8px 0 4px; }
.winch-gauges { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.wg-svg { width:100%; max-width:120px; display:block; margin:0 auto; }
.wg-face { fill:#07121a; stroke:#2c4a58; stroke-width:2; }
.wg-tick { stroke:#78c6a0; stroke-width:1; }
.wg-num { fill:#7e99a8; font-size:7px; text-anchor:middle; font-family:'Courier New', monospace; }
.wg-red { stroke:#e53935; stroke-width:4; fill:none; }
.wg-amber { stroke:#ffb74d; stroke-width:4; fill:none; }
.wg-needle line { stroke:#ffb74d; stroke-width:3; stroke-linecap:round; }
.wg-needle { transition:transform 0.12s linear; }
.wg-hub { fill:#ffb74d; }
.wg-val { fill:#7fdcff; font-size:13px; text-anchor:middle; font-family:'Courier New', monospace; font-weight:bold; }
.winch-selector { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; }
.winch-selector button { padding:7px 2px; min-height:40px; border:1px solid #3b5866; border-radius:7px; background:#0d1b23; color:#62808d; font-size:0.62rem; font-weight:bold; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.winch-selector button small { font-size:0.55rem; font-weight:normal; }
.winch-selector button.on { border-color:#ffb74d; color:#ffb74d; background:#2a1f08; }
.winch-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.winch-btn { border-radius:8px; border:2px solid #3b5866; background:#13252f; color:#cfe3ea; font-weight:bold; font-size:0.72rem; padding:8px 4px; min-height:52px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.winch-btn small { font-size:0.56rem; font-weight:normal; opacity:0.9; }
.winch-btn.on { background:#1f5c35; border-color:#4caf50; color:#d8ffe0; box-shadow:0 0 8px rgba(76,175,80,0.5); }
.winch-btn.amb { background:#5a4210; border-color:#ffb74d; color:#ffe2a8; }
.winch-led { width:9px; height:9px; border-radius:50%; background:#34454c; display:inline-block; }
.winch-btn.on .winch-led { background:#7cff8a; box-shadow:0 0 6px #7cff8a; }
.winch-qr { display:flex; align-items:center; justify-content:center; width:84px; height:84px; margin:12px auto 0; border-radius:50%; background:radial-gradient(#7f1010, #4a0808); border:3px solid #ffcc00; color:#ffdede; font-weight:bold; font-size:0.66rem; cursor:pointer; position:relative; }
.winch-qr::after { content:''; position:absolute; inset:-9px; border-radius:50%; border:3px dashed rgba(255,204,0,0.75); background:rgba(255,204,0,0.12); transition:transform 0.25s; }
.winch-qr.cover-open { background:radial-gradient(#ff4a3d, #a01010); color:#fff; box-shadow:0 0 14px rgba(255,74,61,0.7); }
.winch-qr.cover-open::after { transform:translateY(-58px) scaleY(0.25); }
.winch-qr.active { background:radial-gradient(#ff4a3d, #a01010); animation:winch-blink 0.6s infinite alternate; }
.winch-qr.active::after { transform:translateY(-58px) scaleY(0.25); }
@keyframes winch-blink { from { box-shadow:0 0 4px #ff4a3d; } to { box-shadow:0 0 22px #ff4a3d; } }
.winch-joy-box { display:flex; flex-direction:column; align-items:center; }
.winch-joy { position:relative; width:64px; height:190px; margin:6px 0; border-radius:32px; background:#0b1b24; border:2px solid #2c4a58; touch-action:none; cursor:grab; }
.winch-joy:focus { outline:2px solid #7fdcff; outline-offset:2px; }
.winch-joy.locked { opacity:0.45; cursor:not-allowed; }
.winch-joy-center { position:absolute; left:6px; right:6px; top:50%; border-top:1px dashed #4d6b78; }
.winch-joy-knob { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:radial-gradient(#3a4e58, #16232a); border:3px solid #ffb74d; display:flex; align-items:center; justify-content:center; color:#ffb74d; font-size:0.66rem; font-weight:bold; transition:transform 0.08s linear; }
.winch-joy-lock { color:#ffb74d; }
.winch-tension { text-align:center; font-family:'Courier New', monospace; font-size:1.7rem; font-weight:bold; color:#7cff8a; }
.winch-tension small { font-size:0.75rem; color:#8aa3af; }
.winch-sensor[data-level="amber"] .winch-tension { color:#ffb74d; }
.winch-sensor[data-level="red"] .winch-tension, .winch-sensor[data-level="broken"] .winch-tension { color:#ff4a3d; }
.winch-sensor[data-level="blink"] .winch-tension { color:#ff4a3d; animation:winch-blink-text 0.4s infinite alternate; }
.winch-sensor[data-level="slack"] .winch-tension { color:#7fdcff; }
@keyframes winch-blink-text { from { opacity:1; } to { opacity:0.35; } }
.winch-baro { width:100%; height:70px; background:#06111a; border:1px solid #1f3a46; border-radius:6px; margin-top:4px; }
.baro-line { fill:none; stroke:#7cff8a; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.baro-mark { stroke:#ff4a3d; stroke-dasharray:3 3; stroke-width:1; vector-effect:non-scaling-stroke; }
.baro-mark-20 { stroke:#ffb74d; }
.winch-ro { display:grid; grid-template-columns:1fr auto; gap:3px 8px; font-size:0.66rem; margin-top:8px; }
.winch-ro b { color:#7fdcff; font-family:'Courier New', monospace; font-size:0.72rem; text-align:right; }
.winch-instr-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0; }
.winch-btn-sm { padding:8px 4px; min-height:40px; border-radius:7px; border:1px solid #3b5866; background:#13252f; color:#cfe3ea; font-size:0.62rem; font-weight:bold; cursor:pointer; }
.winch-btn-sm.on { border-color:#ffb74d; color:#ffe2a8; background:#2a1f08; }
/* Tela cheia com o guincho aberto em tela larga: cena à esquerda, painel à direita */
@media (min-width: 1100px) {
    .three-d-panel:fullscreen.three-d-config-open:has(.drawer-tab-panel[data-tab="winch"]:not([style*="none"])) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(380px, 36%); grid-auto-rows:min-content; gap:0 12px; align-items:start; }
    .three-d-panel:fullscreen.three-d-config-open:has(.drawer-tab-panel[data-tab="winch"]:not([style*="none"])) > .three-d-stage { grid-column:1; grid-row:1 / span 6; height:calc(100vh - 24px); min-height:0; }
    .three-d-panel:fullscreen.three-d-config-open:has(.drawer-tab-panel[data-tab="winch"]:not([style*="none"])) > .drawer-tab-panel { grid-column:2; max-height:calc(100vh - 24px); overflow:auto; }
    .three-d-panel:fullscreen .winch-grid { grid-template-columns:1fr 1fr; }
}