/* ===================== base.css — núcleo de shell compartido =====================
     Extraído verbatim de css/styles.css (Task 2 · separación de módulos).
     Reglas de reporting/RRHH específicas permanecen en css/styles.css (se reparten
     en tasks posteriores). Es correcto que haya solape leve: el objetivo es que una
     página de shell estilada solo con base.css se vea correctamente. */

  :root{
    --bg:#eef1f4; --panel:#ffffff; --ink:#1e2a36; --muted:#76838f;
    --line:#e7ebf0; --brand:#15a07a; --brand-d:#0f8062; --brand-soft:#e6f4ef; --brand-ink:#0d7053;
    --pos:#1f9d6b; --neg:#dd5b4d; --warn:#c79233; --blue:#3168c4; --blue-soft:#e9f1fb;
    --shadow:0 1px 2px rgba(16,38,64,.04),0 6px 18px rgba(16,38,64,.06);
    --shadow-sm:0 1px 2px rgba(16,38,64,.05);
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:13px}
  svg{display:block}

  /* ===================== Shell ===================== */
  .app{display:flex;min-height:100vh}
  .main{flex:1;min-width:0}
  /* nivel 3 = pestañas horizontales en el borde superior */
  /* .htabs vive ahora DENTRO de .page-head (misma fila que el título — ver
     más abajo), a la derecha: ya no es su propia barra con fondo/sticky
     propios, eso lo lleva .page-head. flex:1 le da el ancho sobrante junto
     al título; si no caben todas las pestañas, bajan a su propia línea
     (flex-wrap) dentro de ese mismo hueco, igual que ya hacían solas. */
  .htabs{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;flex:1 1 260px;justify-content:flex-end}
  .htabs:empty{display:none}
  .htabs::-webkit-scrollbar{height:6px}
  .htab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;flex:0 0 auto;text-decoration:none}
  .htab:hover{background:#f4f6f8;color:var(--ink)}
  .htab.active{background:var(--brand-soft);color:var(--brand-ink)}
  .htabs-empty{font-size:12px;color:var(--muted);padding:6px 10px}
  body.dark .htab:hover{background:#232c37}

  /* ===================== Cabecera de página ===================== */
  /* Título (izquierda) + pestañas .htabs (derecha) + acciones propias de la
     app si las tiene (más a la derecha, ver .page-actions): una sola fila
     sticky justo bajo el topbar, en vez de dos filas separadas. El 'top'
     real (altura exacta del topbar, que puede variar, p.ej. con el aviso de
     simulación) lo ajusta ajustarPageHeadTop() en shell.js. margin negativo +
     padding: el fondo sticky sangra hasta el borde de .content (arriba Y a
     los lados) — el margin-top:-8px cancela el padding-top de .content, si
     no se veía una franja gris (el fondo de .content, no blanco) entre la
     línea de .navcol-h (col1/col2, blanca desde el borde) y donde empezaba
     el blanco de .page-head, 8px más abajo — no encajaban como una sola
     franja. padding-top sube esos mismos 8px para que el título no se mueva
     de sitio, solo el fondo/borde. */
  .page-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 16px;position:sticky;top:56px;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);margin:-8px -24px 18px;padding:20px 24px 12px}
  .page-title{flex:0 1 auto;min-width:0}
  .page-title h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.4px}
  .page-sub{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
  .page-actions{display:flex;gap:10px;flex:0 0 auto}
  /* navegación en cascada de 3 columnas (colapsables / fijas) */
  .navcol{width:200px;flex:0 0 auto;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .15s}
  .navcol.collapsed{width:40px}
  /* height fija (no min-height): igual a .topbar, para que #col1/#col2/#topbar
     lean como una sola barra continua en la parte de arriba. */
  .navcol-h{display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--line);height:56px}
  .navcol-h .logo.sm{width:28px;height:28px;border-radius:8px;font-size:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
  .navcol-title{flex:1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
  .navcol-tog{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-size:14px;line-height:1;width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center}
  .navcol-tog:hover{background:#f4f6f8;color:var(--ink)}
  .navcol.collapsed .navcol-title,.navcol.collapsed .navcol-foot,.navcol.collapsed .logo.sm{display:none}
  .navcol.collapsed .navcol-h{padding:0 6px;justify-content:center}
  .navcol.collapsed .navcol-tog{transform:rotate(180deg)}
  /* #col2Body no tiene entradas "pinned" (solo #col1 las usa, p.ej. Configuración)
     — sigue ocultándose entera, como antes. */
  #col2.collapsed .navcol-body{display:none}
  /* #col1Body: sus entradas "pinned" se quedan visibles, solo con el icono —
     contraída (p.ej. mientras se ve el launcher, que fuerza este estado) no
     debe desaparecer todo rastro de que ahí hay algo (Configuración). */
  #col1.collapsed .navcol-body{padding:6px 4px}
  #col1.collapsed .navcol-body .nav-it:not(.nav-it-pinned){display:none}
  #col1.collapsed .navcol-body .nav-it-pinned{justify-content:center;padding:9px 6px}
  #col1.collapsed .navcol-body .nav-it-pinned .lbl,#col1.collapsed .navcol-body .nav-it-pinned .chev{display:none}
  .navcol-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:3px}
  /* Apps con pinLast (p.ej. "Configuración"): la primera entrada pinned se empuja
     al fondo de #col1Body (flex-column) y lleva una línea separadora, para que
     quede claramente aparte de las apps normales aunque haya pocas encima. */
  .nav-it-pinned-first{margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
  .navcol-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
  .nav-it{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;white-space:normal;line-height:1.25;text-decoration:none}
  .nav-it svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nav-it .lbl{flex:1;min-width:0}
  .nav-empty{padding:18px 12px;text-align:center;font-size:12px;color:var(--muted);line-height:1.6}
  .nav-empty span{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:#eef1f4;border-radius:6px;padding:2px 6px}
  body.dark .nav-empty span{background:#222b36}
  .nav-it:hover{background:#f4f6f8}
  .nav-it.sel{background:var(--brand-soft);color:var(--brand-ink)}
  .nav-it.sel svg{stroke:var(--brand)}
  .nav-it.disabled{color:var(--muted);opacity:.6;cursor:default}
  .nav-it.disabled:hover{background:transparent}
  .nav-it .chev{margin-left:auto;font-size:11px;color:var(--muted);flex:0 0 auto}
  .nav-it .soon{margin-left:auto;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);background:#eef1f4;border-radius:6px;padding:2px 5px;flex:0 0 auto}
  body.dark .nav-it:hover,body.dark .navcol-tog:hover{background:#232c37}
  body.dark .nav-it .soon{background:#222b36}
  .nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#fdecea;color:var(--neg);font-size:10.5px;font-weight:800;display:none;align-items:center;justify-content:center}
  .nav-badge.show{display:inline-flex}

  .main{display:flex;flex-direction:column;min-width:0}
  /* height fija, igual a .navcol-h (col1/col2) — misma barra visual arriba de
     las tres columnas. ajustarPageHeadTop() en shell.js sigue leyendo esta
     altura real (offsetHeight) en vez de asumirla, por si algún día cambia. */
  .topbar{display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:30;background:var(--bg);height:56px}
  .crumbs{font-size:13px;color:var(--muted)} .crumbs b{color:var(--ink);font-weight:700}
  /* .crumb-link/.crumb-sep/.crumb-cur (crumbHtml() en shell.js) ya NO van
     escopados bajo .crumbs: cuando una app no tiene #crumbTitle en su topbar
     (RR.HH.), la misma ruta navegable se pinta dentro de #pageSub en vez de
     .crumbs — necesitan verse igual en los dos sitios. */
  .crumb-link{cursor:pointer}
  .crumb-link:hover{text-decoration:underline;color:var(--brand-ink)}
  .crumb-sep{color:var(--muted);font-weight:400}
  .crumb-cur{color:var(--ink)}

  /* ===================== Buscador global (#topbarSearch) ===================== */
  /* Centrado sobre .topbar (que ya es position:sticky — también vale como
     contenedor de posicionamiento, no hace falta position:relative aparte),
     no metido en el flujo flex entre lo que quede a la izquierda y
     .tb-actions — mismo criterio visual que el buscador de Microsoft 365. */
  .topbar-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,38vw)}
  #topbarSearchInput{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:13px;padding:8px 12px}
  #topbarSearchInput::placeholder{color:var(--muted)}
  .topbar-search-results{position:absolute;top:calc(100% + 6px);left:0;width:100%;max-height:60vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:60;padding:6px}
  .topbar-search-results[hidden]{display:none}
  .topbar-search-item{padding:9px 10px;border-radius:8px;font-size:12.5px;cursor:pointer;color:var(--muted)}
  .topbar-search-item:hover{background:#f4f6f8}
  body.dark .topbar-search-item:hover{background:#232c37}
  .topbar-search-empty{padding:9px 10px;font-size:12.5px;color:var(--muted)}
  @media(max-width:900px){.topbar-search{width:min(300px,50vw)}}

  .tb-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
  #langSel{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:13px;padding:6px 8px;cursor:pointer}
  .tb-toggle{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;cursor:pointer}
  .tb-toggle span{width:28px;height:24px;display:grid;place-items:center;border-radius:7px}
  .tb-toggle span svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.8}
  .tb-toggle span.on{background:#fdf3df}.tb-toggle span.on svg{stroke:var(--warn)}
  .tb-ic{position:relative;width:36px;height:36px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
  .tb-ic svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linejoin:round}
  .tb-ic.bell::after{content:'';position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--neg)}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 0 0 2px var(--panel),0 0 0 3px transparent;transition:box-shadow .15s,transform .15s}
  .avatar:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--brand)}
  .user-menu-wrap{position:relative}
  .user-menu{position:absolute;top:46px;right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:0;min-width:236px;z-index:60;overflow:hidden;animation:userMenuIn .15s ease}
  @keyframes userMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .user-menu[hidden]{display:none}
  /* Cabecera tipo "tarjeta de perfil": avatar grande + nombre + rol juntos,
     sobre un fondo ligeramente distinto del resto del menú. */
  .user-menu-cabecera{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--bg)}
  .user-menu-avatar-grande{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto}
  .user-menu-identidad{min-width:0}
  .user-menu-nombre{font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.3;word-break:break-all}
  .user-menu-rol{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--line);color:var(--muted)}
  .user-menu-rol-admin{background:var(--brand-soft);color:var(--brand-ink)}
  .user-menu-rol:empty{display:none}
  .user-menu-div{height:1px;background:var(--line)}
  .user-menu-acciones{padding:6px}
  .user-menu-salir,.user-menu-simular{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;text-align:left;transition:background .12s}
  .user-menu-salir{color:var(--neg)}
  .user-menu-simular{color:var(--warn)}
  .user-menu-salir:hover,.user-menu-simular:hover{background:var(--bg)}
  .user-menu-simular[hidden]{display:none}
  .user-menu-salir svg,.user-menu-simular svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:0 0 auto}
  /* Aviso fijo mientras dura la simulación — imposible de confundir con la
     sesión real, visible desde cualquier vista. Altura fija (no al gusto del
     contenido) porque body.simulando-no-admin necesita saber cuánto empujar
     hacia abajo — si no, taparía la parte de arriba de .topbar (sticky top:0,
     no sabe nada de este banner). */
  .simulacion-banner{position:fixed;top:0;left:0;right:0;z-index:9998;height:36px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px;background:var(--warn);color:#241c04;font-size:12.5px;font-weight:700}
  .simulacion-banner button{border:1px solid #241c04;background:transparent;color:inherit;font-weight:700;font-size:12px;padding:3px 10px;border-radius:7px;cursor:pointer}
  .simulacion-banner button:hover{background:rgba(0,0,0,.08)}
  body.simulando-no-admin{padding-top:36px}

  .content{padding:8px 24px 40px}

  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:11px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(21,160,122,.35)}
  .btn:hover{background:var(--brand-d)}
  .btn svg{width:15px;height:15px;fill:currentColor;stroke:none}
  .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none}
  .btn.ghost svg{fill:none;stroke:currentColor;stroke-width:1.9}
  .btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn.mini{padding:6px 12px;font-size:12px;border-radius:9px}
  .btn.danger{background:var(--neg);box-shadow:0 1px 2px rgba(221,91,77,.35)}
  .btn.danger:hover{filter:brightness(.92)}

  /* ===================== KPI genérico ===================== */
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);position:relative}
  .kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
  .kpi .val{font-size:23px;font-weight:800;margin-top:6px;color:var(--ink)}
  .kpi .val small{font-size:11px;font-weight:600;color:var(--muted)}
  .kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}

  /* ===================== Panels & tables ===================== */
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
  .panel .phead{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
  .panel .phead h3{margin:0;font-size:16px;font-weight:700}
  .panel .phead .note{font-size:12px;color:var(--muted)}
  /* Colapsar tarjetas con tabla (no las KPI) para reducir scroll vertical */
  .pcoll-tog{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .15s,color .15s}
  .pcoll-tog:hover{color:var(--brand-ink);border-color:var(--brand)}
  .panel.pcoll .pcoll-tog{transform:rotate(-90deg)}
  .panel.pcoll .phead{border-bottom:none}
  .panel.pcoll > *:not(.phead){display:none}
  .panelpad{padding:16px 18px}
  /* Tarjeta desplegada a pantalla completa */
  .panel.panel-full{position:fixed;inset:0;z-index:300;margin:0;border:none;border-radius:0;box-shadow:none;
    display:flex;flex-direction:column;background:var(--panel)}
  .panel.panel-full .phead{flex:0 0 auto}
  .panel.panel-full .panelpad{flex:1 1 auto;min-height:0;display:flex;padding:0 16px 16px}
  body.has-full{overflow:hidden}

  /* ===================== Guía / Wiki de usuario (#nav-l2-guia) ===================== */
  /* Motor genérico (GuiaContenido.register() + <app>/js/views/guia.js) que ya
     usan RR.HH. y Hub — antes esta MISMA hoja de estilos vivía duplicada en
     rrhh.css Y en portal.css (portal.css la traía porque nunca carga
     rrhh.css) — consolidada aquí, fuente única para las tres apps. */
  #guiaWrap{display:flex;align-items:flex-start;gap:0}
  #guiaMenu{flex:0 0 260px;position:sticky;align-self:flex-start;overflow:auto;padding:12px 14px}
  #guiaMenuHead{margin-bottom:10px}
  #guiaBuscador{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:12.5px;padding:8px 10px}
  #guiaToc{display:flex;flex-direction:column;gap:4px}
  .guia-grupo{margin-bottom:10px}
  .guia-grupo-tit{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px 2px}
  .guia-link{display:block;padding:6px 10px;border-radius:8px;color:var(--ink);font-size:12.5px;text-decoration:none;line-height:1.3}
  .guia-link:hover{background:#f4f6f8}
  .guia-link.activa{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
  body.dark .guia-link:hover{background:#232c37}
  #guiaDoc{flex:1;min-width:0;border-left:1px solid var(--line);padding:8px 28px 40px}
  #guiaDocTitulo{margin:4px 0 14px;font-size:20px}
  #guiaDocCuerpo{font-size:13.5px;line-height:1.65;max-width:820px}
  #guiaDocCuerpo h3{margin:22px 0 6px;font-size:15px;color:var(--brand-ink)}
  #guiaDocCuerpo p{margin:6px 0}
  #guiaDocCuerpo ul,#guiaDocCuerpo ol{margin:6px 0 6px 20px}
  #guiaDocCuerpo code{background:#f4f6f8;border-radius:5px;padding:1px 5px;font-size:12px}
  body.dark #guiaDocCuerpo code{background:#232c37}
  #guiaDocCuerpo table{border-collapse:collapse;margin:8px 0;font-size:12.5px}
  #guiaDocCuerpo th,#guiaDocCuerpo td{border:1px solid var(--line);padding:5px 9px;text-align:left}
  #guiaDocCuerpo a[data-guia]{color:var(--brand-ink);text-decoration:underline;cursor:pointer}
  #guiaNav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
  @media (max-width:860px){
    #guiaWrap{flex-direction:column}
    #guiaMenu{position:static;flex-basis:auto;width:100%;max-height:none}
    #guiaDoc{border-left:none;border-top:1px solid var(--line);padding:12px}
  }

  /* ===================== Tema oscuro ===================== */
  body.dark{
    --bg:#0f141b; --panel:#1a212b; --ink:#e7edf3; --muted:#8b97a4; --line:#2a323d;
    --brand:#1bb189; --brand-d:#159372; --brand-soft:#16302a; --brand-ink:#62d3ad;
    --blue:#5b8def; --blue-soft:#1b2740; --warn:#d6a447; --neg:#e9695b; --pos:#3bbd86;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
  body.dark .nav-badge{background:#3a1f1d}
  body.dark .tb-toggle span.on{background:#26303d}
  body.dark .tb-toggle span.on svg{stroke:#9fb3c8}

  @media(max-width:760px){.navcol{width:150px}.navcol#col2{display:none}}