:root{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:#1c2b3a;background:#f2f6fb}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:30px;padding:18px max(24px,calc((100vw - 1180px)/2));background:linear-gradient(110deg,#0a2749,#12659e);color:#fff;flex-wrap:wrap}.logo{display:flex;gap:12px;align-items:center}.logo strong{display:block;font-size:19px;letter-spacing:.07em}.logo small{font-size:12px;color:#c4e2fa}.symbol{font-size:34px;color:#6fe2ee}nav{display:flex;gap:22px;flex:1;flex-wrap:wrap}nav a{color:#d9edfd;text-decoration:none;font-size:14px}nav a:hover{text-decoration:underline}main{max-width:1180px;padding:32px 24px 64px;margin:auto}.intro{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:#1699b4;font-weight:700}h1{font-size:30px;margin:7px 0}h2{font-size:20px;margin:0 0 20px}.muted,.rack span,.stat span{color:#6c7d91}.user{font-size:13px;color:#62778b}.panel{border-radius:15px;background:white;box-shadow:0 5px 23px #1b476310;border:1px solid #e0e8f2;padding:24px;margin-bottom:20px}.selector{padding:16px 24px}.selector form{max-width:440px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{display:flex;flex-direction:column;gap:15px}.stat strong{font-size:36px;color:#0a5690}.stat strong.pending{font-size:16px;color:#d38b18}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.rack{border:1px solid #dce6f1;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#fbfdff}.rack strong{font-size:15px}.rack span{font-size:13px}.rack .mini-icon{font-size:29px;color:#1284bc}label{font-size:13px;color:#36485f;display:flex;flex-direction:column;gap:7px;font-weight:600}input,select{border:1px solid #cdd9e6;padding:12px;border-radius:8px;font:inherit;background:#fff;width:100%;color:#233249}input:focus,select:focus{outline:2px solid #68badd}button{background:#0778b6;border:0;border-radius:8px;padding:12px 17px;color:white;font-weight:700;cursor:pointer;white-space:nowrap}button:hover{background:#00649b}button.outline{border:1px solid #91c3de;background:transparent}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}.form-grid button{align-self:end;justify-self:start}.login{max-width:480px;margin:60px auto;padding:38px}.login form{display:flex;flex-direction:column;gap:18px;margin-top:30px}.alert{padding:15px;border:1px solid #f5b5ae;background:#fff1ef;border-radius:9px;margin-bottom:18px;color:#a32817}footer{text-align:center;font-size:12px;color:#8a9aab;padding:20px}@media(max-width:760px){header{padding:16px;gap:15px}nav{width:100%;order:3;gap:15px}.stats{grid-template-columns:repeat(2,1fr)}.intro{display:block}main{padding:20px 14px}.form-grid{grid-template-columns:1fr}.panel{padding:19px}h1{font-size:25px}}

/* Módulo 2: editor frontal configurable */
.rack-editor{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:25px;align-items:start}.rack-visual{background:#172839;padding:14px;border:8px solid #415366;border-radius:12px}.rack-unit{height:42px;display:flex;gap:8px;align-items:stretch;border-bottom:1px dashed #506273}.u-num{color:#a6b7c6;font-size:11px;width:33px;flex-shrink:0;align-self:center}.rack-mounted{background:#214c6b;border:1px solid #4a8cad;color:white;border-radius:4px;flex:1;padding:4px 8px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:7px}.rack-mounted small{color:#b9d4e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rack-mounted.patch_panel{background:#374151}.rack-mounted.server{background:#334155}.rack-mounted.ups{background:#4c4255}.rack-empty{color:#687a89;background:#203445;flex:1;display:flex;align-items:center;justify-content:center;font-size:11px}.device-card{padding:15px;border:1px solid #d8e3ed;border-radius:10px;margin-bottom:12px}.device-card p{margin:8px 0}.port-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.port-grid span{font-size:10px;text-align:center;padding:5px 0;border-radius:3px;border:1px solid #adc1d1;background:#e7f2f8;color:#24506b}.rack-list h3{margin-top:0}@media(max-width:760px){.rack-editor{grid-template-columns:1fr}.rack-visual{max-width:420px}.rack-mounted{font-size:12px}}


/* ===============================================================
   MCECA NET — Tema corporativo inspirado en mceca.es
   Diseño responsive. No cambia las funciones de la aplicación.
   =============================================================== */
:root{
 --mceca-ink:#112441;--mceca-navy:#0a1831;--mceca-blue:#1955a3;
 --mceca-cyan:#13a9d1;--mceca-sky:#eaf6ff;--mceca-line:#dce8f2;
 --mceca-muted:#64758b;--mceca-paper:#f5f8fc;
 font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
 color:var(--mceca-ink);background:var(--mceca-paper)
}
body{min-height:100vh;background:linear-gradient(180deg,#eef5fd 0,#f8fbfe 275px,#f5f8fc 100%);line-height:1.55}
header{position:relative;isolation:isolate;min-height:94px;padding:18px max(24px,calc((100vw - 1200px)/2));background:linear-gradient(112deg,#08172e 0%,#123965 56%,#1760a0 100%);border-bottom:3px solid #17afcf;box-shadow:0 10px 35px #112b4a19;gap:34px}
header::after{content:"";position:absolute;inset:0 0 0 auto;width:40%;background:radial-gradient(circle at 70% 10%,#49d9ed40,transparent 65%);z-index:-1;pointer-events:none}
.logo{gap:13px;flex-shrink:0}.logo .symbol{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid #6dd7ef80;border-radius:14px;background:linear-gradient(145deg,#125da4,#0a2749);box-shadow:0 4px 15px #0003;color:#7ee4f0;font-size:33px}
.logo strong{font-size:19px;font-weight:850;letter-spacing:.035em;color:#fff}.logo small{font-size:11px;letter-spacing:.055em;color:#b8dcef}
nav{align-items:center;gap:7px}nav a{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid transparent;border-radius:9px;font-size:13px;font-weight:650;color:#e3efff;transition:background .2s,border-color .2s;text-decoration:none}
nav a:hover,nav a:focus-visible{background:#ffffff18;border-color:#ffffff24;text-decoration:none;color:#fff}
header form{margin:0}header button.outline{border:1px solid #a9d7fa66;color:#fff;padding:10px 19px;background:#ffffff12}header button.outline:hover{background:#ffffff30}
main{max-width:1200px;padding:38px 24px 72px}.intro{margin-bottom:26px;padding:4px 0 8px;align-items:flex-start}.intro h1{font-size:clamp(28px,3.1vw,38px);letter-spacing:-.035em;margin:4px 0 5px;color:#10294a}.intro .muted{margin:0;font-size:14px}.eyebrow{color:#087aa9;font-size:11px;letter-spacing:.16em}
h1,h2,h3{line-height:1.2;color:#10294a}h2{font-size:19px;letter-spacing:-.015em}h3{font-size:16px}.user{background:#fff;border:1px solid var(--mceca-line);border-radius:99px;padding:9px 16px;color:#4a6282;font-weight:600;box-shadow:0 2px 10px #1439570b}
.panel{border:1px solid #e2ebf4;border-radius:18px;background:#fff;padding:26px;box-shadow:0 8px 30px #112b4b0b,0 1px 2px #1a3b5908;margin-bottom:21px}.panel h2{margin-bottom:19px}.panel.selector{background:linear-gradient(100deg,#fff 15%,#eef8ff 100%);border-color:#d6e7f5}
.stats{gap:16px}.stat{position:relative;overflow:hidden;min-height:145px;padding:23px 24px;gap:12px}.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#1b70be,#17b4d3)}.stat span{font-size:12px;font-weight:650;letter-spacing:.015em;color:#6b7e93}.stat strong{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.035em;color:#175aa1}.stat strong.pending{font-size:14px;letter-spacing:0;color:#b07821;background:#fff5df;padding:8px 10px;border-radius:8px;align-self:flex-start}
.cards{gap:16px}.rack{position:relative;background:linear-gradient(150deg,#fff,#f9fcff);border:1px solid #dde9f5;border-radius:14px;min-height:152px;padding:21px;gap:9px;transition:transform .2s,box-shadow .2s,border-color .2s}.rack:hover{transform:translateY(-2px);border-color:#9ac9ef;box-shadow:0 10px 25px #0b46771b}.rack strong{font-size:15px;color:#12345b}.rack span{font-size:13px}.rack .mini-icon{display:grid;place-items:center;width:42px;height:42px;background:#e6f4ff;border-radius:12px;color:#1681ba;font-size:27px}.rack a,a{color:#126ab5}.rack a{font-size:13px;font-weight:700;text-decoration:none;margin-top:auto}.rack a:hover,a:hover{color:#0b4d85;text-decoration:underline}
label{font-size:13px;color:#344b66;font-weight:650;gap:8px}input,select{min-height:45px;border:1px solid #cfdeeb;border-radius:10px;background:#fbfdff;color:#1d3653;padding:11px 13px;box-shadow:inset 0 1px 2px #17385506;transition:border-color .2s,box-shadow .2s}input:hover,select:hover{border-color:#a6c8e7}input:focus,select:focus{outline:none;border-color:#1986bf;box-shadow:0 0 0 4px #1799cb20;background:#fff}
button{border:1px solid #1663a7;border-radius:10px;background:linear-gradient(115deg,#12549a,#087cad);font-size:13px;font-weight:750;min-height:44px;padding:11px 19px;box-shadow:0 5px 12px #0a6b9d21;transition:transform .15s,filter .15s,box-shadow .15s}button:hover{background:linear-gradient(115deg,#104985,#096c9a);filter:brightness(1.04);box-shadow:0 7px 16px #0a6b9d30}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #25acd3;outline-offset:3px}
.form-grid{gap:18px}.login{max-width:490px;margin:50px auto 65px;padding:40px;border-radius:20px;border:1px solid #ddeaf5;box-shadow:0 20px 60px #12345c18}.login::before{content:"MCECA  /  NETWORK MANAGEMENT";display:block;font-weight:800;letter-spacing:.15em;color:#2778b3;font-size:10px;margin-bottom:23px}.login h1{font-size:31px;margin:5px 0 8px}.login form{gap:18px;margin-top:29px}.login form button{min-height:48px;font-size:14px}.muted{color:#687b92}.alert{border:1px solid #f0c7c4;background:#fff4f3;color:#9c3327}footer{padding:26px 16px 32px;color:#8a9aab;border-top:1px solid #e2eaf3}
/* Rack frontal: colores técnicos coherentes con la marca */
.rack-editor{gap:27px}.rack-visual{background:#0e2037;border:8px solid #344e6a;border-radius:13px;box-shadow:0 16px 32px #0a23312b}.rack-unit{border-bottom:1px dashed #3c5773}.rack-mounted{background:#175987;border-color:#3c97c7}.rack-mounted.patch_panel{background:#31435b}.rack-mounted.server{background:#26496c}.rack-mounted.ups{background:#4b496a}.rack-empty{background:#162b43;color:#829ab3}.device-card{border-color:#dde8f2;background:#fdfefe;border-radius:12px}.port-grid span{background:#e7f4fd;border-color:#b6d6ec;color:#1a5885}
@media(max-width:850px){header{gap:13px;padding:15px 18px}nav{width:100%;order:3;justify-content:flex-start;gap:3px}nav a{padding:8px 10px}.intro{gap:12px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){header{padding:14px 16px;min-height:auto}.logo .symbol{width:39px;height:39px;font-size:27px}.logo strong{font-size:17px}.logo small{font-size:10px}nav{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;padding-bottom:2px}main{padding:26px 14px 48px}.intro h1{font-size:27px}.user{display:inline-block;margin-top:12px}.panel{padding:19px;border-radius:14px}.stats{gap:10px}.stat{min-height:124px;padding:18px}.stat strong{font-size:31px}.cards{grid-template-columns:1fr}.login{margin:26px auto;padding:25px}.form-grid{grid-template-columns:1fr}.rack-editor{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Edición de dispositivos v0.3 */
.device-edit{margin:12px 0;border-top:1px solid #e1e9f0;padding-top:12px}.device-edit summary{cursor:pointer;font-weight:700;color:#0876ad;padding:7px 0}.device-edit-form{margin:12px 0}.device-delete{margin-top:14px;border-top:1px solid #e4eaf1;padding-top:12px}.danger-action{background:#bb2938}.danger-action:hover{background:#931e2a}.device-edit-form input,.device-edit-form select{min-width:0}

/* MCECA NET · Acceso corporativo estilo POS / DeCA · v0.3 */
body.page-login{min-height:100vh;background:#071b35;color:#183451}
.page-login .app-header{display:none}
.page-login main{max-width:none;min-height:calc(100vh - 42px);padding:0;margin:0}
.page-login footer{background:#071b35;color:#93b4cd;border:0;padding:13px 16px;text-align:center;font-size:11px}
.page-login main>.alert{position:relative;z-index:3;max-width:460px;margin:12px auto -10px}
.auth-layout{min-height:calc(100vh - 42px);display:grid;grid-template-columns:minmax(420px,45%) minmax(0,55%);background:#fff}
.auth-card{width:min(440px,calc(100% - 56px));margin:auto;padding:52px 0}
.auth-eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;color:#126daa;letter-spacing:.17em;font-weight:800}
.auth-indicator{width:9px;height:9px;border-radius:50%;background:#16bad4;box-shadow:0 0 0 5px #1bade61a}
.auth-card h1{font-size:clamp(30px,3vw,43px);letter-spacing:-.045em;margin:26px 0 10px;color:#102d4c}
.auth-subtitle{color:#72869c;font-size:15px;line-height:1.7;margin:0 0 35px}
.auth-form{display:flex;flex-direction:column;gap:20px}
.auth-form label{font-size:13px;color:#294968;gap:9px;font-weight:700}
.auth-form input{min-height:52px;background:#f8fbfe;border:1px solid #d8e4ef;border-radius:10px;padding:13px 16px;font-size:14px}
.auth-form button{margin-top:10px;min-height:54px;border:0;border-radius:10px;background:linear-gradient(105deg,#1268b4,#14a2c7);font-size:14px;display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 12px 22px #146eac2c}
.auth-form button span{font-size:20px;font-weight:400}
.auth-security{margin:27px 0 0;color:#8295a8;font-size:12px;text-align:center}
.auth-brand{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 78% 22%,#25b4cf40,transparent 35%),linear-gradient(143deg,#06162f 2%,#0b325b 50%,#14699c 100%);color:#fff}
.auth-brand:before,.auth-brand:after{content:"";position:absolute;border:1px solid #b3f1ff1e;border-radius:50%;pointer-events:none;z-index:-1}
.auth-brand:before{width:650px;height:650px;right:-260px;top:-250px;box-shadow:0 0 0 95px #a2eafd08,0 0 0 190px #a2eafd05}
.auth-brand:after{width:420px;height:420px;left:-240px;bottom:-220px}
.auth-brand-inner{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;max-width:800px;margin:auto;padding:58px clamp(34px,6vw,100px) 50px}
.auth-logo{display:flex;align-items:center;gap:15px;font-size:21px;font-weight:800;letter-spacing:.09em;color:#fff}.auth-logo b{color:#57def0}
.auth-logo-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#ffffff12;border:1px solid #90e7f477;font-size:37px;font-weight:400;color:#83ecf6}
.auth-brand-center{padding:60px 0}.auth-kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:#84daea}
.auth-brand h2{font-size:clamp(37px,4.8vw,70px);letter-spacing:-.055em;line-height:1.07;color:#fff;margin:20px 0 28px;font-weight:800}
.auth-brand-center p{max-width:440px;color:#c3def1;line-height:1.85;font-size:16px}
.auth-brand-foot{color:#c1e2f2;font-size:11px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.auth-dot{width:5px;height:5px;background:#4bd6ed;border-radius:50%}
@media(max-width:850px){.auth-layout{grid-template-columns:1fr}.auth-brand{grid-row:1}.auth-brand-inner{padding:22px 26px}.auth-brand-center,.auth-brand-foot{display:none}.auth-logo{font-size:18px}.auth-logo-mark{width:43px;height:43px;font-size:28px}.auth-card{width:min(440px,calc(100% - 42px));padding:45px 0 55px}.page-login main{min-height:calc(100vh - 42px)}}
@media(max-width:480px){.auth-card h1{font-size:31px}.auth-subtitle{font-size:14px}.auth-card{padding-top:38px}.auth-form input{min-height:50px}}

/* MCECA NET v0.4 · Documentación de cableado */
.cabling-legend{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.cabling-legend span{border-radius:999px;padding:7px 12px;background:#eaf4fd;color:#164c78;font-size:12px;font-weight:700}.cabling-table-wrap{overflow:auto}.cabling-table{width:100%;border-collapse:collapse;font-size:13px;min-width:700px}.cabling-table th{text-align:left;color:#61768c;background:#f3f8fc}.cabling-table th,.cabling-table td{padding:12px;border-bottom:1px solid #e0eaf2;vertical-align:top}.cabling-table td strong{color:#123b61}.cabling-table tr:hover td{background:#f9fcff}.cabling-actions{display:flex;gap:8px;align-items:center}.cabling-actions button{min-height:32px;padding:6px 10px;font-size:11px}.cabling-card{padding:18px;border:1px solid #dcebf8;background:linear-gradient(125deg,#fff,#f5fbff);border-radius:12px}.cabling-route{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:#345573;font-size:12px}.cabling-node{border:1px solid #b7d8ed;border-radius:8px;padding:8px 10px;background:#fff}.cabling-arrow{font-weight:900;color:#1284bc}.cabling-muted{font-size:12px;color:#6a7b8c}.cabling-form select{min-width:0}.cabling-help{background:#f0f7fe;border-left:4px solid #1886b8;padding:14px 18px;border-radius:7px;margin:15px 0;color:#375777;font-size:13px;line-height:1.7}.cabling-success{padding:11px 16px;border-radius:8px;background:#e5f8ed;color:#086a38;font-weight:700;margin-bottom:14px}.cabling-link{display:inline-block;padding:7px 12px;background:#e6f4fe;border-radius:8px;color:#13609e;font-weight:700;text-decoration:none;font-size:13px}.cabling-table .tiny{font-size:11px;color:#75889a}