/* ==========================================================================
   billeteras.io — páginas
   Maquetación específica de portada, directorio, ficha de billetera y etiqueta.
   ========================================================================== */

/* --- Portada: cabecera principal --------------------------------------- */

.portada { border-bottom: var(--borde) solid var(--linea-fuerte); }

.portada__grid {
  display: grid;
  gap: var(--e6);
  padding-block: var(--e6) var(--e7);
}

.portada__texto { display: grid; gap: var(--e4); align-content: start; }

.portada__titular {
  font-family: var(--f-display);
  font-size: var(--d1);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  max-width: 15ch;
}
.portada__titular em { font-style: italic; color: var(--acento); }

.portada__entradilla { max-width: 46ch; }

.portada__buscador { margin-top: var(--e2); max-width: 34rem; }

.portada__atajos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  list-style: none;
  padding: 0;
}
.portada__atajos .rotulo { margin-right: var(--e1); }

/* Tarjeta "estado del índice": ficha de archivo con datos vivos. */
.tarjeta-indice {
  border: var(--borde) solid var(--linea-fuerte);
  background: var(--papel);
  padding: var(--e4);
  display: grid;
  gap: var(--e4);
  align-content: start;
}
.tarjeta-indice__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: var(--borde) solid var(--linea);
}
.tarjeta-indice__cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e3); }
.cifra { display: grid; gap: 0.25rem; }
.cifra__n { font-family: var(--f-display); font-weight: var(--peso-display); font-size: clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem); line-height: 0.92; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cifra__t { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.tarjeta-indice__pie {
  padding-top: var(--e3);
  border-top: var(--borde) solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
}

.portada__banda { background: var(--noche); color: var(--sobre-noche); }
.portada__banda .cinta { border-top: 0; }

@media (min-width: 62em) {
  .portada__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
    gap: var(--e7);
    align-items: start;
    padding-block: var(--e8) var(--e8);
  }
  .portada__texto { gap: var(--e5); }
  .tarjeta-indice { position: sticky; top: calc(var(--alto-cabecera) + var(--e4)); }
}

/* --- Bloque de métodos de depósito -------------------------------------- */

.metodos {
  display: grid;
  gap: 0;
  border-top: var(--borde) solid var(--linea);
}
.metodo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e4);
  border-bottom: var(--borde) solid var(--linea);
  transition: padding-inline var(--t-media), background var(--t-rapida);
}
.metodo:hover { background: var(--papel-2); padding-inline: var(--e3); }
.metodo__nombre { font-size: var(--fs-lg); font-weight: var(--peso-medio); letter-spacing: -0.018em; }
.metodo__n { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-rotulo); color: var(--tinta-3); text-transform: uppercase; }
.metodo__desc {
  display: block;
  margin-top: 0.4rem;
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--tinta-2);
}
.metodo__cuenta { flex: none; padding-top: 0.35rem; }

@media (min-width: 48em) {
  .metodos { grid-template-columns: repeat(2, 1fr); column-gap: var(--e7); }
}

/* --- Bloque de método / metodología ------------------------------------- */

.criterios { display: grid; gap: var(--e5); counter-reset: paso; }
.criterio {
  display: grid;
  gap: var(--e2);
  padding-top: var(--e4);
  border-top: var(--borde) solid var(--linea);
}
.criterio__n { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-rotulo); color: var(--acento); }
.criterio__t { font-family: var(--f-display); font-size: var(--fs-xl); letter-spacing: -0.025em; }
.criterio p { color: var(--tinta-2); font-size: var(--fs-sm); }

@media (min-width: 48em) {
  .criterios { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
}

/* --- Directorio: barra de filtros --------------------------------------- */

.filtros { display: grid; gap: var(--e4); padding-block: var(--e5); }
.filtros__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.filtros__grupo { display: grid; gap: var(--e2); }

.selector {
  appearance: none;
  padding: 0.6875rem 2rem 0.6875rem 0.75rem;
  border: var(--borde) solid var(--linea-fuerte);
  background: var(--papel)
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 1rem) 55% / 5px 5px no-repeat;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.selector:hover { border-color: var(--tinta); }

.resultado-cuenta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}

@media (min-width: 56em) {
  .filtros__buscador { flex: 1 1 22rem; }
}

/* --- Ficha de billetera: encabezado ------------------------------------- */

.encabezado-ficha {
  border-top: var(--borde) solid var(--linea);
  border-bottom: var(--borde) solid var(--linea-fuerte);
  padding-block: var(--e5) var(--e6);
}
.encabezado-ficha__grid { display: grid; gap: var(--e5); }
.encabezado-ficha__marca { display: flex; align-items: center; gap: var(--e4); }
.encabezado-ficha__nombre { font-family: var(--f-display); font-size: var(--d2); line-height: 0.98; letter-spacing: -0.035em; }
.encabezado-ficha__meta { display: grid; gap: var(--e2); margin-top: var(--e2); }
.encabezado-ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.encabezado-ficha__acciones .btn { flex: 1 1 12rem; }

@media (min-width: 56em) {
  .encabezado-ficha__grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); align-items: end; }
  /* Botones apilados y del mismo ancho en la columna derecha. En columna, el
     flex-basis marcaría la altura: por eso vuelve a auto. */
  .encabezado-ficha__acciones { flex-direction: column; align-items: stretch; }
  .encabezado-ficha__acciones .btn { flex: 0 0 auto; }
}

/* --- Ficha de billetera: cuerpo ----------------------------------------- */

.detalle { display: grid; gap: var(--e6); padding-block: var(--e6) var(--e8); }
.detalle__bloque { display: grid; gap: var(--e4); }
.detalle__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}
.detalle__principal { display: grid; gap: var(--e7); align-content: start; }
.detalle__rail { display: grid; gap: var(--e5); align-content: start; }

@media (min-width: 62em) {
  .detalle { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: var(--e8); }
  .detalle__rail { position: sticky; top: calc(var(--alto-cabecera) + var(--e5)); }
}

.balance { display: grid; gap: var(--e5); }
.balance__col { display: grid; gap: var(--e3); align-content: start; }
.balance__lista { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.balance__lista li { display: flex; gap: var(--e3); font-size: var(--fs-sm); color: var(--tinta-2); }
.balance__lista li::before {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  flex: none;
  width: 1ch;
}
.balance__col--pros li::before { content: "+"; color: var(--si); }
.balance__col--contras li::before { content: "−"; color: var(--no); }

@media (min-width: 40em) {
  .balance { grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e6); }
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 0.6875rem 0; border-bottom: var(--borde) solid var(--linea); vertical-align: top; }
.tabla th {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom-color: var(--linea-fuerte);
}
.tabla td { font-size: var(--fs-sm); color: var(--tinta-2); }
.tabla td:first-child { color: var(--tinta); }
.tabla td:last-child, .tabla th:last-child { text-align: right; font-family: var(--f-mono); }

.pasos { list-style: none; padding: 0; display: grid; gap: var(--e3); counter-reset: paso; }
.pasos li {
  display: flex;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: var(--borde) solid var(--linea);
  font-size: var(--fs-sm);
  color: var(--tinta-2);
  counter-increment: paso;
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  color: var(--acento);
  flex: none;
  padding-top: 0.2rem;
}

/* --- Encabezado de etiqueta --------------------------------------------- */

.encabezado-tag {
  border-top: var(--borde) solid var(--linea);
  border-bottom: var(--borde) solid var(--linea-fuerte);
  padding-block: var(--e6) var(--e6);
}
.encabezado-tag__grid { display: grid; gap: var(--e4); }
.encabezado-tag__titulo { font-family: var(--f-display); font-size: var(--d2); line-height: 0.98; letter-spacing: -0.035em; }
.encabezado-tag__desc { color: var(--tinta-2); max-width: 52ch; }

@media (min-width: 56em) {
  .encabezado-tag__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e6); }
}

/* --- Nube de etiquetas --------------------------------------------------- */

.nube { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; }
.nube .chip { padding: 0.5rem 0.75rem; }