/* ═══════════════════════════════════════════════════════════════════════
   Carril «Gestoría entre cuentas» (15-10-2026): el acceso de una gestoría a empresas de otra cuenta (js/gestorias.js).
   Se carga después de estilo.css y solo lo toca su dueño. Solo tokens de estilo.css (--t-*, --e*, --r, colores del sistema) y ni un #hex.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── la marca «De <cuenta>» de las empresas que se llevan por un acceso de gestoría: discreta ─────────── */
.gst-ajena { margin-left: var(--e1); flex: none; }
.menu .gst-ajena { font-size: var(--t-2xs); padding: 0 var(--e1); line-height: 16px; }
.gst-barra { flex: none; display: inline-grid; place-items: center; margin-left: var(--e1); color: var(--tenue); }
.gst-barra svg { width: 14px; height: 14px; }

/* ── el bloque «Gestoría» de la ficha de la empresa ──────────────────────────────────────────────────── */
.gst-card .cc > p { margin: 0 0 var(--e3); }
.gst-lista { display: grid; gap: var(--e2); min-width: 0; }
.gst-acceso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); min-width: 0;
              padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); }
.gst-acceso.cerrado { background: var(--sub); }
.gst-quien { display: grid; gap: var(--e1); justify-items: start; min-width: 0; flex: 1 1 14rem; }
.gst-acc { display: flex; flex-wrap: wrap; gap: var(--e1); }
.gst-pausa { color: var(--av-fg); }
.gst-act { margin-top: var(--e3); border-top: 1px solid var(--linea-suave); padding-top: var(--e2); }
.gst-act > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--texto); }
.gst-act > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.gst-lista-act { display: grid; gap: var(--e2); margin-top: var(--e2); }
.gst-ev { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e2); font-size: var(--t-sm); }

/* ── las invitaciones del Panel de la gestoría y la pantalla del enlace ──────────────────────────────── */
.gst-invitaciones .gst-lista { margin-top: var(--e2); }
.gst-aceptar { max-width: 56rem; }
.gst-aceptar .cc > p, .gst-aceptar .cc > .grid, .gst-aceptar .cc > .nota { margin: 0 0 var(--e3); }
.gst-titulo { margin: 0 0 var(--e2); font-size: var(--t-lg); font-weight: 600; }
.gst-titulo b { font-weight: 600; color: var(--marca); }
.gst-ul { margin: var(--e1) 0 0; padding-left: var(--e4); display: grid; gap: var(--e1); font-size: var(--t-sm); }
.cuerpo .nota + .campo { margin-top: var(--e3); }

/* ═══════════════════════════════════════════════════════════════════════
   Panel de la gestoría completo y bloqueo del trimestre (ronda 12, A3 y A4 de docs/PLAN-DESDE-HOLDED.md): js/inicio.js (el Panel, «gp») y js/gestorias.js (el bloqueo, «blq»).
   Solo tokens de estilo.css y ni un #hex. Se queda en esta hoja (la de la gestoría) porque index.html ya la enlaza.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── el Panel: filtros y leyenda ────────────────────────────────────────────────────────────────────── */
.gp-filtros { gap: var(--e2) var(--e3); }
.gp-filtros input[type=search] { flex: 1 1 240px; max-width: 360px; }
.gp-filtros .gp-chips { margin: 0; }
.gp-explica { margin: 0; padding: var(--e3) var(--pad-card) 0; }
.gp-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: var(--e2) var(--pad-card); border-bottom: 1px solid var(--linea-suave); }
.gp-leyenda .eti svg { width: 12px; height: 12px; flex: none; }

/* ── la tabla del Panel ─────────────────────────────────────────────────────────────────────────────── */
.gp-tabla td { vertical-align: middle; }
.gp-tabla th, .gp-tabla td { padding-inline: var(--e3); }
@container (max-width: 1280px) { .gp-oc-1280 { display: none; } }
@container (max-width: 1200px) { .gp-oc-1200 { display: none; } }          /* como oc-1100, oc-900 y oc-760 de estilo.css: la columna cede cuando la CAJA de la tabla mide menos */
.gp-tabla th.gp-c-modelos, .gp-tabla td.gp-c-modelos { min-width: 12rem; }
.gp-tabla td.gp-c-bloqueo { min-width: 6.5rem; }
.gp-emp { min-width: 0; flex: 1 1 auto; }
.gp-emp > .sub2 { display: block; }
.gp-vacio { padding: var(--e5) var(--e4); text-align: center; color: var(--tenue); }
.gp-gestor { margin-right: var(--e1); }

/* los modelos del trimestre: cada uno un chip con su número, su icono y, si hace falta, una palabra */
.gp-modelos { display: flex; flex-wrap: wrap; gap: var(--e1); }
.gp-mod { appearance: none; height: auto; min-height: 0; gap: var(--e1); padding: 1px var(--e2); line-height: 18px; font-weight: 500; }
.gp-mod svg { width: 12px; height: 12px; flex: none; }
button.gp-mod { cursor: pointer; }
button.gp-mod:hover { opacity: 1; filter: brightness(.96); }
button.gp-mod:focus-visible, button.gp-bloq:focus-visible, button.gp-mas:focus-visible, button.gp-error:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.gp-w { font-weight: 400; }
.gp-mod.omitido .gp-n { text-decoration: line-through; }
.gp-hecho { color: var(--ok-fg); }

/* el trimestre bloqueado y los errores al importar el banco */
.gp-bloq { appearance: none; height: auto; min-height: 0; gap: var(--e1); padding: 1px var(--e2); line-height: 18px; }
.gp-bloq svg { width: 12px; height: 12px; flex: none; }
button.gp-bloq { cursor: pointer; }
.gp-error { appearance: none; display: inline-flex; align-items: center; gap: var(--e1); height: auto; min-height: 0; padding: 0; background: transparent; color: var(--no-fg);
            border: 0; font-size: var(--t-xs); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.gp-error:hover { background: transparent; opacity: .8; }
.gp-error svg { width: 12px; height: 12px; flex: none; }

/* las etiquetas de cada cliente */
.gp-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }
.gp-et { font-size: var(--t-2xs); line-height: 16px; padding: 0 var(--e2); }
.gp-mas { appearance: none; display: inline-flex; align-items: center; height: 18px; min-height: 0; padding: 0 var(--e1); gap: var(--e1); background: transparent; color: var(--tenue);
          border: 1px dashed var(--linea-fuerte); border-radius: var(--r-pill); font-size: var(--t-2xs); font-weight: 400; }
.gp-mas:hover { background: var(--hover); color: var(--texto); opacity: 1; }
.gp-mas svg { width: 12px; height: 12px; flex: none; }
.gp-et-lista { display: flex; flex-wrap: wrap; gap: var(--e2); min-height: 28px; align-items: center; }
.gp-et-lista .gp-et { font-size: var(--t-xs); line-height: 20px; }
.gp-quitar { appearance: none; display: inline-grid; place-items: center; height: 16px; min-height: 0; width: 16px; padding: 0; margin-left: var(--e1); background: transparent; color: inherit; border: 0; border-radius: 50%; }
.gp-quitar svg { width: 12px; height: 12px; }
.gp-quitar:hover { background: color-mix(in oklab, currentColor 18%, transparent); opacity: 1; }
.gp-colores { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e1); }
.gp-color { position: relative; cursor: pointer; }
.gp-color input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
.gp-color .eti { border: 2px solid transparent; font-size: var(--t-xs); line-height: 22px; }
.gp-color:has(input:checked) .eti { border-color: var(--marca); }
.gp-color:has(input:focus-visible) .eti { outline: 2px solid var(--marca); outline-offset: 2px; }

/* el texto de ayuda dentro de un menú flotante */
.menu-nota { padding: var(--e1) var(--e3) var(--e2); max-width: 280px; font-size: var(--t-xs); line-height: 1.45; color: var(--tenue); white-space: normal; }

/* ── el bloqueo del trimestre ───────────────────────────────────────────────────────────────────────── */
.blq-aviso { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); margin-bottom: var(--e4); padding: var(--e3) var(--e4);
             border: 1px solid color-mix(in oklab, var(--azul-fg) 30%, transparent); border-radius: var(--r); background: var(--azul-bg); color: var(--texto); font-size: var(--t-sm); }
.blq-aviso > svg { width: 18px; height: 18px; flex: none; color: var(--azul-fg); }
.blq-aviso .blq-txt { flex: 1 1 22rem; min-width: 0; }
.blq-aviso .blq-txt b { font-weight: 600; }
.blq-trims { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); }
.blq-trim { display: grid; gap: var(--e2); align-content: start; justify-items: start; min-width: 0; padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); }
.blq-trim.bloqueado { border-color: color-mix(in oklab, var(--azul-fg) 35%, transparent); background: var(--azul-bg); }
.blq-q { font-size: var(--t-md); font-weight: 600; }
.blq-estado { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); min-width: 0; max-width: 100%; font-size: var(--t-xs); color: var(--tenue); }
.blq-estado .eti svg { width: 12px; height: 12px; flex: none; }
.blq-quien { max-width: 100%; }

/* (18-10) La lista del cierre del trimestre en el Panel (inicio.js: gpCeldaCierre) */
.gp-cierre { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e1); padding: 0; background: none; border: 0; color: var(--tenue); font-size: var(--t-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.gp-cierre-barra { display: block; width: var(--e6); height: var(--e1); border-radius: var(--r-pill); background: var(--linea); overflow: hidden; }
.gp-cierre-barra i { display: block; height: 100%; background: var(--ok-fg); }
.gp-cierre.completo { color: var(--ok-fg); }
.gp-ci { display: flex; align-items: center; gap: var(--e2); }
.gp-ci.hecho { color: var(--ok-fg); }