/* ===========================================================================
   Activea — hoja base.

   TRES REGLAS DE ESTILO QUE VIENEN DEL PRODUCTO, NO DEL GUSTO:

   1. El tiempo legal y los indicadores de gestion NO se mezclan visualmente.
      Hay una doble raya vertical entre "Jornada" y "Verificada". Es la
      decision 3 del proyecto dibujada: los tres tiempos ni se suman ni se
      restan. Si un dia alguien quita esa raya, la interfaz empieza a
      sugerir que se restan.

   2. "Por explicar" no lleva rojo, ni ambar, ni icono de aviso. Es tiempo
      sin evidencia, no fraude. El color que se elige aqui es el que el
      mando interpreta cuando habla con la persona.

   3. El balance de horas se pinta con el MISMO peso en los dos sentidos.
      Las horas de mas no se esconden. El comite lo mira en diez segundos.

   Sin webfonts y sin CDN: un producto que promete no filtrar datos del
   trabajador no puede pedir una fuente a un tercero en cada carga. Ademas
   permite una CSP sin excepciones.
   =========================================================================== */

:root {
  /* Papel y tinta */
  --paper:        #edf1f3;
  --surface:      #ffffff;
  --ink:          #13212c;
  --ink-soft:     #5a6b78;
  --hairline:     #c9d5dd;
  --hairline-2:   #e2e9ee;

  /* Significado */
  --sello:        #0b6e4f;  /* verificado, conforme */
  --sello-bg:     #e7f2ed;
  --registro:     #1f4b73;  /* estructura, enlaces, foco */
  --revision:     #8c4a2f;  /* SOLO disputa abierta */
  --revision-bg:  #f7ece6;

  /* La raya que separa jornada legal de indicadores de gestion */
  --rule-legal:   #8aa0ae;

  /* Franja oscura de la portada. Tokens propios: con var(--ink) de fondo se
     volvia clara en el tema oscuro y su texto blanco dejaba de verse. */
  --franja:       #13212c;
  --franja-ink:   #edf1f3;

  /* Notificaciones a la empresa: verde, amarillo, rojo. */
  --notif-verde:     #0b6e4f;
  --notif-verde-bg:  #e7f2ed;
  --notif-ambar:     #8a6100;
  --notif-ambar-bg:  #fbf1d9;
  --notif-rojo:      #b3261e;
  --notif-rojo-bg:   #fbe7e5;

  /* Tipografia */
  --sans: "Segoe UI", Roboto, "Helvetica Neue", Inter, system-ui, -apple-system,
          "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: .8125rem;
  --t-s:  .875rem;
  --t-b:  1rem;
  --t-l:  1.375rem;
  --t-xl: 1.9375rem;
  --t-fig: 2.125rem;

  --gap:  1.25rem;
  --wrap: 68rem;
  --r:    2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0f171d;
    --surface:    #16212a;
    --ink:        #e7eef3;
    --ink-soft:   #9aabb7;
    --hairline:   #32444f;
    --hairline-2: #223039;
    --sello:      #56b892;
    --sello-bg:   #12312a;
    --registro:   #7fb2df;
    --revision:   #d08b62;
    --revision-bg:#33211a;
    --rule-legal: #5d7786;
    /* Algo mas clara que la pagina, para que siga siendo una franja. */
    --franja:     #1c2c38;
    --notif-verde:    #56b892;
    --notif-verde-bg: #12312a;
    --notif-ambar:    #e3b341;
    --notif-ambar-bg: #33290f;
    --notif-rojo:     #f28b82;
    --notif-rojo-bg:  #3a1c1a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-b)/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0 0 .4em; font-weight: 640; letter-spacing: -.012em; line-height: 1.2; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
p  { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--registro); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--registro);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* ---------------------------------------------------------------- chrome */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
/* La marca lleva un sello verde delante. Es el unico adorno de la pagina. */
.brand::before {
  content: "";
  display: inline-block;
  width: .55em; height: .55em;
  margin-right: .45em;
  background: var(--sello);
  border-radius: 50%;
  vertical-align: baseline;
}

.topbar .who { color: var(--ink-soft); font-size: var(--t-s); }
.topbar .spacer { flex: 1; }
.topbar nav { display: flex; gap: 1rem; font-size: var(--t-s); }
/* Acciones que escriben (cambio de sombrero): formulario con aspecto de enlace. */
.nav-form { display: inline; margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  color: var(--ink-soft);
  font-size: var(--t-xs);
}

.page { display: flow-root; }
.page-narrow { max-width: 46rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--ink);
}
.page-head h1 { margin: 0; }
.page-head .muted { margin: .15rem 0 0; }

.muted  { color: var(--ink-soft); }
.small  { font-size: var(--t-xs); }
.center { text-align: center; }
.num    { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 640; }

/* ------------------------------------------------------------- mensajes */

.note {
  padding: .7rem .9rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--t-s);
}
.note-ok    { border-left-color: var(--sello);    background: var(--sello-bg); }
.note-warn  { border-left-color: var(--revision); background: var(--revision-bg); }
.note-error { border-left-color: var(--revision); background: var(--revision-bg); }

/* ------------------------------------------------------------- balance

   Una sola banda con divisiones a linea fina, no tres tarjetas con sombra.
   Las tres cifras son tiempo legal: no llevan raya entre ellas.            */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}

.card {
  padding: .9rem 1.1rem 1rem;
  border-left: 1px solid var(--hairline-2);
  border-top: 2px solid transparent;
}
.card:first-child { border-left: 0; }

.card .k { display: block; font-size: var(--t-s); color: var(--ink-soft); }
.card .big {
  display: block;
  margin-top: .1rem;
  font-size: var(--t-fig);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.card .hint {
  display: block;
  margin-top: .5rem;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Mismo peso tipografico en los dos sentidos. Solo cambia la linea
   superior, y ninguna de las dos es roja. */
.card-plus  { border-top-color: var(--sello); }
.card-minus { border-top-color: var(--rule-legal); }

/* ------------------------------------------------------------- conformar */

.confirm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--sello);
  border-radius: var(--r);
}
.confirm-bar .muted { display: block; font-size: var(--t-s); max-width: 62ch; }

/* -------------------------------------------------------------- botones */

.btn {
  font: 600 var(--t-s)/1 var(--sans);
  padding: .62rem 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-soft); }

.btn-primary {
  color: #fff;
  background: var(--sello);
  border-color: var(--sello);
}
.btn-primary:hover { filter: brightness(1.08); }

.link {
  font: inherit;
  font-size: var(--t-s);
  padding: 0;
  color: var(--registro);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.link:hover { text-decoration-thickness: 2px; }
.gate-foot .link { font-size: inherit; }

/* --------------------------------------------------------- libro de dias

   Contabilidad, no dashboard: solo lineas finas, sin cebra, sin sombra.   */

.ledger-scroll { overflow-x: auto; }

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  font-size: var(--t-s);
}

.grid th, .grid td {
  padding: .55rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline-2);
  vertical-align: top;
  white-space: nowrap;
}
.grid thead th {
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.grid tbody tr:last-child td { border-bottom: 0; }

/* LA RAYA. A la izquierda jornada legal, a la derecha gestion.
   Va marcada con una CLASE, no con nth-child: la columna "Jornada" es la
   quinta en el portal y la tercera en la plantilla, y una regla posicional
   habria puesto la raya en el sitio equivocado en cuanto apareciera la
   segunda tabla. La separacion es normativa: tiene que viajar con la celda.
*/
.grid th.legal,
.grid td.legal { border-right: 3px double var(--rule-legal); }

.grid td.legal { font-weight: 640; }

/* "Por explicar": sin color de alarma. Ni rojo, ni ambar, ni icono. */
.grid td.explain { color: var(--ink); }
.grid td.explain .tag { border-style: solid; }

.grid tbody tr.is-ok       td:first-child { box-shadow: inset 3px 0 0 var(--sello); }
.grid tbody tr.is-disputed td:first-child { box-shadow: inset 3px 0 0 var(--revision); }

.grid-sm { font-size: var(--t-xs); }
.grid-sm td, .grid-sm th { padding: .4rem .6rem; }

.tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  white-space: nowrap;
}
.tag-ok   { color: var(--sello);    border-color: var(--sello);    background: var(--sello-bg); }
.tag-warn { color: var(--revision); border-color: var(--revision); background: var(--revision-bg); }

.legend {
  margin: 1rem 0 0;
  padding-left: .9rem;
  border-left: 3px double var(--rule-legal);
  font-size: var(--t-s);
  color: var(--ink-soft);
  max-width: 74ch;
}
.legend strong { color: var(--ink); }

.links { margin-top: 1.6rem; font-size: var(--t-s); }

/* ------------------------------------------------------------- paneles */

.panel {
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.panel h2 {
  padding-bottom: .5rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--hairline-2);
}
.panel p { max-width: 72ch; }

.list { margin: 0 0 .6rem; padding-left: 1.15rem; }
.list li { margin-bottom: .3rem; }
.list-yes { list-style: none; padding-left: 0; }
.list-yes li::before { content: "+"; display: inline-block; width: 1.2em; color: var(--sello); font-weight: 700; }
.list-no  { list-style: none; padding-left: 0; }
.list-no li::before { content: "\2212"; display: inline-block; width: 1.2em; color: var(--ink-soft); font-weight: 700; }

.fp { font-family: var(--mono); font-size: .95em; color: var(--ink-soft); }
code { font-family: var(--mono); }

/* -------------------------------------------------------------- dialogo */

dialog {
  width: min(34rem, calc(100vw - 2rem));
  padding: 1.3rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
dialog::backdrop { background: rgb(19 33 44 / .45); }
dialog h2 { margin-top: 0; }
dialog p  { font-size: var(--t-s); max-width: 60ch; }

textarea {
  width: 100%;
  padding: .6rem;
  font: var(--t-s)/1.5 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  resize: vertical;
}

dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin: 1rem 0 0;
  padding: 0;
}

/* --------------------------------------------------------------- acceso */

.gate {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem;
}
.gate-box {
  width: min(23rem, 100%);
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--sello);
  border-radius: var(--r);
}
.gate-box h1 { font-size: var(--t-l); }
.gate-box .btn { width: 100%; margin-top: .4rem; }
.gate-foot { margin-top: 1.1rem; font-size: var(--t-xs); color: var(--ink-soft); }

.field { display: block; margin-bottom: .85rem; }
.field span { display: block; margin-bottom: .25rem; font-size: var(--t-s); font-weight: 600; }
.field input,
.field select {
  width: 100%;
  padding: .6rem .7rem;
  font: var(--t-b)/1.3 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.field input[inputmode="numeric"] {
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: .35em;
  text-align: center;
}

.month-pick input {
  padding: .45rem .6rem;
  font: var(--t-s)/1.2 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 46rem) {
  .cards { grid-template-columns: 1fr; }
  .card  { border-left: 0; border-top-width: 2px; border-bottom: 1px solid var(--hairline-2); }
  .card:last-child { border-bottom: 0; }
  .card-plus, .card-minus { border-top-style: solid; }
  .page-head { align-items: flex-start; }
  .confirm-bar .btn { width: 100%; }
  .ledger { min-width: 44rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- papel

   El trabajador y el inspector imprimen esto. La doble raya sobrevive a
   la impresion: es lo unico que no puede perderse al pasar a papel.       */

@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --ink-soft: #333;
          --hairline: #888; --hairline-2: #bbb; --rule-legal: #000; }
  .topbar, .foot, .confirm-bar, .links, .month-pick, .link, dialog { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .grid { font-size: 9pt; border-color: #000; }
  .ledger-scroll { overflow: visible; }
  .ledger { min-width: 0; }
  .grid thead { display: table-header-group; }
  .grid tr { break-inside: avoid; }
  .legend { color: #000; }
  a { color: #000; text-decoration: none; }
}

/* -------------------------------------------------- alta de segundo factor

   El QR se imprime en blanco y negro puros aunque el resto de la interfaz
   cambie de tema: un lector con poca luz no perdona un QR gris sobre gris.
   Por eso lleva fondo propio y no hereda los tokens.                       */

.gate-wide { align-items: start; }
.gate-box-wide { width: min(42rem, 100%); }

.enroll {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1rem 0 1.2rem;
  margin: 1rem 0 1.2rem;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
}

.enroll-qr {
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  line-height: 0;
}
.qr { display: block; width: 11rem; height: auto; }

.enroll-steps p { font-size: var(--t-s); max-width: 44ch; }

.secret {
  padding: .55rem .7rem;
  font: 1.05rem/1.4 var(--mono);
  letter-spacing: .06em;
  word-break: break-all;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  -webkit-user-select: all;
  user-select: all;
}

.enroll-form .field:last-of-type { margin-bottom: 1rem; }

.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem 1rem;
  margin: 1rem 0 1.2rem;
  padding-left: 1.4rem;
}
.codes code {
  font-size: 1.05rem;
  letter-spacing: .04em;
  -webkit-user-select: all;
  user-select: all;
}

a.btn { display: inline-block; text-decoration: none; }

@media (max-width: 34rem) {
  .enroll { grid-template-columns: 1fr; }
  .codes  { grid-template-columns: 1fr; }
}

@media print {
  /* La pantalla de codigos esta hecha para imprimirse. */
  .codes { grid-template-columns: repeat(2, 1fr); }
  .gate-box, .gate-box-wide { border: 1px solid #000; }
  .enroll-form, .gate-foot, a.btn { display: none !important; }
}

/* =========================================================== panel de empresa

   Una nota sobre el color aquí: la gravedad de un aviso SÍ lleva color,
   porque un aviso es una señal que alguien tiene que atender. El tiempo
   "por explicar" NO lo lleva, porque no es una señal: es la ausencia de
   evidencia. Confundir las dos cosas es lo que convierte una herramienta de
   cumplimiento en una de sospecha.
   ========================================================================= */

.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card .of { font-size: 1.1rem; font-weight: 400; color: var(--ink-soft); }

/* Las cifras de gestión se separan de las legales con la misma raya doble
   que el libro de jornadas. Es el mismo mensaje en otro sitio. */
.card-gestion { border-left: 3px double var(--rule-legal); }

.queue { margin-top: 1.8rem; }

.queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--hairline);
}
.queue-head h2 { margin: 0; font-size: 1.05rem; }
.queue-head a  { font-size: var(--t-s); }

.feed { margin: 0; padding: 0; list-style: none; }
.feed li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem 0;
  font-size: var(--t-s);
  border-bottom: 1px solid var(--hairline-2);
}
.feed li:last-child { border-bottom: 0; }

.when {
  min-width: 9rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.when.urgent { color: var(--revision); font-weight: 600; }

.nombre { font-weight: 600; }

.rule {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.sev {
  padding: .05rem .45rem;
  font-size: var(--t-xs);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.sev-info   { color: var(--ink-soft); }
.sev-low    { color: var(--ink-soft); }
.sev-medium { color: var(--revision); border-color: var(--revision); }
.sev-high   { color: #fff; background: var(--revision); border-color: var(--revision); }

/* Cada aviso se abre con <details>: sin JavaScript, sin modal, y con un clic
   de fricción antes de ver el detalle de una persona. */
.aviso {
  margin-bottom: .5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.aviso > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem;
  padding: .7rem .9rem;
  font-size: var(--t-s);
  cursor: pointer;
}
.aviso[open] > summary { border-bottom: 1px solid var(--hairline-2); }

.aviso-body { padding: .9rem; }
.aviso-body .field { max-width: 46rem; }

.aviso-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .3rem;
}

.btn-danger { color: var(--revision); border-color: var(--revision); }
.btn-danger:hover { color: #fff; background: var(--revision); }

.claim {
  max-width: 62ch;
  margin: 0 0 .8rem;
  padding: .6rem .9rem;
  font-size: var(--t-s);
  background: var(--paper);
  border-left: 3px solid var(--hairline);
  border-radius: var(--r);
}

@media (max-width: 60rem) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 46rem) {
  .cards-4 { grid-template-columns: 1fr; }
  .card-gestion { border-left: 0; border-top: 3px double var(--rule-legal); }
  .when { min-width: 0; }
  .ledger-emp { min-width: 52rem; }
}

/* ================================================================= planes

   La tarjeta del plan actual NO es la más llamativa. Lo llamativo tiene que
   ser hacia dónde puedes ir, no dónde estás. Se marca con un borde sólido a
   la izquierda y nada más.
   ======================================================================= */

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem;
  margin-bottom: 1.6rem;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.plan-actual { border-left: 3px solid var(--sello); }
.plan h2 { margin: 0; font-size: 1.05rem; }

.plan-precio {
  margin: .2rem 0 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.plan-unidad { font-size: var(--t-xs); font-weight: 400; color: var(--ink-soft); }

.plan-total {
  margin: 0 0 .4rem;
  font-size: var(--t-s);
  color: var(--sello);
  font-variant-numeric: tabular-nums;
}

.plan form { margin-top: auto; padding-top: .6rem; }
.plan .btn { width: 100%; }
.plan .tag { margin: auto 0 0; align-self: flex-start; }

/* Casillas legales del alta: el texto manda, la casilla acompaña. */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  margin-bottom: .9rem;
  font-size: var(--t-s);
  line-height: 1.45;
}
.check input { margin-top: .25rem; }

.field .hint {
  display: block;
  margin-top: .25rem;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ======================================================== avisos de cobro

   El aviso de cobro NO usa el rojo de las disconformidades. Un recibo
   devuelto es un trámite; una reclamación de un trabajador es un conflicto.
   Mismo tono de aviso para los dos haría que el primero devaluase al segundo.
   ======================================================================= */

.aviso-cobro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.aviso-cobro p { margin: .2rem 0 0; max-width: 72ch; }
.aviso-cobro .btn { white-space: nowrap; }

.periodo { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.btn-on {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.tarjeta {
  font-family: var(--mono);
  font-size: var(--t-s);
  margin-bottom: .4rem;
}

.plan-total .tag { margin-left: .4rem; }

/* ============================================== cambios de política

   El signo va delante y con color, pero el "+" NO es rojo. Añadir una
   recogida de datos no es una agresión: es una decisión de la empresa de la
   que el trabajador tiene derecho a enterarse. Pintarla de rojo convertiría
   cada ajuste legítimo en un conflicto.
   ================================================================= */

.list-cambios { list-style: none; padding-left: 0; max-width: 72ch; }
.list-cambios li { padding-left: 1.5em; text-indent: -1.5em; }
.list-cambios li::before { display: inline-block; width: 1.5em; text-indent: 0; font-weight: 700; }
.cambio-mas::before   { content: "+"; color: var(--registro); }
.cambio-menos::before { content: "\2212"; color: var(--sello); }

/* ===================================================== alta de personas */

.head-acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.inline-form { display: inline; }

.field select {
  width: 100%;
  padding: .6rem .7rem;
  font: var(--t-b)/1.3 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}

.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================== documentación legal

   El documento se ve en monoespaciado y con su salto de línea intacto: está
   hecho para copiarse, imprimirse o pegarse en el papel con membrete de la
   empresa. Reformatearlo como prosa web obligaría a recomponerlo a mano.
   =================================================================== */

.doc {
  max-width: 78ch;
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font: var(--t-xs)/1.55 var(--mono);
  white-space: pre-wrap;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  -webkit-user-select: all;
  user-select: all;
}

.pasos li { margin-bottom: .6rem; }

@media print {
  .doc { background: #fff; border: 0; padding: 0; font-size: 10pt; }
  .panel { border: 0; padding: 0; }
}

/* ======================================== control de presencia: ON / OFF

   Verde y rojo, y aquí sí. En el resto del producto el rojo está reservado y
   "por explicar" nunca lo lleva, porque señalar a una persona con rojo es
   acusarla. Esto no señala a nadie: describe el estado de un interruptor que
   la empresa controla, y ahí el rojo es lo que todo el mundo entiende sin
   leer.
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  font: 600 var(--t-xs)/1.4 var(--sans);
  letter-spacing: .02em;
  border: 1px solid;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.badge[disabled] { cursor: default; opacity: .8; }

.badge-on  { color: var(--sello);    border-color: var(--sello);    background: var(--sello-bg); }
.badge-off { color: var(--revision); border-color: var(--revision); background: var(--revision-bg); }

.badge-editar { opacity: .6; font-size: .9em; }
.badge:hover:not([disabled]) .badge-editar { opacity: 1; }

dialog menu form { margin: 0; }

/* ===================================================== portal del comité */

.cambio {
  padding-bottom: .8rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--hairline-2);
}
.cambio:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cambio p { margin: 0 0 .35rem; }
.cambio .list-cambios { margin: 0; }

/* ======================================== cambio de sombrero (comité)

   El aviso de que estás en otra condición va ARRIBA y con borde azul, no
   verde ni rojo: no es una alerta ni una confirmación, es una nota de
   contexto. Quien entra a una reunión del comité tiene que saber sin pensar
   en qué vista está.
   ===================================================================== */

.note-hat { border-left-color: var(--registro); }

/* Notificaciones a la empresa (partials/notificaciones). */
.notificaciones { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.notif {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: .75rem 1rem; border-left: 4px solid; border-radius: var(--r);
}
.notif-texto strong { display: block; margin-bottom: .2rem; }
.notif-texto p { margin: 0 0 .3rem; font-size: var(--t-s); color: var(--ink); }
.notif-texto a { font-size: var(--t-s); }
.notif-cerrar { flex: none; margin: 0; }
.notif-green  { border-left-color: var(--notif-verde); background: var(--notif-verde-bg); }
.notif-yellow { border-left-color: var(--notif-ambar); background: var(--notif-ambar-bg); }
.notif-red    { border-left-color: var(--notif-rojo);  background: var(--notif-rojo-bg); }
.notif-green strong  { color: var(--notif-verde); }
.notif-yellow strong { color: var(--notif-ambar); }
.notif-red strong    { color: var(--notif-rojo); }


/* =====================================================================
   WEB PÚBLICA

   Misma gramática que el producto, para que quien se da de alta no cambie
   de mundo: papel, tinta, un solo acento verde, líneas finas y ninguna
   sombra. La seriedad no la da el adorno sino la contención.

   Todo en CSS y fuentes del sistema. Ninguna imagen: el único "gráfico" de
   la portada es una tabla, que carga con el texto y se lee con lector de
   pantalla.
   ===================================================================== */

.saltar {
  position: absolute; left: -999px; top: .5rem;
  padding: .5rem .8rem; background: var(--surface); border: 1px solid var(--ink);
}
.saltar:focus { left: .5rem; z-index: 10; }

.precio-fijo { font-size: 1.3rem; font-weight: 600; margin-bottom: .3rem; }

/* ------------------------------------------------------------ cabecera */

.pub-top { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.pub-top-in {
  display: flex; align-items: center; gap: 1.6rem;
  max-width: 72rem; margin: 0 auto; padding: .85rem 1.25rem;
}
.pub-top .brand { font-size: 1.1rem; }
.pub-nav { display: flex; gap: 1.3rem; font-size: var(--t-s); }
.pub-nav a, .pub-acciones > a:not(.btn) { color: var(--ink); text-decoration: none; }
.pub-nav a:hover, .pub-acciones > a:not(.btn):hover { color: var(--registro); }
.pub-acciones { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: var(--t-s); }

/* ----------------------------------------------------------------- hero */

.hero { max-width: none; padding: 0; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.hero-in {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: center;
  max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.25rem 4rem;
}
/* Sin esto, un hijo de rejilla con una palabra larga desborda la columna en
   movil: el valor por defecto de min-width en un item de grid es `auto`. */
.hero-texto { min-width: 0; }

.hero-kicker {
  margin: 0 0 1rem; font-size: var(--t-s); color: var(--sello); font-weight: 600;
}
.hero h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em;
}
.hero-lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); max-width: 36rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 1rem; }
.hero-letra { font-size: var(--t-s); color: var(--ink-soft); max-width: 34rem; }
.btn-grande { padding: .85rem 1.35rem; font-size: 1rem; }
a.btn { text-decoration: none; }

/* El libro de jornadas de la portada. El problema, contado con la misma
   doble raya que separa lo legal de lo verificado dentro del producto. */
.hero-libro {
  margin: 0; padding: 1.4rem 1.5rem 1.2rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.hero-libro figcaption {
  font-size: var(--t-s); font-weight: 600; padding-bottom: .7rem; margin-bottom: .6rem;
  border-bottom: 2px solid var(--ink);
}
.hero-libro table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-bottom: 1rem; }
.hero-libro td { padding: .15rem 0; }
.libro-par { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--hairline); }
.libro-par > div { padding: .9rem 1rem; }
.libro-par .k { display: block; font-size: var(--t-xs); color: var(--ink-soft); }
.libro-par strong { display: block; font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.libro-derecha { border-left: 3px double var(--rule-legal); }
.libro-derecha strong { color: var(--revision); }
.libro-nota { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: .25rem; }
.libro-pie { margin: .9rem 0 0; font-size: var(--t-s); color: var(--ink-soft); }

/* ---------------------------------------------------- secciones y ritmo */

.bloque-in, .franja-in, .final-in { max-width: 72rem; margin: 0 auto; padding: 4rem 1.25rem; }
.bloque-estrecho .bloque-in, .bloque-lectura { max-width: 46rem; }
.bloque h2, .franja h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.02em; margin-bottom: 1.2rem; }

.franja { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.franja-oscura { background: var(--franja); color: var(--franja-ink); border: 0; }
.franja-oscura h2 { color: #fff; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.dos-ancho { gap: 4rem; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.tres h3 {
  font-size: 1.25rem; padding-bottom: .6rem; margin-bottom: .8rem;
  border-bottom: 2px solid var(--sello);
}
.tres p, .dos p { color: var(--ink-soft); line-height: 1.6; }

.etiqueta { font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); margin-bottom: .5rem; }
.etiqueta-verde { color: var(--sello); }

.noes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; }
.noes li { line-height: 1.55; color: #c9d5dd; padding-left: 1.4rem; position: relative; }
.noes li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: .55rem; height: 2px; background: var(--franja-ink);
}
.noes strong { display: block; color: #fff; margin-bottom: .2rem; }

.precio-cab { margin-bottom: 1.6rem; }
.mini-planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.mini-plan {
  display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r);
  color: var(--ink); text-decoration: none;
}
.mini-plan:hover { border-color: var(--ink-soft); }
.mini-nombre { font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); }
.mini-precio { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.mini-unidad { font-size: var(--t-xs); color: var(--ink-soft); }
.centro { text-align: center; margin-top: 1.4rem; }

.gestorias-banda { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.gestorias-banda p { color: var(--ink-soft); max-width: 36rem; margin: 0; }

.faq { border-bottom: 1px solid var(--hairline); }
.faq summary {
  padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-soft); font-weight: 400; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 1.2rem; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }

.final { background: var(--surface); border-top: 1px solid var(--hairline); text-align: center; }
.final h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.final p { color: var(--ink-soft); }

/* ---------------------------------------------------------- precios */

.pub-cab { margin-bottom: 2.4rem; }
.pub-cab h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; margin-bottom: .6rem; }

.pub-planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.pub-plan {
  display: flex; flex-direction: column; padding: 1.5rem 1.3rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
}
.pub-plan-dest { border: 2px solid var(--sello); }
.pub-sello { margin: -.2rem 0 .6rem; font-size: var(--t-xs); font-weight: 600; color: var(--sello); }
.pub-plan h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.pub-precio { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.pub-precio span { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.pub-anual { font-size: var(--t-s); color: var(--sello); margin: .6rem 0; }
.pub-pitch { font-size: var(--t-s); color: var(--ink-soft); flex: 1; }
.pub-plan .btn { width: 100%; text-align: center; margin-top: 1rem; }
.pub-anual-link { display: block; text-align: center; font-size: var(--t-s); margin-top: .6rem; }

.comparar td:not(:first-child), .comparar th:not(:first-child) { text-align: center; }
.comparar .grupo td {
  font-weight: 600; font-size: var(--t-xs); color: var(--ink-soft);
  background: var(--paper); padding-top: .9rem;
}

/* ------------------------------------------------------ cómo funciona */

.pasos-pub { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 3rem; }
.pasos-pub li {
  counter-increment: paso; position: relative;
  padding: 0 0 1.8rem 3.2rem; border-left: 1px solid var(--hairline); margin-left: 1rem;
}
.pasos-pub li:last-child { border-left-color: transparent; }
.pasos-pub li::before {
  content: counter(paso); position: absolute; left: -1rem; top: -.1rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  font-weight: 600; font-size: var(--t-s);
}
.pasos-pub h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.pasos-pub p { color: var(--ink-soft); line-height: 1.6; margin: 0; }

.bloque-lectura > h2 { margin-top: 2.4rem; }
.bloque-lectura > p { line-height: 1.65; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 1rem 0 1.6rem; font-size: var(--t-s); }
.datos dt { color: var(--ink-soft); }
.datos dd { margin: 0; font-weight: 500; }

/* ------------------------------------------------------------ contacto */

.form-pub { max-width: 34rem; }
.field textarea { width: 100%; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contacto-alt { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------- legal */

.legal h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; letter-spacing: -.01em; }
.legal p, .legal li { line-height: 1.65; }
.legal .list { margin-bottom: 1rem; }
.aviso-borrador {
  padding: .7rem .9rem; margin-bottom: 1.6rem; font-size: var(--t-s);
  background: var(--revision-bg); border-left: 3px solid var(--revision);
}
.nota-clave {
  padding: 1rem 1.2rem; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--registro);
}
.nota-clave p { margin: .5rem 0 0; font-size: var(--t-s); }
.tabla-legal td { white-space: normal; vertical-align: top; }

/* Un dato legal que falta tiene que ser IMPOSIBLE de pasar por alto. Si se
   publica así, al menos que se vea a la primera. */
.pendiente {
  display: inline-block; padding: .05rem .4rem; font-weight: 700; font-size: .85em;
  color: #fff; background: var(--revision); border-radius: var(--r);
}

/* --------------------------------------------------------------- pie */

.pub-pie { background: var(--surface); border-top: 1px solid var(--hairline); }
.pub-pie-in {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2rem;
  max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 2rem;
}
.pie-col { display: flex; flex-direction: column; gap: .45rem; font-size: var(--t-s); }
.pie-col a { color: var(--ink-soft); text-decoration: none; }
.pie-col a:hover { color: var(--registro); }
.pie-col p { margin: 0 0 .4rem; }
.pie-t { font-weight: 600; color: var(--ink); }
.pie-lssi {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem 2rem;
  font-size: var(--t-xs); color: var(--ink-soft); border-top: 1px solid var(--hairline-2);
}

/* Plan elegido en la web al crear la cuenta. */
.plan-elegido { border: 2px solid var(--sello); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 60rem) {
  .hero-in { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 3rem; }
  .tres { grid-template-columns: 1fr; gap: 1.8rem; }
  .pub-planes, .mini-planes { grid-template-columns: 1fr 1fr; }
  .pub-pie-in { grid-template-columns: 1fr 1fr; }
  .pub-nav { display: none; }
}

@media (max-width: 40rem) {
  .dos, .dos-ancho, .noes { grid-template-columns: 1fr; gap: 1.6rem; }
  .pub-planes, .mini-planes { grid-template-columns: 1fr; }
  .gestorias-banda { flex-direction: column; align-items: flex-start; }
  .pub-pie-in { grid-template-columns: 1fr; }
  .bloque-in, .franja-in, .final-in { padding: 2.8rem 1.1rem; }
  .pub-acciones > a:not(.btn) { display: none; }
  .libro-par strong { font-size: 1.5rem; }
}

@media print {
  .pub-top, .pub-pie, .saltar, .aviso-borrador { display: none !important; }
  .bloque-in { padding: 0; max-width: none; }
}

/* ======================================================= cuadros de mando

   Graficos en HTML y CSS, sin libreria ni script: barras de un solo tono
   (--registro) con la escala en cero y el valor escrito siempre al lado.
   El color no lleva informacion que no este tambien en el texto.
   El estado (bien / vigilar / actuar) va con simbolo y palabra, nunca solo
   con color.                                                              */

.cards-5 { grid-template-columns: repeat(5, 1fr); }
.card .delta { display: block; margin-top: .35rem; font-size: var(--t-xs); color: var(--ink-soft); }

.tag-crit {
  color: var(--surface); border-color: var(--revision); background: var(--revision);
  font-weight: 640;
}

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros .field { margin: 0; }
.filtros input, .filtros select {
  padding: .4rem .5rem; font: inherit; font-size: var(--t-s);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r);
}

.periodo { display: flex; gap: .3rem; font-size: var(--t-s); }
.periodo a { padding: .2rem .55rem; border: 1px solid var(--hairline); border-radius: var(--r); text-decoration: none; }
.periodo a[aria-current] { color: var(--surface); background: var(--registro); border-color: var(--registro); }

/* Barras horizontales: etiqueta | barra | valor */
.hbars { margin: 0; padding: 0; list-style: none; }
.hbars li {
  display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr 4.5rem;
  gap: .6rem; align-items: center; padding: .18rem 0; font-size: var(--t-s);
}
.hbars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .val { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { height: .7rem; }
.bar {
  display: block; height: 100%; min-width: 0;
  background: var(--registro); border-radius: 0 4px 4px 0;
}
.grid .bar-track { min-width: 5rem; }

/* Columnas por mes u hora. Valor encima, etiqueta debajo. */
.cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; align-items: end; height: 10rem; margin: .4rem 0 0;
  padding: 0; list-style: none; border-bottom: 1px solid var(--hairline);
}
.cols li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.cols li:hover .col { filter: brightness(1.15); }
.cols .col { display: block; background: var(--registro); border-radius: 4px 4px 0 0; }
.cols .v { font-size: .6875rem; text-align: center; color: var(--ink-soft); white-space: nowrap; }
.cols-x {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  margin: .2rem 0 0; padding: 0; list-style: none;
  font-size: .6875rem; color: var(--ink-soft); text-align: center;
}
.cols-x li { overflow: hidden; white-space: nowrap; }
.cols-dense .v { display: none; }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.dos-col > .panel { margin-top: 0; min-width: 0; }
.cards-5 .big { font-size: 1.6rem; }

/* El menu de plataforma tiene siete enlaces: en movil bajan de linea. */
.topbar nav { flex-wrap: wrap; row-gap: .3rem; }

.estado-area { display: flex; align-items: baseline; gap: .5rem; }
.estado-area h2 { margin: 0; }

@media (max-width: 60rem) {
  .cards-5 { grid-template-columns: repeat(2, 1fr); }
  .dos-col { grid-template-columns: 1fr; }
}
@media (max-width: 46rem) {
  .cards-5 { grid-template-columns: 1fr; }
  .hbars li { grid-template-columns: 7rem 1fr 3.5rem; }
  .cols-x li:nth-child(even) { visibility: hidden; }
}

/* ============================================================ guia

   Primeros pasos. Arriba de la pagina y sin color de alarma: es ayuda, no
   un aviso. Lo hecho se queda a la vista tachado en gris para que se vea el
   avance.                                                                 */

.guia {
  margin-bottom: 1.4rem; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--registro); border-radius: var(--r);
}
.guia-head { display: flex; align-items: baseline; gap: .6rem; }
.guia-head h2 { margin: 0; font-size: 1.05rem; }
.guia-head .spacer { flex: 1; }
.guia-head form { margin: 0; }
.guia-head button.link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-xs); cursor: pointer; }
.guia > p { margin: .3rem 0 .6rem; }
.guia-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.guia-pasos li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem;
  padding: .4rem 0; border-top: 1px solid var(--hairline-2); font-size: var(--t-s);
  counter-increment: paso;
}
.guia-marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border: 1px solid var(--hairline); border-radius: 50%;
  font-size: var(--t-xs); color: var(--sello);
}
.guia-pasos li:not(.is-hecho) .guia-marca::before { content: counter(paso); color: var(--ink-soft); }
.guia-pasos li.is-hecho { color: var(--ink-soft); }
.guia-pasos li.is-hecho .guia-marca { border-color: var(--sello); background: var(--sello-bg); }
.guia-por { display: block; margin-top: .1rem; font-size: var(--t-xs); color: var(--ink-soft); max-width: 70ch; }

/* Usuarios del panel: la tabla separada del formulario y las acciones en
   una linea. */
.tabla-usuarios { margin-bottom: 1.4rem; }
.grid td.acciones { white-space: nowrap; }
.grid td.acciones .inline-form + .inline-form { margin-left: .6rem; }