/* ===========================================================
   NEKO · EVENTOS — roadmap, ficha e inscripción
   Hereda los tokens de styles.css. Aquí solo lo nuevo.

   Paleta: burdeos + beige, como el resto. Sin terceros colores.
   =========================================================== */

/* ===========================================================
   ROADMAP HORIZONTAL

   Sin trimestres (Q1-Q4) — dicho expresamente por el cliente. Es una
   línea continua de hitos que se recorre de izquierda a derecha.
   =========================================================== */
.roadmap{position:relative;min-width:0;}

.roadmap-cab{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3);
}
.roadmap-cab h2{margin:0;}
.roadmap-cab .ayuda{margin:0;}

/* La pista es lo único que se desplaza en horizontal. Va con
   `overscroll-behavior-x:contain` para que al llegar al final no
   arrastre el gesto de «atrás» del navegador. */
.roadmap-pista{
  display:flex;gap:var(--space-3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:var(--space-4) 4px var(--space-3);
  scrollbar-width:thin;scrollbar-color:var(--burgundy-500) transparent;
  min-width:0;
}
.roadmap-pista::-webkit-scrollbar{height:8px;}
.roadmap-pista::-webkit-scrollbar-track{background:var(--surface-alt);border-radius:var(--r-full);}
.roadmap-pista::-webkit-scrollbar-thumb{background:var(--burgundy-500);border-radius:var(--r-full);}

/* Aquí hubo un «raíl» discontinuo cruzando el roadmap de lado a lado.
   Se quitó: iba en posición absoluta y cortaba las tarjetas por abajo, y
   en Actividades atravesaba el cartel de estado vacío. No aportaba nada
   que no dijeran ya las propias lápidas puestas en fila. No reponerlo. */

/* ---------- la lápida ---------- */
.rm-hito{
  flex:none;width:clamp(210px,23vw,248px);
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);
  /* el arco de arriba es lo que la hace lápida y no una tarjeta más */
  border-radius:104px 104px var(--r-lg) var(--r-lg);
  padding:var(--space-4) var(--space-3) var(--space-3);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.rm-hito:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--burgundy-600);}
.rm-hito:focus-visible{outline:3px solid var(--burgundy-500);outline-offset:3px;}

.rm-estado{
  align-self:center;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--r-full);margin-bottom:var(--space-2);
  background:var(--surface-soft);color:var(--burgundy-700);border:1px solid var(--border);
}
.rm-fecha{text-align:center;line-height:1;margin-bottom:var(--space-2);}
.rm-dia{
  display:block;font-family:var(--font-num);font-weight:800;
  font-size:clamp(2.6rem,5vw,3.4rem);color:var(--burgundy-700);letter-spacing:-.03em;
}
.rm-mes{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--text-muted);margin-top:6px;
}
.rm-titulo{
  font-family:var(--font-display);font-size:1.12rem;font-weight:700;line-height:1.2;
  text-align:center;margin:0 0 6px;
}
.rm-lugar{
  font-size:.86rem;color:var(--text-muted);text-align:center;margin:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.rm-lugar svg{width:14px;height:14px;flex:none;}

.rm-pie{
  margin-top:auto;padding-top:var(--space-3);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;min-height:44px;
}
.rm-patro{display:flex;align-items:center;gap:8px;}
.rm-patro img{max-height:28px;width:auto;}
.rm-patro span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.rm-sin-patro{font-size:.72rem;color:var(--text-muted);opacity:.7;}

/* ---------- estados ---------- */
/* Abierto: el macizo. Es donde se puede entrar, asi que es lo que tiene
   que saltar a la vista (16/8/2026; antes este papel lo tenia `proximo`,
   que ahora significa «aun no se abre» y va apagado). */
.rm-hito.es-abierto{
  background:linear-gradient(160deg,var(--burgundy-700),var(--burgundy-900));
  border-color:var(--burgundy-900);color:var(--on-dark);
  box-shadow:var(--shadow-md);
}
.rm-hito.es-abierto .rm-dia{color:#fff;}
.rm-hito.es-abierto .rm-mes,
.rm-hito.es-abierto .rm-lugar,
.rm-hito.es-abierto .rm-patro span,
.rm-hito.es-abierto .rm-sin-patro{color:var(--on-dark-muted);}
.rm-hito.es-abierto .rm-estado{background:#fff;color:var(--burgundy-800);border-color:#fff;}
.rm-hito.es-abierto .rm-pie{border-top-color:rgba(255,255,255,.2);}
.rm-hito.es-abierto:focus-visible{outline-color:#fff;}

/* Hecho: apagado pero legible. No se esconde — el recorrido cuenta. */
.rm-hito.es-hecho{background:var(--surface-alt);}
.rm-hito.es-hecho .rm-dia{color:var(--text-muted);}
.rm-hito.es-hecho .rm-estado{background:transparent;color:var(--text-muted);}
.rm-hito.es-hecho .rm-titulo{color:var(--text-muted);}

/* ---------- controles de la pista ---------- */
.roadmap-nav{display:flex;gap:8px;}
.roadmap-nav button:disabled{opacity:.35;cursor:not-allowed;transform:none;}

/* ===========================================================
   FICHA DE EVENTO
   =========================================================== */
/* Las migas viven en store.css, que estas páginas no cargan. */
.migas{font-size:.88rem;color:var(--text-muted);margin:0;}
.migas a{color:var(--burgundy-700);}

.ev-cabecera{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:var(--space-4);align-items:start;
}
.ev-cartel{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  background:linear-gradient(150deg,var(--burgundy-800),var(--burgundy-900));
  box-shadow:var(--shadow-md);aspect-ratio:3/4;display:grid;place-items:center;
}
.ev-cartel img{width:100%;height:100%;object-fit:cover;}
.ev-cartel .brand-logo{width:72px;height:104px;color:rgba(255,255,255,.22);}

.ev-tipo{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy-600);margin-bottom:var(--space-1);
}
.ev-datos{list-style:none;margin:var(--space-3) 0;padding:0;display:grid;gap:12px;}
.ev-datos li{display:flex;gap:12px;align-items:flex-start;}
.ev-datos svg{width:20px;height:20px;flex:none;color:var(--burgundy-600);margin-top:2px;}
.ev-datos dt,.ev-datos .k{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  display:block;margin-bottom:2px;
}
.ev-datos .v{font-weight:600;}

.ev-disciplinas{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-2) 0 0;padding:0;list-style:none;}
.ev-disciplina{
  font-size:.76rem;font-weight:600;padding:6px 13px;border-radius:var(--r-full);
  background:var(--surface-soft);color:var(--burgundy-700);border:1px solid var(--border);
}

.ev-cuenta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;color:var(--burgundy-600);
}
.ev-cuenta::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--burgundy-500);
  animation:pulse 1.6s var(--ease) infinite;
}

/* ===========================================================
   INSCRIPCIÓN
   =========================================================== */
.ev-inscripcion{margin-top:var(--space-4);}
.ev-autorrelleno{
  font-size:.84rem;color:var(--text-muted);
  background:var(--surface-alt);border-radius:var(--r-md);
  padding:10px 14px;margin-bottom:var(--space-3);
  display:flex;gap:8px;align-items:flex-start;
}
.ev-autorrelleno svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--burgundy-600);}

.ev-apuntado{
  border:1px solid var(--burgundy-600);border-radius:var(--r-lg);
  background:var(--surface-soft);padding:var(--space-3);
}
.ev-apuntado h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.ev-apuntado h3 svg{width:24px;height:24px;color:var(--burgundy-700);flex:none;}
.ev-respuestas{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:8px;}
.ev-respuestas li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;flex-wrap:wrap;}
.ev-respuestas .k{color:var(--text-muted);}
.ev-respuestas .v{font-weight:600;}

/* Lista de espera: mismo bloque, borde apagado. No es un error — la
   inscripción entró bien — así que no se pinta como tal. */
.ev-apuntado.en-espera{border-color:var(--border);background:var(--surface-alt);}
.ev-apuntado.en-espera h3 svg{color:var(--text-muted);}
/* «Darme de baja» es ahora la única acción del bloque (el botón de
   corregir se quitó: las reglas no dejan que lo haga quien se apuntó), así
   que necesita altura táctil de verdad. Mismo apaño que en .perfil-meta. */
.ev-apuntado .form-acc .link-boton{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
}
.ev-cat-elegida{
  display:inline-block;margin:0 0 8px;padding:3px 12px;border-radius:var(--r-full);
  background:var(--burgundy-700);color:var(--on-dark);
  font-size:.8rem;font-weight:700;
}

/* Plazas libres. Con una sola modalidad no hay desplegable que rellenar,
   así que el nombre y las plazas se enseñan en una línea. */
.ev-cat-unica{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 var(--space-2);
}
.ev-cat-unica > span:first-child{font-weight:700;}
.ev-plazas{
  display:inline-block;margin-top:6px;padding:2px 10px;border-radius:var(--r-full);
  background:var(--surface-alt);color:var(--text-muted);
  font-size:.78rem;font-weight:600;
}
/* 4,58:1 sobre el beige de la tarjeta: el aviso de «completo» tiene que
   leerse, y el burdeos claro no llegaba. */
.ev-plazas.llena{background:var(--burgundy-900);color:var(--on-dark);}

/* El texto va en la MISMA linea que el cuadrado (16/8/2026). Antes el
   input llevaba `margin-top:2px` y el label su interlineado normal, asi
   que la palabra quedaba montada por encima del recuadro.
   Se mantiene `flex-start` en vez de centrar: con una opcion larga que
   ocupe dos lineas, centrar dejaria el cuadrado a media altura del
   parrafo. Lo que alinea la PRIMERA linea con el cuadrado es darle al
   label el mismo alto de linea que el input (22px). */
.campo-casilla{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--space-2);}
.campo-casilla input{width:22px;height:22px;flex:none;margin-top:0;accent-color:var(--burgundy-700);}
.campo-casilla label{font-size:.92rem;font-weight:500;line-height:22px;}

/* ===========================================================
   EVENTO DESTACADO (E-Zone) — va en el inicio
   =========================================================== */
.ez-destacado{
  display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:var(--space-4);
  align-items:center;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--burgundy-800),var(--burgundy-900));
  color:var(--on-dark);padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-md);
}
.ez-destacado h2,.ez-destacado h3{color:#fff;}
.ez-destacado .lead{color:var(--on-dark-muted);}
.ez-cartel{
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
}
.ez-cartel img{width:100%;height:100%;object-fit:cover;}
.ez-cartel .brand-logo{width:56px;height:80px;color:rgba(255,255,255,.25);}
.ez-et{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:var(--r-full);
  display:inline-block;margin-bottom:var(--space-2);
}
.ez-meta{color:var(--on-dark-muted);margin:0 0 var(--space-3);}
.ez-acc{display:flex;gap:12px;flex-wrap:wrap;}
/* `.btn-fantasma` solo existe dentro de `.destacada` en styles.css; aquí
   se repite para el bloque del E-Zone en vez de tocar el sistema base. */
.ez-destacado .btn-fantasma{background:rgba(255,255,255,.14);color:#fff;border-color:transparent;}
.ez-destacado .btn-fantasma:hover{background:rgba(255,255,255,.24);}
.ez-destacado :focus-visible{outline-color:#fff;}

/* ===========================================================
   PANEL DE EVENTOS (Zona Admin)
   =========================================================== */
.ev-lista{display:grid;gap:10px;}
.ev-fila{
  display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-2);align-items:center;
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;background:var(--surface);
}
.ev-fila .mini{
  width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(140deg,var(--burgundy-700),var(--burgundy-500));
  display:grid;place-items:center;color:#fff;font-weight:700;
}
.ev-fila .mini img{width:100%;height:100%;object-fit:cover;}
.ev-fila h4{margin:0 0 2px;font-family:var(--font-ui);font-size:.98rem;font-weight:600;}
.ev-fila .meta{font-size:.8rem;color:var(--text-muted);}
.ev-fila .acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}

.ev-marcas{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.ev-marca{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid var(--border);color:var(--text-muted);
}
.ev-marca.on{background:var(--burgundy-700);color:#fff;border-color:var(--burgundy-700);}
.ev-marca.borrador{background:var(--surface-alt);}

/* ---------- constructor de formularios ---------- */
.fb-campos{display:grid;gap:10px;margin-top:var(--space-2);}
/* Burdeos, no beis (16/8/2026, a peticion del cliente). Al invertir el
   fondo hay que invertir TODO lo que escribe encima: los rotulos, el
   numero de pregunta y el texto de las casillas se quedaban en gris
   oscuro sobre vino y no se leian. Los campos de escribir siguen
   blancos, que es lo que los separa del fondo. */
.fb-campo{
  border:1px solid var(--burgundy-900);border-radius:var(--r-md);
  padding:var(--space-2);display:grid;gap:8px;
  background:linear-gradient(155deg,var(--burgundy-800),var(--burgundy-900));
  color:var(--on-dark);
}
.fb-campo-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fb-campo-cab strong{font-size:.88rem;}
.fb-orden{display:flex;gap:4px;}
.fb-orden button{
  width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:var(--r-sm);
  color:var(--burgundy-700);cursor:pointer;display:grid;place-items:center;
  transition:background var(--dur) var(--ease);
}
.fb-orden button:hover:not(:disabled){background:var(--surface-soft);}
.fb-orden button:disabled{opacity:.35;cursor:not-allowed;}
.fb-orden svg{width:15px;height:15px;}
.fb-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fb-rejilla label,.fb-campo > label{font-size:.78rem;font-weight:600;color:var(--text-muted);}
.fb-campo input[type=text],.fb-campo select,.fb-campo textarea{
  width:100%;min-height:44px;padding:0 12px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font:inherit;font-size:.92rem;background:#fff;
}
.fb-campo textarea{padding:10px 12px;min-height:70px;resize:vertical;}
.fb-vacio{
  border:1px dashed var(--border);border-radius:var(--r-md);
  padding:var(--space-3);text-align:center;color:var(--text-muted);font-size:.9rem;
}
/* La × de quitar pregunta es la única acción destructiva del bloque:
   se distingue del resto sin salirse de la paleta. */
.fb-orden button[data-quitar-campo]{
  font-size:1.2rem;line-height:1;font-weight:700;color:var(--burgundy-600);
}
.fb-orden button[data-quitar-campo]:hover{background:var(--surface-soft);}

/* `.lista-campos` vive en store.css, que la Zona Admin no carga. */
.lista-campos{display:grid;gap:6px;}
.lista-campos label{
  display:flex;align-items:center;gap:10px;padding:11px 12px;min-height:44px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:.92rem;cursor:pointer;background:var(--surface);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.lista-campos label:hover{background:var(--surface-alt);border-color:var(--burgundy-600);}
.lista-campos input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--burgundy-700);}
.lista-campos .ayuda{font-size:.8rem;}

/* ---------- inscripciones recibidas ---------- */
.ins-tabla{width:100%;border-collapse:collapse;}
.ins-tabla th,.ins-tabla td{
  text-align:left;padding:11px 10px;border-bottom:1px solid var(--border);
  font-size:.88rem;vertical-align:top;
}
.ins-tabla th{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;white-space:nowrap;
}
.ins-tabla tr:last-child td{border-bottom:0;}
.ins-privado{
  display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--burgundy-700);
  background:var(--surface-soft);border-radius:var(--r-md);padding:10px 14px;margin-bottom:var(--space-2);
}
.ins-privado svg{width:18px;height:18px;flex:none;}

/* Estados de una inscripción en la tabla del panel. La cancelada se
   apaga pero NO se esconde: al staff le sirve saber quién se dio de baja. */
.ev-marca.ins-confirmada{background:var(--burgundy-700);color:#fff;border-color:var(--burgundy-700);}
.ev-marca.ins-lista_espera{background:var(--surface-alt);color:var(--text);}
.ev-marca.ins-cancelada{background:transparent;color:var(--text-muted);}
.ins-tabla tr.ins-cancelada td{opacity:.55;}

/* Plazas ocupadas: es un dato del servidor, no un campo. Se pinta como
   número, no como input, para que no invite a corregirlo a mano. */
.cat-ocupadas{
  margin:0;padding:10px 0;font-size:1.1rem;font-weight:700;
  font-family:var(--font-num);
}
/* Aviso de que la inscripción está abierta sin modalidades: es la
   diferencia entre que la gente pueda apuntarse o no. */
.ev-autorrelleno.aviso-duro{
  background:var(--burgundy-900);color:var(--on-dark);border-radius:var(--r-md);
  padding:10px 14px;
}
.ev-autorrelleno.aviso-duro svg{color:var(--on-dark);}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:860px){
  .ev-cabecera{grid-template-columns:1fr;}
  .ev-cartel{max-width:320px;}
  .ez-destacado{grid-template-columns:1fr;}
  .ez-cartel{max-width:200px;}
  .fb-rejilla{grid-template-columns:1fr;}
  .ev-fila{grid-template-columns:48px 1fr;}
  .ev-fila .mini{width:48px;height:48px;}
  .ev-fila .acc{grid-column:2;justify-content:flex-start;}
}
@media (max-width:620px){
  /* En móvil la pista se recorre deslizando con el dedo: las flechas
     sobran y quitan sitio al contenido. */
  .roadmap-nav{display:none;}
  .rm-hito{width:min(78vw,230px);}
  /* Nada por debajo de 11px: en este proyecto ya hubo una queja por
     texto ilegible en móvil y no conviene repetirla. */
  .rm-estado{font-size:.72rem;}
  .rm-sin-patro{font-size:.75rem;}
}

@media (prefers-reduced-motion:reduce){
  .roadmap-pista{scroll-behavior:auto;}
  .ev-cuenta::before{animation:none;}
}

/* ---------------------------------------------------------
   TOUR 26 (16/8/2026)
   Las tarjetas de esta pantalla NO se pueden pulsar: se pidio que se vean
   y no se pueda entrar, y ademas ahi salen eventos sin publicar, que no
   tienen ficha publica.
   Reutilizan `.rm-hito` porque el selector es de CLASE y aplica igual a un
   <article>. Lo unico que sobra es lo que insinua que hay un clic: el
   levantamiento al pasar por encima y el cambio de borde.
   --------------------------------------------------------- */
.rm-hito.t26-hito{cursor:default;}
.rm-hito.t26-hito:hover{transform:none;box-shadow:var(--shadow);border-color:var(--border);}
.rm-hito.t26-hito.es-proximo:hover{border-color:var(--burgundy-700);}

/* ---------- roadmap: lo que cambio el 16/8/2026 ---------- */
/* Proximo = esta en el calendario pero aun no se abre. Se ve entero, en
   claro, y NO se puede pulsar: no hay ficha detras hasta que se abra. */
.rm-hito.rm-cerrado{cursor:default;}
.rm-hito.rm-cerrado:hover{transform:none;box-shadow:var(--shadow);border-color:var(--border);}
.rm-hito.es-proximo .rm-estado{background:transparent;color:var(--text-muted);}

/* El pie ya no es el patrocinador, es el E-Market. Solo se pinta cuando
   ese evento lo trae, asi que aqui no hay estado vacio que vestir. */
.rm-emarket{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--burgundy-700);font-weight:700;}
.rm-hito.es-abierto .rm-emarket{color:#fff;}

/* ---------- la caja de cada pregunta, en burdeos (16/8/2026) ----------
   VAN AL FINAL A PROPOSITO. Puestas junto a `.fb-campo` no ganaban: la
   regla `.fb-rejilla label,.fb-campo > label{...color:var(--text-muted)}`
   aparece despues en este archivo y, a igualdad de especificidad, manda la
   ultima. Medido: el rotulo quedaba en 2.11 de contraste sobre el vino,
   menos de la mitad del minimo de 4.5. */
.fb-campo > label,
.fb-campo .ayuda{color:var(--on-dark-muted);}
.fb-campo-cab strong{color:var(--on-dark);}
.fb-campo label{color:var(--on-dark);}
/* Los botones de subir/bajar/quitar, sobre vino. */
.fb-campo .fb-orden .btn-icon,
.fb-campo .fb-campo-cab .btn-icon{
  color:var(--on-dark);border-color:rgba(255,255,255,.35);background:transparent;}
.fb-campo .fb-orden .btn-icon:hover,
.fb-campo .fb-campo-cab .btn-icon:hover{background:rgba(255,255,255,.14);}

/* ---------- participantes: barra y orden de salida (16/8/2026) ---------- */
.ins-barra{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:var(--space-2);margin-bottom:var(--space-2);
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-alt);
}
.ins-barra-acc{display:flex;gap:8px;flex-wrap:wrap;}
.ins-barra .ayuda{margin-left:auto;}

/* La lista de salida se lee EN DIRECTO, entre bambalinas y con prisa: por
   eso el numero va grande y en la sans, no en la serif de los titulos. */
.ins-orden{margin:12px 0 0;padding-left:0;list-style:none;counter-reset:salida;display:grid;gap:8px;}
.ins-orden li{
  counter-increment:salida;position:relative;padding:10px 12px 10px 52px;
  border:1px solid var(--border);border-radius:var(--r-md);background:#fff;
}
.ins-orden li::before{
  content:counter(salida);position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--burgundy-700);color:#fff;
  font-family:var(--font-num);font-size:.9rem;font-weight:700;
}
.ins-orden .ayuda{display:inline;}