/* /EMPEZAR · lo que producción tiene y la demo del diseñador no (02/10/2026).
   Armado con los tokens y las piezas de marca.css y empezar.css según el "Diseño propuesto para lo que falta (alta de
   titulares)" de nuevo-frontend/cobertura-demo.md. marca.css y empezar.css son copias del diseñador y no se tocan. */

/* el atributo hidden manda siempre (la lógica esconde botones y bloques con él) */
[hidden] { display: none !important; }
html:not(.js) .revela { opacity: 1; transform: none; }
html { scroll-padding-top: 16px; }

/* mientras se ve "¿En qué estás?", el resto de la tarjeta no */
#registro.con-intencion > :not(#mcIntencion) { display: none !important; }

/* textos distintos en escritorio y celular (el alta corta en 960 px, como la demo) */
.solo-celular { display: none; }
@media (max-width: 960px) { .solo-escritorio { display: none; } .solo-celular { display: inline; } }

/* ---------- celular sin columna izquierda (ADS-META y Marco, 02/10/2026): arriba solo la barra con el logo y
   "Volver", y enseguida la tarjeta del alta, para que la pregunta y el formulario arranquen arriba ---------- */
@media (max-width: 960px) {
  /* la grilla repartía el alto sobrante entre la barra del logo y el formulario: la barra queda de su alto */
  body.alta { grid-template-rows: auto 1fr; align-content: start; }
  body.alta:not(.ingreso-alta) .lado-marca { padding: 12px 16px; }
  body.alta:not(.ingreso-alta) .lado-marca .centro, body.alta:not(.ingreso-alta) .lado-marca .abajo { display: none !important; }
  body.alta:not(.ingreso-alta) .lado-form { padding-top: 16px; }
  .registrar-marca { display: none !important; }
}

/* ---------- panel de marca: "Registrate" solo en el celular, baja al formulario ---------- */
.lado-marca .registrate { display: none; }
@media (max-width: 960px) {
  .lado-marca .registrate {
    display: inline-flex; margin-top: 18px; color: #fff; background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .lado-marca .registrate:hover { background: rgba(255, 255, 255, .12); }
}

/* ---------- precios de la pantalla de intención: silueta mientras llegan; el del registro (largo) va como texto ---------- */
#mcPrecioRegistrar:not(:empty) { display: block; background: none; padding: 0; border-radius: 0; }
.op-intencion em:empty { width: 120px; height: 18px; background: #E9EEF4; position: relative; overflow: hidden; }
.op-intencion em:empty::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); animation: barrido 1.2s infinite;
}

/* ---------- formulario de cuenta ---------- */
.form-alta { display: grid; gap: 12px; }
.google-alta { display: grid; gap: 14px; }
.sugerencia-mail { margin-top: -8px; font-size: var(--t-13); color: var(--texto-2); }
.sugerencia-mail a { color: var(--acento-600); font-weight: 600; }
.campo-clave { position: relative; }
.campo-clave .entrada { padding-right: 44px; }
.campo-clave .ver-clave.viendo { color: var(--acento-600); }
.acciones-cuenta { display: grid; gap: 8px; }
.acciones-alta .acciones-derecha { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.codigo { font-size: 22px; letter-spacing: .4em; text-align: center; }

/* ---------- cuenta creada: la barra dura lo mismo que la espera real ---------- */
.listo h3 { font-size: var(--t-20); }
.barra-espera { width: 200px; height: 4px; border-radius: 4px; background: var(--sutil); overflow: hidden; }
.barra-espera span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--acento-500); }
.barra-espera.corre span { animation: llenarEspera var(--dur, 1400ms) linear forwards; }
@keyframes llenarEspera { to { width: 100%; } }

/* ---------- buscador del registro ---------- */
.search-shell { display: grid; gap: 14px; }
.cab-busqueda { display: grid; gap: 2px; }
.cab-busqueda b { font-family: var(--f-display); font-size: var(--t-16); }
.cab-busqueda span { font-size: var(--t-13); }
.entradas-alternativas { display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* resultados: cuántos hay y, mientras queden abajo, un degradado de 24 px que lo avisa */
.cant-resultados { font-size: var(--t-12); color: var(--texto-2); margin-bottom: -6px; }
.resultados.con-mas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }

/* resultados: la fila .resultado del diseño, con su tilde */
.result-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); cursor: pointer; text-align: left;
  transition: border-color var(--d-rapida), background var(--d-rapida), box-shadow var(--d-media);
  animation: aparece var(--d-media) var(--ease-salida) both;
}
.result-card:hover { border-color: #CBD5E1; box-shadow: var(--s-1); }
.result-card:focus-visible { outline: none; box-shadow: var(--anillo); }
.result-card.selected { border-color: var(--acento-500); background: #F6FCFB; }
.result-card .texto-resultado { display: grid; gap: 2px; min-width: 0; }
.result-card strong { font-size: var(--t-14); }
.result-card small { display: block; color: var(--texto-2); font-size: var(--t-12); overflow-wrap: anywhere; }
.result-card small.mono { font-size: 11px; }
.result-card .mini-logo svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .result-card { gap: 8px; padding: 10px; } .result-card .mini-logo { --t: 32px; } }
.result-card .tilde {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--borde); display: grid; place-items: center;
  color: transparent; transition: background var(--d-media), border-color var(--d-media), color var(--d-media);
}
.result-card .tilde svg { width: 14px; height: 14px; }
.result-card.selected .tilde {
  background: var(--acento-500); border-color: var(--acento-500); color: var(--tinta-950);
  animation: tildeElige .34s var(--ease-salida);
}
@keyframes tildeElige { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1.05); } }
/* "Confirmar esta marca" pegado a la tarjeta elegida: la acción no cambia de lugar */
.result-card.con-accion { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.confirmar-en-lista {
  margin-top: -8px; padding: 10px 12px 12px; border: 1px solid var(--acento-500); border-top: 0;
  border-radius: 0 0 12px 12px; background: #F6FCFB; animation: aparece var(--d-media) var(--ease-salida);
}
.confirmar-en-lista .btn { width: 100%; }

.empty-state {
  text-align: center; padding: 24px; color: var(--texto-2); font-size: var(--t-13);
  border: 1px dashed var(--borde); border-radius: 12px;
}
.estado-buscando { display: flex; gap: 10px; justify-content: center; align-items: center; }
.estado-buscando .spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde); border-top-color: var(--acento-500);
  animation: girar .8s linear infinite;
}
.cabecera-cuit {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--acento-100); font-size: var(--t-13); color: var(--tinta-900);
}
/* sin resultados en el camino "ya tengo mi marca" */
.no-encontrada {
  display: grid; justify-items: center; text-align: center; gap: 8px; padding: 24px 20px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo);
}
.no-encontrada .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-100); color: var(--acento-600); }
.no-encontrada .ico svg { width: 20px; height: 20px; }
.no-encontrada strong { font-family: var(--f-display); font-size: var(--t-16); }
.no-encontrada .texto-2 { font-size: var(--t-13); }
.no-encontrada .acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 6px; }
.no-encontrada .acciones .btn { white-space: normal; height: auto; min-height: var(--alto-btn); padding-block: 8px; line-height: 1.3; }
@media (max-width: 560px) { .no-encontrada .acciones { grid-template-columns: 1fr; } }

/* ---------- carga manual y registro: tarjeta interna con borde punteado ---------- */
.tarjeta-interna {
  display: grid; gap: 14px; padding: 18px; border: 1.5px dashed var(--borde); border-radius: var(--r-md); background: var(--fondo);
  animation: aparece var(--d-media) var(--ease-salida);
}
.tarjeta-interna.elegida { border-style: solid; border-color: var(--acento-500); background: #F6FCFB; }
.cab-interna { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cab-interna b { font-family: var(--f-display); font-size: var(--t-16); }
.cab-interna p { font-size: var(--t-13); margin-top: 2px; }
.acciones-internas { display: flex; gap: 8px; flex-wrap: wrap; }
.zona-logo { position: relative; display: grid; gap: 6px; }
.upload-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.upload-label {
  display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 16px; border-radius: 12px;
  border: 1.5px dashed #C7D5E3; background: var(--superficie); cursor: pointer;
  transition: border-color var(--d-rapida), background var(--d-rapida);
}
.upload-label:hover, .zona-logo.arrastrando .upload-label { border-color: var(--acento-500); background: #F6FCFB; }
.upload-input:focus-visible + .upload-label { box-shadow: var(--anillo); }
.upload-label svg { width: 20px; height: 20px; color: var(--acento-600); }
.upload-label b { font-size: var(--t-13); }
.upload-label > span { font-size: var(--t-12); color: var(--texto-2); }
.upload-file { font-size: var(--t-12); font-weight: 600; color: var(--tinta-800); }
.reg-clases {
  max-height: 220px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; padding: 6px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.reg-clases label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; font-size: var(--t-13); cursor: pointer; }
.reg-clases label:hover { background: var(--sutil); }
.reg-clases label:has(input:checked) { background: var(--acento-100); color: var(--tinta-900); }
.reg-clases input { accent-color: var(--acento-500); margin-top: 2px; flex: none; }
.field-help { font-size: var(--t-12); color: var(--texto-2); }
.field-help.error { color: var(--alto-texto); }
.reg-adel { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); font-size: var(--t-13); }
.reg-adel > b { font-family: var(--f-display); font-size: var(--t-16); }
.clases-reg > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--borde); }
.clases-reg > div:first-child { border-top: 0; }
.reg-adel p { color: var(--texto-2); }

/* ---------- marca elegida (carga manual) ---------- */
.cuerpo-elegida { display: grid; gap: 4px; }
.cuerpo-elegida > strong { font-family: var(--f-display); font-size: var(--t-16); }
.cuerpo-elegida > span { color: var(--texto-2); font-size: var(--t-13); }
.selected-preview-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.selected-preview-meta b { font-family: var(--f-mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--superficie); border: 1px solid var(--borde); }
.selected-preview-list { display: grid; gap: 2px; margin-top: 4px; }
.selected-preview-list small { font-size: var(--t-12); color: var(--texto-2); }

/* ---------- selección: contador, chips y detalle plegable ---------- */
.contador-sel { font-family: var(--f-mono); font-size: var(--t-12); color: var(--texto-2); }
#mcSelectionSummary:empty { display: none; }
.chip-sel em { font-style: normal; font-family: var(--f-mono); font-size: 10px; font-weight: 500; opacity: .85; }
.detalle-sel summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--t-13); font-weight: 600; color: var(--acento-600);
}
.detalle-sel summary::-webkit-details-marker { display: none; }
.detalle-sel summary svg { width: 14px; height: 14px; transition: transform var(--d-media) var(--ease-salida); }
.detalle-sel[open] summary svg { transform: rotate(180deg); }
.selection-list { margin-top: 8px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.selection-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--borde); }
.selection-item:first-child { border-top: 0; }
.selection-item > div { display: grid; gap: 2px; min-width: 0; }
.selection-item .mono { font-size: 10.5px; color: var(--texto-2); }
.selection-item b { font-size: var(--t-14); }
.selection-item small { font-size: var(--t-12); color: var(--texto-2); overflow-wrap: anywhere; }
.selection-item .quitar-marca { color: var(--alto-texto); }
.acciones-sel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acciones-sel #mcConfirmAllSelections { margin-left: auto; }
@media (max-width: 560px) { .acciones-sel .btn { flex: 1 1 100%; } .acciones-sel #mcConfirmAllSelections { margin-left: 0; } }
.precio-marcas { justify-self: start; padding: 8px 12px; border-radius: 10px; background: var(--acento-100); color: var(--acento-600); font-size: var(--t-13); }
.registrar-marca { font-size: var(--t-12); font-weight: 600; }

/* ---------- pago ---------- */
.mail-informes { padding: 10px 12px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); font-size: var(--t-13); color: var(--texto-2); }
.mail-informes b { color: var(--tinta-900); overflow-wrap: anywhere; }
.cab-pago { display: grid; gap: 4px; }
.cab-pago b { font-family: var(--f-display); font-size: var(--t-18); }
/* el período se elige con dos radios con el aspecto del control segmentado del diseño */
.periodo-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--sutil); }
.periodo-pago label {
  position: relative; display: flex; justify-content: center; align-items: center; text-align: center; padding: 8px 10px;
  border-radius: 8px; font-size: var(--t-13); font-weight: 600; color: var(--texto-2); cursor: pointer;
  transition: background var(--d-rapida), color var(--d-rapida), box-shadow var(--d-media);
}
.periodo-pago input { position: absolute; opacity: 0; pointer-events: none; }
.periodo-pago label:has(input:checked) { background: var(--superficie); color: var(--tinta-900); box-shadow: var(--s-1); }
.periodo-pago label:has(input:focus-visible) { box-shadow: var(--anillo); }
.precio-pago { font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--tinta-900); }
.precio-pago .unidad { font-size: var(--t-14); font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.precio-pago .lista { font-size: .6em; font-weight: 500; color: var(--texto-2); }
.precio-pago .desde { display: block; margin-top: 6px; font-size: var(--t-14); font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.campos-tarjeta { display: grid; gap: 12px; }
div.mc-card-campo { height: 44px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
div.mc-card-campo iframe { width: 100%; height: 100%; }
.fila-doc { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.codigo-promo { text-align: right; font-size: var(--t-13); }
.codigo-promo a { color: var(--texto-2); text-decoration: underline; }
.campo-promo { display: flex; gap: 8px; }
.campo-promo .entrada { text-transform: uppercase; }

/* ---------- mensajes de estado: notas verde y roja ---------- */
.form-alta .status:empty, .caja-pago .status:empty { display: none; }
.status { font-size: var(--t-13); color: var(--texto-2); }
.status.ok { padding: 10px 12px; border-radius: 10px; background: var(--acento-100); color: var(--tinta-900); }
.status.error { padding: 10px 12px; border-radius: 10px; background: var(--alto-100); color: var(--alto-texto); }

/* ---------- WhatsApp flotante (el de la landing, en 48 px para el alta) ---------- */
.flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: var(--s-4);
  transition: transform var(--d-media) var(--ease-salida), background var(--d-rapida), opacity var(--d-media);
}
.flotante:hover { transform: translateY(-2px) scale(1.04); }
.flotante svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .flotante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* ---------- la tarjeta del alta arranca arriba y crece solo hacia abajo (no salta al llegar los resultados) ---------- */
@media (min-width: 961px) {
  body.alta:not(.ingreso-alta) .lado-form { place-items: start center; padding-top: clamp(24px, 8vh, 96px); }
}
/* ---------- en el celular: lo último del formulario puede quedar sobre el WhatsApp, y mientras se escribe (teclado
   abierto) el botón se esconde ---------- */
@media (max-width: 960px) {
  body.alta:not(.ingreso-alta) .lado-form { padding-bottom: 88px; }
  body.escribiendo .flotante, body.tapa-boton .flotante { opacity: 0; pointer-events: none; transform: translateY(8px); }
}

/* ---------- pago en dos columnas (Marco, 13/10/2026): en compu el paso 03 era una sola columna larga y los botones
   quedaban debajo del pliegue. Con la tarjeta en pantalla, el formulario se ensancha, el lado de la marca se angosta
   y la caja de pago se parte: resumen y tarjeta dibujada a la izquierda, campos y botones a la derecha. En celular
   las dos columnas se disuelven y queda el orden de siempre. ---------- */
.pago-izq, .pago-der { display: contents; }
.caja-pago:has(#mcCardInline[hidden]) .tarjeta-visual { display: none; }
.caja-pago .codigo-promo, .caja-pago .campo-promo, .caja-pago .aviso-tope { order: 1; }
.caja-pago .boton-con-nota, .caja-pago #mcPaymentButton, .caja-pago .status, .caja-pago .seguro { order: 2; }
@media (min-width: 1100px) {
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .lado-marca { padding: 40px 40px; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .lado-marca h1 { font-size: 34px; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .lado-marca ul { display: none; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .lado-form { padding: 32px 32px; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .tarjeta-alta { max-width: 900px; padding: 28px 36px; }
  .caja-pago:has(#mcCardInline:not([hidden])) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; align-items: start; }
  .caja-pago:has(#mcCardInline:not([hidden])) .pago-izq,
  .caja-pago:has(#mcCardInline:not([hidden])) .pago-der { display: grid; gap: 14px; align-content: start; }
  .caja-pago:has(#mcCardInline:not([hidden])) .tarjeta-visual { max-width: 100%; }
  .caja-pago:has(#mcCardInline:not([hidden])) .codigo-promo { text-align: left; }
}
/* aire del pago en dos columnas (diseñador, 13/10/2026): en 1280x800 el botón de Mercado Pago entra sin scrollear */
@media (min-width: 1100px) {
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .lado-form { padding: 24px 32px; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .pasos-alta { margin-bottom: 20px; }
  body.alta:has(.panel-alta[data-step="4"]:not([hidden]) #mcCardInline:not([hidden])) .sub { margin-bottom: 4px; }
  .panel-alta[data-step="4"]:has(#mcCardInline:not([hidden])) { gap: 12px; }
  .caja-pago:has(#mcCardInline:not([hidden])) { padding: 18px 20px; }
  .caja-pago:has(#mcCardInline:not([hidden])) .pago-der { gap: 12px; }
}

/* "12 meses al precio de 10" como pastilla de ahorro dentro del botón Anual (Marco, 13/10/2026) */
.segmentado .seg-ahorro { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--acento-100); color: var(--acento-600); font-size: var(--t-12); font-weight: 700; line-height: 1.4; }
#pPeriodo button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { #pPeriodo button { flex-wrap: wrap; height: auto; min-height: 34px; padding: 4px; row-gap: 2px; } .segmentado .seg-ahorro { margin-left: 0; font-size: 11px; padding: 2px 8px; border-radius: 8px; text-wrap: balance; line-height: 1.3; } }

/* paso 04: botón al panel arriba y una sola barra de avance (Marco, 13/10/2026) */
.an-cab #mcAnalisisPanelArriba { margin-top: 4px; }
.an-barra { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.an-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento-500), #33C2B4); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease-salida, ease-out); }
.an-que { font-size: var(--t-13); color: var(--tinta-200); line-height: 1.5; }
.analisis[data-estado="terminado"] .an-barra { background: var(--sutil); }
.analisis[data-estado="terminado"] .an-que { color: var(--texto-2); }
@media (prefers-reduced-motion: reduce) { .an-barra i { transition: none; } }

/* ---------- la copia del 16/10/2026 trae el pago en dos columnas de la demo, que allá es siempre (la demo tiene siempre
   la tarjeta). Acá las dos columnas son solo con los campos de tarjeta a la vista (bloque de arriba): sin ellos (solo
   Mercado Pago) la caja queda en una columna, como antes de la copia. ---------- */
@media (min-width: 1100px) {
  .caja-pago:has(#mcCardInline[hidden]) { grid-template-columns: none; column-gap: normal; align-items: normal; }
  .caja-pago:has(#mcCardInline[hidden]) .pago-izq, .caja-pago:has(#mcCardInline[hidden]) .pago-der { display: contents; }
}

/* ---------- llegada desde un aviso de C1 (diseñador, 16/10/2026): las reglas .con-llegada de la copia nombran los
   botones de la demo (#aAtrasMarcas, #aSeguir1); acá el botón es "Vigilar ..." de la selección. Sin paso anterior,
   ocupa el ancho y puede partirse en dos renglones. ---------- */
.con-llegada .acciones-sel #mcConfirmAllSelections { flex: 1; margin-left: 0; white-space: normal; line-height: 1.25; height: auto; min-height: 48px; text-align: center; }
/* el aire de la demo: en ella la bajada y el bloque están dentro del panel (un gap más arriba), los chips vacíos ocupan
   su lugar en la grilla (otro gap antes del resumen) y el botón va en .acciones-alta, con 8 px arriba */
.con-llegada > .llegada { margin-top: 16px; }
.con-llegada #mcSelectionSummary:empty + #aResumen { margin-top: 16px; }
.con-llegada .acciones-sel { margin-top: 8px; }