/* ============================================================================
   styles.css — Todo el estilo del portal de proveedores de Establecimientos
   La Negra. No hay colores crudos: cada valor sale de tokens.css (la marca en
   variables); acá vive el layout y los componentes. Estética sobria y
   agro-premium: header negro con la marca en blanco, fondos crema, verde de
   remate como acento y ocre con cuentagotas.

   Donde hace falta transparencia (velo del modal, textura del hero) se deriva
   del token con color-mix y se deja un fallback sólido para navegadores viejos,
   así seguimos sin inventar colores fuera de la paleta.
   ========================================================================== */

/* ---------- Reset mínimo ---------- */
/* Lo justo para que el box model no sorprenda; no peleamos contra el navegador. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Base tipográfica ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Los títulos llevan la condensada de la marca; el cuerpo queda en la del sistema
 * para que los formularios y tablas se lean sin esfuerzo. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
hr { border: none; border-top: var(--hairline); margin: var(--sp-5) 0; }
code, .codigo { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.04em; }
:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

/* Utilidades chicas que las vistas usan seguido. */
.oculto { display: none !important; }
.texto-tenue { color: var(--tinta-tenue); }
.texto-suave { color: var(--tinta-suave); }
.texto-chico { font-size: var(--fs-sm); }
.texto-centrado { text-align: center; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* Grupo de acciones empujado a la derecha DENTRO de .acciones (el pie de los
 * formularios del wizard): flex propio para que sus botones tengan aire entre sí. */
.acciones-derecha { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; justify-content: flex-end; }
.acciones-centradas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-5); }
.contenedor-angosto { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

/* ---------- Marca (lockup que inyecta marca.js) ---------- */
/* El lockup hereda currentColor: blanco sobre el header negro, tinta sobre
 * claro, gris tenue en el estado vacío. Por eso acá no se fija color. */
.marca-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); }
.marca-iso { display: block; flex: none; }
.marca-divisor {
  /* Filete vertical que separa pezuña de wordmark, como en la gráfica de remates. */
  width: 1px;
  height: 2.4em;
  background: currentColor;
  opacity: 0.45;
  flex: none;
}
.marca-texto { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); }
.marca-sobre {
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  line-height: 1;
  opacity: 0.85;
}
.marca-nombre {
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ---------- Header negro ---------- */
.header-negro {
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-negro a { color: inherit; }
.header-negro .marca-lockup:hover { text-decoration: none; opacity: 0.92; }
/* Lado derecho del header: nombre y rol del usuario logueado, o nada. */
.header-usuario { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--gris-300); text-align: right; }
.header-usuario strong { color: var(--blanco); font-weight: 600; }

/* ---------- Hero de la landing ---------- */
/* Sobre negro pleno, con una textura apenas perceptible: un halo verde que
 * recuerda el campo sin volverse decorado. Fallback: negro sólido. */
.hero {
  background: var(--negro);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -10%, color-mix(in srgb, var(--verde-claro) 22%, transparent), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 110%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 70%);
  color: var(--blanco);
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-7);
}
.hero .marca-lockup { justify-content: center; }
.hero .marca-nombre { font-size: var(--fs-2xl); }
.hero-titulo { margin: var(--sp-6) 0 0; }
.hero-bajada {
  color: var(--gris-300);
  font-size: var(--fs-md);
  max-width: 560px;
  margin: var(--sp-4) auto 0;
}
/* Las dos tarjetas de acción de la landing, dentro del hero. */
.hero-acciones { margin-top: var(--sp-6); max-width: 860px; margin-left: auto; margin-right: auto; gap: var(--sp-5); text-align: left; }
.tarjeta-accion .tarjeta-titulo { text-align: center; }
.tarjeta-accion > p { min-height: 3.1em; }
.tarjeta-accion .btn { margin-top: var(--sp-2); }

/* La landing ocupa el alto de la pantalla: el hero respira y el footer queda
 * al pie, en vez de todo apretado contra el borde superior. */
.pagina { display: flex; flex-direction: column; min-height: 100vh; }
.pagina .hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.pagina .footer { margin-top: auto; }

/* Páginas públicas interiores (wizard, seguimiento): aire arriba y abajo. */
.pagina-publica { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.pagina-publica > .btn-texto { display: inline-block; margin-bottom: var(--sp-4); }

/* Franja informativa (las sociedades del grupo) al pie del hero o de la landing. */
.franja {
  padding: var(--sp-4) var(--sp-5);
  background: var(--carbon);
  color: var(--gris-400);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}
.franja p { margin: 0 auto; color: inherit; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: var(--hairline);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--sp-5);
  /* Color explícito: las tarjetas de la landing viven sobre el hero (texto blanco);
   * sin esto, el título heredaría el blanco y quedaría invisible sobre la tarjeta. */
  color: var(--tinta);
}
.tarjeta-compacta { padding: var(--sp-4); }
.tarjeta-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-4);
}
/* Tarjetas de acción de la landing. El hover con relieve queda solo para las
   que son un link entero; la del alta tiene sus botones adentro. */
.tarjeta-accion { display: block; color: var(--tinta); transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
a.tarjeta-accion:hover {
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  border-color: var(--gris-300);
  transform: translateY(-2px);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--primario); color: var(--blanco); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--gris-300); }
.btn-secundario:hover { border-color: var(--verde); color: var(--verde); }
.btn-peligro { background: var(--rojo); color: var(--blanco); }
.btn-peligro:hover { background: color-mix(in srgb, var(--rojo) 82%, var(--negro)); }
.btn-grande { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.btn-chico { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.btn-bloque { width: 100%; }
/* Botón sin caja para acciones terciarias (quitar un adjunto, cerrar algo). */
.btn-texto { background: none; border: none; color: var(--primario); font-weight: 600; cursor: pointer; padding: 0; font-size: var(--fs-sm); text-decoration: underline; }
.btn-texto:hover { color: var(--verde-oscuro); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: var(--sp-4); }
.campo label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: var(--sp-1);
}
.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='number'],
.campo input[type='date'],
.campo input[type='password'],
.campo input[type='search'],
.campo select,
.campo textarea {
  width: 100%;
  /* 1rem y no --fs-base: con menos de 16px iOS hace zoom al enfocar el input
   * y el wizard en el celular se vuelve incómodo. */
  font-size: 1rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tenue);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-400); }
.campo-ayuda { font-size: var(--fs-xs); color: var(--tinta-tenue); margin-top: var(--sp-1); }
/* Estado de error: borde rojo en el control y mensaje abajo, pegado al campo,
 * porque la validación en vivo (CUIT, CBU) corrige mientras se tipea. */
.campo-error input, .campo-error select, .campo-error textarea { border-color: var(--rojo); }
.campo-error input:focus, .campo-error select:focus, .campo-error textarea:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-tenue);
}
/* La validación en vivo marca el control directamente (input.error / input.ok)
 * y el mensaje va en un div propio: .campo-mensaje.campo-error para el rojo,
 * .campo-ok para el "Correcto" en verde. */
.campo input.error, .campo select.error, .campo textarea.error { border-color: var(--rojo); }
.campo input.error:focus { border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-tenue); }
.campo input.ok, .campo select.ok, .campo textarea.ok { border-color: var(--verde-claro); }
.campo-mensaje { display: block; font-size: var(--fs-xs); margin-top: var(--sp-1); }
.campo-error .campo-mensaje, .campo-mensaje.campo-error { color: var(--rojo); margin-bottom: var(--sp-3); }
.campo-mensaje.campo-ok { color: var(--verde); }
.campo-mensaje:empty { display: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
.form-grid .campo-ancho { grid-column: 1 / -1; }

/* Checkboxes y radios: fila con el texto al lado, acento verde nativo. */
input[type='checkbox'], input[type='radio'] { accent-color: var(--verde); width: 16px; height: 16px; }
.opcion { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; font-weight: 400; }
.opcion input { margin-top: 2px; flex: none; }
.opciones { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-2); }
.opciones-columna { flex-direction: column; gap: var(--sp-2); }

/* Grupo con título dentro de un formulario largo (fiscal, bancario). */
.campo-grupo { border: none; margin: 0 0 var(--sp-5); padding: 0; }
.campo-grupo > legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 0;
  margin-bottom: var(--sp-3);
}

/* ---------- Wizard del alta (5 pasos) ---------- */
/* Es un <ol>: hay que apagar la sangría y los números de lista del navegador. */
.wizard-pasos { display: flex; align-items: center; list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.wizard-paso { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.wizard-paso:last-child { flex: 0 0 auto; }
/* La línea que une los pasos: el progreso se lee de un vistazo. */
.wizard-paso::after {
  content: '';
  flex: 1;
  min-width: var(--sp-4);
  height: 2px;
  border-radius: 1px;
  background: var(--gris-200);
  margin: 0 var(--sp-2);
}
.wizard-paso:last-child::after { display: none; }
.wizard-paso.hecho::after { background: var(--verde-claro); }
.wizard-num {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gris-300);
  background: var(--superficie);
  color: var(--tinta-suave);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.wizard-rotulo {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.wizard-paso.activo .wizard-num { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.wizard-paso.activo .wizard-rotulo { color: var(--verde); font-weight: 600; }
.wizard-paso.hecho .wizard-num { background: var(--verde-tenue); border-color: var(--verde-claro); color: var(--verde); }
.wizard-paso.hecho .wizard-rotulo { color: var(--tinta-suave); }

/* ---------- Badges de estado ---------- */
/* Pill chica y en mayúsculas: el estado se distingue por color sin leer.
 * Regla: etapas internas en contorno verde, confirmada en verde pleno,
 * lo que espera al proveedor en rojo, lo que pide atención en ocre. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--gris-300);
  background: var(--superficie);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.badge-borrador { background: var(--gris-100); border-color: var(--gris-300); color: var(--gris-600); }
.badge-recepcion,
.badge-impuestos,
.badge-sistemas,
.badge-pagos,
.badge-contabilidad { border-color: var(--verde); color: var(--verde); background: var(--superficie); }
.badge-confirmada { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.badge-rebotada { border-color: var(--rojo); color: var(--rojo); background: var(--superficie); }
.badge-trabada { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.badge-provisorio {
  background: var(--ocre-tenue);
  border-color: var(--ocre);
  color: var(--ocre);
  color: color-mix(in srgb, var(--ocre) 72%, var(--negro));
}
.badge-demorada {
  border-color: var(--ocre);
  background: var(--superficie);
  color: var(--ocre);
  color: color-mix(in srgb, var(--ocre) 72%, var(--negro));
}
/* Estado público que ve el proveedor mientras el alta recorre las áreas internas
 * (visibilidad mínima): mismo verde que las etapas, sin revelar en cuál está. */
.badge-en_proceso { border-color: var(--verde); color: var(--verde); background: var(--superficie); }
/* Prioritaria: un reenvío que volvió tras un rebote y no debe atrasarse. Ocre
 * lleno para que salte sin confundirse con el rojo de trabada/rebotada. */
.badge-prioritaria {
  background: var(--ocre);
  border-color: var(--ocre);
  color: var(--blanco);
}
/* Urgente: alta cargada por el equipo que salteó el circuito para sacar un pago.
 * Fondo oscuro para que lea como excepción, distinta del ocre de prioritaria y del
 * rojo de trabada/rebotada. */
.badge-urgente {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
/* Prueba: alta ficticia de la puesta a prueba, que nunca entra al lote del ERP. Rayada
 * para que se lea distinta de cualquier estado del circuito y no se confunda con un
 * proveedor real ni en una tabla larga. */
.badge-prueba {
  border-style: dashed;
  border-color: var(--gris-600);
  color: var(--gris-600);
  background: var(--gris-100);
}

/* ---------- Tablas ---------- */
/* Envolver toda tabla en .tabla-scroll: en tablet el back office se desplaza
 * dentro de la tarjeta y la página nunca scrollea de costado. */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--gris-300);
  white-space: nowrap;
}
.tabla td { padding: var(--sp-3); border-bottom: var(--hairline); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--gris-100); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Filas que abren el expediente al click. */
.tabla tr.clickeable { cursor: pointer; }
/* Fila señalada desde otro punto de la pantalla (por ejemplo, el usuario que ya tiene
   tomado el correo que se quiso invitar). Va después del hover para ganarle. */
.tabla tbody tr.fila-foco { background: var(--ocre-tenue); }

/* ---------- Chips de filtro ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--gris-300);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.chip:hover { border-color: var(--verde); color: var(--verde); }
.chip.activo { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.chip-contador {
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--gris-100);
  color: var(--tinta-suave);
  border-radius: 999px;
  padding: 1px var(--sp-2);
  min-width: 20px;
  text-align: center;
}
.chip.activo .chip-contador { background: var(--verde-claro); color: var(--blanco); }

/* ---------- KPIs del tablero ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.kpi {
  background: var(--superficie);
  border: var(--hairline);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--sp-4) var(--sp-5);
}
.kpi-rotulo {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--sp-2);
}
.kpi-numero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: 0.01em;
}
.kpi-detalle { font-size: var(--fs-xs); color: var(--tinta-suave); margin-top: var(--sp-2); }
/* Las alertas del tablero se leen por color: rojo lo trabado, ocre lo demorado. */
.kpi-alerta .kpi-numero { color: var(--rojo); }
.kpi-atencion .kpi-numero { color: var(--ocre); color: color-mix(in srgb, var(--ocre) 72%, var(--negro)); }

/* ---------- El circuito en pasos (tarjeta "Cómo avanza un alta") ---------- */
/* Fila horizontal de pasos con flechas; en pantallas angostas scrollea dentro
 * de la tarjeta, como las tablas. */
.flujo { display: flex; align-items: flex-start; gap: var(--sp-1); overflow-x: auto; padding-bottom: var(--sp-2); }
.flujo-paso { flex: 1 1 130px; min-width: 118px; max-width: 210px; display: flex; flex-direction: column; gap: var(--sp-2); }
/* En el flujo los badges van más comprimidos: los siete pasos tienen que entrar
 * en un ancho de escritorio común sin que el último quede cortado. */
.flujo-paso .badge { padding: var(--sp-1) 6px; letter-spacing: 0.01em; align-self: flex-start; }
.flujo-flecha { color: var(--gris-400); font-size: var(--fs-sm); line-height: 1; padding-top: 4px; flex: 0 0 auto; }
.flujo-area {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
}
.flujo-desc { font-size: var(--fs-xs); color: var(--tinta-tenue); line-height: 1.5; }
.flujo-nota { font-size: var(--fs-xs); color: var(--tinta-suave); border-top: var(--hairline); padding-top: var(--sp-3); margin: var(--sp-2) 0 0; }

/* La tarjeta de pendientes es lo primero que se ve: borde superior de marca,
 * igual que el panel de acción del expediente. */
.tarjeta-pendientes { border-top: 3px solid var(--verde); }

/* ---------- Timeline (historial del expediente y del seguimiento) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  /* La línea que une los puntos: el recorrido del alta como camino vertical. */
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--gris-200);
}
.timeline-item { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--verde);
  border: 2px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--gris-300);
}
/* El punto acompaña el tono del hecho: rebote en rojo, hito pendiente en gris. */
.timeline-item.rechazo::before { background: var(--rojo); }
.timeline-item.pendiente::before { background: var(--gris-300); }
.timeline-actor { font-weight: 600; font-size: var(--fs-sm); }
.timeline-fecha { font-size: var(--fs-xs); color: var(--tinta-tenue); }
.timeline-texto { font-size: var(--fs-sm); color: var(--tinta-suave); margin-top: 2px; }

/* Estado actual bien grande en la pantalla de seguimiento. */
.estado-grande {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

/* ---------- Avisos en bloque (rebote, provisorio, impedimentos) ---------- */
.aviso {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--gris-100);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.aviso strong { display: block; margin-bottom: 2px; }
.aviso-error { background: var(--rojo-tenue); border-color: var(--rojo); }
.aviso-ok { background: var(--verde-tenue); border-color: var(--verde-claro); }
.aviso-atencion { background: var(--ocre-tenue); border-color: var(--ocre); }

/* ---------- Layout del back office ---------- */
/* Estructura que arma shell.js: header negro arriba (marca + quién soy) y, abajo,
 * el cuerpo en dos columnas: sidebar oscura con las secciones y el main de trabajo. */
.bo-layout { display: flex; flex-direction: column; min-height: 100vh; }
.bo-header {
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 50;
}
.bo-header a { color: inherit; }
.bo-header a:hover { text-decoration: none; opacity: 0.92; }
.bo-header-izq { display: flex; align-items: center; gap: var(--sp-3); }
/* Botón de tres barritas: muestra u oculta la sidebar para ganar ancho de trabajo. */
.bo-toggle-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radio-sm);
  color: var(--gris-300);
  cursor: pointer;
}
.bo-toggle-sidebar:hover { background: var(--gris-700); color: var(--blanco); }
.bo-toggle-sidebar svg { display: block; }
.bo-header-marca { display: inline-flex; }
.bo-header-marca .marca-nombre { font-size: var(--fs-md); }
.bo-header-marca .marca-sobre { font-size: calc(var(--fs-xs) * 0.85); }
.bo-header-usuario { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.35; }
.bo-header-nombre { font-size: var(--fs-sm); font-weight: 600; }
.bo-header-rol { font-size: var(--fs-xs); color: var(--gris-400); }

.bo-cuerpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); flex: 1; }
/* Sidebar negra como el header: el equipo trabaja "dentro" de la marca. La celda
 * del grid la estira a todo el alto; los items quedan pegados arriba y Salir al pie. */
.sidebar {
  background: var(--carbon);
  color: var(--gris-300);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radio-sm);
  color: var(--gris-300);
  font-size: var(--fs-sm);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  white-space: nowrap;
}
.sidebar-item:hover { background: var(--gris-700); color: var(--blanco); text-decoration: none; }
.sidebar-item.activo, .sidebar-item-activo { background: var(--verde); color: var(--blanco); }
.sidebar-item-activo:hover { background: var(--verde); color: var(--blanco); }
/* Salir queda abajo de todo, separado de la navegación. */
.sidebar-salir { margin-top: auto; border-top: 1px solid var(--gris-700); border-radius: 0; padding-top: var(--sp-3); }

/* Sidebar colapsada (botón de tres barritas): se va la columna y el main gana
 * todo el ancho. Vale en cualquier tamaño, también sobre la barra horizontal
 * del modo tablet/celular. */
.bo-sidebar-colapsada .bo-cuerpo { grid-template-columns: minmax(0, 1fr); }
.bo-sidebar-colapsada .sidebar { display: none; }

.bo-main { padding: var(--sp-5) var(--sp-6) var(--sp-8); min-width: 0; }
.bo-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.bo-cabecera h1 { margin-bottom: 0; }
/* Las vistas del back office apilan tarjetas: aire parejo entre bloques. */
.bo-main > .tarjeta, .bo-main > form.tarjeta { margin-bottom: var(--sp-4); }
.contenedor-angosto-bo { max-width: 680px; }
.contenedor-angosto-bo > .tarjeta, .contenedor-angosto-bo > form.tarjeta { margin-bottom: var(--sp-4); }

/* Cabecera del expediente: código, badges y días en etapa bajo el título. */
.expediente-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.expediente-cabecera h1 { margin: var(--sp-1) 0 0; }
/* Cada columna del expediente apila sus tarjetas con aire parejo. */
.expediente-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ficha-condiciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.panel-accion { border-top: 3px solid var(--verde); }
.req-marca { color: var(--rojo); }
/* Constancias del expediente: una fila por tipo requerido. */
.adjunto-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: var(--hairline); font-size: var(--fs-sm); }
.adjunto-item:last-child { border-bottom: none; }

/* Validaciones automáticas del expediente: una fila por check, con la marca de
 * pasó (verde) o falta (rojo) adelante. Son de solo lectura: nada de checkboxes. */
.check-lista { list-style: none; margin: 0; padding: 0; }
.check-item { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--hairline); font-size: var(--fs-sm); }
.check-item:last-child { border-bottom: none; }
.check-marca {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}
.check-ok { background: var(--verde-tenue); color: var(--verde); }
.check-falta { background: var(--rojo-tenue); color: var(--rojo); }
.check-texto strong { font-weight: 600; }
.check-detalle { color: var(--tinta-suave); }

/* Controles compactos para celdas de tabla y fichas (checklist, catálogos). */
.campo-inline {
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
  max-width: 100%;
}
.campo-inline:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-tenue); }
.campo-inline-wrap { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
/* En una tabla común el control inline se estira (editar el nombre de una
 * sociedad no puede truncarlo)… */
.tabla .campo-inline { width: 100%; min-width: 220px; }
/* …pero el checklist entra apretado en la columna del medio del expediente:
 * controles angostos y celdas con menos aire para que se vea entero. */
.tabla-checklist .campo-inline { width: 92px; min-width: 0; }
.tabla-checklist td, .tabla-checklist th { padding: var(--sp-2); }
.tabla-checklist th { white-space: normal; }
/* Celda de acciones de las tablas de gestión: los links no se pegan entre sí. */
.acciones-tabla { white-space: nowrap; }
.acciones-tabla .btn-texto + .btn-texto { margin-left: var(--sp-4); }
/* Filtros de la lista de solicitudes: buscador acotado arriba de los chips. */
.filtros .campo { max-width: 420px; }

/* Comentarios del expediente. */
.lista-comentarios { list-style: none; margin: 0; padding: 0; }
.comentario { padding: var(--sp-2) 0; border-bottom: var(--hairline); }
.comentario:last-child { border-bottom: none; }
.comentario-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.comentario-autor { font-weight: 600; font-size: var(--fs-sm); }
.comentario-texto { font-size: var(--fs-sm); color: var(--tinta-suave); margin-top: 2px; white-space: pre-wrap; }

/* Expediente en dos columnas: a la izquierda, la columna ancha de trabajo (donde
 * viven los formularios y la tabla de Interbanking, que necesitan aire); a la
 * derecha, el riel de ficha y seguimiento. Abajo colapsa a una sola. */
.expediente-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
/* Pares rótulo y valor de la ficha del proveedor. */
.ficha-dato { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }
.ficha-rotulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-tenue); }
/* overflow-wrap: valores largos sin espacios (CBU de 22 dígitos, N° de cuenta)
 * cortan en vez de desbordar la columna angosta del riel. */
.ficha-valor { font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* Datos clave del proveedor (siempre a la vista): pares en dos columnas cuando
 * hay ancho, para que no formen una tira larga. */
.ficha-clave { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
.ficha-clave .ficha-dato:last-child { margin-bottom: 0; }
/* Un dato que se lleva la fila entera (p. ej. el select de condiciones de pago,
 * que no entra cómodo en media celda). */
.ficha-dato-ancho { grid-column: 1 / -1; }
.ficha-clave .campo-inline { width: 100%; }
.ficha-secciones { margin-top: var(--sp-3); border-top: var(--hairline); }

/* Desplegables (<details>): el resto de la ficha y la cola de la trazabilidad,
 * plegados hasta que se los necesita. Cabecera con signo que rota al abrir. */
.desplegable { border-bottom: var(--hairline); }
.ficha-secciones > .desplegable:last-child { border-bottom: none; }
.desplegable > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tinta);
  user-select: none;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before {
  content: '+';
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  color: var(--verde);
}
.desplegable[open] > summary::before { content: '\2212'; }
.desplegable > summary:hover { color: var(--verde); }
.desplegable-cuerpo { padding: 0 0 var(--sp-3) var(--sp-5); }
.desplegable-cuerpo > .ficha-dato:last-child, .desplegable-cuerpo > .timeline { margin-bottom: 0; }

/* Validaciones automáticas, versión compacta: título con un resumen al costado,
 * una tira de indicadores y, debajo, solo el detalle de lo que falla. */
.validaciones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.validaciones-cab .tarjeta-titulo { margin: 0; }
.validaciones-resumen { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.validaciones-resumen.ok { color: var(--verde); }
.validaciones-resumen.falta { color: var(--rojo); }
.validaciones-tira { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.validacion-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  padding: 4px var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--gris-200);
}
.validacion-pill.ok { background: var(--verde-tenue); border-color: transparent; color: var(--verde); }
.validacion-pill.falta { background: var(--rojo-tenue); border-color: transparent; color: var(--rojo); font-weight: 600; }
.validacion-marca { font-weight: 700; line-height: 1; }
.validaciones-detalle { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: var(--hairline); font-size: var(--fs-sm); color: var(--tinta-suave); }
.validaciones-detalle li { padding: var(--sp-1) 0; }
.validaciones-detalle strong { color: var(--tinta); font-weight: 600; }
.validaciones-ok { margin: 0; }

/* Grupo de checks en grilla (jurisdicciones, regímenes): entra en el ancho
 * disponible en vez de apilarse en una tira vertical larga. */
.opciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }

/* Celda de tabla con el contenido centrado (el check "Cargada" del checklist). */
.celda-centrada { text-align: center; }

/* ---------- Toasts ---------- */
/* Abajo a la derecha, sobre fondo carbón con filete de color: se ve sobre
 * cualquier pantalla sin tapar el contenido. */
.toast {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 100;
  max-width: 340px;
  background: var(--carbon);
  color: var(--blanco);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--verde-claro);
  box-shadow: var(--sombra-alta);
  animation: toast-entrada 0.18s ease-out;
}
.toast-ok, .toast.ok { border-left-color: var(--verde-claro); }
.toast-error, .toast.error { border-left-color: var(--rojo); }
@keyframes toast-entrada {
  from { opacity: 0; transform: translateY(var(--sp-2)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Velo derivado del negro de marca; fallback opaco para navegadores viejos. */
  background: var(--negro);
  background: color-mix(in srgb, var(--negro) 55%, transparent);
}
.modal-caja {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--sp-5);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.modal-acciones { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }
.modal-acciones:empty { display: none; }
/* Las fichas (proveedor del padrón, detalle de un vencimiento) no entran en el ancho de un
   confirm: llevan datos en dos columnas y el maestro de Finnegans en un desplegable. */
.modal-caja-ancha { max-width: 720px; }
.panel-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.panel-cabecera .modal-titulo { margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.panel-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 0 2px;
  color: var(--tinta-tenue);
}
.panel-cerrar:hover { color: var(--tinta); }
.panel-bloque + .panel-bloque { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--hairline); }
.panel-bloque-titulo {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-tenue);
  margin: 0 0 var(--sp-3);
}

/* ---------- Spinner ---------- */
.spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gris-300);
  border-top-color: var(--verde);
  animation: girar 0.8s linear infinite;
  margin: var(--sp-5) auto;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estado vacío ---------- */
/* La pezuña en gris muy tenue: marca presente sin dramatizar la falta de datos. */
.vacio { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--tinta-tenue); font-size: var(--fs-sm); }
.vacio .marca-iso { color: var(--gris-300); margin: 0 auto var(--sp-3); display: block; }

/* ---------- Footer ---------- */
.footer {
  border-top: var(--hairline);
  padding: var(--sp-5);
  margin-top: var(--sp-7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--tinta-tenue);
}
.footer a { color: var(--tinta-suave); }

/* ---------- Secciones de página pública ---------- */
.seccion { padding: var(--sp-6) 0; }

/* ---------- Constancias del wizard (paso 5) ---------- */
/* Una fila por constancia: qué es, qué se subió y el botón para adjuntar. */
.adjunto-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-bottom: var(--hairline);
}
.adjunto-info { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 220px; min-width: 0; }
.adjunto-cargados { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* La cruz para quitar un adjunto, dentro del chip del archivo. */
.chip-x { background: none; border: none; cursor: pointer; color: var(--tinta-tenue); font-size: 1.05em; line-height: 1; padding: 0 0 0 2px; }
.chip-x:hover { color: var(--rojo); }
.badge-obligatorio {
  background: var(--ocre-tenue);
  border-color: var(--ocre);
  color: var(--ocre);
  color: color-mix(in srgb, var(--ocre) 72%, var(--negro));
}
/* La pezuña en verde en la pantalla de "recibimos tu solicitud". */
.exito-iso { display: flex; justify-content: center; color: var(--verde); margin-bottom: var(--sp-3); }

/* ---------- Exenciones repetibles (paso fiscal) ---------- */
.repetible-fila {
  border: var(--hairline);
  border-radius: var(--radio-sm);
  padding: var(--sp-3) var(--sp-3) 0;
  margin-bottom: var(--sp-3);
}
.repetible-fila .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.repetible-fila > .btn-texto { margin-bottom: var(--sp-3); }
.btn-peligro-texto { color: var(--rojo); }
.btn-peligro-texto:hover { color: color-mix(in srgb, var(--rojo) 82%, var(--negro)); }

/* ---------- Login del equipo ---------- */
.login-marco { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.login-marca { display: flex; justify-content: center; color: var(--tinta); margin-bottom: var(--sp-6); }
.login-marca:hover { text-decoration: none; opacity: 0.85; }
.login-tarjeta { max-width: 420px; margin: 0 auto; }
.login-tarjeta .btn-texto { display: inline-block; margin-top: var(--sp-4); }
/* El correo de la invitación se muestra fijo (es el usuario que va a quedar): se
 * ve apagado para que quede claro que no se edita desde esta pantalla. */
.login-tarjeta input:disabled { background: var(--gris-100); color: var(--tinta-suave); }

/* ---------- Invitaciones al equipo ---------- */
/* El link recién generado: campo ancho y el botón de copiar al lado. Se muestra
 * una sola vez (en la base queda solo el hash del token), así que tiene que
 * poder copiarse de un toque y leerse entero si hay que dictarlo. */
.campo.link-invitacion { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.campo.link-invitacion input { flex: 1 1 320px; width: auto; font-family: var(--font-mono); font-size: var(--fs-sm); }
/* El usuario ahora puede ser un correo entero: en la celda corta en vez de
 * estirar la tabla a lo ancho. */
.celda-quiebre { overflow-wrap: anywhere; }

/* ---------- Seguimiento público ---------- */
/* Código y botón en una sola línea; abajo el resultado con el estado grande. */
.seguimiento-form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.seguimiento-form .campo { flex: 1 1 240px; margin-bottom: 0; }
.seguimiento-resultado { margin-top: var(--sp-5); }
.estado-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.estado-tarjeta .badge { font-size: var(--fs-md); padding: var(--sp-2) var(--sp-5); }

/* ============================================================================
   Responsive.
   El formulario del proveedor tiene que ser impecable en un celular de 375px
   (el proveedor carga desde el campo); el back office se piensa para desktop
   pero tiene que poder operarse desde una tablet.
   ========================================================================== */

@media (max-width: 900px) {
  /* La sidebar colapsa arriba como barra horizontal desplazable. */
  .bo-cuerpo { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--sp-2) var(--sp-3);
  }
  .sidebar-salir { margin-top: 0; margin-left: auto; border-top: none; padding-top: var(--sp-2); }
  .bo-main { padding: var(--sp-4); }
  .expediente-columnas { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En pantallas medianas (tablet apaisada) el expediente sigue en dos columnas,
 * pero el riel se lleva la ficha sin tanto aire. */
@media (max-width: 1120px) and (min-width: 901px) {
  .expediente-columnas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-4); }
}

@media (max-width: 640px) {
  .header-negro { padding: var(--sp-3) var(--sp-4); }
  .header-negro .marca-nombre { font-size: var(--fs-md); }
  .hero { padding: var(--sp-7) var(--sp-4) var(--sp-6); }
  .hero .marca-nombre { font-size: var(--fs-xl); }
  .contenedor, .contenedor-angosto { padding: 0 var(--sp-4); }
  .tarjeta { padding: var(--sp-4); }
  /* Los formularios pasan a una columna: nada de campos apretados a dos. */
  .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .ficha-clave { grid-template-columns: 1fr; }
  .opciones-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .opciones { flex-direction: column; gap: var(--sp-2); }
  /* Las acciones del pie del wizard se apilan y ocupan todo el ancho del pulgar. */
  .acciones-apilables { flex-direction: column; align-items: stretch; }
  .acciones-apilables .btn { width: 100%; }
  .modal-acciones { flex-direction: column-reverse; }
  .modal-acciones .btn { width: 100%; }
  .toast { left: var(--sp-4); right: var(--sp-4); max-width: none; }
}

@media (max-width: 520px) {
  /* En 375px el wizard muestra solo el rótulo del paso activo: los números
   * alcanzan para ubicarse y el texto no se encima. */
  .wizard-paso:not(.activo) .wizard-rotulo { display: none; }
  .wizard-paso::after { min-width: var(--sp-2); margin: 0 var(--sp-1); }
  .wizard-num { width: 26px; height: 26px; font-size: var(--fs-xs); }
}

/* ============================================================================
   Print básico: el expediente impreso o guardado en PDF tiene que servir como
   respaldo del legajo. Se va todo lo operativo y quedan los datos y el rastro.
   ========================================================================== */
@media print {
  body { background: var(--blanco); }
  .header-negro, .bo-header, .sidebar, .footer, .btn, .btn-texto, .chips, .toast,
  .modal, .spinner, .wizard-pasos, .no-imprimir { display: none !important; }
  .bo-layout, .bo-cuerpo { display: block; }
  .bo-main { padding: 0; }
  .expediente-columnas { display: block; }
  .expediente-columnas > * { margin-bottom: var(--sp-4); }
  /* El legajo impreso lleva toda la ficha: los desplegables van abiertos y sin
   * el signo de la cabecera. */
  .desplegable > summary::before { display: none; }
  .desplegable > .desplegable-cuerpo { display: block !important; padding-left: 0; }
  .tarjeta { box-shadow: none; border: var(--hairline); break-inside: avoid; padding: var(--sp-4); }
  .tabla tbody tr:hover { background: none; }
  a { color: inherit; text-decoration: none; }
  /* Que los badges conserven su color: el estado es el dato central del legajo. */
  .badge, .timeline-item::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}