/* ==========================================================================
   Ajustes (handoff «Ajustes», 2026-09-29)

   Mismas tarjetas que la ficha del cliente (.cd-card, .cd-titulo, .cd-btn de
   13-cliente.css); acá va lo propio de cada sección, colgado de
   #vista-ajustes o de clases `aj-`.
   ========================================================================== */
#vista-ajustes { gap: 20px; }
.aj-subtitulo { font-size: 13px; color: var(--marca-texto-2); }
.aj-card { scroll-margin-top: 80px; }
.aj-card .cd-card-titulos span { max-width: 760px; text-wrap: pretty; }

/* El título de familia de Efectivizar comparte la clase de abajo. */
.catalogo-familia-titulo {
  margin: 0 0 var(--size-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Índice -------------------------------------------------------------- */
.aj-indice {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
  background: #fff;
}
.aj-indice a {
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--marca-texto-fuerte);
  font-size: 13px;
  white-space: nowrap;
}
.aj-indice a:hover { background: var(--marca-fondo); color: var(--marca-negro); text-decoration: none; }

/* --- Campos -------------------------------------------------------------- */
.aj-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--marca-texto-2);
}
/* La caja con el «S/» o el «%» pegado: el borde es de la caja, no del input. */
.aj-entrada {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fff;
  color: var(--marca-texto-3);
  font-size: 13px;
}
.aj-entrada:focus-within { border-color: var(--marca-negro); }
#vista-ajustes .aj-entrada input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--marca-negro);
  font-family: var(--font-mono);
  font-size: 14px;
}
#vista-ajustes .aj-campo > input,
#vista-ajustes .aj-campo > select {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
}
#vista-ajustes .aj-campo > input:focus,
#vista-ajustes .aj-campo > select:focus { border-color: var(--marca-negro); box-shadow: none; }

/* --- Mi comisión --------------------------------------------------------- */
.aj-familias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  padding: 20px 22px;
}
.aj-bloque {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
}
.aj-bloque-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.aj-bloque-cabeza strong { font-size: 13.5px; font-weight: 600; }
.aj-bloque-cabeza span { font-size: 11.5px; color: var(--marca-texto-2); }
.aj-campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aj-campo-solo { max-width: 140px; }
.aj-regla { margin: 0; font-size: 12px; color: var(--marca-texto-2); }

.aj-prueba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 22px 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--marca-negro);
  color: #fff;
}
.aj-prueba-rotulo {
  color: var(--marca-oro);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.aj-prueba-monto {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--marca-texto-fuerte);
  border-radius: 8px;
  background: #1e1e1e;
  color: var(--marca-texto-3);
  font-size: 13px;
}
.aj-prueba-monto:focus-within { border-color: var(--marca-oro); }
#vista-ajustes .aj-prueba-monto input {
  width: 90px;
  min-height: 0;
  margin: 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
}
.aj-prueba-resultados { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #bdbdbd; }
.aj-prueba-resultados strong { color: #e7c874; font-family: var(--font-mono); font-weight: 600; }
.aj-guardar {
  margin-left: auto;
  min-height: 0;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--marca-rojo);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.aj-guardar:hover,
.aj-guardar:active { border: none; background: #a80d26; color: #fff; }

/* --- Clientes con otra comisión ------------------------------------------ */
.aj-etiquetas { display: flex; flex-direction: column; gap: 20px; padding: 8px 22px 20px; }
.grupo-etiquetas { display: flex; flex-direction: column; gap: 8px; }
.aj-grupo-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
}
.aj-grupo-cabeza .grupo-titulo { font-size: 13.5px; }
.aj-grupo-cabeza span { font-size: 12px; color: var(--marca-texto-2); }
.aj-grupo-caja { border: 1px solid var(--marca-borde); border-radius: 10px; overflow: hidden; }
.aj-grupo-caja table { width: 100%; border-collapse: collapse; }
.aj-grupo-caja td,
.aj-grupo-caja th { padding: 9px 12px; border-bottom: 1px solid var(--marca-linea); }
.aj-grupo-caja tr:last-child > * { border-bottom: none; }
.aj-grupo-caja table:has(+ form) tr:last-child > * { border-bottom: 1px solid var(--marca-linea); }
/* El nombre se come el ancho que sobra; familia y porcentaje, lo justo. */
.aj-grupo-caja th { width: 100%; max-width: 0; text-align: left; font-weight: 500; }
.aj-grupo-caja td { white-space: nowrap; }
.aj-grupo-caja th::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #bdbdbd;
  vertical-align: middle;
}
.grupo-etiquetas[data-familia='principal'] th::before { background: var(--marca-negro); }
.grupo-etiquetas[data-familia='departamental'] th::before { background: var(--marca-rojo); }
#vista-ajustes .etiqueta-nombre-campo {
  width: calc(100% - 16px);
  font-size: 13px;
  text-overflow: ellipsis;
}
#vista-ajustes .aj-grupo-caja select {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  background-color: #fff;
  color: var(--marca-texto-fuerte);
  font-size: 12.5px;
}
.aj-grupo-caja td:last-child > * { vertical-align: middle; }
.aj-pct {
  display: inline-flex;
  align-items: center;
  width: 74px;
  padding: 0 8px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  background: #fff;
  color: var(--marca-texto-3);
  font-size: 12px;
}
.aj-pct:focus-within { border-color: var(--marca-negro); }
.aj-pct:has(input:disabled) { background: #fafafa; }
#vista-ajustes .aj-pct input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 3px 7px 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--marca-negro);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}
.aj-quitar {
  width: 30px;
  height: 30px;
  min-height: 0;
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--marca-texto-3);
  font-size: 16px;
}
.aj-quitar:hover,
.aj-quitar:focus-visible { border: none; background: #fcebee; color: var(--marca-rojo); }
.aj-grupo-vacio { margin: 0; padding: 10px 12px; font-size: 12.5px; color: var(--marca-texto-3); }
.alta-etiqueta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fafafa;
}
#vista-ajustes .alta-etiqueta > input {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed #c9c9c9;
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
}
#vista-ajustes .alta-etiqueta > input:focus { border: 1px solid var(--marca-negro); box-shadow: none; }
.alta-etiqueta button {
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid var(--marca-negro);
  border-radius: 7px;
  background: #fff;
  color: var(--marca-negro);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.alta-etiqueta button:hover,
.alta-etiqueta button:active { border-color: var(--marca-negro); background: var(--marca-negro); color: #fff; }

/* --- Lo que me cobra cada cuenta ----------------------------------------- */
/* En el teléfono la tabla se desliza dentro de su caja: son seis columnas que
   se comparan hacia abajo, y partirlas deshace la comparación. */
.aj-costos-envoltura { overflow-x: auto; }
.aj-costos { width: 100%; min-width: 680px; border-collapse: collapse; }
.aj-costos th,
.aj-costos td { padding: 9px 5px; }
.aj-costos tr > :first-child { padding-left: 22px; }
.aj-costos tr > :last-child { padding-right: 22px; }
.aj-costos thead th { font-size: 11px; font-weight: 400; color: var(--marca-texto-2); text-align: left; }
.aj-costos thead .col-num { text-align: right; }
.aj-costos thead tr:last-child > * { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--marca-linea); }
.aj-costos-grupos th {
  padding-top: 10px;
  padding-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.aj-costos-grupos td { padding: 0; }
/* El subrayado de grupo corta entre columnas como el hueco de la reja. */
.aj-costos-grupos .aj-chicos { box-shadow: inset 0 -2px var(--marca-negro); color: var(--marca-negro); }
.aj-costos-grupos .aj-adelante { box-shadow: inset 0 -2px var(--marca-rojo); color: var(--marca-rojo); }
.aj-costos tbody tr { border-bottom: 1px solid var(--marca-linea); }
.aj-costos tbody tr:last-child { border-bottom: none; }
.aj-costos tbody tr:hover { background: #fafafa; }
.aj-costos tbody th { width: 28%; min-width: 170px; text-align: left; }
.aj-cuenta-nombre { display: block; font-size: 13px; font-weight: 600; }
.aj-cuenta-resumen { display: block; font-size: 11.5px; font-weight: 400; color: var(--marca-texto-2); }
.aj-cuenta-resumen.aj-sin-costo { color: var(--marca-oro-texto); }
#vista-ajustes .aj-costos .comision-banco {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  color: var(--marca-negro);
  font-family: var(--font-mono);
  font-size: 13px;
}
#vista-ajustes .aj-costos .comision-banco:focus { border-color: var(--marca-negro); box-shadow: none; }
#vista-ajustes .aj-costos .comision-banco.aj-cero { color: #bdbdbd; }
.aj-col-igv { width: 64px; text-align: center; }
.aj-costos thead .aj-col-igv { text-align: center; }
/* El IGV es sí o no: un interruptor, que sigue siendo la casilla de siempre. */
#vista-ajustes .comision-igv {
  appearance: none;
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--marca-borde);
  cursor: pointer;
  transition: background var(--dur-mid) var(--ease);
}
.comision-igv::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left var(--dur-mid) var(--ease);
}
#vista-ajustes .comision-igv:checked { background: var(--marca-rojo); }
#vista-ajustes .comision-igv:checked::after { left: 21px; }
.comision-igv:focus-visible { outline: 2px solid var(--marca-negro); outline-offset: 2px; }

/* --- Números de mis cuentas ---------------------------------------------- */
.aj-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 22px 20px;
  list-style: none;
}
.banco-numeros {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
}
.banco-numeros-nombre { font-size: 13px; font-weight: 600; }
#vista-ajustes .banco-numero {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  padding: 6px 6px 6px 10px;
}
.aj-numero-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--marca-texto-3);
  letter-spacing: .07em;
  text-transform: uppercase;
}
#vista-ajustes .banco-numero-campo {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--marca-negro);
  font-family: var(--font-mono);
  font-size: 13px;
}
.banco-numero .cta-copiar-btn:disabled { opacity: .4; cursor: default; }

/* --- Tarjetas que efectivizamos ------------------------------------------ */
.aj-alta-tarjeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: end;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--marca-linea);
  background: #fafafa;
}
.aj-alta-tarjeta[hidden] { display: none; }
.aj-alta-tarjeta .cd-btn { padding: 10px 14px; }
.aj-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px dashed #c9c9c9;
  border-radius: 8px;
  background: #fff;
  color: var(--marca-texto-2);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.aj-imagen:hover { border-color: var(--marca-negro); }
.aj-imagen small { color: var(--marca-texto-3); font-size: 13px; }

.aj-catalogo { display: flex; flex-direction: column; gap: 18px; padding: 6px 22px 22px; }
.aj-catalogo > .lista-vacia { margin: 16px 0 0; }
.catalogo-familia { display: flex; flex-direction: column; gap: 10px; }
.aj-familia-cabeza { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.aj-familia-cabeza::after { content: ''; flex: 1; height: 1px; background: var(--marca-linea); }
.aj-familia-cabeza .catalogo-familia-titulo {
  margin: 0;
  color: var(--marca-negro);
  font-size: 11px;
  letter-spacing: .08em;
}
.aj-familia-cuenta { font-family: var(--font-mono); font-size: 11px; color: var(--marca-texto-3); }
.catalogo-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.tarjeta-catalogo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
  background: #fff;
}
.tarjeta-catalogo:hover { border-color: #bdbdbd; }
.tarjeta-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--marca-linea);
  background: var(--marca-fondo);
  object-fit: contain;
}
.tarjeta-cara-vacia { color: var(--marca-texto-3); font-size: 20px; font-weight: 600; }
.aj-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px 12px; }
.aj-tarjeta-fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tarjeta-catalogo-nombre {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aj-tarjeta-cuantas { font-size: 11px; color: var(--marca-texto-2); white-space: nowrap; }
.tarjeta-catalogo-visible { display: flex; flex-wrap: wrap; gap: 4px; }
/* La casilla queda adentro, invisible: el chip entero es lo que se toca. */
.aj-chip {
  position: relative;
  padding: 4px 8px;
  border: 1px solid var(--marca-borde);
  border-radius: 999px;
  background: #fff;
  color: var(--marca-texto-3);
  font-size: 11.5px;
  cursor: pointer;
}
.aj-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.aj-chip:has(input:checked) { border-color: var(--marca-negro); background: var(--marca-negro); color: #fff; }
.aj-chip:has(input:focus-visible) { outline: 2px solid var(--marca-rojo); outline-offset: 2px; }
.aj-chip:has(input:disabled) { opacity: .6; }
/* Corregir la familia se hace una vez: chico y en gris. */
#vista-ajustes .tarjeta-catalogo-tipo {
  min-height: 0;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  color: var(--marca-texto-2);
  font-size: 12px;
}
.tarjeta-catalogo-acciones {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
  font-size: 12px;
}
.tarjeta-catalogo-acciones .enlace { color: var(--marca-texto-fuerte); cursor: pointer; }
.tarjeta-catalogo-acciones .enlace:hover { color: var(--marca-negro); text-decoration: underline; }
.tarjeta-catalogo-acciones .peligro-enlace,
.tarjeta-catalogo-acciones .peligro-enlace:hover { color: var(--marca-rojo); }

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width: 860px) {
  .aj-indice { top: 76px; }
  /* Barra de arriba (68) + índice (~46): el ancla no cae debajo de los dos. */
  .aj-card { scroll-margin-top: 136px; }
  .aj-familias { gap: 14px; padding: 16px; }
  .aj-bloque { padding: 14px 12px; }
  .aj-campos-3 { gap: 8px; }
  .aj-entrada { padding: 0 8px; }
  .aj-prueba { margin: 0 16px 16px; }
  .aj-etiquetas { padding: 4px 16px 16px; }
  /* Cada etiqueta en dos renglones: el nombre entero arriba, familia y
     porcentaje abajo. En uno solo el nombre quedaba en tres letras. */
  .aj-grupo-caja tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--marca-linea);
  }
  .aj-grupo-caja tr:last-child { border-bottom: none; }
  .aj-grupo-caja table:has(+ form) tr:last-child { border-bottom: 1px solid var(--marca-linea); }
  .aj-grupo-caja td,
  .aj-grupo-caja th,
  .aj-grupo-caja table:has(+ form) tr:last-child > * { border-bottom: none; }
  .aj-grupo-caja th { flex: 1 0 100%; max-width: none; padding-bottom: 2px; }
  .aj-grupo-caja td { padding-top: 4px; }
  .aj-grupo-caja td:last-child { margin-left: auto; }
  .alta-etiqueta { grid-template-columns: minmax(0, 1fr) auto; }
  .alta-etiqueta > input:first-child { grid-column: 1 / -1; }
  .aj-costos tr > :first-child { padding-left: 16px; }
  .aj-costos tr > :last-child { padding-right: 16px; }
  .aj-numeros { padding: 14px 16px 16px; }
  .aj-alta-tarjeta { padding: 14px 16px; }
  .aj-catalogo { padding: 4px 16px 16px; }
  .catalogo-tarjetas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (pointer: coarse) {
  .aj-chip,
  .aj-quitar,
  .banco-numero .cta-copiar-btn,
  .alta-etiqueta button { min-height: 36px; }
}

/* Un enlace de acción destructiva: el mismo peso que el de al lado, el color de
   error para que no se confunda con él. */
.peligro-enlace { color: var(--color-error-text); }
.peligro-enlace:hover,
.peligro-enlace:active { color: var(--color-error-hover); }

/* Buscar dentro de una lista larga. Del ancho de un formulario y no de la
   pantalla: un campo de mil píxeles para escribir cuatro letras parece pedir
   otra cosa. */
.buscador {
  display: block;
  width: 100%;
  max-width: var(--ancho-formulario);
  margin-bottom: var(--size-sm);
}
/* Buscar y no encontrar nada. `.lista:empty` esconde la caja, así que sin este
   aviso la pantalla quedaría idéntica a la de un sistema sin datos. */
.nota-vacia {
  margin: 0 0 var(--size-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}