/* Shinkaku Systems — Simulador PLC · tema sala de control */
:root {
  color-scheme: dark;
  --bg: #07111e;
  --panel: #0d1b2d;
  --panel-2: #10233a;
  --line: #1d3452;
  --ink: #e6eef8;
  --mute: #8ea4bf;
  --blue: #2f8cff;
  --brand: #016dc0;
  --green: #2fe07a;
  --amber: #f2b544;
  --red: #ff4d4f;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --sans: "Segoe UI", "Hiragino Sans", Meiryo, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(1, 109, 192, 0.22), transparent 60%), var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nojs { padding: 20px; text-align: center; }

/* ---------------- encabezado */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 10px max(16px, 2vw);
  background: rgba(7, 17, 30, 0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 40px; height: auto; }
.brand b { display: block; letter-spacing: 0.16em; font-size: 15px; line-height: 1.1; }
.brand small { display: block; color: #6fb2ff; font-size: 9.5px; letter-spacing: 0.18em; }
.ttl { padding-left: 22px; border-left: 1px solid var(--line); }
.ttl h1 { margin: 0; font-size: 17px; line-height: 1.2; }
.ttl p { margin: 0; color: var(--mute); font-size: 12px; }
.topnav { margin-left: auto; display: flex; gap: 6px; }
.topnav a { padding: 8px 12px; border-radius: 6px; color: var(--mute); font-weight: 600; font-size: 13px; }
.topnav a:hover { color: var(--ink); background: var(--panel-2); }
.topnav a.back { color: var(--ink); border: 1px solid var(--line); }

.rotate { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .rotate:not([hidden]) { display: flex; gap: 10px; align-items: center; margin: 10px 16px 0; padding: 10px 12px; border-radius: 8px; background: #1a2a42; border: 1px solid #2d4a70; font-size: 12.5px; }
  .rotate button { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; }
}

.wrap { padding: 14px max(16px, 2vw) 20px; display: grid; gap: 14px; }

/* ---------------- pestañas de proceso */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tabs button {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); transition: 0.2s;
}
.tabs button span { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--panel-2); color: var(--blue); font: 700 14px var(--mono); }
.tabs button b { font-size: 15px; }
.tabs button small { color: var(--mute); font-size: 12px; }
.tabs button:hover { border-color: #2f5c90; }
.tabs button.on { background: linear-gradient(135deg, #0b3a6e, #0d2744); border-color: var(--blue); box-shadow: 0 10px 30px rgba(47, 140, 255, 0.18); }
.tabs button.on span { background: var(--blue); color: #fff; }

/* ---------------- barra de alarma + guía */
.bar { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.alarm { display: flex; gap: 12px; align-items: center; min-height: 46px; padding: 10px 16px; border-radius: 10px; border: 1px solid; font-size: 13.5px; }
.alarm b { font: 700 12px var(--mono); letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.alarm em { margin-left: auto; font-style: normal; font: 12px var(--mono); color: var(--mute); }
.alarm.ok { background: rgba(47, 224, 122, 0.06); border-color: rgba(47, 224, 122, 0.3); }
.alarm.ok b { background: rgba(47, 224, 122, 0.15); color: var(--green); }
.alarm.info { background: rgba(47, 140, 255, 0.08); border-color: rgba(47, 140, 255, 0.35); }
.alarm.info b { background: rgba(47, 140, 255, 0.2); color: #8cc2ff; }
.alarm.warn { background: rgba(242, 181, 68, 0.08); border-color: rgba(242, 181, 68, 0.45); }
.alarm.warn b { background: var(--amber); color: #1a1204; }
.alarm.bad { background: rgba(255, 77, 79, 0.1); border-color: rgba(255, 77, 79, 0.55); animation: alarmPulse 1.2s ease-in-out infinite; }
.alarm.bad b { background: var(--red); color: #fff; }
@keyframes alarmPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.12); } }
.guide { position: relative; }
.guide summary { list-style: none; cursor: pointer; padding: 12px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; white-space: nowrap; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--blue); font: 700 12px var(--mono); }
.guide[open] summary { border-color: var(--blue); }
.guide ol { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: min(460px, 86vw); margin: 0; padding: 16px 18px 16px 36px; border-radius: 10px; background: #0f2037; border: 1px solid #2d4a70; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: grid; gap: 8px; }
.guide li { color: #cfdcec; }
.guide li b { color: #fff; }

/* ---------------- escenario */
.stage { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1320px) { .stage { grid-template-columns: 260px minmax(0, 1fr); } .stage .hmi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .stage .hmi > header { grid-column: 1 / -1; } }
@media (max-width: 860px) { .stage { grid-template-columns: 1fr; } .tabs { grid-template-columns: 1fr; } .bar { grid-template-columns: 1fr; } .guide ol { left: 0; right: auto; } .ttl, .topnav a:not(.back) { display: none; } }

.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.card > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.card > header h3 { margin: 0; font-size: 15px; width: 100%; }
.card > header .ey { width: 100%; }
.mimic > header h3 { width: auto; }
.mimic > header .chip { margin-left: auto; }
.ey { margin: 0 0 6px; color: #6fb2ff; font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); font: 700 11px var(--mono); letter-spacing: 0.06em; }
.chip.ok { color: var(--green); border-color: rgba(47, 224, 122, 0.4); background: rgba(47, 224, 122, 0.08); }
.chip.warn { color: var(--amber); border-color: rgba(242, 181, 68, 0.5); background: rgba(242, 181, 68, 0.08); }
.chip.bad { color: #fff; border-color: var(--red); background: rgba(255, 77, 79, 0.25); }

/* ---------------- tablero físico */
.panel { background: linear-gradient(180deg, #c9d3de, #aeb9c6); color: #102033; border-color: #7f8ea0; box-shadow: inset 0 1px 0 #eef3f8; }
.panel .ey { color: #0b4f96; }
.panel > header h3 { color: #0b1d33; }
.pbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; padding: 12px 6px; border-radius: 8px; background: repeating-linear-gradient(45deg, #b7c2cf 0 6px, #b2bdca 6px 12px); border: 1px solid #8d9cae; }
.pb { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pb b { font-size: 12px; line-height: 1.1; }
.pb small { font: 9.5px var(--mono); color: #34485f; }
.pb small span.act { color: #0b4f96; font-weight: 700; }
.pbtn { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 50% 40%, #e2e8ef, #7f8ea0 70%); box-shadow: 0 3px 0 #5b6a7c, 0 6px 12px rgba(0, 0, 0, 0.25); touch-action: none; }
.pbtn i { position: absolute; inset: 8px; border-radius: 50%; transition: transform 0.06s; }
.pbtn.green i { background: radial-gradient(circle at 40% 35%, #7cf2a8, #16a34a 60%, #0d6b31); box-shadow: 0 3px 0 #0b5a28; }
.pbtn.red i { background: radial-gradient(circle at 40% 35%, #ff9a9a, #dc2626 60%, #8e1515); box-shadow: 0 3px 0 #7a1010; }
.pbtn.blue i { background: radial-gradient(circle at 40% 35%, #9cc9ff, #1d6fd6 60%, #0f418a); box-shadow: 0 3px 0 #0d3775; }
.pbtn.down i { transform: translateY(3px); box-shadow: 0 0 0; filter: brightness(1.15); }
.knob { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 50% 40%, #3b4758, #10161f 70%); box-shadow: 0 3px 0 #0b0f15, 0 6px 12px rgba(0, 0, 0, 0.3); }
.knob i { position: absolute; left: 50%; top: 7px; width: 10px; height: 44px; margin-left: -5px; border-radius: 5px; background: linear-gradient(#f4f7fa, #c3ccd6); transform: rotate(-40deg); transform-origin: 50% 50%; transition: transform 0.18s; }
.knob.r i { transform: rotate(40deg); }
.mush { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; background: #f5c400; box-shadow: 0 0 0 3px #b28e00 inset; }
.mush i { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8f8f, #d11 55%, #7a0b0b); box-shadow: 0 5px 0 #5a0808, 0 8px 14px rgba(0, 0, 0, 0.35); transition: transform 0.08s; }
.mush.down i { transform: translateY(4px) scale(0.97); box-shadow: 0 1px 0 #5a0808; }
.es { grid-column: span 3; grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; column-gap: 12px; padding-top: 6px; border-top: 1px dashed #8d9cae; }
.es .mush { grid-row: span 2; }
.lamps { display: flex; gap: 10px; justify-content: space-around; margin: 12px 0; padding: 10px 6px; border-radius: 8px; background: #1b2533; }
.lamp { display: grid; justify-items: center; gap: 2px; color: #cfdcec; }
.lamp i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #5d6b7c; background: #2a3442; transition: 0.1s; }
.lamp b { font-size: 11px; }
.lamp small { font: 9.5px var(--mono); color: #8ea4bf; }
.lamp.green.on i { background: radial-gradient(circle, #b8ffd2, #22c55e 60%); box-shadow: 0 0 18px #22c55e; }
.lamp.red.on i { background: radial-gradient(circle, #ffc2c2, #ef4444 60%); box-shadow: 0 0 18px #ef4444; }
.lamp.amber.on i { background: radial-gradient(circle, #ffe7a8, #f59e0b 60%); box-shadow: 0 0 18px #f59e0b; }
.knobs { display: grid; gap: 10px; }
.sl { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
.sl span { display: flex; justify-content: space-between; gap: 8px; }
.sl b { font: 700 11.5px var(--mono); color: #0b4f96; }
.sl input { width: 100%; accent-color: #0b4f96; }
.faults { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #8d9cae; }
.fbtn { padding: 9px 10px; border-radius: 7px; border: 1px solid #b45309; background: #fff7e6; color: #7c3a06; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.fbtn:hover { background: #ffedcc; }
.fbtn.on { background: #b91c1c; border-color: #7f1d1d; color: #fff; }

/* ---------------- mímico */
.mimic { padding-bottom: 8px; }
.msvg { display: block; width: 100%; height: auto; }
.msvg .mt { fill: #cfe0f5; font: 700 13px var(--sans); }
.msvg .ms { fill: #8ea4bf; font: 10.5px var(--mono); }
.msvg .c { text-anchor: middle; }
.msvg .w { fill: #f3f7fb; }
.msvg .l { fill: #b9c9dc; }
.msvg .pw { stroke: #d98f2b; stroke-width: 3; }
.msvg .cab { fill: none; stroke: #46607f; stroke-width: 3; }
.msvg .cab.live { stroke: #f2b544; stroke-dasharray: 10 8; animation: dash 1s linear infinite; filter: drop-shadow(0 0 4px rgba(242, 181, 68, 0.6)); }
.msvg .cw { fill: none; stroke: #4b6282; stroke-width: 2; }
.msvg .cw.on { stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 6 5; animation: dash 0.8s linear infinite; }
.msvg .hose { fill: none; stroke: #3a4f6b; stroke-width: 4; stroke-linejoin: round; }
.msvg .hose.on, .msvg .hose.sup { stroke: #2f8cff; }
.msvg .hose.flow { stroke-dasharray: 8 6; animation: dash 0.5s linear infinite; }
.msvg .belt.run { stroke: #52698a; stroke-dasharray: 12 8; animation: dash 0.55s linear infinite; }
.msvg .vbelt.run { animation: dash 0.25s linear infinite; }
.msvg .tagp rect { fill: #0f1c2e; stroke: #46607f; }
.msvg .tagp rect.on { fill: #0f3a26; stroke: var(--green); }
.msvg .tagp rect.bad { fill: #4a1111; stroke: var(--red); }
@keyframes dash { to { stroke-dashoffset: -28; } }

/* ---------------- HMI */
.hmi { display: grid; gap: 12px; }
.hmi > header { margin-bottom: 0; }
.kp { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: #1a2636; border: 1px solid #33475f; }
.kp svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.kpm { display: flex; gap: 6px; }
.kpm button { flex: 1; padding: 6px 0; border-radius: 6px; border: 1px solid #33475f; background: #0f1a28; color: var(--mute); font: 700 12px var(--mono); cursor: pointer; }
.kpm button.on { background: var(--brand); border-color: var(--blue); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis div { padding: 9px 10px; border-radius: 8px; background: #0a1626; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.kpis small { display: block; color: var(--mute); font-size: 11px; }
.kpis b { font: 700 20px var(--mono); color: #fff; }
.kpis i { margin-left: 4px; color: var(--mute); font-style: normal; font-size: 11px; }
.kpis div.warn { border-color: var(--amber); background: rgba(242, 181, 68, 0.08); }
.kpis div.warn b { color: var(--amber); }
.trend { padding: 8px; border-radius: 10px; background: #0a1626; border: 1px solid var(--line); }
.trend canvas { display: block; width: 100%; height: 150px; }
.leg { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 4px 0; font-size: 11px; color: var(--mute); }
.leg span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--c); }
.graf, .seq { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.graf li, .seq li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; background: #0a1626; border: 1px solid var(--line); color: var(--mute); font-size: 12.5px; transition: 0.15s; }
.graf li b, .seq li b { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #35506f; border-radius: 4px; font: 700 11px var(--mono); }
.graf li i { margin-left: auto; font: 700 11px var(--mono); color: var(--amber); font-style: normal; }
.graf li.on, .seq li.on { color: #fff; border-color: var(--green); background: rgba(47, 224, 122, 0.1); }
.graf li.on b, .seq li.on b { border-color: var(--green); background: var(--green); color: #07111e; }
.seq li.on i::after { content: "RUN"; margin-left: auto; font: 700 10.5px var(--mono); color: var(--green); }
.seq li i { margin-left: auto; font-style: normal; }
.man { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.man button { display: grid; padding: 9px 0; border-radius: 7px; border: 1px solid #2d4a70; background: #0f2037; font-weight: 700; cursor: pointer; touch-action: none; }
.man button small { font: 9.5px var(--mono); color: var(--mute); }
.man button.down { background: var(--brand); border-color: var(--blue); }

/* ---------------- dock */
.dock { padding: 0; overflow: hidden; }
.dtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #0a1626; }
.dtabs button { padding: 8px 14px; border-radius: 7px; border: 0; background: none; color: var(--mute); font-weight: 700; cursor: pointer; }
.dtabs button em { font-style: normal; font-size: 10px; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(47, 224, 122, 0.15); color: var(--green); }
.dtabs button.on { background: var(--panel-2); color: #fff; box-shadow: inset 0 -2px 0 var(--blue); }
.dtabs button[hidden] { display: none; }
.plcm { margin-left: auto; padding-right: 6px; color: var(--mute); font: 11.5px var(--mono); }
.plcm b { color: #cfe0f5; }
.plcm i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.dock [data-dp] { padding: 12px 14px 16px; }
.hint { margin: 0 0 10px; color: var(--mute); font-size: 12px; }
.ladder { max-height: 560px; overflow: auto; display: grid; gap: 2px; padding: 4px; border-radius: 8px; background: #06101c; border: 1px solid var(--line); }
.rung { display: grid; grid-template-columns: 170px auto; align-items: center; border-bottom: 1px solid #0f2037; }
.rung.pw .rn b { color: var(--green); }
.rn { position: sticky; left: 0; z-index: 1; display: grid; gap: 2px; align-self: stretch; align-content: center; padding: 6px 10px; background: #081524; border-right: 1px solid var(--line); }
.rn b { font: 700 12px var(--mono); color: #6f87a6; }
.rn span { font-size: 11px; color: #9fb4d2; line-height: 1.3; }
.rbody { padding: 0 8px; }
.rsvg { display: block; }
.rsvg .la { fill: #e6eef8; font: 700 11px var(--mono); text-anchor: middle; }
.rsvg .ln { fill: #7f95b1; font: 9.5px var(--sans); text-anchor: middle; }
.rsvg .lt { fill: #cfe0f5; font: 700 10.5px var(--mono); }
.rsvg .lt.r { text-anchor: end; }
.rsvg .lk { font: 700 12px var(--mono); text-anchor: middle; }
.rsvg .lp { filter: drop-shadow(0 0 3px rgba(47, 224, 122, 0.7)); }
.io { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .io { grid-template-columns: 1fr; } }
.iog h4 { margin: 0 0 8px; font-size: 12px; color: #6fb2ff; letter-spacing: 0.06em; }
.iog table, .mb, .log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iog td, .mb td, .mb th, .log td, .log th { padding: 6px 8px; border-bottom: 1px solid #13263e; text-align: left; vertical-align: top; }
.mb th, .log th { color: var(--mute); font-weight: 600; font-size: 11.5px; }
.iog td:first-child { white-space: nowrap; font-family: var(--mono); }
.iog td:last-child { color: var(--mute); }
.iog td i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #243447; }
.iog tr.on td i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.iog tr.on td:nth-child(2) { color: #fff; font-weight: 700; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tscroll { overflow-x: auto; }
.logbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.logbar button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.log tbody { font-size: 12px; }
.log td:first-child { font-family: var(--mono); white-space: nowrap; color: var(--mute); }
.log td span { font: 700 10.5px var(--mono); text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #13263e; color: #9fb4d2; }
.log tr.falla td span, .log tr.alarma td span { background: rgba(255, 77, 79, 0.2); color: #ff9b9c; }
.log tr.on td span { background: rgba(47, 224, 122, 0.15); color: var(--green); }
.log .empty { color: var(--mute); text-align: center; }

/* ---------------- pie */
.status { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; padding: 12px max(16px, 2vw); border-top: 1px solid var(--line); color: var(--mute); font: 11px var(--mono); }
.status a { color: #6fb2ff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .rung { grid-template-columns: 104px auto; } .rn span { font-size: 10px; } .pbs { grid-template-columns: repeat(3, 1fr); } }

/* Proceso 04 · faceplate PID dentro de la HMI oscura */
.hmi .sl { color: #cfe0f5; }
.hmi .sl b { color: #7cc4ff; }
.hmi .sl input { accent-color: #3d9bff; }
.hmi .knobs { padding: 10px; border-radius: 10px; background: #0a1626; border: 1px solid var(--line); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets .fbtn { flex: 1 1 auto; }
@media (max-width: 1200px) and (min-width: 861px) { .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.presets .fbtn.on[data-pre] { background: #0b4f96; border-color: #0b3d75; color: #fff; }