/* Estilos base del tablero Resilience IQ (tomados del HTML de referencia) */
:root{--nav:#13283c;--nav2:#27485d;--navtext:#b7c9d5;--teal:#058b80;--bg:#f3f6f9;--surface:#ffffff;--surface2:#f5f8fa;--surface3:#f7f9fb;--line:#e1e8ef;--line2:#eef1f5;--text:#233448;--muted:#6d7d8e;--green:#13856d;--orange:#e69a43;--red:#c84e60;--gray:#91a5b4;--track:#e7edf1;--pillbg:#e6f4f0;--pilltx:#18745f;--rbg:#fbe8eb;--rtx:#ad4051;--obg:#fff0dd;--otx:#9c661d;--gbg:#e0f5eb;--gtx:#147653;--ybg:#e9eff4;--ytx:#607487;--qr:#fff0f0;--qrl:#f5d4d7;--qo:#fff5e8;--qol:#f7dfbf;--qy:#f0f4f8;--qyl:#dbe4ee;--qg:#eaf8f2;--qgl:#ccebdc;--nbg:#edf7f6;--nln:#cfeae6;--ntx:#336a67;--wbg:#fff7e8;--wln:#f6e2b7;--wtx:#83642e;--map1:#f7fafb;--map2:#eef5f7;--mapfill:#dcece9;--mapline:#8db8b0;--link:#14758c;--btnline:#cfdce4;--dotline:#ffffff;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nav:#0b1722;--nav2:#1e3a4c;--navtext:#a9bccb;--teal:#22a99c;--bg:#0f1a24;--surface:#16232f;--surface2:#1c2b38;--surface3:#1a2733;--line:#2a3a48;--line2:#223241;--text:#e3ebf2;--muted:#9aaab8;--track:#2a3a48;--pillbg:#10392f;--pilltx:#7fd8bf;--rbg:#3d1d24;--rtx:#f2a3ad;--obg:#3b2b15;--otx:#f2c27e;--gbg:#12352a;--gtx:#7fd8b2;--ybg:#243443;--ytx:#b5c4d1;--qr:#2f1b20;--qrl:#53303a;--qo:#33281a;--qol:#5a4626;--qy:#1d2a36;--qyl:#33465a;--qg:#16302a;--qgl:#2b5245;--nbg:#12302e;--nln:#245a55;--ntx:#9fd9d2;--wbg:#33291a;--wln:#5e4a24;--wtx:#e5c88f;--map1:#13212c;--map2:#172836;--mapfill:#1f3a3a;--mapline:#3f6f68;--link:#5ec4d6;--btnline:#33485a;--dotline:#16232f;color-scheme:dark}}
:root[data-theme="dark"]{--nav:#0b1722;--nav2:#1e3a4c;--navtext:#a9bccb;--teal:#22a99c;--bg:#0f1a24;--surface:#16232f;--surface2:#1c2b38;--surface3:#1a2733;--line:#2a3a48;--line2:#223241;--text:#e3ebf2;--muted:#9aaab8;--track:#2a3a48;--pillbg:#10392f;--pilltx:#7fd8bf;--rbg:#3d1d24;--rtx:#f2a3ad;--obg:#3b2b15;--otx:#f2c27e;--gbg:#12352a;--gtx:#7fd8b2;--ybg:#243443;--ytx:#b5c4d1;--qr:#2f1b20;--qrl:#53303a;--qo:#33281a;--qol:#5a4626;--qy:#1d2a36;--qyl:#33465a;--qg:#16302a;--qgl:#2b5245;--nbg:#12302e;--nln:#245a55;--ntx:#9fd9d2;--wbg:#33291a;--wln:#5e4a24;--wtx:#e5c88f;--map1:#13212c;--map2:#172836;--mapfill:#1f3a3a;--mapline:#3f6f68;--link:#5ec4d6;--btnline:#33485a;--dotline:#16232f;color-scheme:dark}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;font:14px system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
.app{display:flex;min-height:100vh}.side{width:250px;background:var(--nav);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));flex-shrink:0;padding:25px 15px}
.logo{font-size:21px;font-weight:850;letter-spacing:-.6px;margin:3px 10px}.logo small{display:block;font-size:10px;letter-spacing:1.7px;color:#8bc4c8;margin-top:5px}.menu{margin-top:30px}
.menu button{width:100%;display:flex;gap:12px;align-items:center;border:0;background:none;color:var(--navtext);text-align:left;padding:12px 14px;border-radius:10px;margin:3px 0;font-size:13px}.menu button.active,.menu button:hover{background:var(--nav2);color:#fff}
.s-foot{position:absolute;bottom:24px;left:24px;right:24px;color:#91a9b9;font-size:11px;line-height:1.6}.main{flex:1;min-width:0}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:15px 32px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.top strong{font-size:14px}
.pill{background:var(--pillbg);color:var(--pilltx);border-radius:30px;padding:7px 12px;font-size:11px;font-weight:700}.container{padding:28px 32px;max-width:1580px;margin:auto}
.eyebrow{font-size:11px;text-transform:uppercase;color:var(--teal);letter-spacing:1.5px;font-weight:800}.title{font-size:27px;letter-spacing:-.8px;margin:8px 0 6px}.sub{color:var(--muted);margin:0 0 20px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 20px}.btn{border:1px solid var(--btnline);background:var(--surface);color:var(--text);border-radius:8px;padding:10px 13px;font-size:12px;font-weight:700}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}.select,.input{border:1px solid var(--btnline);border-radius:8px;padding:10px;background:var(--surface);color:var(--text);max-width:260px}
.cajas{display:flex;gap:6px;flex-wrap:wrap}.cajas button{border:1px solid var(--btnline);background:var(--surface);border-radius:20px;padding:8px 14px;font-weight:700;font-size:12px}.cajas button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:18px}.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.card{padding:18px 16px}.card .label{color:var(--muted);font-size:12px;min-height:30px}.card .num{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:8px 0}.card .hint{font-size:11px;color:var(--muted)}
.panel{padding:22px;margin-bottom:18px}.grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}h3{font-size:16px;margin:0 0 15px}.muted{color:var(--muted)}
.flow{display:flex;gap:6px;flex-wrap:wrap}.flow>div{flex:1;min-width:120px;background:var(--surface2);border:1px solid var(--line);padding:13px;border-radius:8px}.flow b{display:block;font-size:19px;margin:6px 0}.flow small{color:var(--muted)}
table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;background:var(--surface3);padding:11px 9px;white-space:nowrap}
td{padding:11px 9px;border-bottom:1px solid var(--line2);font-size:12px;vertical-align:top}tbody tr:hover{background:var(--surface3)}
.badge{display:inline-block;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:750;white-space:nowrap}.red{background:var(--rbg);color:var(--rtx)}.orange{background:var(--obg);color:var(--otx)}.green{background:var(--gbg);color:var(--gtx)}.gray{background:var(--ybg);color:var(--ytx)}
.link{color:var(--link);background:none;border:0;font-weight:750;padding:0}.progress{height:8px;background:var(--track);border-radius:10px;overflow:hidden}.progress span{height:100%;display:block;background:var(--teal)}
.mapbox{display:flex;justify-content:center;align-items:center;min-height:500px;background:linear-gradient(160deg,var(--map1),var(--map2));border-radius:10px}.mapbox svg{max-width:100%;height:490px}
.mapdot{cursor:pointer;stroke:var(--dotline);stroke-width:1.8;opacity:.92}.mapdot:hover{stroke:var(--text);stroke-width:3}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quad{min-height:160px;border-radius:12px;padding:18px;border:1px solid transparent;text-align:left;color:var(--text)}.quad b{display:block;font-size:15px}.quad strong{display:block;font-size:30px;margin:12px 0 3px}.quad small{display:block;color:var(--muted)}
.q-red{background:var(--qr);border-color:var(--qrl)}.q-orange{background:var(--qo);border-color:var(--qol)}.q-gray{background:var(--qy);border-color:var(--qyl)}.q-green{background:var(--qg);border-color:var(--qgl)}
.profile{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{background:var(--surface2);padding:15px;border-radius:10px}.metric b{font-size:24px;display:block;margin-top:8px}
.notice{background:var(--nbg);border:1px solid var(--nln);border-radius:9px;padding:13px 15px;color:var(--ntx);font-size:12px;line-height:1.6}.warning{background:var(--wbg);border-color:var(--wln);color:var(--wtx)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.tiny{font-size:11px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps div{background:var(--surface2);padding:15px;border-radius:9px}.steps b{display:block;margin-bottom:6px}
.tablewrap{overflow-x:auto}.nowrap{white-space:nowrap}.razon{display:block;color:var(--muted);font-size:11px;line-height:1.5}.num{font-variant-numeric:tabular-nums}
@media(max-width:1050px){.cards{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr}.side{width:210px}.container{padding:22px}}
@media(max-width:700px){.app{display:block}.side{position:static;width:100%;height:auto;padding:12px}.logo{font-size:17px}.logo small,.s-foot{display:none}.menu{margin:10px 0 0;display:flex;overflow-x:auto}.menu button{white-space:nowrap;width:auto;padding:10px}.top{padding:12px}.container{padding:15px}.cards{grid-template-columns:repeat(2,1fr)}.matrix,.profile,.two,.steps{grid-template-columns:1fr}.title{font-size:23px}}

/* ---------- Aplicación multi-ambiente ---------- */
.side{overflow-y:auto}.menu .sep{font-size:10px;letter-spacing:1.5px;color:#7f9aac;text-transform:uppercase;margin:22px 14px 6px}
.menu button .ic{width:16px;display:inline-block;text-align:center}.menu button.off{opacity:.55}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.topright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tenantname{font-weight:800;font-size:15px}
.userbtn{border:1px solid var(--btnline);background:var(--surface);border-radius:20px;padding:7px 12px;font-size:12px;font-weight:700}
.preview{background:var(--wbg);border-bottom:1px solid var(--wln);color:var(--wtx);padding:10px 32px;font-size:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.preview .btn{padding:6px 10px}
.rolebadge{display:inline-block;border-radius:20px;padding:4px 9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.role-owner{background:var(--pillbg);color:var(--pilltx)}.role-editor{background:var(--obg);color:var(--otx)}.role-reader{background:var(--ybg);color:var(--ytx)}.role-super{background:var(--rbg);color:var(--rtx)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(160deg,var(--nav),#0e3a44)}
.login form{background:var(--surface);border-radius:16px;padding:32px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login .logo{color:var(--text);margin:0 0 22px}.field{display:block;margin:0 0 14px}.field>span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.field .input,.field .select,.field textarea{width:100%;max-width:none}textarea.input{min-height:90px;font:inherit;resize:vertical}
.err{background:var(--rbg);color:var(--rtx);border-radius:8px;padding:10px 12px;font-size:12px;margin:0 0 14px}
.ok{background:var(--gbg);color:var(--gtx);border-radius:8px;padding:10px 12px;font-size:12px;margin:0 0 14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:700;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--teal);border-color:var(--teal)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.formgrid .field{margin:0}
.agreement{white-space:pre-wrap;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:16px;max-height:300px;overflow:auto;font-size:12px;line-height:1.6}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:12px 0}
.stepnum{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px}
.stepnum.done{background:var(--green)}.locked{opacity:.5;pointer-events:none}
.block{border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 12px;background:var(--surface2)}
.block header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips label{border:1px solid var(--btnline);border-radius:20px;padding:5px 10px;font-size:11px;background:var(--surface);display:flex;gap:5px;align-items:center}
.secrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.btn.sm{padding:6px 10px;font-size:11px}.btn.danger{color:var(--rtx);border-color:var(--rbg)}
.secret{font-family:ui-monospace,Menlo,monospace;background:var(--surface2);border:1px dashed var(--btnline);padding:8px 10px;border-radius:8px;display:inline-block;user-select:all}
.empty{text-align:center;padding:50px 20px}.empty h3{font-size:18px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--nav);color:#fff;padding:12px 16px;border-radius:10px;font-size:13px;z-index:20;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.bad{background:var(--red)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}.picker button{text-align:left;padding:20px}
@media(max-width:1050px){.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.preview{padding:10px 12px}.secrow{grid-template-columns:1fr auto}.cards.c4{grid-template-columns:repeat(2,1fr)}.menu .sep{display:none}}
a.btn{text-decoration:none;display:inline-block}