/* El mercado de pases: las ofertas en filas comparables, "Vos en el mercado" en dos líneas, el mundo, el representante. Dueño: V3c
   (PLAN.md §V.7). Salió de componentes.css / pantallas.css en V2-A; V3c (FASE V) lo rehace con la gramática de una parada
   (§V.4): lo primero que se ve es lo que se decide. */

/* ==========================================================================
   3. EL MERCADO (fase 9c; V3c)
   ========================================================================== */

/* El panel es una columna que se envuelve: título, qué está en juego, tu valor, las ofertas, y DESPUÉS lo secundario (llamar al
   representante, esperar, el mundo). `order` pone lo secundario detrás de las ofertas sin tocar el HTML. */
.mercado {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-4);
  padding-left: calc(var(--s-4) - 3px);
  background-color: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat-mercado);
  animation: entrar-decision var(--dur-slow) var(--ease) both;
}
.mercado > * {
  flex: 1 0 100%;
  min-width: 0;
  margin: 0;
}
.mercado > .decision-title { font-size: var(--fs-5); line-height: var(--lh-tight); }
.mercado > .decision-desc { font-size: var(--fs-2); line-height: var(--lh-snug); }
.mercado > .decision-title + .decision-desc { margin-top: calc(var(--s-1) * -1); }
.mercado > .mercado-representante-btn { order: 1; }
.mercado > .mercado-mundo { order: 2; }

.mercado-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* --- La oferta: una fila. Los mismos campos, en el mismo orden, en todas: organización y tipo · sueldo · liga y años ·
   plantel · jerarquía; "Firmar" aparte, primario; lo demás, en el "más". ------------------------------------------------- */
.mercado-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head salario"
    "datos datos"
    "acciones acciones"
    "mas mas";
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 0;
  clip-path: var(--clip-corte);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--dur-fast) var(--ease);
}
.mercado-card:hover {
  border-color: var(--cat-mercado);
  background: var(--bg-raised);
  box-shadow: none;
}
.mercado-card--bombazo { border-color: var(--gold-deep); }

.mercado-card-header {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  row-gap: 0;
  min-width: 0;
}
.mercado-card-org {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.mercado-card-tag {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--cat-mercado);
}

.mercado-card-salario {
  grid-area: salario;
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Lo que se compara: liga y años, plantel, jerarquía (y lo que falta para el hito, en una renovación). */
.mercado-card-datos {
  grid-area: datos;
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--ink-dim);
}
.mercado-card-linea {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-3);
}
.mercado-card-liga { color: var(--ink); }
.mercado-card-jerarquia { min-width: 0; }
.mercado-card-hito { color: var(--cat-mercado); }

.mercado-card-neg {
  font-size: var(--fs-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--cat-mercado);
}

.mercado-card-acciones {
  grid-area: acciones;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

/* "Firmar" (y "Elegir" en un traspaso): el primario. */
.mercado-card-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  clip-path: var(--clip-corte-sm);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.mercado-card-btn:hover {
  border-color: var(--cat-mercado);
  color: var(--ink);
}
.mercado-card-btn--firmar {
  border-color: var(--cat-mercado);
  background: var(--cat-mercado);
  color: var(--bg-void);
  font-weight: 700;
}
.mercado-card-btn--firmar:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-void);
}
/* Negociar (pedir más, pedir cláusula): secundario, dentro del "más". */
.mercado-card-btn--sec {
  flex: 0 1 auto;
  min-height: 36px;
  font-size: var(--fs-1);
}

/* El "más" de una oferta: lo que no sirve para elegir de un vistazo y la negociación. */
.mercado-card-mas {
  grid-area: mas;
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--ink-dim);
}
.mercado-card-mas > summary {
  width: fit-content;
  padding: 2px 0;
  cursor: pointer;
  font-size: var(--fs-1);
  color: var(--ink-mute);
}
.mercado-card-mas > summary:hover { color: var(--ink); }
.mercado-card-mas[open] > summary { margin-bottom: var(--s-1); }
.mercado-card-mas > div + div { margin-top: var(--s-1); }
.mercado-card-picks,
.mercado-card-arraigo,
.mercado-card-motivo {
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--ink-dim);
}
.mercado-card-riesgo {
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  color: var(--warn);
}
.mercado-card-negociar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.mercado-card-riesgo-neg {
  flex: 1 0 100%;
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  color: var(--ink-mute);
}

/* Desde 640 px la fila se acomoda a lo ancho: el sueldo arriba a la derecha y "Firmar" debajo, a la derecha; los datos y el "más"
   a la izquierda. (Debajo, todo apilado: el celular lee de arriba para abajo.) */
@media (min-width: 640px) {
  .mercado-card {
    grid-template-areas:
      "head salario"
      "datos acciones"
      "mas acciones";
    align-items: start;
  }
  .mercado-card-acciones { margin-top: 0; align-self: end; }
  .mercado-card-btn--firmar { min-width: 112px; }
}

/* --- Vos en el mercado (fase 9Mg, bloque 1): dos líneas ---------------------------------------------------------------- */
.mercado-vos {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--cat-mercado);
  background: var(--bg-sunken);
  border-radius: 0;
}
.mercado-vos-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--s-2);
}
.mercado-vos-titulo {
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-mute);
}
.mercado-vos-cifra {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mercado-vos-ref {
  font-size: var(--fs-1);
  color: var(--ink-mute);
}
.mercado-vos-contrato {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  color: var(--ink-dim);
}
.mercado-vos-miran {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  color: var(--ink-mute);
}
.mercado-chip-org {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--ink-dim);
}

/* --- El mercado del mundo (fase 9Mc/9Mg, bloque 3) ---------------------------------------------------------------------
   A ≥ 1180 px vive en el acompañante y NO se repite en el escenario (el `<aside>` está fuera de `.mercado`); debajo va detrás
   de un desplegable. */
.mercado-mundo {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-sunken);
  border-radius: 0;
}
@media (min-width: 1180px) {
  .mercado > .mercado-mundo { display: none; }
}
.mercado-mundo-titulo {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-mute);
}
.mercado-mundo-det > summary { cursor: pointer; }
.mercado-mundo-det > summary:hover { color: var(--ink); }
.mercado-mundo-det[open] > summary { margin-bottom: var(--s-2); }
div.mercado-mundo-titulo { margin-bottom: var(--s-2); }
.mercado-mundo-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--ink-dim);
}
/* Sub-encabezados dentro de "El mercado del mundo" (traspasos cerrados / asientos abiertos). */
.mercado-mundo-sub {
  margin-top: var(--s-3);
  margin-bottom: var(--s-1);
  font-size: var(--fs-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-mute);
}
.mercado-mundo-sub:first-of-type { margin-top: 0; }

/* --- Llamar al representante y esperar: secundarios, después de las ofertas --------------------------------------------- */
.mercado-representante-btn {
  flex: 1 1 14rem;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  clip-path: var(--clip-corte);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  text-transform: none;
  letter-spacing: normal;
}
.mercado-representante-btn:hover:not(:disabled) {
  border-color: var(--live);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

/* --- El número del atajo (V2-B): 1-4 llevan el foco al "Firmar" de la oferta n y Enter firma. El número se ve, a la izquierda
   del botón; misma caja que `.option-atajo` de las decisiones, pero en la fila (no absoluta). -------------------------------- */
.mercado-atajo {
  flex: none;
  align-self: center;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sharp);
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 700;
  color: var(--ink-mute);
}
.mercado-atajo:has(+ .mercado-card-btn:focus-visible) { border-color: var(--live); color: var(--live); }
/* El corte de esquina (`clip-path`) se come el anillo de foco (`outline`, base.css): con el foco puesto por el atajo, el botón
   pierde el corte y el anillo se ve. */
.mercado-card-btn:focus-visible { clip-path: none; }