:root{
    --ink:#232629; --ink-soft:#4a4f55; --muted:#6b7178; --faint:#9aa0a6;
    --line:#e6e8ea; --line-soft:#eef0f1; --canvas:#f3f4f5; --surface:#ffffff;
    --brand:#113929; --brand-deep:#0d2e20; --brand-tint:#e7efe9;
    --green:#21a645; --green-deep:#1a8c3a; --green-tint:#e4f3e6; --mid:#7ab841; --lime:#b0cb3c; --gold:#dede38;
    --radius:14px; --radius-lg:20px;
    --shadow-sm:0 1px 2px rgba(20,22,25,.06),0 1px 3px rgba(20,22,25,.04);
    --shadow-card:0 2px 4px rgba(20,22,25,.04),0 14px 30px -16px rgba(20,22,25,.18);
    --shadow-pop:0 24px 60px -20px rgba(20,22,25,.35);
    --sans:'Roboto',-apple-system,'Segoe UI',system-ui,sans-serif;
    --cond:'Roboto Condensed',var(--sans);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:var(--sans);color:var(--ink);background:var(--canvas);
    -webkit-font-smoothing:antialiased;line-height:1.5}
  button{font-family:inherit;cursor:pointer}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
  .eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
    font-weight:600;font-size:12px;color:var(--muted)}
  [hidden]{display:none!important}

  /* ---------- LOGO ---------- */
  .logo{display:inline-flex;align-items:center;text-decoration:none}
  .logo__img{height:34px;width:auto;display:block}
  .logo--login .logo__img{height:54px}

  /* ============================================================
     LOGIN
     ============================================================ */
  .login{min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;overflow:hidden}
  .login__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(680px 480px at 78% -8%, rgba(33,166,69,.16), transparent 60%),
      radial-gradient(560px 420px at 6% 108%, rgba(17,57,41,.08), transparent 60%),
      var(--canvas);}
  .login__rays{position:absolute;top:-140px;right:-120px;width:520px;height:520px;
    z-index:0;opacity:.5;pointer-events:none}
  .login__card{position:relative;z-index:1;width:100%;max-width:404px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
    padding:38px 34px 30px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .login__head{margin:22px 0 24px}
  .login__card h1{font-size:24px;font-weight:900;letter-spacing:-.02em;margin:8px 0 4px}
  .login__card p{margin:0;color:var(--muted);font-size:14px}
  .field{margin-bottom:14px}
  .field label{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
    font-weight:600;font-size:11.5px;color:var(--ink-soft);margin-bottom:6px}
  .input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
    background:#fcfcfd;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
  .input::placeholder{color:var(--faint)}
  .input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(33,166,69,.16);background:#fff}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
    border-radius:11px;font-weight:700;font-size:15px;padding:12px 18px;transition:transform .12s,background .15s,box-shadow .15s}
  .btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px -8px rgba(17,57,41,.5)}
  .btn--primary:hover{background:var(--brand-deep)}
  .btn--primary:active{transform:translateY(1px)}
  .btn--block{width:100%;margin-top:6px}
  .btn--ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
  .btn--ghost:hover{background:var(--line-soft)}
  .login__foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .login__foot small{color:var(--faint);font-size:12px}
  .partner{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
    font-family:var(--cond);letter-spacing:.04em}
  .partner i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}

  /* demo-only role picker */
  .demo{margin-top:16px;background:#f7f8f9;border:1px dashed var(--line);border-radius:12px;padding:11px 12px}
  .demo__lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;
    font-weight:600;color:var(--faint);margin-bottom:8px}
  .seg{display:flex;background:#eceef0;border-radius:9px;padding:3px}
  .seg button{flex:1;border:none;background:transparent;border-radius:7px;padding:7px 8px;font-size:13px;
    font-weight:600;color:var(--muted)}
  .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

  /* ============================================================
     SHELL (topbar + main)
     ============================================================ */
  .topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
    backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);padding:12px 22px}
  .topbar__wrap{max-width:1080px;margin:0 auto;width:100%;
    display:flex;align-items:center;justify-content:space-between;gap:16px}
  .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,var(--brand),var(--green),var(--mid),var(--lime),var(--gold))}
  .userchip{display:flex;align-items:center;gap:11px}
  .userchip__meta{text-align:right;line-height:1.15}
  .userchip__name{font-weight:700;font-size:14px}
  .userchip__role{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
    font-size:10.5px;color:var(--muted)}
  .avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:var(--ink);color:#fff;font-weight:800;font-size:14px;letter-spacing:.01em}
  .avatar[data-admin="1"]{background:var(--brand)}
  .iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;
    display:grid;place-items:center;color:var(--ink-soft)}
  .iconbtn:hover{background:var(--line-soft);color:var(--ink)}

  main{max-width:1080px;margin:0 auto;padding:30px 22px 64px}
  .pagehead{margin:6px 0 26px}
  .pagehead h1{font-size:27px;font-weight:900;letter-spacing:-.02em;margin:7px 0 4px}
  .pagehead p{margin:0;color:var(--muted);font-size:14.5px;max-width:60ch}

  .sectlabel{display:flex;align-items:center;gap:12px;margin:0 0 16px}
  .sectlabel span{flex:0 0 auto}
  .sectlabel:after{content:"";flex:1;height:1px;background:var(--line)}

  /* ---------- APP TILES (the "cajas") ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
  .tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 18px 18px;text-align:left;display:flex;flex-direction:column;gap:13px;min-height:184px;
    transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,border-color .16s}
  .tile__top{display:flex;align-items:flex-start;justify-content:space-between}
  .tile__icn{width:50px;height:50px;border-radius:13px;display:grid;place-items:center}
  .tile__icn--brand{background:var(--brand-tint);color:var(--brand)}
  .tile__icn--green{background:var(--green-tint);color:var(--green-deep)}
  .tile h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
  .tile p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
  .tile__foot{margin-top:auto;display:flex;align-items:center;gap:8px}
  .status{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);
    text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:11px}
  .status i{width:8px;height:8px;border-radius:50%}
  .status--on{color:var(--green-deep)}
  .status--on i{background:var(--green);box-shadow:0 0 0 4px var(--green-tint);animation:pulse 2.4s ease-in-out infinite}
  .status--soon{color:var(--faint)}
  .status--soon i{background:var(--faint)}
  .status--admin{color:var(--brand)}
  .status--admin i{background:var(--brand)}

  .tile--live{cursor:pointer}
  .tile--live:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#dfe2e5}
  .tile--live .go{position:absolute;top:20px;right:18px;color:var(--faint);transition:transform .16s,color .16s}
  .tile--live:hover .go{color:var(--green);transform:translateX(2px)}
  .tile--soon{border-style:dashed;background:#fafbfc}
  .tile--soon .tile__icn{background:#eef0f2;color:var(--faint)}
  .tile--soon h3{color:var(--ink-soft)}
  .tile--admin{cursor:pointer;border-color:#cfe3d5;background:linear-gradient(180deg,#f4faf6,#fff)}
  .tile--admin:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}

  .badge{font-family:var(--cond);text-transform:uppercase;letter-spacing:.09em;font-weight:600;
    font-size:10px;color:var(--muted);background:#eef0f2;border-radius:6px;padding:3px 7px}

  /* ---------- ADMIN: users ---------- */
  .adminbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
  .back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);
    font-size:13.5px;font-weight:600;padding:4px 0}
  .back:hover{color:var(--ink)}
  /* REV-20260925-P12: para una tabla que YA vive dentro de una caja con su
     borde. No pinta nada: solo impide que empuje la pagina entera. */
  .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* >>> SELECTOR DE ICONOS · REV-20260925-P13 >>>
     Estas nueve reglas estaban escritas a mano en cada uno de los 47 botones
     del macro selector_icono, y el macro se pinta una vez por App: 940 copias
     en /admin/aplicaciones. Aqui se dicen una vez. */
  .selicono{position:relative}
  .selicono > summary{list-style:none;cursor:pointer;display:inline-flex}
  .selicono > summary::-webkit-details-marker{display:none}
  .selicono__icn{width:38px;height:38px;flex:0 0 auto;display:inline-flex;
    align-items:center;justify-content:center;border-radius:10px}
  .selicono__panel{position:fixed;z-index:200;top:0;left:0;background:var(--surface);
    box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:14px;
    box-shadow:var(--shadow-pop);width:300px;max-height:62vh;overflow-y:auto}
  .selicono__rot{font-size:10.5px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.07em;font-weight:700;margin:10px 0 7px}
  .selicono__rej{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .selicono__b{border:1px solid transparent;background:#f6f8f7;color:var(--ink-soft);
    border-radius:9px;padding:6px 0;cursor:pointer;display:flex;
    align-items:center;justify-content:center}
  .selicono__b:hover{border-color:var(--line)}
  .selicono__b--on{border-color:var(--green);background:var(--green-tint);color:var(--green)}
  .selicono__b span{width:22px;height:22px;display:inline-flex;
    align-items:center;justify-content:center}
  .selicono__volver{border:0;background:none;color:var(--muted);font-size:11.5px;
    cursor:pointer;padding:0;text-decoration:underline}
  /* <<< FIN SELECTOR DE ICONOS <<< */
  .tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);overflow:hidden}
  .tscroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:640px}
  thead th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:11px;
    color:var(--muted);text-align:left;font-weight:600;padding:13px 16px;border-bottom:1px solid var(--line);background:#fbfcfc}
  tbody td{padding:14px 16px;border-bottom:1px solid var(--line-soft);font-size:14px;vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover{background:#fcfcfd}
  .u{display:flex;align-items:center;gap:11px}
  .u .avatar{width:34px;height:34px;border-radius:9px;font-size:12.5px}
  .u__name{font-weight:700;font-size:14px}
  .u__mail{color:var(--muted);font-size:12.5px}
  .rolepill{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
    font-size:11px;padding:4px 9px;border-radius:999px;display:inline-block}
  .rolepill--admin{background:var(--brand-tint);color:var(--brand-deep)}
  .rolepill--advisor{background:#eef0f2;color:var(--ink-soft)}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{font-size:12px;font-weight:600;color:var(--green-deep);background:var(--green-tint);
    border-radius:7px;padding:4px 9px;display:inline-flex;align-items:center;gap:6px}
  .chip i{width:6px;height:6px;border-radius:50%;background:var(--green)}
  .chip--none{color:var(--faint);background:#f1f2f4}
  .chip--none i{background:var(--faint)}
  .rowacts{display:flex;gap:6px;justify-content:flex-end}
  .miniicon{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;
    display:grid;place-items:center;color:var(--muted)}
  .miniicon:hover{background:var(--line-soft);color:var(--ink)}
  .miniicon--danger:hover{background:#fdece9;color:#d64027;border-color:#f6d5cd}

  /* ---------- slide-over panel ---------- */
  .scrim{position:fixed;inset:0;background:rgba(24,26,29,.42);z-index:40;opacity:0;display:none;pointer-events:none;
    transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
  .panel{position:fixed;top:0;right:0;height:100%;width:min(430px,94vw);background:#fff;z-index:50;
    box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
    display:flex;flex-direction:column}
  .panel.show{transform:none}
  .panel__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
  .panel__head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
  .panel__body{padding:22px;overflow:auto;flex:1}
  .panel__foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
  .perm{border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;margin-top:8px}
  .perm__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:9px}
  .perm__row+.perm__row{border-top:1px solid var(--line-soft)}
  .perm__row.dis{opacity:.55}
  .perm__t{font-weight:600;font-size:14px}
  .perm__d{font-size:12px;color:var(--muted)}
  .sw{--w:44px;--h:26px;position:relative;width:var(--w);height:var(--h);flex:0 0 auto}
  /* >>> ARREGLO INTERRUPTORES: el <input> por encima de su pastilla,
     si no el <span> se come el clic y la casilla no se marca. <<< */
  .sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
  .sw span{position:absolute;inset:0;background:#d7dade;border-radius:999px;transition:background .18s}
  .sw span:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;
    border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .18s}
  .sw input:checked+span{background:var(--green)}
  .sw input:checked+span:before{transform:translateX(18px)}
  .sw input:disabled{cursor:not-allowed}

  /* toast */
  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
    background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;
    box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
    display:flex;align-items:center;gap:10px}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  .toast i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--green-tint)}50%{box-shadow:0 0 0 6px rgba(17,57,41,.08)}}
  @media (max-width:560px){
    main{padding:22px 16px 56px}
    .login__card{padding:30px 22px 24px}
    .topbar{padding:11px 15px}
    .userchip__meta{display:none}
    .pagehead h1{font-size:23px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* >>> MOVIL TABLAS >>> */
  /* Movil: las tablas no se recortan.

     La regla global table{min-width:640px} mas .tablewrap{overflow:hidden}
     hacian que en un movil en vertical se cortara la columna de la derecha
     (los importes). Aqui el recorte pasa a ser scroll, y las tablas sencillas
     de dos columnas se marcan .table--fit para que quepan enteras sin scroll. */
  @media (max-width:760px){
    .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    table.table--fit{min-width:0}
    table.table--fit tbody td{padding:11px 9px}
    table.table--fit tbody td:last-child{white-space:nowrap}
  }
  /* <<< FIN MOVIL TABLAS <<< */

  /* >>> VISTA CUADROS O LISTA >>> */
  /* Las mismas dos vistas que en el portal de clientes: cuadros (lo de
     siempre) y lista (una fila por aplicacion, para verlas todas de un
     vistazo cuando ya hay muchas). Solo afecta a las rejillas que llevan
     la clase, o sea a la pantalla de aplicaciones. */
  .sectlabel:after{order:2}
  .sectlabel .vista{order:3;flex:0 0 auto}
  .vista{display:inline-flex;gap:2px;background:var(--line-soft);
    border:1px solid var(--line);border-radius:10px;padding:3px}
  .vista__b{display:grid;place-items:center;width:31px;height:26px;padding:0;border:0;
    background:transparent;border-radius:7px;color:var(--faint);
    transition:background .15s,color .15s}
  .vista__b:hover{color:var(--ink-soft)}
  .vista__b.es-activa{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}

  .grid.vista-lista{grid-template-columns:1fr;gap:10px}
  .grid.vista-lista .tile{min-height:0;flex-direction:row;align-items:center;
    gap:14px;padding:12px 46px 12px 14px}
  .grid.vista-lista .tile__top{flex:0 0 auto;align-items:center}
  .grid.vista-lista .tile--soon .badge{display:none}
  .grid.vista-lista .tile__icn{width:38px;height:38px;border-radius:10px}
  .grid.vista-lista .tile__icn svg{width:21px;height:21px}
  .grid.vista-lista .tile h3{font-size:15.5px}
  .grid.vista-lista .tile p{display:none}
  .grid.vista-lista .tile__foot{margin-top:0;margin-left:auto;flex:0 0 auto}
  .grid.vista-lista .tile--live:hover,.grid.vista-lista .tile--admin:hover{transform:none}
  .grid.vista-lista .tile--live .go{top:50%;margin-top:-10px}
  .grid.vista-lista .tile--live:hover .go{transform:translateX(2px)}
  @media (max-width:560px){
    .grid.vista-lista .tile__foot{display:none}
    .grid.vista-lista .tile{padding-right:38px}
  }
  /* <<< FIN VISTA CUADROS O LISTA <<< */

  /* ============================================================
     ACCESO · invitacion, contraseña olvidada y estado del usuario
     >>> BLOQUE ACCESO · lo escribe instalar.sh · no editar a mano >>>
     ============================================================ */
  .acc__quien{display:flex;flex-direction:column;gap:2px;background:var(--brand-tint);
    border:1px solid #d5e3da;border-radius:12px;padding:11px 14px;margin:0 0 16px}
  .acc__quien-n{font-weight:700;font-size:14.5px;color:var(--brand)}
  .acc__quien-c{font-size:13px;color:var(--muted)}
  .acc__error{background:#fdece9;border:1px solid #f6d5cd;color:#c0341d;border-radius:11px;
    padding:11px 13px;font-size:13.5px;font-weight:600;margin:0 0 14px}
  .acc__reglas{display:flex;flex-direction:column;gap:5px;margin:2px 0 18px;font-size:12.5px;
    color:var(--faint)}
  .acc__reglas span{display:flex;align-items:center;gap:8px}
  .acc__reglas span::before{content:'';width:14px;height:14px;border-radius:50%;
    border:1.6px solid #d7dbdf;flex:none;transition:.15s}
  .acc__reglas span.ok{color:var(--green-deep)}
  .acc__reglas span.ok::before{background:var(--green);border-color:var(--green);
    box-shadow:inset 0 0 0 2px #fff}
  .acc__volver{text-align:center;margin:16px 0 0;font-size:13px}
  .acc__volver a{color:var(--green-deep);text-decoration:none}
  .acc__volver a:hover{text-decoration:underline}
  .acc__marca{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
    margin:4px auto 2px}
  .acc__marca--ok{background:var(--green-tint);color:var(--green-deep)}
  .acc__marca--malo{background:#fdece9;color:#c0341d}
  .login__olvido{text-align:center;margin:14px 0 0;font-size:13px}
  .login__olvido a{color:var(--muted);text-decoration:none}
  .login__olvido a:hover{color:var(--green-deep);text-decoration:underline}

  /* --- estado del usuario en la tabla de gestion --- */
  .estado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    border-radius:999px;padding:4px 10px;white-space:nowrap}
  .estado i{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
  .estado--activo{background:var(--green-tint);color:var(--green-deep)}
  .estado--parado{background:#f2f3f4;color:#7a8087}
  .estado--pdte{background:#fff5e3;color:#a06a00}
  .avisobar{display:flex;align-items:center;gap:10px;border-radius:12px;padding:11px 14px;
    font-size:13.5px;font-weight:600;margin:0 0 16px}
  .avisobar--ok{background:var(--green-tint);border:1px solid #c6e6cd;color:var(--green-deep)}
  .avisobar--malo{background:#fdece9;border:1px solid #f6d5cd;color:#c0341d}

  /* --- buscador de empleados de Bitrix en el alta --- */
  .bus{position:relative}
  .bus__lista{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow-pop);max-height:260px;overflow:auto;display:none}
  .bus__lista.show{display:block}
  .bus__it{display:block;width:100%;text-align:left;border:0;background:none;
    padding:10px 13px;border-bottom:1px solid var(--line-soft);cursor:pointer}
  .bus__it:last-child{border-bottom:0}
  .bus__it:hover,.bus__it:focus{background:var(--brand-tint)}
  .bus__n{font-weight:600;font-size:13.5px;color:var(--ink)}
  .bus__c{font-size:12.5px;color:var(--muted)}
  .bus__vacio{padding:12px 13px;font-size:13px;color:var(--muted)}
  /* <<< FIN BLOQUE ACCESO <<< */

  /* >>> BLOQUE SALUDO · la mano del panel y el texto en una linea >>> */
  /* La mano saluda dos veces al entrar y se para: si no, marea. */
  .saluda{display:inline-block;font-size:.86em;margin-left:6px;vertical-align:-2px;
    transform-origin:70% 80%;animation:saluda 2.6s ease-in-out 1s 2}
  @keyframes saluda{0%,60%,100%{transform:none}
    10%,30%,50%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}}
  /* El parrafo del panel no lleva el tope de 60 caracteres del resto de
     pantallas: con el, la frase partia y dejaba una palabra sola abajo.
     text-wrap:balance es el seguro por si algun dia no cabe. */
  /* Va con «.pagehead p» delante a proposito: si no, la regla de siempre
     (.pagehead p, con su tope de 60 caracteres) pesa mas y gana. */
  .pagehead p.pagehead__intro{max-width:none;text-wrap:pretty}
  /* <<< FIN BLOQUE SALUDO <<< */

  /* ============================================================
     PERFIL · menu de usuario, foto y cargo
     >>> BLOQUE PERFIL · lo escribe instalar.sh · no editar a mano >>>
     ============================================================ */
  .avatar{overflow:hidden}
  .avatar--foto{object-fit:cover;background:var(--line-soft)}
  .avatar--g{width:46px;height:46px;border-radius:13px;font-size:16px}

  .menuu{position:relative}
  .menuu__b{display:flex;align-items:center;gap:9px;background:none;border:0;padding:3px;
    border-radius:12px;color:inherit;font:inherit}
  .menuu__b:hover{background:var(--line-soft)}
  /* nombre y cargo, uno debajo del otro: dentro del boton son <span> y sin
     esto saldrian seguidos en la misma linea. */
  .menuu__b .userchip__name,.menuu__b .userchip__role{display:block}
  .menuu__v{color:var(--faint);transition:transform .16s}
  .menuu__b[aria-expanded="true"] .menuu__v{transform:rotate(180deg)}
  .menuu__caja{position:absolute;right:0;top:calc(100% + 9px);z-index:60;width:268px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-pop);padding:7px;animation:menuu-entra .13s ease-out}
  @keyframes menuu-entra{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .menuu__cab{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
  .menuu__quien{min-width:0}
  .menuu__n{font-weight:700;font-size:14px;line-height:1.25}
  .menuu__c{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .menuu__cargo{font-size:12px;color:var(--green-deep);margin-top:3px;line-height:1.3}
  .menuu__sello{margin:0 9px 6px;display:inline-block;background:var(--brand-tint);
    color:var(--brand-deep);font-family:var(--cond);text-transform:uppercase;
    letter-spacing:.06em;font-weight:700;font-size:10.5px;padding:4px 9px;border-radius:999px}
  .menuu__sep{height:1px;background:var(--line-soft);margin:5px 3px}
  .menuu__it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
    border-radius:9px;border:0;background:none;color:var(--ink);font:inherit;font-size:13.5px;
    text-decoration:none;text-align:left}
  .menuu__it:hover,.menuu__it:focus{background:var(--line-soft)}
  .menuu__it svg{color:var(--muted);flex:none}
  .menuu__it--salir{color:#c0341d}
  .menuu__it--salir svg{color:#c0341d}
  .menuu__it--salir:hover{background:#fdece9}
  @media (max-width:560px){
    .menuu__caja{width:246px}
    /* En movil el nombre no cabe arriba, pero dentro del menu si tiene que verse. */
    .menuu__caja .menuu__n,.menuu__caja .menuu__c{display:block}
  }
  /* <<< FIN BLOQUE PERFIL <<< */

  /* >>> BLOQUE GUARDIA · por que esta desactivado alguien >>> */
  .estado__por{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap}
  /* <<< FIN BLOQUE GUARDIA <<< */

  /* >>> BLOQUE MI ESPACIO >>> */
  .mie__estado{display:flex;align-items:center;gap:12px;margin:0 0 4px}
  .mie__cuando{font-size:12.5px;color:var(--faint)}
  .mie__caja{padding:4px 20px}
  .mie{margin:0}
  .mie__f{display:flex;gap:18px;padding:11px 0;border-top:1px solid var(--line-soft)}
  .mie__f:first-child{border-top:0}
  .mie dt{flex:0 0 240px;color:var(--muted);font-size:13.5px;line-height:1.45}
  .mie dd{margin:0;flex:1;font-size:14px;font-weight:500;line-height:1.45;min-width:0;
    overflow-wrap:anywhere}
  .mie__vacio{color:var(--faint);font-weight:400}
  .mie__doc{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
    text-decoration:none;color:var(--green-deep);background:var(--green-tint);
    border:1px solid #c6e6cd;border-radius:9px;padding:6px 11px;margin:0 6px 6px 0}
  .mie__doc:hover{background:#d6efdb}
  .mie__f--doc dd{display:flex;flex-wrap:wrap}
  textarea.input{font-family:inherit;resize:vertical;min-height:92px}
  @media (max-width:640px){
    .mie__f{flex-direction:column;gap:2px}
    .mie dt{flex:none;font-size:12.5px}
  }
  /* <<< FIN BLOQUE MI ESPACIO <<< */

  /* >>> BLOQUE MIS DOCUMENTOS >>> */
  .tabs{display:flex;gap:6px;margin:0 0 20px;border-bottom:1px solid var(--line)}
  .tabs__t{padding:9px 14px;font-size:14px;font-weight:600;color:var(--muted);
    text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
  .tabs__t:hover{color:var(--ink)}
  .tabs__t--on{color:var(--brand);border-bottom-color:var(--green)}
  /* REV-20260925-P10b: una seccion que todavia no existe. Antes el «no se
     puede pulsar» iba escrito a mano en el HTML de Textos de la oferta. */
  .tabs__t--no{opacity:.45;cursor:not-allowed}

  .filtros{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
  /* REV-20260925-P10: display y text-decoration para que .f valga igual
     con <button> (como nacio) y con <a> (informes, textos de la oferta). */
  .filtros .f{border:1px solid var(--line);background:var(--surface);border-radius:999px;
    display:inline-flex;align-items:center;text-decoration:none;
    padding:7px 14px;font-size:13px;color:var(--ink-soft)}
  .filtros .f:hover{border-color:var(--green)}
  .filtros .f--on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

  .leyenda{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 16px;font-size:12.5px;
    color:var(--muted)}
  .leyenda__i{display:inline-flex;align-items:center;gap:7px}
  .leyenda .pt{width:10px;height:10px;border-radius:3px}

  details.anio{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
  details.anio summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    gap:12px;padding:15px 20px}
  details.anio summary::-webkit-details-marker{display:none}
  details.anio summary::before{content:'\25B8';color:var(--green);font-size:15px;
    transition:transform .15s}
  details.anio[open] summary::before{transform:rotate(90deg)}
  .anio__n{font-size:18px;font-weight:800;color:var(--brand)}
  .anio__c{color:var(--muted);font-size:13px}
  .zip{margin-left:auto;font-size:12.5px;color:var(--green-deep);text-decoration:none;
    border:1px solid #c6e6cd;border-radius:9px;padding:6px 11px;background:var(--green-tint)}
  .zip:hover{background:#d6efdb}

  .mes{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--line-soft)}
  .mes__n{width:104px;flex:none;font-weight:600;color:var(--ink-soft);font-size:13.5px;
    padding-top:9px}
  .mes__d{flex:1;min-width:0}
  .doc{display:flex;align-items:center;gap:10px;padding:7px 0}
  .pt{display:block;width:9px;height:9px;border-radius:3px;flex:none;background:#9aa}
  .pt--nom{background:var(--green)}
  .pt--atr{background:#ffb536}
  .pt--hor{background:#2b7fb0}
  .pt--mod{background:#7a5cc4}
  .doc__t{font-weight:600;min-width:104px;font-size:14px}
  .doc__e{color:var(--muted);font-size:12.5px;flex:1}
  .doc__e .ok{color:var(--green-deep)}
  .doc__e .pdte{color:#b06a00;font-weight:600}
  .doc .bajar{font-size:12.5px;text-decoration:none;color:var(--brand);
    background:var(--green-tint);border:1px solid #c6e6cd;border-radius:9px;
    padding:6px 12px;white-space:nowrap}
  .doc .bajar:hover{background:#d6efdb}
  .doc .bajar--no{background:#f6f7f6;border-color:var(--line);color:var(--faint);
    cursor:default}
  .mie__pie{color:var(--faint);font-size:12.5px;margin:18px 0 0}
  .mie__pie a{color:var(--green-deep)}
  @media (max-width:640px){
    .mes{flex-direction:column;gap:2px}
    .mes__n{width:auto;padding-top:0;font-size:12.5px}
    .doc{flex-wrap:wrap}
    .doc__e{flex:1 1 100%;order:3;margin-left:19px}
  }
  /* <<< FIN BLOQUE MIS DOCUMENTOS <<< */

  /* >>> BLOQUE EFEMERIDE · la tarjeta del dia >>> */
  .efem{display:flex;gap:14px;align-items:flex-start;border-radius:var(--radius);
    padding:15px 17px;margin:0 0 26px;border:1px solid var(--line);
    background:var(--surface)}
  /* REV-20260924-P21E · aqui habia un ancho maximo para «Un dato» y quedaba mas corta
     que el resto de la portada. Se quito el 24/09 a peticion de Alberto. */
  .efem__icn{font-size:22px;line-height:1;flex:none;width:42px;height:42px;
    border-radius:12px;display:grid;place-items:center;background:var(--brand-tint)}
  .efem__t{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
    font-weight:700;font-size:11.5px;color:var(--brand);margin-bottom:3px}
  .efem__txt p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55}
  .efem--cumple{background:#fff8e8;border-color:#f2e2bd}
  .efem--cumple .efem__icn{background:#ffeec4}
  .efem--cumple .efem__t{color:#8a5a00}
  .efem--aniversario,.efem--companeros{background:var(--green-tint);border-color:#c6e6cd}
  .efem--aniversario .efem__icn,.efem--companeros .efem__icn{background:#d5efd9}
  .efem--aniversario .efem__t,.efem--companeros .efem__t{color:var(--green-deep)}
  .efem--aviso{background:#fdf3e8;border-color:#f3ddbe}
  .efem--aviso .efem__icn{background:#fbe6c8}
  .efem--aviso .efem__t{color:#a05a00}
  @media (max-width:560px){
    .efem{padding:13px 14px;gap:11px}
    .efem__icn{width:36px;height:36px;font-size:19px}
  }
  /* <<< FIN BLOQUE EFEMERIDE <<< */

  /* >>> BLOQUE BARRA MOVIL · navegacion inferior en el movil >>> */
  /* Solo aparece por debajo de 760px. En escritorio manda la barra de arriba,
     que no se toca. El hueco de abajo (padding en el body) es para que la
     barra no tape el ultimo boton de la pantalla, que es el fallo tipico. */
  .barrab{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
    background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand) 34%,
                               var(--green-deep) 70%,var(--green) 100%);
    box-shadow:0 -12px 34px -20px rgba(20,22,25,.6);
    padding-bottom:env(safe-area-inset-bottom)}
  .barrab__in{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 8px 7px;
    max-width:520px;margin:0 auto}
  .barrab__it{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:5px;padding:8px 4px 7px;border-radius:15px;text-decoration:none;border:0;
    background:transparent;color:rgba(255,255,255,.8);
    font:500 11.5px/1.1 var(--sans);letter-spacing:.005em;
    -webkit-tap-highlight-color:transparent;transition:background .14s,color .14s}
  .barrab__it svg{width:22px;height:22px;display:block}
  .barrab__it[aria-current="page"]{background:rgba(255,255,255,.19);color:#fff}
  .barrab__it:active{background:rgba(255,255,255,.28);color:#fff}
  body.con-barrab footer{padding-bottom:8px}

  /* Buscador: hoja que baja de arriba y filtra tus aplicaciones al escribir. */
  .buscab{position:fixed;inset:0;z-index:70;display:none;background:rgba(13,46,32,.5)}
  .buscab.abierto{display:block}
  .buscab__caja{position:absolute;left:0;right:0;top:0;background:var(--surface);
    border-radius:0 0 20px 20px;padding:14px 14px 10px;box-shadow:var(--shadow-pop);
    max-height:86vh;overflow:auto}
  .buscab__fila{display:flex;align-items:center;gap:10px}
  .buscab__lupa{color:var(--muted);flex:0 0 auto}
  .buscab__in{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;font:400 15.5px var(--sans);color:var(--ink);background:var(--canvas)}
  .buscab__in:focus{outline:none;border-color:var(--green);background:#fff;
    box-shadow:0 0 0 3px rgba(33,166,69,.16)}
  .buscab__x{flex:0 0 auto;border:0;background:transparent;color:var(--muted);
    padding:8px;border-radius:10px;font:600 13.5px var(--sans)}
  .buscab__res{margin-top:10px;display:flex;flex-direction:column}
  .buscab__r{display:flex;align-items:center;gap:11px;padding:11px 6px;text-decoration:none;
    color:var(--ink);border-top:1px solid var(--line-soft)}
  .buscab__r:first-child{border-top:0}
  .buscab__r b{font-size:14.5px;font-weight:700;display:block}
  .buscab__r span{font-size:12.5px;color:var(--muted);display:block;margin-top:1px}
  .buscab__r i{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;
    place-items:center;background:var(--brand-tint);color:var(--brand);font-style:normal;
    font-weight:800;font-size:14px}
  .buscab__nada{padding:16px 6px 10px;color:var(--muted);font-size:13.5px}

  @media (max-width:760px){
    .barrab{display:block}
    body.con-barrab{padding-bottom:80px}
  }
  /* <<< FIN BLOQUE BARRA MOVIL <<< */

/* >>> BARRA MOVIL · reparto homogeneo · no editar a mano >>> */
/* La barra tenia cuatro columnas fijas. Al esconder un boton (por ejemplo
   «Mi espacio» cuando la aplicacion esta apagada, o cuando alguien no la
   tiene) quedaba el hueco vacio a la derecha y los demas descolocados.
   Con columnas automaticas se reparte sola: con dos, con tres, con cinco. */
.barrab .barrab__in{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
/* <<< FIN BARRA MOVIL · reparto homogeneo <<< */