/* PLC Lab · tema claro */
:root{--bg:#f4f7ff;--card:#ffffff;--ink:#14213d;--muted:#5b6b88;--line:#dbe3f3;--blue:#2457f5;--blue2:#e8eeff;--orange:#f97316;--green:#16a34a;--green2:#dcfce7;--red:#e11d48;--wire:#55627a;--cell-h:72px;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.plc{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:var(--blue)}
button,select,input{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2}

/* Cabecera */
.plc-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 20px;background:linear-gradient(110deg,#2457f5,#6d3df5 60%,#f97316);color:#fff}
.plc-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700}
.plc-brand img{background:#fff;border-radius:8px;padding:2px}
.plc-title{margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px}
.plc-title b{color:#ffe08a}
.plc-logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.2)}
.plc-beta{font-size:11px;font-weight:700;background:#fff;color:var(--blue);border-radius:99px;padding:2px 8px}
.plc-top-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.plc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s,box-shadow .15s}
.plc-btn:hover{box-shadow:0 3px 10px rgba(36,87,245,.15)}
.plc-btn:active{transform:translateY(1px)}
.plc-btn:disabled{opacity:.5;cursor:default}
.plc-btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.plc-btn.run{background:var(--green);border-color:var(--green);color:#fff}
.plc-btn.stop{background:#fff;border-color:var(--red);color:var(--red)}
.plc-btn.run.on{box-shadow:0 0 0 3px rgba(22,163,74,.3)}
.plc-btn.stop.on{background:var(--red);color:#fff}
.plc-btn.add{width:100%;margin-top:10px;border-style:dashed;color:var(--blue)}
:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}

/* Barra de control */
.plc-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.plc-field{display:flex;align-items:center;gap:8px;font-weight:650;min-width:0}
.plc-field span{color:var(--muted);font-size:13px}
.plc-field select{min-height:38px;border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;background:#fff;max-width:62vw}
.plc-mode{display:flex;gap:6px}
.plc-status{font-weight:800;font-size:13px;letter-spacing:.04em;padding:6px 12px;border-radius:99px;background:#ffe4e6;color:var(--red)}
.plc-status.run{background:var(--green2);color:var(--green)}
.plc-status.step{background:#fef3c7;color:#b45309}
.plc-bar-more{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}

/* Distribución */
.plc-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;padding:18px 20px;max-width:1500px;margin:0 auto}
.plc-editor,.plc-plant,.plc-io,.plc-retos,.plc-help,.plc-learn,.plc-reto{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 6px 24px rgba(20,33,61,.06);min-width:0}
.plc-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.plc-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.plc-sec-h h2,.plc-io h2{margin:0;font-size:18px}
.plc-hint{color:var(--muted);font-size:13px;margin:6px 0 10px}

/* Ciclo de scan */
.plc-scan{display:flex;gap:4px;flex-wrap:wrap}
.plc-scan span{font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;background:#eef2fb;color:var(--muted);transition:background .15s,color .15s}
.plc-scan span.on{background:var(--blue);color:#fff}

/* Paleta */
.plc-palette{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tool{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:68px;padding:6px 4px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:12px;font-weight:700}
.tool svg{width:52px;height:21px}
.tool.o{border-color:#fed7aa}
.tool.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tool.on svg *{stroke:#fff}
.tool[data-tool="link"] span::before{content:"┃";display:block;font-size:18px;line-height:21px;color:var(--blue)}
.tool[data-tool="erase"] span::before{content:"⌫";display:block;font-size:18px;line-height:21px;color:var(--red)}
.tool.on span::before{color:#fff}
.tool svg path,.insp-types svg path{stroke:currentColor;stroke-width:3;fill:none}
.tool svg rect,.tool svg circle,.insp-types svg rect,.insp-types svg circle{fill:none}
.tool svg text,.insp-types svg text{fill:currentColor;font-weight:800;font-family:system-ui,sans-serif}

/* Escalera */
.plc-lad-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.plc-ladder{min-width:470px}
.rung{margin-bottom:12px}
.rung-h{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.rung-n{display:grid;place-items:center;min-width:28px;height:24px;border-radius:7px;background:var(--blue2);color:var(--blue);font-weight:800;font-size:13px}
.rung-c{flex:1 1 140px;min-width:0;border:1px solid transparent;border-radius:7px;padding:3px 8px;background:transparent;color:var(--muted);font-size:13px}
.rung-c:hover,.rung-c:focus{border-color:var(--line);background:#fff}
.rung-tools{display:flex;gap:4px}
.rung-tools button{min-height:28px;padding:2px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:12px;font-weight:700;cursor:pointer}
.rung-tools button:disabled{opacity:.35;cursor:default}
.rung-g{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr)) minmax(82px,1.3fr);border-left:5px solid var(--wire);border-right:5px solid var(--wire);background:#fbfcff;border-radius:3px}
.live .rung-g{border-left-color:var(--green)}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--cell-h);padding:0;border:0;background:transparent;cursor:pointer;min-width:0;--wc:var(--wire)}
.cell:hover{background:#eef3ff}
.cell svg{position:relative;z-index:1;width:100%;max-width:120px;height:30px;overflow:visible}
.cell::before,.cell::after{content:"";position:absolute;top:calc(50% - 1.5px);height:3px;background:var(--wire);z-index:0}
.cell::before{left:0;width:50%}.cell::after{left:50%;width:50%}
.cell.br.empty::before,.cell.br.empty::after,.cell.out.empty::before,.cell.out.empty::after{display:none}
.cell.pin::before{background:var(--green);height:4px}
.cell.pout::after{background:var(--green);height:4px}
.cell .ad,.cell .sm{position:absolute;left:2px;right:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cell .ad{top:5px;font-size:12px;font-weight:800;color:var(--ink)}
.cell .sm{bottom:5px;font-size:10.5px;color:var(--muted)}
.cell svg path{fill:none;stroke:var(--wire);stroke-width:3;stroke-linecap:round}
.cell svg .bg{fill:#fbfcff}
.cell:hover svg .bg{fill:#eef3ff}
.cell svg rect.sy,.cell svg circle{stroke:var(--wire);stroke-width:2.5}
.cell svg text{fill:var(--ink);font-weight:800;font-family:system-ui,sans-serif}
.cell svg .ghost{stroke:#c7d2e8;stroke-width:2;stroke-dasharray:4 5}
.cell.empty svg text{fill:#b4c0da}
.cell.pin svg .wl,.cell.pout svg .wr,.cell.pout svg .sy{stroke:var(--green)}
.cell.pout svg rect.sy{stroke:var(--green)}
.cell.cl svg .bg{fill:var(--green2)}
.cell.act svg .bg{fill:#bbf7d0}
.cell.act svg .sy,.cell.act svg rect.sy{stroke:var(--green)}
.cell.out .ad{color:#c2410c}
.cell.bad .ad{color:var(--red);text-decoration:underline wavy}
.cell .vl{position:absolute;left:-1.5px;top:calc(50% - 1.5px);width:3px;height:calc(var(--cell-h) + 3px);background:var(--wire);z-index:2}
.cell.von .vl{background:var(--green);width:4px}
.cell.t-wire .ad,.cell.t-wire .sm{display:none}
.plc-warn{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.plc-warn li{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:7px 10px;font-size:13px}
.plc-warn li::before{content:"⚠ "}

/* Planta */
.plc-plant-msg{font-size:13px;font-weight:650;color:var(--blue);background:var(--blue2);padding:4px 10px;border-radius:99px;max-width:100%}
#plant{display:block;width:100%;aspect-ratio:600/340;height:auto;border-radius:14px;border:1px solid var(--line);background:#eef4ff}
.plc-panelbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-top:12px}
.pb{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 9px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;font-size:12.5px;line-height:1.25}
.pb span{min-width:0}.pb b{display:block;font-size:11px;color:var(--muted)}
.pb i{flex:0 0 auto;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.15);transition:transform .08s}
.pb-green i{background:#22c55e}.pb-red i{background:#ef4444}
.pb-estop i{background:radial-gradient(circle,#ef4444 55%,#facc15 57%)}
.pb-trip i{background:#94a3b8;border-radius:6px}.pb-sw i{background:#cbd5e1;border-radius:8px;position:relative}
.pb-sw i::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:22px;border-radius:5px;background:#fff;transition:left .15s}
.pb-sw.down i{background:var(--blue)}.pb-sw.down i::after{left:13px}
.pb-ctl i{background:#a7f3d0;border-radius:6px}.pb-ctl.down i{background:#10b981}
.pb.down{background:#eef3ff;border-color:var(--blue)}
.pb.down i{transform:scale(.88)}
.pb-estop.down,.pb-trip.down{background:#fff1f2;border-color:var(--red)}
.pb-trip.down i{background:var(--red)}
.pb.sensor{cursor:default;background:#f8fafc;border-style:dashed}
.pb.sensor i{width:16px;height:16px;background:#cbd5e1;box-shadow:none}
.pb.sensor.on i{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.plc-cpu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border-radius:12px;background:#1e293b;color:#e2e8f0;font-size:12px;font-weight:700}
.cpu-led{display:flex;align-items:center;gap:5px}
.cpu-led i{width:10px;height:10px;border-radius:50%;background:#334155}
#ledRun.on{background:#22c55e;box-shadow:0 0 8px #22c55e}#ledStop.on{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.cpu-io{display:flex;align-items:center;gap:5px}
.cpu-io span{display:flex;gap:3px}
.cpu-io span i{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;background:#334155;color:#94a3b8;font-style:normal;font-size:10px}
.cpu-io span i.on{background:#22c55e;color:#052e16}
.cpu-scans{margin-left:auto;color:#94a3b8}.cpu-scans b{color:#fff}

/* Tabla E/S */
.plc-io-scroll{overflow-x:auto;margin-top:8px}
.plc-io table{width:100%;border-collapse:collapse;font-size:13px}
.plc-io th,.plc-io td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.plc-io th{color:var(--muted);font-size:12px}
.plc-io td:nth-child(2){white-space:normal}
.st{display:inline-block;min-width:26px;text-align:center;padding:1px 7px;border-radius:7px;background:#eef2f7;color:var(--muted);font-weight:800}
.st.on{background:var(--green);color:#fff}
.plc-ad{display:none}
.plc-ad:has(ins),.plc-ad:has(iframe){display:block;min-height:100px;text-align:center}
.plc-ad span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* Retos */
.plc-retos,.plc-help,.plc-learn{max-width:1500px;margin:0 auto 18px;width:calc(100% - 40px)}
.plc-progress{font-weight:800;color:var(--green);background:var(--green2);padding:4px 10px;border-radius:99px;font-size:13px}
.plc-reto-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.reto-card{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-align:left;cursor:pointer}
.reto-card:hover{border-color:var(--blue)}
.reto-card.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,87,245,.15)}
.reto-card b{display:block;font-size:14px}.reto-card small{color:var(--muted)}
.reto-num{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#6d3df5);color:#fff;font-weight:800}
.reto-card.done .reto-num{background:var(--green)}
.plc-reto{max-width:1460px;margin:18px auto 0;width:calc(100% - 40px);border:2px solid var(--blue);scroll-margin-top:70px}
.plc-reto h2{margin:4px 0 6px;font-size:20px}
.reto-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.reto-tag{font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.05em}
.reto-x{border:0;background:#eef2fb;border-radius:8px;width:32px;height:32px;cursor:pointer;font-weight:800}
.reto-text p{margin:6px 0}
.plc-reto details{margin:8px 0;background:#fffbeb;border-radius:10px;padding:6px 10px}
.plc-reto summary{cursor:pointer;font-weight:700;color:#b45309}
.reto-act{margin:10px 0 4px}
.reto-res{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.reto-res li{padding:5px 10px;border-radius:8px}
.reto-res .ok{background:#f0fdf4;color:#166534}.reto-res .ko{background:#fff1f2;color:#9f1239}
.reto-res .sum{font-weight:800}

/* Ayuda y artículo */
.plc-help h2,.plc-learn h2{margin:0 0 10px}
.plc-help details{border-top:1px solid var(--line);padding:8px 0}
.plc-help summary{cursor:pointer;font-weight:750}
.plc-help ul{margin:8px 0;padding-left:20px}
.plc-learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.plc-learn section{background:#f8faff;border:1px solid var(--line);border-radius:14px;padding:14px}
.plc-learn h3{margin:0 0 6px;font-size:16px;color:var(--blue)}
.plc-learn p{margin:0}
.plc-links{margin-top:14px!important}

/* Inspector */
.plc-insp{border:0;border-radius:18px;padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 40px);box-shadow:0 20px 60px rgba(20,33,61,.3);color:var(--ink)}
.plc-insp::backdrop{background:rgba(20,33,61,.4)}
.plc-insp form{padding:16px}
.plc-insp h3{margin:0 0 10px;font-size:16px}
.insp-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-bottom:12px}
.insp-types button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:4px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:12px;font-weight:700}
.insp-types button svg{width:50px;height:20px}
.insp-types button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.insp-f{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;font-size:13px;font-weight:650;min-width:0}
.insp-f span{color:var(--muted)}
.insp-f select,.insp-f input{min-height:40px;border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;background:#fff;width:100%}
.insp-cmp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.insp-note{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.insp-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin:6px 0 14px;cursor:pointer}
.insp-check input{width:20px;height:20px;flex:0 0 auto}
.insp-actions{display:flex;justify-content:space-between;gap:8px}

.plc-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;background:#14213d;color:#fff;padding:10px 16px;border-radius:12px;font-weight:650;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px);text-align:center}
.plc-autotest{margin:12px 20px;padding:12px 16px;background:#fff;border:2px solid var(--blue);border-radius:14px;font-size:13px}
.plc-autotest h2{margin:0 0 6px;font-size:16px}.plc-autotest .ok{color:#166534}.plc-autotest .ko{color:#be123c;font-weight:700}

@media (max-width:980px){.plc-main{grid-template-columns:minmax(0,1fr)}.plc-side{order:-1}}
@media (max-width:620px){
  .plc-top,.plc-bar{padding:10px 16px}
  .plc-top-actions{margin-left:0;width:100%}.plc-top-actions .plc-btn{flex:1}
  .plc-main{padding:14px 16px;gap:14px}
  .plc-retos,.plc-help,.plc-learn,.plc-reto{width:calc(100% - 32px)}
  .plc-editor,.plc-plant,.plc-io,.plc-retos,.plc-help,.plc-learn,.plc-reto{padding:12px;border-radius:14px}
  .plc-bar{gap:8px}.plc-bar-more{margin-left:0;width:100%}.plc-bar-more .plc-btn{flex:1;padding:6px 8px;font-size:13px}
  .plc-field select{max-width:none;width:100%}.plc-field{flex:1 1 100%}
  .plc-bar{position:static}
  .plc-panelbox{grid-template-columns:repeat(2,minmax(0,1fr))}
  .insp-cmp{grid-template-columns:1fr}
  .cpu-scans{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}