/* Layout: barra superior + raíl de empresas a la izquierda + área de trabajo con pestañas por letra del modelo SEPE */
:root{
  --bg:#f3f5f5; --surface:#ffffff; --surface-2:#eaeff0; --line:#d3dcdf; --line-2:#e3e9eb;
  --fg:#17242c; --fg-2:#4b5c65; --fg-3:#7a8a92;
  --acc:#1f5560; --acc-2:#2c7380; --acc-soft:#dcebee; --on-acc:#ffffff;
  --ok:#2f7a4f; --ok-soft:#e1f1e7; --warn:#a8650b; --warn-soft:#fbefd9; --crit:#b23b2e; --crit-soft:#f8e1de;
  --shadow:0 1px 2px rgba(18,40,48,.06),0 4px 16px rgba(18,40,48,.06);
  --f-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,'Courier New',monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1719; --surface:#162125; --surface-2:#1c2a2f; --line:#2c3d43; --line-2:#24343a;
  --fg:#e3ecee; --fg-2:#a9bac0; --fg-3:#7d9097;
  --acc:#6fb3c0; --acc-2:#8cc6d1; --acc-soft:#1d3a41; --on-acc:#0b1a1d;
  --ok:#6cc08f; --ok-soft:#173226; --warn:#e2a94e; --warn-soft:#3a2c14; --crit:#ef8b7e; --crit-soft:#3d1d19;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1719; --surface:#162125; --surface-2:#1c2a2f; --line:#2c3d43; --line-2:#24343a;
  --fg:#e3ecee; --fg-2:#a9bac0; --fg-3:#7d9097;
  --acc:#6fb3c0; --acc-2:#8cc6d1; --acc-soft:#1d3a41; --on-acc:#0b1a1d;
  --ok:#6cc08f; --ok-soft:#173226; --warn:#e2a94e; --warn-soft:#3a2c14; --crit:#ef8b7e; --crit-soft:#3d1d19;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.92em}
.muted{color:var(--fg-2)} .small{font-size:12px}
h1,h2,h3{text-wrap:balance;margin:0}

/* ---- barra superior ---- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .mark{width:30px;height:30px;border-radius:5px;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font-weight:700;font-size:11px;letter-spacing:.02em;flex:none}
.brand b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{display:block;font-size:11px;color:var(--fg-3);white-space:nowrap}
.top .sp{flex:1}
.save{font-size:12px;color:var(--fg-3);white-space:nowrap}
.save.ok::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.save.mem::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:1px}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:var(--r);cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--acc-2)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.pri:hover{background:var(--acc-2)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--crit)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px}

/* ---- estructura ---- */
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 57px)}
.rail{border-right:1px solid var(--line);background:var(--surface);padding:14px 10px;display:flex;flex-direction:column;gap:6px}
.rail h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:4px 8px}
.emp{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;text-align:left;background:none;width:100%}
.emp:hover{background:var(--surface-2)}
.emp.on{background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
.emp .av{width:30px;height:30px;border-radius:5px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--acc);flex:none;border:1px solid var(--line)}
.emp .t{min-width:0;flex:1}
.emp .t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp .t span{font-size:11px;color:var(--fg-3)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.crit{background:var(--crit)} .dot.warn{background:var(--warn)} .dot.ok{background:var(--ok)}
.rail .foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line-2)}
.rail .foot .btn{justify-content:flex-start}

.main{min-width:0;padding:20px 24px 60px;display:flex;flex-direction:column;gap:18px}
.crumbs{font-size:12px;color:var(--fg-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--acc);cursor:pointer;text-decoration:none}
.head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.head .tt{flex:1;min-width:220px}
.head h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.head .sub{color:var(--fg-2);font-size:13px;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--fg-2);border:1px solid var(--line-2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.crit{background:var(--crit-soft);color:var(--crit);border-color:transparent}
.chip.acc{background:var(--acc-soft);color:var(--acc);border-color:transparent}

/* ---- pestañas ---- */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.tab{border:none;background:none;padding:9px 12px;cursor:pointer;font-size:13px;color:var(--fg-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.tab .st{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tab .st.ok{background:var(--ok)} .tab .st.crit{background:var(--crit)} .tab .st.warn{background:var(--warn)}

/* ---- KPIs y tabla ---- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kpi .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.kpi .v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .d{font-size:12px;color:var(--fg-2)}
.kpi.warn .v{color:var(--warn)} .kpi.crit .v{color:var(--crit)}
.tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table.grid{border-collapse:collapse;width:100%;font-size:13px}
table.grid th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
table.grid td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.grid tr:last-child td{border-bottom:none}
table.grid tr.click{cursor:pointer}
table.grid tr.click:hover td{background:var(--surface-2)}
table.grid input{width:100%;min-width:8rem;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:6px 8px;font-size:13px}
table.grid input:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
.prog{display:flex;align-items:center;gap:8px;min-width:120px}
.prog .bar{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;border:1px solid var(--line-2)}
.prog .bar i{display:block;height:100%;background:var(--acc)}
.prog .bar i.full{background:var(--ok)}
.prog b{font-size:12px;font-variant-numeric:tabular-nums;width:34px;text-align:right}
.empty{padding:36px 20px;text-align:center;color:var(--fg-2)}
.empty b{display:block;color:var(--fg);font-size:15px;margin-bottom:4px}

/* ---- barra de lista ---- */
.listbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.listbar .sp{flex:1}
.listbar input[type=search],.listbar select{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:7px 10px;font-size:13px;min-width:0}
.listbar input[type=search]{width:220px;max-width:100%}
.listbar input:focus,.listbar select:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}

/* ---- formulario ---- */
.work{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.group{padding:18px 20px;border-bottom:1px solid var(--line-2)}
.group:last-child{border-bottom:none}
.gh{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ltr{width:24px;height:24px;border-radius:4px;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.ltr.ico{background:var(--surface-2);color:var(--acc);border:1px solid var(--line)}
.ltr svg{width:14px;height:14px}
.gh h2{font-size:15px;font-weight:600;flex:1;min-width:160px}
.ref{font-size:11px;color:var(--fg-3);font-family:var(--f-mono)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:12.5px;font-weight:500;color:var(--fg-2)}
.f label .req{color:var(--crit);margin-left:2px}
.f .help{font-size:11.5px;color:var(--fg-3)}
.f input[type=text],.f input[type=search],.f input[type=email],.f input[type=password],.f input[type=date],.f input[type=number],.f select,.f textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:8px 10px;font-size:13.5px}
.f textarea{min-height:68px;resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
.f.missing input,.f.missing select,.f.missing textarea{border-color:color-mix(in srgb,var(--crit) 55%,var(--line))}
.chk{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--bg);cursor:pointer;font-size:13px}
.chk input{margin-top:2px;accent-color:var(--acc);flex:none}
.chk .help{display:block}
.fields.checks{grid-template-columns:repeat(2,minmax(0,1fr))}
.remrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 12px;padding:8px 10px;background:var(--acc-soft);border-radius:5px;font-size:12.5px}
.switch{position:relative;width:34px;height:19px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.15s;cursor:pointer}
.switch span::after{content:'';position:absolute;width:15px;height:15px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:var(--acc)}
.switch input:checked+span::after{transform:translateX(15px)}
.switch input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.derived{white-space:pre-wrap;background:var(--surface-2);border:1px dashed var(--line);border-radius:5px;padding:10px 12px;font-size:13px}
.derived.err{border-color:var(--crit);color:var(--crit)}
.list{display:flex;flex-direction:column;gap:8px}
.lrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.lrow.c2{grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto}
.lrow input,.lrow select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:7px 9px;font-size:13px}
.conv{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px}

/* ---- panel lateral de revisión ---- */
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);display:flex;flex-direction:column;gap:12px}
.side .panel{padding:14px 16px}
.side h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.ring{display:flex;align-items:center;gap:12px}
.ring svg{flex:none}
.ring b{font-size:20px;font-variant-numeric:tabular-nums}
.issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.issues li{font-size:12.5px;padding:6px 8px 6px 10px;border-left:3px solid var(--crit);background:var(--crit-soft);border-radius:0 4px 4px 0;cursor:pointer}
.issues li.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.issues li .tb{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.actions{display:flex;flex-direction:column;gap:6px}
.actions .btn{justify-content:flex-start}
.note{font-size:12px;color:var(--fg-2);background:var(--surface-2);border-radius:5px;padding:8px 10px}
.note.warn{background:var(--warn-soft);color:var(--warn)}

/* ---- modal y vista previa ---- */
.ov{position:fixed;inset:0;background:rgba(10,22,26,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.modal{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);width:min(560px,100%);padding:20px}
.modal h2{font-size:17px;margin-bottom:8px}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.pv{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.paperwrap{overflow:auto;max-width:100%}
.paper{background:#fff;color:#1c2830;width:210mm;max-width:100%;min-height:297mm;padding:18mm 16mm 18mm 24mm;box-shadow:0 2px 20px rgba(0,0,0,.25);position:relative;margin:0 auto}
.paper::before{content:'FIRMA';position:absolute;left:7mm;top:16mm;font-size:6px;letter-spacing:.1em;color:#8a989f}
.paper::after{content:'';position:absolute;left:10mm;top:22mm;bottom:16mm;border-left:.5pt dashed #b9c5ca}
.pv .panel{padding:14px;position:sticky;top:0;display:flex;flex-direction:column;gap:8px}
.pv .panel h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:13px;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}

/* ---- bienvenida ---- */
.welcome{max-width:760px;margin:24px auto;display:flex;flex-direction:column;gap:16px}
.welcome .panel{padding:22px 24px}
.welcome h1{font-size:24px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;background:var(--bg);text-align:left}
.opt:hover{border-color:var(--acc)}
.opt b{display:block;margin-bottom:4px}
.lim{margin:0;padding-left:18px;color:var(--fg-2);font-size:13px;display:flex;flex-direction:column;gap:4px}

/* ---- ayuda ---- */
.hidx{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hidx .chip{cursor:pointer;border:none;font:inherit;font-size:12px}
.hsec{scroll-margin-top:72px}
.hsec .ltr svg{width:14px;height:14px}
.hblk{padding:12px 0;border-top:1px solid var(--line-2);max-width:78ch}
.hblk:first-of-type{border-top:none;padding-top:0}
.hblk-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hblk h3{font-size:14px;font-weight:600;flex:1;min-width:180px}
.hblk p{margin:0 0 8px;color:var(--fg)}
.hblk ul,.hlist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.faq{border-top:1px solid var(--line-2);padding:10px 0;max-width:78ch}
.faq:first-of-type{border-top:none}
.faq summary{cursor:pointer;font-weight:600;font-size:14px}
.faq p{margin:8px 0 0}

/* ---- registro ---- */
.lgrp{border-top:1px solid var(--line-2);padding:8px 14px}
.lgrp:first-child{border-top:none}
.lgrp summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:4px 0}
.lgrp .lq{flex:1;min-width:160px;font-weight:500}
.lgrp summary::-webkit-details-marker{display:none}
.lgrp summary::before{content:'';width:7px;height:7px;border-right:1.6px solid var(--fg-3);border-bottom:1.6px solid var(--fg-3);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:2px}
.lgrp[open] summary::before{transform:rotate(45deg)}
.lgrp table.grid{table-layout:fixed;width:100%}
.lgrp table.grid td{padding:6px 10px;font-size:12.5px;overflow-wrap:anywhere}

/* ---- mapa normativo ---- */
.map td,.map th{font-size:12.5px}
.map td.l{font-family:var(--f-mono);white-space:nowrap;color:var(--acc)}

/* ---- responsive ---- */
@media (max-width:1100px){.work{grid-template-columns:minmax(0,1fr)}.side{position:static}.pv{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{border-right:none;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto;padding:8px 12px}
  .rail h3,.rail .foot{display:none}
  .emp{width:auto;min-width:180px}
  .main{padding:16px 16px 60px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields,.fields.checks,.opts{grid-template-columns:minmax(0,1fr)}
  .lrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .brand span{display:none}
}
@media (max-width:560px){.save{display:none}.brand b{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- impresión ---- */
#print-root{display:none}
@media print{
  @page{size:A4;margin:16mm 16mm 18mm 10mm;
    @bottom-right{content:"Página " counter(page) " de " counter(pages);font-family:'IBM Plex Sans',Arial,sans-serif;font-size:7pt;color:#5a6a73}}
  html,body{background:#fff!important;height:auto}
  body>*:not(#print-root){display:none!important}
  #print-root{display:block!important}
  #print-root .rdoc{padding-left:16mm}
  .pstrip{position:fixed;left:0;top:0;bottom:0;width:8mm;border-right:.5pt dashed #b9c5ca}
  .pstrip span{position:absolute;top:2mm;left:0;font-size:5.5pt;letter-spacing:.1em;color:#8a989f;font-family:Arial,sans-serif}
}