/* ElectroLab · taller nocturno. El tema de pantalla no altera la impresión. */
@media screen {
  :root {
    color-scheme: dark;
    --ink: #e5edf6;
    --ink-2: #cbd8e6;
    --paper: #0b111b;
    --panel: #121c29;
    --line: #2a3a4d;
    --muted: #9baec3;
    --cyan: #6de1f5;
    --cyan-dark: #78ddef;
    --yellow: #a7edb1;
    --orange: #edbd78;
    --red: #ff8d95;
    --green: #8be4ad;
    --shadow: 0 16px 40px #03081266;
    scrollbar-color: #42566c #101923;
  }

  body { background: var(--paper); }
  ::selection { color: #f4fbff; background: #2c657d; }
  button:focus-visible, a:focus-visible { outline-color: var(--cyan); }
  input, select { background: #0c1521; border-color: #35485d; color: var(--ink); }
  input::placeholder { color: #8195aa; }
  input:focus, select:focus { outline-color: #6de1f538; border-color: var(--cyan); }
  input[type=checkbox], input[type=range] { accent-color: var(--cyan); }
  .btn, .btn.ghost, .icon-btn, .row-btn { color: #d2dfed; background: #1d2c3e; border-color: #3a4e66; }
  .btn:hover, .icon-btn:hover, .row-btn:hover { border-color: #6596b1; background: #253a50; }
  .btn.primary { color: #09202c; background: #87e2f3; border-color: #a5ecf7; box-shadow: 0 3px 0 #2c637a; }
  .btn.primary:hover { background: #a5effa; }
  .danger-text, .icon-btn.danger, .row-btn.delete { color: #ffa1a8; }

  /* Navegación e inventario */
  .topbar { background: #0d1521; border-bottom: 1px solid #29394d; box-shadow: 0 3px 20px #0003; }
  .brand-mark { color: #071b27; background: #80dff0; box-shadow: 0 3px 0 #32687d, 0 0 22px #6de1f519; }
  .brand strong { color: #f0f5fb; }
  .brand small { color: #8eabc2; }
  .tab { color: #a2b2c7; }
  .tab:hover, .tab.active { color: #95eafa; }
  .tab::after { background: #7de2f2; box-shadow: 0 0 12px #6de1f558; }
  .top-actions { background: #142132; border-color: #3d526b; box-shadow: 0 18px 40px #0008; }
  .topbar .btn.ghost { background: #1e2e43; color: #d8e6f4; border-color: #3a5069; }
  .project-menu-btn { background: #192538; border-color: #3d4f65; }
  .palette-panel, .inspector-panel { background: #101a28; color: var(--ink); border-color: #293a4e; }
  .palette-panel .eyebrow, .inspector-panel .eyebrow { color: #81cddf; }
  .palette-panel h2 { color: #e4eef8; }
  .palette-panel .panel-heading p { color: #95a8bd; }
  .component-card {
    background: radial-gradient(ellipse at 50% 30%, #314258, #1c2a3b 74%);
    border: 1px solid #40516a;
    box-shadow: inset 0 1px #91b4d019, 0 4px 0 #080f19;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .component-card:hover { border-color: #7bdaec; background: #293f56; box-shadow: 0 4px 0 #080f19, 0 0 16px #52c8ed24; }
  .component-card .component-art { width: 100%; height: auto; max-width: 82px; aspect-ratio: 1; }
  .palette-add { background: #1c4153; border-color: #5896aa; color: #a5ebf7; }
  .palette-tip { background: #162b3a; border-color: #345063; color: #aec7d7; }
  .palette-tip strong { color: #b6e3eb; }

  /* El atlas tiene alfa real: no se mezcla el blanco de las carcasas con el fondo. */
  .component-art { mix-blend-mode: normal; filter: drop-shadow(0 5px 4px #03081066); }
  .node .component-art { clip-path: none; }
  .supply-symbol { color: #76c7e1; text-shadow: 0 0 22px #57b8f133; }
  .supply-symbol span { color: #9fbdcf; }
  .node.energized .supply-symbol { color: #a3eeff; text-shadow: 0 0 28px #52cbed88; }

  /* Consola de juego */
  .workspace-panel {
    color: #e5edf6;
    background: radial-gradient(ellipse at 80% 0, #18273b66, transparent 47%), #0c1420;
  }
  .play-heading h1 { color: #f0f5fc; }
  .play-heading .eyebrow { color: #8bbbd2; }
  .play-modes { background: #080f19; border-color: #33465f; box-shadow: inset 0 2px 5px #0004; }
  .play-modes button { color: #a7b7cd; }
  .play-modes button[aria-pressed=true] { color: #0b2632; background: #85dff0; box-shadow: 0 3px 0 #39748b; }
  .project-title { background: transparent; color: #dce8f5; border-color: transparent; }
  .project-title:focus { background: #1b2c40; border-color: #79d5e9; }
  .save-state { color: #8fa6bd; }
  .tool-btn { background: #1a293c; color: #c7d7e8; border-color: #3b4e65; }
  .tool-btn:hover, .tool-btn[aria-pressed=true] { color: #b6f2fc; background: #244157; border-color: #6abdd3; }
  .tool-btn.danger-text { color: #f7a0a8; }
  .game-console {
    background: linear-gradient(115deg, #1b2c42, #152033 80%);
    border-color: #3b5270;
    box-shadow: 0 6px 0 #070d17, 0 12px 32px #0002, inset 0 1px #afc8f11a;
  }
  .console-state small { color: #9fbbd3; }
  .console-state strong { color: #ebf4ff; }
  .game-lamp { background: #0b1420; border-color: #40566a; }
  .game-lamp.on { background: #98f6bd; border-color: #437a67; box-shadow: 0 0 16px #80ffc174; }
  .live-metric strong { color: #e0f5ff; }
  .live-metric small { color: #a3b9cf; }
  .console-top .energize { color: #092b28; background: #a7edb1; border-color: #bef5c6; box-shadow: 0 4px 0 #456b54, 0 0 22px #90edb018; }
  .console-top .energize[aria-pressed=true] { color: #f1c8b1; background: #3c2e31; border-color: #987466; box-shadow: 0 4px 0 #241a1e; }
  .console-top .energize:active { box-shadow: 0 1px 0 #314a40; }
  .scenario-panel, .console-bottom { border-color: #40556f70; }
  .scenario-panel summary, .console-bottom label { color: #b4c8dd; }
  .scenario-panel summary span { color: #a5dcec; background: #233d53; }
  .console-bottom select { background: #101c2d; color: #d9e8f5; border-color: #415b75; }
  .console-bottom .rearm-btn { color: #d6d3fa; background: #34334e; border-color: #6b658a; }
  .board-caption .eyebrow { color: #adc4db; }
  .board-caption>span:last-child, .mode-help { color: #9ab0c8; }

  /* Chapa grafito, cantos biselados y rieles metálicos */
  .board {
    color: #d9e6f3;
    border-color: #2e3e51;
    background: radial-gradient(ellipse at 30% 0, #35435544, transparent 60%), repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px), #1b2735;
    box-shadow: inset 0 0 0 1px #586b8170, inset 0 8px 24px #04091466, 0 7px 0 #060c15, 0 20px 40px #0004;
  }
  .board.powered {
    box-shadow: inset 0 0 0 1px #73c2d074, inset 0 8px 24px #04091466, 0 7px 0 #060c15, 0 0 24px #4cbede16;
    border-color: #334e60;
  }
  .board::before, .board::after { background: linear-gradient(135deg, #6b7c8c 42%, #182431 45% 56%, #526172 59%); border-color: #0c1724; box-shadow: 0 1px 0 #7b91a64a; }
  .rail-caption { color: #a0b3c8; }
  .din-rail {
    background: linear-gradient(#647284 0 2px, #8b98a8 3px 6px, #334151 7px 9px, #536273 10px 20px, #293747 21px 23px, #748395 24px 27px, #3b4a5d 28px);
    box-shadow: 0 3px 5px #0007;
  }
  .load-zone { background: radial-gradient(ellipse at 50% 0, #253c502b, transparent 70%), #121e2b; border-color: #44607a; }
  .node:hover { background: #31465c72; border-color: #557794; box-shadow: 0 4px 14px #03091124; }
  .node.selected { background: #294359aa; border-color: #89dfef; box-shadow: 0 0 0 3px #6bdcef15; }
  .node.connect-source { border-color: #edc184; background: #3e3a3266; box-shadow: 0 0 0 3px #ecc17b22; }
  .node.dragging { background: #263c52; box-shadow: 0 12px 30px #0007; }
  .node .device-action { color: #e0eaf6; }
  .node .node-tag { color: #b2c6db; }
  .node .node-rating { color: #e2ebf6; }
  .node .node-details { color: #adc4dc; }
  .node .node-details:hover, .node .node-details:focus-visible { color: #d5f4ff; background: #365169; }
  .node .device-status { color: #a5b7ca; }
  .node.switch-closed .device-status { color: #a5baca; }
  .node.switch-open .device-status { color: #aebdcd; background: #2a3748; }
  .node.energized .device-status { color: #a7f0c3; background: #1e3f3d; }
  .node.tripped { background: #552d3680; border-color: #d48087; box-shadow: 0 0 0 2px #e89f9f18; }
  .node.tripped .device-status { color: #ffe0e2; background: #853e4a; }
  .node .node-state, .node.switch-open .node-state { background: #76879a; }
  .node.energized .node-state { background: #9befbc; box-shadow: 0 0 0 3px #9befbc19, 0 0 8px #9befbc7a; }
  .node.tripped .node-state { background: #ff939d; }
  .node .node-port { background: #172a3d; border-color: #879fb5; }
  .board.connecting .node-port { background: #98eafa; border-color: #387e9b; }
  .node.energized.is-light .component-art { filter: sepia(.22) saturate(1.35) brightness(1.16) drop-shadow(0 0 15px #f2c451aa); }
  .node.type-load:not(.is-light).energized .component-art { filter: drop-shadow(0 0 8px #79d8b480); }
  .node.type-pump.load-running .component-art { filter: drop-shadow(0 0 10px #52c6ca90); }
  .wire { stroke: #73899c; }
  .wire.energized { stroke: #70daec; filter: drop-shadow(0 0 3px #65d9ef60); }
  .wire.fault { stroke: #ff939d; filter: drop-shadow(0 0 3px #ff838c66); }
  .wire.selectable { stroke: #e7bb80; }
  .drop-hint, .drop-hint strong { color: #adbed0; }
  .drop-hint span { border-color: #71879d; }
  .simulation-bar { background: #142435; border-color: #344d66; color: #dcebf6; }
  .simulation-status strong { color: #e0edf6; }
  .simulation-status small { color: #b5c6d9; }
  .simulation-model-note { color: #93acc2; }
  .status-lamp { background: #70859c; box-shadow: 0 0 0 4px #273c51; }
  .status-lamp.on { background: #9aeabd; box-shadow: 0 0 0 4px #244239, 0 0 12px #80eeb766; }
  .status-lamp.fault { background: #f98d9b; box-shadow: 0 0 0 4px #492b3a, 0 0 12px #f78f9e55; }
  .play-journal { border-color: #2b4158; color: #aebfd3; }
  .play-journal .eyebrow { color: #c3b8eb; }
  .play-journal li::before { color: #98d5e6; }
  .play-journal .event-trip { color: #ffb4b9; }

  /* Propiedades, tablas, presupuesto y ventanas */
  .inspector-panel { box-shadow: inset 1px 0 #46618022; }
  .inspector-empty span { background: #22384d; color: #90d8ec; }
  .inspector-empty h2 { color: #e2eaf4; }
  .inspector-close { background: #294258; color: #cceff8; border-color: #64839e; }
  .form-grid label, .budget-summary label, .dialog-grid label, .logic-fields label, .pump-config-grid label { color: #b1c4d8; }
  .field-help { color: #8fa7bf; }
  .quick-issues p { color: #b4c9dd; background: #1d2c3d; }
  .quick-issues p.ok, .status-tag.ok { color: #a2e6bc; background: #1c3a32; }
  .quick-issues p.warn, .status-tag.warn { color: #ecc68b; background: #3b3327; }
  .quick-issues p.error, .status-tag.error { color: #f2a5b1; background: #442c37; }
  .card { background: #131f2e; border-color: #304258; box-shadow: 0 8px 22px #0002; }
  .metric { background: linear-gradient(140deg, #1d2c42, #131e2e); }
  .metric::after { opacity: .09; }
  .metric small, th { color: #a2b7cc; }
  td { border-color: #293b50; }
  td small { color: #a2b5ca; }
  tbody tr:hover { background: #263b503d; }
  .score-pill { background: #234457; }
  .validation-item { background: #172638; }
  .grand-total { background: #0b1b27; border: 1px solid #486379; }
  .grand-total strong { color: #9fedc0; }
  .source-list a { background: #162638; }
  .source-list a:hover { background: #213b4f; }
  .legal-note { background: #312c25; border-color: #71603e; }
  .legal-note strong { color: #efcc8f; }
  .legal-note p { color: #ccbc9f; }
  dialog { background: #142132; color: #e8f1fa; border: 1px solid #4a6684; box-shadow: 0 30px 90px #0009; }
  dialog::backdrop { background: #030815bd; }
  .toast { background: #20384e; border: 1px solid #6a91aa; color: #e5f5ff; }

  /* Cisterna, tanque y mando */
  .water-mode-badge { background: #234254; }
  .water-scene { background: linear-gradient(#132233 0 62%, #30465a 62% 63%, #1c2c3c 63%); border-color: #38516b; }
  .tank-shell { background: #122332; border-color: #7691a6; box-shadow: inset 0 0 15px #0003, 0 8px 16px #0004; }
  .water-fill { background: linear-gradient(#57c8df, #237c9e); }
  .level-line { color: #d4f2f7; text-shadow: 0 1px 2px #102338; }
  .water-pipe { border-color: #6c869d; }
  .pump-unit { background: #314b63; }
  .pump-unit.running { color: #e6fcff; background: #246076; box-shadow: 0 0 0 4px #78d9ef20, 0 8px 18px #0004; }
  .pump-unit.alarm { background: #913e50; }
  .control-panel-card { background: linear-gradient(135deg, #233447, #142132); border-color: #3b5168; box-shadow: inset 0 0 0 1px #7191af33, 0 8px 20px #0004; }
  .panel-plate-title, .pilot-grid { border-color: #4a6279; }
  .panel-plate-title small, .pilot-grid small, .runtime { color: #aebfd2; }
  .mode-btn { background: #182a3c; color: #b8cee2; border-color: #526e88; }
  .mode-btn.active { color: #0b2733; background: #89dceb; border-color: #b0f4fc; box-shadow: 0 0 0 3px #80d9ef16; }
  .push-btn span { border-color: #71849a; }
  .push-btn.start span { background: radial-gradient(circle at 37% 26%, #90f0b4, #279060 72%); }
  .push-btn.stop span { background: radial-gradient(circle at 37% 26%, #ff9fa7, #b62f4b 72%); }
  .logic-status div, .pump-metrics div { background: #1c3043; color: #bad0e2; }
  .fault-switches label { background: #172536; }
  .material-chip { color: #b0d4e8; background: #20384a; border-color: #415f77; }
}

@media screen and (max-width: 1100px) {
  .inspector-panel { border-color: #55728f; box-shadow: 0 15px 70px #000a; }
}
@media screen and (max-width: 760px) {
  .topbar .tabs { background: #0e1928; border-color: #3e566f; box-shadow: 0 -6px 22px #0003; }
  .tab.active { color: #93e2f2; }
  .tab::after { background: #81ddef; }
  .palette-panel { background: #111f30; border-color: #334961; }
  .inspector-panel { background: #152437; }
}