/* Rejilla de botones que abren su contenido en una hoja (web/rejilla-hoja.js, encargo #192, ESTANDAR §4d).
   Solo tokens de mando.css: sigue el tema claro/oscuro sin colores propios. */

/* ---- Rejilla ---- */
.rj{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(206px,calc(50% - 5px)),1fr));gap:10px}
.rj-btn{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;padding:12px 14px;text-align:left;font:inherit;color:var(--tinta);
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.2,.8,.2,1)}
.rj-btn:hover{border-color:var(--tinta-2);box-shadow:0 10px 22px -16px rgba(var(--sombra-rgb),.55);transform:translateY(-1px)}
.rj-btn:active{transform:scale(.97)}
.rj-btn:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.rj-btn[aria-expanded="true"]{border-color:var(--tinta)}
.rj-ico{flex:none;width:40px;height:40px;display:grid;place-items:center}
.rj-ico .i3d{width:40px;height:40px}
.rj-btn:hover .rj-ico .i3d{transform:scale(1.08)}
.rj-letra{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--papel-2);color:var(--tinta);font-family:var(--display);font-weight:800;font-size:1.25rem}
.rj-txt{min-width:0;flex:1;display:grid;gap:6px}
.rj-tit{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.rj-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:.875rem;color:var(--tinta-2);font-weight:600}
.rj-logos{display:inline-flex;align-items:center}
.rj-logo{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--tinta);color:var(--sobre-tinta);
  font-size:.875rem;font-weight:800;box-shadow:0 0 0 2px var(--tarjeta)}
.rj-logo+.rj-logo{margin-left:-6px}
.rj-logo-g{width:40px;height:40px;border-radius:12px;font-size:1.125rem;box-shadow:none}
.rj-logo img{width:100%;height:100%;object-fit:contain;background:var(--logo-fondo)}
.rj-mas{margin-left:4px;font-size:.875rem;font-weight:700;color:var(--tinta-2)}
/* Señal discreta (p. ej. «por confirmar»): un punto en la esquina; el texto va al nombre accesible del botón. */
.rj-senal{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--ambar);box-shadow:0 0 0 2px var(--tarjeta)}
/* Luz de estado con texto (encargo #198): el color solo acompaña; lo que se lee es el texto. */
.rj-luz{display:flex;align-items:center;gap:6px;min-width:0;font-size:.875rem;font-weight:600;color:var(--tinta-2);line-height:1.25}
.rj-luz i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--neutro)}
.rj-luz[data-nivel="ok"] i{background:var(--luz-ok)}
.rj-luz[data-nivel="warn"] i{background:var(--luz-warn);border-radius:3px}
.rj-luz[data-nivel="err"] i{background:var(--luz-err);border-radius:2px;transform:rotate(45deg)}
.rj-luz[data-nivel="err"]{color:var(--tinta)}
/* Grupo vacío (hueco): se distingue por el borde punteado y su fondo, y sigue siendo tocable. */
.rj-btn.vacio{background:var(--chip-naranja-suave);border:2px dashed var(--chip-naranja-filo)}
.rj-btn.vacio .rj-cuenta{color:var(--chip-naranja-tinta)}
.rj-btn.vacio .rj-ico .i3d{filter:grayscale(.75);opacity:.8}
.rj-btn.vacio .rj-letra{background:var(--tarjeta);color:var(--chip-naranja-tinta)}
.rj-btn.vacio .rj-senal{box-shadow:0 0 0 2px var(--chip-naranja-suave)}

/* ---- Hoja (comparte el patrón .dlg-head de mando.css: cabecera de color, Cerrar de 44 px) ---- */
html.hj-bloqueo,html.hj-bloqueo body,.hj-fijo{overflow:hidden!important}
.hj-fijo{scrollbar-gutter:stable}
dialog.hj{width:min(860px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));transform-origin:50% 50%}
dialog.hj[open]::backdrop{animation:hj-velo .2s ease-out}
@keyframes hj-velo{from{opacity:0}}
.hj-head{justify-content:flex-start}
.hj-head>div{flex:1}
.hj-ico{flex:none;width:44px;height:44px;display:grid;place-items:center}
.hj-ico .i3d,.hj-ico img{width:44px;height:44px}
.hj-ico .rj-letra{background:var(--dlg-cab-boton);color:var(--dlg-cab-tinta);border:1px solid var(--dlg-cab-linea)}
.hj-ico .pf-logo{width:40px;height:40px;border-radius:12px}
.hj-head .hj-sub{margin:4px 0 0;font-size:.9375rem}
.hj-nav{flex:none;display:inline-flex;align-items:center;gap:2px}
.hj-nav[hidden]{display:none}
.hj-paso{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;border:1px solid var(--dlg-cab-linea);background:var(--dlg-cab-boton);color:var(--dlg-cab-tinta);cursor:pointer;transition:background .18s,transform .18s}
.hj-paso:hover{background:var(--dlg-cab-boton-hover)}
.hj-paso:active{transform:scale(.92)}
.hj-paso .i3d{width:26px;height:26px}
.hj-cuenta{min-width:52px;text-align:center;font-size:.875rem;font-weight:700;color:var(--dlg-cab-tinta-2);font-variant-numeric:tabular-nums}
.hj-cont{min-height:120px}
.hj-head h2 .ayuda-btn{color:var(--dlg-cab-tinta)}
@media (max-width:700px){
  dialog.hj{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);border-radius:22px 22px 0 0}
  .hj .dlg-body{--dlg-pad:18px;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);padding-bottom:calc(var(--dlg-pad) + env(safe-area-inset-bottom))}
  .hj-head{flex-wrap:wrap;row-gap:8px}
  .hj-head>div{flex:1 1 calc(100% - 112px)}
  .hj-nav{order:3;flex:1 1 100%;justify-content:space-between}
  .hj-ico{width:40px;height:40px}
  .hj-ico .i3d,.hj-ico img{width:40px;height:40px}
}
/* Celular: dos columnas compactas; la unidad del conteo se esconde a la vista (los logos ya dicen qué se cuenta). */
@media (max-width:520px){
  .rj{gap:8px}
  .rj-btn{gap:8px;padding:10px;min-height:72px;border-radius:16px}
  .rj-ico,.rj-ico .i3d,.rj-letra,.rj-logo-g{width:32px;height:32px}
  .rj-letra{font-size:1.0625rem;border-radius:10px}
  .rj-tit{font-size:.9375rem}
  .rj-txt{gap:4px}
  .rj-meta{flex-wrap:nowrap;gap:6px}
  .rj-cuenta .rj-unidad{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rj-senal{top:8px;right:8px}
  .rj-btn:has(.rj-senal) .rj-txt{padding-right:8px}
}
/* Muy angosto (320): el ícono arriba y el título a todo el ancho, sin partir palabras. */
@media (max-width:360px){
  .rj-btn{flex-direction:column;align-items:flex-start;gap:6px}
  .rj-txt{width:100%;padding-right:0!important}
  .rj-tit{hyphens:manual}
}
@media (prefers-reduced-motion:reduce){
  .rj-btn,.rj-btn:hover,.rj-btn:active{transition:none;transform:none}
  dialog.hj[open]::backdrop{animation:none}
}