/* ==========================================================================
   billeteras.io — componentes
   Piezas reutilizables: cabecera, botones, etiquetas, buscador, fichas,
   filas de índice, tablas de propiedades, avisos y pie.
   ========================================================================== */

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}

/* Una sola navegación: en teléfono baja a una segunda fila deslizable,
   en escritorio se acomoda dentro de la misma barra. */
.cabecera__int {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--e4);
}
.cabecera__int > .marca,
.cabecera__int > .cabecera__acciones { min-height: var(--alto-cabecera); }
.cabecera__int > .marca { grid-column: 1; grid-row: 1; display: flex; }
.cabecera__int > .cabecera__acciones { grid-column: 2; grid-row: 1; }
.cabecera__int > .nav { grid-column: 1 / -1; grid-row: 2; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--f-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.marca__punto {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--acento);
  flex: none;
}
.marca__io { color: var(--tinta-3); }
.marca:hover .marca__punto { background: var(--tinta); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); }

.icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  height: 2.25rem;
  padding-inline: 0.625rem;
  background: transparent;
  border: var(--borde) solid var(--linea);
  color: var(--tinta-2);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.icono-btn:hover { border-color: var(--tinta); color: var(--tinta); }

/* Navegación: en teléfono es una tira que se desliza; en escritorio se
   integra en la barra. Sin menú hamburguesa. */
.nav {
  display: flex;
  gap: 0;
  border-top: var(--borde) solid var(--linea);
  margin-inline: calc(var(--canal) * -1);
  padding-inline: var(--canal);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__enlace {
  position: relative;
  flex: none;
  padding: 0.75rem 0;
  margin-right: var(--e5);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
  transition: color var(--t-rapida);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-media);
}
.nav__enlace:hover { color: var(--tinta); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="page"] { color: var(--tinta); }

@media (min-width: 60em) {
  .cabecera__int { grid-template-columns: auto 1fr auto; }
  .cabecera__int > .nav { grid-column: 2; grid-row: 1; align-self: center; }
  .cabecera__int > .cabecera__acciones { grid-column: 3; grid-row: 1; }
  .nav {
    border-top: 0;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    margin-left: var(--e7);
  }
  .nav__enlace { padding: 0; margin-right: var(--e5); }
  .nav__enlace::after { bottom: -0.4rem; }
}

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.8125rem 1.125rem;
  border: var(--borde) solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--t-rapida), box-shadow var(--t-rapida),
              background var(--t-rapida), color var(--t-rapida);
}
/* El realce es un sello desplazado, no una sombra difusa. */
.btn:hover {
  transform: translate(calc(var(--desplazo) * -1), calc(var(--desplazo) * -1));
  box-shadow: var(--desplazo) var(--desplazo) 0 var(--acento);
}
.btn:active { transform: translate(0, 0); box-shadow: none; }

.btn--fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}
.btn--fantasma:hover { border-color: var(--tinta); box-shadow: var(--desplazo) var(--desplazo) 0 var(--tinta); }

.btn--acento { background: var(--acento); border-color: var(--acento); color: #FFF; }
.btn--acento:hover { box-shadow: var(--desplazo) var(--desplazo) 0 var(--tinta); }

.btn--bloque { width: 100%; }
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Enlace con flecha, para "ver todo" */
.enlace-lateral {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: var(--borde) solid var(--linea-fuerte);
  padding-bottom: 0.35rem;
  transition: color var(--t-rapida), border-color var(--t-rapida);
}
.enlace-lateral:hover { color: var(--acento); border-color: var(--acento); }
.enlace-lateral span { transition: transform var(--t-media); }
.enlace-lateral:hover span { transform: translateX(3px); }

/* --- Etiquetas ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.3125rem 0.5rem;
  border: var(--borde) solid var(--linea);
  background: transparent;   /* los chips también existen como <button> */
  color: var(--tinta-2);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--t-rapida), color var(--t-rapida), background var(--t-rapida);
}
button.chip { cursor: pointer; }
a.chip:hover, button.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip--activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip--activo:hover { background: var(--acento); border-color: var(--acento); color: #FFF; }
.chip__n { color: var(--tinta-3); font-size: 0.625rem; }
.chip--activo .chip__n { color: color-mix(in srgb, var(--papel) 70%, transparent); }

/* --- Buscador ----------------------------------------------------------- */

.buscador {
  display: flex;
  align-items: stretch;
  border: var(--borde) solid var(--tinta);
  background: var(--papel);
  transition: box-shadow var(--t-rapida), border-color var(--t-rapida);
}
.buscador:focus-within {
  border-color: var(--acento);
  box-shadow: var(--desplazo) var(--desplazo) 0 var(--acento);
}
.buscador__signo {
  display: flex;
  align-items: center;
  padding-inline: 0.875rem 0.25rem;
  color: var(--acento);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  user-select: none;
}
.buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9375rem 0.5rem;
  border: 0;
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
}
.buscador__campo::placeholder { color: var(--tinta-3); }
.buscador__campo:focus { outline: none; }

.buscador__limpiar {
  flex: none;
  padding-inline: 0.875rem;
  border: 0;
  border-left: var(--borde) solid var(--linea);
  background: transparent;
  color: var(--tinta-3);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  cursor: pointer;
}
.buscador__limpiar:hover { color: var(--acento); }

/* --- Marca de producto (logo cuadrado) ---------------------------------- */

.logo {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--borde) solid var(--linea);
  background: var(--papel-2);
  object-fit: cover;
}
.logo--sm { width: 2.25rem; height: 2.25rem; }
.logo--lg { width: 4rem; height: 4rem; }

/* --- Ficha destacada ---------------------------------------------------- */

.destacadas {
  display: grid;
  gap: 0;
  border-top: var(--borde) solid var(--linea);
}

/* Columna flexible para que el pie de cada ficha quede alineado con el de
   las vecinas aunque el resumen o las etiquetas ocupen distinto alto. */
.ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding-block: var(--e5);
  border-bottom: var(--borde) solid var(--linea);
}
.ficha .props { margin-top: auto; }

.ficha__cab { display: flex; align-items: flex-start; gap: var(--e3); }
.ficha__idx {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  color: var(--acento);
  padding-top: 0.4rem;
  min-width: 2.25rem;
}
.ficha__nombre {
  font-family: var(--f-display);
  font-size: var(--d3);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.ficha__nombre a { transition: color var(--t-rapida); }
.ficha__nombre a:hover { color: var(--acento); }
.ficha__tipo { display: block; margin-top: 0.35rem; }
.ficha__resumen { color: var(--tinta-2); font-size: var(--fs-sm); }
.ficha__pie { display: flex; flex-wrap: wrap; gap: var(--e2); padding-top: var(--e2); }
.ficha__pie .btn { flex: 1 1 auto; }

@media (min-width: 48em) {
  .destacadas {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: var(--borde) solid var(--linea);
  }
  .ficha {
    padding: var(--e5) var(--e5) var(--e5) 0;
    border-bottom: 0;
    border-left: var(--borde) solid var(--linea);
    padding-left: var(--e5);
  }
  .ficha:first-child { border-left: 0; padding-left: 0; }
}

/* --- Fila de índice ----------------------------------------------------- */

.indice { border-top: var(--borde) solid var(--linea); }

.fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo nombre flecha"
    "logo meta   flecha";
  column-gap: var(--e3);
  row-gap: 0.35rem;
  align-items: center;
  padding-block: var(--e4);
  border-bottom: var(--borde) solid var(--linea);
  transition: background var(--t-rapida), padding-inline var(--t-media);
}
.fila:hover {
  background: var(--papel-2);
  padding-inline: var(--e3);
}
.fila__logo   { grid-area: logo; }
.fila__nombre { grid-area: nombre; display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.fila__titulo { font-size: var(--fs-lg); font-weight: var(--peso-medio); letter-spacing: -0.022em; }
.fila__meta   { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 var(--e3); color: var(--tinta-3); }
.fila__flecha {
  grid-area: flecha;
  font-family: var(--f-mono);
  color: var(--tinta-3);
  transition: transform var(--t-media), color var(--t-rapida);
}
.fila:hover .fila__flecha { transform: translateX(4px); color: var(--acento); }
.fila__dato { display: inline-flex; align-items: center; gap: 0.4ch; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; }
.fila__chips { display: none; }

@media (min-width: 56em) {
  .fila {
    grid-template-columns: 2.5rem minmax(11rem, 1.1fr) minmax(0, 1.4fr) minmax(9rem, auto) 1.5rem;
    grid-template-areas: "logo nombre chips meta flecha";
    column-gap: var(--e5);
    align-items: center;
  }
  .fila__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: var(--e1); overflow: hidden; max-height: 1.75rem; }
  .fila__meta { justify-content: flex-end; gap: var(--e4); }
  .fila__flecha { text-align: right; }
}

/* --- Marcador de valor (sí / no / parcial) ------------------------------ */

.valor {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
}
.valor::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: currentColor;
}
.valor--positivo { color: var(--si); }
.valor--negativo { color: var(--no); }
.valor--medio    { color: var(--medio); }
.valor--neutro   { color: var(--tinta-3); }
.valor--texto { color: var(--tinta); }
.valor--texto::before { display: none; }

/* --- Tabla de propiedades ---------------------------------------------- */

.props { display: grid; }
.props__par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e4);
  padding-block: 0.6875rem;
  border-bottom: var(--borde) solid var(--linea);
}
/* La etiqueta no baja de ~8rem: así los valores largos parten en dos líneas
   en vez de estrangular el nombre de la propiedad. */
.props__par dt { flex: 1 1 8rem; color: var(--tinta-2); font-size: var(--fs-sm); }
.props__par dd {
  text-align: right;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
}
.props__grupo + .props__grupo { margin-top: var(--e6); }
.props__titulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}

.lista-en-linea { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) 0.4em; justify-content: flex-end; }
/* El espacio duro pega el punto a la última palabra: si no, cuando un elemento
   parte en dos líneas el separador se queda solo al principio de la siguiente. */
.lista-en-linea li:not(:last-child)::after { content: "\00a0·"; color: var(--tinta-3); }

/* Detalle de un valor de vocabulario: qué banco, qué país, qué red. Precisa el
   método, no lo clasifica, así que va apagado y entre paréntesis. */
.matiz { color: var(--tinta-3); }
.matiz::before { content: "("; }
.matiz::after { content: ")"; }

/* --- Avisos ------------------------------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: var(--borde) solid var(--linea);
  border-left: 3px solid var(--acento);
  background: var(--papel-2);
  color: var(--tinta-2);
  font-size: var(--fs-sm);
}
.aviso__marca { color: var(--acento); }

/* --- Fuentes de una ficha ----------------------------------------------- */

.fuentes__lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  margin-top: var(--e3);
  border-top: var(--borde) solid var(--linea);
}
.fuentes__lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-block: 0.625rem;
  border-bottom: var(--borde) solid var(--linea);
  font-size: var(--fs-sm);
  transition: color var(--t-rapida);
}
.fuentes__lista a:hover { color: var(--acento); }
.fuentes__fecha {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--tinta-3);
  white-space: nowrap;
}
.fuentes__nota {
  margin-top: var(--e3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--tinta-3);
}

/* --- Estado vacío / carga ---------------------------------------------- */

.estado {
  padding-block: var(--e7);
  text-align: center;
  color: var(--tinta-3);
}
.estado__titulo { font-family: var(--f-display); font-weight: var(--peso-display); font-size: var(--d3); letter-spacing: -0.025em; color: var(--tinta); margin-bottom: var(--e2); }

.esqueleto {
  height: 4.5rem;
  border-bottom: var(--borde) solid var(--linea);
  background: linear-gradient(90deg, transparent, var(--papel-2), transparent);
  background-size: 200% 100%;
  animation: barrido 1.4s linear infinite;
}
@keyframes barrido { to { background-position: -200% 0; } }

/* --- Cinta de datos ----------------------------------------------------- */

.cinta {
  overflow: hidden;
  border-top: var(--borde) solid var(--linea-noche);
  padding-block: 0.6875rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cinta__pista {
  display: flex;
  width: max-content;
  gap: var(--e6);
  animation: correr 38s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__dato {
  display: inline-flex;
  align-items: center;
  gap: 0.75ch;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sobre-noche) 70%, transparent);
  white-space: nowrap;
}
.cinta__dato b { color: var(--sobre-noche); font-weight: 500; }
.cinta__dato::before { content: ""; width: 4px; height: 4px; background: var(--acento); flex: none; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* --- Migas -------------------------------------------------------------- */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5ch;
  padding-block: var(--e4);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.migas a:hover { color: var(--acento); }
.migas__sep { color: var(--linea-fuerte); }

/* --- Pie ---------------------------------------------------------------- */

.pie {
  background: var(--noche);
  color: var(--sobre-noche);
  padding-block: var(--e7) var(--e5);
}
.pie__grid { display: grid; gap: var(--e6); }
.pie__lema { font-family: var(--f-display); font-weight: var(--peso-display); font-size: var(--d3); letter-spacing: -0.028em; max-width: 18ch; }
.pie__col { display: grid; gap: var(--e3); align-content: start; }
.pie__lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pie__lista a {
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--sobre-noche) 74%, transparent);
  transition: color var(--t-rapida);
}
.pie__lista a:hover { color: var(--acento); }
.pie__legal {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: var(--borde) solid var(--linea-noche);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
  color: color-mix(in srgb, var(--sobre-noche) 55%, transparent);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}
.pie .rotulo { color: color-mix(in srgb, var(--sobre-noche) 55%, transparent); }

@media (min-width: 48em) {
  .pie__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e5); }
}