/* ===== SOLUTEL Portal de Arquitectos · todo el CSS está dentro de .sp (seguro para incrustar en WordPress) ===== */
.sp,.sp *{box-sizing:border-box}
.sp{--navy:#0f2438;--navy2:#1b3a57;--acc:#0b7a75;--acc2:#e6f4f3;--bg:#f3f5f8;--card:#fff;--line:#dfe4ea;--txt:#17222e;--mut:#667587;--warn:#b45309;--warnbg:#fff4e0;--ok:#15803d;--bad:#b42318;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--txt);background:var(--bg);font-size:15px;line-height:1.45;min-height:100vh}
body{margin:0}
.sp button,.sp input,.sp select,.sp textarea{font:inherit;color:inherit}
.sp-top{background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.sp-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em}
.sp-logo{width:34px;height:34px;border-radius:9px;background:var(--acc);display:grid;place-items:center;font-weight:800}
.sp-brand small{display:block;font-weight:400;letter-spacing:0;opacity:.7;font-size:12px}
.sp-steps{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.sp-steps button{background:transparent;border:0;color:#cfdbe7;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600}
.sp-steps button.on{background:#fff;color:var(--navy)}
.sp-steps button:hover:not(.on){background:rgba(255,255,255,.12)}
.sp-saved{font-size:12px;opacity:.75}
.sp-main{max-width:1280px;margin:0 auto;padding:20px}
h2.sp-h{margin:0 0 4px;font-size:22px}
.sp-sub{color:var(--mut);margin:0 0 16px}
.sp-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.sp-card h3{margin:0 0 4px;font-size:16px}
.sp-card .hint{color:var(--mut);font-size:13px;margin:0 0 12px}
.sp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sp label.f{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.sp input[type=text],.sp input[type=email],.sp input[type=tel],.sp input[type=number],.sp select,.sp textarea{width:100%;padding:9px 10px;border:1px solid #c9d1da;border-radius:8px;background:#fff;min-height:40px}
.sp input:focus,.sp select:focus,.sp textarea:focus,.sp button:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.sp textarea{min-height:70px;resize:vertical}
.btn{border:1px solid #c9d1da;background:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;min-height:38px}
.btn:hover{background:#f0f3f6}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}.btn.pri:hover{background:#096661}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.sm{padding:5px 10px;min-height:30px;font-size:13px}
.btn.del{color:var(--bad);border-color:#f0c9c5}.btn.del:hover{background:#fdeceb}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
/* segmented */
.seg{display:inline-flex;border:1px solid #c9d1da;border-radius:8px;overflow:hidden;background:#fff;flex-wrap:wrap}
.seg button{border:0;background:#fff;padding:8px 13px;cursor:pointer;font-weight:600;color:var(--mut);border-right:1px solid #e4e9ee;min-height:38px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--acc);color:#fff}
.seg button:hover:not(.on){background:#f0f3f6}
.stepper{display:inline-flex;align-items:center;border:1px solid #c9d1da;border-radius:8px;overflow:hidden;background:#fff}
.stepper button{border:0;background:#f0f3f6;width:36px;min-height:38px;cursor:pointer;font-size:18px;font-weight:700}
.stepper button:hover{background:#e2e8ee}
.stepper input{width:54px!important;text-align:center;border:0!important;border-radius:0!important;min-height:38px;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.fld{display:flex;flex-direction:column;gap:2px}
/* layout ambientes */
.sp-amb{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
.sp-side{background:var(--card);border:1px solid var(--line);border-radius:12px;position:sticky;top:70px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;overflow:hidden}
.sp-side-h{padding:12px;border-bottom:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}
.sp-side-h .btn{flex:1}
.sp-list{overflow:auto;padding:6px 6px 10px}
.lvl{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:10px 8px 4px}
.ai{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px;cursor:pointer}
.ai:hover{background:#f0f3f6}.ai.on{background:var(--acc2);box-shadow:inset 3px 0 0 var(--acc)}
.ai .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:50%;background:#d5dce4;display:block}
.dots i.t{background:var(--acc)}
.sp-amb>*{min-width:0}
.sp-sidetoggle{display:none}
.sp-head{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.sp-head .nm{flex:2;min-width:220px}
.sp-head .nm input{font-size:20px;font-weight:700;padding:8px 10px}
.sp-head .lv{flex:1;min-width:160px}
.tip{display:inline-block;background:var(--warnbg);color:var(--warn);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;margin:0 6px 10px 0}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--mut);white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px;display:flex;gap:6px;align-items:center}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
.tabs button .d{width:8px;height:8px;border-radius:50%;background:#d5dce4}.tabs button .d.t{background:var(--acc)}
/* circuitos */
.circ{display:grid;grid-template-columns:2fr 1.4fr 1.3fr 1.4fr auto auto auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fbfcfd}
.circ.auto{border-left:4px solid var(--acc)}.circ.prep{border-left:4px solid #8aa0b4}
.chk{display:flex;align-items:center;gap:6px;min-height:40px;font-size:13px;font-weight:600;white-space:nowrap}
.chk input{width:18px;height:18px;accent-color:var(--acc)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px dashed #9fb0c0;background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;font-size:13px;font-weight:600}
.chip:hover{background:var(--acc2);border-color:var(--acc)}
.chip.sel{background:var(--acc);color:#fff;border:1px solid var(--acc)}
.outl{display:grid;grid-template-columns:1.3fr 1.3fr 1.2fr auto;gap:8px;align-items:end;margin-bottom:8px}
.empty{color:var(--mut);padding:14px;border:1px dashed #c9d1da;border-radius:10px;text-align:center;margin-bottom:8px}
.zdot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:5px}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi b{display:block;font-size:26px;line-height:1.1;color:var(--navy)}.kpi span{font-size:12px;color:var(--mut);font-weight:600}
.kpi.g{background:var(--acc2);border-color:#b9dcd9}
.pend{background:var(--warnbg);border:1px solid #f2d8a6;border-radius:12px;padding:12px 16px;margin-bottom:14px}
.pend h3{margin:0 0 6px;color:var(--warn);font-size:15px}.pend ul{margin:0;padding-left:20px}
.okbox{background:#e8f6ec;border:1px solid #bfe3c9;color:var(--ok);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-weight:600}
table.mx{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.mx th,table.mx td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:center;white-space:nowrap}
table.mx th{background:#eef2f6;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);position:sticky;top:0}
table.mx td:first-child,table.mx th:first-child{text-align:left}
table.mx tr.lvr td{background:#f6f8fa;font-weight:700;font-size:11px;text-transform:uppercase;color:var(--mut);letter-spacing:.05em;text-align:left}
table.mx tbody tr.ar{cursor:pointer}table.mx tbody tr.ar:hover td{background:var(--acc2)}
.z{color:#c3cbd4}
.scroll{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:70vh}
/* modal / toast */
.ov{position:fixed;inset:0;background:rgba(10,20,30,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:14px;max-width:760px;width:100%;max-height:90vh;display:flex;flex-direction:column}
.modal header{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal header h3{margin:0}
.modal .bd{padding:16px 18px;overflow:auto}
.modal footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;z-index:60;display:flex;gap:12px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast button{background:transparent;border:1px solid #fff;color:#fff;border-radius:6px;padding:3px 10px;cursor:pointer;font-weight:600}
.note{font-size:12px;color:var(--mut)}
.zone-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.zone-row input[type=color]{width:40px;height:36px;padding:2px;border:1px solid #c9d1da;border-radius:8px;background:#fff}
.zone-row input[type=text]{flex:1;min-width:160px}
#sp-print{display:none}
@media (max-width:900px){
 .sp-amb{grid-template-columns:1fr}
 .sp-side{position:static;max-height:none}
 .sp-sidetoggle{display:block;width:100%;margin-bottom:10px}
 .sp-side.closed .sp-list{display:none}
 .circ{grid-template-columns:1fr 1fr}
 .circ .full{grid-column:1/-1}
 .outl{grid-template-columns:1fr 1fr}
 .sp-main{padding:12px}.sp-top{padding:8px 12px}.sp-steps{margin-left:0;width:100%}
}
@media print{
 body *{visibility:hidden}
 #sp-print,#sp-print *{visibility:visible}
 #sp-print{display:block;position:absolute;left:0;top:0;width:100%;color:#000;font:12px/1.4 Arial,sans-serif}
 #sp-print h1{font-size:20px;margin:0 0 4px}#sp-print h2{font-size:14px;margin:14px 0 4px;border-bottom:1px solid #999}
 #sp-print table{border-collapse:collapse;width:100%;margin-bottom:8px}#sp-print td,#sp-print th{border:1px solid #bbb;padding:3px 5px;text-align:left;font-size:11px}
 #sp-print .pk{display:flex;flex-wrap:wrap;gap:6px}#sp-print .pk div{border:1px solid #bbb;padding:4px 8px;min-width:120px}
 .area-b{break-inside:avoid}
}

/* ===== Portal con servidor: lista, banners, login ===== */
body.sp-body{margin:0;background:#f3f5f8}
.sp-userbox{display:flex;align-items:center;gap:10px;margin-left:12px;flex-wrap:wrap}
.sp-userbox.solo{margin-left:auto}
.sp-user{font-weight:600;font-size:13px}
.sp-out{color:#cfdbe7;font-size:13px}
.sp-head2{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:#e6eef7;color:#1b3a57;font-size:12px;font-weight:700}
.badge.ok{background:#e8f6ec;color:#15803d}
.bar{display:inline-block;vertical-align:middle;width:90px;height:8px;background:#e5e9ee;border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc)}
.sp-banner{padding:10px 20px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp-banner.ro{background:#e8eef6;color:#1b3a57;border-bottom:1px solid #cfdbe7}
.sp-banner.closed{background:#fff4e0;color:#8a4b08;border-bottom:1px solid #f2d8a6}
.sp-banner.warn{background:#fdeceb;color:#b42318;border-bottom:1px solid #f0c9c5}
.sp.sp-admin .sp-top{position:static;border-radius:8px 8px 0 0}
.sp.sp-admin{min-height:0;background:transparent}
.outl.oth{grid-template-columns:2fr .7fr 2fr auto}
.circ{grid-template-columns:1.8fr .7fr 1.3fr 1.2fr 1.3fr auto auto auto}
.sp-loginwrap{display:grid;place-items:center;padding:24px}
.sp-logincard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;max-width:400px}
.sp-logincard .sp-brand{color:var(--navy);margin-bottom:12px}
.sp-logincard h2{margin:6px 0 2px}
.sp-logincard form p{margin:0 0 12px}
.sp-logincard label{display:block;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;margin-bottom:4px}
.sp-logincard input[type=text],.sp-logincard input[type=tel],.sp-logincard input[type=password],.sp-logincard input[type=email],.sp-logincard textarea{width:100%;padding:10px;border:1px solid #c9d1da;border-radius:8px;font:inherit;margin-bottom:8px}
.sp-logincard input[type=submit],.sp-logincard .btn{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer;width:100%}
.sp-loginerr{background:#fdeceb;color:#b42318;border-radius:8px;padding:10px;margin-bottom:10px;font-size:14px}
.sp-loginlinks{margin:12px 0 0;text-align:center;font-size:14px}
.sp-help{margin-top:14px;font-size:14px}.sp-help summary{cursor:pointer;color:var(--acc);font-weight:600}
.sp-help form{margin-top:10px}
@media (max-width:900px){ .circ{grid-template-columns:1fr 1fr} .outl.oth{grid-template-columns:1fr 1fr} .sp-userbox{margin-left:0;width:100%} .sp-banner{padding:8px 12px} }

/* overlay y toast viven fuera de #app: heredan el mismo sistema de estilos */
.sp.sp-float{min-height:0;background:transparent}
a.btn{text-decoration:none;display:inline-flex;align-items:center;color:inherit}
.sp-userbox a.btn{color:var(--txt)}
.toast{font-family:inherit;font-size:14px}