/* COPIA del sistema de diseño de MarcaCheck (nuevo-frontend/demo/assets/css/empezar.css, 16/10/2026: llegada desde
   un aviso de C1, más lo del 13/10: análisis durante el alta, carga manual de marcas, desglose del pago, tarjeta
   neutra, pago en dos columnas, pastilla de "Anual" y barra del paso 04). No se edita acá: los cambios los hace el
   diseñador y se vuelven a copiar. Único cambio: sin el bloque "solo demo" (la barra de variantes y su margen en
   .lado-marca .abajo). Lo que la demo nombra con sus ids (data-panel, #aSeguir1, #pMP...) lo adapta
   empezar-produccion.css. */
/* ===================== Alta (/empezar) e ingreso ===================== */
body.alta { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--fondo); }
.lado-marca {
  position: sticky; top: 0; height: 100vh; overflow: hidden; color: #fff; padding: 40px 56px; display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(90% 60% at 100% 0%, rgba(14,154,141,.28), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(23,63,99,.9), transparent 70%), var(--tinta-950);
}
.lado-marca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.lado-marca > * { position: relative; z-index: 1; }
.lado-marca .arriba { display: flex; justify-content: space-between; align-items: center; }
.lado-marca .volver { color: var(--tinta-200); font-size: var(--t-13); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); }
.lado-marca .volver:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.lado-marca .volver svg { width: 14px; height: 14px; }
.lado-marca .centro { align-self: center; max-width: 480px; }
.lado-marca h1 { color: #fff; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; }
.lado-marca h1 span { color: var(--acento-500); }
.lado-marca .bajada { color: var(--tinta-200); font-size: var(--t-16); margin: 18px 0 32px; }
.lado-marca .bajada b { color: #fff; font-weight: 600; }
.lado-marca ul { list-style: none; display: grid; gap: 16px; }
.lado-marca li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; color: #D7E3EE; font-size: var(--t-14); }
.lado-marca li b { color: #fff; font-weight: 600; }
.lado-marca li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,154,141,.18); color: #7FE0D5; border: 1px solid rgba(14,154,141,.35); }
.lado-marca li i svg { width: 14px; height: 14px; }
.lado-marca .abajo { font-size: var(--t-12); color: var(--tinta-200); display: flex; gap: 8px; align-items: center; }
.lado-marca .abajo svg { width: 14px; height: 14px; }

.lado-form { display: grid; place-items: center; padding: 48px 32px; min-height: 100vh; }
.tarjeta-alta { width: 100%; max-width: 520px; padding: 36px; border-radius: var(--r-lg); box-shadow: var(--s-3); }

/* indicador de pasos con línea de progreso */
.pasos-alta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; }
.paso-alta { display: grid; gap: 8px; font-size: var(--t-12); font-weight: 600; color: var(--texto-2); }
.paso-alta .linea { height: 4px; border-radius: 4px; background: var(--sutil); overflow: hidden; }
.paso-alta .linea::after { content: ""; display: block; height: 100%; width: 0; background: var(--acento-500); border-radius: 4px; transition: width var(--d-lenta) var(--ease-salida); }
.paso-alta span { display: flex; align-items: center; gap: 6px; }
.paso-alta span em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: #94A3B8; }
.paso-alta.hecho, .paso-alta.activo { color: var(--tinta-900); }
.paso-alta.hecho .linea::after, .paso-alta.activo .linea::after { width: 100%; }
.paso-alta.hecho span em { color: var(--acento-600); }

.tarjeta-alta h2 { font-size: var(--t-30); }
.tarjeta-alta .sub { color: var(--texto-2); margin-top: 8px; margin-bottom: 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-alta { display: grid; gap: 16px; }
.panel-alta[hidden] { display: none; }
.panel-alta.entra { animation: panelEntra var(--d-lenta) var(--ease-salida); }
.panel-alta.entra-atras { animation: panelAtras var(--d-lenta) var(--ease-salida); }
@keyframes panelEntra { from { opacity: 0; transform: translateX(24px); } }
@keyframes panelAtras { from { opacity: 0; transform: translateX(-24px); } }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn-google { display: flex; width: 100%; gap: 10px; }
.o { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; color: var(--texto-2); font-size: var(--t-12); }
.o::before, .o::after { content: ""; height: 1px; background: var(--borde); }
.ver-clave { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border: 0; background: none; color: var(--texto-2); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.ver-clave:hover { background: var(--sutil); }
.ver-clave svg { width: 16px; height: 16px; }
.letra-chica { font-size: var(--t-12); color: var(--texto-2); }
.acciones-alta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.pie-alta { text-align: center; margin-top: 24px; font-size: var(--t-13); color: var(--texto-2); }
.pie-alta a { font-weight: 600; }
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.fuerza span { height: 3px; border-radius: 3px; background: var(--sutil); transition: background var(--d-media); }
.fuerza[data-n="1"] span:nth-child(-n+1) { background: var(--alto); }
.fuerza[data-n="2"] span:nth-child(-n+2) { background: var(--medio); }
.fuerza[data-n="3"] span:nth-child(-n+3), .fuerza[data-n="4"] span { background: var(--acento-500); }

/* paso marcas: buscador del registro */
.resultados { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.resultado {
  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;
}
.resultado:hover { border-color: #CBD5E1; box-shadow: var(--s-1); }
.resultado.elegido { border-color: var(--acento-500); background: #F6FCFB; }
.resultado b { font-size: var(--t-14); display: block; }
.resultado small { color: var(--texto-2); font-size: var(--t-12); display: block; overflow-wrap: anywhere; }
.resultado .tilde { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--borde); display: grid; place-items: center; color: transparent; transition: all var(--d-media) var(--ease-salida); }
.resultado .tilde svg { width: 14px; height: 14px; }
.resultado.elegido .tilde { background: var(--acento-500); border-color: var(--acento-500); color: var(--tinta-950); transform: scale(1.05); }
.sin-resultados { text-align: center; padding: 24px; color: var(--texto-2); font-size: var(--t-13); border: 1px dashed var(--borde); border-radius: 12px; }
.resumen-sel { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--borde); }
.resumen-sel b { font-variant-numeric: tabular-nums; }
.resumen-sel .precio-linea { text-align: right; font-size: var(--t-13); color: var(--texto-2); }
.resumen-sel .precio-linea b { display: block; font-family: var(--f-display); font-size: var(--t-20); color: var(--tinta-900); }
.chips-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-sel { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--acento-100); color: var(--acento-600); font-size: var(--t-12); font-weight: 600; animation: aparece var(--d-media) var(--ease-salida); }
.chip-sel button { width: 18px; height: 18px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.chip-sel button:hover { background: rgba(8,118,108,.12); }
.chip-sel button svg { width: 12px; height: 12px; }

/* paso pago */
.caja-pago { border: 1px solid var(--borde); border-radius: 14px; padding: 20px; display: grid; gap: 16px; }
/* desglose: marcas (acento) × precio por marca (azul) = total; el paquete en su propia línea */
.desglose { display: grid; gap: 10px; }
.d-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.d-linea[hidden] { display: none; }
.d-cant, .d-unit, .d-meses { display: inline-grid; justify-items: start; gap: 3px; padding: 8px 12px; border-radius: 10px; }
.d-cant b, .d-unit b, .d-meses b { font-family: var(--f-display); font-size: 22px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-cant small, .d-unit small, .d-meses small { font-size: var(--t-12); font-weight: 600; line-height: 1; }
.d-cant { background: var(--acento-100); color: var(--acento-600); }
.d-unit { background: var(--bajo-100); color: var(--tinta-800); }
.d-meses { background: var(--medio-100); color: var(--medio-texto); }
.d-op { font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--texto-2); }
.d-anual { display: none; }
.desglose.anual .d-anual { display: inline-flex; }
.d-paquete { justify-content: space-between; padding: 10px 12px; border-radius: 10px; border: 1px dashed #9FD9D2; background: #F6FCFB; }
.d-paq b { display: block; font-size: var(--t-14); color: var(--tinta-900); }
.d-paq small { display: block; font-size: var(--t-12); color: var(--texto-2); }
.d-total { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--tinta-950); color: #fff; }
.d-igual { font-family: var(--f-display); font-size: 22px; font-weight: 700; color: #7FE0D5; }
.d-tot-rot { font-size: var(--t-14); font-weight: 600; }
.d-tot-rot small { display: block; font-size: var(--t-12); font-weight: 500; color: var(--tinta-200); }
.d-total b { font-family: var(--f-display); font-size: 32px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* tarjeta: neutra hasta que el número dice la red; después toma sus colores */
.tarjeta-visual {
  aspect-ratio: 1.586; width: 100%; max-width: 300px; justify-self: center; border-radius: 14px; padding: 16px 18px; color: #fff; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px;
  background: linear-gradient(135deg, #8A96A6, #5D6878); box-shadow: var(--s-3); font-family: var(--f-mono); position: relative; overflow: hidden;
  transition: background var(--d-lenta) var(--ease-suave);
}
.tarjeta-visual::after { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tarjeta-visual[data-red="visa"] { background: linear-gradient(135deg, #1A1F71, #2F4BB5); }
.tarjeta-visual[data-red="master"] { background: linear-gradient(135deg, #1C1C1E, #3E3E44); }
.tarjeta-visual[data-red="amex"] { background: linear-gradient(135deg, #2E77BC, #1B4F86); }
.tarjeta-visual[data-red="naranja"] { background: linear-gradient(135deg, #FE5000, #C93E00); }
.tarjeta-visual[data-red="cabal"] { background: linear-gradient(135deg, #0B4D8C, #062F57); }
.tv-arriba { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.tv-banco { font-family: var(--f-texto); font-size: var(--t-13); font-weight: 700; letter-spacing: .01em; }
.tv-red { height: 24px; display: flex; align-items: center; }
.tv-red svg { height: 100%; width: auto; max-width: 70px; animation: aparece var(--d-media) var(--ease-salida); }
.tv-chip { width: 36px; height: 27px; border-radius: 6px; background: linear-gradient(135deg, #E9D9A6, #B9A160); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tarjeta-visual .nro { position: relative; z-index: 1; align-self: center; font-size: 17px; letter-spacing: .12em; }
.tarjeta-visual .abajo { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; }
.rot-tarjeta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.red-detectada { font-size: var(--t-12); font-weight: 600; color: var(--acento-600); }
.seguro { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: var(--t-12); color: var(--texto-2); }
.seguro svg { width: 14px; height: 14px; }

/* listo */
.listo { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 12px 0; }
.listo .sello { width: 72px; height: 72px; border-radius: 50%; background: var(--acento-100); color: var(--acento-600); display: grid; place-items: center; animation: sello .6s var(--ease-salida); }
.listo .sello svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo .5s .25s var(--ease-salida) forwards; }
@keyframes sello { from { transform: scale(.6); opacity: 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }

@media (max-width: 960px) {
  body.alta { grid-template-columns: 1fr; }
  .lado-marca { position: relative; height: auto; padding: 24px 16px 32px; }
  .lado-marca .centro { margin-top: 28px; }
  .lado-marca ul, .lado-marca .abajo { display: none; }
  .lado-marca .bajada { margin-bottom: 0; }
  .lado-form { min-height: 0; padding: 16px 16px 48px; place-items: start center; }
  .tarjeta-alta { padding: 24px 20px; }
}
@media (max-width: 480px) { .fila-2 { grid-template-columns: 1fr; } }

/* ingreso */
body.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(60% 50% at 50% 0%, rgba(14,154,141,.10), transparent 70%), var(--fondo); }
.caja-ingreso { width: 100%; max-width: 420px; }
.caja-ingreso .logo { display: flex; justify-content: center; margin-bottom: 28px; }
.caja-ingreso .tarjeta { padding: 32px; border-radius: var(--r-lg); box-shadow: var(--s-3); display: grid; gap: 16px; }
.caja-ingreso h1 { font-size: var(--t-24); text-align: center; }
.caja-ingreso .sub { text-align: center; color: var(--texto-2); margin-top: -8px; }

/* ¿En qué estás? */
.intencion { gap: 18px; }
.intencion .gancho { font-size: var(--t-13); color: var(--acento-600); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.intencion .gancho::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-500); box-shadow: 0 0 0 4px var(--acento-100); flex: none; }
.intencion h2 { font-size: var(--t-30); }
.opciones-intencion { display: grid; gap: 12px; }
.op-intencion {
  display: grid; grid-template-columns: 44px 1fr 18px; gap: 14px; align-items: center; text-align: left; padding: 18px;
  border: 1.5px solid var(--borde); border-radius: 16px; background: var(--superficie); cursor: pointer; color: var(--tinta-900);
  transition: border-color var(--d-media), box-shadow var(--d-media) var(--ease-salida), transform var(--d-media) var(--ease-salida);
  animation: aparece var(--d-lenta) var(--ease-salida) both;
}
.op-intencion:nth-child(2) { animation-delay: 70ms; }
.op-intencion:hover { border-color: var(--acento-500); box-shadow: var(--s-2), 0 0 0 4px rgba(14,154,141,.08); transform: translateY(-2px); }
.op-intencion .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-100); color: var(--acento-600); transition: all var(--d-media); }
.op-intencion:hover .ico { background: var(--acento-500); color: var(--tinta-950); }
.op-intencion .ico svg { width: 22px; height: 22px; }
.op-intencion b { display: block; font-family: var(--f-display); font-size: var(--t-16); }
.op-intencion small { display: block; color: var(--texto-2); font-size: var(--t-13); margin-top: 2px; }
.op-intencion em { display: inline-block; margin-top: 8px; font-style: normal; font-size: var(--t-12); font-weight: 600; color: var(--acento-600); background: var(--acento-100); padding: 2px 8px; border-radius: 6px; }
.op-intencion > svg { width: 18px; height: 18px; color: var(--texto-2); transition: transform var(--d-media) var(--ease-salida); }
.op-intencion:hover > svg { transform: translateX(3px); color: var(--acento-600); }
.pie-intencion { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--t-13); color: var(--texto-2); }
.pie-intencion a { font-weight: 600; }
.nota-flujo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--acento-100); color: var(--tinta-900); font-size: var(--t-13); animation: aparece var(--d-media) var(--ease-salida); }
.nota-flujo svg { width: 16px; height: 16px; color: var(--acento-600); flex: none; margin-top: 2px; }
.nota-flujo[hidden] { display: none; }

/* ===================== Análisis durante el alta (13/10) ===================== */
/* franja: pegada arriba de los pasos, en acento. Estadísticas del sistema (no un análisis): los boletines en plazo
   se encienden uno por uno, el contador sube hasta las solicitudes en plazo y después un barrido los recorre */
#franjaCentinela { display: block; height: 0; }
.franja-analisis {
  position: sticky; top: 0; z-index: 5; margin: -36px -36px 24px; padding: 12px 36px 13px;
  display: grid; gap: 9px;
  background: var(--acento-100); border-bottom: 1px solid #BFE8E3; border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: var(--t-13); line-height: 1.4; color: var(--tinta-900);
  transition: box-shadow var(--d-media), border-radius var(--d-media);
  animation: aparece var(--d-lenta) var(--ease-salida);
}
.franja-analisis[hidden], .franja-analisis.fuera { display: none; }
.franja-analisis.pegada { border-radius: 0; box-shadow: var(--s-2); }
.f-fila { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; }
.franja-analisis p { margin: 0; min-width: 0; }
.franja-analisis b { font-weight: 700; font-variant-numeric: tabular-nums; }
.f-num { text-align: right; white-space: nowrap; color: var(--acento-600); }
.f-num b { font-family: var(--f-display); font-size: var(--t-18); letter-spacing: -.01em; }
.f-num small { font-size: var(--t-12); color: var(--tinta-700); font-weight: 500; }
.franja-analisis .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--acento-500); opacity: .45; }
.franja-analisis .punto { opacity: 1; animation: latido 1.8s var(--ease-suave) infinite; }
.franja-analisis .corto { display: none; }
.f-texto { margin: 0; font-size: var(--t-12); line-height: 1.5; color: var(--tinta-700); }
.f-texto b { color: var(--tinta-900); }
.f-ultimo { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: rgba(14,154,141,.14); color: var(--acento-600); font-weight: 600; white-space: nowrap; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,154,141,.45); } 50% { box-shadow: 0 0 0 6px rgba(14,154,141,0); } }
/* segmentos de boletines (franja y paso 04) */
.f-bols { position: relative; display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; overflow: hidden; border-radius: 3px; }
.f-bols .bol i { transform: scaleX(0); transition: transform .45s var(--ease-salida); transition-delay: calc(var(--i) * 90ms); }
.f-bols.encendidos .bol i { transform: none; }
.f-bols.encendidos::after { content: ""; position: absolute; inset: 0; width: 22%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-100%); animation: barrido 3.6s 2.2s var(--ease-suave) infinite; }
@keyframes barrido { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(480%); } }
.f-bols .bol, .an-bols .bol { position: relative; overflow: hidden; background: rgba(14,154,141,.16); }
.f-bols .bol { height: 6px; border-radius: 3px; }
.an-bols .bol i { position: absolute; inset: 0; background: var(--acento-500); transform-origin: bottom; transition: transform 1.9s linear; }
.f-bols .bol i { position: absolute; inset: 0; background: var(--acento-500); transform-origin: left; }
.an-bols .bol.en i { background-image: linear-gradient(90deg, var(--acento-500), #33C2B4, var(--acento-500)); background-size: 200% 100%; animation: brillo 1.2s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

.pasos-alta.cuatro { grid-template-columns: repeat(4, 1fr); }
.paso-alta[hidden] { display: none; }

/* pago: botones de dos renglones parejos */
.btn-dos { height: auto; min-height: var(--alto-btn); padding-top: 10px; padding-bottom: 10px; line-height: 1.3; flex-wrap: wrap; column-gap: .3em; row-gap: 0; text-align: center; }
.btn-dos.btn-grande { min-height: 48px; }
.btn-dos .nw { white-space: nowrap; }
.boton-con-nota { display: grid; gap: 6px; }
.nota-boton { margin: 0; text-align: center; font-size: var(--t-12); color: var(--texto-2); }
.nota-boton[hidden] { display: none; }

/* paso 04 */
.analisis { display: grid; gap: 22px; }
.an-cab { display: grid; gap: 10px; }
.an-parcial { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; }
.insignia-parcial { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-xs); background: var(--sutil); color: var(--tinta-800); font-size: var(--t-13); font-weight: 600; }
.an-estado { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); font-weight: 600; color: var(--acento-600); }
.an-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento-500); }
.analisis[data-estado="corriendo"] .an-estado .punto { animation: latido 1.4s var(--ease-suave) infinite; }
.rot { font-size: var(--t-12); color: var(--texto-2); }
.rot.fuerte { font-size: var(--t-13); font-weight: 600; color: var(--tinta-900); }
/* en vivo */
.an-vivo { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-md); background: var(--tinta-950); color: #fff; }
.an-vivo .rot { color: var(--tinta-200); }
.an-contador { display: grid; gap: 2px; }
.an-contador b { font-family: var(--f-display); font-size: 44px; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.an-contador small { font-family: var(--f-texto); font-size: var(--t-14); font-weight: 500; letter-spacing: 0; color: var(--tinta-200); }
.an-bols-cab { display: flex; justify-content: space-between; gap: 8px; }
.an-bols-cab .rot:last-child { color: #7FE0D5; font-weight: 600; }
.an-bols { display: grid; grid-template-columns: repeat(17, 1fr); gap: 4px; }
.an-bols .bol { height: 34px; border-radius: 6px; background: rgba(255,255,255,.08); }
.an-bols .bol i { transform: scaleY(var(--p, 0)); transform-origin: bottom; }
.an-bols .bol.hecho i { transform: none; }
.an-bols .bol.en { box-shadow: 0 0 0 1.5px #7FE0D5; }
.an-bols .bol em { position: absolute; z-index: 1; left: 0; right: 0; bottom: 3px; text-align: center; font-style: normal; font-family: var(--f-mono); font-size: 9px; color: rgba(255,255,255,.55); }
.an-bols .bol.hecho em { color: var(--tinta-950); }
.analisis[data-estado="terminado"] .an-vivo { background: var(--superficie); color: var(--tinta-900); border: 1px solid var(--borde); }
.analisis[data-estado="terminado"] .an-vivo .rot { color: var(--texto-2); }
.analisis[data-estado="terminado"] .an-contador b { color: var(--tinta-900); font-size: 36px; }
.analisis[data-estado="terminado"] .an-bols .bol { height: 10px; }
.analisis[data-estado="terminado"] .an-bols .bol em { display: none; }
.an-cinta { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.an-cinta[hidden] { display: none; }
.an-cinta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.an-cinta li { padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.08); font-family: var(--f-mono); font-size: var(--t-12); color: #D7E3EE; animation: cinta .5s var(--ease-salida) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes cinta { from { opacity: 0; transform: translateY(6px); } }
/* parecidas */
.an-bloque { display: grid; gap: 12px; }
.an-niveles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nivel { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); }
.nivel b { font-family: var(--f-display); font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--tinta-900); }
.nivel span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-14); font-weight: 600; color: var(--tinta-900); }
.nivel .pt { width: 9px; height: 9px; border-radius: 50%; }
.nivel.alta { border-color: #F2C9C1; background: var(--alto-100); } .nivel.alta .pt { background: var(--alto); } .nivel.alta b { color: var(--alto-texto); }
.nivel.media { border-color: #EBD9B4; background: var(--medio-100); } .nivel.media .pt { background: var(--medio); } .nivel.media b { color: var(--medio-texto); }
.nivel.cero b { color: var(--tinta-200); }
.nivel.late { animation: nivelLate 1.2s var(--ease-salida) 1; }
.nivel.alta.late { --c: rgba(216,91,72,.3); } .nivel.media.late { --c: rgba(184,134,47,.3); }
@keyframes nivelLate { 0% { box-shadow: 0 0 0 0 var(--c); transform: scale(1); } 30% { box-shadow: 0 0 0 7px var(--c); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
.an-casos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-casos:empty { display: none; }
.caso { display: grid; gap: 2px; padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid var(--borde); border-left: 4px solid var(--alto); background: var(--superficie); box-shadow: var(--s-1); animation: casoEntra .6s var(--ease-salida) both; }
.caso.media { border-left-color: var(--medio); }
.caso .niv { font-size: var(--t-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--alto-texto); }
.caso.media .niv { color: var(--medio-texto); }
.caso b { font-family: var(--f-display); font-size: var(--t-16); color: var(--tinta-900); }
.caso small { font-size: var(--t-13); color: var(--texto-2); }
.caso .dias { color: var(--tinta-900); font-weight: 600; white-space: nowrap; }
@keyframes casoEntra { from { opacity: 0; transform: translateX(-14px) scale(.98); } }
.an-cero { margin: 0; font-size: var(--t-14); color: var(--tinta-900); }
.an-casos-mas { margin: -4px 0 0; font-size: var(--t-14); font-weight: 600; color: var(--acento-600); }
.an-casos-mas[hidden] { display: none; }
.an-cero[hidden] { display: none; }
.an-revision, .an-bajas { display: grid; grid-template-columns: 9px 1fr; gap: 10px; align-items: baseline; margin: 0; font-size: var(--t-14); line-height: 1.5; color: var(--tinta-900); }
.an-revision[hidden], .an-bajas[hidden] { display: none; }
.an-revision .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento-500); animation: latido 1.4s var(--ease-suave) infinite; align-self: center; }
.an-bajas .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--bajo); align-self: center; }
.an-revision b, .an-bajas b { font-variant-numeric: tabular-nums; }
.an-bajas { padding: 10px 12px; border-radius: 10px; background: var(--bajo-100); }
/* viabilidad y plazo: dos datos con su número grande */
.an-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-datos[hidden], .an-dato[hidden] { display: none; }
.an-dato { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); }
.an-dato .rot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; color: var(--tinta-900); }
.an-dato .rot svg { width: 15px; height: 15px; color: var(--texto-2); }
.an-dato .valor { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--t-16); color: var(--tinta-900); }
.an-dato .valor > b { font-family: var(--f-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.an-dato small { font-size: var(--t-13); color: var(--texto-2); }
.viab { display: inline-flex; gap: 5px; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; font-size: var(--t-14); font-weight: 600; white-space: nowrap; animation: aparece var(--d-media) var(--ease-salida); }
.viab b { font-family: var(--f-display); font-size: var(--t-16); font-weight: 800; }
.viab.alta { background: var(--acento-100); color: var(--acento-600); }
.viab.moderada { background: var(--medio-100); color: var(--medio-texto); }
.viab.baja { border: 1px solid var(--borde); color: var(--tinta-800); }
.viab.pend { background: var(--sutil); color: var(--texto-2); }
/* custodia permanente: el mensaje clave */
.an-custodia { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--tinta-900), var(--tinta-800)); color: #fff; }
.an-custodia .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(14,154,141,.25); color: #7FE0D5; }
.an-custodia .ico svg { width: 22px; height: 22px; }
.an-custodia p { margin: 0; font-size: var(--t-14); line-height: 1.5; color: #D7E3EE; }
.an-custodia b { color: #fff; font-size: var(--t-16); display: block; }
/* conceptos: uno a la vez, con fundido; la caja toma el alto del más largo así no salta */
.an-conceptos { display: grid; padding: 16px 18px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento-500); font-size: var(--t-14); color: var(--tinta-800); line-height: 1.6; }
.concepto { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--d-lenta) var(--ease-suave), transform var(--d-lenta) var(--ease-salida), visibility 0s linear var(--d-lenta); }
.concepto.activo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.concepto b { display: block; margin-bottom: 2px; font-family: var(--f-display); font-size: var(--t-16); color: var(--tinta-900); font-weight: 700; }
.an-conceptos .puntos { grid-area: 2 / 1; display: flex; gap: 6px; margin-top: 10px; }
.puntos button { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.puntos button::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: var(--tinta-200); transition: width var(--d-media) var(--ease-salida), background var(--d-media); }
.puntos button[aria-current="true"]::before { width: 16px; background: var(--acento-500); }

@media (max-width: 960px) {
  .franja-analisis { margin: -24px -20px 20px; padding: 11px 20px 12px; }
}
@media (max-width: 480px) {
  .franja-analisis .largo { display: none; }
  .franja-analisis .corto { display: inline; }
  .franja-analisis.pegada .f-texto { display: none; }
  .franja-analisis { font-size: var(--t-12); }
  .f-num b { font-size: var(--t-16); }
  .f-bols { gap: 2px; }
  .an-vivo { padding: 14px; }
  .an-contador b { font-size: 36px; }
  .an-bols { gap: 2px; }
  .an-bols .bol { height: 28px; border-radius: 4px; }
  .an-bols .bol em { display: none; }
  .nivel b { font-size: 28px; }
  .nivel { padding: 12px 14px; }
  .nivel span { font-size: var(--t-12); gap: 5px; white-space: nowrap; }
  .an-datos { grid-template-columns: 1fr; }
  .an-custodia { grid-template-columns: 36px 1fr; padding: 14px; gap: 12px; }
  .an-custodia .ico { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .f-bols.encendidos::after { display: none; }
  .f-bols .bol i { transition: none; }
  .franja-analisis, .franja-analisis .punto, .an-estado .punto, .an-revision .punto, .bol.en i, .an-cinta li, .caso, .nivel.late, .viab { animation: none !important; }
  .an-bols .bol i { transition: none; }
  .concepto { transition: none; }
}
/* si ya terminó al entrar al 04, todo aparece quieto */
.analisis.sin-anim .caso, .analisis.sin-anim .viab, .analisis.sin-anim .nivel { animation: none; }

/* carga manual de marcas */
.enlace-manual { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--acento-600); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.enlace-manual:hover { text-decoration: underline; }
.enlace-manual svg { width: 14px; height: 14px; }
.enlace-manual[hidden] { display: none; }
.carga-manual { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); box-shadow: var(--s-1); animation: aparece var(--d-media) var(--ease-salida); }
.carga-manual[hidden] { display: none; }
.cab-manual { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cab-manual b { font-family: var(--f-display); font-size: var(--t-16); color: var(--tinta-900); }
.cab-manual p { margin: 2px 0 0; font-size: var(--t-13); color: var(--texto-2); }
.fila-manual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.zona-logo-m { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; height: var(--alto-campo, 44px); padding: 0 6px 0 6px; border: 1.5px dashed var(--borde); border-radius: var(--r-sm); cursor: pointer; color: var(--texto-2); font-size: var(--t-13); transition: border-color var(--d-rapida), background var(--d-rapida); min-width: 0; }
.zona-logo-m:hover, .zona-logo-m.sobre { border-color: var(--acento-500); background: var(--acento-100); color: var(--acento-600); }
.zona-logo-m.con-logo { border-style: solid; color: var(--tinta-900); }
.zona-logo-m .vista { width: 32px; height: 32px; border-radius: 8px; background: var(--sutil); display: grid; place-items: center; overflow: hidden; }
.zona-logo-m .vista svg { width: 16px; height: 16px; }
.zona-logo-m .vista img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.zona-logo-m .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-logo-m .quitar { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--texto-2); cursor: pointer; display: grid; place-items: center; }
.zona-logo-m .quitar:hover { background: var(--sutil); }
.zona-logo-m .quitar svg { width: 14px; height: 14px; }
.zona-logo-m .quitar[hidden] { display: none; }
.tipo-manual { display: flex; gap: 8px; align-items: center; margin: -6px 0 0; font-size: var(--t-12); color: var(--texto-2); }
.tipo-manual[hidden] { display: none; }
.tipo-manual svg { width: 14px; height: 14px; color: var(--acento-600); flex: none; }
.tipo-manual b { color: var(--tinta-900); font-weight: 600; }
.rot-clases { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rot-clases .btn[aria-pressed="true"] { background: var(--tinta-900); color: #fff; border-color: var(--tinta-900); }
.lista-clases-m { display: grid; max-height: 216px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--borde); border-radius: var(--r-sm); }
.fila-c { display: grid; grid-template-columns: 18px 30px 1fr; gap: 10px; align-items: center; padding: 8px 12px; font-size: var(--t-13); color: var(--tinta-900); cursor: pointer; border-top: 1px solid var(--sutil); }
.fila-c:first-child { border-top: 0; }
.fila-c:hover { background: var(--fondo); }
.fila-c.marcada { background: #F6FCFB; }
.fila-c input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento-500); cursor: pointer; }
.fila-c .num { height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--sutil); font-family: var(--f-display); font-weight: 700; font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.fila-c.marcada .num { background: var(--tinta-900); color: #fff; }
.sin-clases { padding: 16px; text-align: center; font-size: var(--t-13); color: var(--texto-2); }
.elegidas-m { display: flex; flex-wrap: wrap; gap: 6px; }
.elegidas-m:empty { display: none; }
.chip-c { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 7px; background: var(--tinta-900); color: #fff; font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-c button { width: 18px; height: 18px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.chip-c button:hover { background: rgba(255,255,255,.15); }
.chip-c button svg { width: 11px; height: 11px; }
.promo-todas, .linea-paquete { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--acento-100); color: var(--tinta-900); animation: aparece var(--d-media) var(--ease-salida); }
.linea-paquete { grid-template-columns: 1fr auto; background: var(--fondo); border: 1px solid var(--borde); }
.promo-todas[hidden], .linea-paquete[hidden] { display: none; }
.promo-todas svg { width: 18px; height: 18px; color: var(--acento-600); }
.promo-todas b, .linea-paquete b { display: block; font-size: var(--t-13); }
.promo-todas small, .linea-paquete small { display: block; font-size: var(--t-12); color: var(--texto-2); }
/* el lugar del precio promocional: punteado mientras no hay monto */
.precio-promo { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: var(--t-14); color: var(--acento-600); white-space: nowrap; }
.precio-promo:not(:has(*)):is([data-precio-paquete]) { padding: 3px 8px; border: 1px dashed currentColor; border-radius: 7px; font-family: var(--f-texto); font-weight: 600; font-size: var(--t-12); }
.error-manual { margin: 0; font-size: var(--t-13); color: var(--alto-texto); }
.error-manual[hidden] { display: none; }
.acciones-manual { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.chip-sel img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: #fff; }
.chip-sel small { font-weight: 500; opacity: .8; }
.chip-sel { height: auto; min-height: 28px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .fila-manual { grid-template-columns: 1fr; }
  .carga-manual { padding: 14px; }
  .promo-todas { grid-template-columns: 18px 1fr; }
  .promo-todas .precio-promo { grid-column: 2; justify-self: start; }
  .linea-paquete { grid-template-columns: 1fr; }
  .linea-paquete .precio-promo { justify-self: start; }
}

/* 360 px: "Anual · 12 meses al precio de 10" no entraba y ensanchaba la página (desde el 04/10) */
@media (max-width: 480px) {
  .tarjeta-visual .nro { font-size: 14px; letter-spacing: .08em; }
  .d-cant b, .d-unit b, .d-meses b { font-size: 19px; }
  .d-cant, .d-unit, .d-meses { padding: 7px 10px; }
  .d-total b { font-size: 26px; }
  #pPeriodo button { white-space: normal; height: auto; min-height: 34px; padding: 6px 10px; line-height: 1.25; min-width: 0; }
}

/* ---------- pago en dos columnas en compu (Marco, 13/10): desglose, tarjeta dibujada y código a la izquierda;
   campos y botones a la derecha, así los botones entran sin scrollear. En celular las columnas se disuelven. ---------- */
.pago-izq, .pago-der { display: contents; }
.caja-pago details { order: 1; }
.caja-pago .boton-con-nota, .caja-pago #pMP, .caja-pago .seguro { order: 2; }
@media (min-width: 1100px) {
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .lado-marca { padding: 40px; }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .lado-marca h1 { font-size: 34px; }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .lado-marca ul { display: none; }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .lado-form { padding: 32px; }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .tarjeta-alta { max-width: 900px; padding: 28px 36px; }
  .caja-pago:has(> .pago-izq) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; align-items: start; }
  .pago-izq, .pago-der { display: grid; gap: 14px; align-content: start; }
  .pago-izq .tarjeta-visual { max-width: 100%; }
  .pago-izq details summary { text-align: left !important; }
  /* aire vertical más justo para que "Pagar vía Mercado Pago" entre también en 1280x800 */
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .pasos-alta { margin-bottom: 20px; }
  .panel-alta[data-panel="2"] { gap: 12px; }
  .panel-alta[data-panel="2"] .sub { margin-bottom: 4px; }
  body.alta:has(.panel-alta[data-panel="2"]:not([hidden])) .lado-form { padding: 24px 32px; }
  .pago-der { gap: 12px; }
  .panel-alta[data-panel="2"] .caja-pago { padding: 18px 20px; }
}

/* "12 meses al precio de 10" como pastilla de ahorro dentro del botón Anual (Marco, 13/10) */
.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) */
.an-cab #anPanelArriba { 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; } }

/* ===================== llegada desde un aviso (C1, 16/10) =====================
   La marca del mail arranca marcada; las otras del titular, como sugerencias. Misma denominación y clase = una tarjeta. */
.llegada { display: grid; gap: 16px; animation: aparece var(--d-media) var(--ease-salida); }
.llegada[hidden], .llegada [hidden] { display: none !important; }
.llegada-oferta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--acento-100); border: 1px solid rgba(14,154,141,.18); }
.llegada-oferta .lo-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--acento-600); box-shadow: var(--s-1); }
.llegada-oferta .lo-ico svg { width: 18px; height: 18px; }
.llegada-oferta .lo-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.llegada-oferta .lo-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-14); color: var(--tinta-900); }
.llegada-oferta .nw { white-space: nowrap; }
.llegada-oferta .lo-txt small { font-size: var(--t-13); color: var(--tinta-800); }
.llegada-oferta s { color: var(--texto-2); }
.llegada-oferta .lo-off { background: #fff; }
.llegada-bloque { display: grid; gap: 8px; }
.llegada-bloque > .rotulo { color: var(--texto-2); }
.llegada-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.llegada-cab .rotulo { color: var(--texto-2); }
.llegada-opc { font-size: var(--t-12); color: var(--texto-2); }
.llegada-lista { display: grid; gap: 8px; }
.llegada-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie);
  transition: border-color var(--d-rapida), background var(--d-media) var(--ease-suave), box-shadow var(--d-media) var(--ease-salida); }
.llegada-item:hover { border-color: #CBD5E1; box-shadow: var(--s-1); }
.llegada-item.sel { border-color: var(--acento-500); background: #F3FBFA; box-shadow: 0 0 0 1px var(--acento-500) inset; }
.llegada-item:focus-visible { box-shadow: var(--anillo); }
.llegada-item .li-txt { display: grid; gap: 1px; min-width: 0; }
.llegada-item .li-txt b { font-family: var(--f-display); font-size: var(--t-14); color: var(--tinta-900); overflow-wrap: anywhere; }
.llegada-item .li-txt small { font-size: var(--t-12); color: var(--texto-2); }
.llegada-item .li-actas { font-family: var(--f-mono); font-size: 11px !important; font-variant-numeric: tabular-nums; }
.llegada-item .li-actas em { font-style: normal; font-family: var(--f-texto); font-weight: 600; color: var(--tinta-800); background: var(--sutil); border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.llegada-item .li-estado { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: var(--t-12); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--borde); color: var(--acento-600); background: var(--superficie); }
.llegada-item .li-estado svg { width: 14px; height: 14px; }
.llegada-item.sel .li-estado { border-color: transparent; background: var(--acento-500); color: #fff; }
.resumen-sel .precio-linea s { display: block; font-family: var(--f-texto); font-size: var(--t-12); font-weight: 500; color: var(--texto-2); }
.resumen-sel .precio-linea s[hidden] { display: none; }
/* con ref, "Volver a la página" pierde peso: quien llega desde un mail no viene de la página */
.lado-marca .volver.discreto { border-color: transparent; padding-left: 0; padding-right: 0; color: rgba(200,215,228,.7); font-size: var(--t-12); }
.lado-marca .volver.discreto:hover { background: none; color: #fff; }
@media (max-width: 480px) {
  .llegada-item { grid-template-columns: 40px minmax(0,1fr); }
  .llegada-item .mini-logo { --t: 40px !important; }
  .llegada-item .li-estado { grid-column: 2; justify-self: start; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .llegada { animation: none; } }
.con-llegada .resultados[hidden], .con-llegada .con-icono[hidden], .con-llegada .enlace-manual[hidden] { display: none; }
/* llegando desde el aviso no hay paso anterior: el botón ocupa el ancho y puede partirse en dos renglones */
.con-llegada .acciones-alta #aAtrasMarcas { display: none; }
.con-llegada .acciones-alta #aSeguir1 { flex: 1; white-space: normal; line-height: 1.25; height: auto; min-height: 48px; text-align: center; }