/* Componentes y armazón de la plataforma (spec 2026-09-29 §2, plan paso A4a).
   Solo var(--…) de css/marca.css: aquí no hay ni un color escrito a mano (lo vigila tests/css.test.mjs).
   Esquinas: --r-caja (0) en todo lo que es caja, --r-chip (3 px) en chips y avisos, 50 % solo en lo redondo.
   Un único corte de viewport (860/861 px); lo demás, container queries sobre main. */

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 15px/1.55 var(--f);
  background: var(--ground);
  color: var(--ink);
}
main {
  display: block;
  width: 100%;               /* dentro de la rejilla de .armazon, un margin auto sin ancho encogería main */
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px var(--gutter) 80px;
  container-type: inline-size;
}
p { margin: 0 0 12px; }
b, strong { font-weight: 600; }
a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }

/* ---------------------------------------------------------------- Títulos: la firma es la barra azul del h1 */
h1 {
  margin: 0 0 24px;
  font: 600 28px/1.2 var(--f);
  letter-spacing: -.01em;
  color: var(--blue-ink);
  text-wrap: balance;
}
h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 12px;
  background: var(--blue);
}
h2 { margin: 0 0 12px; font: 600 18px/1.3 var(--f); color: var(--title); text-wrap: balance; }
* + h2 { margin-top: 32px; }   /* un h2 detrás de botones, campos o texto no se queda pegado (A4b, duda 3a) */
h3 { margin: 24px 0 8px; font: 600 16px/1.35 var(--f); color: var(--title); }

/* ---------------------------------------------------------------- Botones */
button, a.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: 500 14px/1.3 var(--f);
  white-space: nowrap;
  text-decoration: none;
  color: var(--on-blue);
  background: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: var(--r-caja);
  cursor: pointer;
}
:is(button, a.boton):not(:disabled):hover { filter: brightness(.92); }
:is(button, a.boton).secundario { color: var(--blue-ink); background: var(--surface); }
:is(button, a.boton).secundario:not(:disabled):hover { filter: none; background: var(--blue-soft); }
:is(button, a.boton).peligro { color: var(--on-bad); background: var(--bad-fill); border-color: var(--bad-fill); }
:is(button, a.boton).pequeno { padding: 5px 11px; font-size: 13px; }
[disabled] { opacity: .5; cursor: not-allowed; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* B6 (H-9): a 320 px «Confirmar y escribir en el Holded simulado» no cabe en una línea y, con el `nowrap` de los botones,
   ensanchaba la página a 355. Dentro de una fila de botones, el texto parte si no cabe (con sitio, sigue en una línea). */
.botones > button { white-space: normal; }

/* ---------------------------------------------------------------- Campos */
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.campo > span { font-size: 13px; font-weight: 500; color: var(--title); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 9px 11px;
  font: 400 14px/1.4 var(--f);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--r-caja);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 0;
}
small.hint { font-size: 13px; color: var(--ink-3); }
small.error { font-size: 13px; }
.nota label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---------------------------------------------------------------- Chips (3 px, color de estado) */
.chip, .chip-dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font: 500 13px/1.5 var(--f);
  white-space: nowrap;
  border-radius: var(--r-chip);
}
.chip { color: var(--slate); background: var(--slate-soft); }
.chip-ok { color: var(--ok); background: var(--ok-soft); }
.chip-pendiente { color: var(--warn); background: var(--warn-soft); }
.chip-error { color: var(--bad); background: var(--bad-soft); }
.chip-vacio { color: var(--slate); background: var(--slate-soft); }
.chip-dev { padding: 1px 7px; color: var(--ink-3); background: none; border: 1px dashed var(--ink-3); cursor: help; }
.chip-dev::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* ---------------------------------------------------------------- Tarjetas: flotan en claro, borde fino en oscuro */
.tarjeta, .tarjeta-robot, .tarjeta-gris, .mini {
  margin: 0 0 20px;
  padding: 22px 24px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--r-caja);
  box-shadow: var(--sombra);
}
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
.estrecha { max-width: 520px; }
.tarjeta-robot { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-robot > * { margin: 0; }
.tarjeta-robot > .botones { margin-top: auto; }
.tarjeta-gris { color: var(--ink-2); background: none; border: 1px dashed var(--line-2); box-shadow: none; }
.tarjeta-gris h3 { color: var(--ink-2); }
.mini { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.mini > * { margin: 0; }
:is(.tarjeta-robot, .mini) > :is(.chip, .chip-dev, button, a.boton) { align-self: flex-start; }

/* ---------------------------------------------------------------- Tabla: sin rejilla vertical, cifras a la derecha */
/* position: relative hace de la tarjeta el bloque contenedor del .solo-lector absoluto: lo recorta y no estira la página. */
.tabla-ancha { overflow-x: auto; position: relative; }
.tabla-ancha > table { min-width: 640px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  padding: 10px 12px;
  font: 600 11px/1.4 var(--f);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child > td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Avisos y notas */
p.aviso, p.error { margin: 0 0 16px; padding: 10px 14px; font-size: 14px; border-radius: var(--r-chip);
                   overflow-wrap: anywhere; }   /* B3c2: un nombre sin espacios en un aviso no ensancha la página (Claves a 390) */
p.aviso { color: var(--warn); background: var(--warn-soft); }
p.error { color: var(--bad); background: var(--bad-soft); }
.error { color: var(--bad); }
form > button + p.error, form > button + p.aviso { margin: 16px 0 0; }
.nota { margin: 8px 0; font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------------- Confirmación: el único movimiento, al abrirla */
.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 460px);   /* BR5 (H1): la pista encoge a 390 px aunque el texto no parta */
  justify-content: center;                   /* una pista fija no se estira: se centra */
  place-items: center;
  padding: 16px;
  background: var(--velo);
  animation: funde .16s ease-out;
}
.modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow-wrap: anywhere;                   /* un nombre largo sin espacios parte dentro del modal */
  width: min(460px, 100%);
  padding: 24px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--r-caja);
  box-shadow: var(--sombra-2);
  animation: aparece .16s ease-out;
}
.modal > * { margin: 0; }
.modal .botones { justify-content: flex-end; }
@keyframes funde { from { opacity: 0; } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- Tooltip propio (ratón y teclado) */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 7px 10px;
  font: 500 13px/1.45 var(--f);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  color: var(--surface);
  background: var(--title);
  border-radius: var(--r-chip);
  pointer-events: none;
}
.tip-der[data-tip]:hover::after, .tip-der[data-tip]:focus-visible::after { left: auto; right: 0; }

/* ---------------------------------------------------------------- Foco visible en todo lo interactivo */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lateral :focus-visible { outline-color: var(--side-ink); }

/* ---------------------------------------------------------------- Armazón: l-login · l-top (barra) · l-emp (lateral) */
.armazon { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100vh; }
.armazon > .lateral { display: none; }
.armazon.l-emp > .lateral { display: flex; }
.armazon > .col { display: flex; flex-direction: column; min-width: 0; }
.armazon.l-login .barra, .armazon.l-emp .barra, .barra:empty { display: none; }
.armazon.l-login main { max-width: none; padding: 0; }
.armazon.l-emp main { margin: 0; }

.barra {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--borde-tarjeta);
  box-shadow: var(--sombra);
}
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  flex: 1 1 auto;
  max-width: calc(1180px - 2 * var(--gutter));
  margin: 0 auto;
}
.quien { margin-left: auto; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }

.logo { display: inline-flex; align-items: flex-end; gap: 8px; text-decoration: none; }
.logo img { height: 36px; width: auto; vertical-align: bottom; }
.logo-claro { display: var(--logo-l); }
.logo-oscuro { display: var(--logo-d); }
.sufijo { padding-bottom: 3px; font: 500 15px/1 var(--f); }
.barra .sufijo { color: var(--ink-3); }

.lateral { flex-direction: column; color: var(--side-ink-2); background: var(--side-bg); }
.lateral .logo { padding: 16px 18px 14px; color: var(--side-ink); background: var(--logo-bloque); }
.lateral .logo img { height: 40px; }
.menu { padding: 18px 14px; }
.menu > summary {
  padding: 9px 12px;
  font: 500 14px/1.3 var(--f);
  color: var(--side-ink);
  border: 1px solid var(--side-line);
  border-radius: var(--r-caja);
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { margin-bottom: 18px; }
.grupo { display: flex; flex-direction: column; gap: 2px; margin: 0 0 18px; }
.grupo-h {
  padding: 0 10px 6px;
  font: 600 11px/1.4 var(--f);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--side-ink-3);
  overflow-wrap: anywhere;   /* B5a (RBR56, I1): un nombre sin espacios parte dentro del lateral; a 1440 salía cortado */
}
.grupo a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--side-ink-2);
  text-decoration: none;
  border-radius: var(--r-caja);
}
/* N13g (H4, spec-mock §0 regla 2): lo que aún no está, atenuado. Antes del hover y del activo, que lo pisan. */
.grupo a:has(> .chip-dev) { color: var(--side-ink-3); }
.grupo a:hover { color: var(--side-ink); background: var(--side-hover); }
.grupo a[aria-current="page"] { font-weight: 500; color: var(--side-ink); background: var(--side-activo); }
.lateral .chip-dev { color: var(--side-ink-3); border-color: var(--side-ink-3); }
.grupo a .chip-dev { padding: 0 6px; font-size: 11px; }   /* compacto: cabe junto al nombre en más ítems */
.lado { display: flex; flex-direction: column; flex: 1 1 auto; }
.volver { display: block; margin: 0 0 18px; padding: 7px 10px; font-size: 14px; color: inherit; text-decoration: none; }
.volver:hover { text-decoration: underline; }
.pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: auto;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--side-line);
}
.correo { flex: 1 1 100%; font-size: 13px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Login: la única pantalla con paisaje */
.login {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 28px;
  min-height: 100vh;
  padding: 48px clamp(16px, 9vw, 140px);
  background:
    url("../img/forma-login.svg") no-repeat right -120px bottom -140px / min(640px, 70vw) auto,
    linear-gradient(to bottom, color-mix(in srgb, var(--cielo) 65%, var(--surface)), var(--surface));
}
.login .logo img { height: 48px; }
.login .tarjeta { width: min(420px, 100%); margin: 0; box-shadow: var(--sombra-2); }
.login .tarjeta button[type="submit"] { width: 100%; }
.login-tarjeta { display: flex; flex-direction: column; gap: 24px; padding: 32px 30px; }
.login-tarjeta > * { margin: 0; }
.login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.login-marca h1 { margin: 0; font-size: 22px; }
.login-marca .sufijo { color: var(--ink-3); }

/* ---------------------------------------------------------------- Piezas de pantalla */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--ink-3);
         overflow-wrap: anywhere; }   /* BR4a (H7): un nombre sin espacios parte; si no, a 390 px la página se ensancha */
.migas > * + *::before { content: "/"; display: inline-block; margin-right: 6px; color: var(--ink-3); }
.migas a { color: var(--blue-ink); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.lede { max-width: 64ch; margin: 8px 0 0; color: var(--ink-2); }
.cab-pantalla {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 0 0 28px;
}
.cab-titulo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; }
.cab-titulo > h1 { margin: 0; }
.cab-titulo > .chip-dev { margin-top: 8px; }
.cab-titulo + .lede { margin-top: 16px; }
.cab-lado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* B4b: por ARRIBA (antes flex-end): con «de M · P %» debajo de lo automático, la otra cifra quedaba 24 px más baja. */
.metricas { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.metricas > * { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }   /* cifra bajo su etiqueta, también al partirse (A4b, duda 3b) */
.eti { font: 600 11px/1.4 var(--f); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.grande {
  font: 600 28px/1.1 var(--f);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--title);
}
.de { font-size: 13px; color: var(--ink-3); }
.ult { margin: 0; font-size: 13px; color: var(--ink-2); }

.caja-gris {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-2);
  border: 2px dashed var(--line-2);
  border-radius: var(--r-caja);
}
.caja-gris > * { max-width: 52ch; margin: 0; }

ol.pasos { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
ol.pasos > li { position: relative; min-height: 36px; padding: 6px 0 0 56px; counter-increment: paso; }
ol.pasos > li > :first-child { margin-top: 0; }
ol.pasos > li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font: 600 15px/1 var(--f);
  color: var(--on-blue);
  background: var(--blue);
  border-radius: 50%;
}
ol.pasos > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -20px;
  left: 17px;
  width: 2px;
  background: var(--line);
}

/* Nueva empresa (B2a): UN form con los cuatro pasos; los campos de cada paso, en fila hasta 720 px (mock). */
.alta > .cab-pantalla { margin-bottom: 12px; }
.alta > .nota { margin: 0 0 32px; }   /* la nota de los secretos, pegada a la entradilla y separada de los pasos */
.alta > form { max-width: 776px; }
.alta ol.pasos { margin-bottom: 28px; }
.paso > h2 { margin: 0 0 14px; }
.fila-campos { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 18px; }
.fila-campos > .campo { flex: 1 1 220px; min-width: 0; }
.alta > form > button, .alta > form > p.error { margin-left: 56px; }   /* alineados con el texto de los pasos */

.kv { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kv dt, .kv .eti { font: 600 11px/1.4 var(--f); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kv dd { margin: 2px 0 0; font-weight: 500; color: var(--title); }

.g2, .g3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 32px; }
.g2 > *, .g3 > * { margin: 0; }
@container (min-width: 720px) { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 860px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Piezas de las pantallas de hoy */
.fila-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.fila-titulo > h1, .fila-titulo > h2 { margin: 0; }
.mono { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); overflow-wrap: anywhere; }
form.pegar { max-width: 520px; margin-top: 14px; }
form.pegar button { margin-right: 8px; }

/* ---------------------------------------------------------------- Directorio de empresas (B2b; mock §d) */
.directorio > .tabla-ancha > table { min-width: 760px; }
.directorio td { vertical-align: middle; }
.emp { display: flex; align-items: center; gap: 12px; }
.emp a { font-weight: 600; text-decoration: none; }
.emp a:hover { text-decoration: underline; }
.av {                                          /* iniciales: redondas por naturaleza (spec §2.11) */
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  font: 600 12px/1 var(--f);
  letter-spacing: .03em;
  color: var(--blue-ink);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: 50%;
}
.cifra { font-size: 15px; font-weight: 600; color: var(--title); }
.sin-dato { color: var(--ink-3); }
.sinclave { font-size: 13px; font-weight: 600; color: var(--bad); }
th.flecha, td.flecha { width: 1%; text-align: right; }
a.flecha {                                     /* la flecha de fila va recta, como los botones (spec §2.11) */
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--line-2);
}
a.flecha:hover { color: var(--blue-ink); border-color: var(--blue); }

/* ---------------------------------------------------------------- Claves de API (B3a; mock: bloque de clave) */
.claves { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
.claves > .clave { margin: 0; }
.clave { display: flex; flex-direction: column; gap: 14px; }
.clave > * { margin: 0; }
.clave-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.clave-h > h2 { margin: 0; }
.clave-h > .chip { min-width: 0; white-space: normal; }   /* el motivo del validador es largo: parte en líneas (390 px) */
.clave .campo { margin-bottom: 12px; }
.fallos { border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--ground); }
.fallos > summary { padding: 10px 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.fallos > ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 14px 14px; list-style: none; }
.fallos li { position: relative; padding: 8px 10px 8px 26px; font-size: 13px; color: var(--ink); background: var(--bad-soft); border-radius: var(--r-chip);
             overflow-wrap: anywhere; }   /* BR4a (H7): «otra cuenta» lleva el nombre de la empresa, sin espacios quizá */
.fallos li::before {                           /* punto rojo del mock: el texto ya dice el fallo */
  content: "";
  position: absolute;
  top: 14px;
  left: 11px;
  width: 6px;
  height: 6px;
  background: var(--bad);
  border-radius: 50%;
}
@container (min-width: 900px) { .claves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- Resumen de una empresa (B3c; mock: tarjetas) */
.resumen > .cab-pantalla { margin-bottom: 16px; }
.chips-conexion { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 28px; }
.chips-conexion > a.chip { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
.chips-conexion > a.chip:hover { text-decoration: underline; }
.grupo-resumen > h2 { margin: 0 0 14px; }
.tarjeta-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tarjeta-h > h3 { flex: 1 1 8em; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.tarjeta-h > h3 > a { color: inherit; text-decoration: none; }
.tarjeta-h > h3 > a:hover { text-decoration: underline; }
.tarjeta-robot > .tarjeta-h { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* B6 (H-10): «En desarrollo» va al final de su fila (la cabeza de una pieza gris del Resumen; la columna de piezas del
   directorio) y su tooltip, abierto hacia la derecha, se salía de la página (Resumen: 492 a 390 px, 1508 a 1440) o lo
   cortaba la tabla, que se desplaza (Empresas, en todos los anchos). Abre hacia la IZQUIERDA: en la tarjeta, desde el
   borde derecho de su fila (si el chip salta de línea, sigue dentro); en la tabla, desde el propio chip. */
.tarjeta-h { position: relative; }
.tarjeta-h > .chip-dev[data-tip] { position: static; }
.tarjeta-h > .chip-dev[data-tip]:hover::after, .tarjeta-h > .chip-dev[data-tip]:focus-visible::after,
td > .chip-dev[data-tip]:hover::after, td > .chip-dev[data-tip]:focus-visible::after { left: auto; right: 0; }
.ico {                                         /* icono del robot: redondo por naturaleza (spec §2.11) */
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--blue-ink);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: 50%;
}
.ico::before { content: ""; width: 21px; height: 21px; background: currentColor; -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain; }
.ico-contabilizador::before { -webkit-mask-image: url("../img/icono-contabilizador.svg"); mask-image: url("../img/icono-contabilizador.svg"); }
.ico-conciliador::before { -webkit-mask-image: url("../img/icono-conciliador.svg"); mask-image: url("../img/icono-conciliador.svg"); }
.ico-nominas::before { -webkit-mask-image: url("../img/icono-nominas.svg"); mask-image: url("../img/icono-nominas.svg"); }
.ico-gestor-email::before { -webkit-mask-image: url("../img/icono-gestor-email.svg"); mask-image: url("../img/icono-gestor-email.svg"); }
.ico-ageing::before { -webkit-mask-image: url("../img/icono-ageing.svg"); mask-image: url("../img/icono-ageing.svg"); }
.ico-reclamador::before { -webkit-mask-image: url("../img/icono-reclamador.svg"); mask-image: url("../img/icono-reclamador.svg"); }
.ico-remesas::before { -webkit-mask-image: url("../img/icono-remesas.svg"); mask-image: url("../img/icono-remesas.svg"); }
.ico-informe::before { -webkit-mask-image: url("../img/icono-informe.svg"); mask-image: url("../img/icono-informe.svg"); }
.tarjeta-gris .ico { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-2); }   /* aún no está */
.auto > .grande:not(.sin-dato) { color: var(--blue-ink); }   /* lo que hizo el robot, en azul (mock); «—» sigue gris */
.eti[data-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.nota-gris { margin: 0; font-size: 13px; color: var(--ink-2); }
.mini .tarjeta-h > h3 { font-size: 15px; }
/* B3c1: el nombre de la empresa es el h1 del Resumen: sin espacios, a 390 px ensanchaba la página a 714 px (medido) */
.cab-titulo > h1 { min-width: 0; overflow-wrap: anywhere; }
.resumen > p.error { overflow-wrap: anywhere; }
/* B3c1: en el móvil, el lateral va ENCIMA del contenido y «Menú de {Empresa}» y el título de grupo sin espacios lo
   ensanchaban a 471 px (medido a 390). En escritorio solo recortan: eso se decide en el tour (BR4a), no aquí. */
@media (max-width: 860px) {
  .menu > summary, .grupo-h { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- Detalle de robot (B4b; mock L265-284 y L794-822) */
.detalle-robot > .cab-pantalla { margin-bottom: 24px; }
/* Las cifras, alineadas por ARRIBA (como .metricas): la línea «de M · P %» cuelga debajo de la suya sin bajar la otra. */
.cab-stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; }
.cab-stats > * { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cab-stats > .cab-estado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; align-self: center; }
.det { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
@container (min-width: 860px) { .det { grid-template-columns: minmax(0, 1fr) 300px; } }
.det > :only-child { grid-column: 1 / -1; }   /* cliente final: sin «Configuración actual», el historial ocupa el ancho */
.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; }
.panel > * { margin: 0; }
.panel > h2 { font-size: 17px; }
.historial .tabla-ancha > table { min-width: 540px; }
.historial td.cuando, .historial td.num, .historial th.num { white-space: nowrap; }
.historial td.resumen-ej { overflow-wrap: anywhere; }   /* un motivo largo sin espacios parte en su celda */
/* El resultado parte en líneas: si no, «Error al hablar con Holded o Anthropic» (nowrap) se come la tabla y el resumen
   quedaba en una tira de ~50 px a 390 (captura de B4b). */
.historial td > .chip { white-space: normal; }
/* A1.3: «Evolución mes a mes», debajo de .det y a todo el ancho; el mes y la cifra no parten */
.detalle-robot > .evolucion { margin-top: 20px; }
.evolucion td { white-space: nowrap; }
ul.kv { gap: 0; }
.kv > li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.kv > li:first-child { padding-top: 0; }
.kv > li:last-child { padding-bottom: 0; border-bottom: 0; }
.kv .valor { font-weight: 500; color: var(--title); overflow-wrap: anywhere; }   /* un correo largo no ensancha el panel */
.kv .valor.sin-dato { color: var(--ink-3); }   /* «—» en gris, como en las tarjetas del Resumen */
.vacio { margin: 0; padding: 30px 18px; text-align: center; color: var(--ink-2); border: 1px dashed var(--line-2);
         border-radius: var(--r-chip); }

/* La barra: el correo y «Salir» van juntos; si no caben junto al logo, bajan a la vez (B2b). */
.sesion { display: flex; align-items: center; gap: 16px; margin-left: auto; min-width: 0; }

/* ---------------------------------------------------------------- Gestor de Nóminas (N11; mock L331-355) */
.nominas > .cab-pantalla { margin-bottom: 24px; }
.cab-titulo > .chip-sim { margin-top: 8px; }
.cab-titulo > .chip-ok, .cab-titulo > .chip-vacio { margin-top: 8px; }   /* N13d3: la píldora, a la altura de «Holded simulado» */
.chip-sim { color: var(--blue-ink); background: var(--blue-soft); cursor: help; }   /* «Holded simulado» (R6) */
/* N13b1: la columna «Nóminas» del directorio (su chip y «Holded simulado» juntos, a la derecha como las cifras) y el
   «Estado de nóminas» del Resumen, que es TEXTO y no cifra (el `.grande.txt` del mock: 14-15 px, parte en líneas). */
.chips-nom { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.grande.txt { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.zona { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin-bottom: 28px; padding-bottom: 28px;
        border-bottom: 1px solid var(--line); }
.zona:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.zona > h2 { margin: 0; overflow-wrap: anywhere; }   /* un nombre de fichero largo parte (390 px) */
.zona > p { margin: 0; }
.carga { min-width: 0; }
/* Subida: caja punteada con la etiqueta, el campo y «Analizar»; el error, en su propia línea */
.subir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; background: var(--surface);
         border: 1px dashed var(--line-2); border-radius: var(--r-caja); }
.subir-fichero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.subir input[type="file"] { min-width: 0; max-width: 100%; font: 400 14px/1.4 var(--f); color: var(--ink-2); }
.subir > small.error { flex-basis: 100%; }
.cargas { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cargas > ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cargas > p { margin: 0; }
.cargas li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink-2); }
.cargas li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.cargas li > a { color: inherit; text-decoration: none; }   /* como el mock: texto; el enlace, al pasar o con el foco */
.cargas li > a:hover { text-decoration: underline; }
/* Analizando: el spinner del mock (aria-hidden: el texto de al lado dice qué pasa) */
.linea-estado { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.spin { flex: none; width: 14px; height: 14px; border: 2px solid var(--warn-soft); border-top-color: var(--warn);
        border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* Cargada: cabecera de la carga, cuadre de 3 celdas (1 columna por debajo de 520 px), ensayo y tabla */
.datos-carga { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.datos-carga > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.datos-carga .valor { font-size: 14px; font-weight: 500; color: var(--title); overflow-wrap: anywhere; }
.datos-carga .valor.sin-dato { color: var(--ink-3); }
.cuadre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 720px; overflow: hidden;
          background: var(--line); border: 1px solid var(--line); border-radius: var(--r-caja); }
.cuadre > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: var(--surface); }
.cuadre span { font-size: 13px; color: var(--ink-2); }
.cuadre b { font: 600 19px/1.3 var(--f); color: var(--title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cuadre b.sin-dato { color: var(--ink-3); }
.cuadre .cero b { color: var(--ok); }
@container (max-width: 520px) { .cuadre { grid-template-columns: minmax(0, 1fr); } }
.ensayo { max-width: 720px; padding: 12px 14px; font-size: 14px; background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r-caja); overflow-wrap: anywhere; }
.ensayo > * { margin: 0; }
.ensayo > * + * { margin-top: 8px; }
.ensayo > p.aviso { margin: 0; }
.ensayo > ul { padding-left: 20px; font-variant-numeric: tabular-nums; }
.estado-carga { display: flex; flex-wrap: wrap; gap: 8px; }
.zona > .tarjeta { margin: 0; }
.zona > p.aviso { max-width: 720px; }   /* el motivo, al ancho del cuadre */
.tabla-nominas > table { min-width: 480px; }   /* 4 columnas: a 390 px se desplaza dentro de su región */
td.trabajador { font-weight: 600; white-space: nowrap; }
td > .chip + small.hint { display: block; margin-top: 4px; overflow-wrap: anywhere; }   /* el motivo de la saltada */
/* Filas por contestar (N12a; reglas de index.html:278-416): un formulario por fila, bajo «Faltan {n} filas…». El nombre,
   la pregunta y las opciones parten (un nombre de A3 largo no ensancha la página a 390 px) */
.por-contestar { display: flex; flex-direction: column; gap: 12px; max-width: 720px; min-width: 0; }
.contestar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; min-width: 0; padding: 14px 16px;
             background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-caja); }
.contestar > .quien { flex-basis: 100%; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--title);
  overflow-wrap: anywhere; }
.contestar > .campo { flex: 1 1 220px; min-width: 0; margin: 0; }
.contestar > fieldset { display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; min-width: 0; margin: 0;
                        padding: 0; border: 0; }
.contestar legend { margin-bottom: 4px; padding: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.contestar .opcion { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 14px; cursor: pointer;
  overflow-wrap: anywhere; }
.contestar .opcion > input { flex: none; margin-top: 2px; }
.contestar .opcion > span { min-width: 0; }
.contestar > p.error { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
/* N12a2 (capturas): Confirmar rechazado, al ancho del cuadre como el motivo de debajo; y el desplegable y el IBAN a la
   misma altura que «Guardar» (lado a lado, el select nativo salía 3 px más alto y las etiquetas no casaban) */
.zona > p.error { max-width: 720px; }
.contestar > .campo select, .contestar > .campo input { height: 40px; }
/* N12a2 (H-5): por debajo de 520 px el chip cae donde lo deja el texto y su tooltip (260 px) anclado a él se salía de la
   pantalla. Se ancla a su fila (la línea de la lista, la cabecera): «Holded simulado» (tip-der) abre desde el borde
   derecho y «Alerta», desde el izquierdo. Medido a 390 con el foco en cada chip. */
@container (max-width: 520px) {
  .cargas li, .nominas .cab-titulo { position: relative; }
  .cargas li > [data-tip], .nominas .cab-titulo > .chip-sim { position: static; }
}
/* B6 (H-11): el chip también cae donde lo deja el texto con `main` entre 521 y 860 px (tabletas sin lateral, y con el
   lateral recién salido): anclado a sí mismo, «Holded simulado» (tip-der) se salía hasta 108 px por la izquierda (600 a
   860) y «Alerta» ensanchaba la página a 624 (600) y a 898 (861). El mismo ancla a la fila. Medido de 540 a 900 y a
   375 · 390 · 520 · 1440 con el foco en cada chip (pasos/B6.md). */
@container (max-width: 860px) {
  .cargas li, .nominas .cab-titulo { position: relative; }
  .cargas li > [data-tip], .nominas .cab-titulo > .chip-sim { position: static; }
}
/* Confirmando y hecha (N12b; index.html:623-858). La barra de «Escribiendo…» es INDETERMINADA: el runner no guarda la
   carga fila a fila, así que ni porcentaje ni «k de N»; el tramo es del ancho entero y cruza el carril: con movimiento
   reducido (sin animación) queda llena, sin fingir una cifra. La tabla del check final (7 columnas) se desplaza en su
   región; vetos, avisos y lo escrito parten (a 390 px no ensanchan la página) */
.progreso { position: relative; width: 100%; max-width: 520px; height: 8px; overflow: hidden; background: var(--surface-2);
            border-radius: var(--r-chip); }
.progreso > i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--blue);
                animation: avanza 1.6s ease-in-out infinite; }
@keyframes avanza { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tabla-check > table { min-width: 720px; }
.zona > ul { margin: 0; padding-left: 20px; overflow-wrap: anywhere; }
.zona li > small.hint { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.zona > h2 > .chip { vertical-align: middle; }
/* N12b2 (capturas): en la carga, las frases y las listas (el parte, «comprobadas…», avisos, vetos, lo escrito) al ancho
   del cuadre; a 1440 ocupaban 1080 px. Las tablas siguen a todo el ancho, en su región */
.carga > .zona > p, .carga > .zona > ul { max-width: 720px; }
.carga > .zona > p { overflow-wrap: anywhere; }   /* N12f (RN12b H-7): un texto largo sin espacios en una frase llana parte (390 px) */

/* ---------------------------------------------------------------- El único corte de viewport */
@media (min-width: 861px) {
  .armazon.l-emp { grid-template-columns: 264px minmax(0, 1fr); }
  .armazon.l-emp > .lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .menu > summary { display: none; }
}
@media (max-width: 860px) {
  main { padding-top: 24px; }
  h1 { font-size: 22px; }
  .tarjeta, .tarjeta-robot, .tarjeta-gris { padding: 18px 16px; }
  .lateral .logo img { height: 32px; }
  .barra .logo img { height: 30px; }
  .pie { padding: 12px var(--gutter); }
  .correo { flex-basis: 0; }            /* en el móvil, el correo y «Salir» en la misma fila */
  .login { background-position: right -90px bottom -90px, 0 0; background-size: 280px auto, auto; }
}

/* ---------------------------------------------------------------- Movimiento reducido: nada se mueve */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

[hidden] { display: none !important; }