/* ============================================================
   NÓMINA LAB — capa "panel SAP + pizarra" (Fase 1: shell + home)
   Se carga DESPUÉS de styles.css. Clases propias (prefijo app-/db-)
   para no chocar con las clases de la app (.btn, .panel, .nom, .doc...).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
:root{
  --sap-navy:#15264a;--sap-blue:#1667cf;--sap-blue-d:#0f4da0;--sap-blue-soft:#e9f1fc;
  --sap-ink:#20293a;--sap-mut:#6c7686;--sap-line:#e4e8ee;--sap-line2:#eef1f5;--sap-bg:#f2f4f7;
  --mk-green:#2f9e57;--mk-red:#d0473b;--mk-blue:#1f6fd0;--mk-black:#343b45;--stamp:#c0392b;--sap-amber:#e59a2a;
  --mano:"Caveat","Segoe Print","Bradley Hand",cursive;
}
/* ---- Tipografía: Poppins (títulos/nav/botones) + Inter (texto) + Caveat (pizarra) ---- */
body{font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.h-view,.lab-h,.db-lft h1,.db-carrera .hd h3,.instr .cab h2,.folder h3{font-family:'Poppins',sans-serif}
.btn,.db-btn,.appside a,.appbar .tm a,.appbar .bd b,.opcion,.tabs .tab,.db-cont,.db-link,.chip-concepto{font-family:'Poppins',sans-serif}
.appbar .bd b{font-weight:700;letter-spacing:-.03em;color:#fff}
.lg-l{color:#4da3ff}
h1,.db-lft h1{font-weight:800}
.db-q h4,.db-wbt{font-family:var(--mano)}
/* fondo claro (antes verde petróleo) */
body{background:var(--sap-bg);font-size:14px}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- textos que eran claros sobre verde -> oscuros sobre claro ---- */
.h-view{color:var(--sap-ink)}
.sub-view{color:var(--sap-mut)}
.back{color:var(--sap-blue)}
.lf-bar{color:var(--sap-mut)}
.leyenda{color:var(--sap-mut)}

/* ---------- BARRA SUPERIOR ---------- */
.appbar{height:56px;background:var(--sap-navy);color:#eaf0fa;display:flex;align-items:center;gap:26px;padding:0 20px;position:sticky;top:0;z-index:40}
.appbar .bd{display:flex;align-items:center;gap:11px;cursor:pointer}
.appbar .bd .mk{width:34px;height:34px;border-radius:7px;background:#fff;color:var(--sap-navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.appbar .bd b{font-size:16px;font-weight:700;color:#fff}
.appbar .bd small{display:block;font-size:9.5px;letter-spacing:.16em;color:#9fb2d4;margin-top:1px;text-transform:uppercase}
.appbar .tm{display:flex;gap:22px;margin-left:12px}
.appbar .tm a{font-size:13.5px;color:#c7d4ea;cursor:pointer}.appbar .tm a:hover{color:#fff}
.appbar .tr{margin-left:auto;display:flex;align-items:center;gap:16px}
.appbar .usr{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#dbe6f7}
.appbar .usr b{color:#fff;font-weight:600}
.appbar .usr .pb{width:80px;height:6px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.appbar .usr .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--sap-amber),#f0b24d)}
.appbar .ti{display:flex;align-items:center;gap:15px;color:#c7d4ea}
.appbar .ti .b{position:relative;cursor:pointer}.appbar .ti .b:hover{color:#fff}
.appbar .ti .bdg{position:absolute;top:-6px;right:-7px;background:#e0483d;color:#fff;font-size:9px;font-weight:700;border-radius:9px;padding:1px 5px;line-height:1.3}
.appbar .av{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #35507f}

/* ---------- LAYOUT + MENÚ LATERAL ---------- */
.applayout{display:flex;align-items:flex-start}
.appside{width:212px;flex:0 0 212px;background:#fff;border-right:1px solid var(--sap-line);min-height:calc(100vh - 56px);position:sticky;top:56px;padding:14px 0 20px}
.appside a{display:flex;align-items:center;gap:12px;padding:10px 13px;margin:1px 10px;border-radius:8px;color:#4b5568;font-size:14px;font-weight:500;cursor:pointer}
.appside a:hover{background:#f1f4f8;color:var(--sap-ink)}
.appside a.act{background:var(--sap-blue);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(22,103,207,.28)}
.appside a.act .ico{color:#fff}
.appside .reto{margin:14px 14px 0;background:#f7f9fc;border:1px solid var(--sap-line);border-radius:10px;padding:14px}
.appside .reto .lb{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sap-mut)}
.appside .reto h5{font-size:13.5px;margin:5px 0 10px;color:var(--sap-ink)}
.appside .reto .rr{display:flex;align-items:center;gap:12px}
.appside .reto .xp{font-size:12px;color:var(--sap-blue);font-weight:700;background:var(--sap-blue-soft);padding:3px 8px;border-radius:6px}
.ring{--p:66;width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--sap-blue) calc(var(--p)*1%),#e3e9f1 0);display:flex;align-items:center;justify-content:center}
.ring::after{content:attr(data-t);width:38px;height:38px;background:#f7f9fc;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sap-ink)}

#app{flex:1;min-width:0}

/* ---------- DASHBOARD (home) ---------- */
.dash{padding:18px 20px 44px}
.lab-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sap-mut);font-weight:700}
.db-panel{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}

/* pizarrita: panel con toque de rotulador */
.db-mini{background:#fff;border:1px solid var(--sap-line);border-radius:10px;padding:16px 18px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.db-mini h4{font-size:13px;font-weight:700;margin:0 0 12px;display:inline-block;position:relative}
.db-mini h4::after{content:"";position:absolute;left:-1px;right:-3px;bottom:-4px;height:3px;border-radius:3px;background:var(--acc,var(--mk-blue));opacity:.75}

/* HERO + PIZARRA */
.db-hero{display:grid;grid-template-columns:340px 1fr;overflow:hidden}
.db-lft{padding:30px 28px}
.db-kick{color:var(--sap-blue);font-weight:600;font-size:12.5px;margin-bottom:14px}
.db-lft h1{font-size:42px;line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--sap-ink);margin:0}
.db-lft h1 em{font-style:normal;color:var(--sap-blue)}
.db-lft p{color:var(--sap-mut);font-size:14.5px;line-height:1.55;margin:16px 0 0;max-width:34ch}
.db-acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.db-btn{font-weight:600;font-size:14px;padding:11px 18px;border-radius:7px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.db-btn.pri{background:var(--sap-blue);color:#fff}.db-btn.pri:hover{background:var(--sap-blue-d)}
.db-btn.sec{background:#fff;color:var(--sap-ink);border:1px solid #c9d3df}.db-btn.sec:hover{border-color:#9fb0c2}
.db-btn.err{background:var(--sap-blue);color:#fff}
.db-link{color:var(--sap-blue);font-weight:600;font-size:14px;cursor:pointer}
.db-cont{margin-top:22px;font-size:13px;color:var(--sap-mut);border-top:1px dashed var(--sap-line);padding-top:14px;cursor:pointer}
.db-cont b{color:var(--sap-ink)}

.db-wb{position:relative;background:#fff;padding:28px 30px 0;min-height:540px;display:flex;flex-direction:column}
.db-wbt{font-family:var(--mano);color:var(--mk-blue);font-size:38px;text-align:center;letter-spacing:.03em;text-transform:uppercase;position:relative;margin-bottom:14px}
.db-wbt::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;width:330px;height:5px;background:var(--mk-blue);border-radius:3px;opacity:.85}
.db-wbb{flex:1;display:grid;grid-template-columns:minmax(210px,300px) minmax(340px,500px) minmax(190px,270px);
  gap:clamp(16px,2.6vw,48px);justify-content:center;align-items:center;padding:10px 0}
.db-q{font-family:var(--mano);line-height:1.4;margin-bottom:34px;position:relative}
.db-q h4{font-size:27px;margin:0 0 4px}
.db-q ul{margin:0;padding-left:20px;font-size:19px;color:#3f3f3f}
.db-q.g h4{color:var(--mk-green)}.db-q.r h4{color:var(--mk-red)}.db-q.b h4{color:var(--mk-blue)}
.db-q .arw{position:absolute;right:-40px;top:10px;transform:scale(1.45)}
.db-nom{position:relative;background:#fff;border:1px solid #dbe0e7;border-radius:4px;box-shadow:0 14px 34px rgba(20,40,80,.16);padding:22px 26px 24px;max-width:500px;margin:0 auto;transform:rotate(-.6deg)}
.db-pin{position:absolute;top:-14px;right:30px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4d9bff,#1667cf);box-shadow:0 4px 7px rgba(0,0,0,.32)}
.db-nom .nh{display:flex;justify-content:space-between;font-size:13px;color:var(--sap-mut)}
.db-nom .emp{font-weight:700;color:var(--sap-ink);font-size:16px}
.db-nom .sb{font-size:13px;color:var(--sap-mut);margin:3px 0 10px;border-bottom:1px solid var(--sap-line);padding-bottom:9px}
.db-nom .sc{font-size:12px;letter-spacing:.08em;color:var(--sap-mut);text-transform:uppercase;margin:12px 0 5px}
.db-nrw{display:flex;justify-content:space-between;font-size:15.5px;padding:2.5px 0}
.db-nrw.t{font-weight:700;border-top:1px solid var(--sap-line);margin-top:4px;padding-top:6px}
.db-neto{margin-top:13px;border-top:2px solid var(--sap-ink);padding-top:11px;display:flex;justify-content:space-between;align-items:center}
.db-neto b{font-size:16px}.db-neto .v{color:var(--sap-blue);font-weight:800;font-size:28px}
.db-note{font-family:var(--mano);line-height:1.25}
.db-note.rev{color:var(--mk-red);font-size:23px;text-transform:uppercase;text-align:center;border:2.5px solid var(--mk-red);border-radius:40% 60% 55% 45%/55% 45% 60% 45%;padding:14px 16px;margin-bottom:30px}
.db-note.irpf{color:var(--mk-black);font-size:21px;margin-bottom:30px}
.db-note.irpf u{text-decoration:none;border-bottom:2.5px solid var(--mk-black)}
.db-note.lleg{color:var(--mk-green);font-size:21px}
.db-tray{margin:10px -30px 0;background:#eef1f5;border-top:1px solid var(--sap-line);height:36px;display:flex;align-items:center;gap:14px;padding:0 34px}
.db-mkr{width:84px;height:14px;border-radius:3px;position:relative}
.db-mkr::after{content:"";position:absolute;right:-8px;top:1px;width:9px;height:12px;background:#cfd6de;border-radius:2px}
.db-mkr.k{background:#343b45}.db-mkr.b{background:#1f6fd0}.db-mkr.g{background:#2f9e57}.db-mkr.r{background:#d0473b}

/* FILA 2 */
.db-row2{display:grid;grid-template-columns:1fr 316px;gap:18px;margin-top:18px}
.db-stack{display:flex;flex-direction:column;gap:18px}
.db-exp{padding:22px 24px;position:relative;background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.db-exp .num{font-size:12px;color:var(--sap-mut);margin-top:6px}
.db-exp h3{font-size:22px;font-weight:800;margin:5px 0 3px;color:var(--sap-ink)}
.db-exp .meta{font-size:12.5px;color:var(--sap-mut);margin-bottom:14px}
.db-exp .li{display:flex;gap:9px;font-size:14.5px;margin:5px 0;align-items:flex-start;color:var(--sap-ink)}
.db-exp .li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mk-red);margin-top:7px;flex:0 0 auto}
.db-exp .reto{font-weight:700;color:#a3372a}
.db-exp .stamp{position:absolute;top:26px;right:170px;color:var(--stamp);border:2px solid var(--stamp);border-radius:4px;font-weight:800;font-size:13px;letter-spacing:.1em;padding:6px 12px;transform:rotate(-7deg)}
.db-exp .go{position:absolute;bottom:26px;right:24px}
.db-act .it{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--sap-line2);color:#3d4656}
.db-act .it:last-of-type{border:none}.db-act .it .tm{color:var(--sap-mut);font-size:12px}
.db-more{color:var(--sap-blue);font-weight:600;font-size:13px;margin-top:10px;display:inline-block;cursor:pointer}
.db-coll{display:flex;gap:14px;align-items:center}
.db-coll .ic{width:40px;height:40px;border-radius:8px;background:var(--sap-blue-soft);color:var(--sap-blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.db-coll p{margin:0;color:var(--sap-mut);font-size:12.5px}
.db-tip .q2{font-style:italic;color:#3d4656;font-size:13.5px;line-height:1.5;border-left:3px solid var(--sap-amber);padding-left:12px;margin:0}

/* PROGRESIÓN */
.db-carrera{margin-top:18px;padding:22px 26px;background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.db-carrera .hd{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.db-carrera .hd h3{font-size:17px;font-weight:800;color:var(--sap-ink)}
.db-track{display:flex;align-items:flex-start}
.db-st{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:90px}
.db-st::after{content:"";position:absolute;top:22px;left:50%;width:100%;height:3px;background:#e1e6ee;z-index:0}
.db-st.done::after{background:var(--mk-green)}
.db-st:last-child::after{display:none}
.db-st .nd{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;border:2px solid #d3dae4;background:#fff;color:#8a94a4;position:relative;z-index:1}
.db-st.done .nd{border-color:var(--mk-green);color:var(--mk-green)}
.db-st.now .nd{border-color:var(--sap-blue);background:var(--sap-blue);color:#fff;box-shadow:0 0 0 5px var(--sap-blue-soft)}
.db-st .tl{font-size:13px;font-weight:600;margin-top:10px;color:var(--sap-ink);max-width:130px}
.db-st.lock .tl{color:#9aa3b2;font-weight:500}
.db-st .stt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;color:var(--sap-mut);font-weight:700}
.db-st.done .stt{color:var(--mk-green)}.db-st.now .stt{color:var(--sap-blue)}

@media(max-width:1180px){.db-hero{grid-template-columns:1fr}.db-wb{border-top:1px solid var(--sap-line)}.db-row2{grid-template-columns:1fr}}
@media(max-width:900px){.appside{display:none}}

/* ============================================================
   FASE 2 — componentes compartidos + nómina interactiva -> SAP/pizarra
   (overrides sobre styles.css; se cargan después)
   ============================================================ */
/* botones planos SAP (sin sombra de offset ni translate) */
.btn{font-weight:600;font-size:14px;padding:10px 18px;border-radius:7px;border:1px solid transparent;box-shadow:none;background:var(--sap-blue);color:#fff}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:none;box-shadow:none}
.btn.amber{background:var(--sap-blue);border-color:var(--sap-blue);color:#fff}
.btn.amber:hover{background:var(--sap-blue-d)}
.btn.verde{background:var(--mk-green);border-color:var(--mk-green);color:#fff}
.btn.coral{background:var(--mk-red);border-color:var(--mk-red);color:#fff}
.btn.ghost{background:#fff;color:var(--sap-ink);border:1px solid #c9d3df}
.btn.ghost:hover{background:#f4f6f9;border-color:#9fb0c2}
.btn.sm{font-size:13px;padding:8px 13px;border-radius:6px}
.btn:disabled{opacity:.5}

/* paneles y tarjetas */
.panel,.card{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.caso-card{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.caso-card .cab{background:#f7f9fc;border-bottom:1px solid var(--sap-line)}
.caso-card .num{color:var(--sap-mut)}
.caso-card .cla{color:var(--sap-ink)}

/* callouts como notas de pizarra */
.callout{background:var(--sap-blue-soft);border-left:3px solid var(--sap-blue);border-radius:0 8px 8px 0;color:var(--sap-ink)}
.callout.warn{background:#fdece9;border-color:var(--mk-red)}

/* Marichei -> tarjeta pizarra */
.marichei{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.marichei img{border-color:var(--sap-blue);background:#eef2f7}
.marichei .globo b{color:var(--sap-blue-d)}
.marichei .globo p{color:var(--sap-ink)}

/* opciones de decisión */
.opcion{background:#fff;border:1px solid #d3dae4;border-radius:8px;color:var(--sap-ink)}
.opcion:hover{border-color:var(--sap-blue);background:var(--sap-blue-soft)}
.opcion.ok{border-color:var(--mk-green);background:#e7f4ec}
.opcion.mal{border-color:var(--mk-red);background:#fdecea}

/* NÓMINA INTERACTIVA -> documento blanco limpio (objeto de estudio) */
.doc{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 2px 10px rgba(20,40,80,.07);background-image:none;color:var(--sap-ink)}
.doc .tape{display:none}
.nom th,.nom td{border-bottom:1px solid var(--sap-line2)}
.nom .seccion td{background:#f7f9fc;color:var(--sap-mut);border-bottom:1px solid var(--sap-line);letter-spacing:.06em}
.nom tr.clic:hover td{background:var(--sap-blue-soft)}
.nom tr.total td{border-top:2px solid var(--sap-ink)}
.can-why{border-bottom:1px dashed var(--sap-blue)}
.can-why:hover{background:var(--sap-blue-soft)}
.hint-click{color:var(--sap-mut)}
.pill.ley{color:var(--sap-blue)}.pill.dato{color:var(--mk-red)}
.pill.convenio{color:#9a6a12}.pill.contrato{color:var(--mk-green)}

/* cajón ¿Por qué? / concepto */
.drawer{background:#fff}
.drawer h3{color:var(--sap-ink)}
.drawer .cerrar{color:var(--sap-mut)}
.pasos{border-left:3px solid var(--sap-blue)}
.paso .lab{color:var(--sap-mut)}.paso .val{color:var(--sap-ink)}
.formula{background:#f7f9fc;border:1px solid var(--sap-line);color:var(--sap-ink)}
.fuente{color:var(--sap-mut)}
.tabs{border-bottom:1px solid var(--sap-line)}
.tabs .tab{color:var(--sap-mut)}
.tabs .tab:hover{background:#f4f6f9;color:var(--sap-ink)}
.tabs .tab.on{color:var(--sap-ink);border-bottom-color:var(--sap-blue)}
.tabs .tab[data-t="practica"]{background:var(--sap-blue-soft);color:var(--sap-blue-d)}
.tabs .tab[data-t="practica"].on{border-bottom-color:var(--sap-blue)}
.ejlist li{color:var(--sap-ink)}

/* chips de concepto */
.chip-concepto{background:#fff;border:1px solid #d3dae4;border-radius:8px;box-shadow:none}
.chip-concepto:hover{border-color:var(--sap-blue)}
.chip-concepto.sel{background:var(--sap-blue);color:#fff;border-color:var(--sap-blue)}
.pr-badge{background:var(--sap-blue);color:#fff}

/* barras de progreso / insignias */
.bar i{background:var(--sap-blue)}
.badge.on{background:var(--sap-blue-soft);border-color:var(--sap-blue)}
.xp-chip{background:var(--sap-blue-soft);border-color:var(--sap-blue);color:var(--sap-blue-d)}

/* ============================================================
   FASE 3 — pulir modos concretos (biblioteca, bruto/neto, arrastra)
   ============================================================ */
/* biblioteca / tarjetas .modo -> SAP con barra de rotulador */
.modo{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.modo:hover{box-shadow:0 6px 16px rgba(20,40,80,.10);transform:translateY(-2px)}
.modo::before{width:5px}
.modo h3{color:var(--sap-ink)}
.modo p{color:var(--sap-mut)}
.modo .tagm{border-radius:5px}

/* bruto vs neto -> pizarra limpia */
.flujo .barra{background:#fff;border:1px solid var(--sap-line);border-radius:10px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.flujo .barra .et{color:var(--sap-ink)}
.flujo .barra .ci{color:var(--sap-ink)}
.flujo .via{border:1px solid var(--sap-line);border-radius:6px}
.sw{border-radius:3px}

/* arrastra el concepto -> SAP */
.dz{background:#fff;border:2px dashed #c9d3df;border-radius:10px}
.dz.over{border-color:var(--sap-blue);background:var(--sap-blue-soft)}
.dz h4{color:var(--sap-ink)}.dz small{color:var(--sap-mut)}
.ficha{background:#fff;border:1px solid #d3dae4;border-radius:8px;box-shadow:0 1px 2px rgba(20,40,80,.05)}
.ficha.ok{border-color:var(--mk-green);background:#e7f4ec}
.ficha.mal{border-color:var(--mk-red);background:#fdecea}

/* lectura fácil */
.lf-card{border:1px solid var(--sap-line);box-shadow:0 1px 2px rgba(20,40,80,.04)}

/* progreso / detective */
.skill .bar{background:#eef1f5;border-color:var(--sap-line)}
.suspect.found{background:#e7f4ec;outline-color:var(--mk-green)}

/* ---- pie con legal/contacto ---- */
.appfoot{background:#fff;border-top:1px solid var(--sap-line);padding:16px 20px;margin-left:212px}
.appfoot .foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--sap-mut)}
.appfoot nav{display:flex;gap:18px;flex-wrap:wrap}
.appfoot nav a{color:var(--sap-blue);font-weight:600}
.appbar .bd .mk img{display:block}
@media(max-width:900px){.appfoot{margin-left:0}}